html,
body{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'Arial';
    color: #333;
    font-weight: 400;
    font-size: 16px;
    background: #f0f0f0;
    text-align: center;
}

body.mobileMenu,
body.showPopup{
    overflow: hidden;
    position: fixed;
}


h1{
    font-size: 58px;
}

h1,
h2,
h3{
    margin: 0;
    padding: 0;
}

img{
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 0;
    display: inline-block;
}

ul, li{
    margin: 0;
    padding: 0;
}
a{
    cursor: pointer;
    text-decoration: none;
    color: #000;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}


.select{
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.select select{

    width: 0;
    overflow: hidden;
    visibility: hidden;
}
.select.active{
    z-index: 30;
}
.select-main{
    position: relative;
    color: #595959;
    border: solid 1px #a4a4a4;
    background: #f0f0f0;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    width: 100%;
    padding-left: 15px;
    padding-right: 35px;
    overflow: hidden;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.error .select-main{
    border-color: #f1424a;
}
.select-main:after{
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #f1424b transparent transparent transparent;
}
.select-options{
    visibility: hidden;
    position: absolute;
    list-style: none;
    top: 46px;
    margin: 0;
    padding: 0;
    width: 100%;
    border: solid 1px #a4a4a4;
    box-sizing: border-box;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    opacity: 0;
    background: #f0f0f0;
}
.select.active .select-options{
    visibility: visible;
    opacity: 1;
}
.select-options li{
    display: block;
    min-height: 50px;
    box-sizing: border-box;
    padding: 15px 20px;
}
.select-options li:hover{
    color: #fff;
    background: #f1424a;
}


input,
textarea{
    background-image: #fff;
    padding: 0 20px;
    border-radius: 5px;
    border:solid 1px #8d8d8d;
    box-sizing: border-box;
    font-size: 16px;
}
input{
    height: 50px;
    line-height: 50px;
}
textarea{
    display: block;
    padding: 15px 20px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #acacac;
  font-size: 16px;
  font-weight: 400;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #acacac;
  font-size: 16px;
  font-weight: 400;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #acacac;
  font-size: 16px;
  font-weight: 400;
}
:-moz-placeholder { /* Firefox 18- */
  color: #acacac;
  font-size: 16px;
  font-weight: 400;
}

label{
    position: relative;
}

.error input,
.error textarea{
    border:solid 1px red;
}
.error-tip{
    display: none;
    position: absolute;
    left: 0;
    bottom: -14px;
    color: #f1424a;
    font-size: 11px;
    width: 320px;
}
.error .error-tip{
    display: block;
}
/*
select {
    width: 120%;
    height: 100%;
    box-sizing: border-box;
    padding:0 30px 0 20px;
    line-height: 50px;
    background: transparent;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    color: #595959;

}
select::-ms-expand {
    display: none;
}
*/
header .logo{
    background: url('../images/logo-white.png');
    float: left;
    width: 245px;
    height: 56px;
}


.block.nav-container{
    height: 100px;
    position: relative;
    z-index: 9;
    overflow: visible;
}
.header-nav{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 14px;
    z-index: 10;
    box-sizing: border-box;

}
.header-nav .block{
    padding: 26px 34px 0 34px;
    box-sizing: border-box;
}
.header-nav .nav-bg{
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background: #fff;
    border-bottom: solid 1px #d7d7d7;
    box-sizing: border-box;
}
.content .nav-bg{
    max-width: 1260px;
}
.content .header-nav.fixed .nav-bg,
.mobileMenu .content .header-nav .nav-bg{
    max-width: 2000px;
    -webkit-transition: all 0.65s ease-out;
    -moz-transition: all 0.65s ease-out;
    -o-transition: all 0.65s ease-out;
    transition: all 0.65s ease-out;
}

.sub-nav-bg{
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1260px;
    height: 0;
    background: #fff;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.sub-nav-bg.opened{
    opacity: 1;
    border-bottom: solid 1px #d7d7d7;
}
.to-top .sub-nav-bg.opened{
    border-bottom: none;
    border-top: solid 1px #d7d7d7;
}

.to-top .sub-nav-bg{
    top: auto;
    bottom: 100%;
}

.content .header-nav.fixed .sub-nav-bg{
    max-width: 2000px;
    -webkit-transition: height 0.25s ease-out, opacity 0.25s ease-out, max-width 0.65s ease-out;
    -moz-transition: height 0.25s ease-out, opacity 0.25s ease-out, max-width 0.65s ease-out;
    -o-transition: height 0.25s ease-out, opacity 0.25s ease-out, max-width 0.65s ease-out;
    transition: height 0.25s ease-out, opacity 0.25s ease-out, max-width 0.65s ease-out;
}


.header-nav .logo{
    display: block;
    padding: 0;
    float: left;
    width: 76px;
    height: 46px;
    background: url('../images/logo-colored.png');
}

.header-nav {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.header-nav ul{
    float: left;
    list-style: none;
    margin: 10px 0 0 20px;
}
.header-nav ul li{
    display: inline-block;
    padding-bottom: 20px;
}
.header-nav ul ul li{
    padding-bottom: 0;
}
.header-nav ul li a{
    display: block;
    position: relative;
    line-height: 26px;
    font-weight: 600;
    padding: 0 20px;
}
.header-nav ul li a:hover,
.header-nav ul li a.selected{
    color: #f1424a;
}
.header-nav ul li a.sub-nav{
    padding-right: 20px;
}
.header-nav ul li a.sub-nav:before{
    display: block;
    position: absolute;
    top: 11px;
    right: 8px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #000 transparent transparent transparent;
}
.header-nav ul li a.sub-nav:hover:before,
.header-nav ul li a.sub-nav.selected:before{
    border-color: #f1424a transparent transparent transparent;
}
.header-nav ul li a.selected:after{
    display: block;
    background: #f1424a;
    height: 1px;
    content: '';
}

.header-nav .button{
    float: right;
}


.header-nav .nav-burger{
    position: relative;
    margin-top: 3px;
    float: right;
    padding: 8px 7px;
    box-sizing: border-box;
    width: 41px;
    cursor: pointer;
    border: solid 2px #d7d7d7;
    border-radius: 5px;
    display: none;
}
.header-nav .nav-burger > div{
    height: 3px;
    background: #6d6e71;
    border-radius: 2px;
}
.header-nav .nav-burger > div:nth-child(2){
    margin: 4px 0;
}

.mobileMenu .nav-burger > div{
    visibility: hidden;
}
.mobileMenu .nav-burger:before,
.mobileMenu .nav-burger:after {
    position: absolute;
    left: 17px;
    top: 6px;
    display: block;
    width: 3px;
    height: 20px;
    background: #6d6e71;
    border-radius: 4px;
    transform: rotate(45deg);
    content: '';
}
.mobileMenu .nav-burger:after{
    transform: rotate(-45deg);
}
.mobileMenu .nav-burger:hover:before,
.mobileMenu .nav-burger:hover:after{
    background: #f1424a;
}

.header-nav .block{
    overflow: visible;
    height: 100%;
}

.header-nav ul ul{
    position: absolute;
    left: 0;
    top: 60px;
    padding: 40px;
    padding-bottom: 0px;
    margin: 0;
    visibility: hidden;
    opacity: 0;
}
.header-nav.to-top ul ul{
    top: auto;
    bottom: 60px;
    padding-top: 0px;
    padding-bottom: 60px;
}

.header-nav ul ul.active{
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.25s ease-out 0.25s;
    -moz-transition: opacity 0.25s ease-out 0.25s;
    -o-transition: opacity 0.25s ease-out 0.25s;
    transition: opacity 0.25s ease-out 0.25s;
}
.header-nav ul ul li{
    float: left;
    width: 190px;
    height: 200px;
    margin-right: 45px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.header-nav ul ul li a{
    padding: 0;
}
.header-nav ul ul li .img{
    position: relative;
    overflow: hidden;
    width: 190px;
    height: 140px;
    margin-bottom: 10px;
}
.header-nav ul ul li .img:after{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(241,66,74,0);
    z-index: 1;
    content: '';
    -webkit-transition: background 0.25s ease-out;
    -moz-transition: background 0.25s ease-out;
    -o-transition: background 0.25s ease-out;
    transition: background 0.25s ease-out;
}
.header-nav ul ul li:hover .img:after{
    background: rgba(241,66,74,0.2);
}
.header-nav ul ul li .img img{
    position: relative;
    width: 100%;
    z-index: 1;
}
.header-nav ul ul li span{
    font-size: 17px;
    line-height: 22px;
}

.header-nav ul ul li .img img.nav-product-1{
    position: absolute;
    width: 75%;
    top: 10px;
    left: 22px;
}
.header-nav ul ul li .img img.nav-product-2{
    top: -15px;
    width: 90%;
    left: 5px;
}
.header-nav ul ul li .img img.nav-product-3{
    top: -20px;
    width: 90%;
    left: 10px;
}
.header-nav ul ul li .img img.nav-product-4{
    top: -10px;
    width: 80%;
    left: 10px;
}

.header-nav .stripes-hover-1,
.header-nav .stripes-hover-2,
.header-nav .stripes-hover-3{
    width: 190px;
    height: 140px;
}

.header-nav ul ul li .stripes-hover-1{
    left: -70px;
}
.header-nav ul ul li .stripes-hover-2{
    left: 20px;
}
.header-nav ul ul li .stripes-hover-3{
    left: 110px;
}


.nav-mobile{
    position: fixed;
    top: 0px;
    right: -110%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: solid 1px #d7d7d7;
    z-index: 11;
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;
    transition: right 0.5s ease-out;
}
.mobileMenu .nav-mobile{
    right: 0;
    top: 88px;
    height: calc(100% - 88px);
}

.mobileMenu .nav-mobile .close{
    position: fixed;
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.nav-mobile .plus{
    position: absolute;
    width: 60px;
    height: 60px;
    top: 0px;
    right: 15px;
    cursor: pointer;
}
.nav-mobile .plus:before{
    position: absolute;
    display: block;
    top: 22px;
    left: 30px;
    width: 2px;
    height: 12px;
    background: #000;
    content: '';
}
.nav-mobile .plus:after{
    position: absolute;
    display: block;
    top: 27px;
    left: 25px;
    width: 12px;
    height: 2px;
    background: #000;
    content: '';
}

.nav-mobile li:hover .plus:before,
.nav-mobile li:hover .plus:after{
    background: #f1424a;
}
.nav-mobile li:hover > a{
    color: #f1424a;
}

.nav-mobile .show-subnav .plus:before{
    display: none;
}

.nav-mobile{
    overflow: auto;
}
.nav-mobile > ul{
    list-style: none;
    opacity: 0;
    text-align: left;
}
.mobileMenu  .nav-mobile > ul{
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-out 0.5s;
    -moz-transition: opacity 0.5s ease-out 0.5s;
    -o-transition: opacity 0.5s ease-out 0.5s;
    transition: opacity 0.5s ease-out 0.5s;
}

.nav-mobile > ul > li{
    position: relative;
    text-transform: uppercase;
}
.nav-mobile > ul > li > a{
    border-top: solid 1px #d7d7d7;
}
.nav-mobile > ul > li:first-child > a{
    border-top: none;
}
.nav-mobile > ul > li:last-child > a{
    border-bottom: solid 1px #d7d7d7;
}


.nav-mobile ul a{
    font-weight: 600;
    padding: 20px 15px;
    display: block;
    font-size: 15px;
    padding-left: 30px;
}



.nav-mobile ul ul{
    list-style: none;
    max-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease-out;
    -moz-transition: max-height 0.5s ease-out;
    -o-transition: max-height 0.5s ease-out;
    transition: max-height 0.5s ease-out;
}
.nav-mobile .show-subnav ul{
    max-height: 500px;
    -webkit-transition: max-height 0.75s ease-out;
    -moz-transition: max-height 0.75s ease-out;
    -o-transition: max-height 0.75s ease-out;
    transition: max-height 0.75s ease-out;
}
.nav-mobile ul ul li{
    padding-bottom: 5px;
    text-transform: none;
}
.nav-mobile ul ul li:first-child{
    border-top: solid 1px #d7d7d7;
    padding-top: 15px;
}
.nav-mobile ul ul li:last-child{
    padding-bottom: 15px;
}
.nav-mobile ul ul li a{
    margin-left: 35px;
    display: block;
    position: relative;
    font-size: 14px;
    padding: 10px 15px;
}
.nav-mobile ul ul li a:before{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 0 3px 4px;
    border-color: transparent transparent transparent #333;
    left: -3px;
    top: 16px;
    content: '';
}


.nav-mobile ul .img{
    display: none;
}

.content .header-nav{
    position: relative;
}
.content .header-nav:before{
    position: absolute;
    display: block;
    width: 100%;
    border-top: solid 1px #d7d7d7;
    left: 0;
    top: 0;
    content: '';
    z-index: 10;
}
.content .header-nav.fixed,
.mobileMenu .content .header-nav{
    position: fixed;
}
.content .header-nav.fixed:before,
.mobileMenu .content .header-nav:before{
    display: none;
}




.stripes-hover-1,
.stripes-hover-2,
.stripes-hover-3{
    position: absolute;
    width: 600px;
    height: 350px;
    bottom: 0;
    left: 150%;
    background-position: bottom left;
    background-repeat: no-repeat;
}
.stripes-hover-1{
    background-image: url('../images/stripes-hover-1.png');
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.stripes-hover-2{
    background-image: url('../images/stripes-hover-2.png');
    -webkit-transition: all 0.45s ease-out;
    -moz-transition: all 0.45s ease-out;
    -o-transition: all 0.45s ease-out;
    transition: all 0.45s ease-out;
}
.stripes-hover-3{
    background-image: url('../images/stripes-hover-3.png');
    -webkit-transition: all 0.65s ease-out;
    -moz-transition: all 0.65s ease-out;
    -o-transition: all 0.65s ease-out;
    transition: all 0.65s ease-out;
}



.clear{
    float: none !important;
    clear:both;
}

.content .topSlider{
    position: fixed;
    width: 100%;
    left: 0;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding-bottom: 100px;
}
.content .topSlider.tied{
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
    padding-bottom: 50px;
    transform: none;
}
.topSlider span{
    display: block;
    font-size: 20px;
    line-height: 30px;
    padding: 0 50px;
}
.topSlider .title{
    font-weight: 600;
    font-size: 58px;
    line-height: 66px;
    margin-bottom: 25px;
}
.content .topSlider .block,
.content .block.transparent{
    background: transparent;
}

.top{
    position: fixed;
    padding-top: 53px;
    top: 0;
    width: 100%;
    z-index: 1;
}

.top-spacer{
    position: relative;
    -webkit-transition: height 0.75s ease-out;
    -moz-transition: height 0.75s ease-out;
    -o-transition: height 0.75s ease-out;
    transition: height 0.75s ease-out;
}

.video-slider{
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.video-slide{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 0s ease-out 0.5s;
    -moz-transition: opacity 0s ease-out 0.5s;
    -o-transition: opacity 0s ease-out 0.5s;
    transition: opacity 0s ease-out 0.5s;
}
.video-slide.active{
    z-index: 2;
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}


.video{
    position: absolute;
    top: 0;
    background-size: cover;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    z-index: 1;
}

.video video{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

.video-slide-image,
.video-slide-mobile-image{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: center;
}
.video-slide-mobile-image{
    display: none;
}

.phones{
    float: right;
    font-weight: 500;
    color: #fff;
    text-align: left;
    line-height: 28px;
    padding-top: 2px;
    padding-right: 40px;
}
.phones > div{
    float: left;
    padding-left: 17px;
}
.phones span{
    display: block;
    color: #fff;
}

.top-spacer{
    height: 100%;
}

.block{
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1260px;
    z-index: 3;
    text-align: left;
    overflow: hidden;
    vertical-align: top;
}
.content .block{
    background: #fff;
}

.bottom-space{
    margin-bottom: 80px;
}
.z-higher{
    position: relative;
    z-index: 5;
}
.z-high{
    z-index: 10;
}

.button,
.button-wo,
.button-wb,
.button-bw,
.button-to,
.button-tw,
.button-g{
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    padding: 11px 20px;
    font-weight: 600;
    text-align: center;
    background: #f1424a;
    min-width: 180px;
    color: #fff;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    box-sizing: border-box;
    border: solid 1px #f1424a;
}
.button:hover{
    background: #3d6aca;
    border: solid 1px #3d6aca;
    color: #fff;
}
.button-wo{
    background: #fff;
    color: #f1424a;
}
.button-wo:hover{
    color: #fff;
    background: #f1424a;
    border: solid 1px #fff;
}
.button-wb{
    background: #fff;
    color: #3d6aca;
    border: solid 1px #3d6aca;
}
.button-wb:hover{
    color: #fff;
    background: #3d6aca;
    border: solid 1px #fff;
}
.button-bw{
    background: #3d6aca;
    color: #fff;
    border: solid 1px #3d6aca;
}
.button-bw:hover{
    color: #3d6aca;
    background: #fff;
}
.button-to{
    background: transparent;
    color: #f1424a;
    border: solid 1px #f1424a;
}
.button-to:hover{
    color: #fff;
    background: #f1424a;
}
.button-tw{
    background: transparent;
    color: #fff;
    border: solid 1px #fff;
}
.button-tw:hover{
    color: #f1424a;
    background: #fff;
}
.button-g{
    background: #b3b3b3;
    color: #fff;
    border: solid 1px #b3b3b3;
}



.products .main{
    position: relative;
    background-color: #f1424a;
}
.products .info{
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 50px;
}
.products .main .info{
    position: absolute;
    color: #fff;
    top: 50%;
    width: 33%;
    transform: translateY(-50%);
    }
.caps-link{
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin: 5px 0;
    color: #f1424a;
    text-transform: uppercase;
}
.caps-link:hover{
    color: #ffa796;
}
.products .main .caps-link{
    color: rgba(255,255,255, 0.6);
}
.products .main .caps-link:hover{
    color: rgba(255,255,255, 1);
}
.features .caps-link{
    color: #3d6aca;
}
.features .caps-link:hover{
    color: #9db7ff;
}
.products .main .image{
    position: relative;
    float: right;
    left: 0;
    top: 0;
    width: 66%;
    background: #333335;
    overflow: hidden;
}

.products .main .image img{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.products .main .image img.stripes{
    width: auto;
    height: 100%;
}
.products .main .image img:first-child{
    position: static;
    position: relative;
    z-index: 2;
}
.products .main .image img:last-child{
    z-index: 3;
}
.products h2{
    font-size: 30px;
    font-weight: 600;
}
.products p{
    margin: 30px 0;
    line-height: 22px;
}
.products .product{
    float: left;
    width: 33%;
    height: 675px;
    padding-top: 100px;
    box-sizing: border-box;
    border-left: solid 1px #ccc;
}
.products .product:first-child{
    width: 34%;
    border: none;
}
#label{
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
#bottle-stripes{
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.product{
    position: relative;
    overflow: hidden;
}
.product img{
    position: absolute;
}
.product .image img:first-child{
    left: 0;
    bottom: -60px;
    width: 100%;
    z-index: 3;
    -webkit-transition: bottom 0.25s ease-out;
    -moz-transition: bottom 0.25s ease-out;
    -o-transition: bottom 0.25s ease-out;
    transition: bottom 0.25s ease-out;
}
.product .stripes-hover-1,
.product .stripes-hover-2,
.product .stripes-hover-3{
    left: -560px;
    background-position: right;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    height: 148px;
    bottom: 30px;
    }
.stripes-hover-blue-1,
.stripes-hover-blue-2,
.stripes-hover-blue-3{
    position: absolute;
    left: -150%;
    top: 1px;
    width: 151px;
    height: 378px;
}
.stripes-hover-blue-1{
    background: url('../images/stripes-hover-blue-1.png');
    -webkit-transition: left 0.25s ease-out;
    -moz-transition: left 0.25s ease-out;
    -o-transition: left 0.25s ease-out;
    transition: left 0.25s ease-out;
}
.stripes-hover-blue-2{
    background: url('../images/stripes-hover-blue-2.png');
    -webkit-transition: left 0.35s ease-out;
    -moz-transition: left 0.35s ease-out;
    -o-transition: left 0.35s ease-out;
    transition: left 0.35s ease-out;
}
.stripes-hover-blue-3{
    background: url('../images/stripes-hover-blue-3.png');
    -webkit-transition: left 0.45s ease-out;
    -moz-transition: left 0.45s ease-out;
    -o-transition: left 0.45s ease-out;
    transition: left 0.45s ease-out;
}
.product:hover .image img:first-child{
    bottom: -22px;
}
.product:hover .stripes-hover-1,
.product:hover .stripes-hover-blue-1,
.product:hover .stripes-hover-blue-2,
.product:hover .stripes-hover-blue-3{
    left: 0;
}

.product:hover .stripes-hover-2{
    left: -340px;
}

.features .main{
    background: #3d6aca;
}
.features .main .image img:first-child{
    z-index: 4;
}
.features .main .info{
    right: 0;
}
.products.features .product,
.products.features .product:first-child{
    width: 50%;
    height: 455px;
}
.features .info{
    position: relative;
    z-index: 1;
}
.features .info span{
    color: #3d6aca;
}
.features .main .image{
    float: left;
}
.features .hover{
    position: absolute;
    left: 0;
    top: 0;
}
.features .hover1,
.features .hover2,
.features .hover3{
    width: auto;
    height: auto;
    bottom: auto;
    top: 4px;
    left: -200%;
    background: transparent;
}
.features .placeholder{
    position: static;
    opacity: 0;
}

#book{
    -webkit-transition: top 0.5s ease-out;
    -moz-transition: top 0.5s ease-out;
    -o-transition: top 0.5s ease-out;
    transition: top 0.5s ease-out;
}

.works h2,
.technologies h2,
.clients h2{
    line-height: 50px;
    font-size: 30px;
    font-weight: 600;
}
.works h3,
.technologies h3{
    font-size: 16px;
    padding: 0 70px;
}

.works,
.technologies,
.clients{
    position: relative;
    z-index: 4;
    overflow: hidden;
}
.works-slider-container,
.clients-slider-container{
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1260px;
    margin-top: 40px;
    margin-bottom: 50px;
}
.works-slider-container .worksSlider,
.clients-slider-container .clientsSlider,
.works-slider-container .fullSlider{
    overflow: visible !important;
}
.bottom-space .worksSlider{
    margin-bottom: 0;
}

.portfolio-item{
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
}
.portfolio-item  > div{
    position: relative;
    display: inline-block;
}
.portfolio-item .title{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 165px;
    text-align: left;
    padding: 0 50px;
    box-sizing: border-box;
    background: #f1424a;
    color: #fff;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.portfolio-item .title:before{
    position: absolute;
    display: block;
    width: 100%;
    height: 38px;
    left: 0;
    top: -38px;
    background: url('../images/works-over.png') right bottom no-repeat;
    content: '';
}

.portfolio-item img{
    width: 100%;
}

.portfolio-item span{
    display: block;
    position: absolute;
    bottom: 30px;
    padding-right: 50px;
    font-size: 30px;
    font-weight: 600;
    text-align: left;
    -webkit-transition: bottom 0.25s ease-out;
    -moz-transition: bottom 0.25s ease-out;
    -o-transition: bottom 0.25s ease-out;
    transition: bottom 0.25s ease-out;
}
.portfolio-item:hover .title{
    height: 205px;
}
.portfolio-item:hover .title span{
    bottom: 60px;
}


.contact{
    position: relative;
    background: #3d6aca;
    z-index: 4;
}
.contact h2{
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    padding-top: 10px;
    line-height: 130px;
}
.contact .map-button{
    margin-top: -25px;
    margin-bottom: 60px;
}
#map{
    height: 100%;
    width: 100%;
}
.contact .map{
    position: relative;
    overflow: hidden;
    /*background: #19338e;*/
    height: 645px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.collapsed .map{
    height: 0 !important;
    overflow: hidden;
}
.on,
.collapsed .off{
    display: none;
}
.collapsed .on{
    display: block;
}

.map ul{
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 1;
}
.map ul li{
    display: inline-block;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 4px;
    line-height: 37px;
    padding: 0 18px;
    cursor: pointer;
    border-radius: 5px;
    border: solid 1px transparent;
    -webkit-transition: background 0.1s ease-out;
    -moz-transition: background 0.1s ease-out;
    -o-transition: background 0.1s ease-out;
    transition: background 0.1s ease-out;
}
.map ul li:hover{
    color: #fff;
    border: solid 1px #fff;
}
.map ul li.selected{
    background: #fff;
    color: #3d6aca;
}
.map ul li span{
    font-size: 16px;
}
.map .details{
    position: absolute;
    top: 155px;
    left: 50%;
    margin-left: 255px;
    width: 375px;
    height: 375px;
    background: #3d6aca;
    color: #fff;
    text-align: left;
    padding: 50px 40px;
    box-sizing: border-box;
    z-index: 1;
}
.map .details:after{
    position: absolute;
    display: block;
    left: 0;
    bottom:-34px;
    width: 100%;
    height: 34px;
    background: url('../images/map-stripes.png');
    content: '';
}
.map .details span{
    display: block;
    margin-bottom: 15px;
}
.map .details .title{
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 45px;
    font-weight: 600;
}
.map .details label{
    color: #9db7ff;
}
.map .details a{
    color: #fff;
    text-decoration: underline;
}
.map .details a:hover{
    color: #9db7ff;
}

.map .details{
    text-align: center;
}
.map .details > div{
    display: inline-block;
    text-align: left;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    height: 0;
}

.map .details > div.active{
    position: static;
    opacity: 1;
    visibility: visible;
    height: auto;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    transition: opacity 0.25s ease-in 0.25s;
}

.map-gradient{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 500px;
    height: 500px;
    background: -moz-linear-gradient(-45deg, rgba(197,63,73,0) 0%, rgba(197,63,73,0) 50%, rgba(197,63,73,0.5) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(197,63,73,0)), color-stop(50%, rgba(197,63,73,0)), color-stop(100%, rgba(197,63,73,0.5)));
    background: -webkit-linear-gradient(-45deg, rgba(197,63,73,0) 0%, rgba(197,63,73,0) 50%, rgba(197,63,73,0.5) 100%);
    background: -o-linear-gradient(-45deg, rgba(197,63,73,0) 0%, rgba(197,63,73,0) 50%, rgba(197,63,73,0.5) 100%);
    background: -ms-linear-gradient(-45deg, rgba(197,63,73,0) 0%, rgba(197,63,73,0) 50%, rgba(197,63,73,0.5) 100%);
    background: linear-gradient(135deg, rgba(197,63,73,0) 0%, rgba(197,63,73,0) 50%, rgba(197,63,73,0.5) 100%);
}

footer{
    position: relative;
    z-index: 1;
    background: #0b234b;
    padding-top: 75px;
    padding-bottom: 70px;
    color: #465582;
    font-size: 12px;
}

footer .block{
    display: inline-block;
    width: auto;
}

footer .social{
    float: left;
}

footer nav{
    float: left;
    border: none;
    padding: 0;
    margin: 0 50px;
    background: transparent;
}
footer nav ul{
    float: left;
    max-width: 180px;
    margin-right: 40px;
}
footer nav ul li{
    display: block;
    line-height: 14px;
    text-align: left;
    padding: 5px;
}

footer nav ul li a{
    color: #465582;
    font-size: 12px;
    padding: 0;
}
footer nav ul li:hover a{
    color: #fff;
}
footer nav ul.bold{
    margin-right: 0;
}
footer nav ul li:first-child a,
footer nav ul.bold li a{
    color: #fff;
    font-size: 14px;
}
footer nav ul li:first-child a:hover,
footer nav ul.bold li a:hover{
    color: #9db7ff;
}

footer .credits{
    float: left;
}
footer .credits a{
    color: #fff;
    text-transform: uppercase;
}
footer .credits a:hover{
    color: #9db7ff;
}

footer{
    background: #0b234b url('../images/logo-footer.png') bottom right no-repeat;
}

.social .icon{
    display: block;
    float: left;
    position: relative;
    width: 38px;
    height: 38px;
    margin-right: 20px;
}
.social .icon:before{
    position: absolute;
    left: 0;
    top: 0;
    background: url('../images/social-icons.png');
    content: '';
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
}
.social .icon:after{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../images/social-icons.png');
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
}
.social .icon:hover:before{
    opacity: 0;
}
.social .icon:hover:after{
    opacity: 1;
}

.social .instagram:before{
    background-position: 0 0;
}
.social .instagram:after{
    background-position: 0 -38px;
}
.social .facebook:before{
    background-position: 38px 0;
}
.social .facebook:after{
    background-position: -38px -38px;
}

.copyrights{
    font-size: 12px;
    margin-top: 25px;
}

.prev{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -685px;
    margin-top: -80px;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
}
.prev:before{
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    left: 15px;
    top: 10px;
    border-left: solid 3px rgba(255,255,255,0.5);
    border-bottom: solid 3px rgba(255,255,255,0.5);
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    content: '';
}
.prev:hover:before{
    border-left: solid 3px rgba(255,255,255,0.8);
    border-bottom: solid 3px rgba(255,255,255,0.8);
}
.next{
    position: absolute;
    right: 50%;
    top: 50%;
    margin-right: -685px;
    margin-top: -80px;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
}
.next:before{
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    border-right: solid 3px rgba(255,255,255,0.5);
    border-bottom: solid 3px rgba(255,255,255,0.5);
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    content: '';
}
.next:hover:before{
    border-right: solid 3px rgba(255,255,255,0.8);
    border-bottom: solid 3px rgba(255,255,255,0.8);
}


.worksSlider .prev,
.worksSlider .next,
.fullSlider .prev,
.fullSlider .next{
    top: 0;
    margin-top: -100px;
}
.clientsSlider .prev,
.clientsSlider .next{
    top: 0;
    margin-top: -90px;
}
.worksSlider .prev:before,
.worksSlider .next:before,
.clientsSlider .prev:before,
.clientsSlider .next:before,
.fullSlider .prev:before,
.fullSlider .next:before{
    border-color: rgba(0,0,0,0.5);
}
.worksSlider .prev:hover:before,
.worksSlider .next:hover:before,
.clientsSlider .prev:hover:before,
.clientsSlider .next:hover:before,
.fullSlider .prev:hover:before,
.fullSlider .next:hover:before{
    border-color: #f1424a;
}

.faded{
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}
.hidden{
    transform: translateY(100px);
    opacity: 0;
}
.hidden.show{
    transform: none;
    opacity: 1;
    -webkit-transition: transform 0.75s ease-out, opacity 0.75s ease-out;
    -moz-transition: transform 0.75s ease-out, opacity 0.75s ease-out;
    -o-transition: transform 0.75s ease-out, opacity 0.75s ease-out;
    transition: transform 0.75s ease-out, opacity 0.75s ease-out;
}
.faded.show{
    opacity: 1;
    -webkit-transition: transform 0.75s ease-out, opacity 0.75s ease-out;
    -moz-transition: transform 0.75s ease-out, opacity 0.75s ease-out;
    -o-transition: transform 0.75s ease-out, opacity 0.75s ease-out;
    transition: transform 0.75s ease-out, opacity 0.75s ease-out;
}


.top-bar{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 475px;
    background: #f1424a;
}

.heading{
    position: relative;
    z-index: 4;
    padding-top: 155px;
    padding-bottom: 30px;
    width: 100%;
}

.heading .block{
    overflow: visible;
}

.heading h1{
    color: #fff;
    font-size: 58px;
    line-height: 58px;
    font-weight: 600;
}
.heading p{
    color: #fff;
    width: 60%;
}
.heading p a{
    color: #fff;
    text-decoration: underline;
}

.portfolio-thumb{
    display: inline-block;
    width: 33.3%;
    box-sizing: border-box;
    padding: 13px;
}

.portfolio .portfolio-item .title{
    padding-top: 40px;
    bottom: -210px;
}
.portfolio .portfolio-item:hover .title{
    bottom: 0;
    height: 160px;
}

.portfolio .portfolio-item span{
    position: static;
    padding: 5px 0;
}

.bottom-space{
    margin-bottom: 120px;
}


.back-link{
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: #f1424a;
    margin-bottom: 5px;
}

.back-link:hover{
    text-decoration: underline;
}


.slogan{
    position: fixed;
    top: 0;
    margin: 200px 0;
    width: 100%;
    text-align: center;
    margin-bottom: 120px;
    color: #fff;
    z-index: 2;
}

.slogan .block{
    overflow: visible;
}

.slogan span{
    display: block;
    font-size: 58px;
    font-weight: 600;
    padding: 0 50px;
}
.slogan h1{
    padding:0 50px;
    color: #fff;
    width: 53%;
    font-size: 58px;
}
.slogan .caps-link{
    padding:0 50px;
    color: rgba(255,255,255,0.5);
}
.slogan .caps-link:hover{
    color: #fff;
}
.slogan p{
    padding:0 50px;
    font-size: 20px;
    width: 53%;
    line-height: 30px;
}


ul.list{
    list-style: none;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: -15px;
}
ul.list li{
    position: relative;
    margin-bottom: 15px;
}
ul.list li:before{
    position: absolute;
    left: -25px;
    top: 8px;
    width: 13px;
    height: 2px;
    background: #f1424a;
    content: '';
}
ul.list li span{
    font-weight: 600;
}

.line{
    margin-top: 50px;
    height: 1px;
    background: #d7d7d7;
}

.col{
    width: 50%;
    float: left;
}
ul.list .col{
    box-sizing: border-box;
}
ul.list .col:nth-child(1){
    padding-right: 35px;
}
ul.list .col:nth-child(2){
    padding-left: 35px;
}

.fullwidth{
    width: 100%;
}


.centered{
    margin: 0 auto;
    width: 100%;
    max-width: 840px;
    padding-top: 40px;
    padding-bottom: 75px;
    text-align: left;
}
.centered h1{
    padding-bottom: 15px;
}
.centered h2{
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: 30px;
    font-weight: 600;
}

.centered .button-wo{
    margin-top: 30px;
}


.drop-down .drop-down-title .centered{
    padding-top: 0;
    padding-bottom: 0;
}

.nopage-block{
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;

}
.nopage-block h1{
    font-size: 30px;
    margin-top: 50px;
}
.nopage-block p{
    margin-bottom: 25px;
}

.nopage-top{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff;
}


#circularG{
    position: fixed;
    width:58px;
    height:58px;
    left: 50%;
    top: 50%;
    margin-top: -29px;
    margin-left: -29px;
    z-index: 100;
}
.circularG{
    position:absolute;
    background-color: #6d6e71;
    border: solid 1px #fff;
    width:14px;
    height:14px;
    border-radius:9px;
        -o-border-radius:9px;
        -ms-border-radius:9px;
        -webkit-border-radius:9px;
        -moz-border-radius:9px;
    animation-name:bounce_circularG;
        -o-animation-name:bounce_circularG;
        -ms-animation-name:bounce_circularG;
        -webkit-animation-name:bounce_circularG;
        -moz-animation-name:bounce_circularG;
    animation-duration:1.1s;
        -o-animation-duration:1.1s;
        -ms-animation-duration:1.1s;
        -webkit-animation-duration:1.1s;
        -moz-animation-duration:1.1s;
    animation-iteration-count:infinite;
        -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -moz-animation-iteration-count:infinite;
    animation-direction:normal;
        -o-animation-direction:normal;
        -ms-animation-direction:normal;
        -webkit-animation-direction:normal;
        -moz-animation-direction:normal;
        transform:scale(0);
        o-transform:scale(0);
        -ms-transform:scale(0);
        -webkit-transform:scale(0);
        moz-transform:scale(0);
        display: none;
}

.loading .circularG{
    display: block;
}
#circularG_1{
    left:0;
    top:23px;
    animation-delay:0.41s;
        -o-animation-delay:0.41s;
        -ms-animation-delay:0.41s;
        -webkit-animation-delay:0.41s;
        -moz-animation-delay:0.41s;
}
#circularG_2{
    left:6px;
    top:6px;
    animation-delay:0.55s;
        -o-animation-delay:0.55s;
        -ms-animation-delay:0.55s;
        -webkit-animation-delay:0.55s;
        -moz-animation-delay:0.55s;
}
#circularG_3{
    top:0;
    left:23px;
    animation-delay:0.69s;
        -o-animation-delay:0.69s;
        -ms-animation-delay:0.69s;
        -webkit-animation-delay:0.69s;
        -moz-animation-delay:0.69s;
}
#circularG_4{
    right:6px;
    top:6px;
    animation-delay:0.83s;
        -o-animation-delay:0.83s;
        -ms-animation-delay:0.83s;
        -webkit-animation-delay:0.83s;
        -moz-animation-delay:0.83s;
}
#circularG_5{
    right:0;
    top:23px;
    animation-delay:0.97s;
        -o-animation-delay:0.97s;
        -ms-animation-delay:0.97s;
        -webkit-animation-delay:0.97s;
        -moz-animation-delay:0.97s;
}
#circularG_6{
    right:6px;
    bottom:6px;
    animation-delay:1.1s;
        -o-animation-delay:1.1s;
        -ms-animation-delay:1.1s;
        -webkit-animation-delay:1.1s;
        -moz-animation-delay:1.1s;
}
#circularG_7{
    left:23px;
    bottom:0;
    animation-delay:1.24s;
        -o-animation-delay:1.24s;
        -ms-animation-delay:1.24s;
        -webkit-animation-delay:1.24s;
        -moz-animation-delay:1.24s;
}
#circularG_8{
    left:6px;
    bottom:6px;
    animation-delay:1.38s;
        -o-animation-delay:1.38s;
        -ms-animation-delay:1.38s;
        -webkit-animation-delay:1.38s;
        -moz-animation-delay:1.38s;
}

@keyframes bounce_circularG{
    0%{ transform:scale(1); }
    100%{ transform:scale(.3); }
}
@-o-keyframes bounce_circularG{
    0%{ -o-transform:scale(1); }
    100%{-o-transform:scale(.3);}
}
@-ms-keyframes bounce_circularG{
    0%{ -ms-transform:scale(1); }
    100%{ -ms-transform:scale(.3); }
}
@-webkit-keyframes bounce_circularG{
    0%{ -webkit-transform:scale(1); }
    100%{ -webkit-transform:scale(.3); }
}
@-moz-keyframes bounce_circularG{
    0%{-moz-transform:scale(1); }
    100%{-moz-transform:scale(.3); }
}


/*responsive--------------------------------------------------*/

@media(max-width: 1410px){
    .prev{
        left: 10px;
        margin-left: 0;
    }
    .next{
        right: 10px;
        margin-right: 0;
    }
}


@media(max-width: 1374px){
    .map .details{
        left: auto;
        margin-left: 0;
        right: 48px;
    }
    footer nav ul{
        margin-right: 20px;
    }
}


@media(max-width: 1360px){
    .centered h1{
        font-size: 56px;
    }
    .heading h1,
    .slogan span,
    .slogan h1{
        padding: 0 40px;
        font-size: 56px;
    }
    .heading p,
    .slogan p{
        padding-left: 40px;
    }
    .slogan .caps-link{
        padding: 0 40px;
    }
}


@media(max-width: 1260px){
    .centered h1,
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 54px;
    }
    .contact h2{
        font-size: 25px;
        line-height: 110px;
    }
    .contact .map-button{
        margin-bottom: 50px;
    }
    footer .block{
        position: relative;
        padding-bottom: 100px;
    }
    footer nav{
        margin: 0;
    }
    footer .social{
        position: absolute;
        left: 5px;
        bottom: 0;
    }
    footer .social > div{
        float: left;
    }
    footer .social .copyrights{
        margin-top: 0;
        line-height: 38px;
    }
    footer .credits{
        position: absolute;
        right: 10px;
        bottom: 0;
        line-height: 38px;
    }
    footer{
        background-size: 250px;
    }
}


@media(max-width: 1120px){
    .slogan{
        margin: 160px 0;
    }
    .heading{
        padding-top: 130px;
    }
    .contact h2{
        font-size: 23px;
        line-height: 90px;
    }
    .contact .map-button{
        margin-bottom: 40px;
    }
    .header-nav .block{
        padding: 23px 22px 0 22px;
    }
    .block.nav-container,
    .header-nav .nav-bg{
        height: 90px;
    }
    .header-nav ul{
        margin: 6px 0 0 14px;
    }
    .header-nav ul li a{
        padding: 0 10px;
    }
    .portfolio-item span{
        font-size: 26px;
    }
    .prev:before,
    .next:before{
        width: 23px;
        height: 23px;
    }
}

@media(max-width: 1050px){
    .portfolio-item span{
        font-size: 25px;
    }
}

@media(max-width: 1000px){
    .video{
        display: none;
    }
    .video-slide-mobile-image{
        display: block;
    }

    .header-nav .button {
        margin-right: 25px;
    }
    .header-nav .nav-burger{
        display:block;
    }
    .header-nav ul{
        position: fixed;
        display: none;
    }
    .sub-nav-bg{
        display: none;
    }
    .slogan{
        margin: 140px 0;
    }
    .centered h1,
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 50px;
    }
    .slogan p{
        width: auto;
    }

    .button,
    .button-wo,
    .button-wb,
    .button-bw,
    .button-to,
    .button-tw,
    .button-g{
        min-width: auto;
        padding: 10px 17px;
    }
    .header-nav .button{
        margin-top: 3px;
    }
    .slogan h1{
        width: auto;
    }
    .works h2,
    .technologies h2,
    .clients h2,
    .drop-down .works h2{
        font-size: 27px;
    }
    .portfolio-item span{
        font-size: 24px;
    }
    .contact h2{
        font-size: 21px;
        line-height: 90px;
    }
    .contact .map-button{
        margin-bottom: 40px;
    }
    .contact .map{
        height: 600px;
    }
    #map{
        height: 427px;
    }
    .map .details{
        position: static;
        width: 100%;
        height: auto;
        padding: 35px 0px;
        padding-bottom: 20px;
    }
    .map .details:after{
        display: none;
    }
    .map .details > div > .title{
        margin-left: 20px;
        margin-right: 20px;
    }
    .map .details > div > *:not(.title){
        float: left;
        margin: 0 20px;
        margin-bottom: 10px;
    }
    .map .details span{
        margin: 0;
        font-size: 15px;
    }
    .map .details .title{
        margin-bottom: 20px;
    }
    .map ul{
        top: 25px;
    }
    .map ul li{
        font-size: 16px;
        padding: 0 15px;
        line-height: 34px;
    }
    .map .details .title{
        font-size: 19px;
    }
    .map-gradient{
        display: none;
    }
}

@media(max-width: 950px){
    .centered  ul.list{
        padding-left: 30px;
    }
    .bottom-space {
        margin-bottom: 80px;
    }
    .works h3{
        padding: 0 70px;
    }
    .portfolio-item .title{
        padding: 0 40px;
        height: 140px;
    }
    .portfolio-item span{
        font-size: 22px;
    }
    footer{
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


@media(max-width: 940px){
    .centered,
    .drop-down .centered{
        max-width: none;
        padding: 30px 40px 65px 40px;
        padding-right: 40px;
        box-sizing: border-box;
    }
    .drop-down .centered{
        padding-top: 0;
        padding-bottom: 20px;
    }
}


@media(max-width: 900px){
    .button,
    .button-wo,
    .button-wb,
    .button-bw,
    .button-to,
    .button-tw,
    .button-g{
        padding: 8px 14px;
    }

    .centered h2{
        font-size: 22px;
        margin-top: 45px;
        margin-bottom: 28px;
    }

    .select-main{
        height: 44px;
        line-height: 44px
    }
    .select-options{
        top: 41px;
    }
    .select-options li{
        min-height: 44px;
        padding: 13px 15px;
    }

    .header-nav .button{
        margin-top: 4px;
    }
    .slogan p{
        font-size: 19px;
        line-height: 27px;
    }
    .portfolio-item span{
        font-size: 21px;
        padding-right: 30px;
    }
    .portfolio-item .title{
        padding: 0 30px;
        height: 110px;
    }
    .map ul li{
        font-size: 15px;
        padding: 0 14px;
        line-height: 32px;
    }

    .contact h2 {
        font-size: 19px;
        line-height: 70px;
    }
    .contact .map-button {
        margin-bottom: 33px;
    }
}

@media(max-width: 850px){
    .portfolio-item span{
        font-size: 19px;
    }
}


@media(max-width: 800px){
    body{
        font-size: 15px;
    }
    input,
    textarea{
        font-size: 15px;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      font-size: 15px;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      font-size: 15px;
    }
    :-ms-input-placeholder { /* IE 10+ */
      font-size: 15px;
    }
    :-moz-placeholder { /* Firefox 18- */
      font-size: 15px;
    }

    .centered h2 {
        font-size: 21px;
        margin-top: 30px;
    }

    .select-main{
        height: 40px;
        line-height: 40px
    }
    .select-options{
        top: 37px;
    }
    .select-options li{
        min-height: 40px;
        padding: 11px 14px;
    }

    .slogan{
        margin: 120px 0;
    }
    .centered h1,
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 40px;
        line-height: 45px;
    }
    .heading p,
    .slogan p{
        width: 100%;
        box-sizing: border-box;
        padding-right: 40px;
        text-align: left;
    }
    .slogan p{
        font-size: 18px;
        line-height: 26px;
    }
    .bottom-space {
        margin-bottom: 60px;
    }
    .portfolio-item .title{
        padding: 0 25px;
    }
    .portfolio-item span{
        font-size: 18px;
    }
    .map ul li{
        font-size: 14px;
        line-height: 32px;
        padding: 0 10px;
    }


    .map ul li{
        margin-bottom: 10px;
    }
    .map .details > div.active{
        width: 550px;
    }
    .map .details span{
        font-size: 13px;
    }
    footer{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    footer nav ul{
        margin-right: 15px;
        max-width: 160px;
    }
    footer nav ul.bold{
        margin-top: 10px;
    }
    footer .block{
        max-width: 525px;
        padding-left: 0;
        padding-right: 0;
    }
    footer .credits{
        right: 15px;
    }
}




@media(max-width: 700px){
    .line{
        margin-top: 30px;
    }
    .centered .col{
        width: 100%;
    }
    .centered ul.list .col:nth-child(1),
    .centered ul.list .col:nth-child(2){
        padding: 0;
    }
    .prev:before,
    .next:before{
        width: 20px;
        height: 20px;
    }
    .centered h1{
        font-size: 36px;
    }
    .heading h1,
    .slogan span,
    .slogan h1{
        padding: 0 30px;
    }
    .slogan .caps-link{
        padding: 0 30px;
    }
    .heading p,
    .slogan p{
        padding: 0 30px;
    }
    .slogan p{
        font-size: 17px;
        line-height: 23px;
    }
    .centered,
    .drop-down .centered{
        padding: 30px 30px 55px 30px;
    }
    .centered h2 {
        font-size: 20px;
        margin-top: 20px;
    }
    .bottom-space {
        margin-bottom: 45px;
    }
    .portfolio-item .title {
        padding: 0 40px;
    }
    .portfolio-item span{
        padding-right: 40px;
    }
    .portfolio-item span {
       font-size: 21px;
    }
    .portfolio-item .title{
        height: 130px;
    }
    .portfolio-item:hover .title {
        height: 170px;
    }
    .map ul{
        width: 400px;
        left: 50%;
        margin-left: -200px;
    }
}

@media(max-width: 650px){
    .button,
    .button-wo,
    .button-wb,
    .button-bw,
    .button-to,
    .button-tw,
    .button-g{
        padding: 7px 11px;
    }
    .heading{
        padding-top: 130px;
    }
    .centered h1{
        font-size: 32px;
    }
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 38px;
        padding: 0 25px;
    }
    .slogan .caps-link{
        padding: 0 25px;
    }
    .heading p,
    .slogan p{
        padding: 0 25px;
    }
    .slogan p{
        font-size: 16px;
    }
    .centered{
        padding: 25px 25px 45px 25px;
    }
    .centered h2 {
        font-size: 19px;
        margin-top: 15px;
    }
    .works h2,
    .technologies h2,
    .clients h2,
    .drop-down .works h2{
        font-size: 24px;
    }
    .portfolio-item .title {
        padding: 0 35px;
    }
    .portfolio-item span{
        padding-right: 35px;
    }
}

@media(max-width: 600px){
    .mobileMenu .nav-mobile{
        top: 59px;
        height: calc(100% - 59px);
    }
    .nav-mobile .plus{
        right: 8px;
    }
    .nav-mobile ul a{
        padding-left: 20px;
    }
    .nav-mobile ul ul li a{
        margin-left: 25px;
    }
    .line{
        margin-bottom: 20px;
    }
    .prev:before,
    .next:before{
        width: 19px;
        height: 19px;
    }
    .heading{
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .centered h1{
        font-size: 34px;
    }
    .slogan{
        margin: 80px 0;
    }
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 34px;
        line-height: 39px;
        padding: 0 20px;
    }
    .slogan .caps-link{
        padding: 0 20px;
    }
    .heading p,
    .slogan p{
        padding: 0 20px;
        font-size: 15px;
    }
    .centered,
    .drop-down .centered{
        padding: 25px 20px 45px 20px;
    }
    .centered h2 {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .header-nav .logo{
        height: 38px;
        width: 75px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .block.nav-container,
    .header-nav .nav-bg{
        height: 60px;
    }
    .header-nav .block {
        padding: 12px 12px 0 12px;
    }
    .header-nav .button{
        font-size: 13px;
        padding: 8px 11px;
        min-width: auto;
        margin-top: 1px;
        margin-right: 20px;
    }
    .header-nav .nav-burger{
        margin-top: 0;
        margin-right: 2px;
        padding: 7px 6px;
        width: 40px;
    }
    .header-nav .button{
        margin-left: 0;
    }

    .portfolio-item span {
        font-size: 21px;
    }

    .contact h2 {
        font-size: 18px;
        line-height: 65px;
    }
    .contact .map-button {
        margin-bottom: 30px;
    }
    .map .details > div.active {
        width: 450px;
    }
    .map .details > div > *:not(.title),
    .map .details > div > .title{
        margin-left: 10px;
        margin-right: 10px;
    }

    footer nav{
        display: none;
    }
    footer .block{
        width: 312px;
        padding: 0;
    }
    footer .social{
        position: static;
    }
    footer .social .copyrights{
        line-height: 18px;
    }
    footer .credits{
        bottom: -7px;
    }
    footer{
        background-size: 200px;
    }
}

@media(max-width: 550px){
    body{
        font-size: 14px;
    }
    input,
    textarea{
        font-size: 14px;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      font-size: 14px;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      font-size: 14px;
    }
    :-ms-input-placeholder { /* IE 10+ */
      font-size: 14px;
    }
    :-moz-placeholder { /* Firefox 18- */
      font-size: 14px;
    }
    .prev:before,
    .next:before{
        width: 17px;
        height: 17px;
    }
    .centered h1,
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 30px;
        line-height: 39px;
    }
    .heading p,
    .slogan p{
        font-size: 14px;
    }
    .slogan p{
        line-height: 19px;
    }
    .works h2,
    .technologies h2,
    .clients h2,
    .drop-down .works h2{
        font-size: 23px;
    }
    .portfolio-item span {
        font-size: 20px;
    }
}

@media(max-width: 500px){
    .centered h1,
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 28px;
        line-height: 33px;
    }
    .clients h2{
        padding: 0 100px;
        line-height: 27px;
    }
    .map ul li {
        font-size: 13px;
        line-height: 30px;
        padding: 0 8px;
    }
    .centered h2 {
        font-size: 17px;
        margin-top: 0px;
        margin-bottom: 18px;
    }
    .bottom-space {
        margin-bottom: 30px;
    }
    .portfolio-item .title {
        padding: 0 40px;
        height: 150px;
    }
    .portfolio-item span {
        font-size: 19px;
    }
    .contact .map {
        height: 640px;
    }
    .map .details > div.active {
        width: 240px;
    }
}


@media(max-width: 450px){
    .portfolio-item span {
        font-size: 25px;
    }
    .portfolio-item:hover .title {
        height: 210px;
    }
    .clients h2{
        padding: 0 60px;
        line-height: 27px;
    }
}



@media(max-width: 400px){
    body{
        font-size: 13px;
    }
    input,
    textarea{
        font-size: 13px;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      font-size: 13px;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      font-size: 13px;
    }
    :-ms-input-placeholder { /* IE 10+ */
      font-size: 13px;
    }
    :-moz-placeholder { /* Firefox 18- */
      font-size: 13px;
    }
    .prev {
        left: 5px;
    }
    .next{
        right: 5px;
    }
    .prev:before,
    .next:before{
        width: 15px;
        height: 15px;
    }
    .centered h1,
    .heading h1,
    .slogan span,
    .slogan h1{
       font-size: 24px;
        line-height: 30px;
   }
   .slogan p{
        margin-top: 10px;
        font-size: 13px;
    }
    .map ul{
        width: 300px;
        margin-left: -155px;
        padding: 0;
    }
    .map ul li {
        font-size: 12px;
        line-height: 28px;
        padding: 0 8px;
        margin: 0 2px;
        margin-bottom: 6px;
    }
    .map ul li span{
        font-size: 12px;
    }

    .works h2,
    .technologies h2,
    .clients h2{
        font-size: 22px;
    }

    .contact h2 {
        font-size: 17px;
        line-height: 60px;
    }

    .centered h2 {
        font-size: 15px;
        margin-bottom: 15px;
    }


    footer{
        padding: 30px 0;
    }
    footer .social .copyrights{
        margin-top: 10px;
    }
    .social .icon{
        float: none;
        display: inline-block;
        margin: 0 5px;
    }
    footer .block{
        text-align: center;
        width: auto;
    }
    footer .social{
        float: none;
        display: inline-block;
    }
    footer .social > div,
    footer .credits{
        position: static;
        float: none;
        line-height: 20px;
    }
}


@media(max-width: 350px){
    .centered h1,
    .heading h1,
    .slogan span,
    .slogan h1{
        font-size: 22px;
    }
    .works h2,
    .technologies h2,
    .clients h2{
        font-size: 21px;
    }
}


@media(max-width: 350px){
    .header-nav .nav-burger{
        margin-right: -2px;
    }
    .header-nav .button{
        margin-right: 13px;
    }
}

@media(min-width: 1001px){
    .nav-mobile{
        display: none;
    }
}