@import url(http://fonts.googleapis.com/css?family=Montserrat|Ubuntu:400,700,500&subset=latin,latin-ext);

body {
	margin: 0;
	padding: 0px;
	font-family: 'Ubuntu', sans-serif;
	color: white;
	background-color: #232323;	
	position:relative;
}

h1 { font-family: 'Montserrat', sans-serif; line-height: 40px; font-size:38px; text-transform:uppercase; margin: 0 0 40px 0; }

p { line-height: 28px; font-size:16x; }

a { color: #f47a21; text-decoration:none;
	-moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; }

.logo { width: 100%; height: 130px; background: url(kepek/mono_logo.png) no-repeat center top; }

.head { position:absolute; top: 25px; left:3%; z-index: 10; width:95%; }
.front .head { position:fixed; }
.menu { text-transform: uppercase; font-size: 18px; letter-spacing: 0.03em; margin: 30px 0 20px; padding: 0 40px; }
.shatt { position:fixed; left:0px; top:0px; z-index: 5; pointer-events:none; width:100%; height: 430px; background: url(kepek/bg_head.png) repeat-x left top; }
.bio .shatt { width:100%; height: 100%; background: none black repeat-x left top; opacity:0.75; pointer-events:auto; }
.head .menu li { margin: 15px; text-align: center; list-style: none; font-family: 'Montserrat', sans-serif; color: white; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; }
.head .menu li:hover { color: #f47a21; }

.foot { position:fixed; z-index: 10; width: 90%; padding:5%; right: 0px; bottom:0px; font-family: 'Montserrat', sans-serif; color: #f2f2f2; text-transform: uppercase; font-size: 13px; background-color: black; text-align:center; }

.images { margin: 0px; padding: 0px; clear: both; position: absolute; left: 0px; top:0px; }

.images li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 50%;

}

.images li img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.3;
	-moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;
}

.images li img:hover { opacity: 1; }

.kont { position:relative; z-index: 7; width:90%; margin-left: 5%; padding-top: 320px; }
h1, p { text-align:center; }

@media all and (min-width: 750px) {
	
	.logo { float:left; width: 235px; }
	.menu { display: inline-flex; }
	.foot { width: 330px; right: 25px; bottom:35px; padding:0%; background-color: transparent; text-align:left; }
	.images li {width: 20%; }
	.bio .shatt { width:80%; }
	.kont { width:65%; padding-top: 225px; }
	h1, p { text-align:left; } 
	
	
}

@media all and (min-width: 960px) {
	
	.head .menu li { margin: 0 35px; display: inline; }
	
}

@media all and (min-width: 1250px) {
	
	.bio .shatt { width:60%; }
	.kont { width:50%; }
	
}