/*
Theme Name: Spectra
Author: Chris Collins
*/

/* #All Sizes
================================================== */

    .container        							{width:96%;margin: 0 auto;max-width: 1200px;}
    #mobilemenuicon								{display:none;}
    .front .field-name-body,
	.front .page-title							{padding-right: 320px;}
	.front #post-content:before					{width: 297px;height: 238px;position: absolute;}
	#main-menu li a {padding: 40px 10px;}
	#main-menu > .menu > li.last a {padding: 20px 10px;margin: 20px 10px 20px 0;background: #049865;font-weight: 600;}
	#main-menu > .menu > li.last a:hover {background: #066041;color: #fff!important;}
	#main-menu ul.menu li {margin: 0;float: left;}
	#main-menu li ul {margin: 0 0 0 -30px;}


    /* News */
    #block-views-all-content-block-2 .views-row {/* width: 46%; */}
	#block-views-all-content-block-2 .views-row-1 {margin-right: 8%;}
	#block-views-all-content-block-2 .views-field-field-article-image {/* margin-right: 4%; */width: 48%;}

	/* Paragraphs */
	.paragraph-video-banner video {width: initial;}


    /* GRID */
    #inner-sidebar 				{float: left;width: 35%;margin-right:2%;}
	.with-inner-sidebar 		{float: left;width: 63%;}
	.without-sidebar 			{width:100%;}
	.with-sidebar 				{float:left;width:70%;}
	.sidebar 					{float:right;width:28%;margin-left:2%;}
    .bottom-four 				{width: 23%;margin-left:2%;}
    .bottom-four:last-child		{/* width: 46% */}
    .bottom-three 				{width:32%;margin-left:2%;}
    .bottom-two 				{width:49%;margin-left:2%;}
    .bottom-one 				{width:100%}
    #bottom .container > div 				{float:left;}
    #bottom .container > div:first-child	{margin:0;}



/* #Large Devices Desktops (up to 1300px)
================================================== */

@media only screen and (max-width: 1300px) {
	.container								  {}
	#main-menu li a {padding: 30px 7px;}
	#main-menu > .menu > li.last a {padding: 10px 7px;}

    /* Footer */
    .bottom-four 		    	{width:20%;margin-left:2%;}
    .bottom-four:last-child		{width: 34%}

}

/* #Medium devices Desktops (up to 992px)
================================================== */

    /* Note: Design for a width of 992px */

@media only screen and (max-width: 992px) {
	.container        			{width:90%;margin:0 5%;}
	#logo img					{}
	#main-menu ul.menu {text-align: center;}
	#main-menu ul.menu li {float: none;display:inline-block;}
	#main-menu li a {padding: 10px 15px 15px 15px;}
	#main-menu > ul {margin: 0 60px;}
	#main-menu li ul {margin: 0 0 0 -100px;}


    /* News */
    #block-views-all-content-block-2 .views-row {width: 100%;}
	#block-views-all-content-block-2 .views-row-1 {margin-right: 0%;}
	#block-views-all-content-block-2 .views-field-field-article-image {margin-right: 3%;width: 31%;}

}


/*  #Small devices Tablets (up to 768px)
================================================== */

@media only screen and (max-width: 768px) {
	.container        			{}
	#logo img					{}
	#main-menu 					{display:none}
	#mobilemenuicon				{display:block;}
	#menubar 					{padding:20px 0 40px 0!important;}
	#headerright 				{top:55px!important;font-size:13px!important;line-height:16px}
	.front .field-name-body,
	.front .page-title			{padding-right: 200px;}
	.front #post-content:after 	{width: 180px;height: 144px;}
	.mastercontainer {padding-top: 77px!important}

	/* News */
	#block-views-all-content-block-2 .views-field-title {font-size:14px!important;line-height:16px;}

	/* Paragraphs */
	.paragraph-slideshow .field-name-field-slideshow-caption {padding: 20px 100px 20px 0!important;}

	/* Footer */
	#bottom .block .content 	{text-align:center;}
	#bottom .block 				{font-size: 17px;line-height: 24px;}
	#bottom .block li 			{list-style-type:none!important;text-align:center;}
	#copyright .credit,
	#bottom h2 			{text-align:center;}
	#bottom h2:after {left: 50%!important; margin-left: -18px;}
	#bottom .block .content li:before {display: none!important;}

	/* GRID */
	.with-sidebar 							{width:100%;}
	.sidebar 								{width:100%;margin-left:0%;}
    .bottom-four,
    .bottom-three,
    .bottom-two,
    .bottom-one 				{width:100%!important;margin:0!important}
    .bottom-three:nth-child(1),
    .bottom-three:nth-child(2)	{width:50%!important;}

	/* Tables */
	table{
		font-size: 12px;
		line-height: 20px;
	}
	table td{
		padding: 4px;
	}
	.field.field-name-field-caption.field-type-text{
		font-size: 20px!important;
		line-height: 30px!important;
	}

	.field-name-field-paragraphs > .field-items > .field-item:first-child .paragraph-slideshow, .field-name-field-paragraphs > .field-items > .field-item:first-child .paragraph-video-banner{
		margin-top: 0px!important;
	}
	#menubar{
		background-color: white!important;
	}
	#mobilemenuicon{
		color: black!important;
	}
	#logo img{
    margin: 0!important;
    display: block!important;
    transform: initial!important;
    max-width: 100%!important;
 }
	#logo{
		float: none!important;
		clip-path: none!important;
	}
  body.page-manage .view-bookings fieldset{
    width: 100%!important;
    margin-left: 0!important;
  }
}

/* Fix the video ratios for smaller screens as we cant use 100% */
.not-front video#vid {min-height:630px;} .page-node-153.not-front video#vid {min-height:890px}
@media only screen and (max-width: 1600px) {   video#vid {height: 840px;min-height:auto;}  }
@media only screen and (max-width: 1400px) {   video#vid {height: 730px;} }
@media only screen and (max-width: 1200px) {   video#vid {height: 625px;} }
@media only screen and (max-width: 1000px) {   video#vid {height: 520px;} }
@media only screen and (max-width: 800px) {   video#vid {height: 415px;}  }
@media only screen and (max-width: 600px) {   video#vid {height: 310px;}  }
@media only screen and (max-width: 500px) {   video#vid {height: 255px;}  }
@media only screen and (max-width: 400px) {   video#vid {height: 205px;}  }
@media only screen and (max-width: 320px) {   video#vid {height: 160px;}  }


/* #Extra small devices Phones Landscape (up to 480px)
================================================== */

@media only screen and (max-width: 480px) {
	.front .field-name-body,
	.front .page-title			{padding-right: 0px;}
	.front #post-content:before	{width: 100%;position:relative;margin-top: -25px;}

	/* Slideshow */
    #block-views-image-blocks-block .views-row .caption {}

    /* Image Blocks */

    /* News */
	#block-views-all-content-block-2 .views-field-title {font-size:12px!important;line-height:14px;}
	#block-views-all-content-block-2 .views-field-created {text-align: right;}
	#block-views-all-content-block-2 .views-field-title {padding: 10px 10px 10px 0!important}
	#block-views-all-content-block-2 .views-field-field-article-image {margin-right: 3%;width: 42%;}

	/* Paragraphs */
	.columns {width: 98%!important;}

	.paragraph-slideshow .field-name-field-slideshow-caption {font-size: 20px;line-height: 22px;}

	/* GRID */
	#inner-sidebar 		{width: 100%;margin-right:0%;}
	.with-inner-sidebar {width:100%;}
	.bottom-three:nth-child(1),
    .bottom-three:nth-child(2)	{width:100%!important;}

}

/* #Extra Extra small devices Phones Portrait (up to 320px)
================================================== */

@media only screen and (max-width: 320px) {



}




/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }

	img.scale-with-grid {
		max-width: 100%;
		height: auto; }