/*
  Theme Name: Cooper Godin
  Author: Zach Godin
  Author URI: https://zch.gdn
  Description: Wordpress theme for Cooper Godin
*/

*,::after,::before{box-sizing:border-box}*{margin:0;padding:0}body{-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}#__next,#root{isolation:isolate}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

@font-face{font-family:'Gunterz';src:url('fonts/Gunterz-Black.woff2') format('woff2'),url('fonts/Gunterz-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}

:root {

  --font: "Fustat", sans-serif;
  --heading: "Gunterz", sans-serif;

  --dark: #12171D;
  --text: #646464;
  --red: #C80B0B;
  --light: #F5F5F5;
  --grey: #D7D7D7;

  --font-size: clamp(16px, 1.25vw, 24px);
  --font-size--lg: clamp(20px, 1.56vw, 30px);
  --font-size--sm: clamp(14px, 1.04vw, 20px);
  --font-size--xs: clamp(11px, 0.73vw, 14px);
  --font-size--h1: clamp(36px, 3.13vw, 60px);
  --font-size--h2: clamp(24px, 1.93vw, 37px);
  --font-size--h3: var(--mainFontSize);
  --font-size--h4: var(--mainFontSize);
  --font-size--h5: var(--smallFontSize);
  --font-size--h6: var(--xsmallFontSize);

  --line-height: 1.75;
  --line-height--sm: 1.25;
  --line-height--xs: 1.05; 

  --spacing: clamp(67px, 5.21vw, 100px);
  --transition: all 0.4s ease;

}

body {
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  border-top: clamp(10px, 0.78125vw, 15px) solid var(--light);
}

a, a:hover, a:focus { transition: var(--transition); }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }


h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  line-height: var(--line-height--xs);
}

h1 { font-size: var(--font-size--h1); }
h2 { font-size: var(--font-size--h2); }
h3 { font-size: var(--font-size--h3); }
h4 { font-size: var(--font-size--h4); }
h5 { font-size: var(--font-size--h5); }
h6 { font-size: var(--font-size--h6); }

h1:after, h2:after {
  content: ".";
  color: var(--red);
}

.pg-section {
  padding: var(--spacing) clamp(20px, 1.56vw, 30px);
}

p strong, li strong {
  color: var(--dark);
  font-weight: 600;
}

.hero h1 {
  margin: 0 0 clamp(7px, 0.52vw, 10px);
}

.hero p {
  font-size: var(--font-size--lg);
  line-height: var(--line-height--sm);
  font-weight: 300;
}

.hero .elementor-widget-image {
  flex: 0 0 clamp(153px, 11.98vw, 230px);
  margin: clamp(-30px, -1.56vw, -20px) clamp(33px, 2.60vw, 50px) 0 0;
}

#footer a {
  color: var(--dark);
  font-weight: 600;
  text-decoration: underline;
}

#footer p {
  font-size: var(--font-size--sm);
}

#footer a:hover, #footer a:focus {
  color: var(--red);
}

#footer a:first-child { margin-right: clamp(3px, 0.26vw, 5px); }
#footer a:last-child { margin-left: clamp(3px, 0.26vw, 5px); }

#footer .elementor-icon-list-items a {
  display: inline-block;
}

#footer .elementor-icon-list-items a svg {
  width: clamp(20px, 1.56vw, 30px);
  height: clamp(20px, 1.56vw, 30px);
}

#footer .elementor-icon-list-items a .elementor-icon-list-text {
  display: none;
}

#footer .elementor-icon-list-items a svg * {
  transition: var(--transition);
}

#footer .elementor-icon-list-items a:hover svg *, 
#footer .elementor-icon-list-items a:focus svg * {
  fill: var(--red);
}

#footer .elementor-icon-list-items li {
  margin: 0;
}

#footer .elementor-icon-list-items {
  margin: 0 0 clamp(27px, 2.08vw, 40px);
}

.contact .e-con-inner {
  position: relative;
  z-index: 2;
}

.contact:after {
  background: var(--light);
  position: absolute;
  top: 0;
  left: 4vw;
  right: 4vw;
  bottom: 0;
  margin: auto;
  display: block;
  content: "";
}

.contact .elementor-form {
  background-color: #fff;
  padding: clamp(30px, 2.34vw, 45px);
  box-shadow: clamp(0px, 0.00vw, 0px) clamp(2px, 0.16vw, 3px) clamp(13px, 1.04vw, 20px) rgba(0,0,0,0.1);
}

.contact .elementor-form h4 {
  font-family: var(--font);
  text-transform: none;
  font-weight: 900;
  border-left: clamp(5px, 0.42vw, 8px) solid var(--red);
  line-height: 1;padding: clamp(3px, 0.26vw, 5px) 0 clamp(1px, 0.10vw, 2px) clamp(5px, 0.42vw, 8px);
  margin: 0 0 clamp(10px, 0.78vw, 15px);
}

.contact .elementor-form label {
   position: absolute;
  width: clamp(1px, 0.05vw, 1px);
  height: clamp(1px, 0.05vw, 1px);
  padding: 0;
  margin: clamp(-1px, -0.05vw, -1px);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  background-color: #000 !important;
  color: #FFF !important;
}

.contact .elementor-field-textual {
  border: clamp(1px, 0.05vw, 1px) solid #ddd;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: clamp(1px, 0.10vw, 2px);
  font-size: var(--font-size--xs);
  color: var(--dark);
  transition: var(--transition);
  padding: clamp(10px, 0.78vw, 15px) clamp(13px, 1.04vw, 20px) clamp(8px, 0.63vw, 12px);
  resize: none;
}

.contact .elementor-field-textual:hover, .contact .elementor-field-textual:focus, .contact .elementor-field-textual:active {
  box-shadow: none !important;
  border-color: var(--red);
}

.contact .captcha-note {
  font-size: var(--font-size--xs);
  line-height: var(--line-height--sm);
}

.basic p a,
.contact p a {
  font-weight: 600;
  color: var(--dark);
  text-decoration: underline;
}

.basic p a:hover, .basic p a:focus,
.contact a:hover, .contact a:focus {
  color: var(--red);
}

.contact .elementor-form textarea {
  margin: 0 0 clamp(13px, 1.04vw, 20px);
  height: clamp(67px, 5.21vw, 100px);
}

html .elementor-button {
  background-color: var(--dark);
  font-size: var(--font-size--xs);
  text-transform: uppercase;
  letter-spacing: clamp(2px, 0.16vw, 3px);
  font-weight: 600;
  border-radius: 0;
  padding: clamp(7px, 0.52vw, 10px) clamp(17px, 1.30vw, 25px);
  transition: var(--transition);
  cursor: pointer;
}

html .elementor-button:hover,
html .elementor-button:focus {
  background-color: var(--red);
}

html .elementor-button svg {
  margin-right: clamp(3.3333333333333335px, 0.2604166666666667vw, 5px);
}

.contact p:not(:last-child) {
  margin: 0 0 clamp(10px, 0.78vw, 15px);
}

.contact h2 {
  margin: 0 0 clamp(7px, 0.52vw, 10px);
}

.contact .elementor-field-type-recaptcha_v3 {
  display: none !important;
}

#header {
  background-color: #fff;
  padding: clamp(10px, 0.78vw, 15px) clamp(20px, 1.56vw, 30px);
  position: fixed;
  z-index: 10000;
  border-bottom: clamp(1px, 0.05vw, 1px) solid #eee;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
}

#header img {
  max-width: clamp(50px, 3.91vw, 75px);
}

.elementor-editor-active #header {
  position: relative;
}

.elementor-location-header + .elementor-location-single,
.elementor-location-header + main {
  margin-top: clamp(73px, 5.68vw, 109px);
}

.post .elementor-widget-theme-post-content ul:not(:last-child),
.basic ul:not(:last-child),
.post .elementor-widget-theme-post-content ol:not(:last-child),
.basic ol:not(:last-child),
.post .elementor-widget-theme-post-content p:not(:last-child),
.basic p:not(:last-child) {
  margin: 0 0 clamp(20px, 1.56vw, 30px);
}

.post .elementor-widget-theme-post-content ul,
.basic ul,
.post .elementor-widget-theme-post-content ol,
.basic ol {
    margin-left: 25px !important;
    margin-top: 8px !important;
}

.basic h1 {
  margin-bottom: clamp(7px, 0.52vw, 10px);
}

.byline .elementor-author-box {
  background-color: var(--light);
  padding: clamp(27px, 2.08vw, 40px);
  margin: clamp(33px, 2.60vw, 50px) 0 clamp(20px, 1.56vw, 30px);
}

.byline .elementor-author-box .elementor-author-box__bio {
  margin: 0;
  line-height: 1;
  padding: 0;
}

.post .elementor-widget-theme-post-featured-image,
.post .elementor-widget-theme-post-content {
  margin: clamp(30px, 2.34vw, 45px) auto 0;
}

.post .widget-image-caption {
  font-size: var(--font-size--sm);
  font-style: italic;
  margin: clamp(7px, 0.52vw, 10px) 0 0;
}

.blog,
.articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin: clamp(20px, 1.56vw, 30px) 0 0;
}



.blog .blog-post,
.articles .article {
  flex: 0 0 31%;
  max-width: 31%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(40px, 3.125vw, 60px);
}

.blog .blog-post .blog-post-content .underlink,
.articles .article .underlink {
  margin-top: auto;
  line-height: 1.25;
}

.blog .blog-post .blog-post-image img,
.articles .article .article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog .blog-post .blog-post-image,
.articles .article .article-image {
  overflow: hidden;
  height: clamp(183px, 14.32vw, 275px);
  margin: 0 0 clamp(13px, 1.04vw, 20px);
  width: 100%;
}

.blog .blog-post .blog-post-content time,
.articles .article p {
  font-size: var(--font-size--xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: clamp(2px, 0.16vw, 3px);
  color: var(--dark);
  margin: 0 0 clamp(2px, 0.16vw, 3px);
}

.blog .blog-post .blog-post-content h3,
.articles .article h3 {
  font-weight: 400;
  font-family: var(--font);
  text-transform: none;
  color: var(--text);
  margin: 0 0 clamp(30px, 2.34vw, 45px);
}

.blog .blog-post .blog-post-content h3 {
  margin: 0;
  color: var(--dark);
  font-weight: 900;
  line-height: 1;
}

.blog .blog-post .blog-post-content h3 + p {
  line-height: 1.25;
  margin: 0 0 clamp(13px, 1.04vw, 20px);
}

.blog .blog-post .blog-post-content h3 + p + p {
  font-size: var(--font-size--sm);
  margin: 0 0 clamp(27px, 2.08vw, 40px);
}


.underlink {
  color: var(--dark);
  font-weight: 700;
  display: inline-block;
}

.underlink:after {
  width: 60%;
  background: var(--dark);
  height: clamp(2px, 0.16vw, 3px);
  display: block;
  content: "";
  transition: var(--transition);
}

.underlink:hover, .underlink:focus {
  color: var(--red);
}

.underlink:hover:after, .underlink:focus:after {
  width: 100%;
  background: var(--red);
}

.post img {
  margin: 0 auto clamp(33.333333333333336px, 2.6041666666666665vw, 50px);
  display: block;
}

@media (min-width: 768px) {

  .blog:not(.blog-home) .blog-post:not(:nth-child(3n)), .articles .article:not(:nth-child(3n)) {
    margin-right: 3.5%;
  }

  .blog.blog-home {
    display: block;
  }

  .blog.blog-home .blog-post {
    flex-direction: row;
    max-width: 100%;
    flex: 0 0 100%;
    align-items: center;
    justify-content: space-between;
  }

  .blog.blog-home .blog-post .blog-post-image {
    height: clamp(283px, 22.14vw, 425px);
    margin: 0;
    order: 10;
  }

  .blog.blog-home .blog-post .blog-post-image, .blog.blog-home .blog-post .blog-post-content {
    flex: 0 0 45%;
    max-width: 45%;
  }

  .blog.blog-home .blog-post:not(:last-child) {
    margin: 0 0 clamp(53px, 4.17vw, 80px);
  }

  .blog.blog-home .blog-post:nth-child(2) .blog-post-content {
    order: 14;
  }

}


::selection {
  background: var(--red);
  color: #fff;
}

@media (max-width: 1024px) {

  .contact .elementor-col-50 {
      width: 100% !important;
  }

}

@media (max-width: 767px) {

  .hero img {
      max-width: 90px !important;
      margin: 0 0 20px;
  }

  .hero .elementor-widget-image {
      text-align: left;
  }
  
  .blog .blog-post, .articles .article {
      flex: 0 0 100%;
      max-width: 100%;
  }
  
  .blog .blog-post:not(:last-child), .articles .article:not(:last-child) {
      margin: 0 0 35px;
  }

  .contact .elementor-form {
      margin-top: 40px;
  }
  
} 


.post-meta li * {
    font-size: 14px;
}

.post-meta li a {
    color: var(--red);
text-decoration: underline;
}

.post-meta li a:hover, .post-meta li a:focus {
color: #000;
}