@charset utf-8;
/* === reset === */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p{ margin: 0; padding: 0}
img { border: 0}
address,cite,em,strong{ font-style: normal; font-weight: normal}
ol,ul { list-style: none}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
/* === common === */
html,body{ height: 100%; }
body{ position: relative;}
.clearfix:after,
.clearfix:before { content: ''; display: table; }
.clearfix:after { clear: both; }
.cloud-small{ background: url(../img/cloud-small.png) no-repeat; width: 61px; height: 42px; position: absolute; }
.cloud-medium{ background: url(../img/cloud-medium.png) no-repeat; width: 90px; height: 60px; position: absolute; }
.cloud-big{ background: url(../img/cloud-big.png) no-repeat; width: 130px; height: 85px; position: absolute; }
.cloud0{ top:132px; right: 54px; }
.cloud1{ top: 186px; right: 353px; }
.cloud2{ top: 430px; right: 314px; }
.cloud3{ top: 55px; left: 343px; }
.cloud4{ top: 82px; left: 46px; }
.cloud5{ top: 300px; left: 41px; }
.cloud6{ top: 410px; left: 200px; }
.cloud7{ top: 17px; left: 700px; }
.cloud8{ top: 180px; left: 175px; }
.cloud9{ top: 300px; right: 90px; }
/* === index === */
.index{ background:#dfede9;}
.index .page{ width: 100%; height: 100%; background: url(../img/bg-cloud~.png) repeat-x left bottom; position: relative; -webkit-animation: cloud 30s linear infinite; -moz-animation: cloud 30s linear infinite; animation: cloud 30s linear infinite; }
.index h1{ position: absolute; top: 280px; left: 50%; margin-left: -160px; font-family: 'Lato'; font-weight:400; font-size:30px; color:#db5a14;}
.index h1 img{max-width:300px;}
.index h2{ width: 400px; height:65px; position: absolute; top: 290px; left: 50%; margin-left: -183px; color:#db5a14; font-family:'Lato',sans-serif; font-weight:100; font-size:28px;}
.index h3{width:400px;height:40px; left:50%; margin-left:-183px; color:#000;font-family:'Lato',sans-serif; font-weight:100; font-size:24px;}
.index .page .navbarrr{margin:0 auto; color:#fff; background:#fff; width:100%; height:800px; display:block;}
.index nav{ z-index:999;
position:fixed; top:0px; left:0px; background:#FFF; width:100%; margin:0 auto; padding-top:10px; color:#db5a14; font-family:'Lato',sans-serif; font-weight:400; font-size:32px;}
.index nav a{ width: 100px; height: 60px; margin-right: 12px; text-align: center; display: inline-block; color: #67877d; text-decoration: none; font: 16px/32px 'Comfortaa',sans-serif; font-weight:400; }
.index nav a img{max-height:40px; margin-bottom:-15px;}
.index nav a:hover{ color: #db5a14; }
.index .left{ opacity:0.7; filter:alpha(opacity=70);position:absolute; top:180px; left:0px; max-width: 300px;overflow:hidden;}
.index .right{ opacity:0.7; filter:alpha(opacity=70);position:absolute; top:180px; right:0px; max-width: 300px; overflow:hidden;}
.index  img{max-height: 280px;}
.index .logo{position:absolute; top:10px; left:50%; max-width:;}
.index nav{
margin: 0 auto;
  width: 100%;
  position: fixed;
  text-align:center;
  z-index:999;
position:fixed; top:0px; left:0px;
opacity:0.9; filter:alpha(opacity=90);
}


.fixed-nav{display: none; position: fixed; top: 100px; right: 25px; padding-top: 55px; background: url(../img/cloud-red.png) 15px 0 no-repeat; z-index: 9;z9} 
.fixed-nav nav{ margin: 0 auto; width: 90px;    }
.fixed-nav nav a{display: block; width: 90px; height: 48px; margin-bottom: 15px; text-align: center; display: inline-block; border: 2px solid rgba(238,132,137,0.62); border-radius: 20px; color: #ee8489; text-decoration: none; font:italic 12px/48px 'Century Gothic',sans-serif; background-color: #fff;}
.fixed-nav nav a:hover,.fixed-nav .current a{ background-color: #EBF0F5; }
.project-nav{ display: block; }


.title{ color: #db5a14; font:italic 30px 'Source Sans Pro',sans-serif; text-align: center; margin-bottom: 18px; }
.intro{
	width: 786px;
	text-align: center;
	color: #999;
	font:italic 22px/32px  'Source Sans Pro',sans-serif;
	margin: 0 auto 75px;
}
.intro img{max-width:1200px; margin-left:-200px; margin-top:40px;opacity:0.9; filter:alpha(opacity=90);}
.about .button{ 
	display:block; 
border-radius:2px ;
-moz-border-radius:2px; /* Old Firefox */
margin: 0 auto;
padding:20px;
width:300px;
text-align:center;
background:#dfede9;
}

.about a{text-decoration:none;
margin:0 auto;
color: #67877d;
margin:0 auto;
font-family:'Lato';
font-weight:400;
font-size:20px;

}
.about a:hover{background:#db5a14;color:#fff;}



.icon{ display: block; margin: 0 auto; }

.icon-egg{ width: 120px; height: 120px; background: url(../img/icon-egg.png); background-size:contain;margin: 50px auto 80px; }
.icon-baloon{ width: 120px; height: 120px; background: url(../img/icon-baloon.png); background-size:contain;margin: 50px auto 80px; }
.icon-cactus{ width: 120px; height: 120px; background: url(../img/icon-cactus.png); background-size:contain;margin: 50px auto 80px; }
.icon-mail,.icon-phone,.icon-cv{ background: url(../img/icon-contact.png) no-repeat; }
.icon-mail{ width: 103px; height: 77px; background-position: 0 0; }
.icon-phone{ width: 79px; height: 88px; background-position: 0 -165px; }
.icon-cv{ width: 72px; height: 88px; background-position: 0 -77px; }
.contact{ width: 700px; margin: 0 auto 200px; }
.contact ul{ margin-left: -40px; }
.contact li{ float: left; margin-left: 40px; }
.item-info{ background: #fff url(../img/avatar.jpg) no-repeat; position: relative; width: 202px; height:202px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.item-info a{ position: absolute; left: 0; top: 0; width: 202px; height: 172px; text-align: center; border-radius: 100%; padding-top: 30px;  -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;text-decoration: none; background-color: #E47F82;}
.item-info:hover a{ text-decoration: none;  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;  }
.contact .item-phone{ background-position: 0 0; }
.contact .item-mail{ background-position: 0 -202px; }
.contact .item-cv{ background-position: 0 -404px; }
.item-info span{ color: #fff; font:normal 14px 'Century Gothic',sans-serif; }
.item-info .icon{ margin-bottom: 20px; }
.item-info .icon-mail{ margin-top: 10px; }
.work { padding-bottom: 160px; }
.list { margin:  0 auto; width: 1000px; }
.photo .list{width:768px;}
.list li{ display: inline-block; margin-right: 5px;margin-left: 5px; margin-bottom:10px;}
.item-project{ width: 300px; height: 225px; border: 0px; overflow: hidden; position: relative; font-family: 'Century Gothic',sans-serif; text-align: center;}
.item-project img{ display: block; position: relative;width: 300px; height: 225px;  }
.item-project div{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: #fff; position: absolute; overflow: hidden; top: 0; left: 0; width: 300px; height: 240px; }
.item-project:hover div{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
.item-project h2{ font-style: italic; color: #db5a14; font-size: 20px; padding-top: 20px; margin-bottom: 5px;}
.item-project p{ font-style: italic; color: #999;padding: 10px 40px 0px 40px; font-size: 14px; line-height: 20px; height:130px;}
.item-project p:hover{ opacity:1;font-style: italic; color: #999;padding: 10px 40px 0px 40px; font-size: 14px; line-height: 20px; }
.item-project h3{ color: #67877d; font-size: 14px;}





.btn-enter{ display: block; text-decoration: none; width: 92px; height: 46px; line-height: 46px; text-align: center; margin: 20px auto 0; font-size: 18px; color: #fff; border: 1px solid #fff; border-radius: 20px; }
.line{
	border: none;
	display: block;
	width: 500px;
	height: 4px;
	background: url(../img/line.png) no-repeat;
}

.photo {
	margin:  0 auto;
	width: 768px;
	margin-bottom: 100px;
}
.photo li{
	display: inline-block;
	margin: 0px 4px 16px 4px;
}
.item-photo{ width: 175px; height: 175px; border: none; overflow: hidden; position: relative; font-family: 'Century Gothic',sans-serif; text-align: center;}
.item-photo img{ display: block; position: relative;width: 175px; height: 175px; margin-bottom:20px;  }
.item-photo div{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: #db5a14; position: absolute; overflow: hidden; top: 0; left: 0; width: 175px; height: 175px; }
.item-photo:hover div{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
 .item-photo h2{ color: #fff; font-size: 14px; padding-top: 80px; margin-bottom: 20px;}
.item-photo p{ color: #fff;padding: 10px; font-size: 16px; line-height: 24px; }



.gallery{ width: 872px; margin: 0 auto 140px;  }
.gallery ul{ margin-left: -10px; overflow: hidden;  position: relative; list-style: none; overflow: hidden; width: 100%;   }
.gallery li:first-child {position: relative; display: block; float: left; }

.gallery li{-webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0;  }
.gallery li img{ display: block; height: auto; float: left; width: 100%; border: 0;  }


.footer{ padding: 40px 0px 60px 0px; height: 160px; background-color: #343c3a;}
.footer p{color:#FFF; font-family:'Lato'; font-weight:100;}
.copyright  { text-align: center; font: normal 14px 'Lato',sans-serif; color: #666;margin-top:30px; }
.copyright  em{ color: #D03573; }
.icon-dot{ display: inline-block; vertical-align: -5px; width: 20px; height: 20px;  margin-right: 10px; }
.footinfo{color:#666; font-size:14px; FONT-family:"helvatica";text-align:center; padding:30px; }
.footinfo img{max-width:80px; max-height: 80px; margin-bottom: 20px;}
 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.cloud-medium,.cloud-big{ display: none;}
.cloud0{ top:32px; right: 54px; }
.cloud1{ top: 56px; left: 35px; }
.cloud2{ top: 210px; right: 34px; display: none;}	

.index h1{ top: 130px; left: 0;  width: 260px; margin-left: 40px; height: 50px; -webkit-background-size: auto 50px;
background-size: auto 50px;}
.index nav{  width: 296px; position: absolute; top: 250px; left: 50%; margin-left: -138px; color:#db5a14; font-size: 36PX;}
.index nav a{ width: 80px; height: 36px; margin-right: 10px; text-align: center; display: inline-block; border: 2px solid rgba(238,132,137,0.62); border-radius: 10px; color: #ee8489; text-decoration: none; font:italic 14px/36px 'Century Gothic',sans-serif; }
.fixed-nav{ display: none !important;}

.intro{ width: 320px; font-size: 18px;}
.contact{ width: 320px; margin: 0 auto 100px; }
.list li{display: block;}
.contact li{ float: none; margin-bottom: 10px;  }
.item-info{ width: 150px; height: 150px; -webkit-background-size: 150px auto;
background-size: 150px auto;  }
.contact .item-mail{background-position: 0 -150px;}
.contact .item-cv{background-position: 0 -300px;}
.item-info a{ width: 150px; height: 120px; opacity: 1; left:160px;}
.item-project {width: 314px; height: 280px; border: 3px solid #EBF0F5; }

.icon-mail {width: 59px; height: 43px; background-position: 0 0; -webkit-background-size: 59px auto;background-size: 59px auto; }
.icon-phone {width: 59px; height: 49px; background-position: 5px -95px;  -webkit-background-size: 59px auto ;background-size: 59px auto ;}
.icon-cv {width: 54px; height: 50px; background-position: 5px -44px;  -webkit-background-size: 59px auto;background-size: 59px auto;} 

.work{ padding-bottom: 60px;}
.work.list{width:800px;} 
.photo{ margin:  0 auto; width: 320px; }
.photo .list{ margin:  0 auto; width: 320px; }
.photo li{ display: inline-block; margin: 0 0 10px 10px;}
.item-photo{ width: 145px; height: 145px;}
.item-photo img {  width: 145px; height: 145px; margin-bottom: 0; }

.item-photo div{  width: 145px; height: 145px; }
 .item-photo h2{   padding-top: 60px;  }
.line{  width: 320px; height: 4px;   }
}



@-webkit-keyframes cloud { from { background-position: 1000px 100%; }frames cloud { from { background-position: 1000px 100%; } cloud { from { background-position: 1000px 100%; }