@font-face {
    font-family: 'BitDarling10sRBRegular';
    src: url('bitdarling10srb-webfont.eot');
    src: url('bitdarling10srb-webfont.eot?#iefix') format('embedded-opentype'),
         url('bitdarling10srb-webfont.woff') format('woff'),
         url('bitdarling10srb-webfont.ttf') format('truetype'),
         url('bitdarling10srb-webfont.svg#BitDarling10sRBRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pixel';
    src: url('alterebro-pixel-font-webfont.eot');
    src: url('alterebro-pixel-font-webfont.eot?#iefix') format('embedded-opentype'),
         url('alterebro-pixel-font-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	text-transform: uppercase;
}
a, a:visited{color:#365867}

html, body, #sections{height:100%;}

body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Helvetica CE, Arial, "Lucida Grande", sans-serif;
background:black;
margin:0;
padding:0;
font-size:12px;
}

p{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Helvetica CE,Arial, "Lucida Grande", sans-serif;
}

/*----------------------------------------------*/
/* 2.1 Header */
/*----------------------------------------------*/
.header {
	height:78px;
	background:url(images/header_bg.png) 0 bottom repeat-x;
	z-index:9999;
	position:fixed;
	top:0;
	width:100%;
	-webkit-box-shadow:  0px 2px 15px 0px rgba(0,0,0,0.3);;
	box-shadow:  0px 2px 15px 0px rgba(0,0,0,0.3);
	}

#header_pane {
	width:52px;
	height:24px;
	background:url(images/header_pane_arrow.png) 0 0 no-repeat;
	position:fixed;
	z-index:21;
	top:76px;
	left:48%;
	cursor:pointer;}

#header_pane.closed {
	background-position:0 -24px;}

.header .logo {
width:303px;
float:left;
}



.header .work, .header .profile, .header .contact{
background:url(images/nav.png);
display:block;
height:78px;
float:left;
}

.header .work{
background-position: 0 top;
width:152px;
}	

.header .profile{
background-position: -152px top;
width:98px;
}	

.header .contact{
background-position: -250px top;
width:104px;
}	

.header .work:hover{
background-position:0 center;
}
.header .profile:hover{
background-position:-152px center;
}
.header .contact:hover{
background-position:-250px center;
}

/*UNION CLASS (has both work and active*/

.header .work:active, .header .work.active{
background-position:0 bottom;
}
.header .profile:active, .header .profile.active{
background-position:-152px bottom;
}
.header .contact:active, .header .contact.active{
background-position:-250px bottom;
}

.footer{
background:url('images/footer-bg.gif') repeat-x;
width:100%;
height:29px;
position:fixed;
bottom:0;
	-webkit-box-shadow:  0px -2px 15px 0px rgba(0,0,0,0.3);;
	box-shadow:  0px -2px 15px 0px rgba(0,0,0,0.3);
	z-index:999999;
}


.footer-next{
height:29px;
width:177px;
position:absolute;
left:50%;
margin-left:-88px;
background:url('images/footer-button.png') no-repeat top;
cursor:pointer;
}

.footer-next:hover{
background-position: center;
}

.footer-next:active{
background-position: bottom;
}
	
.header .logo h1, 
.header .logo strong {
	display:block;
	text-indent:-9000px;
	position:absolute;
	top:0;
	}
	

	/*CONTENT*/

.window{
position:fixed;
top:-400px;
left:8px;
z-index:9998;
opacity:0.96;
width:650px;
height:378px;
background:url(images/window.png);
}	

.window2{
bottom:-22px;
position:absolute;
width:650px;
height:59px;
background:url(images/window2.png);
}	
	
#mcs_container{
//overflow:hidden;
margin-left:50px;
height:343px;
width:200px;
bottom:0;
position:absolute;
color:#153542;
}

#mcs_container h2{
color:white;
color:#B6E4ED;
padding:5px 10px;

font-family: 'Oswald', 'Helvetica', 'Arial';
font-size:100%;
text-transform:uppercase;
font-weight:normal;
background: url('images/h2-corner.png') no-repeat top right;
}

#mcs_container ul{
margin:0;
padding:0;
}

#mcs_container li{
margin: 5px 0;
background: url('images/arrow.png') no-repeat 0 3px;
padding-left:12px;
margin-left:5px;
list-style-type:none;
}

#enhanced{
position:relative;
width:151px;
height:199px;
float:left;
background:#4C728C;

-webkit-box-shadow:  0px 0px 15px 0px rgba(0,0,0,0.3);;
box-shadow:  0px 0px 15px 0px rgba(0,0,0,0.3);

}

.enhance{
position:absolute;
top:0;
left:0;
cursor:pointer;
}

#skillsbox{
font-family: pixel,BitDarling10sRBRegular, verdana, tahoma;
font-size:16px;
margin:0 0 0 20px !IMPORTANT;
width:369px;
float:left;
}


#skillsbox li{
background:#84E2F5;
list-style-type:none;
margin:2px;
padding:0;
color:#B6E4ED;
}

#skillsbox li div{
background:url('images/skill-gradient.png') right;
width: 50%;
padding:2px 5px;
border-bottom:#263946 1px solid;
}

.col-1{
width:33%;
float:left;
}

.col-2{
margin-left:10px;
width:65%;
float:left;
}

.work-play{
text-align:center;
}
.work-play img{
padding: 20px 0;
}

.section{
height: 92%;
/*min-height:720px;*/
max-height:1100px;
background:grey;
position:relative;
//background-size:contain;
overflow:hidden;
/*-webkit-transition: all 0.15s ease-out;*/
font-family: 'Open Sans';
}

.layer1, .layer2{
position:absolute;
width:100%;
height:100%;
}

#Home{
background:url('images/miro_home_bg.jpg') fixed top center;

}

#Home .layer1{
background: url('images/miro-hristov-heading.png') fixed no-repeat  15% center;
}

#Home .key{
opacity:0;
position:fixed;
left:15%;
margin-left:243px;
margin-top:79px;
top:50%;
background:#85D1FF;
width:30px;
height:30px;
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
}


.formstudio{
background:url('images/4m-bg.jpg') fixed top;
}

#East-Charlton{
background:url('images/grikitis-bg.jpg') fixed center;
position:relative;
}


#East-Charlton .layer1{
background: url('images/ec-picture1.png') fixed no-repeat;
}
#East-Charlton .layer2{
background: url('images/ec-picture2.png') fixed no-repeat;
}

#Savannah-Furniture{
background:url('images/slide2.jpg') fixed top;
position:relative;
}

#Savannah-Furniture .layer1{
bottom:0;
background: url('images/table.png') no-repeat  center center;
}


#Savannah-Baby{
background:white url('images/baby-woman.jpg') fixed center left no-repeat;
}
#Savannah-Baby .layer1{
background: url('images/flower.png') fixed no-repeat;
}
#Savannah-Baby .layer2{
background: url('images/flower.jpg') fixed no-repeat;
}



#Miro-Hristov{
background:url('images/miro-bg.jpg') fixed center 78px;
}

#Saif-Design{
background:url('images/saif-bg.jpg') fixed center center;
}

#Big-Swordfish{
background:url('images/bigswordfish-bg.jpg') fixed top;
}

#Stoned-Glass{
background:url('images/stonedglass-bg.jpg') fixed top;
}

#Stoned-Glass .layer1{
background: url('images/stonedglass.png') fixed no-repeat;
}

#Others{

}

#slider-container{
overflow:hidden;
width:100%;
height:1200px;
display:block;
}

#slider{
width:600%;
height:1200px;
display:block;
position:relative;
}

.slide{
position:relative;
height:100%;
float:left;
display:block;
min-width: 17%;
}

#slide1{background:url(images/others-slide1.jpg) fixed center 78px;}
#slide2{background:url(images/others-slide9.jpg) fixed center;}
#slide3{background:url(images/others-slide4.jpg) fixed left 78px;}
#slide4{background:url(images/others-slide2.jpg) fixed center 78px;}

#content{

}

#Profile{
background:url('me.jpg') fixed top;
}
.section:first-child, .section:last-child{
height: 98%;
}


.chrome-image{
z-index:999;
position:absolute;
top:0;
left:0;
width:674px;
height:496px;
background:url('images/chrome.png') ;
}


.chrome{
position:relative;
width:674px;
height:496px;
margin-left: 20px;
margin-top: -220px;
top:50%;
left:40%;
text-align:center;
}

.chrome div.orbit-wrapper {
margin-left:14px;
padding-top:58px;
}

.chrome .orbit-bullets{
bottom:-30px;
}
.chrome div.timer{
display:none;
}

.chrome div.slider-nav span.right {
right:-29px;
}

.chrome div.slider-nav span.left {
left:-29px;
}

.chrome .info{
display: block;
position:absolute;
width:610px;
height:40px;
bottom:38px;
left:14px;
padding:15px 15px;
text-align:left;
z-index:1000;
background: url('images/info-bg.png') repeat-x;
font-family: 'Open Sans';
}

.laptop-image{
z-index:999;
position:absolute;
top:0;
left:0;
width:948px;
height:508px;
background:url('images/laptop.png') ;
}
.laptop-image.black{
background:url('images/laptop-black.png') ;
}

.laptop{
position:relative;
width:948px;
height:508px;
margin-left: -474px;
margin-top: -220px;
top:50%;
left:50%;
text-align:center;
}

.section .container {
    position: absolute; 
    top: 50%; 
    left: 50%;
    margin: -300px 0 0 -470px; 
}

.laptop .info{
display: block;
position:absolute;
width:585px;
height:40px;
bottom:87px;
left:167px;
padding:15px 15px;
text-align:left;
z-index:1000;
background: url('images/info-bg.png') repeat-x;
}


.section h2{
font-weight: normal;
padding:0;
margin:0;
font-size:20px;
//font-weight: 500;
//text-transform:uppercase;
color:white;
}

.info p{
font-size:12px;
padding:0;
margin:0;
color:#21BBEE;
}

.section a{
font-size:14px;
position:absolute;
top:25px;
right:15px;
color:#21BBEE;
font-style:italic;
padding-left:10px;
border-bottom: 1px dotted #fff;
background:url('images/launch.png') no-repeat 0 5px;
text-decoration:none;
}

.section a:hover{
color:#fff;
border-bottom: 1px dotted #21BBEE;
}

.portfolio{
height:2000px;
margin-top:100px;
}


#sidenav{
font-family: pixel,BitDarling10sRBRegular, verdana, tahoma;
font-size:16px;
position:fixed;
top:50%;
right:-82px;
background: url("images/sidenav-bg.gif") repeat-x;
z-index:999999;
border-radius: 6px 0px 0px 6px; 
-moz-border-radius: 6px 0px 0px 6px; 
-webkit-border-radius: 6px 0px 0px 6px;
border: DarkGrey 1px solid;
border-top: LightGrey  1px solid;
-webkit-box-shadow:  0px 2px 15px 0px rgba(0,0,0,0.3);;
box-shadow:  0px 2px 15px 0px rgba(0,0,0,0.3);
}

#bullets{
padding:5px 0 12px 12px;
margin:0;
}

#sidenav li{
list-style-type:none;
background:url("images/bullets.png") no-repeat 0 7px;
padding:5px 12px;
margin:0;
}

#sidenav li.active{
background:url("images/bullets.png") no-repeat 0 -26px;
}

.button{
text-decoration: none;
cursor:default;
color:black;
position:relative;
display:block;
padding:2px 0;
margin:10px;
overflow:hidden;
display:inline;
}

.button .line{
background:url('images/dia.gif') right;
width:0%;
height:2px;
display:block;
position:absolute;
bottom:0px;
left:0;
text-align:right;
}



.line-active {
width:100% !IMPORTANT;
opacity: 1 !IMPORTANT;
left: 0 !IMPORTANT;
}
.over-active {
opacity:1 !IMPORTANT;
}


/*CONTACT FORM*/
.contact-form {
	width:700px;
	height:355px;
}
#info{
	margin-top:5px;
	float:left;
	position:relative;
}

#info li{
line-height:30px;
list-style-type: none;
}

#info li img{
vertical-align:middle;
padding:2px;
}

input {
	color:white;
	background: url('images/h2-corner.png') no-repeat top right;
	padding:4px;
	padding-right:0;
	margin-bottom:2px;
	border:0;
	width:540px;
	vertical-align:top;
	font-family: 'Oswald', 'Helvetica', 'Arial';
	opacity:0.85;
}
input:focus {
	outline:none;
	background: url('images/h2-corner.png') no-repeat top right;
	opacity:1;
}

textarea {
	resize:none;
	color:#CEDBE3;
	background:#325770;
	border:0;
	width:540px;
	height:130px;
	margin-top:2px;
	padding:4px;
	padding-right:0;
	overflow:auto;
	font-family: 'Oswald', 'Helvetica', 'Arial';
	opacity:0.85;
}

textarea:focus {
	color:white;
	outline:none;
	opacity:1;
}

.submit {
	cursor:pointer;
	float:right;
	border:0;
	width:129px;
	height:34px;
	margin:5px;
	text-transform:uppercase;
	background:url('images/send-btn.png') right bottom;
}

.submit:hover{
opacity:0.65;
}

input.blur {
	color:#CEDBE3;
}
fieldset {
	position:relative;
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align: baseline;
}
.error {
	position:absolute;
	font-size:16px;
	top:6px;
	color:#a33;
	left:-42px;
	text-transform:uppercase;
	padding:0 0 0 26px;
	display:none;
}
.message-error {
	top:8px;
	left:-42px;
}
#form {
	padding:60px 50px;
	width:550px;
	float:left;
	position:relative;
}
.thx {
	position:absolute;
	bottom:35px;
	right:0;
	z-index:99;
	width:350px;
	text-align:center;
	display:none;
}



.clear{
clear:both;
}