* {
    margin: 0;
    padding: 0;
}

aside,footer,address,section {
    display: block;
}

img,iframe,video,embed {
    max-width: 100%!important;
}


/* Tipografica */

#header span{
    font: italic 2.5em "PT Sans Narrov", sans-serif;
    display: block;
    text-align: center;
    color: #fff;
    padding-top: 4.1em; /* 160px */
}

h1 {
    font-size: 4.6em;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    margin-top: 0.2em;
}

h2{
    font: bold 2.5em "PT Sans Narrov", sans-serif;
    text-align: center;
    color: #222;
    text-transform: uppercase;
    margin: 2.8em 0 0 0;
}

#contact h2{
    color: #fff;
}

h4{
    font-size: 1.125em;
    font-weight: bold;
    padding: 0.5em 0;
    color: #222;
}

#partfolio h4, #team h4{
    padding: 0.5em 0 0 0;
    margin-top: 2px;
}

#partfolio p{
    font: italic 1em "PT Sans Narrov", sans-serif;
    color: #777;
}

.headline{
    display: block;
    text-align: center;
    color: #777f;
    font: italic 1em "PT Sans Narrov", sans-serif;
    padding: 0.8em 0 3em 0;
} /* 0.3 0 0.3 0 must be */

#header .headline{
   color: #777;
}

.button{
    background: #fed136;
    display: block;
    font: bold  1.125em "PT Sans Narrov", sans-serif;
    text-transform: uppercase;
    text-align: center;
    width: 240px;
    text-decoration: none;
    margin: 1.8em auto 8em auto; /* не полуилось отступить вниз */
    color: #fff;
    padding: 1em 0;
    border-radius: 5px;
}

.box3 p{
    font: 1em "PT Sans Narrov", sans-serif;
    color: #777;
}

.resume {
    font: 1em "PT Sans Narrov", sans-serif;
    color: #777;
    text-align: center;
    padding-top: 2.5em;
}


/* Layout */

#page {
    width: 100%;
    font: 100% "PT Sans Narrov", sans-serif;
}

#header {
    background: url(../images/logo.jpg) no-repeat center top;
}

.layout {
    width: 940px;
    margin: 0 auto;
    overflow: hidden;
}

.clr{
    clear: both;
}

#header img{
    margin-top:2.18Em;
}

#header menu{
    width: 67%;
    float: right;
    padding: 2.18em;
    margin-right: -6em;
}

#header menu li{
    float: left;
    list-style: none;
    padding: 0 30px 0 0;
}

#header menu li a{
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration:none;
}

#services{
    background: #fff;
    padding-bottom: 10.8em;
}

.box3{
    width: 31%;
    padding: 0 1%;
    float: left;
    text-align: center;
}

#partfolio{
    background: #f7f7f7;
    padding-bottom: 6.8em;
}

#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1.3em 1.125em 0;
    background: #fff;
}

#partfolio .box3.last{
    margin: 0 0 3.12em 0;
}


/* HOVER эффект */

#partfolio .box3 a{
    display: block;
    overflow: hidden;
    text-decoration: none;
    height: 300px;
}

#partfolio .box3 img {
    transition: all 0.2s linear;
    border: none;
}

#partfolio .box3 div {
    width: auto;
    height: 300px;
    position: relative;
    background: rgba: (0,0,0,0.7);
    overflow: hidden;
    transition: all 0.4s linear;
    transform: rotate(6deg);
    opacity: 0;
}

#partfolio .box3 div span{
    display: block;
    width: 60%;
    margin: 11em auto;
    color: #feeb4e;
    border: 4px solid #feeb4e;
    padding: 0.5em 10px;
    font-size: 120%;
    font-weight: bold;
    background: rgba(39,39,39,0.1);
}

#partfolio .box3 a:hover img{
    margin-top: -30px;
}

#partfolio .box3 a:hover div{
    bottom: 305px;
    opacity: 1;
    transform: rotate(0);
    background: rgba(39,39,39,0.3);
}

#about {
    background: #fff;
    padding-bottom: 6.8em;
}

.border {
    width: 50px #000;
}

.level {
    position: relative;
    overflow: hidden;
    margin-bottom: 5.5em;
}

.level h4{
    text-transform: uppercase;
}

.level h5{
    color: #333;
    font-size: 1.125em;
    font-weight: bold;
}

.level p{
    color: #777;
}

.level img{
    display: block;
    border: 7px solid  #f1f1f1;
    border-radius: 184px;
}

.level:nth-child(odd) {
    text-align: left;
    left: 33.43%;
}

.level:nth-child(odd) img {
    float: left;
    margin: 0 0 0 7.5%;
}

.level:nth-last-child(even){
    text-align: right;
    left: -39.57%;
}

.level:nth-last-child(even) img{
    float: right;
    margin: 0 7.5 0 0;
}

.level a img:hover{
    border: 7px solid #888;
}

#team {
    background: #f9f9f9;
    padding-bottom: 8.8em;
}

#team img {
    border: 7px solid #fff;
    border-radius: 117px;
}

.social {
    text-align: center;
    overflow: hidden;
    margin: 1em 0;
}

.social a {
    width: 41px;
    height: 41px;
    display: inline-block;
}

.tw {
    background: url(../images/sprite-new.png);
}

.tw:hover  {
    background-position:-42px 0;
}

.fb {
    background: url(../images/sprite-old.png);
    background-position:0 -41px;
}

.fb:hover {
    background-position:-42px -41px;
}

.google {
    background: url(../images/sprite-old.png);
    background-position:0 -82px;
}

.google:hover {
    background-position:-42px -82px;
}

.pin {
    background: url(../images/sprite-old.png);
    background-position:0 -123px;
}

.pin:hover {
    background-position:-42px -123px;
}

#partner {
background:#fff;
padding-bottom:1.8em;
}

#slider {
    position:relative;
    height:10em;
}

#container {
    position: absolute;
    top:1em;
    left: 6%;
    height:7.5em;
    width:87%;
    overflow:hidden;
}

#container img {
    position: absolute;
    top:0;
    height:7.5em;
    width:305px;
    cursor:pointer;
    overflow:hidden;
}

#carouselLeft {
    position: relative;
    top:-6.8em;
    left:0;
    cursor:pointer;
    opacity: 0.6; margin-bottom: 3em;
}

#carouselRight {
    position: relative;
    top:-6.8em;
    left:88%;
    cursor:pointer;
    opacity: 0.6; margin-bottom: 3em;
}

#carouselLeft:hover, #carouselRight:hover {
    opacity:0.9;
}

#map .layout {
    width:100%;
    margin: 0 auto;
    border: 0;
    align-content: center;
}

#contact {
background: url(../images/map.png) no-repeat top right #222;
padding-bottom:6.8em;
}

.box2 {
    width: 48%;
    float: left;
    margin-right: 2%;
}

.box2:first-child{
    text-align: right;
}

.box2:last-child{
    text-align: left;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea {
    width: 92%;
    background: #fff;
    border: none;
    padding: 1em 4%;
    font: 1em "PT Sans Narrov", sans-serif;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 1em;
}

#contact textarea {
    height: 9.75em;
}

#contact input[type="submit"]{
    display: block;
    margin: 0 auto;
    background: #fed136;
    border: none;
    font-size: 1.125em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    padding: 1em 50px;
}

#contact input[type="submit"]:hover{
    background: #efc431;
}

#footer{
    width: 100%;
    padding: 1em 0;
}

footer .box3:first-child{
    text-align: center;
}

p.footer{
    font-weight: bold;
    padding: 0.6em 0;
    margin-top: 0.5em;
}

#footer .box3 .social{
    margin: 0;
}

#footer .tw {
    background: url(../images/sprite-new.png);
    background-position: -84px 0;
}

#footer .tw:hover{
    background-position: -42px 0;
}

#footer .fb {
    background: url(../images/sprite-new.png);
    background-position: -84px -41px;
}

#footer .fb:hover{
    background-position: -42px -41px;
}

#footer .google {
    background: url(../images/sprite-new.png);
    background-position:-84px -82px;
}

#footer .google:hover{
    background-position: -42px -82px;
}

#footer .pin {
    background: url(../images/sprite-new.png);
    background-position:-84px -123px;
}

#footer .pin:hover{
    background-position: -42px -123px;
}

/* .fixed {
    position: fixed;
    right: 30px;
    bottom: 1em;
    background: rgba (39,39,39,0.5);
    color: #5c5c5c;
    padding: 0.5em 15px;
    text-decoration: none;
    border: 15px;
    border-color: rgb(39, 39, 39);
}

.fixed:hover{
    background: rgba (39,39,39,0.9)
}
 */

#toTop {
    width: 100px;
 /*    border: 4px solid #ccc; */
    background: rgba(0,0,0,0.3);
    text-align: center;
    padding: 0.8em 15px;
    position: fixed;
    bottom: 2em;
    right: 5%;
    cursor: pointer;
    display: none;
    color: #fff;
    font-size: 1em;
    border-radius: 20px;
}

#toTop:hover{
    background: rgba(0,0,0,0.9);
}


/* ------------ Adaptive ----------- */

/* ----------- 1280px ----------- */

@media screen and (max-width:1280px), only screen and (max-device-width:1280px)


/* ----------- 1280px ----------- */

@media screen and (max-width:1024px), only screen and (max-device-width:1024px)


/* ----------- 854px ----------- */

    @media screen and (max-width:854px), only screen and (max-device-width:854px){

.layout{
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

#header menu{
    width: 70%;
    float: right;
    padding: 3.18em 0;
}

#header menu li{
    float: left;
    list-style: none;
    padding: 0 13px 0 0;
}

#header menu li a{
    color: #fff;
    font-size: 1em;
}

h1{
    font-size: 3.6em;
}

#header span{
    font: italic 2.3em "PT Sans Narrov", sans-serif;
}

#carouselRight{
    position: relative;
    top: -6.8em;
    left: 87%;
}

#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1em 1em 0;
    background: #fff;
}

.level:nth-child(2n+1) img{
    float: left;
    margin: 0 0 0 5.5%;
}

.level:nth-last-child(2n) img{
    float: right;
    margin: 0 5.5 0 0;
}

} 

/* ----------- 800px ----------- */

   @media screen and (max-width:800px), only screen and (max-device-width:800px){

.layout{
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
}

#header menu{
    width: 70%;
    float: right;
    padding: 3.18em 0;
}

#header menu li{
    float: left;
    list-style: none;
    padding: 0 13px 0 0;
}

#header menu li a{
    color: #fff;
    font-size: 1em;
}

h1{
    font-size: 3.6em;
}

#header span{
    font: italic 2.3em "PT Sans Narrov", sans-serif;
}

#carouselRight{
    position: relative;
    top: -6.8em;
    left: 87%;
}

#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1em 1em 0;
    background: #fff;
}

.level:nth-child(2n+1) img{
    float: left;
    margin: 0 0 0 5.5%;
}

.level:nth-last-child(2n) img{
    float: right;
    margin: 0 5.5 0 0;
}

} 


/* ----------- 768px ----------- */

   @media screen and (max-width:768px), only screen and (max-device-width:768px){

.layout{
    width: 710px;
    margin: 0 auto;
    overflow: hidden;
}

#header menu{
    width: 75%;
    float: right;
    padding: 3em 0;
}

#header menu li{
    float: left;
    list-style: none;
    padding: 0 13px 0 0;
}

#header menu li a{
    color: #fff;
    font-size: 1em;
}

h1{
    font-size: 3em;
}

#header span{
    font: italic 2em "PT Sans Narrov", sans-serif;
}
       
#services {
    padding-bottom: 8em;
}
       
#partfolio{
    padding-bottom: 4.8em;
}


#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1em 1em 0;
    background: #fff;
}
       
#about {
    padding-bottom: 4.8em;
}

.level:nth-child(2n+1) img{
    float: left;
    margin: 0 0 0 5.5%;
}

.level:nth-last-child(2n) img{
    float: right;
    margin: 0 5.5 0 0;
}
       
#container {
    width: 85%;
    left: 7%;
}
       
#carouselRight{
    position: relative;
    top: -6.8em;
    left: 84%;
}

#carouselLeft{
 
}
       
       
} 

/* ----------- 640px ----------- */

   @media screen and (max-width:640px), only screen and (max-device-width:640px){

.layout{
    width: 590px;
    margin: 0 auto;
    overflow: hidden;
}

#header menu{
    width: 95%;
    float: none;
    padding: 1.5em 0;
}

#header menu li{
    float: left;
    list-style: none;
    padding: 0 13px 0 0;
}

#header menu li a{
    color: #fff;
    font-size: 1.1em;
}

h1{
    font-size: 2.5em;
}

#header span{
    font: italic 1.5em "PT Sans Narrov", sans-serif;
}

#partfolio .box3.last {
    margin: 1em auto;
}
       
.box3, #partfolio .box3, #partfolio .box3 .last, .box2{
     width: 80%;
    float: none;
    margin: 1em auto;
} 
       
#services {
    padding-bottom: 5em;
}
       
#partfolio{
    padding-bottom: 2.8em;
}


#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1em 1em 0;
    background: #fff;
}
       
#partfolio .box3 div span{
   width: 35%;
}

#about {
    padding-bottom: 4.8em;
}

       .level{
           position: static;
           margin-bottom: 2em;
       }

.level:nth-child(2n+1) img{
    float: left;
    margin: 0 0 0 5.5%;
}

.level:nth-last-child(2n) img{
    float: right;
    margin: 0 5.5 0 0;
}
       
#container {
    width: 85%;
    left: 7%;
}
       
#carouselRight{
    position: relative;
    top: -6.8em;
    left: 84%;
}

#carouselLeft{
 
}
       
       
} 

/* ----------- 600px ----------- */

   @media screen and (max-width:600px), only screen and (max-device-width:600px){

.layout{
    width: 550px;
    margin: 0 auto;
    overflow: hidden;
}

#header menu{
    width: 95%;
    float: none;
    padding: 1.5em 0;
}

#header menu li{
    float: left;
    list-style: none;
    padding: 0 13px 0 0;
}

#header menu li a{
    color: #fff;
    font-size: 1.1em;
}

h1{
    font-size: 2.5em;
}

#header span{
    font: italic 1.5em "PT Sans Narrov", sans-serif;
}

#partfolio .box3.last {
    margin: 1em auto;
}
       
.box3, #partfolio .box3, #partfolio .box3 .last, .box2{
     width: 80%;
    float: none;
    margin: 1em auto;
} 
       
#services {
    padding-bottom: 5em;
}
       
#partfolio{
    padding-bottom: 2.8em;
}


#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1em 1em 0;
    background: #fff;
}
       
#partfolio .box3 div span{
   width: 35%;
}

#about {
    padding-bottom: 4.8em;
}

.level{
    position: static;
    margin-bottom: 3em;
       }

.level:nth-child(2n+1) img{
    float: left;
    margin: 0 0 0 5.5%;
}

.level:nth-last-child(2n) img{
    float: right;
    margin: 0 5.5 0 0;
}
       
#container {
    width: 80%;
    left: 9%;
}
       
#carouselRight{
    position: relative;
    top: -6.8em;
    left: 80%;
}

#carouselLeft{
 
}
       
       
} 


/* ----------- 480px ----------- */

   @media screen and (max-width:480px), only screen and (max-device-width:480px){

.layout{
    width: 430px;
    margin: 0 auto;
    overflow: hidden;
}

#header menu{
    width: 95%;
    float: none;
    padding: 1.5em 0;
}

#header menu li{
    float: none;
    list-style: none;
    padding: 0 0 0.5em 3%;
}

#header menu li a{
    color: #fff;
    font-size: 1.2em;
}

h1{
    font-size: 2.5em;
}

#header span{
    font: italic 1.5em "PT Sans Narrov", sans-serif;
}

#partfolio .box3.last {
    margin: 1em auto;
}
       
.box3, #partfolio .box3, #partfolio .box3 .last, .box2{
     width: 80%;
    float: none;
    margin: 1em auto;
} 
       
#services {
    padding-bottom: 5em;
}
       
#partfolio{
    padding-bottom: 2.8em;
}


#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1em 1em 0;
    background: #fff;
}
       
#partfolio .box3 div span{
   width: 35%;
}

#about {
    padding-bottom: 4.8em;
}

.level{
    position: static;
    margin-bottom: 3em;
       }

.level:nth-child(2n+1) img{
    float: left;
    margin: 0 0 0 5.5%;
}

.level:nth-last-child(2n) img{
    float: right;
    margin: 0 5.5 0 0;
}
       
#container {
    width: 75%;
    left: 12%;
}
       
#carouselRight{
    position: relative;
    top: -6.8em;
    left: 76%;
}

#footer {
    width: 100%;
    padding: 1em 0 2em 0;
}
 
}
       
       
}


/* ----------- 360px -ww---------- */

   @media screen and (max-width:360px), only screen and (max-device-width:360px){

.layout{
    width: 310px;
    margin: 0 auto;
    overflow: hidden;
}

#header menu{
    width: 95%;
    float: none;
    padding: 1.5em 0;
}

#header menu li{
    float: none;
    list-style: none;
    padding: 0 0 0.5em 3%;
}

#header menu li a{
    color: #fff;
    font-size: 1.2em;
}

h1{
    font-size: 2.5em;
}
       
h2 {
    font: bold 2em "PT Sans Narrov", sans-serif;
    margin: 2em 0 0 0;
}
       
#header span{
    font: italic 1.5em "PT Sans Narrov", sans-serif;
}

#partfolio .box3.last {
    margin: 1em auto;
}
       
.box3, #partfolio .box3, #partfolio .box3 .last, .box2{
     width: 80%;
    float: none;
    margin: 1em auto;
} 
       
#services {
    padding-bottom: 5em;
}
       
#partfolio{
    padding-bottom: 2.8em;
}


#partfolio .box3{
    width: 0 3.5% 3.125em 0;
    padding: 0 1em 1em 0;
    background: #fff;
}
       
#partfolio .box3 div span{
   width: 35%;
}

#about {
    padding-bottom: 4.8em;
}

.level{
    position: static;
    margin-bottom: 3em;
       }

.level:nth-child(2n+1) img{
    float: left;
    margin: 0 0 0 5.5%;
}

.level:nth-last-child(2n) img{
    float: right;
    margin: 0 5.5 0 0;
}
       
#container {
    width: 75%;
    left: 12%;
}
       
#carouselRight{
    position: relative;
    top: -6.8em;
    left: 76%;
}

#footer {
    width: 100%;
    padding: 1em 0 2em 0;
}
 
}
       
       
}