/* --------------- VARIABLES--------------- */
@desktop: ~"only screen and (min-width: 1200px)";
@medium: ~"only screen and (max-width: 1200px) and (min-width: 767px)";
@tablet: ~"only screen and (max-width: 978px)";
@mini-tablet: ~"only screen and (max-width: 767px)";
@phone: ~"only screen and (max-width: 575px)";
@color-magenta: #BC5E93;
@color-top-menu: #0FA8A1;
@color-top-menu-hover: #BEE5E5;
@color-service-title: #E2CAB7;
@color-service-back-more: #86CCCC;
@color-light-grey: #d32c7d;  /* надписи на 2 экране */

/* --------------- COMMON RULES--------------- */
@media @desktop {
    .container-fluid{
        width: 960px !important;
        margin-left: auto;
        margin-right: auto;
    }
    h1 {
    line-height: 36px;
    font-size:28px;
    }
    h2, h3 {
    font-size: 24px;
    line-height: 32px;
    }
}

@media @medium {
h1 {
line-height: 36px;
    font-size:28px;
}
    h2, .list-product-card h3 {
    font-size: 24px;
    line-height: 32px;
    }
}


@media @tablet {
h1 {
line-height: 24px;
font-size: 24px;
}
    h2, .list-product-card h3 {
    font-size: 22px;
    line-height: 22px;
    }
    .span-contact-phone {
        width: 210px !important;
        right: 0px !important;
        position: absolute;
    }
    #gornav {
        font-size: 12px;
    }
    #gornav li {
        display: table-cell;
        padding: 10px 5px 10px 5px;
    }
}



@media @mini-tablet {

    header .main_slogan {
        background: url(/images/lets-play-200.png) no-repeat 0 0 transparent;
        left: 40px !important;
        top: 30px !important;
        width:200px;
    }
    .span-main_slogan {
        float:left !important;
        width: 200px !important;
    }
    .span-contact-phone {
        width: 210px !important;
        right: 0px !important;
        position: absolute;
        float: left !important;
    }

    header .logo a {
        background: url(../img/logo-120.png) no-repeat 0 0 transparent;
        height: 125px !important;
        width: 120px !important;        
    }
    
    .span-logo {
        width: 140px !important;
        float: left !important;
    }
    .span-social-buttons {
        width: 115px !important;
        FLOAT: left !important;
        left: 130px;
        top: 50px;
        margin-left: 0px !important;
        position: absolute;
    }
    .contact-phone {
    margin-top: 0px;
    }
    
/*    TOP MENU      */
    
    #gornav {
        display: block;
    }
    #gornav ul {
        display: block;
    }
    #gornav ul li {
        width: 20% !important;
    }   
    #gornav ul:nth-child(5) {
    float:left !important;
    }
/*  BASKET    */






    
/*  BOTTOM-CARD    */
    form {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
    }
    .bottom-product-card {
        padding: 4px;
        line-height: 1.2; 
    }
    .bottom-card {
        right: 2px;
        bottom: 2px;
    }    
    
    
    .navbar {
margin-top:0px !important;
    }
    
    
.blue .accordion, .blue .accordion li {
margin: 0;
}    
.blue .accordion, .blue .accordion li, .blue .accordion li ul {
padding-left:0px;
}
.blue .accordion li{
    list-style-type: none;
}
.blue ul.accordion ul a {
font-size: 13px;
}
.phone-item {
    font-size:14px;
}
.upper-header {
min-height:150px;
}
}


@media @phone {
h1 {
    line-height: 25px;
    font-size: 25px;
}
h2, .list-product-card h3 {
    line-height: 19px;
    font-size: 19px;
}
.navbar-brand {
margin-right: 0.1rem;
}
.social-buttons {
    text-align:right;
}
header {
margin-top:60px;}
    header .main_slogan {
        background: url(/images/lets-play.png) no-repeat 0 0 transparent;
        left: 0px !important;
        background-size:100%;
            width:100%;
            top: 0 !important;
        
    }
    header .logo a {
        background: url(../img/logo-60.png) no-repeat 0 0 transparent;
    }
    .span-main_slogan {
    width:100%;

    }
    .span-contact-phone {
        width: 160px !important;
        right: 23px !important;
        position: absolute;
    }    
    
        .span-logo {
        width: 75px !important;
        float:left;
    }
    #gornav li a{
    font-size:10px;
    }

.bottom-card {
    width:100%;
    right: 0;
    botom:0;
}


}