@charset "UTF-8";

html {
	font-size:16px;
}

* {

	padding:0;

	margin:0;

}



html, body {

	position: fixed;

	font-family: 'Bitter', serif;

	height:100%;

	width:100%;

}



ul {

	list-style-type: none;

	color:#eee;

	text-align:right;

	width:38%;

	min-width:100px;

}



img {

	height:100%;

}

h1 {

	font-size:2.8rem;

}


a {

	text-decoration: none;

	color:inherit;

}

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

.cover table tr {
	height:50%;
	width:100%;
}


.cover table tr:first-child td {
	vertical-align:bottom;
}

.cover table tr:last-child td {
	vertical-align:top;
}


.content table tr {
	height:100%;
	width:100%;
}


.content table td {
	vertical-align:middle;
}



#backLeft {

	background-color: rgba(0,128,128,0.8);

	height:100%;

	width:50%;

	position:fixed;

	right:70%;

	top:0;

}



#backRight {

	background-color: rgba(255,255,255,0.8);

	height:100%;

	width:50%;

	position:fixed;

	left:70%;

	top:0;

}



#slideShowLeft {

	height:100%;

	width:30%;

	position:fixed;

	top:0;

	z-index:0;

}



#slideShowRight {

	height:100%;

	width:30.5%;

	position:fixed;

	top:0;

	z-index:0;

}



#contentLeft ul{

	text-align:left;

	color:white !important;

	z-index:0;

	position:relative;

}



#contentRight ul{

	position:relative;

	float:right;

	color:teal;

	left:2px;

}



li {

	padding:6%;

}



#contentRight li:hover{

	background-color:#eee;

}



#contentLeft li:hover{

	background-color:teal;

}



#contentLeft, #contentRight {

	position:absolute;

	background: center center no-repeat teal;

	background-size:cover;

	top:0;

	height:100%;

	width:30.2%;
}

#contentLeft {
	background-color:teal;
	background-image:url(img02.png);
	padding-left:19.9%;
	left:0;
}	

#contentRight {
	background-color:#eee;
	background-image:url(im2.jpg);
	padding-right:19.9%;
	right:0;
}


 



#leftImg {

	display:none;

	right:50%;

	height:100%;

}



#rightImg {

	display:none;

	left:50%;

	height:100%;

	z-index:-100;

}

#leftSide, #rightSide {

	position:relative;

	font-weight:bold;

	height:100%;

	padding: 0% 2%;

}



#leftSide {

	background-color:teal;

	color:#eee;

	text-align:right;

	float:left;

	width:46.1%;

}



#rightSide {

	background-color:#eee;

	color:teal;

	float:right;

	width:45.9%;
	
	left:-0.2%;


}




#leftSide h3 {

	color:#aaa;

}



#rightSide h3 {

	color:#999;

}



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

	#leftSide, #rightSide {
		width:16%;
	
	
	}

	#slideShowLeft, #backLeft, #backRight {
		display:none;
	}
	
	#slideShowRight {
		width:100%;
	}

	
	#contentRight, #contentLeft {
		width:100%;
		padding:0;
	}
	
	#rightSide {
		right: 0;
		left: initial;
		background-color:rgba(255,255,255,0.8);
		text-align:right;
		height: 96%;
		padding: 2% 2%;
	}
	
	#leftSide {
		background-color: rgba(0,128,128,0.8);
		text-align:left;
		height: 96%;
		padding: 2% 2%;
	}
	
	.cover table tr:first-child {
		height:initial;
	}
	
	.cover table tr:last-child {
		height:100%;
	}
	
	.content table {
		width: 25%;
		padding: 0px;
		right: 0;
		position: absolute;
		z-index:10;
	
	}
	
	.content ul {
		width:100%;
		
	}
	
	ul li {
		font-size:0.8rem;
	}
	
	#contentLeft  table{
		left:0;
		right:initial;
	
	}
	
	h1 {
		font-size:1.8rem;
	}
	
	h3 {
		font-size:0.8rem;
	}
}




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

	#leftSide, #rightSide {
		width:46%;

		height:98%;
	}
	
	#leftSide {
		padding:2% 0 2% 4%;
		background-color:rgba(255,255,255,0.8);
		color:teal;
	}
	
	
	#rightSide {
		padding:2% 4% 2% 0;
		background:transparent;
		color:#eee;
	}
	
	#contentLeft table {
		width:55%;
	}
	
	#contentLeft ul li {
		color:teal;
		
		
	}
	
	#contentRight ul li {
		color:#eee;
		border:solid;
		border-width: 0 0 1px 0;
	}
	
	#contentRight li:hover, #contentRight li:active{

	background-color:teal;

	}

	#contentLeft li:hover, #contentLeft li:active{

		background-color:#eee;

	}
	
	#contentRight table {
		width:40%;
	}


}


@media screen and (max-width:641px) and (orientation:landscape){
		.content ul li{
		padding: 2% 6%;
		}