@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,300,400&subset=cyrillic');
@font-face{
    font-family: "Lato";
    src: local("Lato"), url('../fonts/Lato-Regular.ttf');
}
@font-face{
    font-family: "Lato";
    font-weight: bold;
    src: local("Lato Bold"), url("../fonts/Lato-Bold.ttf");
}
@font-face{
    font-family: "Lato";
    font-weight: 100;
    src: local("Lato Bold"), url("../fonts/Lato-Thin.ttf");
}

body{
    margin: 0;
    padding: 0;
    font-family: "Open Sans", "Lato", Calibri, sans-serif;
    
}
*{
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-decoration: none;
    
}
*::selection{
    background-color: #1e824c;
    color: #fff;
}

aside{
    position: fixed;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 20%;
    height: 100%;
    background-color: #444;
    padding: 10px;
    border-right: 10px solid #1e824c;
}

.mobile{
    display: none;
}
main{
    position: absolute;
    width: 80%;
    margin-left: 20%;
    box-sizing: border-box;
}

main>section{
    padding: 40px;
    padding: 7vh;
    clear: both;
}

.button{
    background-color: #1e824c;
    padding: 10px 15px;
    color: #fff;
    display: inline-block;
    transition: .15s;
    vertical-align: top;
}
.button:hover{
    opacity: .7;
}
.accent{
    color: #1e824c;
}
.title{
    margin-bottom: 60px;
}
.title>*{
    font-size: 250%;
    text-transform: uppercase;
    text-align: center;
    color: #444;
}
.title>*:after{
    content: "";
    width: 10%;
    border-top: 4px solid #1e824c;
    display: block;
    margin: 20px auto;
}



.buttons{
        text-align: center;
        padding: 20px 0;
        padding: 4vh 0;
    }
.button_wrap{
    display: inline-block;
    vertical-align: top;
    width: auto;
    
}
.button_wrap_before:before, .button_wrap_before:after{
    content: "";
    width: 0px;
    height: 0px;
    padding: 5px;
    
    border: 2px solid #1e824c;
    display: inline-block;
    
    position: relative;
     transition: .2s;
}
.button_wrap_before:before{
    border-right: 0;
    border-bottom: 0;
    
    top: -7px;
    left: -7px;
    margin-bottom: -12px;
    float: left;
   
}
.button_wrap:hover .button_wrap_before:before{
    top: -10px;
    left: -10px;
    opacity: .5;
}
.button_wrap_before:after{
    float: right;
    border-left: 0;
    border-bottom: 0;
    
    top: -7px;
    left: 7px;
    margin-bottom: -12px;
    
}
.button_wrap:hover .button_wrap_before:after{
    top: -10px;
    left: 10px;
    opacity: .5;
}
.button_wrap_after:before, .button_wrap_after:after{
     content: "";
    width: 0px;
    height: 0px;
    padding: 5px;
    
    border: 2px solid #1e824c;
    display: block;
    position: relative;
     transition: .2s;
}

.button_wrap_after:before{
    float: left;
    border-top: 0;
    border-right: 0;
    margin-top: -12px;
    top: 7px;
    left: -7px;
}
.button_wrap:hover .button_wrap_after:before{
    top: 10px;
    left: -10px;
    opacity: .5;
}
.button_wrap_after:after{
    float: right;
    border-top: 0;
    border-left: 0;
    margin-top: -12px;
    top: 7px;
    left: 7px;
    
}
.button_wrap:hover .button_wrap_after:after{
    top: 10px;
    left: 10px;
    opacity: .5;
}
.button_wrap:hover{
    
}

aside a.logo{
    display: block;
    margin-bottom: 60px;
    margin-bottom: 10vh;
    padding: 10px;
}
    aside a.logo img{
        display: block;
        width: 100%;
        
    }

aside nav{
    display: block;
}
    aside nav ul{
        padding-left: 10px;
    }
        aside nav ul li{
            display: block;
            margin-bottom: 10px;
        }
            aside nav ul li a{
                display: block;
                padding: 5px;
                padding-left: 35px;
                color: #fff;
                background-size: 25px auto;
                background-position: 3px center;
                background-repeat: no-repeat;
                transition: .15s;
                font-size: 18px;
                font-family: "Open Sans";
            }
                aside nav a.auditory{
                    background-image: url('../img/auditory.png');
                }
                aside nav a.advantages{
                    background-image: url('../img/advantages.png');
                }
                aside nav a.program{
                    background-image: url('../img/program.png');
                    background-size: auto 60%;
                    background-position: 6px center;
                }
                aside nav a.price{
                    background-image: url('../img/price.png');
                }
                aside nav a.faq{
                    background-image: url('../img/faq.png');
                }
                aside nav a.contacts{
                    background-image: url('../img/contacts.png');
                }
            aside nav ul li a:hover{
                opacity: .5;
            }
            
    aside nav.cta{
        position: absolute;
        bottom: 0;
        padding-bottom: 30px;
        padding-bottom: 5vh;
        width: 100%;
        box-sizing: border-box;
        padding-right: 10px;
    }
    aside nav.cta div{
        display: block;
        width: 100%;
        color: #fff;
        margin-bottom: 10px;
        text-align: center;
    }
    aside nav.cta div a{
        color: #fff;
        font-size: 18px;
    }
    
main .main{
    min-height: 700px;
    min-height: 100vh;
    
    /*background-image: url('../img/main_back.jpg');*/
    background-image: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%), url('../img/laptop.jpg');
    background-size: auto 100%;
    background-size: cover;
    
    box-sizing: border-box;

}
    .main .hgroup{
        height: 60vh;
        margin-bottom: 100px;
        margin-bottom: 10vh;
        
    }
    .main h1{
        color: #fff;
        font-size: 300%;
        text-transform: uppercase;
        margin-bottom: 60px;
        margin-bottom: 10vh;
        width: 80%;
        -text-shadow: 1px 1px 1px #555;
    }
        .main h1 b{
            color: #1e824c;
        }
    .main h3{
        color: #fff;
        font-size: 150%;
        width: 60%;
        font-weight: 100;
    }
    
    .main .stats{
        margin-bottom: 10px;
    }
        .main .stats p{
            color: #fff;
            font-size: 130%;
        }
    
        
        
#auditory{
    background-color: #fff;
    box-sizing: border-box;

    
}
#auditory .auditory{
    display: block;
    text-align: center;
    font-size:0;
    margin-bottom: 30px;
    margin-bottom: 5vh;
}
    #auditory ul li{
        display: inline-block;
        width: 26%;
        margin: 3%;
        font-size: 16px;
        vertical-align: top;
    }
        #auditory ul li figure{
            
        }
        #auditory ul li figure img{
            max-width: 100%;
            height: 200px;
            margin: 0 auto;
            object-fit: contain;
            display: block;
            margin-bottom: 10px;
        }
        #auditory ul li figure figcaption h3{
            color: #1e824c;
            margin-bottom: 5px;
        }
        #auditory ul li figure figcaption p{
            font-size: 100%;
        }
  
    
main .parallax.p-1{
    height: 250px;
    height: 40vh;
    background-image: url("../img/parallax1.jpg");
    background-size: cover;
    background-position: 20% center;
    background-attachment: fixed;
}

main .numbers{
   
}
    main .numbers ul{
        display: block;
        margin-top: 40px;
        margin-top: 7vh;
        font-size: 0;
        margin-bottom: 30px;
        margin-bottom: 5vh;
        text-align: center;
    }
    .numbers ul li{
        display: inline-block;
        vertical-align: top;
        font-size: 16px;
        width: 20%;
        margin: 0 2.5%;
        text-align:center;
    }
    .numbers ul li figure .number{
        color: #1e824c;
        font-size: 400%;
    }
    .numbers ul li figure figcaption p{
        font-size: 85%;
    }
    
section.test{
    background-image: url('../img/test_back.jpg');
    background-size: 120% auto;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 5%;
}
    section.test .hgroup{
        text-align: center;
        color: #fff;
        padding: 15px;
        background-color:rgba(0,0,0,0.8);
    }
    section.test .hgroup h2{
        color: #1e824c;
        font-size:2.2em;
    }
    section.test .hgroup .btn{
        margin: 15px 0;
    }

    section.test .hgroup .btn input{
        padding: 10px 20px;
        border: 2px solid #1e824c;
        color: #1e824c;
        font-family: inherit;
        cursor: pointer;
        background-color: transparent;
        transition: .3s;
        font-size: 20px;
    }
    section.test .hgroup .btn input:hover{
        background-color: #1e824c;
        color: #fff;
    }
    
    .test .testContent{
            background-color: #fff;
        padding: 15px;    
    }
    .testContent ul.questions{
        display: block;
    }
        .testContent ul.questions li{
            display: block;
        }
        
        .testContent ul.questions li code{
            display: block;
            margin: 15px 0;
            padding: 7px 10px;
            background-color:#333;
            color: #efefef;
        }
        .testContent .answers{
            display: block;
            margin: 25px 0;
            font-size: 0;
        }
        
        .testContent .answers label {
            display: inline-block;
            width: 50%;
            font-size: 16px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .testContent .answers label input {
            display: inline-block;
            margin-right: 30px;
            width: 0;
            height: 20px;
            padding-left: 20px;
            outline: none;
        }
        .testContent .answers label:hover input:before{
            border-color: #6FB1E4;
        }
        .testContent .answers label input:checked:before{
            background-color: #6FB1E4;
            border-color: #6FB1E4;
        }
        .testContent .answers label input:checked+span{
            color:#6FB1E4 ;   
            
            
        }
        
        .testContent .answers label input:before {
            content: "";
            display: inline-block;
            border: 2px solid #777;
            padding: 9px;
            border-radius: 50%;
            vertical-align: top;
            transition: .3s;
        }
         .testContent .answers label span{
             display: inline-block;
             vertical-align: top;
             transition: .3s;

         }
        .testContent .answers label input[answer]:before{
            border-color: #481;
            background-color:#481;
            
        }
         .testContent .answers label input[answer]+span{
                color: #481;
         }
         
        .testResults{
            display: none;
        }
            .testResults h3{
                text-align: center;
                margin: 10px 0;
            }
         
        #resultText{
            text-align: center;
            font-size: 14px;
        }
    .testContent .count{
        text-align: right;
        font-style: italic;
        font-size: 12px;
        color:#999;
    }
    .testContent .buttons{
        padding: 0;
    }
    .testContent .buttons input{
        background-color: #6FB1E4;
        color: #fff;
        font-family: inherit;
        border: 0;
        cursor: pointer;
        opacity: .7;
        padding: 7px 15px;
        transition: .2s;
    }
    .testContent .buttons input:disabled{
        background-color: #ccc;
    }
    .testContent .buttons input:hover{
        opacity: 1;
    }
    .testContent #qResult{
        font-size: 14px;
        margin: 10px 0;
    }
    .testContent #qResult[data-result='success']{
        color: #481; 
    }
    .testContent #qResult[data-result='error']{
          color: #c11;
    }
    
section.advantages{
    
    background-image: url('../img/adv_back.jpg');
    background-size: cover;
    color: #fff;
}
    .advantages h2{
        color: #fff;
    }
    
        .advantages ul {
            font-size: 0;
            text-align: left;
        }
            .advantages ul li{
                display: inline-block;
                vertical-align: top;
                margin-right: 6%;
                width: 47%;
                font-size: 16px;
                margin-bottom: 30px;
                background-repeat: no-repeat;
                background-position: left top;
                background-size: 15% auto;
                min-height: 150px;
                min-height: 20vh;
            }
            .advantages ul li.price{
                background-image: url('../img/adv_price.png');
            }
            .advantages ul li.tutor{
                background-image: url('../img/adv_tutor.png');
            }
            .advantages ul li.prepare{
                background-image: url('../img/adv_prepare.png');
            }
            .advantages ul li.work{
                background-image: url('../img/adv_work.png');
            }
            .advantages ul li.study{
                background-image: url('../img/adv_study.png');
            }
            .advantages ul li.practice{
                background-image: url('../img/adv_practice.png');
            }
            .advantages ul li:nth-child(2n){
                margin-right: 0;
            }
                .advantages ul li .hgroup{
                    margin-left: 20%;
                    width: 80%;
                    box-sizing: border-box;
                }
                .advantages ul li .hgroup h3{
                    color: #1e824c;
                    text-transform: uppercase;
                    font-size: 110%;
                    margin-bottom: 5px;
                }
                .advantages ul li .hgroup p{
                    color: #fff;
                    
                }
                

.study-descript img{
    width: 100%;
}
section.program{
    
}
.program ul{
    display: block;
    font-size: 0;
    text-align: left;
}
    .program ul>li{
        display: inline-block;
        margin-bottom: 30px;
        vertical-align: top;
        width: 47%;
        margin-right: 6%;
        font-size: 16px;
    }
    .program ul>li:nth-child(2n){
        margin-right: 0;
    }
        .program ul>li figure{
            
        }
        .program ul li figure:after{
            content: "";
            clear: both;
            display: block;
        }
        .program ul li figure>div{
            width: 20%;
            float: left;
            margin-right: 5%;
            box-sizing: border-box;
            padding: 10px;
            padding-bottom: 0;
            background-color: #444;
            text-align: center;
        }
        .program ul li figure>div span.num{
            display: block;
            width: 100%;
            padding: 7px 0;
            background-color: #fff;
            font-size: 150%;
        }.program ul li figure>div span.name{
            color: #fff;
            font-size: 85%;
            padding: 5px 0;
            display: block;
            
        }
        .program ul li figure figcaption{
            float: right;
            width: 75%;
            box-sizing: border-box;
        }
        .program ul li figure figcaption h3{
            color: #1e824c;
            margin-bottom: 10px;
        }
        .program ul li figure figcaption ol li{
            display: block;
            padding-left: 10px;
            font-size: 90%;
            
        }
        
        #showProgram{
            color: #1e824c;
            display: inline-block;
            padding-bottom: 2px;
            border-bottom: 1px dotted #1e824c;
        }
        
.timetable table{
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
}
.timetable table tr td{
    border: 1px solid #aaa;
    text-align: center;
    padding: 10px 10px;
}
.timetable table tr:nth-child(1) td{
    background-color: #eee;
}

.timetable p{
    color: #555;
    font-size: 90%;
    font-family: "Open Sans";
}
        
section.resumee{
   
    box-sizing: border-box;
    background-image: url('../img/resumee_back.jpg');
    background-size: cover;
    min-height: 110vh;
}
.resumee .lists{
    float: left;
    width: 50%;
    padding-left: 20px;
    box-sizing: border-box;
}
.resumee .list{
    min-height: 80vh;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-left: #1e824c 20px solid ;
    box-shadow: 3px 3px 5px #444;
     z-index: 3;
}
.resumee .list.empty{
    
    height: 80vh;
    margin-bottom: -80vh;
    z-index: 2;
    top: 20px;
    left: -25px;
}
.resumee .list .heading{
    margin: 0 5% ;
    margin-bottom: 5%;
    padding: 5% 0;
    border-bottom: #ccc 1px solid;
}
.resumee .list .heading figure:after{
    content: "";
    clear: both;
    display: block;
}
.resumee .list .heading figure img{
    display: block;
    width: 20%;
    float: left;
}
.resumee .list .heading figure figcaption{
    width: 75%;
    float: right;
    display: block;
}
.resumee .list .heading figure figcaption h3{
    color: #1e824c;
    margin-bottom: 5px;
}
.resumee .list .heading figure figcaption h5{
    color: #777;
}
.resumee .list .section{
    padding: 0 5%;
    padding-bottom: 10%;
}
.resumee .list .section h3{
    color: #1e824c;
    margin-bottom: 10px;
}
.resumee .list .section ul li{
    display: block;
    font-size: 90%;
    margin-bottom: 5px;
    padding-left: 20px;
    color: #444;
    
}
.resumee .list .section ul li:before{
    content: "─ ";
}


.resumee .naming{
    float: right;
    width: 40%;
    box-sizing: border-box;
    margin: 30vh 0;
    padding: 15px;
    background-color: #fff;
    box-shadow: 3px 3px 5px #444;
}
.resumee .naming h2{
    color:#1e824c;
    font-size: 120%;
    text-transform: uppercase;
}
.resumee .naming p{
    font-size: 90%;
}
.resumee .naming .button_wrap{
    margin-top: 10px;
    padding: 10px;
}


section .container:after{
    display: block;
    content: '';
    clear: both;
}
section.price{
    background-image: url('../img/price_back.jpg');
    background-position: center center;
    background-size: cover;
   
    clear: both;
}
section.price h2{
    color: #fff;
}

    .price .vars{
        
    }
        .price .vars label{
            display: block;
            font-size: 100%;
            line-height: 1.1;
            margin-bottom: 5px;
        }
            .price .vars label span{
                display: inline;
                width: auto;
                color: #efefef;
                font-size: 85%;
                line-height: 1.1;
                font-weight: 300;
            }
            .price .vars label input{
                -webkit-appearance: none;
                -moz-appearance: none;
                -o-appearance: none;
                appearance: none;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
                outline: none;
            }
            .price .vars label input:before{
                display: inline-block;
                width: 15px;
                height: 15px;
                border: 1px solid #ccc;
                content: "✓";
                color: transparent;
                line-height: 15px;
                text-align: center;
            }
            .price .vars label input:checked:before{
                color: #fff;
            }
    
    .price .titles{
        float: left;
        width: 50%;
    }
        .price .titles div{
            margin-bottom: 10px;
        }
    .price .titles div p{
        font-size: 170%;
        font-weight: 100;
        color: #fff;
        text-transform: uppercase;
    }
    .price div.promo{
        margin-top: 40px;
    }
    .price .titles span{
        font-size: 50%;
    }
    .price .titles .big{
        font-size: 350%;
    }
    
    .price a.promo{
        color: #aaa;
        font-size: 100%;
        font-weight: 100;
        display: inline-block;
        padding-bottom: 3px;
        border-bottom: 1px dotted #aaa;
    } 
    .price .promo input{
        display: inline-block;
        vertical-align: bottom;
        border: 0;
        background:transparent;
        border-bottom: 1px solid #777;
        padding: 5px 8px;
        font-family: inherit;
        color: #ccc;
        font-size: 100%;
        outline: none;
    }
    .price .promo #promo_submit{
        background-image: url('../img/arrow_left.png');
        background-size: auto 70%;
        padding: 3px 5px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center center;
    }
    
    .price form{
        width:30%;
        margin-right: 5%;
        float: right;
        box-sizing: border-box;
        padding: 15px;
        background-color: #fff;
    }
    
    .price form fieldset{
        border: 0;
    }
    .price form label{
        display: block;
        margin-bottom: 15px;
    }
    .price form label input{
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 5px 10px;
        border: 0;
        background: 0;
        border-bottom: 1px solid #1e824c;
        font-family: inherit;
        font-size: 16px;
        outline: none;
    }
    .price form .buttons{
        padding: 0;
        padding-top: 10px;
    }
    .price form input[type='submit']{
        border: 0;
        font-family: inherit;
        cursor: pointer;
    }
    
section.faq{
    clear: both;
    
    border-bottom: 7px solid #1e824c;
}
    .faq ul{
        padding: 0px 10%;
    }
        .faq ul li{
            display: block;
            padding-left: 40px;
            margin-bottom: 30px;
            background-image: url('../img/question.png');
            background-size: 30px auto;
            background-position: left top;
            background-repeat: no-repeat;
        }
        .faq ul li h3{
            margin-bottom: 10px;
            color: #1e824c;
        }
        .faq ul li p{
            font-size: 90%;
        }
.courses{
    padding: 7vh 4%;
    background-image: url('../img/courses_back.jpg');
    background-size: cover;
}
.courses .title{
    text-align: center;
}
.courses .title h2{
    font-size: 100%;
}
.courses .title .wrap:after{
    width: 30%;
}
.courses .title .wrap{
    display: inline-block;
    width: auto;
    background-color: #fff;
    box-shadow: 2px 2px 4px #444;
    padding: 15px 40px;
}

.courses ul{
    font-size: 0;
    text-align: center;
}
.courses ul li{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    width: 48%;
    margin-right: 4%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 5px  #444;
}   
.courses ul li:nth-child(2n){
    margin-right: 0;
}
    .courses ul li figure:after{
        content: "";
        display: block;
        clear: both;
    }
    .courses ul li figure img{
        width: 30%;
        float: left;
        margin-bottom: 10px;
    }
    .courses ul li figure figcaption{
        float: right;
        width: 68%;
    }
    .courses ul li figure h3{
        color: #1e824c;
        font-size: 100%;
        text-align: left;
        margin-bottom: 5px;
    }
    .courses ul li figure p{
        font-family:"Open Sans";
        font-size: 80%;
        text-align: left;
        line-height: 1.1;
        
    }
    .courses ul li .buttons{
        text-align: right;
        padding-bottom: 0;
        padding-top:5px;
    }
    
section.contacts{
    clear: both;
    
}
    section.contacts ul{
        font-size: 0;
        
    }
        section.contacts ul li{
            font-size: 18px;
            color: #444;
            width: 30%;
            display: inline-block;
            vertical-align: top;
            margin-right: 3%;
            box-sizing: border-box;
            padding-left: 60px;
            min-height: 60px;
            background-size: 55px auto;
            background-position: left center;
            background-repeat: no-repeat;
            display: inline-flex;
            flex-direction: column;
            justify-content: space-around;
        }
        
         section.contacts ul li.addr{
             background-image: url('../img/c_addr.png');
         }
        section.contacts ul li.email{
            background-image: url('../img/c_email.png');
        }
         section.contacts ul li.phone{
             background-image: url('../img/c_phone.png');
         }
         

.reviews{
    
}
    .reviews ul{
        padding: 20px 15%;
    }
        .reviews ul li{
            display: block;
            padding: 15px;
        }
        .reviews ul li:nth-child(2n){
            background-color: #efefef;
        }
         .reviews ul li h3{
             font-size: 16px;
             margin-bottom: 5px;
             color: #1e824c;
         }
         .reviews ul li p{
             font-size: 14px;
         }
        
        .reviews ul li img{
            max-width: 100%;
            display: block;
            margin: 0 auto;
        }
         
.tutor{
    padding: 0px 0;
}
    .tutor .grid{
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: stretch;
    }
    .tutor .content{
        display: block;
        width: 65%;
        padding: 65px 5%;
        box-sizing: border-box;
    }
        .tutor .content h3{
            color: #1e824c;
        }
        .tutor .content p{
            font-size: 14px;
            font-style: italic;
            margin-bottom: 20px;
        }
        
        .tutor .content li{
            display: block;
            
        }
        .tutor .content li:before{
            content: "─ ";
        }
    .tutor .image{
        width: 35%;
        background-size: 100% auto;
        background-position: center center;
    }
         
footer{
    padding: 20px;
    padding: 4vh;
    background-color: #444;
}
footer p{
    text-align: center;
    color: #aaa;
    font-size: 80%;
    font-family: "Open Sans";
}


@media screen and (max-aspect-ratio: 1/1), screen and (max-height: 500px), screen and (max-width: 768px){
    aside{
        display: none;
    }
    
    main{
        position: static;
        width: 100%;
        margin :0;
    }
    
    main>section{
        padding: 30px 5%;
    }
    main .main{
        min-height: 0;
    }
    .main h1{
        font-size: 200%;
        width: 100%;
        
        margin-bottom: 20px;
    }
    .main h3{
        font-size: 120%;
        width: 100%;
    }
    .main .hgroup{
        margin-bottom: 0;
    }
    .main .hgroup{
        margin-bottom: 20px;
    }
    
    .title{
        margin-bottom: 30px;
    }
    .title>*{
        font-size: 150%;
    }
    .title>*:after{
        width: 40%;
        border-width: 2px;
    }
    
    .tutor .grid{
        display: block;
    }
    .tutor .content{
        width: 100%;
        
    }
    .tutor .image{
        width: 100%;
        height: 25vh;
    }
    
    #auditory ul li{
        display: block;
        width: 80%;
        padding: 0 10%;
        margin: 0;
        margin-bottom: 25px;
    }

    .reviews ul{
        padding: 30px 0;
    }
    
    main .parallax.p-1{
        height: 10vh;
        
    }
    
    .numbers ul li{
        display: block;
        width: 100%;
        margin: 0;
        margin-bottom: 30px;
    }
    
    .advantages ul li{
        display: block;
        width: 100%;
        margin: 0;
        margin-bottom: 30px;
        min-height: 60px;
    }
    
    
    .program ul>li{
        display: block;
        width: 100%;
        margin: 0;
        margin-bottom: 30px;
        
    }
    .program ul li figure>div{
        padding: 0;
    }
    
    section.resumee{
        background-attachment: fixed;
    }
    .resumee .lists{
        width: 100%;
        float: none;
        padding: 0;
    }
    .resumee .list.empty{
        display: none;
    }
    .resumee .list{
        margin-left: -10px;
    }
    
    .resumee .naming{
        float: none;
        display: block;
        width: 100%;
        margin: 30px 0;
        text-align: center;
    }
    
    .price .titles{
        float: none;
        width: 100%;
        margin-bottom: 40px;
    }
    .price form{
        float: none;
        width: 100%;
        margin: 0 auto;
    }
    
    .faq ul{
        padding: 0;
    }
    
    .courses .title .wrap{
        width: 100%;
        box-sizing: border-box;
    }
    .courses ul li{
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
        display: block;
    }
    
    section.contacts ul li{
        display: block;
        width: 100%;
        margin-bottom: 20px;
        padding-left: 50px;
        background-size: 45px auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    
    .timetable table tr td{
        padding: 5px 0;
        font-size: 90%;
    }
}


@media screen and (max-width: 768px), screen and (max-aspect-ratio: 1/1){
    .mobile{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		background-color: #222;
		font-size: 0;
		transition: .3s;
	}
	.open{
		left: 0;
	}
	.open .mobile{
		left: calc(100% - 61px);
	}
	.open .mobile button{
		background-image: url('/img/header-menu-close.png');
		background-repeat: no-repeat;;
		background-size: 70%;
	}

	.mobile button, .mobile a{
		display: inline-block;
		padding: 15px;
		background-color: transparent;;
		background-size: 100% auto;
		background-size: contain;
		background-position: center;
		border: 0;
		transition: .2s;


	}
	.mobile button{
		outline: none;
		background-image: url('/img/header-menu.png')
	}
    .mobile a.call{
		background-image: url('/img/header-phone.png')
	}
	.mobile a.to-top{
		background-image: url('/img/header-top.png')
	}
	.mobile button{
		margin-right: 15px;
	}
	.mobile  a{
		margin-left: 15px;
	}
	.mobile .right-group{
		float: right;
	}
	
	main{
	    margin-top: 50px;
	}
    
    aside{
        width: 100%;
        height: inherit;
        margin-top: 50px;
        background: #222;
        border: none;
    }
    aside nav ul li a{
        text-align: center;
    }
    aside a.logo{
        display: none;
    }
    
    aside nav.cta {
        display: none;
    }
}