/* --------------- VARIABLES--------------- */
@desktop: ~"only screen and (min-width: 1200px)";
@medium: ~"only screen and (max-width: 1200px) and (min-width: 978px)";
@tablet: ~"only screen and (max-width: 978px) and (min-width: 767px)";
@mini-tablet: ~"only screen and (max-width: 767px) and (min-width: 575px)";
@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: 32px;
    margin-top:0.5rem;
    }
    h2 {
    font-size: 26px;
    line-height: 32px;
    }
    .list-focus-card h3 a {
    line-height: 22px !important;
    font-size: 22px;
            
    }
    .wrapper-top-menu {
//        margin-top: -100px;
    }
    header .top-menu {
        background-size: 630px;
    }
}

@media @medium {
    .container {
        max-width:100%;
    }
h1 {
line-height: 36px;
}
    h3 {
    font-size: 23px;
    line-height: 32px;        
    }
    h2, .list-product-card h3 {
    font-size: 26px;
    line-height: 32px;
    }
    .wrapper-top-menu {
        padding-left:0px;
//        top: -50px;
//        margin-top: -100px;
    }
    .phone-item {
        font-size:18px;
    }
    header .top-menu {
    background-size: 600px;
    }
    header a {
        font-size:16px;
    }     
    .menu-item1{
        top: 31px;
    }
    .menu-item2{
        left:120px;
    }
    .menu-item3{
        left: 220px;
        top: 24px;    
    }
    .menu-item4{
    top: 39px;
    left: 320px;
    }    
    .menu-item5{
        left: 425px;
    }       
    
}


@media @tablet {
        .container {
        max-width:100%;
    }
    h1 {
    line-height: 24px;
    font-size: 24px;
    }
    h2, .list-product-card h3 {
    font-size: 22px;
    line-height: 22px;
    }
    h3 {
    font-size: 19px;
    line-height: 28px;        
    }    
    .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;
    }
    header  .second-string {
        line-height: 32px;
        font-size: 24px;  
    }       
    .wrapper-top-menu {
        padding-left:0px;
    }
    .content-focus img {
        max-width:100%;
        height:auto;
    }
    .phone-item {
        font-size:14px;
    }
    header a {
        font-size:13px;
    }    
    header .top-menu {
        background-size:450px;
    }    
    .top-menu {
        margin-top:0px;
    }
    .menu-item1{
        top: 23px;
        left: 12px;
        width: 75px;
    }
    .menu-item2{
        top: 15px;
        left: 88px;
        width: 75px;
    }
    .menu-item3{
        left: 157px;
        top: 16px;
        width: 75px;    
    }
    .menu-item4{
        top: 20px;
        left: 238px;
        width: 75px;
    }    
    .menu-item5{
        left: 323px;
        top: 10px;
        line-height: 14px;
        width: 75px;    
    }     
}



@media @mini-tablet {
    h1 {
    font-size: 22px;
    line-height: 32px;        
    }    
        h3 {
    font-size: 19px;
    line-height: 32px;        
    }
    .container {
        max-width:100%;
    }
    header .main_slogan {
        background: url(/images/lets-play-200.png) no-repeat 0 0 transparent;
        left: 0px !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;
    }
    .wrapper-top-menu {

    }
    header .logo a {
     
    }
    
    .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;
        font-size:16px;
    }    
    .phone-item {
        font-size:10px;
    }    
/*    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: 1px;
        bottom: 1px;
    }    
    
    
    .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;
    }
    .wrapper-top-menu {
        padding-left:0px;
//        top: -50px;
//        margin-top: -100px;
    }
    .content-focus img {
        max-width:80%;
        height:auto;
    }    
    header  .first-string {
          line-height: 32px;
        font-size: 24px;  
    }
    header  .second-string {
        line-height: 32px;
        font-size: 14px;  
    }   
    .sum {
        font-size:12px;
    }
    header .top-menu {
        background-size:335px;
    }
    header a {
        font-size:10px;
    }    
    .top-menu {
        
    }
    .menu-item1{
        top: 12px;
        left: 12px;
        width: 75px;
    }
    .menu-item2{
        top: 6px;
        left: 65px;
        width: 75px;
    }
    .menu-item3{
        left: 120px;
        top: 7px;
        width: 75px;    
    }
    .menu-item4{
        top: 12px;
        left: 176px;
        width: 75px;
    }    
    .menu-item5{
        left: 233px;
        top: 4px;
        line-height: 14px;
        width: 75px;    
    }        
}


@media @phone {
h1 {
    line-height: 25px;
    font-size: 20px;
}
h2, .list-product-card h3 {
    line-height: 19px;
    font-size: 19px;
}
h3{
    line-height: 25px;
    font-size: 20px;
}
header {
margin-top:60px;}
    header .main_slogan {
        background: url(/images/lets-play-200.png) no-repeat 0 0 transparent;
        left: 50px !important;
    }

    header .logo a {
    }
    .span-main_slogan {
        float:left !important;
        width: 205px !important;
    }
    .span-contact-phone {
        width: 160px !important;
        right: 23px !important;
        position: absolute;
    }    
    
        .span-logo {
        width: 75px !important;
        float:left;
    }
    #gornav li a{
    font-size:10px;
    }
.navbar-brand {
    margin-right:0px;
}
.basket-mobile {
    margin-right:0.3rem;
}
header  .first-string {
      line-height: 19px;
    font-size: 20px;  
}
header  .second-string {
      line-height: 19px;
    font-size: 12px;  
}
.bottom-card {
    width:100% !important;
    right: 0;
    bottom:0;
}
.main-slogan {
    margin-top: 1rem;
}
.wrapper-logo {
    margin-top: 0.3rem;
}
    .content-focus img {
        max-width:80%;
        height:auto;
    }
.navbar-nav {
    line-height: 1rem;
    .nav-link {
        text-transform:inherit;
        color: #114066 !important;
        font-size:20px;
        padding-top:10px !important;
        padding-bottom:0px !important;
        a {
            padding-top:0px;
            padding-bottom:0px;
        }
    }

}
.mobile-catalog {
    color:#007bff !important;
    font-size:18px;
}
.product-quantity {
    font-size:12px;
}
.product-name {
}
}