/* --- 1280px --------------------------------------------- */
@media only screen and (max-width: 1279px) and (min-height: 340px) {

} 

/* -- iPad --------------------------------------------- */
@media only screen and (max-width: 1025px) and (min-height: 340px) {
	h1, .h1 { font-size: 50px; }
	h2, .h2, #contact h2 { font-size: 40px; }
	h3, .h3 { font-size: 28px; }
	
	
}

/* --- 980px --------------------------------------------- */
@media only screen and (max-width: 979px) {
	body { font-size: 16px; }
}

/* --- widescreen laptop? --------------------------------------------- */
@media only screen and (max-height: 660px) and (orientation: landscape) {
	
}

/* --- 768px --------------------------------------------- */
@media only screen and (max-width: 767px) {
	#header .headerlinks { display: none; }
	
	#glasses2 .textcontainer { padding-right: 0px; width: 100%; text-align: left; }
	#glasses_tiles .tile { width: calc(50% - 5px); }
	
	#icon_tiles_container { flex-wrap: wrap; align-content: center; justify-content: space-around; }
	#icon_tiles_container .item { width: 45%; }
	
	.section {
		max-width: 100%;
		overflow: hidden;
	}
	
	#contact .flexcontainer { flex-wrap: wrap; }
	#contact .flexcontainer > * { width: 100%; text-align: center; }
	#contact .flexcontainer .left img { display: block; margin: auto; max-width: 300px; }
	
	#highlight .textcontainer { margin-left: auto; margin-right: auto; max-width: 80%; }
	
	#lenses2 h2 { margin-left: 10%; }
	#lenses2 .introtext { margin-left: auto; margin-right: auto; max-width: 80%;}
	
	#about .textbox {width: 80%; margin-left: 10%; }
	#about .textbox .text { padding-left: 0px; width: 90%; margin-left: auto; margin-right: auto; }
	
	#team_contact .flexcontainer { flex-wrap: wrap; flex-direction: column-reverse; }
	#team_contact .flexcontainer > * { width: 100%; text-align: left; }
	
	#team_list .teamlist_container .item {
		width: calc(33.33% - 20px);
	}
}



/* --- 580px --------------------------------------------- */
@media only screen and (max-width: 584px) {	
	
	h1, .h1 { font-size: 40px; }
	h2, .h2, #contact h2 { font-size: 30px; }
	h3, .h3 { font-size: 24px; }
	
	#page {
		max-width: 100vw;
		overflow-x: hidden;
	}
	
	.accordeon .title { font-size: 20px; }
	
	.scrolldown #header #logo {
		left: 3%;
		transform: translateX(0px);
	}
	#headerlinks_mobile {
		display: block;
		opacity: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-60%);
		text-align: right;
		right: 3%;
		transition: 0.5s all;
		
		a {
			color: black;
		}
	}
	.scrolldown #headerlinks_mobile {
		opacity: 1;
	}
	
	#icon_tiles_container .item { width: 100%; }
	#icon_tiles_container .item .content { height: 100%; transform: translateY(0%) !important; }
	
	.slick-prev.slick-prev { left: -30px; }
	.slick-next.slick-next { right: -30px; }
	
	#intro {
		.textbox {
			transform: translateY(-50px);
		}
		#introslider .item {
			display: block;
		}
		.introimage.background {
			position: relative;
			height: 55%;
			width: 100vw;
			object-fit: right center;
		}
		.outer {
			position: relative;
			width: 100%;
			max-width: 100%;
			display: flex;
			background-color: black;
			z-index: 1;
			align-items: center;
			padding: 0px 10%;
			height: 45%;
		}
	}
	
	#about {
		.background {
			position: absolute;
			height: 35%;
			width: 100vw;
			bottom: auto;
			top: 0;
			left: 0px;
			object-position: left center;
		}
		.teaminfo {
			top: 2%;
			left: auto;
			right: 8%;
			text-align: right;
			width: 55%;
		}
		.textbox {
			margin-top: 30%;
		}
	}
	
	#glasses_tiles .title {
		max-width: 100%;
		hyphens: auto;
	}
	
	#banner_top_bar {
		bottom: 25px;
		
		.content {
			padding: 15px 0px;
		}
		.h2 {
			font-size: 20px;
		}
	}
	
	.slick-dots {
  	li button {
			opacity: 0.2;
		}
		li.slick-active button {
			background-color: white;
			opacity: 0.5;
		}
	}
	
	#team_list .teamlist_container .item {
		width: calc(50% - 20px);
	}
	#team_list .teamlist_container .text { min-height: 90px; }
	#team_list .teamlist_container .separator { display: none; }
}

/* --- 480px --------------------------------------------- */
@media only screen and (max-width: 479px) and (orientation: portrait) {
	h3, .h3 { font-size: 22px; }
	
	#glasses_tiles .tile {
		width: calc(100% - 5px) !important;
		height: 30vh;
	}
	
	#lenses2 .background { display: none; }
	
	.section:after {
		display: none;
	}
	
	#about .textbox .text {
		font-size: 14px;
	}
}


/* --- 350px --------------------------------------------- */
@media only screen and (max-width: 350px) and (orientation: portrait) {
	h1, .h1 { font-size: 35px; }
	h2, .h2, #contact h2 { font-size: 25px; }
	h3, .h3 { font-size: 20px; }
	body { font-size: 14px; }
	
	#aboutslider .textbox { font-size: 12px; }
}

/* mobile LANDSCAPE ---------------------------------------------*/
@media only screen and (max-height: 320px) and (orientation: landscape) {

}