/*
Theme Name: FUN Detergentes
Theme URI: https://fundetergentes.pt
Author: jellyink.pt
Author URI: https://www.jellyink.pt
Description: FUN is a theme made for the fun detergents
Version: 1.0
Text-domain: fun
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

*, a, *:focus{outline: 0 !important;}
*{box-sizing: border-box;}
body{
  font-size: 1.6rem;
  left: 0;
  min-width: 320px;
  min-height: 100%;
  min-height: 100vh;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
html{margin-top:0 !important;}
a{
  text-decoration: none;
  color: inherit;
  outline: 0 !important;
}
a:hover, a:active, a:focus {
  outline: 0 !important;
  text-decoration: none;
  color: inherit;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display: block;}
body, h1, h2, h3, h4, h5, h6{line-height: 1;}
ol, ul{list-style: none;}
table{border-collapse: collapse;border-spacing: 0;}
img{max-width:100%;}

/********* FONT *********/
@font-face {
  font-family: 'Gotham';
  src: url("inc/fonts/Gotham-Book.otf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url("inc/fonts/Gotham-Bold.otf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url("inc/fonts/Gotham-Black.otf");
  font-weight: 800;
  font-style: normal;
}

/********* PAGE *********/
body {
  font-family: 'Gotham', sans-serif !important;
  font-weight: 400;
  background-color: #ffffff;
  color: #25508B;
  font-size: initial;
  overflow-x: hidden;
}

.container{
  padding:0 55px;
  width:100%;
}

#main-hero{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}
#main-hero .container{display:flex;}
#main-hero .col-esq, #main-hero .col-dir{width:50%;}
#main-hero .col-esq{text-align:center;}
#main-hero .col-esq img{display:block;margin:-100px auto 0 auto;max-width:650px;}
#main-hero .col-esq img#hero-headline, #main-hero .col-dir img#hero-logo{display:none;}
#main-hero .col-esq p{
  color:#fff;
  margin:10px auto 185px auto;
  text-align:left;
  width:325px;
  line-height:1.2;
}
#main-hero .col-dir img{margin-top:50px;margin-bottom:30px;}

#gama-detergentes{background-color:#DBF5FF;padding:60px 0 45px 0;}
#gama-detergentes .container{display:flex;}
#gama-detergentes .col-esq{width:40%;padding-right:50px;text-align:center;align-content:center;}
#gama-detergentes .col-dir{width:60%;}
#gama-detergentes .col-esq h2{font-size:1.251rem;font-weight:800;}
#gama-detergentes .col-esq h3{margin:15px 0;font-size:2.188rem;font-weight:800;}
#gama-detergentes .col-esq p{
  text-align:left;
  font-size:0.813rem;
  line-height:1.3;
}
#gama-detergentes .col-esq p:last-child{font-weight:700;margin-top:20px;}
#gama-detergentes .col-dir{display:flex;}
#gama-detergentes .col-dir .col-dir-prod{text-align:center;line-height:1.2;width:25%;}
#gama-detergentes .col-dir .col-dir-prod .produto-det{
  width:100%;
  padding-top:100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:bottom center;
}
#gama-detergentes .col-dir .col-dir-prod h4{
  font-weight:700;
  margin-top:10px;
  margin-bottom:5px;
  font-size:0.813rem;
}
#gama-detergentes .col-dir .col-dir-prod p{font-size:0.625rem;padding: 0 10px;}

#destaque-produto{
  background-image:url(img/fundo_destaque.webp);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  padding:50px 0;
}
#destaque-produto .container{display:flex;padding:0 100px;}
#destaque-produto .col-esq{
  width:28%;
  margin:0 5% 0 15%;
  align-content:center;
  text-align:center;
  color:#005B0D;
}
#destaque-produto .col-dir{width:53%;}
#destaque-produto .col-dir img{max-width:400px;}
#destaque-produto .col-esq h2{
  text-transform:uppercase;
  font-size:2.813rem;
  margin-bottom:30px;
  font-weight:800;
}
#destaque-produto .col-esq p{font-size:0.813rem;}
#destaque-produto .col-esq p:first-of-type, #destaque-produto .col-esq p span{font-weight:700;}
#destaque-produto .col-esq p:first-of-type{margin-bottom:10px;}

#gama-amaciadores{background-color:#FFFED4;padding:60px 0 45px 0;}
#gama-amaciadores .container{display:flex;}
#gama-amaciadores .col-esq{width:35%;align-content:center;padding-right:50px;text-align:center;}
#gama-amaciadores .col-dir{width:65%;}
#gama-amaciadores .col-esq h2{font-size:1.251rem;font-weight:800;margin-bottom:15px;}
#gama-amaciadores .col-esq p{
  text-align:left;
  font-size:0.813rem;
  line-height:1.3;
}
#gama-amaciadores .col-dir{display:flex;}
#gama-amaciadores .col-dir .col-dir-prod{text-align:center;line-height:1.2;width:20%;}
#gama-amaciadores .col-dir .col-dir-prod .produto-det{
  width:100%;
  padding-top:100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:bottom center;
}
#gama-amaciadores .col-dir .col-dir-prod h4{
  font-weight:700;
  margin-top:10px;
  margin-bottom:5px;
  font-size:0.813rem;
}
#gama-amaciadores .col-dir .col-dir-prod p{font-size:0.625rem;padding: 0 10px;}

#main-footer{
  background-color:#C9F2E3;
  padding:25px 0 25px 0;
}
#main-footer #footer-content{display:flex;}
#main-footer #footer-content .col-dir, #main-footer #footer-content .col-esq{width:calc(50% - 100px);}
#main-footer #footer-content .col-esq{text-align:center;position:relative;z-index:100;}
#main-footer #footer-content .col-esq p{
  font-weight:700;
  margin:20px 0 15px 0;
  font-size:0.813rem;
}
#main-footer #footer-content .col-esq button{
  background-color:#25508B;
  color:#C9F2E3;
  font-weight:700;
  font-size:1.375rem;
  border:none;
  border-radius:15px;
  padding:10px 25px 12px 25px;
  line-height:1;
  cursor:pointer;
}
#main-footer #footer-content .col-center{height:155px;width:200px;}
#main-footer #footer-content .col-center img{margin-top:-60px;}
#main-footer #footer-content .col-dir{margin-top:20px;}
#main-footer #footer-content .col-dir h2{font-size:1.25rem;font-weight:700;margin-bottom:15px;}
#main-footer #footer-content .col-dir .col-dir-contact{display:flex;}
#main-footer #footer-content .col-dir .col-dir-contact > div{text-align:center;padding:0 10px;display:flex;gap:7px;}
#main-footer #footer-content .col-dir .col-dir-contact .col-dir-email{padding-left:0;}
#main-footer #footer-content .col-dir .col-dir-contact > div p{font-weight:700;line-height:1.3;font-size:0.813rem;}
#main-footer #footer-content .col-dir .col-dir-contact > div p a{font-weight:400;margin:3px 0;display:block;}
#main-footer #footer-content .col-dir .col-dir-contact > div p span{font-weight:400;font-size:0.688rem;}
#main-footer p#copyright{font-size:0.875rem;text-align:center;}
#main-footer p#copyright a{text-decoration:underline;}

.modal {
  display: none;
  position: fixed;
  z-index:1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.show{display: block;opacity:1;}
.modal-content {
  background-color: #DBF5FF;
  margin: 15% auto;
  padding: 7px 20px 35px 20px;
  width: 50%;
  border-radius: 15px;
  text-align: center;
}
.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor:pointer;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.modal-content .dropdown-title {
  margin: 50px auto 15px auto;
  font-weight:800;
  font-size:2rem;
}
.modal-content select {
  width: 225px;
  height: 35px;
  margin-bottom: 20px;
}
.modal-content ul li {margin-bottom: 10px;}
.modal-content ul li span {font-weight: 700;}

@media all and (max-width:1199px){
  
  #main-hero .col-esq img{margin-top:-65px;}

  #main-footer #footer-content .col-dir .col-dir-contact{flex-direction:column;}
  #main-footer #footer-content .col-dir .col-dir-contact > div{text-align:left;padding:0;margin-bottom:10px;}
  #main-footer #footer-content .col-dir .col-dir-contact .col-dir-redes{margin:10px 0 25px 0;}

}

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

  #destaque-produto .container, .container{padding:0 65px;}
  
  #main-hero .col-esq p{width:100%;margin-bottom:70px;}
  #main-hero .col-dir{padding-left:20px;}

  #gama-detergentes .col-esq, #gama-amaciadores .col-esq{padding-right:35px;}

  #destaque-produto .col-dir{width:45%;}
  #destaque-produto .col-dir img{max-width:100%;}
  #destaque-produto .col-esq{width:50%;margin:0 5% 0 0;}
  #destaque-produto .col-esq h2{font-size:3rem;}

  .modal-content{width:96%;}

}

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

  #destaque-produto .container, .container{padding:0 35px;}

  #main-hero .col-esq img{margin-top:-30px;max-width:100%;}

  #gama-detergentes{padding-bottom:0;}
  #gama-detergentes .container{flex-direction:column;flex-wrap: wrap;}
  #gama-detergentes .col-esq{padding-right:0;}
  #gama-detergentes .col-esq, #gama-detergentes .col-dir{width:100%;}
  #gama-detergentes .col-esq h2{margin-top:0;}
  #gama-detergentes .col-esq p:last-child{margin-bottom:40px;}
  #gama-detergentes .col-dir{flex-wrap: wrap;}
  #gama-detergentes .col-dir .col-dir-prod{width:50%;margin-bottom:35px;}
  #gama-detergentes .col-dir .col-dir-prod img{margin:0 auto;max-width:100%;}

  #destaque-produto{background-image:url(img/fundo_destaque_mobile.jpg)}

  #gama-amaciadores{padding-bottom:0;}
  #gama-amaciadores .container{flex-direction:column;flex-wrap: wrap;}
  #gama-amaciadores .col-esq{padding-right:0;}
  #gama-amaciadores .col-esq, #gama-amaciadores .col-dir{width:100%;}
  #gama-amaciadores .col-esq h2{margin-top:0;}
  #gama-amaciadores .col-esq p:last-child{margin-bottom:40px;}
  #gama-amaciadores .col-dir{flex-wrap: wrap;justify-content:center;}
  #gama-amaciadores .col-dir .col-dir-prod{width:33.3333%;margin-bottom:35px;}
  #gama-amaciadores .col-dir .col-dir-prod img{margin:0 auto;max-width:100%;}

  #main-footer #footer-content{flex-wrap:wrap;}
  #main-footer #footer-content .col-esq{width:100%;margin-bottom:30px;}
  #main-footer #footer-content .col-center{width:145px;}
  #main-footer #footer-content .col-center img{max-width:150%;margin-left:-40%;}
  #main-footer #footer-content .col-dir{width:calc(100% - 145px)}
  #main-footer #footer-content .col-dir .col-dir-contact{flex-wrap:wrap;flex-direction:row;}
  #main-footer #footer-content .col-dir .col-dir-contact .col-dir-email, #main-footer #footer-content .col-dir .col-dir-contact .col-dir-tel{width:50%;}

}

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

  #destaque-produto .container, .container{padding:0 25px;}
  
  #main-hero .container{flex-direction:column-reverse;}
  #main-hero .col-dir, #main-hero .col-esq{width:100%;}
  #main-hero .col-esq img#hero-logo-headline{display:none;}
  #main-hero .col-esq img#hero-headline{margin-top:0;display:block;max-width:250px;}
  #main-hero .col-esq p{margin:20px 0 45px 0;font-size:0.813rem;}
  #main-hero .col-dir{padding-left:0;}
  #main-hero .col-dir img{margin:-75px 0 15px 0;}
  #main-hero .col-dir img#hero-logo{margin:-55px 0 0 -65px;display:block;}

  #gama-detergentes, #gama-amaciadores{padding:30px 0 10px 0;}
  #gama-detergentes .col-esq h2, #gama-amaciadores .col-esq h2{font-size:1rem;}
  #gama-detergentes .col-esq h3{font-size:1.563rem;}
  #gama-detergentes .col-esq p, #gama-amaciadores .col-esq p{font-size:0.75rem;}

  #destaque-produto .container{flex-direction:column-reverse;}
  #destaque-produto .col-esq, #destaque-produto .col-center{width:100%;text-align:center;}
  #destaque-produto .col-esq{padding-right:0;margin-top:25px;}
  #destaque-produto .col-center img{max-width:250px;}
  #destaque-produto .col-esq h2{font-size:1.875rem;}
  #destaque-produto .col-dir{width:100%;text-align:center;}
  #destaque-produto .col-dir img{max-width:200px;margin-bottom:30px;}

  #main-footer #footer-content{flex-direction:column;}
  #main-footer #footer-content .col-esq button{font-size:1rem;padding:8px 20px 10px 20px;border-radius:10px;}
  #main-footer #footer-content .col-center{width:100%;height:120px;margin-bottom:10px;text-align:center;}
  #main-footer #footer-content .col-center img{max-width:100%;margin-left:0;margin-top:-85px;width:300px;}
  #main-footer #footer-content .col-dir{width:100%;}
  #main-footer #footer-content .col-dir .col-dir-contact .col-dir-email, #main-footer #footer-content .col-dir .col-dir-contact .col-dir-tel{width:100%;}
  #main-footer #footer-content .col-dir .col-dir-contact > div, #main-footer #footer-content .col-dir h2{text-align:center;}
  #main-footer #footer-content .col-dir h2{font-size:1rem;}
  #main-footer #footer-content .col-dir .col-dir-contact > div p{width:100%;}
  #main-footer #footer-content .col-dir .col-dir-contact .col-dir-redes{margin:10px auto 25px auto;}
  #main-footer p#copyright{font-size:0.688rem;}

}