@charset "utf-8";

.banner .mainlogo {width: 85%; height: auto; }
.banner .mainlogo path {filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5)); overflow: visible;transform: translateZ(0);}

.flockbg {background-image: url(../images/brand/springflock.svg); background-repeat: no-repeat;}

.art-title {background-color: var(--darkbase); padding:10px 10px; font-size: 1.2rem; text-align: center; color: var(--light); text-transform: capitalize; }
.art-title .contain {display: flex; flex-direction: column;}
.art-title .subtitle{font-style: italic; text-transform: none;}
.art-title p {margin-bottom: 0px;}
.art-title h2 {margin-bottom: 0px;}
.art-banner { background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 400px; align-content: end; padding-bottom: 50px; }
.art-foot{padding:0px 20px 0 20px; display: flex; align-content: end; justify-content: end; text-align: right; line-height: normal;}

/*************** ANIMATED COVER ********************/
.cover-placer {width: 300px; height: 320px; position: relative; margin: 0 auto;}
.cover { width: 100%;position: absolute; top: -36px;left: 50%; display: flex; justify-content: center;
  transform-origin: center;transform: translate(-50%, 0) rotate(-20deg) scale(1);
  animation: spiralSlam 1.0s ease-in forwards; will-change: transform;}
.cover img { height: 330px;    width: auto; max-width: none; display: block; filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5));}
.cover {z-index: 2017;}
.cover-placer {z-index: 2015; }

@keyframes spiralSlam {0% { opacity: 0;transform: translate(600px, -800px) rotateZ(-360deg) scale(0.2);}
  80% {opacity: 1;transform: translate(-50%, 15px) rotate(-22deg) scale(1.05);}
  100% {transform: translate(-50%, 0) rotate(-20deg) scale(1);}}
main.impact-shake {animation: heavyShake 0.3s ease-out both;}
@keyframes heavyShake {
  0% { transform: translate3d(0,0,0); }
  10% { transform: translate3d(-18px, 12px, 0); }
  20% { transform: translate3d(18px, -12px, 0); }
  30% { transform: translate3d(-15px, 10px, 0); }
  40% { transform: translate3d(15px, -10px, 0); }
  50% { transform: translate3d(-12px, 8px, 0); }
  60% { transform: translate3d(12px, -8px, 0); }
  70% { transform: translate3d(-8px, 5px, 0); }
  80% { transform: translate3d(8px, -5px, 0); }
  90% { transform: translate3d(-4px, 2px, 0); }
  100% { transform: translate3d(0,0,0); }}

.splash .dead-mid {flex-direction: column;}
.splash .dead-mid .counter {padding: 8px 8px 8px 35px;}
.splash .dead-top {padding: 0px 8px 3px 50px;}
.splash .deadline {margin-left: 70px;}
.splash .deadline {display: none;}
.splash {margin: 0 auto; padding: 0 10px 75px 10px; position: relative;}
.splash {display: flex; flex-direction: column; justify-content: center; align-items: center; }

.feature-body .highlights {padding: 0 30px 0 30px;}
.feature-body {display: flex; flex-direction: column; align-items: center;
  padding:10px 0px 0px 0px; font-size: 1.1rem; font-weight: 600; line-height: normal; }
.features {border-radius: 30px;background-color: var(--light);
  filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.5)); color: var(--darkbase);}
.feature-head{border-bottom: 1px solid var(--darkbase);  font-style: italic;
  font-size: 1.6rem; font-weight: 700; text-align: center; padding: 0; }
.features:hover .bigbutton svg path {fill: var(--darkbase);transition: all 0.6s ease;}
.features:hover .bigbutton {color: var(--darkbase); background-color: var(--mid); border: 2px solid var(--darkbase); transform: scale(1.1); }

.issue {display: flex; flex-direction: column; gap:15px; }
.issue .button2 { margin: 0 auto;}
.spacebetween {display: flex; flex-direction: column; gap:10px; justify-content: space-between; width: 100%; padding:0 10px; flex: 1;}
.widest {padding:0px 20px 0 10px; display: flex; gap:10px;}
.widest .tabbotrans{background-color: var(--dark70);}


@media (min-width: 1400px)
{
  header .wide{ padding:10px 150px 0 150px;}
  .widest {padding:0px 300px 0 300px !important;}
}
  @media (min-width: 1200px)
{
.cover img { height: 550px !important;}
.splash {display: flex; flex-direction: row; justify-content: space-between !important; align-items: flex-end; }
.splash .deadline {display: block; }
}
@media (min-width: 900px)
{
.art-title .contain, .ribbon .art-title .contain {font-size: 1.6rem; flex-direction: row; justify-content: center;}
}
@media (min-width: 750px)
{
.splash {padding: 0 40px 40px 40px;}
.splash {display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap:50px; }
.cover-placer {width: 300px; height:450px;}
.cover img { height: 500px;}
.cover {top: -16px;}
}
@media (min-width: 480px)
{
   .feature-body .highlights {padding: 0 55px 0 55px;} 
}