@media (min-width: 1200px){/*1200 en adelante*/
    /***************BODY**************/
    #buscador-btn:hover{
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
        cursor: pointer;
    }
    .seguros-sura-menu-col > ul > li:hover,
    .seguros-sura-menu-col-group-wrapper > ul > li:hover{
        cursor: pointer;
        opacity: 0.7;
        left: 10px;
    }
    #seguros-sura-menu{
        position: absolute;
    }
    .seguros-sura-menu-azul-wraper-active{
        position: relative;
        top: initial;
        left: initial;
        display: block;
    }
    
}

@media (min-width: 960px) and (max-width: 1199px){
    /***************BODY**************/
    .header-col-logo,.header-col-title,.header-col-widgets{
        width: 100%;
        padding: 0px 10px;
    }
    .nav-1-link{
        width: 100px;
        position: relative;
    }
    .seguros-sura-menu-azul-box{
        width: 100%;
        padding: 30px 10px;
    }
    #buscador-btn:hover{
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
        cursor: pointer;
    }
    #seguros-sura-menu{
        position: absolute;
    }
    .seguros-sura-menu-azul-wraper-active{
        position: relative;
        top: initial;
        left: initial;
        display: block;
    }
    .seguros-sura-menu-col > ul > li:hover,
    .seguros-sura-menu-col-group-wrapper > ul > li:hover{
        cursor: pointer;
        opacity: 0.7;
        left: 10px;
    }
    .nav-3-link:hover p{
        cursor: pointer;
        text-decoration: underline;
    }

    /**************FOOTER************/
    #footer-seguros-container{
        width: 960px;
    }
    .footer1,.footer2,.footer4{
        padding: 15px 10px;
    }
    .footer3{
        padding: 15px 5px;
    }
    .footer4{
        padding: 15px 5px;
    }

    .footer1-logoseguros{
        height: 60px;
    }
    /*.footer1-logosura{
        height: 40px;
    }*/
    .footer1 img{
        height: 40px; 
     }
}

@media (min-width: 768px) and (max-width: 959px){
    /***************BODY**************/
    .header-col-logo,.header-col-title,.header-col-widgets{
        width: 100%;
        padding: 0px 10px;
    }

    /****TAMAÑO DE FUENTE A HEDAER gris*****/
    .widgets-actual-text{
        padding: 0px 10px;
        font-size: 13px;
    }

    /******MAS PEQUEÑO COSAS DEL HEADER blanco******/
    .header-col-logo img{
        height: 32px;
    }
    .nav-1-link{
        width: 60px;
        position: relative;
        font-size: 13px;
        margin-right: 20px;
    }
    #nav-pais-select{
        margin-right: 20px;
    }
    .nav-pais-select-item > p,
    #nav-pais-selected > p{
        font-size: 13px;
    }
    .nav-pais-select-item > img,
    #nav-pais-selected > img{
        width: 16px;
        height: 16px;
    }
    #nav-pais-select-menu{
        width: calc(100% + 20px);
        width: -moz-calc(100% + 20px);
        min-width: 170px;
        padding: 10px 0px;
        top: -10px;
        left: -10px;
        border-radius: 10px;
    }
    #iniciar-sesion-cont{
        margin-right: 20px;
    }
    #iniciar-sesion-btn{
        width: 160px;
        height: 36px;
        border-radius: 20px;
    }
    #iniciar-sesion-btn span{
        font-size: 14px;
    }
    #buscador-btn:active{
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
        cursor: pointer;
    }

    /****TAMAÑO DE FUENTE A HEDAER azul*****/
    .header-col-title span{
        font-size: 18px;
        display: none;
    }
    .header-nav-2{
        width: 100%;
        justify-content: space-evenly;
    }
    .nav-2-link{
        font-size: 14px;
        margin-right: 0px;
    }
    .nav-3-link:active p{
        cursor: pointer;
        text-decoration: underline;
    }

    /*********MENU***********/
    #seguros-sura-menu{
        position: absolute;
    }
    .seguros-sura-menu-azul-wraper-active{
        position: relative;
        top: initial;
        left: initial;
        display: block;
    }
    .seguros-sura-menu-azul-box{
        width: 100%;
        padding: 30px 10px;
    }
    .seguros-sura-menu-col{
        width: 20%;
        width: calc(20% - 10px);
        width: -moz-calc(20% - 10px);
    }
    .seguros-sura-menu-col > ul > li,
    .seguros-sura-menu-col-group-wrapper > ul > li{
        font-size: 14px;
        padding-left: 0px;
        min-height: 18px;
        background: none !important;
        left: 0px;
        margin-bottom: 10px;
    }
    .seguros-sura-menu-col-group-wrapper > ul > li{
        margin-bottom: 5px;
        margin-top: 5px;
    }
    .seguros-sura-menu-col > ul > li:hover,
    .seguros-sura-menu-col-group-wrapper > ul > li:hover{
        cursor: pointer;
        opacity: 0.7;
        left: 5px;
    }

    /**************FOOTER************/
    #footer-seguros-container{
        width: 100%;
    }
    .footer1,.footer2,.footer4{
        padding: 15px 5px;
    }
    .footer3{
        padding: 15px 5px;
    }
    .footer3-col-collapsed{
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer4{
        padding: 15px 5px;
    }

    .footer1-logoseguros{
        height: 60px;
    }
    /*.footer1-logosura{
        height: 40px;
    }*/
    .footer1 img{
        height: 40px; 
     }
    
    .footer2-col{
        padding-right: 10px;
        width: auto;
        width: calc((100% - 100px) / 3);
        width: -moz-calc((100% - 100px) / 3);
    }
    .footer2 .footer2-col:first-child{
        width: 100px;
    }
    .footer2 .footer2-col:first-child img{
        height: 100%;
        width: 40px;
    }    

    .footer2-col > h6{
        font-size: 14px;
    }
    .footer2-col > ul > li{
        font-size: 14px;
    }

    .footer3-nav{
        font-size: 14px;
        margin: 0px 20px;
        margin-bottom: 10px;
    }
}

@media (max-width: 767px){
    /***************BODY**************/
    .header-col-logo,.header-col-title,.header-col-widgets{
        width: 100%;
        padding: 0px 10px;
    }
    .header-col-widgets{
        height: 0px;
    }
    .header-fix-box{
        height: 122px;
    }
    .header-new-home{
        height: 122px;
    }

    /****WIDGET RESPONSIVE****/
    .widgets-appearance{
        display: none;
    }
    .widgets-mobile{
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 220px;
        right: 0px;
        right: calc(0px - (160px - 35px));
        right: -moz-calc(0px - (160px - 35px));
        
        width: auto;
        height: auto;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        background-color: #53565A;
        z-index: 4000;
        border-radius: 10px 0px 0px 10px;
        cursor: pointer;

        transition: right 0.2s;
        -webkit-transition: right 0.2s;
    }
        
    .widget-mobile-appearance,
    .widget-mobile-font-plus,
    .widget-mobile-font-minus,
    .widget-mobile-language,
    .widget-mobile-senas
    {
        position: relative;
        display: flex;
        width: 160px;
        height: 26px;
        margin: 15px 0px;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
    }

    .widget-mobile-language::after{
        position: absolute;
        content: "";
        height: 1px;
        background-color: #FFFFFF;
        top: 100%;
        top: calc(100% + 9.5px);
        top: -moz-calc(100% + 9.5px);
        left: 4.5px;
        width: 26px;

        transition: width 0.2s;
        -webkit-transition: width 0.2s;
    }
    
    .widgets-mobile:hover{
        right: 0px;
    }
    .widgets-mobile:hover > div::after{
        width: 100%;
        width: calc(100% - 9px);
        width: -moz-calc(100% - 9px);
    }
    
    .widget-mobile-appearance-btn{
        position: relative;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: #FFFFFF;
        margin: 0px 4.5px;
        padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: inherit;
    }
    .widget-mobile-appearance-btn div{
        position: relative;
        width: 22px;
        height: 22px;
        margin: 0px;
        padding: 0px;
        border-radius: 50%;
        background-color: #53565A;
    }
    .widget-mobile-appearance-btn div::after{
        position: absolute;
        content: "";
        width: 50%;
        width: calc(50% - 3px);
        width: -moz-calc(50% - 3px);
        height: 15px;
        margin: 0px;
        padding: 0px;
        top: 50%;
        top: calc(50% - (15px / 2));
        top: -moz-calc(50% - (15px / 2));
        box-sizing: border-box;
        background-color: #FFFFFF;

        transition: border-radius 0.2s, left 0.2s;
        -webkit-transition: border-radius 0.2s, left 0.2s;
    }
    .widget-mobile-appearance-btn-actived div::after{
        left: 3px;
        border-radius: 50% 0px 0px 50%;
    }
    .widget-mobile-appearance-btn-desactived div::after{
        left: 50%;
        border-radius: 0px 50% 50% 0px;
    }
    .widget-mobile-font-plus-btn,
    .widget-mobile-font-minus-btn,
    .widget-mobile-language-btn,
    .widget-mobile-senas-btn{
        position: relative;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: #FFFFFF;
        margin: 0px 4.5px;
        padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: inherit;

        font-family: 'Barlow-Bold';
        font-size: 15px;
        color: #53565A;
        text-align: center;
        font-weight: normal;
        line-height: normal;
    }
    .widget-mobile-font-plus-btn i,
    .widget-mobile-font-minus-btn i{
        font-size: 9px;
        padding: 0px;
    }
    .widget-mobile-senas-btn i{
        font-size: 17px;
        padding: 0px;
    }
    .widget-mobile-text{
        display: flex;
        margin: 0px;
        padding: 0px 10px;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        width: calc(100% - 35px);
        width: -moz-calc(100% - 35px);
        height: auto;

        font-family: 'Barlow-Medium';
        font-size: 15px;
        color: #FFFFFF;
        text-align: left;
        font-weight: normal;
        line-height: normal;
        box-sizing: border-box;
    }
    .widget-mobile-text a{
        color: inherit !important;
        font-family: inherit !important;
        text-decoration: none !important;
    }

    /****TAMAÑO DE FUENTE A HEDAER gris*****/
    .widgets-actual-text{
        padding: 0px 10px;
        font-size: 13px;
    }

    /******MAS PEQUEÑO COSAS DEL HEADER blanco******/
    /******ocultar botones del header blanco********/
    .header-col-logo img{
        height: 32px;
    }
    .nav-1-link,#nav-pais-select,#iniciar-sesion-cont{
        display: none !important;
    }
    #nav-pais-select-menu,#iniciar-sesion-options{
        display: none !important;
    }
    #menu-hamburguesa{
        display: flex !important;
    }
    #buscador-btn:active{
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
        cursor: pointer;
    }

    /****QUITAR BOTONES DEL HEADER azul*****/
    .header-nav-2{
        display: none !important;
    }
    .header-col-title span{
        font-size: 16px;
    }

    /*********MENU***********/
    #seguros-sura-menu{
        box-shadow: 0px 3px 4px 1px rgba(0,0,0,0.2);
    }
    .seguros-sura-menu-on,.buscador-container-on{
        position: absolute;
    }
    .seguros-sura-menu-off,.buscador-container-off{
        position: absolute;
    }
    .seguros-sura-menu-blanco{
        display: block;
        margin-bottom: 25px;
    }
    .seguros-sura-menu-blanco::after{
        content: "";
        position: absolute;
        width: 100%;
        width: calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        height: 1.5px;
        background-color: #ECF0F1;
        margin: 0px;
        padding: 0px;
        top: 100%;
        top: calc(100% + 12.5px);
        top: -moz-calc(100% + 12.5px);
        left: 10px;
    }
    
    .seguros-sura-menu-azul{
        padding: 0px 10px;
    }
    .seguros-sura-menu-azul-box{
        padding: 0px;
        padding-left: 10px;
        width: 100%;
        display: block !important;
    }
    .seguros-sura-menu-azul-title{
        display: flex;
    }
    .seguros-sura-menu-azul-wraper{
        display: block !important;
        position: relative !important;
    }
    .seguros-sura-menu-azul-wraper-collapsed{
        max-height: 38px;
    }
    .seguros-sura-menu-azul-wraper-expanded{
        max-height: 600px;
    }
    .seguros-sura-menu-col{
        width: 100%;
        overflow: hidden;

        transition: max-height 0.3s;
        -webkit-transition: max-height 0.3s;
    }
    .seguros-sura-menu-col h5{
        color: #53565A;
        padding: 0px 0px;
        height: 38px;
        margin: 0px;
        display: flex;
        align-items: center;
        border-bottom: none;
        padding-right: 22px;
        cursor: pointer;
    }
    .seguros-sura-menu-col h5::after,.footer2-col > h6::after,.footer3-title::after{
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        display: none;
        
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    
        top: 50%;
        top: calc(50% - 6px);
        top: -moz-calc(50% - 6px);
        right: 5px;
        transition: transform 0.2s, -webkit-transform 0.2s, -o-transform 0.2s;
        -webkit-transition: transform 0.2s, -webkit-transform 0.2s, -o-transform 0.2s;
    }
    .seguros-sura-menu-col > ul,
    .seguros-sura-menu-col-group-wrapper > ul{
        padding-left: 10px;
    }
    .seguros-sura-menu-col > ul > li,
    .seguros-sura-menu-col-group-wrapper > ul > li{
        font-size: 15px;
        padding: 10px 0px;
        min-height: initial;
        background-image: none;
        margin: 0px;
        cursor: pointer;
    }
    .seguros-sura-menu-col-group h6{
        justify-content: flex-start;
    }

    .seguros-sura-menu-col-collapsed{
        max-height: 38px;
    }
    .seguros-sura-menu-col-collapsed h5::after,.footer2-col-collapsed > h6::after,.footer3-col-collapsed .footer3-title::after{
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        display: block;
    }
    
    .seguros-sura-menu-col-expanded{
        max-height: 400px;
    }
    .seguros-sura-menu-col-expanded h5::after,.footer2-col-expanded > h6::after,.footer3-col-expanded .footer3-title::after{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        display: block;
    }

    /********menu amarillo iniciar sesion*******/
    .seguros-sura-menu-amarillo{
        display: block;
        margin-top: 25px;
    }
    .seguros-sura-menu-amarillo::after{
        content: "";
        position: absolute;
        width: 100%;
        width: calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        height: 1.5px;
        background-color: #ECF0F1;
        margin: 0px;
        padding: 0px;
        top: 0px;
        top: calc(0px - 12.5px);
        top: -moz-calc(0px - 12.5px);
        left: 10px;
    }

    /*********BUSCADOR*********/
    .buscador-container-form{
        width: 100%;
        width: calc(100% - 30px);
        width: -moz-calc(100% - 30px);
        height: 32px;
    }
    .buscador-container-input{
        width: 100%;
        width: calc(100% - (20px + 32px));
        width: -moz-calc(100% - (20px + 32px));
        margin-right: 20px;
    }
    .buscador-container-btn{
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    /**************FOOTER************/
    #footer-seguros-container{
        width: 100%;
    }
    .footer1,.footer2,.footer4{
        padding: 15px 20px;
    }
    
    .footer4{
        padding: 15px 5px;
    }

    .footer1-logoseguros{
        height: 60px;
    }
    /*.footer1-logosura{
        height: 40px;
    }*/
    .footer1 img{
        height: 40px; 
     }

    .footer2{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .footer2-col{
        width: 100%;
        padding: 0px;
        overflow: hidden;
        display: block;

        transition: max-height 0.2s;
        -webkit-transition: max-height 0.2s;
    }
    .footer2-col-expanded{
        max-height: 300px;
    }
    .footer2-col-collapsed{
        max-height: 30px;
    }
    .footer2-col > h6{
        width: 100%;
        font-size: 14px;
        margin: 0px;
        height: 30px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .footer2-col > ul{
        display: block;
        width: 100%;
        height: auto;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .footer2-col > ul > li{
        font-size: 14px;
        margin: 0px;
        padding: 5px 0px;
    }
    .footer2 .footer2-col:first-child{
        display: none;
    }

    .footer2-1{
        display: block;
        position: relative;
        margin: 0px;
        padding: 0px 15px;
        box-sizing: border-box;
        width: 100%;
        height: auto;
    }
    .footer2-1 img{
        display: block;
        height: 50px;
        width: auto;
        margin: 0px;
    }

    .footer3{
        padding: 15px 20px;
    }
    
    .footer3-col-collapsed{
        max-height: 30px;
        display: block;
    }
    .footer3-col-expanded{
        max-height: 300px;
        display: block;
    }
    .footer3-title{
        display: flex;
    }
    .footer3-nav{
        font-size: 14px;
        margin: 0px 0px;
        padding: 5px 10px;
    }

    .footer4{
        padding: 15px 20px;
    }
    .footer5{
        display: none;
    }
    .footer-redes p{
        margin-left: 10px !important;
    }

}

@media (max-width: 519px){
    /***************BODY**************/
    /****WIDGET RESPONSIVE****/
    .widgets-appearance{
        display: none;
    }
    .widgets-mobile{
        right: 0px;
        right: calc(0px - (150px - 30px));
        right: -moz-calc(0px - (150px - 30px));
    }
    .widget-mobile-appearance-btn div{
        width: 21px;
        height: 21px;
    }
        
    .widget-mobile-appearance,
    .widget-mobile-font-plus,
    .widget-mobile-font-minus,
    .widget-mobile-language,
    .widget-mobile-senas
    {
        width: 150px;
        height: 25px;
    }
    .widget-mobile-appearance,
    .widget-mobile-language{
        margin: 10px 0px;
    }
    .widget-mobile-font-plus,
    .widget-mobile-font-minus{
        margin: 5px 0px;
    }

    .widget-mobile-appearance::after,
    .widget-mobile-language::after{
        left: 2.5px;
        width: 25px;
    }
    
    .widget-mobile-appearance-btn{
        width: 25px;
        height: 25px;
        margin: 0px 2.5px;
    }
    
    .widget-mobile-font-plus-btn,
    .widget-mobile-font-minus-btn,
    .widget-mobile-language-btn,
    .widget-mobile-senas-btn{
        width: 25px;
        height: 25px;
        margin: 0px 2.5px;
        font-size: 14px;
    }
    .widget-mobile-font-plus-btn i,
    .widget-mobile-font-minus-btn i{
        font-size: 8px;
        padding: 0px;
    }
    .widget-mobile-senas-btn i{
        font-size: 17px;
        padding: 0px;
    }
    .widget-mobile-text{
        padding: 0px 5px;
        width: auto;
        width: calc(100% - 30px);
        width: -moz-calc(100% - 30px);
        font-size: 14px;
    }
    
    .header-fix-box{
        height: 0px;
        display: none;
    }
    .header-new-home{
        position: relative;
        height: auto;
        z-index: initial;
        top: initial;
        left: initial;
        box-shadow: none;
    }
    .header-col-widgets{
        height: 0px;
    }
    .header-col-logo{
        height: 50px;
    }
    #buscador-btn{
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    #menu-hamburguesa{
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .header-col-title{
        height: 40px;
    }

    .footer1-logoseguros{
        height: 50px;
    }

    .footer4{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-start;
    }
    .footer5{
        display: none;
    }
    .footer-redes{
        flex-wrap: wrap;
        width: 100%;
    }
    .footer-redes p{
        display: flex !important;
        width: 25%;
        margin: 0px !important;
        margin-bottom: 20px !important;
        align-items: center;
        justify-content: center;
    }
}

/******IMAGES****/
@media (max-width: 767px){
    .seguros-sura-menu-col h5::after,.footer2-col > h6::after,.footer3-title::after{
        background-image: url(menu-expand-icon-2.svg);
        /*background-image: url(../img/menu-expand-icon-2.svg);*/
    }
    
    .nav-3-link{
        background-image: url(menu-expand-icon-1.svg);
        /*background-image: url(../img/menu-expand-icon-1.svg);*/
    }
}