@import url("/fonts/fonts.css");
@import url("/hovers.css");

a:hover {text-decoration: underline;}
html, body{ margin:0; padding:0; width:100%; height:100%;}
body{ font-family: 'Open Sans Condensed', sans-serif; font-size: 16px; color: #333333;}

.wrapper {width: 100%; margin: 0 auto;}
.wrapper .header { position: relative; margin-bottom: 5px; padding-bottom: 10px;}
.wrapper .header:after{ content: ""; position:absolute; left: 0; bottom:0;  height:1px; width: 100%; background: #000000; }

.wrapper .header .nordwest {text-align: center; font-size:4rem;}

.wrapper .header .logo {position:absolute; left:20px; top:10px; width:10%;}
.wrapper .header .logo img {width:100%;}
.wrapper .header .nordwest a {color: #333333; text-decoration :none;}
.wrapper .header .nordwest a:hover {color: #222222; text-decoration :underline;}

.header .topmenu {display: block; width: 100%; padding: 15px 0 0 0 ;}
.header .topmenu ul{ display: block; padding:0; margin:0; }
.header .topmenu ul li{display: inline-block; width:33.3333%; text-align: center; font-size: 2rem;}
.header .topmenu a {text-decoration: none; color: #333333; }
.header .topmenu a:hover { border-bottom:solid 1px;}
.header .topmenu span.menu-active {font-weight:bold;}
.header .topmenu li.phone{ width:100%; text-align:right;}
.header .topmenu li.contacts_top{ text-align:right;}
.header .topmenu li.instagram{ text-align:left;}

.wrapper h1 {text-align: center; margin:0; padding:0; font-size:3rem;}
.wrapper h2 {font-size:1.5rem; text-align: center; color:#ad3106;}

.mainpage{
    overflow:hidden;
    display:block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
     display: -webkit-flex;
    display: flex;

    -moz-box-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.mainpage>div{
    width: 32%; padding: 0;
    display:inline-block;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    vertical-align:top;
}

.mainpage>div>div{ width: 100%; padding: 10px 0.5rem; }

.mainpage>div.with-button { padding: 0 0 60px 0;}

.mainpage>div>div>.img img{ max-width: 100%; width: 100%; height:auto; }
.footer{ padding: 20px 0 10px 0; }
.footer .contacts { font-size: 0.8rem;}

.multiimg .img:last-child{ position:absolute; bottom:0; margin: 0 0.8rem 20px 0;}
.mainpage .multiimg .img+.txt{border:1;}
.mainpage1>div>div>div.img+.txt {border:0; border-left:solid orange 5px; vertical-align: top; bottom:auto; width:95%; position:static; padding:0 0 0 5%; margin:5% 0;}

.mainpage div#yamap {height: 120mm; border:solid orange 1px;}

.mainpage div.more{width:100%; left:0; bottom:10px; text-align: center; position: absolute; bottom:0; z-index: 1; margin:10px 0;}
.mainpage div.more a {border: 1px solid #000000; background: #ffffff; display: inline-block; padding: 4px 15px; z-index: 20; text-decoration: none; color: #555555;}
.mainpage div.more a:after{ content:""; width: 80%; height:1px; background: #000000; top:49%; left:10%; position: absolute; z-index: -1; transition: all 1s;}
.mainpage div.more a:hover:after { width: 98%; left:1%; background: #ad3106; transition: all 1s;}

.mainpage>div.double{ width:66%; }
.mainpage>div.triple{ width:94%; }

@supports (flex-wrap: wrap) {
  .mainpage>div{ width:33.3333%; }
  .mainpage>div>div{padding: 20px 0.8rem;}
  .mainpage>div.double{ width:66.6666%; }
  .mainpage>div.triple{ width:100%; }
}

.contacts {width:100%;}
.contacts span {display: inline-block; width:50%;}
.contacts span div {padding:0 10px;}
.contacts span:nth-child(2) {text-align: right;}


/*
File: Helper clasess
*/
.p-0 {
    padding: 0px !important;
}
.p-20 {
    padding: 20px !important;
}
.p-30 {
    padding: 30px !important;
}
.p-l-0 {
    padding-left: 0px !important;
}
.p-r-0 {
    padding-right: 0px !important;
}
.p-t-0 {
    padding-top: 0px !important;
}
.p-t-10 {
    padding-top: 10px !important;
}
.p-b-10 {
    padding-bottom: 10px !important;
}
.p-l-r-10 {
    padding-left: 10px;
    padding-right: 10px;
}
.m-0 {
    margin: 0px !important;
}
.m-r-5 {
    margin-right: 5px !important;
}
.m-r-10 {
    margin-right: 10px !important;
}
.m-r-15 {
    margin-right: 15px !important;
}
.m-l-5 {
    margin-left: 5px !important;
}
.m-l-10 {
    margin-left: 10px !important;
}
.m-l-15 {
    margin-left: 15px !important;
}
.m-t-5 {
    margin-top: 5px !important;
}
.m-t-0 {
    margin-top: 0px !important;
}
.m-t-10 {
    margin-top: 10px !important;
}
.m-t-15 {
    margin-top: 15px !important;
}
.m-t-20 {
    margin-top: 20px !important;
}
.m-t-30 {
    margin-top: 30px !important;
}
.m-t-40 {
    margin-top: 40px !important;
}
.m-b-0 {
    margin-bottom: 0px !important;
}
.m-b-5 {
    margin-bottom: 5px !important;
}
.m-b-10 {
    margin-bottom: 10px !important;
}
.m-b-15 {
    margin-bottom: 15px !important;
}
.m-b-20 {
    margin-bottom: 20px !important;
}
.m-b-30 {
    margin-bottom: 30px !important;
}
.w-xs {
    min-width: 80px;
}
.w-sm {
    min-width: 95px;
}
.w-md {
    min-width: 110px;
}
.w-lg {
    min-width: 140px;
}
.m-h-40 {
    min-height: 40px;
}
.m-h-50 {
    min-height: 50px;
}
.l-h-34 {
    line-height: 34px;
}
.font-600 {
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}
.font-normal {
    font-weight: normal;
}
.font-light {
    font-weight: 300;
}
.font-13 {
    font-size: 13px !important;
}
.wrapper-md {
    padding: 20px;
}
.pull-in {
    margin-left: -15px;
    margin-right: -15px;
}
.b-0 {
    border: none !important;
}
.vertical-middle {
    vertical-align: middle;
}
.bx-shadow {
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.mx-box {
    max-height: 380px;
    min-height: 380px;
}
.thumb-sm {
    height: 32px;
    width: 32px;
}
.thumb-md {
    height: 48px;
    width: 48px;
}
.thumb-lg {
    height: 88px;
    width: 88px;
}
@media (max-width:300mm), (min-width: 300mm){
    body{font-size: 2vw;}
/*    .mainpage>div{ width: 33%; }*/
}
@media (max-width:250mm){
    body{font-size: 2vw;}
    .wrapper .header .nordwest {font-size: 2.5rem;}
    .wrapper h1 {font-size: 3rem;}
    .wrapper .header .logo {position:absolute; left:40%; bottom:0.5rem; top:auto; width:20%;}
    .wrapper .header .logo img {width:100%;}
    .header:after{content: "до 250мм";}
    .mainpage>div{ width: 49.3333%;}
    .header .topmenu {display: block; width: 100%; padding: 15px 0 0 0 ; position:relative;}
    .header .topmenu ul{ display: block; padding:0; margin:0; }
    .header .topmenu ul li{display: inline-block; width:49.3333%; text-align: center; font-size: 1.5rem;}
    .header .topmenu a {text-decoration: none; color: #333333; }
    .header .topmenu a:hover { border-bottom:solid 1px;}
    .header .topmenu li.phone{ width:100%; text-align:right;}
    .header .topmenu li.contacts_top{ text-align:right;}
    .header .topmenu li.studios{ text-align:left; position:absolute; top: 15px; left: 0; padding-left:15px;}
    
    
    .mainpage>div.double h2 {font-size:1.2rem;}
    .mainpage>.multiimg {width:94%;}
    .mainpage>.multiimg div.img {width:49.333%; display:inline-block;}
    .mainpage>.multiimg .img:last-child {position:static; margin: 0; border:none;}
    .mainpage>div.double{ width: 94%;}
    .mainpage>div.triple{ width: 94%;}
    
    @supports (flex-wrap: wrap) {
	.mainpage>div.double{ width: 100%;}
	.mainpage>div.triple{ width: 100%;}
	.mainpage>.multiimg {width:100%;}
    }
}
@media (max-width:130mm){
    body{font-size: 3.5vw;}
    .wrapper .header .nordwest {font-size: 2rem;}
    .wrapper h1 {font-size: 2rem;}
    .header:after{content: "до 130мм";}
    .header .logo a {font-size: 1.7rem; line-height:3rem;}
    
    .header .topmenu ul li{font-size: 0.8rem;}
    .mainpage>.multiimg div.img {width:100%; display:block;}
    .mainpage div#yamap {height:80mm;}

    .mainpage>div.double{ width: 94%;}
    .mainpage>div.triple{ width: 94%;}
    .mainpage>div{ width: 94%; }
    
    @supports (flex-wrap: wrap) {
	.mainpage>div{ width: 100%; }
	.mainpage>div.double{ width: 100%;}
	.mainpage>div.triple{ width: 100%;}
    }
    .contacts span {display: block; width:100%;}
    .contacts span div {padding:0 10px;}
    .contacts span:nth-child(2) {text-align: left;}
}