@import url('https://fonts.googleapis.com/css?family=Fira+Sans:500i,600');
body{
    overflow-x: hidden;
    font-family: 'Fira Sans', sans-serif;
    font-style: italic;
}

	:root{
    --TamanoTitulo: 23px;
    /*  --extra-bold: 800; */
    --textoNormal:700px;
    --tamanotexto: 18px;

    --fondoAmarillo: #f9c347;
    --fondoGris: #EDEDED;
    --letraBlanca: #ffffff;

    --primeraLegra:FiraSans-SemiBoldItalic;
    --segundaLetra: bitter-italic;

}

button.mgbtn{
    background-color: var(--fondoAmarillo);
    color: #fff;
}

.btn-mas{
	color: #fff;
	background-color: var(--fondoAmarillo);
	padding: 10px;
	border-radius: 5px;
	transition: .5s;
}

.btn-mas:hover{
	background-color: #404040;
	color: #fff;
	text-decoration: none;
}



.otro1{
    display: flex !important;
}

#logoMG{

    width: 100px;
    z-index: 2;
    position: absolute;
    left: 80px;
    margin-top: 50px;

}

.textoGrande{
    font-family: var(--TamanoTitulo);
}



#franjas{
    width: 100%;
    margin-top: -440px;
    z-index: 2;
    position: relative;
}

.divTextoCone{
    width: 550px;
    line-height: 50px;
    position: relative;
    z-index: 3;
}

#con-g{
    width: 100%;
    height: 10px;
    background-color: #fff;
}

.fondoAmarillo{
    background-color: var(--fondoAmarillo);
    min-height: 300px;
}


#cont-img{
    margin-top: auto;
    margin-bottom: auto;
    text-align: center
}

.cimg{
    width: 230px;
    height: 230px;
}

#img1{
    width: 230px;
    height: 230px;
}

#img2{
    width: 230px;
    height: 230px;
    margin-left: 30px;

}

#cont-txt{
    margin-top: auto;
    margin-bottom: auto;
    text-align: left;
    color: var(--letraBlanca);
}

#cont-txt2{
    font-weight: 600;
    
    font-size: 19px;
    margin-bottom: -1px;
    letter-spacing: 1px
}

.txt-Segunda{
    font-family: var(--segundaLetra);
}

.mayu{
    font-size: 14px ;
}
.min{
    font-size: 11px;
}

.sec-2{
    margin-bottom: 80px;
    position: static;
}

.sec-3{
    background-color: var(--fondoGris);
    height: auto;
    width: 100%;
    padding-bottom:  60px;
    margin-bottom: 60px;
    text-align: center;
}

#txtProductos{
    display: inline-flex;
    background-color: #EDEDED;
    align-content: center;
    margin-top: 60px

}

#txtProductos > p{
    font-weight: 500;
    font-size: 20px;
    color: #777777;
}

.prod{
    background-color: #777777;
    width: 5vw;
    height: 1px;
    margin: 20px;

}

#cnecMesa{
    z-index: 2;
    position: absolute;
    right: 100px;
    margin-top: -370px;


}

#txtslogan{
    font-weight: 600;
    color: var(--fondoAmarillo);
    font-size: 50px;
    z-index: 1;
    margin: 0px 60px 70px;
    margin-top: -120px;
}

.boton-inferior{
    background: #0000FF; 
    padding: 10px; 
    background-color: var(--fondoAmarillo);
    font-weight: 500;
    color: #fff;
    border-radius: 15px;
    transition: all 0.7s ease;
    cursor: hand!important;
}

.boton-inferior:hover{

    background-color: black;
    color: var(--fondoAmarillo);
    transition: all 0.7s ease;
}

.pie{

    width: 100%;
    background-color: #404040;
    padding-top: 20px;
}

.numeros{
	color: #fff;
}


.otro1 > img {
    margin-top: 3px;
    margin-bottom: -px;
}
#foot{

    background-color: var(--letraBlanca);
    width: 40px;
    height: 1px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    float: left;
    margin-top: 0;

}

.form-inline input{width: 100%!important;}



button{
    border: none;
    background-color: rgba(240, 248, 255, 0);
}

.logos{
    width: 15px;
    height: 15px;
}

.logosw{
    width: 15px;
    height: 15px;
    margin-top: -3px;
}


.LogoEfecto{
    cursor: pointer;
}

#contacto{
    color: white;
}
 #last-btn{
    margin-bottom: 15px;

 }

#foot-correo{
    font-size: 18px;
}

#visitanos{
    font-size: 16px;
    margin-top: -15px;
}



/*  --- --- --- --- --- ---  slider Swiper  --- --- --- --- --- --- */

#slider {
    width: auto;
    max-width: 100%;
    height: 100vw;
    max-height: 900px;
    z-index: 1;
    position: relative;
}

#slider .swiper-container {
    width: 100%;
    height: 100%;
}

#slider .swiper-slide {
    position: relative;
    background: #fff;
    background-position: center;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-box-align: center;
    align-items: center;
}

#slider .swiper-slide img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}


.swiper-button-next, .swiper-button-prev {
    z-index: 9999999999;
    position: relative;
    margin-top: -200px!important;

}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(../img/derecha.png)!important;
    right: 50px!important;
    left: auto;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url(../img/izquierda.png)!important;
    left: 50px!important;
    right: auto;
}

/* --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* Carrucel */


.carousel-wrap {
    margin: 30px auto;
    margin-bottom: 15px;
    margin-top: auto;
    padding: 0 5%;
    width: 95%;
    position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
    width: 100%;
    z-index: 100; 
    -webkit-backface-visibility: hidden; 
}

/* end fix */
.owl-nav > div {

    position: absolute;
    top: 50%;
    color: rgba(205, 203, 205, 0);
}

.owl-nav i {
    font-size: 100px;
}

.owl-nav .owl-prev {
    left: -30px;
}

.owl-nav .owl-next {
    right: -30px;
}


.fc1{
    padding: 0 5px 0 0!important;
}

.fc2{
    padding: 0 0 0 5px!important;
}
footer a:hover span, footer a:hover {
    color: var(--fondoAmarillo);
}


/* --------------- Responsive ------------------ */
@media all and (min-width:1799px) and (max-width: 2560px){

    #cnecMesa{
        width: 430px;
        margin-top: -590px;
    }

    .divTextoCone{
        width: 600px;
    }

    #txtslogan{
        font-size: 80px;
        margin: -220px 0px 140px 200px;
        width: 100%;
        line-height: 84px;
        padding-left: 100px;
    }
    .otro1 > img {
        margin-top: -10px;
        margin-left: 1px;
    }   



}


@media all and (min-width:1439px) and (max-width: 1800px){
    #cnecMesa{
        width: 350px;
        margin-top: -510px;
    }

    #franjas{
        width: 100%;
        margin-top: -404px;
    }

    #txtslogan{
        font-size:80px; 
        margin: -180px 0px 150px 170px;
        width: 100%;
        line-height: 74px;
    }

    .otro1 > img {
        margin-top: -10px;
        margin-left: 1px;
    }
    
    .m-a{margin-right: 35px;}


}

@media all and (min-width:1025px) and (max-width: 1440px){

    #cnecMesa{
        width: 230px;
        margin-top: -360px;
    }

    #franjas{
        width: 100%;
        margin-top: -460px;
    }

    #txtslogan{
        font-size: 80px;
        margin: -120px 0px 120px 120px;
        width: 100%;
        line-height: 74px;
    }   

    #cont-txt2{
        font-size: 25px;
    }

    .boton-inferior{
        margin-bottom: 10px;
    }
   
    #visitanos{
        margin-top: -10px;
    }

    .logos{
        margin-bottom: -10px;
    }
    
    .m-a{margin-right: 35px;}


}

@media all and (min-width:768px) AND (max-width: 1024px) {


    #franjas{
        margin-top: -400px;
    }


    #cnecMesa{

        margin-left: 572px;
        margin-top: -390px;    
        width: 240px;
    }

    #txtslogan{
        font-size: 50px;
        margin-left: 80px;
        margin-bottom: 80px;
    }
    #img1{
        margin-left: 370px;
        margin-top: 60px;
        width: 200px;
        height: 200px;
    }

    #img2{
        margin-right: 0px; 
        margin-left: 0px;
        margin-top:-312px;
        margin-bottom:-90px;
        width: 200px;
        height: 200px;
    }

    #cont-txt2{
        font-size: 19px;
        margin-bottom: 20px;
        margin-top: -5px;
        margin-right: 0px;
    }

    #cont-txt{
        margin-right: 10px;
        margin-left: 360px;  
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .txt-Segunda{
        display: none;
    }
    .numeros{
        margin-left: 0px;
    }

   .otro1 > img {
    margin-top: -10px;
    margin-left: 1px;
    }

    #visitanos{
        margin-right: 2px;
    }

}


@media all and (min-width:575px) and (max-width: 767px) {

    #logoMG{
        max-width: 70px;

    }


    #cnecMesa {
        margin-left: 450px;
        margin-top: -278px;
        width: 170px;
    }


    #txtslogan{
        font-size: 40px;
        padding: 60px 0px 0px 0px;
    }

    #franjas{
        width: 100%;
        margin-bottom: -150px;
    }

    #txtslogan{
        margin-top: -160px;
        margin-bottom: 90px;
    }

    #correo{
        color: var(--letraBlanca);
        margin-top: 40px;
    }

     .logos{
        margin-top: -15px;
    }


    /*
    .fondoAmarillo{
    margin-top: -60px;

}
    */
    #cont-img{
        text-align: center;

    }

    #img1{
        width: 150px;
        height: 150px;
        margin-left: 310px;
        margin-top: 20px;

    }

    #img2{
        width: 150px;
        height: 150px;
        margin-top: -175px;
        margin-left: 130px;
    }



    #cont-txt2{
        text-align: center;
        margin-top: -25px;
        margin-bottom: 10px;
    }


    .txt-Segunda{
        display: none;
    }

    .owl-carousel .owl-item img {

        /* width: 50%!important; */
    }
    .redes{
        margin-top:30px; 
    }

    #foot{
        width: 30px;
        margin-top: 40px;
    }

    #txt-Segunda{
        margin-bottom: -10px;
        margin-top: 10px;
    }

    .pie{
        text-align: center;
        align-items: center; 
    }

    .otro1{
        display: block!important;
        margin-top: 10px;
        margin-bottom: -7px;
    }

    .numeros{
        margin-bottom: -5px;
        padding-top: 5px;
    }
}




@media all and (min-width:480px) and (max-width: 575px){

    #logoMG{
        width: 70px;
        left: 40px;
        top: -15px;
    }


    #cnecMesa{
        display: none;

    }


    #franjas {
        margin: -230px 0px 40px 0px;
    }

    #txtslogan{
        font-size: 40px;
        margin: -100px 0px 15px 40px;
    }

    #cont-img{
        margin-top: 30px;
    }

    #img1{
        width: 150px;
        height: 150px;

    }

    #img2{
        width: 150px;
        height: 150px;
    }

    .txt-Segunda{
        display: none;
    }

    #cont-txt{

    }

    #cont-txt2{
        text-align: center;
        margin-bottom: 10px;
    }

    #txt-Segunda{
        margin-bottom: 5px;
        margin-top: -5px;
    }

    #foot{
        width: 20px;
    }

    .pie{
        text-align: center;
        align-items: center;

    }

    .otro1{
        display: block!important;
    }
.numeros{
    margin-bottom: -5px;
    padding-top: 10px;
    margin-top: -10px;
}


}   

@media all and (max-width: 480px) {

.fc1{
    padding:0 0 25px 0!important;
}

.fc2{
    padding: 0px!important;
}

    #logoMG{
        max-width: 70px;
        left: 30px;
        top: -25px;

    }

    #cnecMesa{

        display: none;

    }


    #txtslogan{
        font-size: 30px;
        padding: 60px 0px 0px 0px;
        margin-bottom: 90px;
        margin-left: 10px
    }

    #franjas{
        width: 100%;
        margin-bottom: -210px;
    }


    .fondoAmarillo{
        margin-top: -60px;

    }

    #img1{
        width: 150px;
        height: 150px;
        margin-left: 0px;

    }

    #img2{
        width: 150px;
        height: 150px;
        margin-left: 0px;
    }


    #cont-txt2{
        text-align: center;
    }


    .txt-Segunda{
        display: none;
    }

    .owl-carousel .owl-item img {

        /* width: 50%!important; */
    }


    .pie{
        text-align: center;
        align-items: center;



    }

    #foot{
        display: none;
    }

    .otro1{
        display: block!important;
        margin-bottom: 0px;
    }

    

    

    .otro1 > img {
    margin-top: 0px;
    }

}