@charset "utf-8";

html{
	width: 100%;
	height: 100%;
}

body {
	background: #000000;
	font-size: 80%;
	width: 100%;
	height: 100%;
	margin: auto;

	background: url(images/ExcQ_4_2.jpg);
	background-repeat: no-repeat, repeat;
	//background-size: 100%;
	background-color: #000000;
}

html, body, div, p, h1, h2, h3, ul, ol, span, a, form, img, li, input, select {
	//margin:5px; 
	//padding:5px; 
	font-family: "Trebuchet MS", Arial, sans-serif; 
	font-size: 12px; 
	line-height: 23px;
		
}

main {
	//background: white;

	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	//resize: vertical;

	align-items: center;
	//resize: both;
	overflow: auto;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
	
}

main div {

	width: 70%;
	max-width: 900px;
	height: auto;
	max-height: 500px;
	background: rgba(10, 10, 10, 0.85);
	//resize: both;
  //color: white;
 
  //resize: vertical;
	overflow: auto;
	overflow: hidden;
   
   //-webkit-transform: scale(1);
	//-moz-transform: scale(1);
	//-ms-transform: scale(1);
	//-o-transform: scale(1);
	//transform: scale(1);
    //bottom:-15px;
}

.innerDiv {
	width: 100%;
	height: 100%;

	 padding: 12px;
	 background: rgba(10, 10, 10, 0.00);
	
}

.menuDiv {
	position: absolute;
	bottom: 0;
	left:0;
}


div.tab {
	width: 100%;
	overflow: hidden;
	//border: 1px solid #333333;
	background-color: #333333;
}

/* Style the buttons inside the tab */
div.tab button {
	background-color: #333333;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-family: "Trebuchet MS", Arial, sans-serif; 
	font-size: 20px;
	font-variant:small-caps;
	color:#cccccc;
	height: 100%;
}

/* Change background color of buttons on hover */
div.tab button:hover {
	background-color: #434343;
}

/* Create an active/current tablink class */
div.tab button.active {
	background-color: #444444;
}

/* Style the tab content */
.tabcontent {
	display: none;
	//padding: 6px 12px;
	-webkit-animation: fadeEffect 1s;
	animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}


subnav {
	
	border-left: 1px solid #333333;
	
	overflow: hidden;
	//text-align: bottom;
	line-height: 2.5;
	vertical-align: bottom;
	background-color: rgba(10, 10, 10, 0.01);
}


.button {

	font-family: "Trebuchet MS", Arial, sans-serif; 
	font-size: 17px;
	display: inline-block;
	text-align: right;
	//padding: 5px 5px 5px 5px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	
}


.button5 {
	
	color:#999999;
	width: 130px;
	//background-color: black;
	//color: rgba(0, 0, 0, 0.85);
	background-color: rgba(10, 10, 10, 0.01);
	//color: black;
	border: 0px;
	//position: absolute;
	//right: 5;
}

.button5:hover {
	background-color: #555555;
	//color: white;
}

.button6 {
	font-family: "Trebuchet MS", Arial, sans-serif; 
	font-size: 17px;
	color:#999999;
	width: 130px;
	//background-color: rgba(10, 10, 10, 0.5);
	background-color: #555555;
	padding: 10px 10px 10px 10px;
	text-align: center;
	border: 1px #dddddd;
	border-radius: 6px;
}

.button6:hover {
	background-color: #333333;
	//color: white;
}
		
.button7 {
	background-color: #aa3366; /* Green */
	border: none;
	color: white;
	padding: 12px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	//margin: 2px 2px;
	cursor: pointer;
	border-radius: 50%;
}


hr {
  color: #666666;
  height: 2px; 
  border: 0; background: #333; background-image: linear-gradient(to right, #111, #333, #111);
}


h1 {
	font-size: 23px; 
	margin: 0 0 12px 0;
	text-align:left; 
	font-variant:small-caps; 
	letter-spacing: 1.2px; 
	color:#999999;
	margin:5px; 
	padding:5px; 
}

h3 {
	padding:3px; 
	text-decoration: underline;
	font-size: 17px;
}


a {
	font-size: 12px; 
	margin: 0 0 12px 0;
	text-align:justify; 
	font-variant:small-caps; 
	letter-spacing: 1.2px;
}


a:link {
	color: #cccccc;
}

/* visited link */
a:visited {
	color: #666666;
}

/* mouse over link */
a:hover {
	color: #eeeeee;
}


n {
	font-size: 14px; 
	margin: 0 0 10px 0;
	text-align:justify; 
	font-variant:small-caps; 
	letter-spacing: 1.2px;
	color:#999999;
	margin:5px; 
	padding:5px; 
}

#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 2;
	cursor: pointer;
}
#overlay > button {
	opacity: 1;
	position:absolute;
	float: left;
	left:0px;
	top:0px;
	z-index: 3;
  
}
#overlay > button {
	opacity: 1;
} 

#slideshow {
	//margin: 80px auto;
	position: relative;
	width: 100%;
	//height: auto;
	min-height: 400px;
	//padding: 10px;
	//box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow > div {
	position: absolute;
	top: 10px;
	//left: 50px;
	//right: 10px;
	bottom: 10px;
}

menuTd {
	vertical-align: bottom;
}

iframe {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.container {
		  //position: relative;
		  width: 100%;
		}

		.image {
		  //display: block;
		  width: 100%;
		  height: auto;
		}


		.underlay {
		  position: absolute;
		  bottom:0%;
		  left: 0;
		  right: 0;
		  background-color: #cccccc;
		  overflow: hidden;
		  width: 100%;
		  height:100%;
		  transition: .5s ease;
		  opacity: 0.0;
		  filter: alpha(opacity=50);
		}

		.container:hover .underlay {
		  bottom: 0;
		  height: 30%;
		}


		.textOverlay {
		  position: absolute;
		  bottom: 0%;
		  left: 15%;
		  right: 0;
		  background-color: #333333;
		  overflow: hidden;
		  width: 70%;
		  height:0;
		  transition: .5s ease;
		  opacity: 0.5;
		  filter: alpha(opacity=50);
		  
		}

		.container:hover .textOverlay {
		  bottom: 0;
		  height: 30%;
		}

		.text {
			font-size: 12px; 
			margin: 0 0 10px 0;
			text-align:justify; 
			font-variant:small-caps; 
			letter-spacing: 1.2px;
			color:#999999;
			position: absolute;
			overflow: hidden;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
		}
		
		
		
		
		
		
		/* Slideshow container */
		.slideshow-container {
		  width: 100%;
		  height: 100%;
		  max-width: 1000px;
		  position: relative;
		  margin: auto;
		  background: rgba(10, 10, 10, 0.0);
		}

		/* Next & previous buttons */
		.prev, .next {
		  cursor: pointer;
		  position: absolute;
		  top: 50%;
		  width: auto;
		  padding: 16px;
		  margin-top: -22px;
		  color: white;
		  font-weight: bold;
		  font-size: 18px;
		  transition: 0.6s ease;
		  border-radius: 0 3px 3px 0;
		}
		.prev {
		  
		  left: 0%;
		 
		}

		/* Position the "next button" to the right */
		.next {
		  right: 0;
		  border-radius: 3px 0 0 3px;
		}

		/* On hover, add a black background color with a little bit see-through */
		.prev:hover, .next:hover {
		  background-color: rgba(0,0,0,0.8);
		}

		/* Caption text */
		.text {
		  color: #f2f2f2;
		  font-size: 15px;
		  padding: 8px 12px;
		  position: absolute;
		  bottom: 8px;
		  width: 100%;
		  text-align: center;
		  
		}

		/* Number text (1/3 etc) */
		.numbertext {
		  color: #f2f2f2;
		  font-size: 12px;
		  padding: 8px 12px;
		  position: absolute;
		  top: 0;
		}

		/* The dots/bullets/indicators */
		.dot {
		  cursor: pointer;
		  height: 15px;
		  width: 15px;
		  margin: 0 2px;
		  background-color: #717171;
		  border-radius: 50%;
		  display: inline-block;
		  transition: background-color 0.6s ease;
		}

		.active, .dot:hover {
		  background-color: #fefefe;
		}

		/* Fading animation */
		.fade {
		  -webkit-animation-name: fade;
		  -webkit-animation-duration: 1.5s;
		  animation-name: fade;
		  animation-duration: 1.5s;
		}

		@-webkit-keyframes fade {
		  from {opacity: .4} 
		  to {opacity: 1}
		}

		@keyframes fade {
		  from {opacity: .4} 
		  to {opacity: 1}
		}

		/* On smaller screens, decrease text size */
		@media only screen and (max-width: 300px) {
		  .prev, .next,.text {font-size: 11px}
		}