html { height: 100% }
body { height: 100%; margin: 10px 15%;font-weight: bold; color: #ebebeb; font-size: x-large; padding: 0; text-align:center;background: #cccccc url('./KangaBG.jpg') no-repeat fixed center top; background-size: auto 100%; font-family: Nyala, Tahoma, Geneva, sans-serif}

a:link, a:visited , a:hover, a:active {
    text-decoration: none;
	color: #ebebeb;
	font-size: larger;
	underline:none;
}


#PageTitleBar  img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.contents {
	width: 100%;
	height: 50vh;
	border:0;
	margin:0;
	}
.contents iframe {width: 100%;height:100%;}

.wrapper         {width:80%; margin:0 auto; background:#CCC}
.h_iframe        {position:relative; padding-top: 56%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;border:0;}

div.TxtBox {
	 padding: 5px;
	 background-color: rgba(0,0,0,0.5);
	 border-radius: 50px 10px;
 }

div.TxtBox p {margin: 1%;}


.bigbox {
	overflow:auto}
	
.container {
	position:relative;
	overflow:hidden;
	width:45%;
}
	
.container.left {float:left;}
.container.right {float:right;}


.container.right .textbox {margin-left:-100%;}

.container.left .textbox {margin-left:100%;}

.container img {
	margin-left:0;
	width: 100%;
    height: auto;
    width: auto\9;
}

.container:hover .textbox,
.container:hover .text,
.container:hover .trans,
.container:focus .textbox,
.container:focus .text,
.container:focus .trans {margin-left:0;}

.textbox {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.textbox.trans {background-color: rgba(0,0,0,0.5);}

.text {
position:absolute;
margin-top:25%;
position:absolute;
top:0;
left:0;
width:100%;
}

.text.left{margin-left:100%;}

.text.right{margin-left:-100%;}

.container img, .textbox, .text {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}