@charset "UTF-8";
/* CSS Document */

*{ padding:0; margin:0;}

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

body{ font-family:"district_prothin", Arial, Helvetica, sans-serif; font-size:1em; position:relative; background:#000;}

body > h1{ display:none;}

.colleft{
	width:32%;
	height:90%;
	background-color:#FFF;
	float:left;
	position:relative;
	padding-top:10%;
}

.colleft section{ width:90%; margin:0 auto 0 auto;}
.colleft section img{ width:70%; margin:auto; display:block; max-width:350px;}
.colleft section p{ font-size:1.3em; text-align:center; margin:1em auto; }
.colleft section em{ font-size:3em; text-align:center; margin:1em auto; font-style:normal; display:block;}


.colright{
	width:68%;
	height:90%;
	background:url(bg-35mm.jpg) no-repeat #000000;
	background-size:cover;
	float:left;
	position:relative;
	color:#FFF;
	padding-top:10%;
}

.colright section{ width:70%; margin:auto;}

.colright section a{
	display:block;
	margin:0 auto 1em auto;
	width:70%;
}

.colright section img{ width:100%; margin:auto; display:block; max-width:620px;}

.colright ul li{ list-style-type:none; font-size:1.3em; text-align:center; font-weight:100; margin:0.3em auto; padding:0.2em;}

.colright ul li.cl1{ 
	width:30%; 
	background:#14b7e6;
	transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-webkit-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-moz-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-o-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-ms-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
} 

.colright ul li.cl2{ 
	width:35%; 
	background:#df9833;
} 


.colright ul li.cl3{ 
	width:40%; 
	background:#bc2066;
	transform: rotate(1deg) scale(1) skew(1deg) translate(0px);
	-webkit-transform: rotate(1deg) scale(1) skew(1deg) translate(0px);
	-moz-transform: rotate(1deg) scale(1) skew(1deg) translate(0px);
	-o-transform: rotate(1deg) scale(1) skew(1deg) translate(0px);
	-ms-transform: rotate(1deg) scale(1) skew(1deg) translate(0px);
} 



.colright ul li.cl4{ 
	width:37%; 
	background:#14b7e6;
	transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-webkit-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-moz-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-o-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
	-ms-transform: rotate(359deg) scale(1) skew(1deg) translate(0px);
} 


.colright ul li.cl5{ 
	width:34%; 
	background:#df9833;
} 



.colright section a.goTo{color:#FFF; font-size:2em; text-align:center; padding-top:1em; display:block; text-decoration:none;}

.colright section a.goTo:hover{ color:#df9833;}

.colright section a.goTo:before{
	content:"";
	background:url(arrow.png) no-repeat;
	width:120px;
	height:107px;
	position:absolute;
	margin:-65px 0 0 -140px;
}


@media screen and (min-width: 641px)  and (max-width: 900px){
	.colright section{ width:95%;}
}



@media screen and (max-width: 640px) {
	
	.colright, .colleft{ float:none; width:100%; height:auto; padding:15px 0;}
	.colright ul li.cl1{ width:65%;}
	.colright ul li.cl2{ width:75%;}
	.colright ul li.cl3{ width:62%;}
	.colright ul li.cl4{ width:70%;}
	.colright ul li.cl5{ width:62%;}
	.colright section{ width:95%;}
}