@charset 'utf-8';
@import url("https://use.typekit.net/jvs6det.css");

:root{
    /*color template*/
    --primary-color:0,150,0;
    --secondary-color:0,0,0;
    --tertiary-color:white;
    /*font template*/
    --primary-font:"adobe-garamond-pro", serif;
	/*font size*/

	/*img values*/

}

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	word-wrap: break-word;
	box-sizing: border-box !important;
}

body{
	overflow-x: hidden;
	/*font-family: "Ubuntu-Regular";*/
    font-family: var(--primary-font);
    font-style:normal;
}

ul, ol{
	padding: 0;
}

img, video{
	width: 100%;
}

h3, h2{ 
	margin-top: 0;
}

/*
p, h1, h2, div, h3, h4, li{

}*/

.contenedor{
	max-width: 2500px;
	/*padding: 8px;*/
	width: 100%;
	margin: 0 auto;
}

/*boton whatsapp*/
.btn-whatsapp{
 	position: fixed;
 	width: 75px;
 	height: 75px;
 	bottom:100px;
 	right: 20px;
 	background-color: #25d366;
 	border-radius: 50%;
 	color:white;
 	text-align: center;
 	line-height: 100px;
 	z-index: 1000;
}

.btn-whatsapp:hover{
	color:rgba(var(--secondary-color),1.00);
}

.btn-whatsapp i{
	font-size: 50px;
}
/*menu botonera */

#logo img{
    margin-bottom: 0px !important;
    width: 70% !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}
 
nav#botonera{
    /*margin-right: -4.5em;*/
    margin-top: 0px !important;
}

nav#botonera ul{
   margin-top: 0px;
   padding-bottom: 0em;
}

nav#botonera ul li a{
	font: normal small-caps 550 1.1em/.5em var(--primary-font);
	background-color: rgba(var(--primary-color), 1.00);
	display: inline-block;
	padding: .7em !important;
	border-radius: .19m !important;
}

/* titulos */
.style-title{
	color:rgba(var(--primary-color),1.00);
	font-weight: 900;
	font-style: italic;
}

h1{
	margin-top: 0px !important;
	font-size:4.5rem;
}

.title-big , .title-small {
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;
}

.title-small{
	font-size:2.5em;
}

/*=============================================
SLIDE            
=============================================*/
#slide{
	position: relative;	
    /*margin: 0 1.4rem;*/
	width: calc(100% - 2.8rem);
	margin-bottom:-50px;
	overflow:hidden;
	background:var(--tertiary-color) !important;
	margin-bottom: 30px;
}

#slide img{
	aspect-ratio:16/5;
	min-height:175px;
	width: 100%;
	height: 22.22%;
}

#slide div{
    position: relative;   	
    color:white;
    width: 100%;
} 

/*Photo Slide*/
#slide ul li{
	float: left;
	width: 25%;
	display:none;
    height: 100%;
}

#slide ul li:first-child{
	display:block;
}

#slide ul li .slideCaption{
	position:relative;
	width:100%;
	top:0px;
	text-align:center;
	z-index:1;
	color:var(--tertiary-color);
	background-color: rgba(var(--secondary-color),.85);
	padding-bottom: 50px;
}

.slideCaption h3{
    max-width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
	padding-top:10px;
}

.slideCaption p{
    max-width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
	padding-bottom:0;
    margin-bottom: 0 !important;
}

.slideCaption p:first-of-type{
    padding-bottom:1em;
}

#slide div div.slideDer span, #slide div div.slideIzq span{
    position: absolute;
    cursor: pointer;
    background-color: rgba(var(--primary-color),.50) ;
	margin-top:25%;
	z-index: 100;
    transition-property:background-color color font-size; 
    transition-delay: 0.1s;
    transition-duration: 0.4s;
    transition-timing-function:cubic-bezier(0.75,1,1,0.75);
}

/*Indicadores Slide*/

#indicadores{
	position: relative;
	width: 100%;
	margin:auto;
	height: 0px;
	top: -2.5em;
	text-align: center;
	z-index: 100;
}

#indicadores li{
	display:inline-block;
	margin:0px 5px;
	cursor: pointer;
	opacity: .7;
	color: rgba(0,175,0, 1.00);
	text-shadow: 0px 0px .3em #fff;
}

#indicadores li:first-child{
	opacity: 1;
}

/*=====  Fin de SLIDE  ======*/

/*=============================================
TOP           
=============================================*/
#top div{	
	padding:30px 20px;
}

/*=====  Fin de TOP  ======*/
/* galeria*/
#galeria{
    width: 100%;
    margin: auto 0;
}

#galeria img{
	width: 100%;
	box-shadow: 0px 0px 3px 1.5px rgba(var(--secondary-color), .50);
	cursor: pointer;
	aspect-ratio: 4/4;
}

#galeria p{
	margin-top:5px;
}

#galeria p, #galeria time{
	font-size:1em;
	text-align: center;
	width: 95%;
	margin-left: 5%;
	margin-right: 5%;
}
/*=============================================
productos          
=============================================*/
#productos ul{
	flex-basis: calc(100% - 3em);
	margin-left: 1.5em;
	margin-right: 1.5em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#productos ul li{
    font:normal normal 500 1.5em var(--primary-font);
	padding: 1rem;	
	margin-top: 25px;
	background-color: rgba(240, 240, 240, 1.00);
	border-radius: 2rem;
}


#productos ul li h2{
	font-size:1.5rem;
}

#productos ul li div img{
	margin-left: 2.5% !important;
	width: 95%;
	box-shadow: 0px 0px 3px 1.5px rgba(var(--secondary-color), .50);
	aspect-ratio: 4/4;
}

#productos ul li span{
	margin:0 25%;
}

#productos ul li button{
	margin-top:30px;
}

#productos .parrafoContenido{
    font-size: 1.3em;
}
/*=====  Fin de productos  ======*/

/*=============================================
VIDEOS            
=============================================*/
#videos h2{
    display: block;
    width: 100%;
}

#videos div{
	padding:20px;
}
/*=====  Fin de VIDEOS  ======*/
/* anuncio reciclaje */
#anuncio-reciclaje{
    margin: 0px .025rem !important;
    width: calc(100% - .05rem);
    /*font:normal small-caps 250 1.5em "adobe-garamond-pro", serif;*/
}

#anuncio-reciclaje hgroup{
	flex-basis: 100%;
}

#anuncio-reciclaje h2{
    font-size: 2.2em;
    text-align: center;
	margin: 3px auto;
}

#anuncio-reciclaje div hgroup h3, #anuncio-reciclaje hgroup h3{
    font-size: 1.5em;
    text-align: center;
    color: black;
}

#anuncio-reciclaje div p{
    text-align: center;
}

#anuncio-reciclaje div:last-child p{
    font-size: 1.2em;
}

#anuncio-reciclaje ul{
    display:flex;
	flex-basis: calc(100% - 3em);
	margin-left: 1.5em;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}

#anuncio-reciclaje li{
    font-size: 1.5em;
	margin-left: 1.5%;
	margin-right: 1.5%;
}

#anuncio-reciclaje div.grid-icons{
    display:grid;
	justify-content: center;
	align-content: center;
	padding: 1em;
	padding-top: 0;
	padding-bottom: 0;
}

#anuncio-reciclaje div.grid-icons div.box-info-reciclaje div{
	width:70%;
	margin:0 auto;
}

#anuncio-reciclaje div.grid-icons img{
	aspect-ratio:4/2.3;
	/*width: 50%;
	height: 150px;
	*/
	padding: 1em;
	margin: 0 auto;	
	width: 100%;
}

#anuncio-reciclaje div.grid-icons h3{
	margin-top:10px;
	font-size: 2em;
	text-align: center;	
}

#anuncio-reciclaje div.grid-icons p{
	text-align: center;
	font-size: 1.3em;
}

#anuncio-reciclaje hgroup h3{
	font-style: normal;
}

#anuncio-reciclaje div p{
   line-height: 1.2em;
   font-size: 1.5em !important;
}
/*=============================================
CONTÁCTENOS           
=============================================*/
footer#contactenos{
    margin: .025rem;
    width: calc(100% - .05rem);
    background-color: rgba(var( --secondary-color ), .85);
    color:#fff !important;
    display:grid;
    /*grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0em;
    justify-content: center;
    align-items: center;*/
    grid-template-areas:
        "map"
		"contact"
        "copyright";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
	align-items: center;
}

footer#contactenos div:first-of-type{
    grid-area: map;
	padding-bottom: .5em !important;
}

footer#contactenos #formulario{
    grid-area: contact;
	padding: 1em !important;
}

footer#contactenos div:last-of-type{
    grid-area: copyright;
    text-align: center;
    font-style:italic;
    font-size: 1.05em;
    margin-top: 1em;
}

footer#contactenos div#formulario form label{
    font-size: 1.2em;
}

footer#contactenos div iframe{
	height:320px;
}

footer#contactenos div:first-of-type div{
	font:normal normal 500 1.2em/0.5em var(--primary-font);
	text-transform: uppercase;
	padding-top:0%;
	padding-bottom: 7.80%;
}

/*footer#contactenos div:first-of-type div ul{ 
}*/
footer#contactenos div:first-of-type div ul li{
    margin-top: 15px;
    margin-bottom: 20px;
    text-align: center;
    color: white;
    line-height: 18px;
    width: 90%;
    margin-left: 5%;
}

footer#contactenos h4{
    font-size:40px !important;
    text-align: center;
}

footer#contactenos ol{
	position: relative;
	list-style:none;
	margin:auto;
	width:215px;
	background: silver;
}
	
footer#contactenos ol li a{
	float:left;
	width:50px;
	height:50px;
	border-radius:100%;
	margin:20px 5px;
	text-align:center;
	line-height:52px;
    border:1px solid black;
}

footer#contactenos ol li:first-of-type a{	
    color:white;
	background:#3b5998;
}

footer#contactenos ol li:last-of-type a{	
	color:white;
	background:#075e54;
}

footer#contactenos #formulario{
	color:white;
	padding:2em;
	padding-top: 0;
    padding-bottom: 0;
}

footer#contactenos #formulario form input, footer#contactenos #formulario form textarea{
    margin:.5em auto;
}

footer#contactenos #formulario form input{
    padding: .6em;
	margin-top: .3em;
	margin-bottom: .3em;
	font-size: 1em;
	color: rgba(var(--secondary-color), 1.00);
}

footer#contactenos #formulario form textarea{
    max-width: 100%;
    min-width: 100%;
    max-height: 200px;
    min-height: 200px;
	font-size: 1.3em;
	color: rgba(var(--secondary-color), 1.00);
	margin-top: .3em;
}

footer#contactenos #formulario form input[type="submit"]{
    padding: 7.5px; 
    font:normal small-caps 800 1.2em var(--primary-font);    
	font-size: 1.5em;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}

/*=====  Fin de CONTÁCTENOS  ======*/

/*=============================================
ESCRITORIO GRANDE                    
=============================================*/
@media (min-width:1200px){
	/*Logotipo*/
	#logo img{
		margin-left: 35% !important;
		padding:1.5em 1.5em;
		width: 60% !important;
	}

	/*Botonera*/
	nav#botonera ul{
		flex-basis: 80%;
        border-bottom: 1px solid;
		margin-right: 8%;
		justify-content: center;
	}

	nav#botonera ul li{
		margin:.5% 3%;			
		text-align: center;
		display: inline-block;
		padding-bottom: 15px; 
		vertical-align: top;

	}

	nav#botonera ul li a{
		/*line-height: 12px;*/
		color: #fff; 
		/*font-weight: 100;*/
		border-radius: 2.5px;
		padding: 15px;
	}
    
    h1.title-big{
        font-size:3em;
    }
  
 /* display escr grn*/
@media(min-width: 1400px){		
	h1.title-big{
        font-size:3.6em;
    }

    nav#botonera ul li{
        margin:1em 3.4%;
    }
    
}
	
	/*Slide*/
	#slide ul{
		position: relative;
		margin: auto;
		height: auto;
		width:400%;
	}

	#slide div div.slideIzq span, #slide div div.slideDer span{
		padding: 20px;
		font-size: 2.5em;
		border-radius: 2.5px;
        text-shadow:0px 0px 10px #000;
	}
	
	#slide div div.slideIzq span{
		left: 2%;
	}
    
   
	#slide div div.slideDer span{
	    right: 2%;					
	}

	.slideCaption h3{
        font-size: 3.6em;
    }
    
    .slideCaption p{
        font-size:1.2em;
    }

    .slideCaption p:first-of-type{
		font-size: 1.8em;
    }

	#slide div div.slideDer span:hover, #slide div div.slideIzq span:hover{ 
        background-color: rgba(0, 0, 0, .5);
        color:green;
	}

	/*Galería*/
    
    #galeria ul{
		display:flex;
		flex-flow: wrap row;
    } 

	#galeria ul li{
		flex:0 1 calc(20% - 1em);
		margin:.5em;	
	}

	/*Prpductos*/


    #productos ul li{
		flex-basis: calc(33.3% - 3em);
		margin-left: 1em;
		margin-right: 1em;
		vertical-align: top;
		border-radius: 2px;
    }
     
	#productos ul li img{
		display:inline-block;
		vertical-align: top;
		border-radius: .1rem;
	}

	#productos ul li h2{
		text-align: center;
		width: 90%;
		display:inline-block;
		vertical-align: top;
		margin-left: 5%;
		margin-right: 5%;
		margin-bottom: 2rem;
	}

	#productos ul li p{
		font-size: .8em;
       	width: 90%;
		display:inline-block;
		vertical-align: top;
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 2rem;
	}

	#productos ul li button{
		margin-top: 20px;
		margin-bottom: 15px;
	}

/*anuncio reciclaje*/
#anuncio-reciclaje div hgroup h2{
	font-size: 3.3em;
}

#anuncio-reciclaje div hgroup h3{
	font-size: 2.4em;
}

#anuncio-reciclaje div:first-child p{
	font-size: 1.6em;
}

#anuncio-reciclaje div.grid-icons{
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows:1fr;
	grid-column-gap: 3.5em;
}

#anuncio-reciclaje div.grid-icons div.box-info-reciclaje div{
	width:65%;
	margin:0 auto;
}

#anuncio-reciclaje div.grid-icons img{
	aspect-ratio:4/2.3;
	/*width: 50%;
	height: 150px;
	*/
	padding: 1em;
	margin: 0 auto;
}

#anuncio-reciclaje div.grid-icons h3{
	margin-top:10px;	
}

#anuncio-reciclaje div div h3{
	font-size:2.4em;
}

#anuncio-reciclaje div div p{
	font-size: 1.7em;
}

#anuncio-reciclaje div.grid-icons div{
display: grid;
align-content: center;
text-align: center;
padding: .5em;
/*border-radius: 1em;
background-color: rgba(225,225,225,.40);
border:.2em solid green;
box-shadow: 3px 3px 10px 1px rgba(var(--secondary-color), 1.00); */
}

#anuncio-reciclaje div div.box-info-reciclaje h3{
	font-size:2.2em;
}

#anuncio-reciclaje div div.box-info-reciclaje p{
	font-size: 1.6em;
}

/*videos*/
#videos{
	display: flex;
	flex-flow: wrap row;
}
	
#videos div{
	flex:0 1 25%;
}

/*=============================================
CONTÁCTENOS           
=============================================*/
footer#contactenos{
    /*grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0em;
    justify-content: center;
    align-items: center;*/
    grid-template-areas:
        "map contact"
        "copyright copyright";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
	align-items: center;
}

footer#contactenos div:first-of-type{
    grid-area: map;
	
}

footer#contactenos #formulario{
    grid-area: contact;
}

footer#contactenos div:last-of-type{
    grid-area: copyright;
    text-align: center;
    font-style:italic;
    font-size: 1.05em;
    margin-top: 1em;
}

footer#contactenos div#formulario form label{
    font-size: 1.3em;
}

footer#contactenos div iframe{
	height:320px;
}

footer#contactenos div:first-of-type div{
	font:normal normal 500 1.2em/0.5em var(--primary-font);
	text-transform: uppercase;
	padding-top:0%;
	padding-bottom: 7.80%;
}
/*footer#contactenos div:first-of-type div ul{ 
}*/

footer#contactenos div:first-of-type div ul li{
    margin-top: 15px;
    margin-bottom: 20px;
    text-align: center;
    color: white;
    line-height: 18px;
    width: 90%;
    margin-left: 5%;
}

footer#contactenos h4{
    font-size:35px !important;
    text-align: center;
}

footer#contactenos ol{
	position: relative;
	list-style:none;
	margin:auto;
	width:215px;
	background: silver;
}
		
}

/*=====  Fin de ESCRITORIO GRANDE  ======*/
	
/*=============================================
ESCRITORIO MEDIANO                   
=============================================*/
	
@media (max-width:1199px) and (min-width:992px){
/*Logotipo*/
#logo img{
	margin-left: 45% !important;
	width: 50% !important;
}
	
nav#botonera ul{
	flex-basis: 80%;
	border-bottom: 1px solid;
	margin-right: 8%;
	justify-content: center;
}
	
nav#botonera ul li{
	width: 18%;
	text-align: center;		
	margin: 2% 2%;
}

nav#botonera ul li a{
	line-height: .3em;
	color: #fff;		
	font-weight: 500;
	padding: 1.2em;
	font-size: 1.2em;
	border-radius: .2em;
}

h1.title-big{
	font-size:2.8em;
	margin-top: .1em;
	width: 85%;
	margin-left: 7.5%;
	margin-right: 7.5%;
}

/*Slide*/

#slide ul{
	position: relative;
	margin: auto;
	height: auto;
	width:400%;
}

#slide div div.slideIzq span, #slide div div.slideDer span{
	text-shadow:0px 0px 10px #000;
	padding: 20px;
	font-size: 30px;
	border-radius: 2.5px;
}

#slide div div.slideIzq span{
	left: 2.5%;
	
}

#slide div div.slideDer span{
	right: 2.5%;					
}

.slideCaption h3{
	font-size: 3.5em;
}

.slideCaption p{
	font-size: 1.1em;
}

.slideCaption p:first-of-type{
	font-size: 1.6em;
}

#slide div div.slideDer span:hover, #slide div div.slideIzq span:hover{ 
	background-color: rgba(0, 0, 0, .5);
	color:green;
}

/*Galería*/
#galeria ul{
	display:flex;
	flex-flow: wrap row;
} 

#galeria ul li{
	flex:0 1 calc(25% - 1em);
	margin:.5em;	
}

/*Productos*/
#productos ul li{
	flex-basis: calc(50% - 1em);
	margin-left: .5em;
	margin-right: .5em;
	/*border-bottom: .15em solid black;*/
	border-radius: 2px;
}
	
#productos ul li img{
	display:inline-block;
	vertical-align: top;
	width:50%;
	margin:auto 20px 0 ;
	margin-left: 25% !important;
	margin-right: 25% !important;
}

#productos ul li h2{
	text-align: center;
	flex-basis: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: .9em;
}

#productos ul li p{
	flex-basis: 90%;
	font-size: .9em;
	margin-top: 1.2em;
	margin-left: 5%;
	margin-right: 5%;
	font-size: 1em !important;
}

/*videos*/

#videos{
	display: flex;
	flex-flow: wrap row;
}
	
#videos div{
	flex:0 1 25%;
}

/*anuncio-reciclaje*/
#anuncio-reciclaje{
	font-size: 1.1em;
}

#anuncio-reciclaje div.grid-icons{
	display: repeat(3, 80px) / auto-flow;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	justify-content: center;
	align-content: center;
	grid-gap: .5em;
}

#anuncio-reciclaje div.grid-icons div{
	display: grid;
	justify-content: center;
	align-content: center;
	grid-row-gap: .5em;
}

#anuncio-reciclaje div.grid-icons div:nth-child(1){
	/*grid-area: item1;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(2){
	/*grid-area: item2;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(3){
	/*margin-left: 50%;
	grid-area: item3;*/
	grid-template-columns: 100% !important;
	/*grid-template-areas:*/
}

/*=============================================
CONTÁCTENOS           
=============================================*/
footer#contactenos{
    /*grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0em;
    justify-content: center;
    align-items: center;*/
    grid-template-areas:
        "map contact"
        "copyright copyright";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
	align-items: center;
}

footer#contactenos div:first-of-type{
    grid-area: map;
	
}

footer#contactenos #formulario{
    grid-area: contact;
}

footer#contactenos div:last-of-type{
    grid-area: copyright;
    text-align: center;
    font-style:italic;
    font-size: 1.05em;
    margin-top: 1em;
}

footer#contactenos div#formulario form label{
    font-size: 1.3em;
}

footer#contactenos div iframe{
	height:320px;
}

footer#contactenos div:first-of-type div{
	font:normal normal 500 1.2em/0.5em var(--primary-font);
	text-transform: uppercase;
	padding-top:0%;
	padding-bottom: 7.80%;
}
/*footer#contactenos div:first-of-type div ul{ 
}*/

footer#contactenos div:first-of-type div ul li{
    margin-top: 15px;
    margin-bottom: 20px;
    text-align: center;
    color: white;
    line-height: 18px;
    width: 90%;
    margin-left: 5%;
}

footer#contactenos h4{
    font-size:35px !important;
    text-align: center;
}

footer#contactenos ol{
	position: relative;
	list-style:none;
	margin:auto;
	width:215px;
	background: silver;
}

}
	
/*=====  Fin de ESCRITORIO PEQUEÑO  ======*/
	
/*=============================================
TABLET                 
=============================================*/
	
@media (max-width:991px) and (min-width:768px){
/*title */
h1.title-big{
	font-size:35px;
	padding:2.5px;
	width:88%;
	margin-left:6%;
	margin-right:6%;
	margin-top:5px;
	margin-bottom:3px;
}

.title-small{
	font-size: 28px;
	padding: 2.5px;
	width: 95%;
	margin-left: 2.5%;
	margin-right: 2.5%;
}
	
/*Logotipo*/
#logo img{
	width: 100% !important;
	margin: 0 auto;
}

/*Botonera*/
nav#botonera{
	margin: 5px 0;
	width: 100%;
	margin-right: -3.5em;
	margin-top: .3em !important;
}
	
nav#botonera ul{
	width: 100%;
	justify-content: center;
}
	
nav#botonera ul li{
	width: 18%;
	text-align: center;	
	margin: 0 1%;
}

nav#botonera ul li a{
	padding: 18px;
	line-height: 5px;
	color: #fff;
	font-size: 1.15em;
	border-radius: .12em;
}

/*Slide*/
#slide ul{
	position: relative;
	margin: auto;
	height: auto;
	width:400%;
}

#slide div div.slideIzq span, #slide div div.slideDer span{
	position: absolute;
	text-shadow:0px 0px 10px #000;
	padding: 20px;
	font-size: 30px;
	border-radius: 2.5px;
}

#slide div div.slideIzq span{
	left: 2.5%;
}


#slide div div.slideDer span{
	right: 2.5%;					
}

.slideCaption h3{
	font-size: 2.5em;
}

.slideCaption p{
	font-size: 1.2em;
}

.slideCaption p:first-of-type{
	font-size: 1.6em;
}

#slide div div.slideDer span:hover, #slide div div.slideIzq span:hover{ 
	background-color: rgba(0, 0, 0, .5);
	color:green;
	font-size: 35px;
}

/*Galería*/
#galeria ul{
	display:flex;
	flex-flow: wrap row;
} 

#galeria ul li{
	flex:0 1 calc(33.33% - 1em);
	margin:.5em;
}

/*Productos*/
#productos ul li{
	flex-basis: calc(50% - 1em);
	margin-left: .5em;
	margin-right: .5em;
	border-radius: 2px;
}
	
#productos ul li img{
	width:70%;
	margin:20px 20px 20px 0 ;
	margin-left: 15% !important;
	margin-right: 15% !important;
}

#productos ul li h2{
	text-align: center;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: .3em;
}

#productos ul li p{
	font-size: 1em;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: .3em;
}

#productos ul li button{
	margin-top: 20px;
	margin-bottom: 15px;
}

/*anuncion-reciclaje*/
#anuncio-reciclaje{
	font-size: 1.1em;
}

#anuncio-reciclaje div.grid-icons{
	display: repeat(3, 80px) / auto-flow;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: 1fr;
	justify-content: center;
	align-content: center;
	grid-gap: .5em;
}

#anuncio-reciclaje div.grid-icons div{
	display: grid;
	justify-content: center;
	align-content: center;
	grid-row-gap: .5em;
}

#anuncio-reciclaje div.grid-icons div:nth-child(1){
	/*grid-area: item1;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(2){
	/*grid-area: item2;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(3){
	/*margin-left: 50%;
	/*grid-area: item3;*/
	grid-template-columns: 100% !important;
	/*grid-template-areas:*/
}

/*videos*/
#videos{
	display: flex;
	flex-flow: wrap row;
}
	
#videos div{
	flex:0 1 50%;
}


}
	
/*=====  Fin de TABLET  ======*/
	
/*=============================================
PHONES                
=============================================*/
	
@media (max-width:767px){
/*boton whatssapp*/
.btn-whatsapp{
	width: 50px;
	height: 50px;
	bottom:100px;
	right: 20px;
	line-height: 60px;
	z-index: 1000;
}

.btn-whatsapp i{
	font-size: 30px;
}

/*title */
h1.title-big{
	font-size: 28px;
	padding: 2.5px;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: .1em !important;
	margin-bottom: .1em !important;	
}

.title-small{
	font-size: 2rem;
	padding: 2.5px;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}

/*Logotipo*/
#logo{
	background: white;
}

#logo img{
	padding:5px 20%;
	padding-bottom: .4em;
	margin: 0 auto;
	width: 80% !important;
	margin-left: 10% !important;
}

/*Botonera*/
nav#botonera div:first-child{/*background-color: green !important;*/
		background: linear-gradient(30deg, green, rgba(0, 75, 0, 1.0));
}

nav#botonera button{
	background-color:black;
	margin-left: .2em !important;
	padding: .4em;
	border: none;
	cursor: pointer;
	margin-top:.3em;
	margin-bottom: .3em;
}

nav#botonera button i{
	/*background-color:*/
	color:rgba(0,165,0, 1.0);
}

nav#botonera{
	width: 100%;
	margin:0 auto !important;
	overflow-x:hidden;
	margin-top: .5em !important;
}

nav#botonera ul li{
	text-align: center;
	width: 100%;
}

nav#botonera ul li a{
	padding: .7em 1.5em;
	background-color:rgba(255,255,255,1.00);
	margin:5px auto;
	display: inline-block;
	font-size: 1.2em;
	font-weight: 1000;
	font-stretch: normal;
	color:#000;
	width: 90%;
	border-bottom: 1px solid black;
}

/*Slide*/
#slide ul{
	position: relative;
	margin: auto;
	height: auto;
	width:400%;
}


#slide div div.slideIzq span, #slide div div.slideDer span{
	position: absolute;
	text-shadow:0px 0px 10px #000;
	padding: 15px;
	font-size: 20px;
	border-radius: 2.5px;
}

#slide div div.slideIzq span{
	left: 3.5%;
}


#slide div div.slideDer span{
	right: 3.5%;					
}

#slide div div.slideDer span:hover, #slide div div.slideIzq span:hover{ 
	background-color: rgba(0, 0, 0, .5);
	color:green;
}

.slideCaption h3{
	font-size:2.4em;
}

.slideCaption p{
	font-size:1.15em;
}

.slideCaption p:first-of-type{
	font-size:1.4em;
}

/*Galería*/
#galeria ul{
	display:flex;
	flex-flow: wrap row;
} 

#galeria ul li{
	flex:1 1 calc(50% - 1em);
	margin:.5em;
}

/*Productos*/
#productos ul li{
	flex-basis: calc(50% - .5em);
	margin-left: .25em;
	margin-right: .25em;
	border-radius: .2rem;
	padding: .5em !important;
}

#productos ul li img{
	width: 75%;
	margin-left: 12.5% !important;
	margin-right: 12.5% !important;
}
	
#productos ul li h2{
	font-size: 1.4rem;
	text-align: center;
	width: 95%;
	margin-left: 2.5%;
	margin-right:2.5%;
	margin-bottom: .5em !important;
}

#productos ul li p{
	width: 95%;
	margin-left: 2.5%;
	margin-right:2.5%;
	font-size: 1.15rem;
	margin-top: .5em;
}

#productos ul li span{
	margin: 10px auto;
	width: 70%;
}

#productos ul li button{
	margin-top: 20px;
	margin-bottom: 15px;
}

/*anuncion-reciclaje*/
#anuncio-reciclaje{
	font-size: 1.1em;
}

#anuncio-reciclaje div.grid-icons{
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-content: center;
	align-content: center;
	grid-gap: .5em;
}

#anuncio-reciclaje div.grid-icons div{
	display: grid;
	justify-content: center;
	align-content: center;
	grid-row-gap: -1em;
}

#anuncio-reciclaje div.grid-icons div:nth-child(1){
	/*grid-area: item1;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(2){
	/*grid-area: item2;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(3){
	/*grid-area: item3;*/
	grid-template-columns: calc(100%-2em) !important;
	/*grid-template-areas:*/
}

/*videos*/
#videos{
	display: flex;
	flex-flow: wrap row;
}
	
#videos div{
	flex:0 1 calc(100% - 1em );
	margin: .5em;
}

/*anuncio reciclaje*/
#anuncio-reciclaje div.grid-icons{
	grid-template-columns: 1fr !important;
}

/*conactenos*/
footer#contactenos div:first-of-type div ul li{
	width: 90%;
	margin-left: 5%;
}  

}

@media(max-width: 480px){
/*logo*/
#logo img{
	width: 85% !important;
	margin: 0 auto;
	margin-left: 8% !important;
}

/* slide */
#slide img{
	min-height: 140px;
}

/*Productos*/
#productos ul{
	flex-basis: calc(100% - .5em);
	margin: .25em;
	padding: 0;
}

#productos ul li{
	flex-basis: calc(100% - 2rem);
	margin-left: 1rem;
	margin-right: 1rem;
	border-radius: .5rem;
}

#productos ul li h2{
	margin-bottom: 1em !important; 
}

#productos ul li p{
	margin-top: 1em !important;
}

#productos ul li img{
	width: 75%;
	margin-left: 12.5% !important;
	margin-right: 12.5% !important;
}


/*galeria*/ 
#galeria ul{
	display:flex;
	flex-flow: wrap row;
} 

#galeria ul li{
	flex:0 1 calc(100% - 1em);
	margin:1em .5em;
}

#galeria ul li img{
	width: 85%;
	margin-left: 7.5%;
}

/*anuncion-reciclaje*/
#anuncio-reciclaje{
	font-size: 1.1em;
}

#anuncio-reciclaje div.grid-icons{
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-content: center;
	align-content: center;
	grid-gap: .5em;
}

#anuncio-reciclaje div.grid-icons img{
	width: 100%;
}

#anuncio-reciclaje div.grid-icons div{
	display: grid;
	justify-content: center;
	align-content: center;
	grid-row-gap: -1em;
}

#anuncio-reciclaje div.grid-icons div:nth-child(1){
	/*grid-area: item1;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(2){
	/*grid-area: item2;*/
	grid-template-columns: calc(100%-2em);
}

#anuncio-reciclaje div.grid-icons div:nth-child(3){
	/*grid-area: item3;*/
	grid-template-columns: calc(100%-2em) !important;
	/*grid-template-areas:*/
}

/*contacto*/
footer#contactenos h4{
	font-size:35px !important;
	text-align: center;
}
 
/*footer#contactenos #formulario form input{
    width:95% !important;
    margin-left:2.5%;
} */
    
}

/*=====  Fin de PHONES  ======*/

@media (max-width: 320px){
/*logo */
#logo img{
	width: 95% !important;
	margin-left: 2.5% !important;
}

/*nav*/
nav#botonera ul li a{
	font-size:1em;
}

/*title */
.title-big{
	font-size: 25px;
	padding: 2.5px;
	width: 95%;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

/*slide*/
.slideCaption{
	margin-top: 0%;
}     

.slideCaption h3{
	font-size: 1.9em;
}

.slideCaption p{
	font-size: 1em;
}

.slideCaption p:first-of-type{
	font-size: 1.3em;
}

}

/*=============================================
PLUGIN SCROLL UP               
=============================================*/

#scrollUp {
  	bottom: 20px;
  	right: 20px;
  	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: url(../images/flecha.jpg);
}

/*=====  Fin de PLUGIN SCROLL UP  ======*/