@media screen and (max-width: 1023px){

    html{width: 100%; min-width: 100%; min-height: 100vh}
    body{min-width: 100%; width: 100%; text-align: center}
    .layer{width: 100%; overflow: hidden}
    .wrap{width: 100%; overflow: hidden}

    h1, .h1{ font-size: 23px; text-align: center }
    h2, .h2{ font-size: 18px }

    iframe{width: 100%!important; height: auto}

    #menu {display: block; width: 100%}
    #menu a{ display: block; width: 33.3333%; float: left; height: 45px; line-height: 45px }
    #menu a.home{ width: 33% }
    #menu a.logo{ display: none }
    #course_btn{ width: 100%; height: 67px }

    #home_head h1{ font-size: 22pt }
    #home_head h2{ width: 100%; font-size: 12pt }

    #toggle_btn{ display: none }
    #lessons_container a{ margin: 20px auto}

    p{ text-align: center}
    p.title{ height: inherit; line-height: 30px;}
    p.title:before,
    p.title:after{ content: none }

    .video img{width: 100%}

    ul.marked_ul li{height: inherit; margin: 10px 0}
    #gray_bg_text{ display: none}

    .UUrok .UPic{ display: block; width: 100% }
    .UUrok .UDescr{ display: block; width: 100%; padding: 0 }
    .UUrok .UDescr .UBut{ float: none; margin: 30px auto; padding: 15px 80px }

    .MiniLes{ width: 100%; height: auto; padding: 10px; box-sizing: border-box }
    .MiniLes a{ padding: 10px 0; display: block }

    .main_les img{ max-width: 100% }
    #lesson{ padding: 0 10px; box-sizing: border-box}

    .get_adv{ width: 100% }
}