﻿ /*BOOTSTRAP RESPONSIVE xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px*/
 @media (min-width: 0px) and (max-width: 385.98px) {
    /********** FEATURE **********/

    .feature-events .tittle {
        font-size: 18px;
        top: calc(50% - 18px);
    }

    .feature-events img {
        height: 213px;
        object-fit: cover;
    }

    .col-xxs-12{
        width: 100%;
    }


    .toast-body {
        padding-right: 0px;
        padding-left: 3px;
    }

    .view-toast {
        left: 0px;
    }
}


@media (min-width: 386px) and (max-width: 575.98px) {

    #logoVushorus {
        width: 100px;
    }

    #section1Footer {
        width: 50%;
    }

    #section2Footer {
        width: 50%;
        padding-left: 19px;
    }

    #section3Footer {
        width: 50%;
    }

    #section4Footer {
        width: 50%;
        padding-left: 19px;
    }


    /********** FEATURE **********/

    .feature-events .tittle {
        font-size: 20px;
        top: calc(50% - 20px);
    }

    .feature-events img {
        height: 213px;
    }

    .view-toast {
        right: 3px;
    }
}

@media (max-width: 575.98px) {
    /********** TÍTULOS **********/
    h1, h1.h1, h1.top-tittle, h1.title, h1.title-max, h1.intitle {
        font-size: 25px;
        line-height: 35px;
    }

        h1.title-min {
            font-size: 24px;
            line-height: 32px;
        }
            h1.title-min::after {
                margin: 24px auto 24px -17.5px;
            }

    h2, h2.h2, h2.subtitle, h2.subtitle-min, h2.insubtitle {
        font-size: 24px;
        line-height: 31px;
    }

    h3, h3.h3, h3.unsubtitle, .h3.unsubtitle-min {
        font-size: 20px;
        line-height: 20px;
    }

    h4, h4.h4 {
        font-size: 18px;
        line-height: 18px;
    }

    .container {
        max-width: 100% !important;
    }

    .pc-78 {
        padding-top: 78px !important;
    }

    .navbar-nav,
    .nav-list {
        background-color: #fff;
        width: 100%;
        padding: .5rem 2rem .5rem 2rem;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        display: none;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
        padding-left: 27px !important;
    }

    .navbar .navbar-nav .nav-item .nav-link {
        margin: 15px 0px;
    }

    .navbar .navbar-brand {
        margin-left: 15px;
    }

    .navbar .navbar-nav .nav-item.sign-in {
        position: relative !important;
        right: auto !important;
        margin-right: auto;
    }

    .navbar-toggler {
        display: block;
        margin-right: 27px;
    }

    .navbar-toggler-icon {
        width: 28px !important;
        height: 17px !important;
    }


    .widget {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    #carouselExampleSlidesOnly.carousel slide,
    .carousel-inner.only {
        min-height: 209px !important;
        max-height: 209px !important;
        height: 209px !important;
    }

    footer .container {
        max-width: 100% !important;
        padding: 79px 15px 27px 15px;
    }

    .m-first {
        margin-bottom: 82.3px;
    }

    .mb-35 {
        margin-bottom: 35.9px;
    }

    .mt-79 {
        margin: 41px auto 21px auto;
    }

    .social-icon {
        height: 40px;
        max-height: 40px;
        width: 40px;
        max-width: 40px;
    }

    /*SE MODIFICÓ EL MEDIA de 379.98 a 479.98 POR LA ÚLTIMA RESOLUCIÓN DEL MOCKUP 480PX*/
    @media (max-width: 479.98px) {

        #input-newsletter {
            width: 100%;
            height: 55px;
            padding: 18px 19px 18px 19px;
        }

        /********** cols extra small write before col-1... **********/
        .col-xs-auto {
            flex: 0 0 auto;
            width: auto;
        }

        .col-xs-1 {
            flex: 0 0 auto;
            width: 8.33333333%;
        }

        .col-xs-2 {
            flex: 0 0 auto;
            width: 16.66666667%;
        }

        .col-xs-3 {
            flex: 0 0 auto;
            width: 25%;
        }

        .col-xs-4 {
            flex: 0 0 auto;
            width: 33.33333333%;
        }

        .col-xs-5 {
            flex: 0 0 auto;
            width: 41.66666667%;
        }

        .col-xs-6 {
            flex: 0 0 auto;
            width: 50%;
        }

        .col-xs-7 {
            flex: 0 0 auto;
            width: 58.33333333%;
        }

        .col-xs-8 {
            flex: 0 0 auto;
            width: 66.66666667%;
        }

        .col-xs-9 {
            flex: 0 0 auto;
            width: 75%;
        }

        .col-xs-10 {
            flex: 0 0 auto;
            width: 83.33333333%;
        }

        .col-xs-11 {
            flex: 0 0 auto;
            width: 91.66666667%;
        }

        .col-xs-12 {
            flex: 0 0 auto;
            width: 100%;
        }
                  
        .navbar .navbar-nav .nav-item .nav-link {
            margin: 15px 0;
        }

        footer .col-6.col-lg-3 {
            width: 100%;
        }

        .m-first,
        .mb-xs-35 {
            margin-bottom: 35.9px;
        }

        h1.title-min::after {
            margin: 24px auto 24px -6.5px !important;
            width: 164px !important;
        }
    }

    @media (max-width: 359.98px) {
        .d-xs-none {
            display: none;
        }
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #input-newsletter {
        width: 386px;
        height: 55px;
        padding: 18px 19px 18px 19px;
    }

    #logoVushorus {
        width: 100px;
        padding-left: 0px;
    }

    #section1Footer {
        width: 50%;
    }

    #section2Footer {
        width: 50%;
        padding-left: 16px;
    }

    #section3Footer {
        width: 50%;
    }

    #section4Footer {
        padding-left: 16px;
    }

    #input-newsletter {
        width: 426px;
        height: 55px;
        padding: 18px 19px 18px 19px;
    }

    /********** TÍTULOS **********/
    h1, h1.h1, h1.top-tittle, h1.title, h1.title-max, h1.intitle {
        font-size: 30px;
        line-height: 35px;
    }
        h1.title-min {
            font-size: 29px;
            line-height: 31px;
        }
            h1.title-min::after {
                margin: 24px auto 24px -21.5px;
            }

    h2, h2.h2, h2.subtitle, h2.subtitle-min, h2.insubtitle {
        font-size: 29px;
        line-height: 35px;
    }

    h3, h3.h3, h3.unsubtitle, .h3.unsubtitle-min {
        font-size: 25px;
        line-height: 25px;
    }

    h4, h4.h4 {
        font-size: 20px;
        line-height: 20px;
    }

    .container {
        max-width: 100% !important;
    }

    .pc-78 {
        padding-top: 78px !important;
    }

    .navbar-nav,
    .nav-list {
        background-color: #fff;
        width: 100%;
        padding: .5rem 2rem .5rem 2rem;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        display: none;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
        padding-left: 27px !important;
    }

    .navbar .navbar-nav .nav-item .nav-link {
        margin: 15px 0px;
    }

    .navbar .navbar-brand {
        margin-left: 27px;
    }

    .navbar .navbar-nav .nav-item.sign-in {
        position: relative !important;
        right: auto !important;
        margin-right: auto;
    }

    .navbar-toggler {
        display: block;
        margin-right: 44px;
    }

    .navbar-toggler-icon {
        width: 28px !important;
        height: 17px !important;
    }

    #carouselExampleSlidesOnly .carousel-item .img {
        height: 300px;
    }

    #carouselExampleSlidesOnly.carousel slide,
    .carousel-inner.only {
        min-height: 209px !important;
        max-height: 209px !important;
        height: 209px !important;
    }

    .widget {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    footer .container {
        max-width: 100% !important;
        padding: 79px 69px 27px 69px;
    }

    .m-first {
        margin-bottom: 83.9px;
    }

    .mb-35 {
        margin-bottom: 35.9px;
    }

    .mt-79 {
        margin: 39px auto 21px auto;
    }

    .social-icon {
        height: 40px;
        max-height: 40px;
        width: 40px;
        max-width: 40px;
    }

    /********** SECTION 6 **********/

    .feature-events .tittle {
        font-size: 25px;
        top: calc(50% - 25px);
    }

    .feature-events img {
        height: 251px;
    }
}

@media (min-width:768px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    #logoVushorus {
        width: 100px;
        padding-left: 0px;
    }

    #section1Footer {
        width: 45%;
    }

    #section2Footer {
        width: 50%;
    }

    #section3Footer {
        width: 45%;
    }

    #section4Footer {
        height: 50%;
    }

    #input-newsletter {
        width: 426px;
        height: 55px;
        padding: 18px 19px 18px 19px;
    }

/********** TÍTULOS **********/
    h1, h1.h1, h1.top-tittle, h1.title, h1.title-max, h1.intitle {
        font-size: 32px;
        line-height: 35px;
    }
        h1.title-min {
            font-size: 32px;
            line-height: 34px;
        }
            h1.title-min::after {
                margin: 24px auto 24px -39px;
            }
    h2, h2.h2, h2.subtitle, h2.subtitle-min, h2.insubtitle {
        font-size: 32px;
        line-height: 35px;
    }

    h3, h3.h3, h3.unsubtitle, .h3.unsubtitle-min {
        font-size: 25px;
        line-height: 25px;
    }

    h4, h4.h4 {
        font-size: 20px;
        line-height: 20px;
    }

    .container {
        max-width: 100% !important;
    }

    .navbar-nav,
    .nav-list {
        background-color: #fff;
        width: 100%;
        padding: .5rem 2rem .5rem 2rem;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        display: none;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
    }

    .navbar .navbar-nav .nav-item .nav-link {
        margin: 15px 20px;
    }

    .navbar .navbar-brand {
        margin-left: 28.4px;
    }

    .navbar .navbar-nav .nav-item.sign-in {
        position: relative !important;
        right: auto !important;
        margin-right: auto;
    }

    .navbar-toggler {
        display: block !important;
        margin-right: 44px !important;
    }

    .navbar-toggler-icon {
        width: 28px !important;
        height: 17px !important;
    }

    .widget {
        width: auto !important;
        position: absolute !important;
        right: 2% !important;
        left: 2% !important;
    }

    footer .container {
        max-width: 100% !important;
        padding: 71px 110.2px 29px 166.2px;
    }

    .m-first {
        margin-bottom: 91.9px;
    }

    .mb-35 {
        margin-bottom: 35.9px;
    }

    .mt-79 {
        margin: 39px auto 21px auto;
    }

    .social-icon {
        height: 40px;
        max-height: 40px;
        width: 40px;
        max-width: 40px;
    }               
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    #logoVushorus {
        width: 100px;
        padding-left: 0px;
    }

    #section1Footer {
        width: 180px;
    }

    #section2Footer {
        width: 280px;
        padding-left: 9%;
    }

    #section3Footer {
        width: 22%;
        padding-left: 4.5%;
    }

    #section4Footer {
        width: 230px;
        padding-left: 5%;
    }

    #input-newsletter {
        width: 426px;
        height: 55px;
        padding: 18px 19px 18px 19px;
    }
   
    /********** TÍTULOS **********/
    h1, h1.h1, h1.top-tittle, h1.title,  h1.title-max, h1.intitle {
        font-size: 43px;
        line-height: 45px;
    }

        h1.title-min {
            font-size: 35px;
            line-height: 39px;
        }
            h1.title-min::after {
                margin: 24px auto 24px -40.5px;
            }

     h2, h2.h2, h2.subtitle, h2.subtitle-min, h2.insubtitle {
        font-size: 35px;
        line-height: 37px;
    }

    h3, h3.h3, h3.unsubtitle, .h3.unsubtitle-min {
        font-size: 35px;
        line-height: 35px;
    }

    h4, h4.h4 {
        font-size: 30px;
        line-height: 30px;
    }

    .top-tittle {
        margin: -150px auto 35px auto !important;
        text-align: center;
    }
               
    .container {
        max-width: 100% !important;
    }

    .navbar-nav,
    .nav-list {
        background-color: #fff;
        width: 100%;
        padding: .5rem 2rem .5rem 2rem;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        display: none;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
    }

    .navbar .navbar-nav .nav-item .nav-link {
        margin: 15px 30px;
    }

    .navbar .navbar-brand {
        margin-left: 39.3px;
    }

    .navbar .navbar-nav .nav-item.sign-in {
        position: relative !important;
        right: auto !important;
        margin-right: auto;
    }

    .navbar-toggler {
        display: block !important;
        margin-right: 44px;
    }

    .navbar-toggler-icon {
        width: 28px !important;
        height: 17px !important;
    }

    .widget {
        width: auto !important;
        position: absolute !important;
        right: 2% !important;
        left: 2% !important;
    }

    footer .container {
        max-width: 100% !important;
        padding: 59px 30px 25px 59.2px;
    }

    .m-first {
        margin-bottom: 75.2px;
    }

    .mt-79 {
        margin: 63px auto 21px auto;
    }

    .m-first {
        margin-bottom: 75.2px;
    }

    .mt-79 {
        margin: 63px auto 21px auto;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

    #logoVushorus{
        width:100px;
        padding-left:0px;
    }

    #navbarSupportedContent{
        padding-left:56.2px;
    }

    #section1Footer {
        width: 245px;
    }

    #section2Footer {
        width: 215px;
        margin-left: 0px;
    }

    #section3Footer {
        margin-left: 25px;
        width:210px;
    }


    #input-newsletter {
        width: 426px;
        height: 55px;
        padding: 18px 19px 18px 19px;
    }
   
    /********** TÍTULOS **********/
    h1, h1.h1, h1.top-tittle, h1.title, h1.title-max, h1.intitle {
        font-size: 45px;
        line-height: 45px;
    }
        
    h1.title-min {
            font-size: 40px;
            line-height: 42px;
        }

    h2, h2.h2, h2.subtitle, h2.subtitle-min, h2.insubtitle {
        font-size: 40px;
        line-height: 40px;
    }

    h3, h3.h3, h3.unsubtitle, .h3.unsubtitle-min {
        font-size: 35px;
        line-height: 35px;
    }

    h4, h4.h4 {
        font-size: 30px;
        line-height: 30px;
    }

    .navbar-nav {
        display: inline-flex !important;
    }

    .navbar .navbar-brand {
        margin-left: 49.5px;
    }

    .navbar .navbar-nav .nav-item.sign-in {
        padding: 0;
        margin-right: 30px;
    }

        .navbar .navbar-nav .nav-item.sign-in .nav-link {
            margin: auto;
        }

    .widget {
        width: auto !important;
        position: absolute !important;
        right: 2% !important;
        left: 2% !important;
    }

    footer .container {
        max-width: 100% !important;
        padding: 59px 96.2px 23px 96.2px;
    }

    .m-first {
        margin-bottom: 62.2px;
    }

    .mt-79 {
        margin: 76px auto 21px auto;
    }

    @media (max-width: 1260px){
        .container {
            max-width: 100% !important;
        }
    }
}

@media (min-width: 1400px) {
    #section2Footer {
        width: 215px;
        margin-left: 27px;
    }

    #section3Footer {
        margin-left: 27px;
    }

    #section5Footer {
        margin-left: 27px;
    }

    #input-newsletter {
        width: 349px;
        height: 55px;
        padding: 18px 19px 18px 19px;
    }

    .navbar-nav {
        display: inline-flex !important;
    }

    .navbar .navbar-nav .nav-item.sign-in {
        padding: 0;
        margin-right: 5px;
    }

        .navbar .navbar-nav .nav-item.sign-in .nav-link {
            margin: auto;
        }

      footer .container {
        padding: 152.8px 0 27px 0;
    }

    .mt-79 {
        margin: 79px auto 21px auto;
    }
}
