/*
* === Global Overrides ===
*/

.brandon-regular {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03em;
}

.brandon-medium {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
}

.brandon-bold {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.03em;
}

.brandon-black {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.03em;
}

.barricada {
  font-family: barricada-pro, serif;
  font-weight: 400;
  font-style: normal;
}

.grey { color: #73716D; }
.white { color: #EFECE7; }
.pink { color: #ED827D; }
.blue { color: #1447BA; }
.yellow { color: #CE963F; }

.btn-primary {
  cursor: url(/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png), auto; /*ie*/ cursor: -webkit-image-set( url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 1x, url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 2x), auto;
  background: #1447BA;
  border: none;
  color: #EFECE7;
  padding-left: 20px;
  padding-right: 20px;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.03em;
  border-radius: 100px;
  letter-spacing: 0.03em;
}

.btn-lg {
  padding-left: 30px;
  padding-right: 30px;
  height: 60px;
}

.btn-gold,
.btn-gold:focus {
  background: #CE963F;
  border: 0;
  box-shadow: none !important;
}

.btn-gold:hover, .btn-gold:active,  .btn-gold:active:focus {
  background: #AE7B2B !important;
  border: 0;
  box-shadow: none !important;
}

.navbar-toggler {
  background: none;
  border: none;
}

.btn {
  text-transform: uppercase;
}

.btn, .btn:hover {
  cursor: url(/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png), auto !important; /*ie*/ cursor: -webkit-image-set( url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 1x, url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 2x), auto !important;
}

/*
* === Global ===
*/

html {
  cursor: url(/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png), auto; /*ie*/ cursor: -webkit-image-set( url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 1x, url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 2x), auto;
  background: #ED827D;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.03em;
  color: #73716D;
}

body {
  background: #ED827D;
}

p {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
  color: #73716D;
  font-size: 18px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #73716D;
  text-align: center;
}

a {
  color: #1447BA;
  cursor: url(/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png), auto; /*ie*/ cursor: -webkit-image-set( url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 1x, url('/wp-content/themes/wp-bootstrap-4/assets/images/mouse-pointer-middle-finger.png') 2x), auto;
}

.post-thumbnail img {

}

.site-content { background: #EFECE7; }

.home .site-content { background: #ED827D; }

.animated-bg {
  animation: colorchange 20s infinite; /* animation-name followed by duration in seconds*/
     /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: colorchange 20s infinite; /* Chrome and Safari */
}

@keyframes colorchange
{
  0%   {background: #E9F9F6;}
  25%  {background: #F7E9F9;}
  50%  {background: #F9F3E9;}
  75%  {background: #F9E9E9;}
  100% {background: #EAE9F9;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  0%   {background: #E9F9F6;}
  25%  {background: #F7E9F9;}
  50%  {background: #F9F3E9;}
  75%  {background: #F9E9E9;}
  100% {background: #EAE9F9;}
}

/*
* === Header ===
*/

.navbar {
  background-color: #ED827D;
}

.site-header, .home .navbar {
    border-bottom: 4px solid #1447BA;
}

.navbar-nav {
  padding-top: 20px;
  text-align: center;
}

.navbar-nav .nav-item .btn-primary {
    color: #EFECE7 !important;
    padding-left: 20px;
    padding-right: 20px;
}

.navbar-nav .nav-item .nav-link {
  color: #1447BA;
  text-transform: uppercase;
  font-size: 15px;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.03em;
}

.site-header .navbar,
.site-footer .site-info {
  color: #EFECE7;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03em;
  font-size: 18px;
}

@keyframes play-logo {
   100% { background-position: -2873px; }
}

.wtf-logo {
  width: 239.4px;
  height: 42px;
  background: url(/wp-content/themes/wp-bootstrap-4/assets/images/wtf-should-i-letter-logo-anim.png) left center no-repeat;
  background-size: 2873px 42px;
  animation: play-logo 0.8s steps(12) infinite;
}

@media (min-width: 768px) {
  .home .site-header, .home .navbar {
      border-bottom: none;
  }
  .nav-item {
    margin-left: 10px;
  }
  .site-header .navbar {
    padding-left: 70px;
    padding-right: 70px;
    min-height: 100px;
  }
  @keyframes play-logo {
     100% { background-position: -3420px; }
  }
  .wtf-logo {
    width: 285px;
    height: 50px;
    background-size: 3420px 50px;
  }
  .navbar-nav {
    padding-top: 0;
  }
}

/*
* === Homepage ===
*/

.homepage-wrap {
  background: #EFE7E7;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-inner-wrap {
  padding: 40px 0;
}

.letter-prompt {
  font-size: 16px;
  color: #ED827D;
  text-transform: uppercase;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  padding: 0 20px;
}

.prompt-quote {
  font-family: barricada-pro, serif;
  font-weight: 400;
  font-style: normal;
  color: #1447BA;
  font-size: 40px;
  line-height: 50px;
  max-width: 1000px;
  padding: 20px;
  margin: 0 auto 20px 0;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-wrap .btn {
  font-size: 15px;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .homepage-wrap {
    height: calc(100vh - 200px);
  }
  .homepage-inner-wrap {
    padding: 0;
  }
  .letter-prompt {
    font-size: 20px;
  }
  .prompt-quote {
    min-height: 190px;
    font-size: 50px;
    line-height: 60px;
    padding: 0;
  }
  .homepage-wrap {
    border-radius: 30px;
    border: 4px solid #1447BA;
    margin: 0 40px;
    padding: 40px;
  }
  .homepage-wrap .btn {
    font-size: 20px;
    padding: 8px 30px;
  }
}

@media (min-width: 992px) {
  .letter-prompt {
    font-size: 24px;
  }
  .prompt-quote {
    min-height: 240px;
    font-size: 70px;
    line-height: 80px;
    padding: 0;
  }
  .homepage-wrap {
    border-radius: 30px;
    border: 4px solid #1447BA;
    margin: 0 40px;
    padding: 40px;
  }
}

/*
* === Footer ===
*/

.site-footer {
  background-color: #ED827D;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 4px solid #1447BA;
  margin-top: 0 !important;
}

.site-footer a {
      color: #1447BA !important;
}

.site-footer .site-info {
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 768px) {
  .site-footer {
    padding-top: 38px;
    padding-bottom: 38px;
  }
  .home .site-footer {
    border: none;
  }
}

/*
* === Feature Page ===
*/

.container-no-padding .card-deck {
  margin: 0 -20px;
}

.featured-deck {
  padding: 0 2px 0 2px;
}

.featured-deck div,
.featured-deck .card {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.featured-deck .card img {
  padding: 4px 2px 0 2px;
}

.heading-area h1 {
  color: #73716D;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.03em;
  text-align: center;
  font-size: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .heading-area h1 {
    font-size: 30px;
  }
}

@media (min-width: 992px) {
  .heading-area h1 {
    font-size: 36px;
    padding: 50px 30px;
  }
}

/*
* === Lettering Page ===
*/

.page-template-get-better .site-content {
  padding: 30px 0;
}

.page-template-get-better .post-thumbnail {
  margin-bottom: 30px;
}

.page-template-get-better .site-content .btn-wrap {
  text-align: center;
}

.page-template-get-better .site-content .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  text-align: center;
}

.page-template-get-better .site-content p {
  font-size: 20px;
}

.page-template-get-better .btn-wrap .btn-primary {
  white-space: normal;
}