#minwidth{
    min-width: 320px;
}
.top-actual {
    background:url(https://img.labirint.ru/design/ostrov/top_menu_bg.png) 0 0 repeat-x;
}
.top-actual-links {
    display:none;
}
.top-main-menu  {
    border:none;
    margin-top: 14px;
    height:75px;
}
.main-menu-dropdown,
.top-main-menu-item:hover .dropdown-link,
.top-main-menu-item .dropdown-link {
    display:none!important;
}
.top-main-menu .have-dropdown-hover > a:after {
    display:none;
}
.mm-link, .mm-link:hover {
    color: #fff;
}
.mm-link:hover,
.top-navi-link:hover,
.top-actual-links a:hover {
    border-bottom: 1px solid;
}

.top-actual {
    border: none;
}


.bl-top-actual .top-main-menu-promo {
    display: none;
}

#maxwidth {
    max-width:2500px;
    padding:0;
}
.body-main-content-wrapper{
    padding-bottom: 0;
}
.b-rfooter-info-content{
    margin-top: 0;
}
.b-rfooter-info-content > *{
    display: none;
}
.b-rfooter-wrapper {
    /*display:none;*/
    margin: 0 auto;
    /*max-width: 1200px;*/
}


@font-face {
    font-family:'Albom';
    src: url('https://css.labirint.ru/fonts/sherlock/Albom-Variant0.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Gazeta-Bold';
    src: url('https://css.labirint.ru/fonts/sherlock/Gazeta-PB-Bold.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Gazeta';
    src: url('https://css.labirint.ru/fonts/sherlock/Gazeta-PB.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Sherlock';
    src: url('https://css.labirint.ru/fonts/sherlock/Sherlock.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

html, body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.sherlock *,
.sherlock *::before,
.sherlock *::after {
    outline: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.sherlock a { text-decoration: none;}
.sherlock input:-webkit-autofill,
.sherlock input:-webkit-autofill:hover,
.sherlock input:-webkit-autofill:focus,
.sherlock input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s;
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,174,255,0.04) 50%,rgba(255,255,255,0) 51%,rgba(0,174,255,0.03) 100%) ;
}
input::-webkit-input-placeholder       {line-height: 20px;  transition: line-height 0.5s ease; color: #fff;}
input::-moz-placeholder                {line-height: 20px;  transition: line-height 0.5s ease; color: #fff;}
input:-moz-placeholder                 {line-height: 20px;  transition: line-height 0.5s ease; color: #fff;}
input:-ms-input-placeholder            {line-height: 20px;  transition: line-height 0.5s ease; color: #fff;}
input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease; color: #fff;}
input:focus::-moz-placeholder          {line-height: 100px; transition: line-height 0.5s ease; color: #fff;}
input:focus:-moz-placeholder           {line-height: 100px; transition: line-height 0.5s ease; color: #fff;}
input:focus:-ms-input-placeholder      {line-height: 100px; transition: line-height 0.5s ease; color: #fff;}

.sherlock{
    background-color: #000;
}
.both:after{
    content: "";
    display: table;
    clear: both;
    font-size: 1px;
    visibility: hidden;
}

.no-wrap {  white-space: nowrap;  }
.op05 {  opacity: 0.5;  }
.op05.hover:hover{  opacity: 1;  }

.font-albom         {  font-family: Albom, sans-serif;  }
.font-gazeta        {  font-family: Gazeta, sans-serif;  }
.font-gazeta-bold   {  font-family: Gazeta-Bold, sans-serif;  }
.font-sherlock      {  font-family: Sherlock, sans-serif;  }


.font_xs   {  font-size: 14px; line-height: 18px;  }
.font_s    {  font-size: 16px; line-height: 20px;  }
.font_m    {  font-size: 18px; line-height: 24px;  }
.font_l    {  font-size: 20px; line-height: 26px;  }
.font_xl   {  font-size: 24px; line-height: 30px;  }
.font_xxl  {  font-size: 30px; line-height: 38px;  }
.font_tags {  font-size: 30px; line-height: 32px;  }

.font_caps {
    letter-spacing: 1px;
    font-variant: small-caps;
}

.color_beige {  color: #f1ebdd;  }

.p_25px{  padding: 25px;  }
.p_50px{  padding: 50px;  }

.mt50{  margin-top: 50px;  }
.mt80{  margin-top: 80px;  }
.mt100{  margin-top: 100px;  }
.mt120{  margin-top: 120px;  }
.mt150{  margin-top: 100px;  }

.mt10p{  margin-top: 10%;  }


.sherlock-btn {
    max-width: 200px;
    height: 80px;
    /*margin-left: -10px;*/

    display: block;
    margin: 0 auto;
    /*display: inline-block;*/
    background: url("https://img.labirint.ru/design/sherlock/intro_buy_button.png") left no-repeat;
    background-size: 100% auto;
}

.sherlock-btn:hover {
    background: url("https://img.labirint.ru/design/sherlock/button_gold.png") left no-repeat;
    background-size: 100% auto;
}

.sh-logo-container {
    display: none;
    width: 100%;
    height: 60px;
    text-align: center;
    background: #000;
    padding-top: 22px;
}
.sh-logo {
    display: inline-block;
    width: 188px;
    height: 38px;
    background: url(https://img.labirint.ru/design/sherlock/logo.svg);
    background-size: auto 38px;
}

.intro-bg{
    background: url("https://img.labirint.ru/design/sherlock/intro_bg.png") no-repeat;
    background-size: contain ;
}
.intro-title-bg{
    height: 400px;
    background: url("https://img.labirint.ru/design/sherlock/intro_book_title.png") center top no-repeat;
    background-size: contain;
}
.intro-cover-container{
    height: 580px;
}
.intro-cover-bg {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    height: 580px;
    background: url("https://img.labirint.ru/design/sherlock/intro_big_cover.png") right top no-repeat;
    background-size: contain;
}

.video-cont {
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}
.video-cont .player-content,
.video-cont .player-image{
    width: 100%;
    height: calc(100% + 80px);
    position: absolute;
    left: 0;
    top: -36px;
}
.video-cont .player-image {
    background: url(https://img.labirint.ru/design/sherlock/video.png) center  no-repeat;
    z-index:2;
    top: -60px;
    background-size: auto 100%;
}

.player-overlay {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    width: 100%;
    height: 100%;
}




.video-stuff-bg{
    position: absolute;
    bottom: -45px;
    width: 100%;
    height: 150px;
    background: url("https://img.labirint.ru/design/sherlock/video_stuff.png") center no-repeat;
    background-size: auto 100%;
}

.video-watson-bg{
    position: absolute;
    top: -8%;
    left: -20%;
    width: 50%;
    z-index:5;
    padding-bottom: 68%;
    background: url("https://img.labirint.ru/design/sherlock/video_watson.png") left no-repeat;
    background-size: auto 100%;
}
.video-sherlock-bg{
    position: absolute;
    top: -9%;
    right: -11%;
    width: 50%;
    z-index:5;
    padding-bottom: 68%;
    background: url("https://img.labirint.ru/design/sherlock/video_sherlock.png") right no-repeat;
    background-size: auto 100%;
}

.facts-header-bg{
    height: 150px;
    background: url("https://img.labirint.ru/design/sherlock/header_facts.png") center bottom no-repeat;
    background-size: contain;
}


.stories-header-bg{
    height: 140px;
    background: url("https://img.labirint.ru/design/sherlock/stories/header_stories.png") center no-repeat;
    background-size: contain;
}

.stories-container {
    margin-bottom: 10%;
    width: 33.33333333%;
    padding-bottom: 33.33333333%;
}
.stories-content{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 25px;
    position: absolute;
    display: inline-block;
}
.story-circle{
    width: 100%;
    height: 100%;
    position: relative;
}

.story-circle.circle-left{  left: -20%;  }
.story-circle.circle-right{  right: -20%;  }

.stories-bg{
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    border-radius: 100%;
    display: inline-block;
    background-color: #000;
}

.stories-circle-bg{
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    display: inline-block;
    background: url("https://img.labirint.ru/design/sherlock/stories/stories_circle.png") center no-repeat;
    background-size: auto 100%;
}
.story-cover{
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    margin: 5%;
    z-index: 5;
    opacity: 0.2;
    border-radius: 100%;
    transition:all 0.5s ease;
    background-size: auto 120% !important;
}
.stories-title, .stories-description{
    left: 0;
    top:0;
    opacity: 0.2;
    width: 100%;
    height: 30%;
    z-index: 12;
    transition:all 0.5s ease;
    position: absolute;
}
.stories-description{
    transition:all 1s ease;
}
.stories-container:hover .story-cover,
.stories-container:hover .stories-title,
.stories-container:hover .stories-description{
    opacity: 1;
}
.story-title-1{  left: 75%;  top: -8%;  }
.story-title-2{  left:  2%;  top: -16%;  }
.story-title-3{  left: -1%;  top: -20%;  }
.story-title-4{  left: -9%;  top: -8%;  }
.story-title-5{  left: 75%;  top: -8%;  }

.story-description-1{  left: 25%;  top: 102%;  }
.story-description-2{  left: 58%;  top: 101%;  }
.story-description-3{  left: 1%;  top: 104%;  }
.story-description-4{  left: -8%;  top: 99%;  }
.story-description-5{  left: 1%;  top: 98%;  }


.story-cover-1{  background: url("https://img.labirint.ru/design/sherlock/stories/story_cover_1.png") center no-repeat;  }
.story-cover-2{  background: url("https://img.labirint.ru/design/sherlock/stories/story_cover_2.png") center no-repeat;  }
.story-cover-3{  background: url("https://img.labirint.ru/design/sherlock/stories/story_cover_3.png") center no-repeat;  }
.story-cover-4{  background: url("https://img.labirint.ru/design/sherlock/stories/story_cover_4.png") center no-repeat;  }
.story-cover-5{  background: url("https://img.labirint.ru/design/sherlock/stories/story_cover_5.png") center no-repeat;  }


.story-decor {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: contain !important;
}
.story-decor-1 {
    width: 110%;
    height: 110%;
    right: -35%;
    top: 4%;
    z-index: 15;
    background: url("https://img.labirint.ru/design/sherlock/stories/story_decor_1.png")  center  no-repeat;
    background-size: auto 100%;
}
.story-decor-2-1 {
    top: 15%;
    left: -10%;
    width: 130%;
    height: 125%;
    z-index: 15;
    background: url("https://img.labirint.ru/design/sherlock/stories/story_decor_2_1.png")  center  no-repeat;

}
.story-decor-2-2 {
    top: -11%;
    right: -26%;
    width: 60%;
    height: 60%;
    z-index: 1;
    background: url("https://img.labirint.ru/design/sherlock/stories/story_decor_2_2.png")  center  no-repeat;
}
.story-decor-3{
    top: 11%;
    left: -11%;
    width: 100%;
    height: 100%;
    z-index: 15;
    background: url("https://img.labirint.ru/design/sherlock/stories/story_decor_3.png")  center  no-repeat;
}
.story-decor-4{
    top: 35%;
    right: 10%;
    width: 130%;
    height: 130%;
    z-index: 15;
    background: url("https://img.labirint.ru/design/sherlock/stories/story_decor_4.png")  center  no-repeat;
}
.story-decor-5-1{
    top: 55%;
    right: 0;
    width: 60%;
    height: 60%;
    z-index: 15;
    background: url("https://img.labirint.ru/design/sherlock/stories/story_decor_5_1.png")  center  no-repeat;

}
.story-decor-5-2{
    top: 30%;
    right: -30%;
    width: 60%;
    height: 60%;
    z-index: 1;
    background: url("https://img.labirint.ru/design/sherlock/stories/story_decor_5_2.png")  center  no-repeat;

}


.sherlock-tag{
    padding: 0 10px;
    opacity: 0.5;
    cursor: pointer;
    white-space:nowrap;
}
.sherlock-tag:hover{
    opacity: 1;
}


.map-header-bg{
    height: 120px;
    background: url("https://img.labirint.ru/design/sherlock/map/header_map.png") center no-repeat;
    background-size: contain;
}
.map-point-container{
    width: 105%;
    height: 102%;
    position: relative;
    overflow: scroll;
    margin-right: -5%;
    margin-bottom: -2%;
    padding: 15% 10% 15% 20%;
}
.map-point-title{
    border-bottom: 1px solid black;
    padding: 10px 0 5px;
    cursor: pointer;
    opacity: 0.7;
}
.map-point-title.active {
    opacity: 1;
}

.map-point-title:nth-last-child(1){
    padding-bottom: 40px;
}
.map-container{
    width: 100%;
    padding-bottom: 62.625%;
}
.map-border{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    display: inline-block;
    background-size: contain !important;
    z-index: 10;
}
.map-border-top {
    height: 6%;
    background: url("https://img.labirint.ru/design/sherlock/map/map_border_top.png") top no-repeat;
}
.map-border-left {
    width: 5%;
    background: url("https://img.labirint.ru/design/sherlock/map/map_border_left.png") left no-repeat;
}
.map-border-right {
    left: auto;
    right: 0;
    width: 5%;
    background: url("https://img.labirint.ru/design/sherlock/map/map_border_right.png") right no-repeat;
}
.map-border-bottom{
    top: auto;
    bottom: 0;
    height: 5%;
    background: url("https://img.labirint.ru/design/sherlock/map/map_border_bottom.png") bottom no-repeat;
}

.map-list-bg {
    top: 0;
    right: 0;
    height: 100%;
    width: 25%;
    display: inline-block;
    background: url("https://img.labirint.ru/design/sherlock/map/map_list_bg.png") right no-repeat;
    background-size: contain;
    z-index: 5;
}

.map-content{
    top: 1%;
    left: 0;
    height: 98%;
    width: 79%;
    display: inline-block;
    overflow: hidden;
}
.map-london{
    width:102%;
    height: 103%;
    min-height: 100%;
    margin-top: -3%;
    margin-left: -1%;
}


.avatar-header-bg{
    height: 30px;
    background: url("https://img.labirint.ru/design/sherlock/avatars/header_avatars.png") center no-repeat;
    background-size: contain;
}

.avatar-cover{
    -o-transition: transform 0.5s linear;
    -ms-transition: transform 0.5s linear;
    -moz-transition: transform 0.5s linear;
    -webkit-transition: transform 0.5s linear;
    transform: rotate(2deg);
    position: relative;
    height: 200px;
    width: 200px;
    display: inline-block;
    background: url("https://img.labirint.ru/design/sherlock/avatars/alan_pinkerton.jpg") center no-repeat;
    background-size: auto 75% !important;
}
.avatar-border{
    height: 100%;
    width: 100%;
    display: inline-block;
    background: url("https://img.labirint.ru/design/sherlock/avatars/avatar_border.png") center no-repeat;
    background-size: auto 100%;
}

.avatar-container {
    display: inline-block;
    padding: 25px;
    overflow: hidden;
}
.avatar-title{
    opacity: 1;
    transition:all 0.5s ease;
}
.avatar-container:hover .avatar-cover{
    transform: rotate(0deg) !important;
}



.postcards-header-bg{
    height: 30px;
    background: url("https://img.labirint.ru/design/sherlock/postcards/header_postcards.png") center no-repeat;
    background-size: contain;
}
.books-header-bg{
    height: 170px;
    background: url("https://img.labirint.ru/design/sherlock/books/header_books.png") center no-repeat;
    background-size: contain;
}

.sherlock-book-container{
    width: 100%;
    max-width: 500px;
    position: relative;
    text-align: center;
    margin:0 auto;
}

.sherlock-book-container__img{
    width: 70%;
    max-width: 250px;
    max-height: 300px;
    margin: 0 auto;
}

.sherlock-book-container__badge{
    display: block;
    background: url("https://img.labirint.ru/design/sherlock/badge.png") no-repeat;
    width: 50%;
    height: 186px;
    position: absolute;
    bottom:45%;
    background-size: contain;
    left: 0;
}

@media (min-width: 765px) {
    .avatar-title{
        opacity: 0.2;
        transition:all 0.5s ease;
    }
    .avatar-container:hover .avatar-title{
        opacity: 1;
    }
    .sherlock-book-container__img{
        width: 100%;
        max-width: 500px;
    }
    .sherlock-book-container__badge{
        left: -5%;
        bottom:40%;
    }

    .sherlock-book-container__img{
        max-height: 550px;
        max-width: 500px;
    }
}



.sherlock-input-container{
    width: 100%;
}
.sherlock-input{
    width: 100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    z-index: 120;
    background: inherit;
    border: none;
    border-radius: 0;
    padding-bottom: 4px;
    padding-left: 0;
    vertical-align: middle;
    outline: none;
    overflow: hidden;
    background-color: black;
    border-bottom: 1px solid RGBA(201,201,201,0.5);
    margin-bottom: 5px;
}


.sherlock-input:focus{
    padding-bottom: 3px;
    border-bottom: 2px solid #c9c9c9;
    outline: none;
}



.sherlock-sly {
    height: 100%;
}
.sherlock-sly > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}
.sherlock-sly > ul > li {
    padding: 0;
    float: left;
    height: 100%;
    cursor: pointer;
    margin: 0 1px 0 0;
    text-align: center;
    vertical-align: middle;
}

.sherlock-slider-container{
    overflow: hidden;
    height: 350px;
}
.sherlock-slider-book{
    height: 100%;
    width: 300px;
    margin: 0 25px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain !important;
}


.sherlock-letter-form{
    padding: 0 40px;
    max-width: 500px;
}


.social-shares-sherlock {
    position: relative;
}

.social-share {
    display: inline-block;
    margin-right: 10px;
    height:47px;
}

.share-counter {
    display:none;
}

.social-share .share-link {
    background: url(https://img.labirint.ru/design/sherlock/socials.png) left no-repeat;
    width:42px;
    height:47px;
}

.share-vkontakte .share-link {
    background-position: -50px 0;
}
.share-facebook .share-link {
    width: 24px; background-position: -224px 0;
}
.share-twitter .share-link {
    width: 36px; background-position: -262px 0;
}
.share-odnoklassniki .share-link {
    width: 30px; background-position: -135px 0;
}
.share-livejournal .share-link {
    width: 37px; background-position: -96px 0;
}
.share-googleplus .share-link {
    background-position: -173px 0;
}
.share-email .share-link {
    background-position: 0 0;
}
.sherlock-guys{
    width: 100%;
    padding-bottom: 9%;
    /*margin: 0 5%;*/
    display: inline-block;
    background: url(https://img.labirint.ru/design/sherlock/dancing_guys.png) top left no-repeat;
    background-size: contain !important;
}


.sh-dancer-container{
    width: 100%;
    padding-bottom: 9%;
}
.sh-dancer{
    opacity: 0.5;
    padding-bottom: 10%;
    display: inline-block;
    float: left;
    transition:all 0.3s ease;
}
.sh-dancer:hover{
    opacity: 1;
}
.sh-dancer-1{ width: 36%;   background: url(https://img.labirint.ru/design/sherlock/dancer/dancer_1.png) center no-repeat; background-size: 100%; }
.sh-dancer-2{ width: 12.7%; background: url(https://img.labirint.ru/design/sherlock/dancer/dancer_2.png) center no-repeat; background-size: 100%; }
.sh-dancer-3{ width: 27.8%; background: url(https://img.labirint.ru/design/sherlock/dancer/dancer_3.png) center no-repeat; background-size: 100%; }
.sh-dancer-4{ width: 23.5%; background: url(https://img.labirint.ru/design/sherlock/dancer/dancer_4.png) center no-repeat; background-size: 100%; }

.sh-sly-dancer-container{
    display: none;
}
.sh-sly-dancer{
    display: inline-block;
    position: relative;
    width: 25%;
}

@media (max-width: 767px) {


    .intro-title-bg{
        height: 200px;
    }
    .intro-cover-container{
        padding-bottom: 120%;
        height: 1px;
    }
    .intro-cover-bg{
        max-width: 700px;
        padding-bottom: 125%;
        height: 1px;
        background-position-x: left;
    }
    .stories-container {
        margin-bottom: 20%;
        width: 83.33333333%;
        padding-bottom: 83.33333333%;
    }
    .stories-container:nth-last-child(1) {
        margin-bottom: 0;
    }
    .story-cover,
    .stories-title,
    .stories-description{
        opacity: 1;
    }
    .story-circle.circle-left{  left: 0;  }
    .story-circle.circle-right{  right: 0;  }

    /*.font_tags {  font-size: 24px; line-height: 26px;  }*/

    .sherlock-tag{
        white-space: normal;
    }
    .map-list-bg{
        display: none;
    }
    .map-content{
        width: 100%;
    }
    .sherlock-letter-form{
        max-width: 100%;
        padding: 40px 0 0 0 ;
    }
    .sh-dancer-container{
        display: none;
    }
    .sh-sly-dancer-container{
        display: block;
    }
}

.sh-text-gold{
    color: #DF9B34;
    font-size: 18px;
    letter-spacing: 2px;
}

/*swiper*/
.swiper-container{
    color: white;
    width: 80%;
    margin: 0 auto;
}

.swiper-wrapper{

    display: flex;

}
@media (min-width: 765px) {
    .sherlock-btn {
        margin-left: -10px;
        /*margin: 0 0;*/
    }

    .swiper-wrapper {

        /* swiper is disabled at this breakpoint */
        /* wrap slides  */
        /*flex-wrap: wrap;*/
        justify-content: center;
        width: 100%;
    }
}

.sherlock-description{
    text-align: center;
    font-size: 20px;
    line-height: 26px;

}

.swiper-slide {
    /* a single column layout */
    width: 100%;
}
@media (min-width: 765px) {
    .swiper-slide  {
        /* swiper is disabled at this breakpoint */
        /* going for a 2 column layout here */
        width: 50%;
    }
}

.swiper-pagination {
    /* show on small viewports */
    display: block;
}
@media (min-width: 765px) {
    .sh-text-gold{
        font-size: 22px;
    }
    .mt150{  margin-top: 150px;}
    .sherlock-description{
        text-align: left;
        font-size: 24px;
        line-height: 30px;
        max-width: 500px;
        /*margin: 0 auto;*/
        padding-left: 5%;
        padding-right: 5%;
    }
    .sherlock-description-right{
        max-width: 400px;
    }
    .swiper-pagination {
        /* swiper is disabled at this breakpoint */
        display: none;
    }
}

.swiper-pagination-bullet {
    border: white solid 1px;
    background-color: transparent;
}
.swiper-pagination-bullet-active {
    background-color: white;
}

.swiper-pagination{
    position: relative;
    margin-top: 10px;
}

.swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    border: #ffffff solid 1px;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    border: #ffffff solid 2px;
}

.mr20{
    margin-right: 20px;
}
.ml20{
    margin-left: 20px;
}

.mt150desk80mob{
    margin-top: 80px;
}

@media (min-width: 765px) {
    .mt150desk80mob{
        margin-top: 150px;
    }
}