/* --> Sanovo Greenpack website <<<-------*/
/* -------> Media Queries <<<-----------*/

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (max-width: 1190px) {
	
  header {position: relative;}
  header .center { display: inline-block; }
  header .logo {position: absolute; top: 50%; left: 45%; transform: translate(-50%, -50%); top:30px; }
	header .contacto {position: absolute; right: 0;  top:0!important; }
  header #hamburger  {position: absolute; left: 0; top:4px;}
	
  .center {width: 100%; height: auto; margin: 0 auto; padding: 0 20px;}
		
  #hamburger {display: block; margin-left: 16px;}
  body.fixed {}
  .menu ul:first-child {padding: 20px; }
  .menu ul ul:first-child  {padding: 30px 0 0 0; /*height:auto; overflow:none;*/}
	
  .menu {display: none; position:relative; margin-top: 20px; width: 100%; left: 0;  background-color: var(--light-green-2); color: var(--black); }
  .menu ul {display:inline-block;}
	
  #hamburger.close .menu-open {display: none;}
  #hamburger.close .menu-close {display:inline-block;}	
  #hamburger.open .menu-close  {display: none;}
  #hamburger.open .menu-open {display:inline-block;}
  
  .dropdown ul:nth-last-child(2) {border:none;}
  .dropdown ul {padding: 20px 0 0 0;}
  .dropdown ul .dropdown-title {margin-bottom: 10px!important; font-size: 1.0em!important; color:var(--dark-green); }
  .dropdown.active { transform: scale(1) translateX(0px);}
  .dropdown .last-link {border:none; padding: 20px 0 20px 0; font-weight: 700;}
	
  .dropdown {display: none; min-width: 100%; border: none !important; position: static; top: 0; left: 0; visibility: visible; opacity: 1; transform: none; box-shadow: none;}
  .menu.show, .dropdown.active { display: block;}
  .menu-bar {display: flex; flex-direction: column; align-items: stretch;  padding: 1em;}
  .menu-bar .nav-link { display: flex; justify-content: space-between; width: 100%;  margin: 0;}
  .menu-bar li:first-child .dropdown {min-width: 100%;}
  .menu-bar > li:not(:last-child) {padding-bottom: 0.5em;}
  .menu li {margin-bottom: 10px; padding-bottom: 10px; border-bottom:1px solid var(--light-grey);}
  .dropdown-btn {display: flex; justify-content: space-between; width: 100%;}
  .dropdown-btn .svgimage {height: 24px; width: 24px; float: right;}
  .menu ul {width: 100%;}
  .dropdown-link {padding: 10px 0px;}
  .menu li li {margin-bottom: 0!important; padding-bottom: 0!important; border-bottom:0!important;}
	
  .hero .text {width: 40%;}
  .hero img {  max-width:641px;width: 50%; height: 50%;}	
  .hero  {font-size: 0.900em;}

  .newsletter .center form {width:50%;}
	
  .novedades .main-article h4 {font-size: 1.875em;}
	
  footer .info .content {width: 100%; padding-left:20px;}
  footer .info .content {flex-direction:column;}
  footer .info .left ul {padding: 25px 0 0 0;}
  footer .info .right .content div:last-child {padding-top: 30px;}
	
  #contacto .intro {width: 100%;}
  #contacto .content {display: block;}
  #contacto .text {width: 100%; }
  #contacto .form {width: 100%; margin: 30px 0; padding:60px;}
  #contacto .agentes {padding-top:70px;}
	
  .wrapper-int .image img {width: 100%; height: auto;}
  .wrapper-int .image {margin: -20px 0 -110px 0; width: 48%;}
  .wrapper-int .text {width: 48%; height: auto;}
  .wrapper-int h1 {font-size: 2.500em; margin: 40px 0 25px;}
	
  #nosotros .vision .center div {padding: 20px; width:32%;}
  #nosotros .plantas li {width: 31%;}
  #nosotros .trayectoria .text p {width: 31%;}
  #nosotros .trayectoria img {width: 100%; height: auto;}
	
  #productos .contenido .info ul {display: inline-flex; flex-direction: column;}
  #productos .contenido .info li {flex:100%;}
  #productos .contenido .info li:before {content: "•"; display: inline-block; margin-right:8px;}
  #productos .contenido .info ul:before {content: none;}
  #productos .contenido .info ul:after {content: none;}

  #detalle-producto .content {display: inline-flex; flex-direction: column; width: 100%!important;}
  #detalle-producto .text {width: 100%!important; margin-bottom: 30px;}
  #detalle-producto .image {width: 100%!important;}
  #detalle-producto .text p {width: 100%!important;}
	
  #sostenibilidad .compromisos ul {column-count: 1;  column-gap:0;}
  #sostenibilidad .agua .center { padding: 0!important;}
 
  #sostenibilidad .certificaciones .button { line-height:1.200em;}
  #sostenibilidad .agua .bottom h5 {font-size:2.000em;}
  #sostenibilidad .agua .center {width: calc(100% - 40px); margin: 0 20px;}
	
  #novedades .lista-articulos article {flex: 0 0 48%;}
	
  #articulo .wrapper-int .detalle .image-right {width: 50%;}
  #articulo .wrapper-int .detalle .image-right img {width: 100%; height: auto;}
  #articulo .wrapper-int .quote img {width: 40%;}
	
  footer .copy {padding: 26px 20px 16px;}
	
	
}


@media (max-width: 769px) {
	
   body {font-size:1.125em!important;}
   .button {padding:0 20px;}
  .wrapper .button {padding:0 10px;}
	
  .menu {top: 50px;}
  .menu ul {display:inline-block;}

  .logo img {width: 48px; height: 48px;}
  .contacto span {display: none;}
  .contacto strong {text-transform: capitalize;}
  header .logo { margin-top: 8px;}
	
  .hero .text {width: 100%;}
  .hero img { width: 100%; height: 100%; margin-bottom: 20px;}	
  .hero h1 {font-size: 2.200em;}
  .hero .button {display: flex; justify-content:center;}
  .hero a {display: inline-flex; flex-direction: column; padding-top: 0px;}
  .hero p { padding: 10px 0 20px; }
	
  .productos {padding: 40px 20px; margin-top: 40px;}
  .productos .center {padding: 0;}
	
  .productos .grid {column-gap: 0; row-gap: 2%; 
	  grid-template-columns: 100%;
	  grid-template-rows: repeat(4, 1fr);
	  grid-template-areas: "item-1" "item-2" "item-3 item-4";
   }
  .productos .item-1 {grid-area: 1 / 1 / 2 / 2;}
  .productos .item-2 {grid-area: 2 / 1 / 3 / 2;}
  .productos .item-3 {grid-area: 3 / 1 / 4 / 2;}
  .productos .item-4 {grid-area: 4 / 1 / 5 / 2;}
	
  .productos .item img {width: 100%; height: 100%;}
  .productos .item {min-height:255px;}
  .productos .grid {height: auto; min-height: 1200px;}
  .productos .item-1 h2, .item-2 h2 {font-size: 1.875em;}
.productos .item-1 img, .productos .item-2 img { left:0;}	
  .newsletter {padding: 40px 0;}
  .newsletter .center {display: block;}
  .newsletter .center .text {width:100%;}
  .newsletter .center form {width:100%; display: flex; flex-direction: column; margin-top: 30px;}
	
  .novedades {padding: 40px 0;}
  .novedades .grid {display: flex; flex-direction: column;}
  .novedades .grid article {margin-bottom: 20px;}
  .novedades .main-article a {flex-direction: column;}
  .novedades .main-article .text {padding-bottom: 80px;}
  .novedades .main-article img {width: 100%; height: auto;}
  .novedades .main-article h4 {font-size: 1.500em;}
  .novedades .main-article span {font-size: 0.875em;}
  .novedades .article p { padding-top: 20px;}
  .novedades .article a {min-height: auto; padding-bottom: 80px;}
  .novedades article .text {width: 100%;}
	
  footer .info { flex-direction:column;}
  footer .info .left, footer .info .right {width: 100%;  padding: 40px 0;} 
  footer .info .content {flex-direction:column;}
  footer .copy {flex-direction:column; padding: 20px; padding-top: 30px;}
  footer .copy p {line-height: 1.900em;}
	
  #contacto h1 {margin-top: 20px; font-size: 2.5em!important;}
  #contacto .content {padding-bottom: 40px;}
  #contacto .form {padding: 100px;}
  #contacto .text ul{display: block;}
  #contacto .text ul li {width: 100%;}
  #contacto .text ul li:first-child {margin-bottom: 20px;}
	
  #contacto .agentes {padding: 40px 0;}
  #contacto .agentes h3 {margin-bottom: 20px; font-size: 2.5em!important;}
  #contacto .agentes ul li {display: block;}
  #contacto .agentes ul li div {width:100%;}
	
  .wrapper-int .image {margin: 20px 0; width: 100%;}
  .wrapper-int .text {width: 100%;}
  .wrapper-int .content {flex-direction:column; padding-bottom: 20px;}
  .wrapper-int h1 {font-size: 2.200em;}
	
  #nosotros .vision { padding: 40px 0;}
  #nosotros .plantas { padding: 80px 0 40px;}
  #nosotros .trayectoria { padding: 0 0 40px;}
	
  #nosotros .vision .center div {padding: 25px; width:100%; margin-bottom: 20px;}
  #nosotros .vision .center {flex-direction:column;}
  #nosotros .plantas .miscelanea { width:90%; background-size:contain; }
  #nosotros .plantas li {width: 100%; margin-bottom: 40px;}
  #nosotros .plantas ul {flex-direction:column; padding: 80px 0 20px;}
  #nosotros .trayectoria .text p {width: 100%; margin-bottom: 20px;}
  #nosotros .trayectoria .text {flex-direction:column;}
  #nosotros .trayectoria h4 {font-size: 2.200em;}
  #nosotros .trayectoria h5 {font-size: 1.850em;}
  #nosotros .vision h2 {font-size: 1.850em;}
	
.grid-estuches {
  grid-template-columns: 1fr; 
  grid-template-rows: 374px 374px 374px 374px 374px;
  gap: 20px; 
  grid-template-areas:  "item-1" "item-2" "item-3" "item-4" "item-5"; 
}
	
.grid-maple {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 374px 374px 374px 374px 374px 374px; 
  gap: 20px;  
  grid-template-areas: "item-1" "item-2" "item-3" "item-4" "item-5" "item-6"; 
}
	
	#productos .contenido .info p {font-size: 1.850em; line-height: 1.2em;}
	#productos .listado h2 {font-size: 2.200em;}
	#productos .contenido .info {padding: 30px 20px;}
	#productos .contenido {padding: 40px 0;}
	.grid-maple {margin-bottom: 40px;}
	
	#productos .grid-maple .item-6 p {  padding: 0 0 10px 0;}
	
	#detalle-producto .text .link {width: 100%; float:none;}
	#detalle-producto .text .button {float:none; margin-top: 20px; width: 100%;}
	#detalle-producto .recomendaciones li {flex: 100%; margin-bottom: 20px;}
	#detalle-producto .recomendaciones li {padding:30px 20px;}
	#detalle-producto .recomendaciones li a {position: relative; bottom: auto; width: 100%; }
	
	#detalle-producto table td {font-size: 1.000em;}
	#detalle-producto table td:first-child { padding-right: 10px;}
	
	#detalle-producto .recomendaciones h2 {font-size: 1.800em; margin-bottom: 20px;}
	#detalle-producto .recomendaciones {padding: 40px 0;}
	#detalle-producto .content {padding-bottom: 40px;}
	
	.breadcrumbs {margin-top:0;}
	
	
	#sostenibilidad .certificaciones ul {display: inline-flex; flex-direction: column; width: 100%!important;}
    #sostenibilidad .certificaciones li { flex: 100%; padding: 20px; padding-bottom: 140px;}
	#sostenibilidad .agua .top {display: inline-flex; flex-direction: column; width: 100%!important;}
    #sostenibilidad .agua .top div {width: 100%;}
    #sostenibilidad .agua .top div:first-child {padding: 20px;}
    #sostenibilidad .agua .top div img {width:100%; height: auto;}
    #sostenibilidad .agua .bottom {display: inline-flex; flex-direction: column; width: 100%!important; margin-top: -6px;}
    #sostenibilidad .agua .bottom  div {width: 100%;}
    #sostenibilidad .agua .bottom div:first-child {width:100%; padding: 20px;}
    #sostenibilidad .agua .bottom div:last-child {width:100%; padding: 20px;}	
  
	#sostenibilidad .compromisos {padding-top: 45px;}
	#sostenibilidad .compromisos h2 {font-size:1.800em;     margin-bottom: 30px;}
	#sostenibilidad .compromisos li {line-height: 1.600em;}
	#sostenibilidad .compromisos .miscelanea { width:90%; background-size:contain; background-position: center;}
	#sostenibilidad .certificaciones {padding-top: 70px;}
	#sostenibilidad .certificaciones h3 {font-size:1.800em;}
	#sostenibilidad .certificaciones .button { bottom:20px; width: calc(100% - 40px);  line-height:1.200em; text-align: center; min-height: 64px; height: auto; padding:10px;}
	#sostenibilidad .certificaciones li:last-child div  {padding: 20px; padding-bottom: 140px;}
	#sostenibilidad .certificaciones .frase {padding: 0; font-size:1.400em;}
	#sostenibilidad .agua .top h3, #sostenibilidad .agua .bottom h5 {font-size:1.800em;}
	#sostenibilidad .agua .top p {line-height: 1.600em;}
	#sostenibilidad .certificaciones li {margin-bottom: 20px;}
	
	#novedades .info .button {margin-top: 40px; padding:10px;}
	#novedades .lista-articulos {display: inline-flex; flex-direction: column; width: 100%!important;}
    #novedades .lista-articulos article  {flex: 100%;}
	#novedades .lista-articulos article h3 {margin: 0}
	#novedades .lista-articulos article p {margin: 16px 0;}
	
	#articulo .wrapper-int .detalle .left {float: none; width: 100%; padding-right: 0;}
	#articulo .wrapper-int .detalle .image-right {width: 100%; float: none; margin-bottom: 30px;}
	
	#articulo .wrapper-int .quote {display: inline-flex; flex-direction: column; width: 100%!important;}
	#articulo .wrapper-int .quote img {width: 100%; height: auto;}
	#articulo .wrapper-int .quote p {margin:30px 0 0 0;}
	#articulo .wrapper-int .paginador a:first-child {padding-right: 10px;}
	#articulo .wrapper-int .paginador a:last-child {padding-left: 10px;}
	#articulo .wrapper-int .paginador a {display: inline-block;}
	#articulo .wrapper-int {padding-top: 65px;}
	#articulo .wrapper-int .text h1 {font-size:1.800em;}
	#articulo .wrapper-int .text {padding-bottom: 40px;}
	#articulo .wrapper-int .detalle {margin: 40px auto;}
	#articulo .wrapper-int .quote p {line-height: 1.500em;}
	
}