/*
Theme Name: mkdes.ru
Theme URI: http://mkagenc.com
Description: mkagenc.com
Author: Michael Koshelev
Author URI: http://mkagenc.com
*/


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body, section, input, h1, h2, h3, h4, h5, ul, ul li{
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
    font-weight: normal;
  -webkit-appearance: none;
}


html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  -webkit-appearance: none;
}

html::-webkit-scrollbar, .caselist::-webkit-scrollbar {
    width: 0;
    height: 0;
}


html {
    overflow-x: hidden;
  -webkit-appearance: none;
}

a, img, input[type=text], input[type=submit], .callbackicon, .servant, .button {
    transition: all 0.2s;
    -ms-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    text-decoration: none;
}

body::-webkit-scrollbar {
    width: 0em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: #000;
    outline: 0px solid #000;
}


body::-moz-scrollbar {
    width: 0em;
}

body::-moz-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-moz-scrollbar-thumb {
    background-color: #c8baad;
    outline: 0px solid #000;
}

::selection {
    background: #fff;
    color: #000;
}
::-moz-selection {
    background: #fff;
    color: #000;
}



body {
    overflow-x: hidden;
    -webkit-appearance: none;
    font-family: Roboto;
}


.clear {
    clear: both;
}

/* ----- Display ----- */


.wrap {
    display: block;
    margin: 0 auto;
    width: 89vw;
}



.homepage {
    display: block;
    background: #000 url(img/bg1.jpg) top center no-repeat;
    background-size:  cover;
    color: #fff;
    height: 45vw;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.homecont {
    display: block;
    width: 47%;
}



.homepage video {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    height: auto;
}

.homecontent {
    display: block;
    position: absolute;
    background: rgba(0,0,0,0.4);
    height: 100%;
    width: 100%;
    z-index: 3;
    top: 0;
    padding: 12vw 0 0 0;
}






h1, .formas h2 {
    display: block;
    font-size: 4vw;
    font-family: "Oswald", sans-serif;
    text-transform:  uppercase;
    line-height:  4.1vw;
    font-weight: 500;
}

p {
    display: block;
    font-size: 0.95vw;
    line-height: 1.5vw;
    padding: 1.5vw 0;
    opacity:  0.5;
}

.homecont p {
    width: 80%;
}


.button {
    display:  block;
    float:  left;
    margin-right:  1vw;
    padding: 0.8vw 1.5vw;
    border-radius: 2vw;
    font-size:  0.87vw;
    background: #0088ee;
    font-family: "Oswald", sans-serif;
    color: #fff;
    min-width:  7vw;
    text-align:  center;
    font-weight:  400;
    text-transform:  uppercase;
}

.button:hover {
    background:  #0366b0;
}

header .button-gray {
    background:  #fff;
    color:  #000;
}

header .button-gray:hover {
  background:  rgba(255,255,255,0.7);
    }

.homecont .button-gray {
    color:  #fff;
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    color: #fff;
    background:  none;
    border-bottom:  0.1vw rgba(255,255,255,0.3) solid;
    border-radius:  0;
    padding-left: 0;
    padding-right:  0;
    padding-bottom:  0.2vw;
    margin-left:  1vw;
    min-width:  1vw;
}

.homecont  .button-gray:hover {
    background:  none;
    border-bottom:  0.1vw rgba(255,255,255,0.7) solid;
}




header {
    display:  block;
    position:  absolute;
    z-index:  2;
    width:  100%;
    z-index: 20;
    top:  0;
    padding:  1vw 0 0 0;
}

header a {
    color:  #fff;
    font-size:  1vw;
}

header a:hover {
  opacity:  0.8;
}

.logo {
    display:  block;
    width:  10%;
    float:  left;
    opacity:  1;
}

.logo img {
    display:  block;
    height:  3.5vw;
    margin-top: 0.5vw;
}



header .button-gray {
    display: block;
    float:  right;
    font-family: "Oswald", sans-serif;
    text-transform:  uppercase;
    border-radius:  3vw;
}



.top-menuz {
    display:  block;
    width: 75%;
    text-align:  center;
    float:  left;
    padding-top: 1vw;
    font-family: "Oswald", sans-serif;
}

.top-menuz li {
    display:  inline-block;
    padding:  0 1vw;
}



footer {
    display:  block;
    width:  100%;
    top:  0;
    padding:  1vw 0 0 0;
}

footer a {
    color:  #000;
}


.formas {
    display:  block;
    background: #000 url(img/bg3.jpg) top center no-repeat;
    background-size:  cover;
    padding:  5vw 0;
    color:  #fff;
}

.formas p {
    padding:  1vw 0;
    width: 60%;
}

input[type=text], input[type=email], input[type=number] {
    background: #fff;
    border:  0.1vw #505050 solid;
    font-size:  0.95vw;
    padding:  0.8vw 1vw;
    border-radius:  0.25vw;
    float:  left;
    margin-right:  1.5vw;
    color: #666;
    outline:  none;
    margin-bottom: 1vw;
    font-weight: 300;
    width:  18%;
}

input[type=submit] {
    background: #0088ee;
    border: 0.1vw #0088ee solid;
    text-transform:  uppercase;
    font-size:  0.95vw;
    padding:  0.65vw 1vw;
    border-radius:  0.25vw;
    float:  left;
    margin-right:  1.5vw;
    color:  #fff;
    outline:  none;
    width: 20.4%;
    cursor:  pointer;
    font-family: "Oswald", sans-serif;
}




.inpaddit {
    width: 40.5% !important;
}


input[type=submit]:hover {
    opacity:  0.8;
}

input::placeholder {
    color:  #666;
}

.policys {
    display:  block;
    padding:  1vw 0 0 0;
    font-size:  0.6vw;
    opacity: 0.4;
}


.formas .wrap {
    width:  80%;
}


.formas h2 {
    width:  70%;
}




.whys {
    display:  block;
    padding:  4vw 0;
}


.whys .w50 {
    display: block;
    float: left;
    border: 0.1vw #0088ee solid;
    width: 40%;
    padding: 3vw;
    margin-right: 3%;
}


.whys h2 {
        font-family: "Oswald", sans-serif;
        text-transform:  uppercase;
        font-size:  2.8vw;
        line-height:  2.9vw;
        font-weight:  500;
}

.whys p {
    padding:  1vw 0;
    width:  75%;
}


.services {
    display:  block;
    padding:  5vw 0;
}

.services h2, .choose h2, .join h2, .contacts h2 {
    display: block;
    font-size: 4vw;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    line-height: 4.1vw;
    font-weight: 500;
    margin-bottom:  -0.5vw;
}


.serv {
    display: inline-block;
    width: 15%;
    background: rgba(0, 0, 0, 0.2);
    padding: 10vw 1.5vw 0vw 1.5vw;
    border-radius: 0.8vw;
    color:  #fff;
}

.servicelist {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}


.serv h3 {
    display:  block;
    font-family: "Oswald", sans-serif;
    font-weight:  500;
    font-size:  1.6vw;
    line-height:  1.6vw;
    margin:  0 0 0.5vw 0;
}

.serv p {
    padding-top: 0.2vw;
    font-size: 0.85vw;
    line-height: 1.1vw;
}

.servicelist .serv:nth-child(1) {
    background:  url(img/s1.jpg) no-repeat;
    background-size:  cover;
}
.servicelist .serv:nth-child(2) {
    background:  url(img/s2.jpg) no-repeat;
    background-size:  cover;
}
.servicelist .serv:nth-child(3) {
    background:  url(img/s3.jpg) no-repeat;
    background-size:  cover;
}
.servicelist .serv:nth-child(4) {
    background:  url(img/s4.jpg) no-repeat;
    background-size:  cover;
}
.servicelist .serv:nth-child(5) {
    background:  url(img/s5.jpg) no-repeat;
    background-size:  cover;
}


.choose {
    display: block;
    padding: 4vw 0 2vw 0;
    background:  rgba(0,0,0,0.03);
}

.wchs {
    display: inline-block;
    width: 30%;
}

.chooselist {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 5vw 0 0vw 0;
}

.wtext {
    display: inline-block;
    width: 81%;
    vertical-align: top;
}

.num {
    display: inline-block;
    width: 14%;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size:  2.8vw;
    line-height: 2.8vw;
    font-weight: 500;
    color:  #0088ee;
}

.wtext h3 {
    display: block;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 1.6vw;
    line-height: 1.6vw;
    margin-bottom:  -0.5vw;
}

.wtext p {
    padding-top: 0.8vw;
}


.join {
    display:  block;
    padding:  6vw 0;
    background:  url(img/bg5.jpg) no-repeat;
    background-size:  cover;
    text-align:  center;
    color:  #fff;
}

.join .wrap {
    width:  50%;
}


.join .button {
    float:  none;
    margin:  0 auto;
    max-width:  10vw;
}

.contacts {
    display:  block;
    padding:  5vw 0 1vw 0;
}

.contacts h2 {
    text-align:  center;
}

.cnt {
    display: block;
    width: 33%;
}

.contlist {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin:  4vw 0 0 0;
}


.contacts .wrap {
    width:  70%;
}

.cnt img {
    display: inline-block;
    height: 2vw;
}

.ctext {
    display: inline-block;
    width: 80%;
    padding-left: 1vw;
    vertical-align: top;
}

.ctext h3 {
    display: block;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 1.6vw;
    line-height: 1.6vw;
}

.ctext p {
    padding-top: 0.5vw;
    width:  80%;
}


.map {
    display:  block;
    width:  100%;
    height:  20vw;
    filter:  grayscale(100%);
    overflow:  hidden;
    background:  rgba(0,0,0,0.03);
}

.map iframe {
    display:  block;
    width:  100%;
    height:  20vw;
    border:  none;
    outline:  none;
}


.copy {
    display:  block;
    float:  right;
    text-align:  right;
    font-size:  0.95vw;
    margin: -1vw 0 0 0;
}




.overlay {
    background: rgba(0, 0, 0, 0.5);
    display: block;
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 30;
    top:  -300vh;
}

.mobile-menu {
    display: block;
    background: #000;
    padding: 10vw 3vw;
    color: #fff;
}

.mobile-menu ul {
    display:  block;
    padding:  8vw 0;
}

.mobile-menu li {
    display:  block;
    padding:  3vw 0;
}

.mobile-menu li a {
    display:  block;
    color:  #fff;
    font-size:  5vw;
    font-weight:  500;

}

.close {
    display: block;
    float: right;
    width: 9vw;
    height: 9vw;
    background: url(img/close.svg) center center no-repeat;
    cursor: pointer;
    background-size: 12vw;
    margin: -7vw -3vw 0 0vw;
    opacity: 0.7;
}





/* ---------- Popup -------- */

.popup_overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    min-height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    background: rgba(0,0,0,0.6);
    overflow-y:scroll;
}

.popup_oveflay_scroll {
    display: block;
    position: relative;
}

.popup {
    display: block;
    background: #fff;
    margin: 3vw auto;
    border-radius: 1vw;
    width: 32vw;
    padding: 2vw 2.5vw;
}


.close_popup {
    display: block;
    float: right;
    width: 1.5vw;
    height: 1.5vw;
    background: url(img/close2.svg) center center no-repeat;
    background-size: 1.5vw;
    cursor: pointer;
    outline: none;
}

.close_popup:hover {
    opacity: 0.8;
}

.popup h2, .popup h3 {
    display: block;
    font-size: 2.3vw;
    font-weight: 600;
    color: #000;
}


.popup p {
    display: block;
    font-size: 1vw;
    line-height: 1.5vw;
    width: 100%;
    color: #555;
    margin: 1.3vw 0;
}

.popup p a {
    color: #555;
    border-bottom: 1px rgba(0,0,0,0.1) solid;
}

.popup p a:hover {
    border-bottom: 1px #555 solid;
}



.popup input[type=text] {
    display: block;
    border: none;
    outline: none;
    font-size: 1.2vw;
    color: #909090;
    border-bottom: 0.05vw #E5E5E5 solid;
    width: 100%;
    padding: 1.3vw 0;
    margin: 0 0 1vw 0;
}

.popup input[type=text]:focus {
  border-bottom: 0.05vw #555 solid;
}


.popup input[type=submit] {
    display: block;
    border: none;
    outline: none;
    background: #000;
    padding: 1.5vw 0;
    text-align: center;
    border-radius: 0.8vw;
    margin: 2vw 0;
    color: #fff;
    font-size: 1.3vw;
    width: 100%;
    cursor: pointer;
}

.popup input[type=submit]:hover {
    background: #333;
}

.policy {
    display: block;
    margin: 0 auto;
    width: 80%;
    font-size: 0.9vw;
    line-height: 1.2vw;
    color: #909090;
    text-align: center;
}

.policy a {
    color: #909090;
    text-decoration: underline;
}







/* ------------------------------------------------------------------------------------------------------------------------- */










@media (max-width: 700px) {


.wrap {
    width: 90%;
}

.logo img {
    height: 8vw;
    margin: 3vw 0 0 0;
}


header .top-menuz {
    display:  none;
}

header a{
    font-size: 4vw;
}



.homepage {
    padding: 0;
    height: 135vw;
}

    h1, .formas h2 {
        font-size: 12vw;
        line-height: 12vw;
    }

.homecont {
    width: 100%;
    padding-top: 13vw;
}


.homepage video {
    display: block;
    position: relative;
    z-index: 1;
    width: auto;
    margin-top: 0;
    padding-top: 0;
    height: 100%;
}


p {
    font-size: 3.5vw;
    line-height: 5vw;
    padding: 3vw 0;
}

.homecont p {
    width: 100%;
}

    .hamburger {
        display: block;
        float: right;
        width: 9vw;
        height: 9vw;
        background: url(img/menu.svg) center center no-repeat;
        cursor: pointer;
        background-size: 12vw;
        margin: 2vw 0 0 4vw;
    }


    header .button-gray {
    display: none;
}



.button {
    margin-right: 3vw;
    padding: 3vw 5vw;
    border-radius: 8vw;
    font-size: 4vw;
    min-width: 25vw;
    }


.homecont .button-gray {
    margin-left: 4vw;
}


footer .top-menuz ul li {
  display:  block;
  text-align:  center;
}

footer .top-menuz {
    float:  none;
    width:  100%;
}

footer .logo {
    float:  none;
    margin:  0 auto 5vw auto;
        width: 20%;
}



.formas p {
    padding: 0 0 5vw 0;
    width: 100%;
}

.formas {
    padding: 12vw 0;
}

input[type=text], input[type=email], input[type=number] {
    font-size: 4vw;
    padding: 4vw 3vw;
    border-radius: 1vw;
    float: none;
    margin-bottom: 3vw;
    margin-right: 0;
    width: 93% !important;
}

input[type=submit] {
    font-size: 4vw;
    padding: 4vw 0;
    border-radius: 1vw;
    float: none;
    margin-right: 0;
    width: 100%;
}

.policys {
    padding: 4vw 0 0 0;
    font-size: 2vw;
    text-align: center;
}

.formas .wrap {
    width:  90%;
}

.formas h2 {
    width:  100%;
}


.whys {
    display: block;
    padding: 10vw 0;
}


.whys .w50 {
    float: none;
    width: 80%;
    padding: 8vw;
    margin-right: 0;
    margin-bottom:  4vw;
}

.whys h2 {
    font-size: 9vw;
    line-height: 9.2vw;
    font-weight: 500;
    width:  100%;
}

.whys .button {
    float:  none;
}

.whys p {
    width: 100%;
}

.services {
    padding: 12vw 0;
}

.services h2, .choose h2, .join h2, .contacts h2 {
    display: block;
    font-size: 12vw;
    line-height: 12vw;
}


.servicelist {
    display: block;
}

.serv {
    display: block;
    width: 87%;
    background: rgba(0, 0, 0, 0.2);
    padding: 40vw 6vw 4vw 6vw;
    border-radius: 2vw;
    margin: 0 0 4vw 0;
}

.serv h3 {
    font-size: 8vw;
    line-height: 8vw;
    margin: 0 0 4vw 0;
}

.serv p {
    font-size: 3.5vw;
    line-height: 5vw;
}

.choose {
    padding: 12vw 0;
}

.chooselist {
    display: block;
}

.wchs {
    display: block;
    width: 100%;
}

.wtext h3 {
    font-size: 8vw;
    line-height: 8vw;
    margin-bottom: 0;
}

.num {
    font-size: 8vw;
    line-height: 8vw;
}

.chooselist{
    margin-top:  15vw;
}

.join .wrap {
    width:  90%;
}

.join {
    padding: 12vw 0;
}

.join .button {
    max-width: 50vw;
}

.contacts {
    padding:  12vw 0 5vw 0;
}

.contlist {
    display: block;
    margin: 10vw 0 0 0;
}

.contacts .wrap {
    width: 90%;
}

.ctext h3 {
    font-size: 8vw;
    line-height: 8vw;
}

.cnt {
    display: block;
    width: 100%;
}

.cnt img {
    display: inline-block;
    width: 7vw;
    height:  auto;
}

.ctext {
    padding-left: 3vw;
}

.map {
    height: 70vw;
}

.map iframe {
    height: 80vw;
}

.copy {
    display: block;
    width: 100%;
    float: none;
    font-size: 4vw;
    margin: 4vw 0;
    text-align: center;
}



.popup {
    margin: 6vw auto;
    width: 80%;
    padding: 4vw 5vw;
}

.popup h2, .popup h3 {
    font-size: 5vw;
}

.close_popup {
    width: 4vw;
    height: 4vw;
    background-size: 4vw;
}

.popup input[type=text] {
    font-size: 3.5vw;
    padding: 3vw 0;
    margin: 0 0 2vw 0;
}

.popup input[type=submit] {
    padding: 3vw 0;
    border-radius: 1vw;
    margin: 4vw 0;
    font-size: 3.5vw;
}

.policy {
    font-size: 2vw;
    line-height: 3vw;
}





}













/* ---- */