/* Сборос стилей простой */

* {
margin:0;
padding:0;
}
/* Блочное отображение HTML5 элементов */

aside, footer, address, section {
display:block;
}
/*  адаптивные изображениЯ и iframe */

img, iframe, video, embed {
max-width:100%!important;
}
/*  медиа запросы    */

@media screen and (max-width:854px), only screen and (max-device-width:854px) 
{
    стили для разрешения экрана 854px и менее

}

/* типографика */

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

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

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

#contact h2 {
	color:#fff;
}

h4 {
    font: bold 1.125em 'PT Sans Narrow', sans-serif;
    text-align: center;
    color: #222;
    margin: 0.5em 0;   
}

#portfolio h4, #team  h4  {
    padding: 0.5em 0 0 0;
}

#portfolio p {
    font: italic 1em 'PT Sans Narrow', sans-serif;
    color: #777;
}

.headline {
    display: block;
    text-align: center;
    color: #777;
    font: italic 1em 'PT Sans Narrow', sans-serif;
    padding: 0.3em 0 3em 0 ;
}
.box3 p {
    font:  1em 'PT Sans Narrow', sans-serif ;
    color: #777;
}

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

.button {
    display: block;
    margin: 1.8em auto 6em auto;
    width: 240px;
    text-align: center;
    background: #fed136;
    color: #80808B;
    font: bold 1.125em 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    padding: 1em 0;
    border-radius: 5px;
    text-decoration: none;
}


/* Layout */

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

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

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

.clr {
    clear: both;
}

#header img {
    margin-top: 2em;
}      

#header menu {
    width: 60%;
    float: right;
    padding: 2em;
}

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

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

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

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

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

#portfolio .box3 {
    margin: 0 3.5% 3.125em 0;
    padding: 0 0 1.125em 0;
    background: #fff;    
}

#portfolio .box3.last {
    margin: 0 0 3.125em 0;
}

/*     Hover эффект    */

#portfolio .box3 a {
    display: block;
     overflow: hidden;    /*чтобы скрывать всё, что не входит в блок*/
    text-decoration: none;
    height: 301px;      /*  высота окна ()равная размеру картинки)*/  
}

#portfolio .box3 img {
    transition: all 0.2s linear; /*переход через 0.2сек линейный*/
    border: none;
} 

#portfolio .box3 div {
    width: auto;
    height: 301px;
    position: relative;
    background: rgba(0,0,0,0.7);
    overflow: hidden;
    transition: all 0.4s linear;
    transform: rotate(6deg);
    opacity: 0; /* скрываем подложку*/
}

#portfolio .box3 div span {
    display: block;
    width: 60%;
    margin: 3em auto;
    color: #ADEDF7;
    border: 4px solid #ADEDF7;
    padding: 0.5em 10px;
    font-size: 120%;
    font-weight: bold;
}

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

#portfolio .box3 a:hover div {
    bottom: 200px;
    opacity: 1;   /* подложка видна */
    transform: rotate(0);
}

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

.border {
    width: 50%;
    border-right: 3px solid #f1f1f1;
}
.level {
    position: relative;
    overflow: hidden;
	margin-bottom: 5.5%;
}

.level h4 {
    text-transform: uppercase;
}

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

.level p {
    color: #777;
}

.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: right;
	left: 19.57%;
}

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

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

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

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

#team {
	background: #f9f9f9;
	padding-bottom: 6.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.png);
}
.tw:hover {
background-position:-42px 0;
}
.fb {
background: url(../images/sprite.png);
background-position:0 -41px;
}
.fb:hover {
background-position:-42px -41px;	
}
.google {
background: url(../images/sprite.png);
background-position:0 -82px;
}
.google:hover {
background-position:-42px -82px;	
}
.pint {
background: url(../images/sprite.png);
background-position:0 -123px;
}
.pint:hover {
background-position:-42px -123px;	
}

#partner {
		background: #fff;                       
		padding-bottom: 6.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:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:87%;
	cursor:pointer;
	opacity:0.4;
}
#carouselLeft :hover, #carouselRigft:hover {
	opacity:0.9;	
}

#map .layout {
	width:1280px;  
}

#contact {
	background: url(../images/map.png) no-repeat 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 Narrow', 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: #80808B;
	cursor:pointer;
	border-radius:4px;
	padding: 1em 50px;
}

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

#contact p {
	text-align: right;
}
#contact p a {
	color: #eee;
	font-size: 1em;
}

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

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

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

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

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

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

footer .pint {
background: url(../images/sprite.png);
background-position:-84px -123px;
}
/*
.fixed {
	position: fixed;
	right: 30px;
	bottom: 2em;
	background: rgba(0,0,0,0.5);
	color:#eee;
	padding: 0.5em 15px;
	text-decoration: none;
}
.fixed:hover {
	background: rgba(0,0,0,0.9);
}
*/

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

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

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

/* ---1280px  ---*/
@media screen and (max-width:1280px), only screen and (max-device-width:1280px) {
  #map .layout {
	width:100%;  
	}  
}
/* ---1024px  ---*/
@media screen and (max-width:1024px), only screen and (max-device-width:1024px) {
  #map .layout {
	width:100%;  
	}  
}
/* ---854px  ---*/
@media screen and (max-width:854px), only screen and (max-device-width:854px) {
.layout {
    width: 800px;  
}
#header menu {
    width: 60%;
}	
#header span {
    padding-top: 1.5em; 
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
}

.level {
    position: relative;
    overflow: hidden;
	margin-bottom: 4em;
}
#container {
	position: absolute;
	top:1em;
	left:6%;
	height:7.5em;
	width:87%;
	overflow:hidden;
}

#carouselRight {
	position:relative;
	top:2.5em;
	left:87%;
	cursor:pointer;
	opacity:0.4;
}

}
/* ---800px  ---*/
@media screen and (max-width:800px), only screen and (max-device-width:800px) {
.layout {
    width: 760px;  
}
#header menu {
    width: 70%;
}	
#header span {
    padding-top: 1.5em; 
}

.button {
    margin: 1.8em auto 5em auto;
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
}

.level:last-child img {
	margin-bottom:0;
}
.level {
    position: relative;
    overflow: hidden;
	margin-bottom: 4em;
}

.level:last-child {
	margin-bottom: 1em;
}
#container {
	position: absolute;
	top:1em;
	left:7%;
	height:7.5em;
	width:85%;
	overflow:hidden;
}
#carouselLeft {
	position:relative;
	top:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:86%;
	cursor:pointer;
	opacity:0.4;
}

}

/* ---   768px  ---*/
@media screen and (max-width:768px), only screen and (max-device-width:768px) {
h2 {
    margin: 1.5em 0 0 0;
}

.layout {
    width: 720px;  
}
#header menu {
    width: 70%;
}	
#header span {
    padding-top: 1.5em; 
}

.button {
    margin: 1.8em auto 5em auto;
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
}

.level:last-child img {
	margin-bottom:0;
}
.level {
    position: static;
    overflow: hidden;
	margin-bottom: 2em;
}

.level:last-child {
	margin-bottom: 1em;
}
#container {
	position: absolute;
	top:1em;
	left:7%;
	height:7.5em;
	width:85%;
	overflow:hidden;
}
#carouselLeft {
	position:relative;
	top:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:86%;
	cursor:pointer;
	opacity:0.4;
}
.border {
    width: 100%;
    border:none ;
}

}

/* ---   640px  ---*/
@media screen and (max-width:640px), only screen and (max-device-width:640px) {
h2 {
    margin: 1.5em 0 0 0;
}

.layout {
    width: 600px;  
}
#header menu {
    width: 98%;
	float:none;
	padding:0 ;
}

.box3, #portfolio .box3, #portfolio .box3.last,  box2  {
	width:80%;
	float:none;
	margin:1em auto;
}	
#header span {
    padding-top: 1.5em; 
}

.button {
    margin: 1.8em auto 5em auto;
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
}

.level:last-child img {
	margin-bottom:0;
}
.level {
    position: static;
    overflow: hidden;
	margin-bottom: 2em;
}

.level:last-child {
	margin-bottom: 1em;
}
#container {
	position: absolute;
	top:1em;
	left:7%;
	height:7.5em;
	width:85%;
	overflow:hidden;
}
#carouselLeft {
	position:relative;
	top:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:86%;
	cursor:pointer;
	opacity:0.4;
}
.border {
    width: 100%;
    border:none ;
}
#partner {
display:none;
}

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

}

/* ---   600px  ---*/
@media screen and (max-width:600px), only screen and (max-device-width:600px) {
h2 {
    margin: 1.5em 0 0 0;
}

.layout {
    width: 560px;  
}
#header menu {
    width: 98%;
	float:none;
	padding:0 ;
}

.box3, #portfolio .box3, #portfolio .box3.last,  box2  {
	width:80%;
	float:none;
	margin:1em auto;
}	
#header span {
    padding-top: 1.5em; 
}

.button {
    margin: 1.8em auto 5em auto;
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
}

.level:last-child img {
	margin-bottom:0;
}
.level {
    position: static;
    overflow: hidden;
	margin-bottom: 2em;
}

.level:last-child {
	margin-bottom: 1em;
}
#container {
	position: absolute;
	top:1em;
	left:7%;
	height:7.5em;
	width:85%;
	overflow:hidden;
}
#carouselLeft {
	position:relative;
	top:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:86%;
	cursor:pointer;
	opacity:0.4;
}
.border {
    width: 100%;
    border:none ;
}
#partner {
display:none;
}

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

}

/* ---   480px  ---*/
@media screen and (max-width:480px), only screen and (max-device-width:480px) {
h2 {
    margin: 1.5em 0 0 0;
}

.layout {
    width: 440px;  
}
#header menu {
    width: 98%;
	float:none;
	padding:0 ;
}

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

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

.box3, #portfolio .box3, #portfolio .box3.last,  box2  {
	width:80%;
	float:none;
	margin:1em auto;
}	
#header span {
    padding-top: 1.0em; 
}

.button {
    margin: 1.8em auto 5em auto;
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
}

.level:last-child img {
	margin-bottom:0;
}
.level {
    position: static;
    overflow: hidden;
	margin-bottom: 2em;
}

.level:last-child {
	margin-bottom: 1em;
}
#container {
	position: absolute;
	top:1em;
	left:7%;
	height:7.5em;
	width:85%;
	overflow:hidden;
}
#carouselLeft {
	position:relative;
	top:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:86%;
	cursor:pointer;
	opacity:0.4;
}
.border {
    width: 100%;
    border:none ;
}
#partner {
display:none;
}

footer {
padding:1em 0 3em 0;
}

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

#toTop {
right:2%;
}

}

/* ---   360px  ---*/
@media screen and (max-width:360px), only screen and (max-device-width:360px) {
h2 {
    margin: 1.5em 0 0 0;
}

.layout {
    width: 320px;  
}
#header menu {
    width: 90%;
	float:none;
	padding:0 ;
}

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

#header menu li a {
    font-size: 1.0em;
}

.box3, #portfolio .box3, #portfolio .box3.last,  box2  {
	width:80%;
	float:none;
	margin:1em auto;
}	
#header span {
    padding-top: 1.0em; 
}

.button {
    margin: 1.8em auto 5em auto;
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
}

.level:last-child img {
	margin-bottom:0;
}
.level {
    position: static;
    overflow: hidden;
	margin-bottom: 2em;
}

.level:last-child {
	margin-bottom: 1em;
}
#container {
	position: absolute;
	top:1em;
	left:7%;
	height:7.5em;
	width:85%;
	overflow:hidden;
}
#carouselLeft {
	position:relative;
	top:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:86%;
	cursor:pointer;
	opacity:0.4;
}
.border {
    width: 100%;
    border:none ;
}
#partner {
display:none;
}

footer {
padding:1em 0 3em 0;
}

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

#toTop {
right:2%;
bottom:1em;
}

}

/* ---   320px  ---*/
@media screen and (max-width:320px), only screen and (max-device-width:320px) {

h1 {
	font-size:3.5em;
}
h2 {
    margin: 1.5em 0 0 0;
}

.layout {
    width: 280px;  
}
#header menu {
    width: 98%;
	float:none;
	padding:0 ;
}

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

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

.box3, #portfolio .box3, #portfolio .box3.last,  box2  {
	width:80%;
	float:none;
	margin:1em auto;
}	
#header span {
    padding-top: 1.5em; 
}

.button {
    margin: 1.8em auto 5em auto;
}
#map .layout {
	width:100%;  
	}
	
.level:nth-child(odd) {
	text-align: right;
	left: 23%;
}
.level:nth-child(even) {
	text-align:left;
	left: 77%;
}
.level:nth-child(odd) img {
	float: right;
	margin:0 0 2em 7.5%;
	width: 30%;
}
.level:nth-child(even) img {
	float: left;
	margin: 0 7.5% 2em 0;
	width: 30%;
}

.level:last-child img {
	margin-bottom:0;
}
.level {
    position: static;
    overflow: hidden;
	margin-bottom: 2em;
}

.level:last-child {
	margin-bottom: 1em;
}
#container {
	position: absolute;
	top:1em;
	left:7%;
	height:7.5em;
	width:85%;
	overflow:hidden;
}
#carouselLeft {
	position:relative;
	top:2.5em;
	left:0;
	cursor:pointer;
	opacity:0.4;
}
#carouselRight {
	position:relative;
	top:2.5em;
	left:86%;
	cursor:pointer;
	opacity:0.4;
}
.border {
    width: 100%;
    border:none ;
}
#partner {
display:none;
}

footer {
padding:1em 0 3em 0;
}

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

#toTop {
right:2%;
bottom:1em;
}

}