.container{ max-width: 1004px; margin: 0 auto; padding: 0 1%; }
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

@media screen and (min-width: 1114px){
    #top-banner-right{
        background: url(../images/banner-right.png) bottom left no-repeat;
    }
}

@media screen and (max-width: 1113px){
    #banner-text-details{
        display: none;
    }
    #banner-text-details-free{
        display: block;
    }
    
    /* blog*/
    
    #blog-index-main-wrapper{
        background: none;
    }
    
    #blog-index-wrapper{
        
        margin: 0 auto;
    }
    
    .navigation .pagination{
        text-align: center;
        margin: 0;
    }
    
    .footer-panorama{
        height: 400px;
    }
    
    .aside.blog-index-recent,
    #blog-index-center
    {
        display: block;
        /*float: left;*/
    }
        
    #blog-index-center{
        width: 668px;
        margin: 0 auto;
    }
    
    /*#blog-index-center #block_1,
    #blog-index-center #block_2,
    #blog-index-center #block_4,
    #blog-index-center #block_6,
    #blog-index-center #block_7{
        margin-right: 4px;
    }
    */
    
    .big-blog-block{
        width: 655px;
    }
    
    aside.blog-item-recent { 
        background-color: #F3F3F3;
        display: block;
        padding: 0;
        vertical-align: top;
        width: 100%;
        overflow-x: hidden;
        
    }
    
    aside.blog-item-recent .latest-blog-rectords-title,
    aside.blog-item-recent .date-blog-block,
    aside.blog-item-recent .title-blog-block,
    aside.blog-item-recent .button-blog-block
    
    {
        padding-left: 20px;
    }
    
    .latest_blogs_aside_item{
        background-color: #F3F3F3;
        margin-right: 1%;
        width: 49%;
        float:left;
        
    }
    
    /* \ blog */
    
}

/* 1003 - 800 */
@media screen and (max-width: 1003px){
    #top-navigation ul li.first{
        display:none;
    }
    
    #top-banner-left{
        right: 59%;
    }
    
    #top-banner-right{
        left: 42%;
    }
    
    #classes-blocks ul{
        margin: 0;
    }
    
    #classes-blocks ul li{
        width: 32%;
        margin-right: 0;
    }
    
    
    #classes-blocks ul li:nth-child(4){
        display: none;
    }
    
    .footer-label{
        right: 14%;
    }
    
    .contacts-data{
        width: 50%;
    }
    
    .form-ask{
        width: 46%;        
    }
    
    .form-test-answer-left{
        width: 100%;
    }
    
    .form-test-finish{
        height: 241px;
        padding-top: 20px;
    }
    
    #blog-item-main-picture{
        height: 450px;
    }
    
    /*
    #blog-index-center #block_1,
    
    #blog-index-center #block_3,
    #blog-index-center #block_,
    #blog-index-center #block_7{
        margin-right: 4px;
    }
    
    #blog-index-center #block_1,
    #blog-index-center #block_2,
    #blog-index-center #block_4,
    #blog-index-center #block_6,
    #blog-index-center #block_7{
        margin-right: 4px;
    }
    */
    
    #blog-index-wrapper{
        width: 660px;
    }
    .big-blog-block{
        width: 660px;
    }
    
    .banner-soldier-orange{
        background-position: 96% 0;
    }
    
    #banner-soldier-text-container{
        max-width: 720px;
    }
    
    #banner-soldier-text-container.contacts-page{
        max-width: 600px;
    }
    
    
    .thanks-sing{
        padding-top: 45px;
    }
}

    
@media screen and (max-width: 800px){
    #why-us-bg { 
        background: url(../images/why-us-bg-800.png) 50% 0% no-repeat transparent;
    
    }
    #why-us-reasons{
        width: 50%;
        padding-right:9%
    }
    
    #why-us-teachers{
        width: 41%;
    }
    

}

/* LESS THAN 800 ; 800-640 */
@media screen and (max-width: 799px){ 
    #top-menu{
        padding-left: 15px;
        padding-right: 10px;
    }
    
    
    .container{
        padding: 0;
    }
    
    #top-banner-left{
        display: none;
    }
    #top-banner-right{
        left: 0;
    }
    
    #banner-right-text{
        width: 90%;
    }
    
    #banner-right-text-details{
        width: 70%;
    }
    
    #banner-subscribe-text-phone .font-48{
        font-size: 36px;
    }
    
    .classes-block-text{
        height:180px;
    }
    
    #classes-blocks{
        margin-top: 11px;
    }
    
    #classes-blocks ul{
        margin: 0;
    }
    
    #classes-blocks ul li {
        height: 436px;
    }
    
    .navbar-toggle{
        display: block;
    }
    
    #top-navigation{
        min-width: 348px;
    }
    
    #top-navigation> ul.nav.navbar-nav li:nth-child(4),
    #top-navigation> ul.nav.navbar-nav li:nth-child(5),
    #top-navigation> ul.nav.navbar-nav li:nth-child(6)
    {
        display: none;
    }
    
    .navbar-collapse ul.nav.navbar-nav li:nth-child(2),
    .navbar-collapse ul.nav.navbar-nav li:nth-child(3),
    .navbar-collapse ul.nav.navbar-nav li:nth-child(7)
    {
        display: none;
    }
    
    #why-us-bg { 
        background: none #fff;
    }
    
    #why-us-reasons{
        background: none #fff;
        width: 70%;
        margin: 0 15%;
        padding: 0;
        height: auto;
    }
    
    
    #why-us-teachers{
        background: url(../images/why-us-teachers-800-bg.png) 50% 0% no-repeat transparent;
        width: 100%;
        height: 803px;
        margin-bottom: 15px;
    }
    
    #why-us-teachers-header{
        text-align: center
    }
    
    #teachers-index-viewport{
    
        margin-left: 9%;
        overflow: hidden;
        width: 81%;
    }
    
    .banner-soldier-orange{
        background-image: none;
        background-color: #E4A64C;
    }
    
    #banner-soldier-text-container{
        margin-top: 65px;
        max-width: 600px;
    }
    
    .banner-soldier-button{
        vertical-align: middle
    }
    
    .footer-container{
        background-position: 135% 100%;
    }
    
    .footer-label { 
        right: 1%;
    }
    
    
    /* BLOG */
    
    #blog-item-main-picture{
        height: 350px;
    }
    
    #blog-index-main-wrapper .title-underlined{
        margin-left: 15px;
    }
    
    aside.blog-index-recent{
        padding-right: 5px;
        
    }
    
    #blog-index-wrapper{
        width: 640px;
    }
    
    .latest_blogs_aside_item{
        margin-right: 5px;
    }
    
    /* \ BLOG */
    
    .big-blog-block { 
        width: 640px;
    }
    
    #blog-index-center { 
        width: 640px;
    }
    
    #blog-item-center{
        padding-right: 10px;
    }
    
    #blog-index-main-wrapper #blog-item-center .title-underlined {
        margin-left: 0;
    }
    
    #teachers-small-header{
        float: none;
        width: auto;
        padding-top: 20px
    }
    
    .teachers-small-block ul#teachers {
        margin: 16px 40px 0;
        
    }
    
    #teachers-private-viewport{
        width: 100%;
    }
    
    .contacts-data{
        width: 100%;
    }
    
    
    .form-ask{
        width: 100%;
        padding-left: 0;
    }
    
    .form-ask input, .form-ask textarea{
        width: 96%;
    }
    
    .bigban{
        margin-left: -15%;
    }
    
    .form-test-finish{
        padding-left: 20%;
    }
    
    #form-sign{
        margin-top: 0;
    }
    
    #form-sign #fill-request-240{
        margin-top: 0;
    }
    
    .form-ask input[type=submit]{
        width: auto;
    }
    
    #submit-feedback{
        float: none;
        text-align: center;
    }
    
    
}



/* LESS THAN 640 ; 640-320-0 */
@media screen and (max-width: 639px){ 

    .container{
        padding: 0;
    }
    
    #top-navigation{
        min-width: 0;
    }
    .navbar-toggle{
        float: right;
    }    
    
    #top-navigation> ul.nav.navbar-nav li{
        display: none;
    }
    
    .navbar-collapse ul.nav.navbar-nav li{
        display: block !important;
        text-align: center;
        width:90%;
    }   
    
    .navbar-collapse, 
    .navbar-collapse ul{
        width: 100%;
    }
    
    .navbar-collapse ul{
        margin-top: 15px;
    }
    
    
    
    #banner-text-details-free,
    #big-banners
    {
        display:none;
    }
    
    #top-banner-right-320{
        display: block;
    }
    
    #classes-blocks{
        margin-top: 0;
    }
    
    #classes-blocks ul li{
        width: 100%;
        height: 220px;
        overflow: hidden;
        margin: 0;
    }
    
    .classes-block-title{
        position: absolute;
        margin: -60px 0 0 0;
        color: #fff;
        text-align: center;
        width: 80%;
        padding: 0 9%;
        overflow: hidden;
    }
    
    #classes-blocks .classes-block-header{
        height: 220px;
    }
    
    #classes-blocks .classes-block-text,
    #classes-blocks .classes-block-more{
        display: none;
    }
    
    
    
    
    #banner-subscribe-index{
        display: none;
    }
    
    #why-us-reasons{
        margin: 0 5%;
        width: 90%;
        height: auto;
    }
    
    #why-us-header{
        text-align: center;
    }
    
    #why-us-bg{
        height: auto;
        width: 100%;
        margin-top: 0;
    }
    
    #why-us-bg .container{
        padding: 0;
    }
    
    #why-us-reasons ol{
        margin: 0;
        
    }
    
    #why-us-reasons ol > li::before{
        margin: -20px 0 0 0;
        text-align: center;
        width: 80%;
        width: 20px;
        left: 50%;
    }
    
    #why-us-reasons ol > li{
        margin-top: 20px;
        text-align: center;
        font-size: 18px
    }
    
    
    #teachers-index-viewport{
        margin: 0;
        width: auto;
        height: 530px;
    }
    
    #teachers{
        margin-left: 0;
        
    }
    
    #why-us-teachers{
        height: auto;
        padding-bottom: 9px;
        margin-bottom: 0;
    }
    
    #why-us-teachers-header{
        margin: 10px
    }            
    
    #teachers > li{
        margin-left: 2px;
        margin-bottom: 15px;
    }
    
    #clients-feedbacks-controls {
        width: 280px;
        margin-left: -140px;
        
    }
    
    #banner-soldier-text-container div{
        display: block;
        clear: both;
        text-align: center;
        width: 100%;
    }
    
    
    #banner-soldier-text-container{
        position: relative;
        display: block;
        margin: 10px 0;
        padding: 0 0;
    }
    
    .banner-soldier{
        height: auto;
        background-color: #fff;
    }
    
    .banner-soldier-button{
        display: block;
        margin: 10px 0;
    }
    
    .banner-soldier-orange{
        padding: 10px 0;
        height: auto;
    }
    
    
    .footer-container{
        background: url(../images/footer-320.png)  50% 100%  no-repeat;
    }
    
    .footer-menu,
    .footer-label{
        display: none;
    }
    
    .footer-social{
        width: auto;
        
    }
    
    #footer-gotop{
        display: block;
    }
    
    /* BLOG */
    
    #blog-index-main-wrapper #blog-item-center .title-underlined {
        margin-left: 0;
    }
    
    #blog-item-main-picture{
        height: 200px;
    }
    
    #blog-index-wrapper{
        width: 320px;
    }
    
    #blog-3 { 
        width: 320px;
        float: left;
    }
    
    .latest_blogs_aside_item{
        margin-left: 1%;
        min-width: 320px;
        width: 98%
    }
    /* \BLOG */
    
    
    
    
    #banner-subscribe-text-now{
        position: relative;
        text-align: center;
        left: 0;
        top: 0;
    }
    
    
    #banner-subscribe-text-container div{
        width: 100%;
        text-align: center;
    }
    
    
    #banner-subscribe-text-container{
        position: relative;
        display: block;
        margin: 10px 0;
    }
    
    .banner-subscribe{
        height: auto;
        padding: 15px 0; 
    }
    
    .banner-subscribe> div,
    #banner-subscribe-text-phone> div,
    #banner-subscribe-text-phone
    {
        position: relative;
        display: block;
        text-align: center;
        left: 0;
        top: 0;
    }
    
    #banner-subscribe-text-phone div{
        padding-right: 0;
        display: block;
    }
    
    #fill-request,
    .fill-request-180{
        width: 100px;
        margin: 0 auto;
       line-height: 54px;
    }
    
    #fill-request-180{
       width: 100px !important;
       margin: 0 auto;
       line-height: 54px;
       display: block;
    }
    
    #banner-subscribe-button{
        display: block;
        margin: 10px 0;
    }
    
    #teachers-small-header{
        
        padding-left: 0;
        text-align: center;
    }
    
    .teachers-small-block{
        background-position: 0 0;
    }
    
    .teachers-small-block ul#teachers{
        margin: 15px 0 0 0 ;
        width: 100%;
    }
    
    .content-contacts{
        background: none;
        padding: 30px 1%;
    }
    
    
    .contacts-data .title-underlined{
        float: none;
    }
    
    .contacts-data{
        text-align: center;
    }
    
    .form-ask input, .form-ask textarea{
        padding: 2%;
        width: 95%;
    }
    
    .bigban{
        display: none;
    }
    
    .content-contacts.test-1{
        padding: 40px 0;
    }
    
    .content-contacts.test-1 .title-underlined{
        margin-left: 20px;
    }
    
    .form-test.clearfix{
        padding: 40px 0;
    }
    
    .form-test-finish{
        padding-left: 0;
        width: 100%;
    }
    
    #form-sign{
        margin-top: 0;
    }
    
    #form-sign #fill-request-240{
        margin-top: 0;
    }
    
    .form-ask-header{
        text-align:center;
    }
    
    #banner-soldier-text-container div.fill-request-180,
    #banner-soldier-text-container div#fill-request-180,
    #banner-subscribe-text-phone div#fill-request-180,
    #banner-subscribe-text-phone div#fill-request{
        width: 180px;
        padding: 18px 0px;
        height: auto;
        line-height: inherit;
    }
    
    #banner-subscribe-text-phone div#fill-request{
        padding: 20px 0px;
    }
    
    #form-info input, #form-info textarea {
        padding: 3px;
        width: 190px;
    }
    
    #form-info .big-brown-button{
        line-height:100%;
        height: 30px;
        padding: 5px 20px;
    }    
    
    #form-info #fill-request-180{
        min-width: 190px
    }
    
    .form-test-content{
        padding: 5px 20px;
    }
        
    
    #popup-viewport { 
        margin-top: -245px;
    }
    
    .big-blog-block{
        width: 320px;    
    }
    
    #blog-index-center { 
        margin: 0px auto;
        width: 320px;
    }
    
}