		.logo{border:0px solid red;padding:2px;min-width:80px;}
		.mi-usa{max-width:40px;position:absolute;top:65px;right:10px;}
		.mi-usa-lg{display: none;} 

		.mi-usa-bar{top:55px;font-size: clamp(.5rem, 2vw, .8rem);}
		.mi-usa-bar svg{max-height: 20px;}

	/* .mi-usa-lg{max-height:30px;display:inline-block;position:relative;top:5px;left:-30px;margin-right:-30px;} */
		body{
			padding-top:55px;
			overflow-x: hidden;
			font-family: 'Open Sans', sans-serif;
		}
		body.app-page{padding-top:80px;}
		.text-blue{color:#0c3f65;}
		.bg-blue, .bg-bluegrade{background-color:#03243c;border-bottom:4px solid #0c3f65;}
		.bg-bluegrade{border-bottom:0 none;background-image: linear-gradient(#03243c, #4b667a);}
		
		.bg-graygrade{background-color:#d9d9d9;max-height:540px;}
		.bg-graygrade{border-bottom:0 none;background-image: linear-gradient(#d9d9d9, #fff);}
		
		.bg-graydient{background-color:#d9d9d9;}
		.bg-graydient{border-bottom:0 none;background-image: linear-gradient(#d9d9d9, #fff);}
		
		.bg-skybluegrade{background-color:#d6e2ee;}/*border-bottom:4px solid #0c3f65;*/
		.bg-skybluegrade{border-bottom:0 none;background-image: linear-gradient(#d6e2ee, #fff);}
		
		.bg-1605 {background-color:#f7f6f1;color:#272727;}
		.bg-1205 {background-color:#cfcfc7;color:#272727;}
		.bg-1625 {background-color:#a8acad;color:#272727;}
		.bg-1925 {background-color:#808082;color:#fff;}
		.bg-0981 {background-color:#1b1b1b;color:#fff;}
		.bg-1914 {background-color:#b6a17e;color:#272727;}
		.bg-0204 {background-color:#96262d;color:#fff;}
		.bg-1804 {background-color:#903939;color:#fff;}
		.bg-0205 {background-color:#5a534d;color:#fff;}
		.bg-0802 {background-color:#4a7492;color:#fff;}
		.bg-0705 {background-color:#083d61;color:#fff;}
		.bg-0614 {background-color:#2a4a32;color:#fff;}
		.bg-0314 {background-color:#6c8072;color:#fff;}
	
		
		.btn-outline-primary {
			--bs-btn-color: #03243c;
			--bs-btn-border-color: #03243c;
			--bs-btn-hover-color: #fff;
			--bs-btn-hover-bg: #03243c;
			--bs-btn-hover-border-color: #03243c;
			--bs-btn-focus-shadow-rgb: 13,110,253;
			--bs-btn-active-color: #fff;
			--bs-btn-active-bg: #03243c;
			--bs-btn-active-border-color: #03243c;
			--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
			--bs-btn-disabled-color: #03243c;
			--bs-btn-disabled-bg: transparent;
			--bs-btn-disabled-border-color: #03243c;
			--bs-gradient: none;
			--bs-btn-font-weight: bold;			
		}
		
		.phone2{
			font-size:1em;
			font-weight:400;
			width:100%;
			text-align:right;
		}
		
		#tc-nav{z-index:9999 !important;}
		nav{z-index:9998 !important;}
		
		/*navbar hamburger to X */
		.navbar-toggler {
			width: 20px;
			height: 20px;
			position: relative;
			transition: .5s ease-in-out;
		}
		
		.navbar-toggler,
		.navbar-toggler:focus,
		.navbar-toggler:active,
		.navbar-toggler-icon:focus {
			outline: none;
			box-shadow: none;
			border: 0;
			position: relative;
		}
		
		.navbar-toggler span {
			margin: 0;
			padding: 0;
		}
		
		.toggler-icon {
			display: block;
			position: absolute;
			height: 2px;
			width: 100%;
			background: #fff;
			border-radius: 1px;
			opacity: 1;
			left: 0;
			transform: rotate(0deg);
			transition: .25s ease-in-out;
		}
		
		.middle-bar {
			margin-top: 0px;
		}
		
		
		/* State when the navbar is collapsed */
		
		.navbar-toggler.collapsed .top-bar {
			position: absolute;
			top: 0px;
			transform: rotate(0deg);
		}
		
		.navbar-toggler.collapsed .middle-bar {
			opacity: 1;
			position: absolute;
			top: 10px;
			filter: alpha(opacity=100);
		}
		
		.navbar-toggler.collapsed .bottom-bar {
			position: absolute;
			top: 20px;
			transform: rotate(0deg);
		}
		
		/* when navigation is clicked */
		
		.navbar-toggler .top-bar {
			top: inherit;
			transform: rotate(135deg);
		}
		
		.navbar-toggler .middle-bar {
			opacity: 0;
			top: inherit;
			filter: alpha(opacity=0);
		}
		
		.navbar-toggler .bottom-bar {
			top: inherit;
			transform: rotate(-135deg);
		}
		
		/* Color of 3 lines */
		
		.navbar-toggler.collapsed .toggler-icon {
			/*background: linear-gradient( 263deg, rgba(252,74,74,1) 0%, rgba(0,212,255,1) 100% );*/
			background:#fff
		}
		/*end navbar hamburger to X */
		
		.phonenum{
			font-size:.8rem;
			display:none;
		}
		.phone-icon{
			font-size:1.3em;
			left:-15px;
			top:5px	
		}
		
		.estimate a{font-size:.7rem;}		

		.tinytext{font-size:smaller;}		
		
		.border-blue {
			border:3px solid #03243c !important;
		}
		.bg-gradient{
			/*--bs-gradient: linear-gradient(180deg, rgba(14, 85, 141, 0.25), rgba(14, 85, 141, 0));	*/
			background-color: #2578cf; /* For browsers that do not support gradients */
  			background-image: linear-gradient(to right, rgba(14, 85, 141, 0.65), rgba(14, 85, 141, 0)) !important;
		}
		.bg-greendient{
			/*--bs-gradient: linear-gradient(180deg, rgba(14, 85, 141, 0.25), rgba(14, 85, 141, 0));	*/
			background-color: #198754; /* For browsers that do not support gradients */
  			background-image: linear-gradient(to right, rgba(35, 170, 105, 0.65), rgba(35, 170, 105, 0)) !important;
		}
		
		
		/*carousel*/
		
		#carouselExampleIndicators .carousel-indicators{
			left: initial;
			right:-45px;
			width:30%;
		}
		
		#carouselExampleIndicators img {
			width:100%;
			height:auto;
		}
		
		#carouselExampleIndicators .carousel-caption {
				top:-10px;
		}
		
		#carouselExampleIndicators .carousel-caption h1 {
				/*font-size:13px;*/
		}
		#carouselExampleIndicators .carousel-caption ul {
				/*font-size:11px;font-style:italic;*/
				font-size:18px;font-style:italic;
			
		}
		#carouselExampleIndicators .carousel-caption small {
				font-size:8px;font-style:italic;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:12px;
		}
		
		.carousel-indicators [data-bs-target] {
			background-color:#3189c9;
			border:1px solid #3189c9;
		}
		.carousel-indicators .active {
			opacity: 1;
			width:100%;
		}
		
		#carouselExampleIndicators .carousel-item img{			
			height: 400px;
			object-fit: cover;	
			object-position: 63.5% 50%;
		}
		
		.text-shadow-sm {text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
		.text-shadow {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
		.text-shadow-lg {text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);}

		
		.appsrow .card{max-width:412px;border:0 none;}
		
		#breaking {
		  font-size: 36px;
		  font-weight: bold;
		  padding: 5px;
		  background: #1EB897;
		  color: #F7FAFC;
		  /*position: fixed;*/
		  position:relative;
		  top: 0;
		  left: 0;
		  z-index: 999;
		  height: 100px;
		  width: 300px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  
		  display:none; /*don't need this*/
		}
		#breaking, #newsTicker {
		  border: 0px solid #000;
		}
		#newsTicker {
		  /*position: fixed;*/
		  position: relative;
		  width: 100%;
		  /*background: #3B7E70;*/
		  background: #fff;
		  color: blue;
		  /*box-shadow: 0px 0px 8px 2px #000000;*/
		  white-space: nowrap;
		  overflow: hidden;
		  box-sizing: border-box;
		  padding-top: 5px;
		  padding-bottom: 5px;
		  z-index: 998;
		  height:100px;
		  display: flex;
		  align-items: center;
		  margin-top:0rem;
		  margin-bottom:0rem;
		}
		
		.date {
		  margin-right: 10px;
		  text-decoration: underline;
		}
		.story {
		  margin-right: 20px;
		  max-height:50px;
		}
		#newsTicker p {
		  margin: 0;
		  display: inline-block;
		  font-size: 32px;
		  /*padding-left: 100%;
		  animation: tickerTape 120s linear infinite;*/
		  animation: tickerTape 50s linear infinite;
		}
		
		@keyframes tickerTape {
		  0% {
			transform: translate(0, 0);
		  }
		  100% {
			transform: translate(-100%, 0);
		  }
		}
		
		.content {
		  position: absolute;
		  min-width: 100vw;
		  height: calc(100vh - 45px);
		  margin-top: 45px;
		  background: url("/wp-content/themes/Olympia2023/img/barndominium.jpg");
		/*   background: url("https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/12/06/12/v2-bbc%20camera%20robot%20news.jpg"); */
		  background-repeat: no-repeat;
		  background-attachment: fixed;
		  background-position: center;
			  background-size: cover;
		}
		.navbar-dark .navbar-nav a.nav-link {
			  color: #ffffff;
			  font-size: 1.1em;
			}
			.dropdown-menu {
			  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
			  border: none;
			  border-radius: 0;
			  padding: 0.7em;
			  /*width: 100%;*/
			}
			
			.lil-top-nav{
				  border-top: 1px solid #053558;
			  }
			
			
			
			/*visualizer banner */
			.visualize{
				position:relative;
				top:0px;
				left:0px;	
			}
			.visualize .fs-3, h2{
				font-size:20px !important;
			}
			.imgvis{
				width:300%;	
				position:relative;
				left:-250px;
			}
			
			/*for the multi-view carousel*/
        
			.tc-inner {
			  padding: 1em;
			}
			.tc-card {
			  margin: 0 0.5em;
			  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
			  border: none;
			  background-color:#fff;
			  /*min-height:25em;*/
			  min-height:26em;
			}			
			
			.tc-card h3{font-size:1.5rem !important;}
			.tc-card .fs-5{font-size:.9rem !important;}
			
			
			.tc-carousel-control-prev,
			.tc-carousel-control-next {/*0c3f65
			  background-color: #e1e1e1;*/
			  background-color: #0c3f65;
			  width: 6vh;
			  height: 6vh;
			  border-radius: 50%;
			  top: 50%;
			 /* transform: translateY(-50%);*/
			  transform: translateY(-50%);
			}

			.tc-card .img-wrapper {
				max-width: 100%;
				height: 13em;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.tc-card img {
				max-height: 100%;
			}
			
			.quoteform form div, .quotemain form div{
				max-height:40px;
			}
			
			.footer-part{
				border-top:10px solid #393b36;
				background-color:#d3d1d2;
				background-image: linear-gradient(#d3d1d2, #f8f8f8);
			}
			
			.breadcrumb li{
				font-size:.75em;
			}
			
			.quoteform form label,.quotemain form label {
				margin:0;
				padding:0 .25em !important;
				background-color:#fff;
				position:relative;
				top:3px;
				left:5px;
				font-size:.9em;
				font-weight:bold;
				z-index:9000;
			}

			#myModal .modal-dialog {
				  max-width: 1000px;
				  margin: 175px auto;
			  }
			
			#myModal .modal-body {
			  position:relative;
			  padding:0px;
			}
			#myModal .btn-close {
			  position:absolute;
			  right:-30px;
			  top:0;
			}
			
			#theForm .modal .modal-dialog{
					top: 5em;
			}
			
			#v-pills-tab{position:relative;left:1px;border-bottom:0 none;}
			#v-pills-tab a.active{
				border:0 none;
				border-top:1px solid #dee2e6;
				border-left:1px solid #dee2e6;
				border-bottom:1px solid #dee2e6;
				border-right:1px solid #fff;
				border-radius: 0px;
				border-top-left-radius:10px;
				border-bottom-left-radius:10px;
			}
			
		.specbpoints{
			font-size:12px;	
		}
		
		
	.quoteform form .input-group span,.quotemain form .input-group span{
		background-color:#272727;
		border:1px solid #272727;
		border-left:0 none;
		color:#ccc;	
		font-size:.75em;
	}
	
	/*Logo Chyron*/
	.logo-container {
		animation: moveLeftToRight 15s linear infinite;
		width:605%; /* Adjust the width to accommodate all logos */
	}
	.logo-container img {
		/*width: 277px;
		height: 90px;*/
		width: 140px;
		height: 45px;
		display: inline-block;
		opacity: 0;
		animation: fadeInOut 15s linear infinite;
	}
	
	@keyframes moveLeftToRight {
		0% {
			/*transform: translateX(100%);*/
			transform: translateX(25%);
			}
		100% {
			/*transform: translateX(calc(-277px * 14));*/
			transform: translateX(calc(-140px * 14));
			}
	}
	@keyframes fadeInOut {
		0% {
			opacity: 1; /* Fully visible at the beginning */
			}
		93% {
			opacity: 1; /* Fully visible while the first and last logos are in the middle */
			}
		100% {
			opacity: 0; /* Fade out when the last logo reaches the left side */
			}
	}
	
	
	#carouselExampleSlidesOnly .carousel-item img{width:210% !important; max-height:30px;}
	#carouselExampleSlidesOnly .carousel-item img.third{left:-285px;clip-path: inset(0px 100px 0px 300px);}
	
	/*end Logo Chyron*/

.liner {
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.liner:after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: #ffffff;
  min-width: 20px;
  margin: auto;
}

.liner:after {
  margin-left: 20px;
}
	
	/*Color Picker*/
	.polwhite{background-color: #e7e7e8;border-color: #e7e7e8;}
	.polwhite:hover{background-color:#e7e7e8;border-color:#838382;color:#333;opacity: 0.8;}
	.lightstone {background-color:#dad7cb;border-color:#dad7cb;color:#333;}
	.lightstone:hover{background-color:#dad7cb;border-color:#777;color:#333;opacity: 0.8;}
	.pearlgray {background-color:#b2b4b3;border-color:#dad7cb;color:#333;}
	.pearlgray:hover{background-color:#b2b4b3;border-color:#777;color:#333;opacity: 0.8;}
	.slategray {background-color:#878685;border-color:#878685;color:#fff;}
	.slategray:hover{background-color:#878685;border-color:#777;color:#fff;opacity: 0.8;}
	.hawblue {background-color:#3d7898;border-color:#3d7898;color:#fff;}
	.hawblue:hover{background-color:#3d7898;border-color:#777;color:#fff;opacity: 0.8;}
	.galblue {background-color:#004165;border-color:#004165;color:#fff;}
	.galblue:hover{background-color:#004165;border-color:#777;color:#fff;opacity: 0.8;}
	.wallblack {background-color:#1b1b1b;color:#fff;}
	.wallblack:hover{background-color:#1b1b1b;border-color:#777;color:#fff;opacity: 0.8;}
	
	.saharatan {background-color:#c2a880;border-color:#c2a880;color:#fff;}
	.saharatan:hover{background-color:#c2a880;border-color:#777;color:#fff;opacity: 0.8;}
	.britered {background-color:#b5111b;border-color:#b5111b;color:#fff;}
	.britered:hover{background-color:#b5111b;border-color:#777;color:#fff;opacity: 0.8;}
	.rusticred {background-color:#8a343d;border-color:#8a343d;color:#fff;}
	.rusticred:hover{background-color:#8a343d;border-color:#777;color:#fff;opacity: 0.8;}
	.burnslate {background-color:#5f574f;border-color:#5f574f;color:#fff;}
	.burnslate:hover{background-color:#5f574f;border-color:#777;color:#fff;opacity: 0.8;}
	.ferngreen {background-color:#104431;border-color:#104431;color:#fff;}
	.ferngreen:hover{background-color:#104431;border-color:#777;color:#fff;opacity: 0.8;}
	.colonygreen {background-color:#718674;border-color:#718674;color:#fff;}
	.colonygreen:hover{background-color:#718674;border-color:#777;color:#fff;opacity: 0.8;}
	
	#main-trim{z-index:20; top:-25px;}
	#main-endwall{z-index:10; top:-25px}
	#main-img{z-index:1; top:-25px}
	.viewslate{height:155px;}
	
	/*end Color Picker*/
			
	.price-hdr {font-size: clamp(1.2rem, 2vw, 1.8rem);}	

/*quote and brochure button updates*/
.qtbrochbtn .btn{width:100%;}

/******************************************************************* screen sizes ***************************************************************************/			
/*mobile, portrait*/
@media only screen and (min-width:375px) {
	body.app-page{padding-top:80px;}
	.logo{border:0px solid blue;}
	/*Logo Chyron*/
	.logo-container {width:600%; /* Adjust the width to accommodate all logos */}
	/*end Logo Chyron*/
	.phone-icon{left:-30px;}
	#carouselExampleSlidesOnly .carousel-item img.third{left:-325px;clip-path: inset(0px 100px 0px 325px);}
	
	/*Color Picker*/
	.viewslate{height:175px;}
	/*end Color Picker*/
}

/*mobile, portrait*/
@media only screen and (min-width:414px) {
	body{padding-top:55px;}
	.logo{border:0px solid green;}
	.imgvis{left:-290px;}
	.breadcrumb li{font-size:.8em;}
	.offcanvas.offcanvas-end{width:100%;}
	.phonenum{
		display:inline !important;
		margin-right:1em;	
	}
	.phone2{display:none;}
	.phone-icon{display:none;}
	
	#carouselExampleIndicators .carousel-caption {
		top:10px;
	}
		
	#carouselExampleIndicators .carousel-caption h1 {
		font-size:24px;
	}
	#carouselExampleIndicators .carousel-caption ul {
		font-size:20px;
	}
	#carouselExampleIndicators .carousel-caption small {
		font-size:11px;
	}
	#carouselExampleIndicators .carousel-caption button {
		font-size:13px;
	}
	#carouselExampleSlidesOnly .carousel-item img.third{left:-355px;clip-path: inset(0px 125px 0px 360px);}
	
	.qtbrochbtn .btn{width:48%;}
}

/*mobile, landscape
@media only screen and (min-width:568px) {
	bootstrap breakpoint - SM */
@media only screen and (min-width:576px) {	
	body{padding-top:75px;}
	body.app-page{padding-top:100px;}
	.logo{border:0px solid purple;min-width:130px;}
	.mi-usa{top:100px;}
	.imgvis{width:200%;left:-160px;}
	.breadcrumb li{font-size:inherit;}
	.w-75{max-width:300px;}	
	.phonenum,.estimate a{font-size:1em;}
	#carouselExampleIndicators .carousel-caption {
				top:40px;
		}
		
		#carouselExampleIndicators .carousel-caption h1 {
				font-size:2em;
		}
		#carouselExampleIndicators .carousel-caption ul {
				font-size:1.2em;
		}
		#carouselExampleIndicators .carousel-caption ul li{
				margin-bottom:10px;
		}
		#carouselExampleIndicators .carousel-caption small {
				font-size:12px;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:15px;margin-top:.9em;
		}
	
	
	/*Logo Chyron*/
	.logo-container {width:450%; /* Adjust the width to accommodate all logos */}
	.logo-container img {
		width:180px;
		height:59px;
	}
	
	@keyframes moveLeftToRight {
		0% {
			/*transform: translateX(100%);*/
			transform: translateX(25%);
			}
		100% {
			/*transform: translateX(calc(-277px * 14));*/
			transform: translateX(calc(-180px * 14));
			}
	}
	@keyframes fadeInOut {
		0% {
			opacity: 1; /* Fully visible at the beginning */
			}
		93% {
			opacity: 1; /* Fully visible while the first and last logos are in the middle */
			}
		100% {
			opacity: 0; /* Fade out when the last logo reaches the left side */
			}
	}
	
	#carouselExampleSlidesOnly .carousel-item img.third{left:-300px;clip-path: inset(0px 305px 0px 340px);}
	/*end Logo Chyron*/
	/*Color Picker*/
	.viewslate{height:280px;}
	/*end Color Picker*/
}

/*mobile, landscape*/
@media only screen and (min-width:667px) {
	.logo{border:0px solid orange;}
	.mi-usa{display:none;}
	.mi-usa-lg{max-height:30px;display:inline-block;position:relative;top:5px;left:-30px;margin-right:-30px;}
	.imgvis{left:-190px;}
	.bg-graygrade{top:6px;}
	/*Logo Chyron*/
	.logo-container {width:400%; /* Adjust the width to accommodate all logos */}
	
	#carouselExampleSlidesOnly .carousel-item img{width:175% !important;max-height:55px;}
	#carouselExampleSlidesOnly .carousel-item img.third{left:-315px;clip-path: inset(0px 215px 0px 340px);}
	/*end Logo Chyron*/
	
	/*Color Picker*/
	.viewslate{height:340px;}
	/*end Color Picker*/
}

/*mobile, landscape, bootstrap breakpoint - MD*/
@media only screen and (min-width:736px) {
	.imgvis{left:-200px;}
	.logo{border:0px solid yellow;}
	#carouselExampleIndicators .carousel-caption h1 {
				font-size:2.5em;
		}
		#carouselExampleIndicators .carousel-caption ul {
				font-size:1.4m;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:15px;margin-top:1.25em;
		}
		
		#carouselExampleIndicators .carousel-indicators{width:20%;}
	/*Logo Chyron*/
	.logo-container {width:350%; /* Adjust the width to accommodate all logos */}
	
	#carouselExampleSlidesOnly .carousel-item img.third{left:-355px;}
	/*end Logo Chyron*/
}


@media only screen and (min-width:768px) {
	.logo{border:0px solid white;}
	.tc-item {
		margin-right: 0;
		flex: 0 0 33.333333%;
		display: block;
	}
	.tc-inner {
		display: flex;
	}
	.tc-card .img-wrapper {
		height: 17em;
	}
	.bg-graygrade{max-height:710px;}	
	.tc-card {min-height:38em;}
	.shoutout{
		 top:40px !important;
		 left:50px;
		 width:56%;
		 height:80px;
		 text-align:left;
		 padding-left:20px;
		 padding-top:10px;
	}
		
		#carouselExampleIndicators .carousel-caption {
				top:110px;
		}
		#carouselExampleIndicators .carousel-caption h1 {
				font-size:2.5em;
		}
		#carouselExampleIndicators .carousel-caption ul {
				font-size:1.3em;
			    max-width:460px;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:15px;margin-top:1.25em;
		}
	#carouselExampleSlidesOnly .carousel-item img.third{left:-370px;}
	
.liner:after {
  background: #0c3f65;
}	
	/*Color Picker*/
	.viewslate{height:100%;}
	/*end Color Picker*/	
}
/*mobile, landscape*/
@media only screen and (min-width:812px) {
	.logo{border:0px solid pink;}
	.imgvis{width:150%;left:-315px;}
	#carouselExampleIndicators .carousel-caption {top:120px;}
	/*Logo Chyron*/
	.logo-container {width:320%; /* Adjust the width to accommodate all logos */}
	/*end Logo Chyron*/
}

/*tablet, portrait*/
@media only screen and (min-width:834px) {
	.logo{border:0px dashed white;}
	#carouselExampleSlidesOnly .carousel-item img.third{left:-400px;}
}


/*bootstrap breakpoint - LG*/
@media only screen and (min-width:992px) {
	body{padding-top:75px;}
	body.app-page{padding-top:80px;}
	.logo{border:0px dashed yellow;}
	
	.imgvis{width:100%;left:0px;}
	.visualize{
		position:absolute;
		top:10px;
		left:50px;	
		color:#fff;
	}
	.bg-graygrade{max-height:610px;}
	.tc-card {min-height:32em;}
	
	.shoutout{
		 top:50px !important;
	}
	
		#carouselExampleIndicators .carousel-caption {
				top:140px;
		}
		#carouselExampleIndicators .carousel-caption h1 {
				font-size:2.5em;
		}
		#carouselExampleIndicators .carousel-caption ul {
				font-size:1.5em;
			    max-width:525px;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:.75em;
				margin-top:1.5em;
		}
		#carouselExampleIndicators .carousel-indicators{
			right:-130px;
			width:12%;
		}
		
		#carouselExampleIndicators .carousel-item img{			
			height: initial;
			object-fit: cover;	
		}
		
	/*Logo Chyron*/
	.logo-container {
		width:290%; /* Adjust the width to accommodate all logos */
	}
	.logo-container img {
		/*width: 277px;
		height: 90px;*/
		width: 200px;
		height: 65px;
		display: inline-block;
		opacity: 0;
		animation: fadeInOut 15s linear infinite;
	}
	
	@keyframes moveLeftToRight {
		0% {
			/*transform: translateX(100%);*/
			transform: translateX(45%);
			}
		100% {
			/*transform: translateX(calc(-277px * 14));*/
			transform: translateX(calc(-200px * 14));
			}
	}
	@keyframes fadeInOut {
		0% {
			opacity: 1; /* Fully visible at the beginning */
			}
		93% {
			opacity: 1; /* Fully visible while the first and last logos are in the middle */
			}
		100% {
			opacity: 0; /* Fade out when the last logo reaches the left side */
			}
	}
	
	#carouselExampleSlidesOnly .carousel-item img{width:140% !important;max-height:60px;}
	/*end Logo Chyron*/
	
	#theForm .modal .modal-dialog{top:7em;}
}
/*for the mega menus, I think*/

/*tablet, landscape*/
@media only screen and (min-width:1024px) {	
	.logo{border:0px dashed orange;}
	.offcanvas-end{width:auto !important;max-width:900px !important;}
	.shoutout{width:42%;}
	
		
	/*Logo Chyron*/
	.logo-container {width:280%; /* Adjust the width to accommodate all logos */}
	/*end Logo Chyron*/
}

/*tablet, landscape*/
@media only screen and (min-width:1112px) {
	.logo{border:0px dashed purple;}
	.bg-graygrade{max-height:550px;}
	.tc-card {min-height:28em;}
		
	/*Logo Chyron*/
	.logo-container {width:260%; /* Adjust the width to accommodate all logos */}
	/*end Logo Chyron*/
}

/*bootstrap breakpoint XL*/
@media only screen and (min-width:1200px) {
	body{padding-top:100px;}
	body.app-page{padding-top:100px;}
	.logo{border:0px dashed green;min-width:180px;}
	.lil-top-nav{
		position:absolute;
		top:0px;
		right:0px;
		border-bottom: 1px solid #053558;
		border-top:0 none;
		font-size:12px;
	}
	
	.visualize{top:25px;}
	.bg-graygrade{max-height:505px;}
	.tc-card {min-height:25em;}
	/*Logo Chyron*/
	.logo-container {width:235%; /* Adjust the width to accommodate all logos */}
	/*end Logo Chyron*/
	#theForm .modal .modal-dialog{top:8em;}
	
	#carouselExampleSlidesOnly .carousel-item img{width:115% !important;max-height:65px;}

}
/*laptop-1*/
@media only screen and (min-width:1366px) {
	.logo{border:0px dashed blue;}
	.mi-usa-lg{max-height:40px;top:10px;left:-20px;margin-right:-20px;}
	.quoteform{
		width:30%;
		position:absolute;
		top: 200px;
		right:20px;
		z-index:999;
	}
	.quoteform form label,.quotemain form label {
		margin:0;
		padding:0 .25em !important;
		background-color:#fff;
		position:relative;
		top:11px;
		left:5px;
		font-size:.75em;
		font-weight:bold;
	}
	.quoteform form input,.quoteform form select,.quotemain form input,.quotemain form select {
		border:1px solid #272727;
	}
	
	.quoteform form div,.quotemain form div{
		max-height:30px;
	}
	
	.shoutout{
		 top:50px !important;
		 width:32%;
	}
	
		#carouselExampleIndicators .carousel-caption {
				top:140px;
		}
		#carouselExampleIndicators .carousel-caption h1 {
				font-size:2.5em;
		}
		#carouselExampleIndicators .carousel-caption ul {
				font-size:1.5em;
				font-weight:normal;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:.75em;
				margin-top:1.5em;
		}
			
		.speclay .fs-6 small,
		div.col-6.fw-bold.fs-6,
		div.col-6.text-start.fs-6,
		div.col-sm-4.fw-bold.fs-6,
		div.col-sm-8.text-start.fs-6{
			font-size:.78em !important;	
		}		
		
	#newsTicker {
		margin-top:3rem;
		margin-bottom:3rem;
		height:120px;
	}
	
	.story {
		max-height:80px;
	}
	/*Logo Chyron*/
	.logo-container {width:205%; /* Adjust the width to accommodate all logos */}
	
	#carouselExampleSlidesOnly .carousel-item img{width:100% !important;}
	/*end Logo Chyron*/
		

}

/*bootstrap breakpoint - XXL*/
@media only screen and (min-width:1400px) {
	.logo{border:0px dashed red;}
	.tc-item {flex: 0 0 25%;}
}

/*laptop-2*/
@media only screen and (min-width:1440px) {
	.logo{border:0px solid red;}
	.mi-usa-lg{max-height:50px;top:12px;left:25px;margin-right:0px;}
	.quoteform{top:150px;}
	.visualize{top:45px;}
		
	.rowpad{padding:1% 10% !important;}
		
	.appshot{
		position:relative;
		top:-50px;
		left:20px;
	}	
	
	.shoutout{
		 top:70px !important;
		 width:30%;
	}
	
		#carouselExampleIndicators .carousel-caption {
				top:250px;
				left:10%;
		}
		#carouselExampleIndicators .carousel-caption h1 {
				font-size:2.75em;
		}
		#carouselExampleIndicators .carousel-caption ul {
				font-size:1.5em;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:.75em;
				margin-top:1.5em;
		}
		#carouselExampleIndicators .carousel-indicators{width:10%;}
		
	#carouselExampleIndicators{
		max-height:660px;
		overflow:hidden;
	}
	/*Logo Chyron*/
	.logo-container {width:200%; /* Adjust the width to accommodate all logos */}
	#carouselExampleSlidesOnly .carousel-item img{width:100% !important;max-height:67px;}
	/*end Logo Chyron*/
}

/*tc home screen*/
@media only screen and (min-width:1600px) {
	.logo{border:0px solid blue;}
		body{font-family: 'Roboto', sans-serif;}
	.quoteform{
		width:30%;
		top:200px;
	}
	.visualize{top:70px;}	
	.shoutout{width:26%;}
	#carouselExampleIndicators .carousel-caption h1 {
				font-size:3.5em;
		}
		#carouselExampleIndicators .carousel-caption ul {
				font-size:1.9em;
			    max-width:655px;
		}
		#carouselExampleIndicators .carousel-caption button {
				font-size:.7em;
				margin-top:1.5em;
		}
			
		.speclay .fs-6 small,
		div.col-6.fw-bold.fs-6,
		div.col-6.text-start.fs-6,
		div.col-sm-4.fw-bold.fs-6,
		div.col-sm-8.text-start.fs-6{
			font-size:.9em !important;	
		}	
	
	
	/*Logo Chyron*/
	.logo-container {
		width: 245%; /* Adjust the width to accommodate all logos */
	}
	.logo-container img {
		width: 277px;
		height: 90px;
	}
	
	@keyframes moveLeftToRight {
		0% {
			/*transform: translateX(100%);*/
			transform: translateX(50%);
			}
		100% {
			transform: translateX(calc(-277px * 14));
			}
	}
	@keyframes fadeInOut {
		0% {
			opacity: 1; /* Fully visible at the beginning */
			}
		93% {
			opacity: 1; /* Fully visible while the first and last logos are in the middle */
			}
		100% {
			opacity: 0; /* Fade out when the last logo reaches the left side */
			}
	}
	/*end Logo Chyron*/
}

/*desktop*/
@media only screen and (min-width:1680px) {
	.logo{border:0px solid green;}
	.shoutout{width:25%;}

	/*Logo Chyron*/
	.logo-container {width:230%; /* Adjust the width to accommodate all logos */}
	/*end Logo Chyron*/
}

/*desktop */
@media only screen and (min-width:1920px) {
		body{padding-top:100px;}
	body.app-page{padding-top:125px;}
	
	/* Only applies when logged into WordPress Admin */
	.customize-support .navbar.fixed-top {margin-top: 32px;}

	.logo{border:0px solid purple;min-width:200px;}
	.mainnav .dropdown-menu{
		width:auto !important;
	}
	
	/*carousel*/
	#carouselExampleIndicators{
		max-height:730px;
		overflow:hidden;
	}
	#carouselExampleIndicators img {
			width:initial;
			max-height:900px;	
		}
		
	.shoutout{
		 top:50px;
		 left:50px;
		 width:420px;
		 height:85px;
	}
	
	.quoteform {
		top:200px;
		right:100px;
		z-index:999;	
	}	
	
	.quoteform form div,.quotemain form div{max-height:40px;}
	
	.bg-opacity-tc {
    --bs-bg-opacity: 0.85;
	}
    
	div.modal.fade.bd-example-modal-xl.show {
		top:150px;	
	}
	
	.speclay .fs-6 small,
	div.col-6.fw-bold.fs-6,
	div.col-6.text-start.fs-6,
	div.col-sm-4.fw-bold.fs-6,
	div.col-sm-8.text-start.fs-6{
		font-size:1em !important;
	}
	.bg-skybluegrade .card-body{
		border:0px solid red;
		min-height:225px;	
	}
	/*Logo Chyron*/
	.logo-container {width:205%; /* Adjust the width to accommodate all logos */}
	/*end Logo Chyron*/
	#theForm .modal .modal-dialog{top:1em;}
	
	#carouselExampleSlidesOnly .carousel-item img{max-height:89px;}
	
	/*Color Picker*/	
	#main-trim{z-index:20; top:-165px;}
	#main-endwall{z-index:10; top:-165px}
	#main-img{z-index:1; top:-165px}
	/*end Color Picker*/
	
	.sticky-top {
		position: sticky;
		top:180px; /* Adjust spacing from top */
		max-height: 90vh; /* Prevents the image from taking up too much space */
		overflow: hidden;
	}
}
