.body2 {
	font: 11px 'Calibri', 'Nanum Barun Gothic', 'Dotum';
	color: #333;
	background:#393D46;
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word;
	word-break: break-word;
}	
.body3 {
	font: 11px 'Calibri', 'Nanum Barun Gothic', 'Dotum';
	color: #333;
	background:#736767;
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word;
	word-break: break-word;
}	
.body4 {
	font: 11px 'Calibri', 'Nanum Barun Gothic', 'Dotum';
	color: #333;
	background:#736767;
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word;
	word-break: break-word;
}
.body5 {
	font: 11px 'Calibri', 'Nanum Barun Gothic', 'Dotum';
	color: #333;
	background:#D6603A;
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word;
	word-break: break-word;
	height: auto;
}

	
video {
    width: 100%;
    height: auto;
}


body {
	font: 11px 'Calibri', 'Nanum Barun Gothic', 'Dotum';
	color: #333;
	background: #000;
	-webkit-font-smoothing: antialiased;
	word-wrap: break-word;
	word-break: break-word;
	}

	
#container {
	width: auto;
	padding: 4% 10%;
	}
#container:after {
	display: block;
	clear: both;
	content: ""
	}
.tdiv {
	padding: 0;
	margin: 0;
	}
.tdiv .ect span, .tdiv .ect a {
	padding: 4px;
	color: #999;
	}
#content{
    margin: auto;
    margin-left: 300px;
    padding: 50px;
	width: 600px;
	height: 600px;
    background: #fff;
   
}
#content2{
    margin: auto;
    margin-left: 300px;
    padding: 50px;
	width: 800px;
	height: 800px;
	background: #000;

}
#content3{
    margin: auto;
    margin-left: 300px;
    padding: 50px;
	width: 600px;
	height: 600px;
	background: #E2DED3;

}
#content4{
    margin: auto;
    margin-left: 300px;
    padding: 50px 50px 250px 50px;
	width: 600px;
	height: 600px;
	background: #363030;

}





/* the OKAY point */

a:link, a:visited, a:active {
	color: #333;
	text-decoration: none;
	transition: .3s linear;
	-moz-transition: .3s linear;
	-webkit-transition: .3s linear;
	-o-transition: .3s linear;
	}
	
#navWrap {
	position: fixed;
	}
nav{
	width: 300px;
	height: 400px;
	position: relative;
	perspective: 500px;
	-webkit-perspective: 500px;
	text-transform: uppercase;
	}
.A {
	margin-top: 150px;
	position: absolute;
	transform-origin: 100% 50%;
	-webkit-transform-origin: 100% 50%;
	z-index: 2;
	padding: 50px;
	width: 200px;
	min-height:400px;
	background: rgba(255, 255, 255, 0.78);
		border-right:5px dashed #D6603A;
	color: #353535;
	top: 0px;
	left: 0px;
	transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	}
.A h1 {
	font: 12px 'Montserrat Subrayada', 'Calibri', 'Nanum Barun Gothic', 'Dotum';
	margin: 0;
	color: #D6603A;
	}

.A h6 {
	margin: 0;
	color: #D6603A;
	}
.A h5 {
	color: #D6603A;
}

.B {
	margin-top: 150px;
	position: absolute;
	transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	transform: rotateY(90deg);
	-webkit-transform: rotateY(90deg);
	z-index: 1;
	width: 200px;
	min-height:400px;
	top: 0px;
	left: 300px;
	padding: 50px;
	transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	background: #FFF;
	border-right:5px dashed #D6603A;

	color: #EEE;
	}


.blogMenu {
	font: 10px 'Montserrat Subrayada', 'Calibri', 'Nanum Barun Gothic', 'Dotum';
	
	}

nav:hover .A {
	transform: rotateY(-90deg);
	-webkit-transform: rotateY(-90deg);
	left: -300px;  
	}
nav:hover .B {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	left: 0px;
	z-index:3;
	}
#container {
	width: auto;
	padding-top: 10px;
	
}
.details {
	width: auto;
	padding-top: 10px;
	color: #D6603A;
	
}

	
#container:after {
	display: block;
	clear: both;
	content: ""
	}

	/* from bootstraps*/
.details h6{
	color: #D6603A;
	
}