/* Variables */

* {
	margin: 			0;
	padding: 			0;
	box-sizing: 		border-box;
}
/* Mobile Styles */

@media only screen and (max-width: 910px) {
	.feature 			{ width: 93%; }
	.semipanel 			{ width: 93%; }
	.imgpanel 			{ width: 93%; }
	.contact 			{ font-size:		9pt; }
	.mailButton 		{ font-size:		9pt; }	
}

@media only screen and (max-height: 600px) {
	.dropdown-content a {
	color: 				black;
	font-size: 			15pt;
	padding: 			6px 16px;
	text-decoration: 	none;
	display: 			block;
	}
	.contact 			{ font-size:		9pt; }	
	.mailButton 		{ font-size:		9pt; }	
	
}	
@media only screen and (min-height: 601px) {
	.dropdown-content a {
	color: 				black;
	font-size: 			15pt;
	padding: 			12px 16px;
	text-decoration: 	none;
	display: 			block;
	}	
	.mailButton 		{ font-size:		9pt; }	
	.contact 			{ font-size:		9pt; }	
}	

/* Desktop Styles */
@media only screen and (min-width: 911px) {
	.feature 			{ width: 30.67%; }
	.semipanel 			{ width: 60%; }
	.imgpanel 			{ width: 30.67%; }
	.contact 			{ font-size:		15pt; }	
	.mailButton 		{ font-size:		15pt; }	
}


@media only screen and (max-height: 500px) {
.logo	 			{ height: 	90px;  }
.menu 	 			{ height:	90px;  }
.content 			{ top:		90px;  }
.dropdown-content 	{ top:		100px; }
}
@media only screen and (min-height: 501px) and (max-width: 500px) {
.logo	 			{ height: 	135px; }
.menu 	 			{ height:	135px; }
.content 			{ top:		135px; }
.dropdown-content 	{ top:		145px; }
}
@media only screen and (min-height: 501px) and (min-width: 501px) {
.logo	 			{ height: 	170px; }
.menu 	 			{ height:	170px; }
.content 			{ top:		170px; }
.dropdown-content 	{ top:		180px; }
}



html,body {
	height:				100%;
	width:				100%;
	background-color: 	#343434;
	font-family: 		Helvetica;
	font-size:			14pt;
	color: 				#f4ffea;
}

.bgvideo { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
	background: url('../background/video/poster.jpg') no-repeat;
	background-size: cover;
	transition: 1s opacity;
}

.slideshow {
	top:				0px; 
	left:				0px; 
	right:				0px;
	bottom:				0px;
	z-index:			1;
	position:			absolute; 
	background: 		no-repeat center center fixed; 
	-webkit-background-size: 	cover;
	-moz-background-size: 		cover;
	-o-background-size: 		cover;
	background-size: 			cover;
	-webkit-transition: background 300ms ease-in 200ms;
    -moz-transition: 	background 300ms ease-in 200ms;
    -o-transition: 		background 300ms ease-in 200ms;
    transition: 		background 300ms ease-in 200ms;
}

.menu {
    background: 		linear-gradient(#343434 0%, #343434 90%, rgba(0,212,255,0) 100%);
    position:			absolute; 
	top:				0px; 
	left:				0px; 
	right:				0px;
	overflow:			hidden;
	z-index:			10;
}
.contact {
    background: 		linear-gradient(rgba(0,212,255,0) 0%, #343434 20%, #343434 100%);
    position:			absolute; 
	bottom:				0px; 
	left:				0px; 
	right:				0px;
	overflow:			hidden;
	height:				50px;
	z-index:			10;
}

.content {
	position:			absolute;
	z-index:			10;
	bottom:				50px; 
	left:				0px; 
	right:				0px; 
	overflow-y:			scroll;
	-webkit-overflow-scrolling: touch;
	display: 			flex;
    flex-wrap: 			wrap;
    justify-content: 	center;
    align-items: 		baseline;
	align-content: 		flex-start;
    padding: 			10px 10px 10px 10px;
	scrollbar-base-color: 			transparent;
	scrollbar-face-color: 			#94df7a;
	scrollbar-3dlight-color: 		#343434;
	scrollbar-highlight-color: 		#343434;
	scrollbar-track-color: 			#343434;
	scrollbar-arrow-color: 			#343434;
	scrollbar-shadow-color: 		#343434;
	scrollbar-dark-shadow-color: 	#343434;
}

.feature, .semipanel {
	margin:				3px;
    background: 		rgba(52, 52, 52, 0.8);
	padding: 			10px;
	min-height:			320px;
	border: 			solid 1px #343434;
	box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 	10px 10px 5px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
}

.imgpanel {
	margin:				3px;
    background: 		rgba(52, 52, 52, 1);
	padding: 			10px;
	border: 			solid 1px #343434;
	box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 	10px 10px 5px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
}

.panel {
	width:				93%;
	margin-bottom: 		5px;
	background: 		rgba(52, 52, 52, 0.8);
	padding: 			10px;
	border: 			solid 1px #343434;
	box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 	10px 10px 5px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
}

.pnlimg {
	width:				100%;
}

li {
	margin: 			10px 0;
}

a {
	color: 				#f4ffea;
}



a[href^=tel] {
	text-decoration:	inherit;
	color: 				inherit;
}

img {
	border: 			solid 1px #343434;
}

img.noborder {
	border: 			solid 0px #343434;
}

p.copyright {
	font-size:			11pt;
	text-align: 		center;
	color: 				#343434;
}
.mailButton {
	background:none; 
	border:none;
	font-weight:bold;
	color:#f4ffea;
	cursor: pointer;
	text-decoration:underline;
}
.dropbtn {
	background-color: 	transparent;
	color: 				transparent;
	background-image: 	url("../staticimg/icons/menu.png");
	padding: 			24px;
	font-size: 			12pt;
	border: 			0px;
	cursor: 			pointer;
	z-index;			99;
}

.dropbtn:hover, .dropbtn:focus {
	background-color: 	transparent;
}

.dropdown {
	position: 			relative;
	display: 			inline-block;
}

.dropdown-content {
	display: 			none;
	position:			absolute; 
	left:				10px; 
	background-color: 	#f4ffea;
	min-width: 			260px;
	box-shadow: 		0px 8px 16px 0px rgba(0, 0, 0, 0.2);;
	z-index: 			99;
}

.dropdown-content a:hover {
	background-color:	#d0efab;
}

.show {
	display:			block;
}	

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px grey; 
  border-radius: 8px;
}
 
::-webkit-scrollbar-thumb {
  background: #94df7a; 
  border-radius: 8px;
  border: 1px solid #343434;
}

::-webkit-scrollbar-thumb:hover {
  background: #d0efab; 
}