/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */


/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-size: 1.5rem;
    background-color: -internal-root-color;
    font-family: 'Oswald', sans-serif;
}

h2 {
    text-align: center;
    margin: 1rem 0;
    text-transform: uppercase;
}

p {
    font-family: 'Raleway', sans-serif;
}

bold {
    font-weight: bold;
}

transparent {
    opacity: 0;
}

:root{
    --comida: rgb(250, 226, 71);
    --pisos: rgb(191, 191, 191);
    --lavanderia: rgb(204, 0, 125);
    --desinfeccion: rgb(101, 152, 210);
    --maquinaria: rgb(0, 0, 0);
    --biologica: rgb(44, 85, 69);
    --alfombras: rgb(78, 0, 26);
    --accesorios: rgb(245, 165, 28);
    --multi: rgb(134, 150, 175);
    --ambientadores: rgb(68, 0, 83);
    --banos: rgb(220, 220, 220);

    --comida-t: rgba(250, 226, 71, .5);
    --pisos-t: rgba(191, 191, 191, .5);
    --lavanderia-t: rgba(204, 0, 125, .5);
    --desinfeccion-t: rgba(101, 152, 210, .5);
    --maquinaria-t: rgba(0, 0, 0, .5);
    --biologica-t: rgba(44, 85, 69, .5);
    --alfombras-t: rgba(78, 0, 26, .5);
    --accesorios-t: rgba(245, 165, 28, .5);
    --multi-t: rgba(134, 150, 175, .5);
    --ambientadores-t: rgba(68, 0, 83, .5);
    --banos-t: rgba(220, 220, 220, .5);
}

.comida{
    background-color: var(--comida);
}
.pisos{
    background-color: var(--pisos);
}
.lavanderia {
    background-color: var(--lavanderia);
}
.desinfeccion {
    background-color: var(--desinfeccion);
}
.maquinaria {
    background-color: var(--maquinaria);
}
.biologica {
    background-color: var(--biologica);
}
.alfombras {
    background-color: var(--alfombras);
}
.accesorios {
    background-color: var(--accesorios);
}
.multi {
    background-color: var(--multi);
}
.ambientadores {
    background-color: var(--ambientadores);
}
.banos {
    background-color: var(--banos);
}

.comida-t {
    background-color: var(--comida-t);
}
.pisos-t {
    background-color: var(--pisos-t);
}
.lavanderia-t {
    background-color: var(--lavanderia-t);
}
.desinfeccion-t {
    background-color: var(--desinfeccion-t);
}
.maquinaria-t {
    background-color: var(--maquinaria-t);
}
.biologica-t {
    background-color: var(--biologica-t);
}
.alfombras-t {
    background-color: var(--alfombras-t);
}
.accesorios-t {
    background-color: var(--accesorios-t);
}
.multi-t {
    background-color: var(--multi-t);
}
.ambientadores-t {
    background-color: var(--ambientadores-t);
}
.banos-t {
    background-color: var(--banos-t);
}

img {
    max-width: 100%;
}

.titulo h2{
    font-weight: 300;
    color: grey;
}

.subtitulo h3{
    font-weight: 250;
    color: black;
    text-align: center;
}

.ocultar {
    display: none;
}

.ocultar-imagen {
    display: none;
}

/**********HEADER**********/

.site-header {
    background-color: white;
    padding: 0 0 0 0;
}

.contenedor-header {
    width: 100%;
    padding: 1rem 0 0 0;
}

@media only screen and (min-width: 768px) {
    .site-header {
        padding: 0rem 0 0 0;
    }
    .contenedor-header {
        padding: 0 0 0 0;
    }
}

.contenido-header {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

@media only screen and (min-width: 768px) {
    .contenido-header {
        text-align: left;
        flex-direction: inherit;
        width: 95%;
        margin: 0 auto;
    }
}

.contenido-header .logo {
    width: 60%;
    margin: 0 auto;
}

@media only screen and (min-width: 768px) {
    .contenido-header .logo {
        width: 33%;
        margin: 0 0 0 0;
        padding-left: 0rem;
    }
}

.contenido-header .logo img {
    width: 100%;
}


/*NAVEGACION PRINCIPAL*/

.completo{
    width: 90%;
    text-align: center;
    margin: 0 auto;
}

.completo .whatsapp{
    color: gray;
}

@media only screen and (min-width: 768px) {
    .completo .whatsapp {
        justify-content: flex-end;
    }
}

.completo .whatsapp p{
    line-height: 0.3;
    padding-left: 1rem;
    font-size: .8rem;
}

.completo .whatsapp:hover{
    color: black;
}

.completo img{
    width: 1.9rem;
    height: 1.7rem;
}

.issa-menu img{
    width: 5rem;
    height: 4rem;
}

.menu-movil {
    margin: 0 auto;
    width: 3rem;
    padding-top: .5rem;
}

@media only screen and (min-width: 768px) {
    .menu-movil {
        display: none;
    }
}

.menu-movil:hover {
    cursor: pointer;
}

.menu-movil span {
    height: .6rem;
    margin-bottom: 0.1rem;
    background-color: black;
    display: block;
}

.navegacion-principal {
    width: 100%;
    display: none;
    text-align: center;
    padding-top: .5rem;
}

.navegacion-principal a {
    width: 100%;
    text-align: center;
    display: block;
    color: black;
    text-decoration: none;
    transition: background-color .6s ease-in-out;
    padding: .3rem 0;
    font-weight: lighter;
}

.navegacion-principal a:hover {
    color: white;
    background-color: black;
}

.pse {
    text-align: center;
}

.pse img {
    height: 3rem;
}

@media only screen and (min-width: 768px) {
    .navegacion-principal {
        width: 100%;
        text-align: right;
        display: inline-block;
        padding: 0;
    }
    .navegacion-principal a {
        display: inline-block;
        width: auto;
        padding: .3rem 2rem;
        font-size: 1rem;
    }
}

.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.padding-bottom-extra {
    padding-bottom: 1rem;
}

.padding-top-menos {
    padding-top: 1rem;
}

.transparencia {
    opacity: .97;
}

@media only screen and (min-width: 768px) {
    .no-home {
        padding: 0 0 1.9rem 0;
    }
}

.no-home-off {
    padding: 0 0 0 0;
}

.activo {
    border-bottom: .2rem solid black;
}


/**************FOOTER***************/

.site-footer {
    background-color: white;
}

.site-footer p{
    font-size: 1.1rem;
}

.footer-issa {
    text-align: center;
}

.nss{
    width: 100%;
    text-align: center;
}

.footer-redes {
    text-align: center;
    width: 12rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.footer-redes a{
    text-decoration: none;
    text-transform: lowercase;
    color: grey;
    font-weight: lighter;
    font-size: 1.4rem;
}

.footer-redes a:hover{
    color: black;
}

.datos-contacto{
    width: 60%;
    margin: 0 auto;
}

@media only screen and (min-width: 768px) {
    .datos-contacto {
        width: 80%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tel-fijo {
        padding-right: 5rem;
    }

    .whatsapp {
        padding-right: 5rem;
    }
}

.datos-contacto img{
    width: 1.9rem;
    height: 1.7rem;
}

.datos-contacto a{
    text-decoration: none;
    color: grey;
}

.datos-contacto a:hover{
    color: black;
}

.tel-fijo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tel-fijo img{
    padding-right: .5rem;
}

.whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.whatsapp img{
    padding-right: .5rem;
}

.contenedor-derechos {
    width: 60%;
    margin: 0 auto;
}

.mail {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail img{
    padding-right: .5rem;
}

.contenido-derechos {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.contenedor-derechos .logo {
    width: 7rem;
    padding-right: .5rem;
}

@media only screen and (min-width: 768px) {
    .contenedor-derechos .logo {
        margin: 0 0 0 0;
    }
}

.contenedor-derechos .logo img {
    width: 100%;
    margin: auto 0;
}

.contenedor-derechos .todos p {
    padding-top: .3rem;
    font-size: .9rem;
}


/********************************************HOME*********************************************/

.hero {
    background-image: url(../img/aeropuerto\ 1.jpeg);
    height: 40vh;
    background-position: center;
    background-size: cover;
}

@media only screen and (min-width: 768px) {
    .hero {
        height: 80vh;
    }
}

/******************BIENVENIDO******************/

.bienvenido {
    text-align: center;
    width: 95%;
    margin: 1rem auto;
}

@media only screen and (min-width: 768px) {
    .bienvenido {
        width: 90%;
    }
}

.bienvenido h2 {
    font-size: 2rem;
}

@media only screen and (min-width: 768px) {
    .bienvenido h2 {
        font-size: 3.5rem;
    }
}

.intro {
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

.intro p{
    font-size: 1.2rem;
}

@media only screen and (min-width: 768px) {
    .intro p {
        font-size: 1.5rem;
    }
}

/******************LEYENDA******************/
.slider {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: cambio 20s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}

.s-f {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 75vh;
}

.s-1 {
    background-image: url(../img/blanca.jpeg);
}

.s-2 {
    background-image: url(../img/agua\ y\ cielo.jpeg);
}

.lyl {
    width: 95%;
    margin: auto;
}

@media only screen and (min-width: 768px) {
    .lyl {
        width: 80%;
    }
}




/*.lyl {
    text-align: center;
}

.lyl img{
    height: 13rem;
    width: 100%;
    position: center;
    margin: 0 auto;
}

@media (min-width: 317px) {
    .lyl img{
        height: 16rem;
    }
}

@media (min-width: 400px) {
    .lyl img{
        height: 19rem;
    }
}

@media (min-width: 490px) {
    .lyl img{
        height: 24rem;
    }
}

@media (min-width: 600px) {
    .lyl img{
        height: 30rem;
    }
}

@media (min-width: 800px) {
    .lyl img{
        height: 38rem;
    }
}

@media (min-width: 1000px) {
    .lyl img{
        width: 85%;
    }
}

@media (min-width: 1100px) {
    .lyl img{
        width: 70%;
    }
}*/

/******************LINEA HOME******************/

.contenedor {
    padding: 1rem 0;
}

@media (min-width: 550px) {
    .lineas {
        display: grid;
        grid-template-columns: repeat(2, 1Fr);
    }
}

@media (min-width: 746px) {
    .lineas {
        display: grid;
        grid-template-columns: repeat(4, 1Fr);
    }
}

.t-lineas{
    color: white;
}


.linea h3{
    margin: 0 0 0 .5rem;
    padding-top: 0rem;
    text-align: left;
    font-size: 6.96rem;
}

.linea .letra {
    opacity: .7;
}

.lineas .comida .img{
    background-image: url(../img/cocina.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .pisos .img{
    background-image: url(../img/hotel.png);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .lavanderia .img{
    background-image: url(../img/lavanderia.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .desinfeccion .img{
    background-image: url(../img/agua\ y\ cielo.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .maquinaria .img{
    background-image: url(../img/maquinaria.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .biologica .img{
    background-image: url(../img/hoja.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .alfombras .img{
    background-image: url(../img/alfombras.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .accesorios .img{
    background-image: url(../img/limpiando\ vidrio.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .multi .img{
    background-image: url(../img/aeropuerto.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .ambientadores .img{
    background-image: url(../img/paisaje.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas .banos .img{
    background-image: url(../img/baños.jpeg);
    background-position: center center;
    background-size: cover;
    height: 8rem;
}

.lineas p{
    text-align: center;
    font-size: 1rem;
}

.linea {
    width: 80%;
    margin: 3rem auto 0 auto;
    padding-bottom: 0.5rem;
}

.linea:hover{
    transform: scale(1.1);
}

.cont-linea{
    width: 80%;
    margin: 0 auto;
    padding-bottom: 1rem;
    height: auto;
    display: block;
}

.cont-linea a{
    display: block;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0.3rem 0;
    text-decoration: none;
    border: solid;
}

.cont-linea a:hover {
    background-color: white;
    border-color: white;
}

.linea h2{
    font-size: 1.4rem;
    padding-top: 1rem;
}

.comida a:hover{
    color: var(--comida);
}

.pisos a:hover{
    color: var(--pisos);
}

.lavanderia a:hover{
    color: var(--lavanderia);
}

.desinfeccion a:hover{
    color: var(--desinfeccion);
}

.maquinaria a:hover{
    color: var(--maquinaria);
}

.biologica a:hover{
    color: var(--biologica);
}

.alfombras a:hover{
    color: var(--alfombras);
}

.accesorios a:hover{
    color: var(--accesorios);
}

.multi a:hover{
    color: var(--multi);
}

.ambientadores a:hover{
    color: var(--ambientadores);
}

.banos a:hover{
    color: var(--banos);
}

/*COLORES*/
.contenedor{
    background-color: white;
    background-image: none;
}
.t-lineas h2{
    color:black;
}
.lineas {
    color: white;
}
.lineas h2{
    color: white;
}
.lineas a{
    color: white;
}



/********************************************NOSOTROS*********************************************/

.local img {
    width: 100%;
    height: 30%;
}

.construccion {
    text-align: center;
    font-size: 2rem;
}

/********************************************PRODUCTOS*********************************************/

.h-linea {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 80vh;
}

.productos {
    width: 90%;
    margin: 0 auto;
}

.producto {
    width: 100%;
    margin: 0 auto 1rem auto;
    padding: 2rem 0;
    text-align: center;
}

.tit-ic {
    margin-top: 1rem;
    display: flex;
}

.tit-ic h4{
    margin: 1rem 0;
    padding-left: 1rem;
    font-family: 'Raleway', sans-serif;
    color: grey;
    text-align: left;
}

.icono {
    width: 2rem;
    padding: 1rem 0;
    margin: 0 0 auto auto;
    border-bottom-right-radius: 1rem;
    color: white;
}

.descripcion-producto {
    width: 90%;
    margin: 0 auto;
    text-align: justify;
    font-size: 1rem;
    color: black;
}

@media (min-width: 768px) {
    .producto {
        display: flex;
        padding: 1rem 0 3rem 0;
    }

    .img-producto {
        flex-basis: calc(20% - 1rem);
        padding-left: 1rem;
        margin: auto 0;
    }

    .text-producto {
        flex-basis: calc(80% - 1rem);
        padding-left: 1rem;
    }

    .tit-ic {
        margin: 0;
    }

    .tit-ic h4{
        padding: 0;
    }

    .descripcion-producto {
        width: 95%;
        margin: 0;
    }
}

.botones-producto {
    text-align: right;
    padding-top: 1rem;
}

.botones-producto a{
    text-decoration: none;
    padding: .5rem 1rem;
    border-color: black;
    color: grey;
    font-weight: 300;
}

.botones-producto a:hover{
    color: white;
    background-color: white;
}






/********************************************PISOS*********************************************/
.h-pi {
    background-image: url(../img/hotel.png);
    background-position: bottom;
}

.btn-produc-pisos a:hover{
    background-color: var(--pisos);
}

/********************************************COMIDA*********************************************/
.h-c {
    background-image: url(../img/cocina.jpeg);
}

.btn-produc-comida a:hover{
    background-color: var(--comida);
}

/********************************************LAVANDERIA*********************************************/
.h-la {
    background-image: url(../img/lavanderia.jpeg);
}

.btn-produc-lavanderia a:hover{
    background-color: var(--lavanderia);
}

/********************************************DESINFECCION*********************************************/
.h-de {
    background-image: url(../img/agua\ y\ cielo.jpeg);
}

.btn-produc-desinfeccion a:hover{
    background-color: var(--desinfeccion);
}

/********************************************MAQUINARIA*********************************************/
.h-ma {
    background-image: url(../img/maquinas.jpeg);
    width: 100%;
    height: 60vh;
    margin: 0 auto;
}

@media (min-width: 540px) {
    .h-ma {
        width: 85%;
        height: 70vh;
    }
}

@media (min-width: 768px) {
    .h-ma {
        width: 60%;
    }
}

@media (min-width: 1000px) {
    .h-ma {
        width: 55%;
        height: 80vh;
    }
}

@media (min-width: 1120px) {
    .h-ma {
        width: 40%;
    }
}

.btn-produc-maquinaria a:hover{
    background-color: var(--maquinaria);
}

/********************************************BIOLOGICA*********************************************/
.h-bi {
    background-image: url(../img/hoja.jpeg);
}

.btn-produc-biologica a:hover{
    background-color: var(--biologica);
}

/********************************************ALFOMBRAS*********************************************/
.h-al {
    background-image: url(../img/alfombras.jpeg);
}

.btn-produc-alfombras a:hover{
    background-color: var(--alfombras);
}

/********************************************ACCESORIOS*********************************************/
.h-acc {
    background-image: url(../img/limpiando\ vidrio.jpeg);
}

.btn-produc-accesorios a:hover{
    background-color: var(--accesorios);
}

/********************************************MULTI*********************************************/
.h-mu {
    background-image: url(../img/aeropuerto.jpeg);
}

.btn-produc-multi a:hover{
    background-color: var(--multi);
}

/********************************************AMBIENTADORES*********************************************/
.h-am {
    background-image: url(../img/paisaje.jpeg);
}

.btn-produc-ambientadores a:hover{
    background-color: var(--ambientadores);
}

/********************************************BAÑOS*********************************************/
.h-ba {
    background-image: url(../img/baños.jpeg);
}

.btn-produc-banos a:hover{
    background-color: var(--banos);
}






.colectividades {
    width: 80%;
    margin: 0 auto;
    padding: 2rem 0;
}
.h-col {
    background-image: url(../img/colectividades.jpeg);
}

.programas {
    width: 80%;
    margin: 0 auto;
    padding: 2rem 0;
}
.h-pro {
    background-image: url(../img/industria.jpeg);
}

.h-produc {
    background-image: url(../img/recepcion.jpeg);
}

.h-nos {
    background-image: url(../img/habitacion\ hotel.jpeg);
}
.certificado-issa {
    padding-top: 2rem;
}
.imagen-certificado {
    width: 90vw;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .imagen-certificado {
        width: 70vw;
    }
}
@media (min-width: 1000px) {
    .imagen-certificado {
        width: 50vw;
    }
}



@media (min-width: 768px) {
    .titulo-producto {
        display: flex;
        text-align: center;
        width: 100%;
    }  
}

.tp-ic {
    display: flex;
    text-align: center;
    width: 95%;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .tp-ic {
        margin-top: 0;
        padding-right: 1rem;
    }
}

.btn-volver {
    text-align: left;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .btn-volver {
        width: 10rem;
        padding-top: 0;
    }
}

.titulo-producto h2{
    margin: 0 0 0 auto;
}

.titulo-producto .icono {
    margin-left: 1rem;
}

@media (min-width: 768px) {
    .c-producto {
        position: relative;
        display: flex;
        height: 70vh;
    }
}

.imagen-producto {
    flex-basis: calc(30% - 1rem);
}

@media only screen and (min-width: 768px) {
    .imagen-producto {
        padding-left: 1rem;
    }

    .imagen-producto img{
        max-height: 31rem;
    }
}

.contenedor-imagenes {
    text-align: center;
}

.imagenes img{
    height: 20rem;
}

#imagen4 img{
    height: 15rem;
}

.menu-imagen {
    display: flex;
    text-align: center;
    width: 20rem;
    margin: 0 auto;
    padding-top: 1rem;
}

.imagen1 img{
    padding: 0 1rem;
}

.menu-imagen img{
    width: 4rem;
    height: 3rem;
    margin-right: 1rem;
}

.borde-alfombras img{
    border: 2px solid var(--alfombras);
}

.borde-ambientadores img{
    border: 2px solid var(--ambientadores);
}

.borde-banos img{
    border: 2px solid var(--banos);
}

.borde-bio img{
    border: 2px solid var(--biologica);
}

.borde-comida img{
    border: 2px solid var(--comida);
}

.borde-desinfeccion img{
    border: 2px solid var(--desinfeccion);
}

.borde-lavanderia img{
    border: 2px solid var(--lavanderia);
}

.borde-multi img{
    border: 2px solid var(--multi);
}

.borde-pisos img{
    border: 2px solid var(--pisos);
}

.informacion-producto {
    flex-basis: calc(70% - 1rem);
}

.cuadro-producto {
    margin: 0 auto;
    width: 95%;
}

@media only screen and (min-width: 768px) {
    .cuadro-producto {
        height: 31rem;
        position: relative;
        width: 95%;
        margin: 0 auto;
        padding-left: 4rem;
    }
}
.cuadro-producto .subtitulo h3{
    margin-bottom: 0;
    margin-top: 0;
}

.cuadro-producto p{
    font-size: .9rem;
    text-align: justify;
}

.cuadro-producto .especificaciones {
    text-align: center;
}

.cuadro-producto img{
    width: 100%;
    margin: 0 auto;
}

@media only screen and (min-width: 768px) {
    .cuadro-producto img{
        width: 50%;
    }
}

.menu-movil-info {
    margin: 0 auto;
    width: 3rem;
    text-align: center;
    padding-bottom: .4rem;
}

.menu-movil-info img {
    width: 1rem;
}

@media only screen and (min-width: 768px) {
    .menu-movil-info {
        display: none;
    }
}

.menu-movil-info:hover {
    cursor: pointer;
}

.menu-producto {
    width: 95%;
    margin: 0 auto;
    display: none;
}

@media only screen and (min-width: 768px) {
    .menu-producto {
        display: table;
        width: 90%;
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        display: table;
    }
}

.menu-producto a{
    display: block;
    text-align: center;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 200;
    padding: 1rem;
    position: relative;
    border: 1px solid white;
}

.menu-producto a:hover{
    color: black;
}

.menu-producto-maquinaria a:hover{
    color: gray;
}

.activo-producto {
    text-decoration: solid;
    color: red;
}

.menu-producto .activo::after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 20px;
    width: 30px;
    background-image: url('../img/talleres-flecha.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    bottom: -20px;
}

@media only screen and (min-width: 768px) {
    .menu-producto a {
        display: table-cell;
    }
}

.especificaciones-tabla {
    width: 30rem;
    margin: 0 auto;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.titulo-tabla {
    background-color: rgb(220, 228, 244);
    display: grid;
    grid-template-columns: 50% 50%;
}

.titulo-tabla h6 {
    font-weight: 400;
    text-decoration: underline;
    margin: .5rem 0;
}

.texto-tabla {
    display: grid;
    grid-template-columns: 40% 60%;
}

.texto-tabla p{
    margin: .2rem 0;
}

.texto-izquierda p{
    padding-left: .5rem;
}

.texto-derecha p{
    text-align: center;
}

.primera-parte {
    border-bottom: 1px solid black;
}

.radiaciones {
    display: grid;
    grid-template-columns: 6rem 24rem;
}

.radiaciones-texto {
    padding-right: .5rem;
    margin: auto 0;
}

.radiaciones-img {
    padding: .5rem 0;
    margin: auto 0;
}

@media only screen and (min-width: 768px) {
    .cuadro-grande {
        width: 50rem;
        margin: 0 auto;
    }

    .texto-grande {
        display: grid;
        grid-template-columns: 13rem 37rem;
    }

    .nuevo-tamano p{
        font-size: .84rem;
    }
}

.nuevo-diseno {
    background-color: rgba(0, 0, 0, .5);
}

.modo-maquina {
    display: grid;
    grid-template-columns: 50% 50%;
}

.texto-modo p{
    font-size: .75rem;
    text-align: center;
}

.imagen-modo{
    text-align: center;
}

.imagen-modo img{
    width: 70%;
}

.texto-pequeno p{
    font-size: .5rem;
}

.scroll {
    overflow: scroll;
}


@media only screen and (min-width: 768px) {
    .menu-producto-especial {
        width: 70%;
    }

    .cuadro-producto-especial {
        height: 25rem;
    }
}

.especificaciones-tabla-especial {
    width: 35rem;
}

.especificaciones-tabla-grande {
    width: 49rem;
}

.especificaciones-tabla-muygrande {
    width: 54rem;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */


/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}


/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}


/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}


/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
    visibility: hidden;
}


/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}