/*!
Theme Name: MensHealthLatam
Theme URI: https://menshealthlatam.com/
Author: riqrdo
Author URI: https://riqrdo.com/
Description: Men's Helath Latam WordPress Theme
Version: 1.0.0
Tested up to: 6.2
Requires PHP: 7
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: menshealthlatam
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
@charset "UTF-8";

:root{
  --primary: #d2232e;
  --secondary:#efebde;
  --terciary:#8FACE1;
  
  --lightgray:#e8e8e8;
  --darkgray:#798897;

  --black:#111;
  --white:#fff;

  --fontSize: 1rem;
  --fontSize-XLarge: 2rem;
  --fontSize-Large: 1.4rem;
  --fontSize-Medium: 1.2rem;
  --fontSize-Small: 0.8rem;

  --fontFamily: "toKnow";
  --fontHarriet: "Harriet";
  --fontGraphik: "Graphik";
  --fontCharter: "Charter";
  --fontCharter-two: "Charter2";
  --fontGraphikCondensed: "Graphik-Condensed";
  --fontCharter-test: "Charter-test";
  
  --spacing: 1.2rem;

  --colortext:#333;
}

/* @font-face {
  font-family: "toKnow";
  src: url("webfonts/toKnow.woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Harriet";
  src: url("webfonts/Harriet-Bold.woff2");
  font-weight: 800;
  font-style: italic;
} */

@font-face {
  /* bold sans for tags cats or small things */
  font-family: "Graphik";
  src: url("webfonts/Graphik-Bold.woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  /* condensed */
  font-family: "Graphik-Condensed";
  src: url("webfonts/Graphik-Condensed-Bold.woff2");
  font-weight: 800; 
  font-display: swap;
}

/* @font-face {
  //display article text 
  font-family: "Charter";
  src: url("webfonts/Charter.woff2");
  font-weight: 400;
} */

/* @font-face {
  font-family: "Charter2";
  src: url("webfonts/Charter2.woff2");
  font-weight: 400;
} */
@font-face {
  font-family: "Charter-test";
  src: url("webfonts/Charter-reg.woff2");
  font-weight: 100;
  font-display: swap;
}

/* reset */
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}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}em{ font-style:italic;}

/* normalize */
html, body {margin: 0;padding: 0;-webkit-text-size-adjust:none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body{/* background: #f0f0f0; */font: 400 var(--fontSize) "Graphik", sans-serif;color:#444;position:relative;}
html{position:relative;overflow-x: hidden;}
h1,h2,h3,h4,h5{margin-bottom:10px;font-weight: 900;}
h1{font-size:1.6em;}
h2{font-size: 1.4em;}
h3{font-size: 1.2em;}
h4{font-size: 1.1em;}
h5{ font-size:1em;}

.visually-hidden {display: none;}

button{ border:none}
ul,li{ list-style:none; list-style-position:outside;}
.btn,a, a img, img{ outline:none; text-decoration:none;}


/* buttons */
.btn,.wp-block-button__link{align-items:center;padding: 0 1rem;display: inline-flex;text-align: center;cursor: pointer;font: 600 var(--fontSize-Small) var(--fontGraphik);border: none;background: var(--white);color: var(--black);text-transform: uppercase;height: 35px;border: 2px solid var(--black)!important;border-radius: 0;}
.btn i{ margin:0 1rem 0 0}
.btn.large{ font-size:1.1rem}
.btn.secondary{background:var(--black); color:var(--white)}
.btn.block{display:block;width: 100%;clear: both;}
.btn.center{ display:block; margin:0 auto; width:100px}
.btn:hover{opacity:0.9; transform: translate(-2px, -2px); transition: 0.5s;}

/* all */
*{box-sizing:border-box;}
a,.has_animation{transition:.4s ease-out;}

/* transition */
.trans{transition: all 500ms ease-out; }

/* conatiners */
main{width:100%;left:0;z-index: 1;position: relative;}
.inner{max-width: 1300px;margin:0 auto;width: 94%;display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
.content{ min-height: 50vh;}
.pubs{display: flex;align-items: center;justify-content: center;padding: 1rem 0;background: var(--lightgray);width: 100%;overflow: hidden;content-visibility: auto;contain-intrinsic-size: 300px;}
.pubs * { max-width: 100%;}
.inner .pubs {background: transparent;}

/* cols */
.wrapper{overflow:hidden;padding: 2rem 0;display: flex;justify-content: space-between;flex-wrap: wrap;width: 100%;}
.wrapper > *{min-height:1rem;margin-bottom: 1rem;}
.col_1{width: 100%;}
.col_2{width: 48%;}
.col_3{width: 30%;}
.col_4{ width:23%;}
.col_5{ width:18%;}
.col_3f{width: 64%;}
.col_4f{width: 73%;}
.col_aside{width: calc(100% - 320px);position: relative;display: block;}


/* header */
header{position: sticky;width: 100%;background: var(--primary);margin: 0 auto;box-shadow: 0 3px 6px rgba(0,0,0,.2);top: 0;z-index: 2; display: flex; justify-content: space-between; padding: 0.5rem 1rem;}
header .logo{width: 120px;display: block;margin-right: 0.5rem; flex: 1;}
header .logo svg{ fill: var(--white)}
header .logo img{width:100%;height: 100%;object-fit: contain;}
header .right {align-items:center; display: flex;}
header .left { align-items:center; display: flex;}
header menu{display: flex;align-items: center;}
header menu ul{ display:flex;}
header menu ul li{display: flex;align-items: center;justify-content: center;}
header menu ul li a{display:block;letter-spacing: 1px;text-transform: uppercase;padding: 0 0.6rem;position:relative;font-size: 0.75rem;color: var(--white);} 
header menu ul li a:after{height: 1px;content:'';position:absolute;width:0%;bottom: calc(50% - 0.8rem);background: var(--white);left: 50%;transition:.4s}
header menu ul li a:hover:after{left: 1rem;width: calc(100% - 2rem);}
header menu ul li a:visited{ color: var(--white);}
.admin-bar header{top:30px}


nav{position: fixed;padding: 2rem 1rem;width: 90%;transition:none;background: var(--white);margin: 0;height: 100%;top: 0;z-index: 3;transition: 1s;transform: translateX(-105%);left: 0;max-width: 400px;box-shadow: 0 0 10px rgba(0,0,0,.2);}
nav ul li{margin: 0 0 1rem;}
nav ul li a{display:block;padding: 0.5rem 1rem;text-transform: uppercase;color: #333; position:relative;}
nav ul li a:after{height: 1px;content:'';position:absolute;width:0%;bottom: calc(50% - 0.8rem);background: var(--black);left: 50%;transition:.4s}
nav ul li a:hover:after{left: 1rem;width: calc(100% - 2rem);}
nav .nav_content{height:100%;overflow: auto;}
.navigation nav{ transform: translate(0);}
nav .close{ top:0.5rem;; right:0.5rem}
.admin-bar nav{ padding-top:60px}
.admin-bar nav .close{top: 40px;}

.searchform {display: flex;padding: 1rem;margin-top: 0.5rem;align-items: center;}
.searchform .btn {height: 40px;display: block;border: none;width: 40px;}
.searchform .btn i{ margin:0}
.searchform .btn span{ display: grid; position: relative; place-items: center;}
.searchform .btn span:after{content: "";width: 13px;height: 13px;border: 2px solid #fff;position: absolute;border-radius: 10rem;transform: translate(3px, -4px);}
.searchform .btn span:before{content: "";width: 2px;height: 10px;background: #fff;position: absolute;transform: translate(-6px, 6px) rotate(45deg);}
.searchform input { height:40px}


/* Si */
.open_nav{width: 40px;height: 35px;text-align: center;display: flex;align-items: center;justify-content: center;margin-right: 0.5rem; cursor: pointer;}
.open_nav span, .open_nav span:before, .open_nav span:after {cursor: pointer;border-radius: 1px;height: 2px;width: 21px;background: #fff;position: absolute;display: block;content: '';border-radius: 12px;}
.open_nav span:before {top: -7px;}
.open_nav span:after {bottom: -7px;}
.open_nav span, .open_nav span:before, .open_nav span:after {transition: all 700ms ease-out;}
.open_nav.active span {background-color: transparent;}
.open_nav.active span:before, .open_nav.active span:after {top: 0;}
.open_nav.active span:before {transform: rotate(45deg);}
.open_nav.active span:after {transform: rotate(-45deg);}

/* footer */
footer{width: 100%; background: var(--black);position: relative;z-index: 1; padding: 4rem 0;}
footer .logos_social{ display: flex; align-items: center;}
footer .logos_social .logo{ width: 160px; height: 40px; margin: 0 3rem 0 0;}
footer .logos_social .logo svg{ fill: var(--white)}
footer .opts li { margin-bottom: 1rem;}
footer .opts a{ color: var(--white); font: 100 var(--fontSize-Small) var(--fontGraphik);}
footer .legal { display: flex; justify-content: flex-end; align-items: end;}
footer p { text-align: right; font: 100 var(--fontSize-Small) 'Helvetica',sans-serif; margin: 0 0 1rem; color: var(--white);}

.social{ display: flex;}
.social a{ width: 40px; height:40px; color: var(--white); display: grid; place-items: center; padding: 10px;}
nav .social { border-top: 1px solid #333; margin: 0 1rem; padding:1rem 0;}
nav .social a{color: var(--black);border: 1px solid #ddd;margin-right: 0.5rem;}

form .wrapper{ padding:0}
form label{position:relative;display: block;margin: 0 0 1rem;}
form label select:before{content:'a'; position:absolute; height:40px; bottom:0; right:0; color:#fff; width:40px; line-height:40px; text-align:center;}
form input,form textarea,form select{display:block;width:100%;height: 50px;font: normal 1em var(--fontGraphik), sans-serif;outline:none;appearance: none;padding: 0 1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;z-index: 1;border: 2px solid var(--black);background: #fff;}
form textarea{ height:100px!important; padding: 1rem}
form label input:focus + span, form label select:focus +span, form label textarea:focus + span{color: #b4b4b4;width: 100%;opacity: 1;background: #e6e5e5;}
form label.select:after{font: 900 1em/30px 'Font Awesome 5 Free';content:"\f107";position:absolute;right: 10px;height:40px;bottom: 0;line-height:40px;z-index: 0;color: #686765;}
form label.checkbox{font-weight: bold;border-radius: 0;color: #888;display: flex;align-items: center;min-height: 40px;overflow: hidden;font-size: var(--fontSize-Small);margin: 0;gap: .4rem;}
form label.checkbox span{position:relative;}
form label.checkbox span a{text-decoration:underline;}
form label.checkbox i{display:block;width: 28px;height: 28px;line-height: 28px;text-align:center;font-family: 'Font Awesome 5 free';background: #d9d9d9;border-radius: 4px;font-size: .9em;color: #fff;opacity: .5;cursor: pointer;margin: 0 1rem 0 0;}
form label.checkbox input:checked + i{background: var(--primary);opacity: 1;position: relative;display: grid;place-items: center;}
form label.checkbox input:checked + i:after{content:"";width: 6px;height: 13px;border-right: 3px solid #fff;border-bottom: 3px solid #fff;display: block;transform: rotate(45deg);margin: -4px 0 0;position: absolute;}

form label.checkbox input{position:absolute;left: -19%;width: inherit;height: inherit;}
form fieldset.flex{display: flex;}
form fieldset.flex .btn{  height: 50px;}
form .grunion-field-label {display:none}
form .wp-block-jetpack-contact-form{ padding:0!important}
form .wp-block-jetpack-button {width: 100%;display: flex;justify-content: center;}
/* .wp-block-button */
form .wp-block-jetpack-contact-form div{margin: 0 0 1rem;}
form .wp-block-jetpack-contact-form .contact-form__error{display:none}
form .grunion-field-wrap input[type="checkbox"]{width: 28px;height: 28px;appearance: initial;border: initial;padding: 0;margin-right: -28px;opacity: 0;cursor: pointer;}
form .grunion-field-wrap input[type="checkbox"] + i {display:block;width: 28px;height: 28px;line-height: 28px;text-align:center;font-family: 'Font Awesome 5 free';background: #d9d9d9;border-radius: 4px;font-size: .4em;color: #fff;opacity: .5;cursor: pointer;margin: 0 1rem 0 0;}
form .grunion-field-wrap input[type="checkbox"]:checked + i{background: var(--primary);opacity: 1;position: relative;display: grid;place-items: center;}
form .grunion-field-wrap input:checked + i:after{content:"";width: 6px;height: 13px;border-right: 3px solid #fff;border-bottom: 3px solid #fff;display: block;transform: rotate(45deg);margin: -4px 0 0;position: absolute;}
form .contact-form__checkbox-wrap {display:flex;align-items:center;width: 100%;/* justify-content: center; */}

.card{display:block;position:relative;padding-bottom: 1rem;border-bottom: 1px solid var(--lightgray);color: var(--black);}
.card figure{overflow:hidden;width: 100%;position: relative;aspect-ratio: 16/12;}
.card figure img{position: absolute;width:100%;height: 100%;object-fit:cover;}
.card span {font: normal 1rem var(--fontGraphikCondensed);text-transform: uppercase;letter-spacing: 0.2rem;display: block;margin: 0.3rem 0;/* display: none; */}
.card strong {font-size: var(--fontSize-Medium);margin-top: .3rem;display: block;line-height: 1.4;}


.close {background: transparent;border-radius: 10em;width: 40px;height: 40px;position: absolute;z-index: 10;display: flex;align-items: center;justify-content: center;right: 0;top: 0; cursor: pointer;}
.close span {background: transparent;width: 100%;box-shadow: none;height: 100%;display: flex;align-items: center;justify-content: center;}
.close span:before,.close span:after {display: inline-block;height: 2px;width: 25px;border-radius: 10em;transition: 0.3s;background: var(--black);content:'';position: absolute;cursor: pointer;}
.close span:before {transform: rotate3d(0, 0, 1, 45deg);}
.close span:after {transform: rotate3d(0, 0, 1, -45deg);}
.close.white span:before,.close.white span:after {background: #fff;}


.text{font: normal 1.1rem "Charter-test";margin: 2rem 0;}
.text h2{font: normal 2.4rem var(--fontGraphikCondensed)!important;letter-spacing: 0.1rem;color: var(--primary)!important;}
.text h3{font: normal 2rem var(--fontGraphikCondensed);letter-spacing: 0.07rem;}
.text figure.mainImg{width:100%;}
.text figure.mainImg img{ width:100%; height:auto; display:block; margin:0}
.text strong{ font-weight:700}
.text p, .text cite{font-size: 1.17em;line-height: 1.45;font-weight: 100;}
.text cite { margin-top: 1rem; display:block}
.text blockquote{padding:20px 20px 20px 80px;position:relative;background: #f0f9f9;}
.text blockquote:after{top: 18px;content:' \201C ';position:absolute;left:10px;color: #000;font-size: 8rem;}
.text div,.text div img{ max-width:100%;}
.text iframe{max-width:100%;}
.text iframe[src^="https://www.youtube.com/"]{width:100%;margin: 1rem 0;aspect-ratio: 16/9;height: auto;}
.text iframe.instagram-media{ max-width:80%; margin:0 auto!important; display:block!important}
.text p strong{ font-weight:bold}
.text p b{font-weight:bold;color: #111;}
.text p i{ font-style:italic}
.text a{color: var(--primary);position: relative;text-decoration:underline;}
.text a:hover{text-decoration:none;}
.text li{margin: 0 0 1rem;padding: 0 0 0 1rem;position:relative;}
.text li:after{width: 5px;height: 5px;background: var(--darkgray);content:'';display:block;position: absolute;left: 0;top: 7px;border-radius: 10em;}
.text img{max-width: 100%;height:auto;display:block;width: 100%;}



.simple{display: block;width: 94%;margin: 0 auto;max-width: 730px;}
.simple h3{ font-size:1.4em; margin-top:30px;}
.simple .text {display:grid;grid-template-columns: 1fr;grid-gap: 1rem;}
.simple .title {font: normal 3.6rem var(--fontGraphikCondensed);margin: 0 auto 1rem;}


.articles_grid {margin: 2rem 0;width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.articles_grid .title{position: relative;font-family: var(--fontGraphikCondensed);text-transform: uppercase;letter-spacing: 0.4rem;/* border-bottom: 3px solid var(--primary); */margin-bottom: 2rem;width: 100%;overflow: hidden;}
.articles_grid .title h4{font-size: 5rem;position: relative;display: flex;align-items: center;}
.articles_grid .title h4:after {content:"";width:100%;height:10px;background: var(--primary);margin-left: 1rem;flex: 1;}
.articles_grid .title span{position: absolute;display: flex;align-items: center;opacity: 0.05;font-size: 8rem;inset: 0;left: -2rem;}
.articles_grid .title.center{ text-align:center;}
.articles_grid .title.center h4:before {content:"";height:10px;background: var(--primary);/* margin-left: 1rem; */display: block;width: 100%;flex: 1;margin-right: 1rem;}
.articles_grid .title.center span{text-align:center;left: 50%;transform: translateX(-50%);}
.articles_grid .list {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem}
.articles_grid .list.col_3 { grid-template-columns: repeat(3, 1fr)} 
.articles_grid .list.col_4 { grid-template-columns: repeat(4, 1fr)} 
.articles_grid.ad_right .list {width: calc(100% - 300px - 2rem);}
.articles_grid.ad_right aside {width: 300px;}
.articles_grid.ad_right aside .pubs {padding: 0;position: sticky;top: 70px;}
.articles_grid.ad_embeded .pubs { grid-column: 3;  grid-row: 1;}

.newsletter {padding: 2rem 0;/* background: var(--darkgray); */color: var(--white);background: linear-gradient(to bottom, rgb(106 106 106) 0%,rgb(17 17 17));/* background: var(--terciary); */}
.newsletter h5,.newsletter h4 {width: 100%;font: 900 var(--fontSize-XLarge) var(--fontCharter-test);}
.newsletter p {font-family: var(--fontFamily);margin-bottom: 1rem;}
.newsletter form {/* width: 50%; */text-align: center;margin: 0 auto;max-width: 600px;}
.newsletter form .checkbox {color: var(--white);justify-content: center;}
.newsletter form .checkbox span {color: var(--white);width: auto;}
.newsletter form .checkbox span a { color: var(--white);}

.newsletter_suscribed{ padding:1rem 2rem; background: rgba(0,0,0,.2); border-radius:10px; text-align:center;}
.newsletter_suscribed h2{color: #c8c8c8!important;}
.newsletter.standalone .wp-block-button__link{display: block;width: 100%;height: 50px;font-size: 1.1rem;background: var(--primary);color: #fff;}
.wp-block-jetpack-contact-form-container .contact-form-submission{display: none;}
.wp-block-jetpack-contact-form-container .contact-form__input-error{display: none;}
.wp-block-jetpack-contact-form-container input[aria-invalid="true"] {background-color: #d9c8c8;border-color: #600000;}

/* .wp-block-jetpack-contact-form-container .contact-form-submission.submission-success {display: block;max-width: 600px;text-align: center;line-height: 1.5rem;font-size: 1.2rem;} */
/* .wp-block-jetpack-contact-form-container .contact-form-submission.submission-success + .contact-form {display:none} */

div[data-wp-interactive="jetpack/form"]{width:100%;}
.contact-form-submission[data-wp-class--submission-success="context.submissionSuccess"] { display:none}
.contact-form__input-error{display:none}
.contact-form .wp-block-button__link{ background:#000; color:#fff; height:45px;}
form .contact-form__checkbox-wrap {align-items:center;width: auto;justify-content: center;}


.jetpack-contact-form-container.sent .wp-block-jetpack-contact-form{display: none!important;}
.jetpack-contact-form-container.sent .contact-form-submission[data-wp-class--submission-success="context.submissionSuccess"] {display:block;max-width: 500px;text-align: center;margin: 1rem auto;}



.newsletter .inner { justify-content: center;}
.go-back-message{display:none}

.lightbox{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;background: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;transition: .2s;backdrop-filter: blur(1px);pointer-events: none;visibility: hidden;}
.lightbox.block{display:block;overflow: auto;-webkit-overflow-scrolling: touch;padding: 2em 0;}
.lightbox.active{transform:translate(0,0);pointer-events: all;visibility: visible;}
.lightbox .layer{position:absolute; top:0; left:0; width:100%; height:100%;}
.lightbox .close{color:var(--secondary);}
.lightbox .content{padding: 2rem;background: var(--white);position:relative;width: 92%;max-width: 720px;transform: translate(0,30%);transition:.4s;transition-delay: .2s;opacity: 0;margin: 0 auto;border: 1px solid;}
.lightbox.active .content{transform: translate(0,0);opacity: 1;}
.lightbox .newsletter form {width:90%}
.lightbox .newsletter form .checkbox span,.lightbox .newsletter form .checkbox a{ color: var(--black)}
.lightbox .newsletter form .checkbox{color: var(--black);}
.lightbox .newsletter form .checkbox i{ background:#999}
.lightbox .newsletter {background: transparent;color: var(--black);}

.adimg img {width: 1px; height: 1px;}

/* ///// responsive ///// */
@media only screen and (max-width: 1100px) {
    header menu {display: none;}
    .articles_grid.ad_right .list{ grid-template-columns:1fr 1fr}
}

@media only screen and (max-width: 760px) {
  .articles_grid { flex-direction: column;}
  .articles_grid.ad_right .list,
  .articles_grid.ad_right aside{width:100%;margin: 2rem 0 0;grid-gap: 1rem;}
  .articles_grid .list.col_3,.articles_grid .list.col_4 {grid-template-columns: 1fr 1fr;margin: 1rem 0 0;grid-gap: 1rem;}
  .articles_grid.ad_embeded .pubs{ grid-column:1/-1; grid-row: 3}


  footer .inner { justify-content:center;}
  footer .logos_social{ flex-direction:column}
  footer .logos_social .logo{margin: 0 auto 2rem}
  footer .opts, footer p { text-align:center;}

  .card strong { font-size: 1.1rem}
  
  .col_aside,.col_2,.col_3,.col_3f{width: 100%;}
  .inner{width:100%;padding: 0 1rem;}
}

@media (min-width: 970px) {
   .pubs[data-accesor="billboard"]{
      content-visibility: auto;
      contain-intrinsic-size: 250px;
   }
}
@media (max-width: 969px) {
   .pubs[data-accesor="billboard"]{
     /* min-height: 82px; */
     content-visibility: auto;
     contain-intrinsic-size: 300px;
   }
}
.noads .pubs{display: none;}