/*большие мониторы (свыше 1540px) - расширяем сайт*/
@media (min-width: 1540px) {
    .container{width:1370px;}
}

/*средние мониторы: переходим на резиновую ширину сайта*/
@media (max-width: 1300px) {
    body {font-size:15px;}
    .header .slogan h1 {font-size:42px;}
    .header .slogan p {font-size: 17px;}
    .header-menu li a {font-size:16px;}
    .card-items .card-item-title {font-size: 14px;}
    .container {width: 95%;}
    .left-column{width:350px;}
    .right-column{width:calc(100% - 350px);}
    .content {padding: 0.5%;}
    .content h2 {font-size: 1.7vw;    padding: 1vw; }
    .content h3 {font-size: 1.5vw;    padding: 1vw; }
}

/*маленькие мониторы*/
@media (max-width: 1000px) {
    body {font-size:14px;}
    .header .slogan h1 {font-size: 35px;}
    .header .slogan p {font-size: 15px;}
    .header-menu li a {font-size:15px;}
    .left-column{width:300px;}
    .right-column{width:calc(100% - 300px);}
    /*левое меню*/
    .left-menu ul li a {font-size:12px;}
    .left-menu ul li ul {
    }
}

/*альбомные мобильники: УБИРАЕМ ПРАВЫЙ БЛОК ПОД КОНТЕНТ*/
@media screen and (max-width: 790px) {
    .aside{display:none;}
    .content{width:100%;}
    .header .slogan{text-align: center; padding-left: 0%;}
    .header .left-column{width:30%;}
    .header .right-column{width:70%;}
    .header .main-menu .navbar-cont {padding-left: 0%;}
    .header .slogan h1,.header .slogan p  {padding:0px; }
    .header-menu li a {font-size: 2vw;}
    .header .slogan h1 {font-size: 5vw; padding-top: 2vw;}
    .header .slogan p {font-size: 2.5vw;}
   .footer .left-column{display:none;}
    .footer .right-column{width:100%;}
    .navbar {min-height: 0px;}
    .content h2 {font-size: 15px;}
    .content h3 {font-size: 14px;}
 
}

/*портретные мобильники: ПЕРЕХОД В МОБИЛЬНУЮ ВЕРСИЮ*/
@media screen and (max-width: 450px) {
    .aside{display:block;}
    .container{width:95%;}
    .left-column, .right-column{width:100%;}
    /*шапка*/
    .header .main-menu .navbar-cont {
        display:none;
    }
    .header .slogan h1 a {font-size: 10vw;}
    .header .slogan p {font-size:4vw;}
    .header .slogan {padding-bottom:5%; padding-left: 42%;}
    .header .right-column, .footer .left-column{display:none;}
    
    /*левое меню*/
    .left-menu .first_level{overflow:hidden;}
    .left-menu ul li a {font-size:3vw;}
    .left-menu ul li ul {
        position: initial;
        transform: translateX(0%);
        text-align: center;
        display:block;
        height:0px;
        max-height: 0;
        transform: scale(0); 
        /* Set our transitions up. */
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        opacity:0;
    }
    .left-menu ul li:hover ul {height: inherit; max-height: 1000px; transform: scale(1); opacity:1;}
    .left-menu ul li ul li a{text-align:center;}
}