@import url('https://fonts.googleapis.com/css?family=Catamaran:400,500,600,800|Heebo|Open+Sans:400,600,600i,700,800|Red+Hat+Text:400,500,500i,700&display=swap');

*{
    box-sizing: border-box;
}

body {
     font-family: 'Red Hat Text', sans-serif;
    margin: 0;
}

/* ------------------------ESTILOS BASE-----------------------*/


h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.banner__img{
    display: block;
    width: 100%;
    max-width: 100%;
}

.slider__img{
    display: block;
    width: 100%;
    max-width: 100%;
}

.container {
    width: 100%;
    margin: auto;
}

.container--flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.column {
    width: 100%;
}

/*--------------------------- ESTILOS DEL HEADER ------------------*/
    
.main-header {
    width: 100%;
    background-color: #1a1e24;
 
}

  .logoheader{
        height: 35px;
        padding-left: 10px;
        
    } 

.main-header__contactInfo__phone {
    background: #33A4D9;
    color: white;
    margin: 0 auto;
    padding: 10px;
    margin-top: 10px;
}
    
.main-header [class*="icon-"]:before {
    position: relative;
    top: 2px;
    right: 5px;
}

/*----------------------------- ESTILOS DEL MENU --------------------*/
        
.main-nav {
    width: 100%;
    position:relative;
    z-index: 2000;
    padding: 10px;
    
}

.icon-menu {
    display: block;
    color: white; 
    border:1px solid white;
    border-radius: 3px;
    width: 40px;
    height: 40px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    font-size: 1.5em;
    
}

.social-icon {
    display: flex;
    justify-content: space-between;
}

.social-icon [class*="icon-"] {
    color:black;
    margin-left: 10px;
    display: flex;
    justify-content: center; 
    align-items: center;
    font-size: 1.3em;
    width: 35px;
    height:35px;
    background: white;
    border-radius: 50%;
}

.social-icon-contact {
    display: flex;
    justify-content: space-between;
}

.social-icon-contact [class*="icon-"] {
    color:black;
    margin-left: 10px;
    display: flex;
    justify-content: center; 
    align-items: center;
    font-size: 1.3em;
    width: 35px;
    height:35px;
    background: white;
    border-radius: 50%;
}

.social-icon__link {
    text-decoration: none;
}

.menu { 
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    background:  rgba(0,0,0,.85);
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    height: 0;
    overflow: hidden;
    transition: height .5s linear; /* INDICA EL TEMPO DE LA ANIMACION*/
}

.menu__link {
    display: block;
    padding: 15px;
    color: white;
    text-decoration: none;
}
.menu__link:hover{
    background:#33A4D9; 
}
.menu__link--select {
    background:#33A4D9; 
    
}
.mostrar {
    height: 204px; /*este número cambia la altura del menú, si hay más opciones aumentar el número*/
 }


/*--------------------------------------- ESTILO DEL BANNER -+------------------------------*/

.banner {
    margin-top:-60px;
    position: relative;
}

.banner:before {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.70);
    z-index:1000;
    top:0;
}

.banner__img {
    width: 100%;
    height: 360px;/* height y object ajustan la imagen a la medida*/
    object-fit:cover; 
}

.banner__content {
    width: 90%;
    color:white;
    text-align: center;
    position: absolute;
    z-index: 1500;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-45%);
    font-size: 1.6em;
    font-weight:bold;
}

/*------------------------------ ESTILOS PRINCIPALES----------------------------------------*/

.group--color .container { 
    background: #289CD7;
    color: white;
    padding: 4px;
    text-align: center;
    
}

.group--color_btnline {
    background:#e1e1e1 ;
    color: gray
}

.group--color_btn {
    background: #e1e1e1;
}

.main__title{
    padding-top: 20px;
    margin: 0;
    font-size: 1.8em;
    width: bold;
    color: darkslateblue;
}

.main__txt {
    font-size: 1.4em;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 25px;
}

.group__title {
    
    
    padding-top: 20px;
    padding-bottom: 20px;
}

.group__title_contact {
        
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

.today-special__img {
    width:60%;
}

.today-special__title {
    font-size: 1.3em;
    padding-bottom: 20px;
}

.today-special {
    text-align: center;
}

.btn {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 200px; 
    background: #232D47;
    color: white;
    padding: 10px;
    margin: auto;
    margin-bottom: 20px;
}


.btn_back {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 200px; 
    background: #232D47;
    color: white;
    padding: 10px;
    margin: auto;
    margin-bottom: 20px;
}

.container_btn{
    padding-top: 25px;
    padding-bottom: 5px;
    background: #B1B1B1;
        
}


.container_btn2{
    padding-top: 25px;
    padding-bottom: 5px;
    background: #CCCCCC;
    
    
}

.main-contact [class*="icon-"]:before {
    color:black;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 0.8em;
    
}
.main__column__txt {
    color:black;
}

.main__column__txt__contact {
    color:black;
    padding-left: 20px;
}

.group--enviar {
    text-align: center;
}

.formulario {
    padding: 10px;
    margin-top:0px;
    
}

.formulario__label, .formulario__input-txt, .formulario__textarea {
    display:block;
    width: 100%;
}

.formulario__input-txt {
    padding: 10px;
    margin-bottom: 10px;
    
}

.contact--information .social-icon {
    justify-content: flex-start;
    margin-bottom: 10px;
    
}

.contact--information .social-icon [class*="icon-"] {
    background: #1a1e24;
    color:white;
    margin-left: 0;
    margin-right: 5px;
    
}

.social-icon-contact {
    justify-content: flex-start;
    margin-bottom: 10px;
    padding-left: 20px;
    
}

.social-icon-contact [class*="icon-"] {
    background: #1a1e24;
    color:white;
    margin-left: 0;
    margin-right: 5px;
    
}


.column__txt_extra {
    padding-right: 40px;
    text-align: left;
    
}

.column__txt_pro {
    margin: 5px;
    
}

.column__txt_pro_title {
    margin: 5px;
    text-align: left;
}

.product__img {
    object-position: center;
    display: block;
    width: 60%;
    max-height: 400px;
    object-fit:contain;
    padding-bottom: 20px;
}

.product__img2 {
    object-position: center;
    display: block;
    width: 60%;
    max-height: 400px;
    object-fit:contain;
    padding-bottom: 0px;
}







/*------------------------------ ESTILOS DEL FOOTER----------------------------------------*/


.main-footer {
    background: #1a1e24;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 0.8em;
}

.main-footer [class*="icon-"] {
    color:#E1E1E1;
        text-decoration: none;
    
}

.copy {
    
    margin: auto;
    margin-top: 15px;
}

.copyright {
    
    margin: auto;
    margin-top: 15px;
    color:slategray
}

.main-footer [class*="icon-"]:before {
    position: relative;
    top:1px;
    right: 5px;
}

.column__title {
    color:gray;
    font-weight: 250;
}

.column__txt {
    text-align: left;
}




/*------------------------------ ESTILOS RESPONSIVE----------------------------------------*/

@media screen and (min-width:370px) {
    
.logoheader{
        height: 25px;
        padding-left: 10px;
    }     
    
.main-header__contactInfo {
        text-align: right;
    }
.main-header__contactInfo__phone {
        background: none;
    }

.main-nav {
        background: rgba(0,0,0,0.85)
    }
.banner {
        padding: 0;
        border:0;
        margin-top:-90px;
        z-index: -1000;
    }
.banner__img{
        height: 350px; /* indica el alto de la imagen del banner, se ajusta la altura*/
    }
.banner__content{
        padding-top: 50px; /* este número ajusta la posición del slogan en el banner content*/
        font-size: 2.1em;
    }
.main__txt {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 1.1em;
    }
    
.group__title{
        font-size: 1.3em;
        padding-top: 20px;
        padding-bottom: 20px;
        color: midnightblue
    }

.group__title_product{
        font-size: 1.3em;
        padding-top: 20px;
        padding: 20px;
        padding-bottom: 20px;
        color: midnightblue
    }
    
.today-special {
        padding-bottom: 10px;
    }

.today-special__img{
        width: 80%; 
        object-fit: cover; /* ajusta las imagenes con la propiedad object fit*/
    }
    
.today-special__title {
        font-size: 0.8em;
    }
    
.main-footer .container--flex{
        align-items: flex-start;
    }
.column__txt {
    font-size: 1em;
    text-align: center;
    }
    
.column__txt_pro {
        font-size: 0.9em;
        text-align: left;
        padding-right: 16px;
                
    }
    
.formulario {
        padding-bottom: 10px;
    }
    
.enviar__title{
        padding-top: 30px;
        padding-bottom: 10px;
    }
    
.enviar__txt2 {
        padding-top: 10px;
        padding-bottom: 20px;
    }
.enviar__txt3 {
        padding-bottom: 30px;
    }
    
.column--100 {
        width: 100%; /*ajusta la separación entre columnas.. puedes probar con 45%*/
        text-align: center;
    }
        
.column--50 {
        width: 50%; /*ajusta la separación entre columnas.. puedes probar con 45%*/
    }
.column--50-25 {
        width: 49%;
    }
    
.column--50-25pro {
        width: 50%;
    }
    
.column--33 {
        width: 33%;
        text-align: center;
    }

.contact--information p {
        font-size: 1em;
    }

.contact .container--flex {
        align-items: flex-start;
    }
    
.product__img2 {
    object-position: center;
    display: block;
    width: 80%;
    
    }
    

    

}



@media screen and (min-width:768px) {
    
    .logoheader{
        height: 35px;
        padding-left: 10px;
    } 
    
    .banner__img{
        height: 450px; /* indica el alto de la imagen del banner, se ajusta la altura*/
    }
    .banner__content{
        padding-top: 20px; /* este número ajusta la posición del slogan en el banner content*/
        font-size: 2.8em;
    }
        
    .today-special {
        padding-bottom:0px;
        
    }
    
    .today-special__img{
        width: 75%; 
        object-fit: cover; /* ajusta las imagenes con la propiedad object fit*/
        
    }
    
    .today-special__title {
        font-size: 1em;
        
            
    }
    
    
    .formulario__textarea{
        width:  100%;
    }
    
    
    
    .column--50-25 {
        width: 33%;
    }
    
    .column--50-25pro {
        width: 49%;
    }
    
    .column__title{
        font-size: 1.5em;
    }
    .group__title {
        font-size: 1.5em;
        padding-bottom: 25px;
    
    }.column--50-33 {
        width: 33%;
        text-align: center;
    }
    
    .column--50--50{
        width: 50%;
        padding-left: 0px
    }
    
    .product__img {
    object-position: center;
    display: block;
    width: 60%;
    }
    
    .product__img2 {
    object-position: center;
    display: block;
    width: 60%;
    }
    
}


@media screen and (min-width:1024px) {
    .container {
        width: 950px;
    }
    
     .logoheader{
        height: 45px;
        padding-left: 0px;
    } 
    .main-header__contactInfo__phone,
    .main-header__contactInfo__adddress {
        padding-right: 0px;
        font-size: 1.15em;
    }
     
    .banner {
    margin-top:-450px;
    position: relative;
}
    .banner__img {
    width: 100%;
    height: 850px;/* height y object ajustan la imagen a la medida*/
    object-fit:cover; 
}
    
    .banner__content {
        top:72%;
        left:50%;
        transform: translateX(-50%) translateY(-45%);
        font-size: 3em;
        font-weight:bold;
    }
    
    
    .icon-menu {
        display: none;
    }
    
    .menu {
        position:static;
        display: flex;
        height: auto;
        width: auto;
        
    }
    .menu__link {
        padding: 20px;
    }
    
    .main {
        background: #e1e1e1;
    }
    
    .main__txt {
        font-size: 1.5em;
        padding-top: 20px;
        padding-bottom: 25px;
            
    }
    
    .main__slider{
        background:#e1e1e1;
    }
    
    .slider__img{
        padding: 0px;
        border:1px black;
    }
    
    .main__title {
    font-size: 2.5em;
    }
    
    .group__title {
        max-width:1000px;
        background: white;
        padding-top: 30px;
        padding-bottom: 30px;
        
    }   
    
    .today-special__img{
        width: 75%; 
        object-fit: cover; /* ajusta las imagenes con la propiedad object fit*/
        
    }
    .today-special__title {
        font-size: 1.1em;
    }
    
    .btn--contact {
        margin-bottom: 30px;
    }
    
    .main-footer {
        font-size: 1em;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .column--50-33 {
        width: 33%;
    }
    
    .column--50-25 {
        width: 25%;
    }
    
    .column--50-25pro {
        width: 49%;
    }
    
    .product__img {
    object-position: center;
    display: block;
    width: 60%;
}
    
    .product__img2 {
    object-position: center;
    display: block;
    width: 60%;
    }
    
    .container-today-special{
        background:white;
    }
    
    
}