/*Quitamos la visivilidad al carrusel oculto, ya que es solo para moviles*/


#carrusel_oculto{
    display: none;
}


/* Aqui se agrega las fuentes que utilizaremos */
@font-face {
    font-family: 'roboto_thin';
    src: url("../fonts/Roboto-Thin.ttf") format("truetype");
}
@font-face {
    font-family: 'roboto_light';
    src: url("../fonts/Roboto-Light.ttf") format("truetype");
}
@font-face {
    font-family: 'titulos';
    src: url("../fonts/LemonMilk.otf") format("truetype");
}
/*-----------------------------------------------*/

/*Aqui agregaremos el preloader de nuestra página

#contenedor {
    width: 100%;
    height: 100%;
    display: block;
}

.loader {
  font-size: 10px;
  margin: 30% auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: fixed;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #FFF;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #0dcecb;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
--------------------------------------------*/



/*Agregamos atributos al header*/
#cabecera{
    font-family: 'roboto_light';
    font-size: 1.3em;
    display: none;  
    background-image: url(../img/zig.png);
    margin: 0px;
}
/*---------------------*/
/*Damos color al texto de la botonera*/
nav ul li a{
    color: white;
}

/* Agregamos las propiedades del logo, para centrarlo a la cabecera */
#logo{
    margin-top: 12px;
    margin-left: 0px;
}
/*------------------*/


/* Agregamos propiedades al area de nuestra pagina de inicio */
#nosotros_area{
    margin-left: 8.335%;
    border: 2px solid black;
    text-align: justify;
    padding: 40px 40px 40px 40px;
    display: block;
    margin-top: 20px;
    font-size: 3em;
    background: white;
}
/* Realizamos el cuadro de la parte de "Nosotros" */
div#nosotros_contenedor{
    margin-top: 80px;
    color: #1D1D1D;
    margin-bottom: 100px;
}

/* Agregamos atributos del título de la página principal */
.titulos_nosotros{
    text-align: center;
    font-family: 'titulos';
    margin-bottom: 30px;
    font-size: 45px;
}

/* Agregamos atributos del texto de la página principal */
.textos{
    text-align: justify;
    font-family: 'roboto_light';
    margin-bottom: 40px;
    padding: 40px 70px;
    font-size: 20px;  
    color: black;
}

/*Textos del area de inicio*/
.textos_inicio{
    padding: 10px 20px;
}


/* Agregamos el footer y sus propiedades */
footer{
    color: white;
    background-image: url(../img/zig.png);

}
/* Damos color a nuestro nombre */
#eduardo{
    color: red;
    font-family: 'Rock Salt', cursive;
}
/* Acomodamos es correo electrónico */
#correo_lalo{
    text-align: right;
    font-family: 'roboto_thin';
}

/* Le damos un margen a nuestro texto */
footer p{
    margin-top: 15px;
}
/*Agregamos el copyright*/
#copyright{
    margin-top: 30px;
    text-align: center;
    font-family: 'roboto_light';
}


/*---------------Area de Productos---------------------*/

    /*Excepciones del los textos del area de productos*/
    .textos_productos{
    padding: 40px 0px;
    margin: 0px 15px; 
}
    /*Textos de la lista en el area de productos */
    .lista{
        padding: 0px;
        margin-bottom: 0px;
        margin-left: 60px;
    }
    #area_textoproductos{
        margin-bottom: 50px;
    }

    #seccion_impresoras{
        margin-bottom: 75px;
        
    }

    .area_cuadro{
        background-image: url(../img/zig.png);

    }
    .cabecera_productos{
        height: 150px;
        text-align: center;
        line-height: 150px;
        font-family: 'titulos';
        font-size: 60px;
        color: #1D1D1D;
        padding-right: 0px;
        margin-bottom: 100px;
        margin-top: 100px;
    }
        div.titulos{
        text-align: center;
        color: white;
        font-family: 'titulos';
        margin-top: 9.2%;
    }
        div.titulos h1, div.titulos h2{
        font-size: 3.1em;
    }
    #ultimo_texto{
        margin-bottom: -50px;
    }
    #img_zebra1{
        margin-left: 8.33%;
    }
    #img_zebra2{
        margin-left: 8.33%;
        margin-bottom: 5%;
        margin-bottom: 100px;
    }
    #img_toshiba{
        margin-left: 16.66%;
    }
    .subtitulos{
        margin-bottom: 50px;
        margin-top: 50px;
        font-family: "titulos";
        font-size: 3em;
    }

/****************FINAL PRODUCTOS***********************/


/*--------------AREA DE ARTES------------*/

    #imagen_artes{
        margin-left: 12.5%;
    }

    #listas_artes{
        margin-left: 5%;
        margin-top: -8%;
    }


/************FINAL AREA ARTES****************/

/*-------------AREA CONTACTO-------------*/
#cotizacion{
    margin-top: 80px;
    text-align: center;
    font-family: 'roboto_light';
    font-size: 3em;
}
#info_contacto{
    margin-top: 150px;
    border-left: 2px solid gray;
    font-family: 'roboto_light';
    font-size: 1.5em;
    padding-left: 50px;
}
#formulario{
    margin-top: 80px;
    margin-bottom: 50px;
    padding-right: 50px;

}
iframe{
    margin-bottom: 60px;
}

#ubicacion{
    margin-top: -20px;
    margin-bottom: 30px;
    text-align: center;
    color: black;
    font-family: 'titulos';
    font-size: 4em;

}

/************FINAL CONTACTO****************/

/*-----------------QUITAR MARGENES-----------------*/
    /* Quitamos los margenes del carusel */
    #myCarousel{
        margin: 0px;
    }
    /*Quitamos margen de las imagenes que insertamos en la parte de productos*/
    .quitar_margen{
        padding: 0px;
    }
    .quitar_padding{
        padding: 0px;
    }

    /*Quitamos los margenes a los contenedores row*/
    .row{
        margin:0px;
    }
    strong{
        font-weight: inherit;
    }
    #lista_produc{
        margin-left: -60px;
    }
    


/*-----------------------PANTALLAS GRANDES-----------------------------*/

@media (min-width:1600px){


    #logo{
        margin-top: 0.35%;
    }
    .textos{
        font-size: 24px;
    }
    #seccion_impresoras{
        margin-bottom: 0px;
        margin-top: 30px;
    }
    
}

/*---------************************************************------*/

/*-----------------------PANTALLAS 1200px-----------------------------*/
@media (min-width:1200px){
    #formulario{
        margin-left: 16.2%;
    }
     #seccion_impresoras{
        margin-bottom: 0px;
        margin-top: 30px;
    }
    #img_zebra1{
        margin-left: 16.6%;
    }
    #img_zebra2{
        margin-left: 16.6%;
    }
    #img_toshiba{
        margin-left: 16.66%;
    }
}


/*---------************************************************------*/


/*--------MEDIUM DESKTOP----------*/
@media (max-width:1199px) and (min-width:992px){

    
    #logo{
        margin-bottom: 1%;
    }
    #botones{
        margin-top: 1.4%;
    }
    /*--------Area de Productos---------*/
    div.titulos h1, div.titulos h2{
        font-size: 45px;
        padding: 35px;
        margin-top: -28px;
    }
    #titulo_impresoras{
       font-size: 45px;
        padding: 35px;
        margin-top: 35px; 
    }
    #seccion_impresoras{
        margin-bottom: 0px;
        margin-top: 30px;
    }

    /*-------------Area de Artes---------------*/
    #texto_artes{
        margin-bottom: 10px;
        margin-top: -20PX;
    }
    #listas_artes{
        margin-left: 50px;

    }
    #img_toshiba{
        margin-left: 8.33%;
    }

    

}
/******************FIN PANTALLAS GRANDES************************/    

/*--------------------------TABLETS---------------------------*/


@media (max-width:991px) and (min-width:768px){

    #botonera{
        width: 100%;
        margin-top: 18px;
        margin-bottom: 0px;
        
    }
    #botonera ul{
        width: 100%;
        text-align: center;
    }
    #botonera ul li{
        width: 20%;
    }
    #logo{
        margin-left: 25%;
    }
    iframe{
        height: 450px;
    }
    /*------------Area de Productos------------*/
    div.titulos h1, div.titulos h2{
        font-size: 25px;
        padding: 35px;
        margin-top: -50px;
    }
    #titulo_impresoras{
       font-size: 25px;
        padding: 15px;
        margin-top: 50px; 
    }
    .cabecera_productos{
        font-size: 30px;
    }
    .textos{
        font-size: 15px;
    }
    #seccion_impresoras{
        margin-bottom: 0px;
        margin-top: 30px;
    }

    /*---------AREA DE ARTES-----------*/

    #texto_artes{
        margin-bottom: -50px;
    }
    #listas_artes{
        margin-left: 40px;
    }
    /*------------AREA SERVICIOS---------*/

    #titulo_servicios{
        margin-top: -10px;
        margin-bottom: -10px;
    }

    /*-------------AREA CONTACTO-----------*/

    #info_contacto{

        padding-left: 35px;
    }
    #img_toshiba{
        margin-left: 8.33%;
    }

}
/**************************FIN TABLET****************************/


/*---------------------------PHONE------------------------------*/

@media (max-width:767px){


    .textos{
        padding: 40px 20px;
    }

    #pie{
        height: 115px;
            text-align: center;
    }
    #pie #correo_lalo{
        margin-top: 0px;
        text-align: center;
    
    }
    #contacto_lalo{
        margin-top: 15px;
    } 
    #logo{
        margin-left: 25%;
        margin-bottom: 2%;
    }   
    #boton{
        margin-top: 4%;
    }
    #cabecera{
        background: #141414;
    }
    div#nosotros_contenedor{
        margin-top: 40px;
        margin-bottom: 80px;
    }
    /*Quitamos margen a los titulos de la parte de inicio*/
    .titulos_nosotros{
        margin-bottom: 0px;
    }
    .textos_inicio{
        margin-bottom: 25px;
        font-size: 13px;
        padding: 12px 0px;
    }

    /*-----------------------------------*/

    /*Colocamos fondo a la cabecera movil*/
     #botoneraMovil{
        background: #141414;
    }
    /*-----------------------------------*/

    #carrusel_oculto{
        display: block;
    }
    #myCarousel{
        display: none;
    }
    #botonera{
        text-align: center;
    }
    /*------AREA DE PRODUCTOS--------*/
    .textos{
        font-size: 13px;

    }
    .cabecera_productos{
        font-size: 29px;
    }
    div.titulos h1, div.titulos h2{
        font-size: 28px;
        padding: 35px;
        margin-top: -38px;
    }
    .subtitulos{
        margin-top: 50px;
        margin-bottom: 50px;
        font-size: 1.8em;
    }
    img#img_zebra2{
        margin-left: 8.33%;
        margin-bottom: 12%;
    }
    #img_toshiba{
        margin-left: 8.33%;
    }
    /*-------------------------------*/


    /*------------AREA DE ARTES---------*/

    #listas_artes{
        margin-left: 30px;
        margin-top: 0%;
    }
    #texto_artes{
        margin-bottom: -60px;
    }

    /*----------------------------------*/
    /*------------AREA SERVICIOS---------*/

    #titulo_servicios{
        margin-top: -15px;
        margin-bottom: -15px;
    }

    /*----------------------------------*/
    #copyright{
        margin-top: 0px;
    }
    .textos_productos{
    padding: 40px 0px 0px 0px;
    margin: 0px 15px; 
}
    /*Textos de la lista en el area de productos */
    .lista{
        padding: 0px;
        margin-bottom: 0px;
        margin-left: 60px;
    }
    .lista_productos{
        margin-top: -40px;
    }
    #seccion_impresoras{
        margin-bottom: 0px;
        
    }
    /*-----------AREA CONTACTO------------*/
    #info_contacto{
        margin-top: -15px;
        margin-bottom: 60px;
        border: 2px solid gray;
        padding-left: 0px;
        text-align: center;
        padding-top: 10px;
        font-size: 1em;
    }
    iframe{
    height: 350px;
    }
    #cotizacion{
        margin-top: 40px;
        margin-bottom: -30px;
        font-size: 1.5em;
    }
    #ubicacion{
        font-size: 1.5em;
    }
    

   
}

/**************************FIN PHONE****************************/