/* ======================================================
                         RESET
====================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }


body {
    font-family: Arial, Helvetica, sans-serif;
    background: #e9e9e9;
    color: #111;
max-width: 100%;
  overflow-x: hidden;
    }

img {
    max-width: 100%;
    display: block;
    }

/* ======================================================
                    STICKY HEADER
====================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;

    background: #156aa5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 60px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 9999999999;
    }

.header-spacer {
  width:30%;
}

.fuck {
  display: flex;
  justfy-content: center;
  align-items: center;
  width: 30%;

}


.nav {
    display: flex;
    gap: 28px;
    justify-content: end;
    align-items: center;
  width: 30%;
    }

.nav a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: 0.25s;
    }

.nav a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
    }

.join-btn {
    background: linear-gradient(45deg,#ff2fa6,#9b4dff);
    padding: 8px 18px;
    border-radius: 20px;
    transition: 0.25s;
    }

.join-btn:hover {
    transform: scale(1.08);
    }

.menu {
    display: none;
    font-size: 26px;
    }

.news-image {
  border-radius: 80px;
  margin-bottom: 32px;
  }

/* ======================================================

                         HERO

====================================================== */

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 70px 0 0;

    flex-direction: row-reverse;
    height: 90vh;
    }

.hero-text {
    width: 40%;
    max-width: 800px;
    padding: 0 0 0 60px;
    }

.hero h1 {
    font-size: 80px;
    font-weight: 900; 
    line-height: 0.8;
    margin-bottom: 50px;
    }

.hero p {
    font-size: 20px;
    margin-bottom: 20px;
    }

.hero ul {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
    padding: 0 0 20px 60px;
    }
    
.hero li {
    margin-bottom: 5px;
    }

.circle {
    max-width: 900px;
    min-width: 740px;
    height: 600px;
    background: none;
    border-radius: 0;
    padding: 0 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    }


/* ======================================================

                         CONTENT

====================================================== */

.content-blue strong {
  color:  white; /*#aebfff;*/
  font-weight: 700;
  font-style: italic;
}

.content-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1c6fb4;
    flex-direction: row-reverse;
    color: white;
    height: 90vh;
    overflow: hidden;
    }

.content-text {
    width: 40%;
    max-width: 800px;
    padding: 0 60px 0 0;
    position: relative;
    z-index: 2;
    }

.content-blue h2 {
    font-size: 72px;
    font-weight: 900; 
    line-height: 0.8;
    margin-bottom: 50px;
    }

.content-blue p {
    font-size: 20px;
    margin-bottom: 40px;
    }

.content-image {
    max-width: 900px;
    min-width: 740px;
    height: auto;
    background: none;
    padding: 0 0 0 60px;
    position: relative;
    overflow: hidden;
    z-index: 1;

    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    }

.content-image img {
  border-radius: 20px 0 0 20px;
  }


/* ======================================================

                          PROPS

====================================================== */

.props {
  width:100%;
  padding: 60px 0 0 0;
}

.hidden-props1 {
  display: none;
}

.hidden-props2 {
  display: none;
}

.hidden-props3 {
  display: none;
}


/* ======================================================
                  PROP IMAGES & ANIMATIONS
====================================================== */

.animation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
       position: sticky; 
 top: 70px; 

/*background: black;*/
}

.animation-spacer {
  width: 40%;
  max-width: 800px;
/*border: 2px dashed red;*/
}

.top-right {
  display: flex;
  justify-content: flex-start; 
  width: 58%;
  max-width: 940px;
  padding: 0 60px;
       position: sticky; 
 top: 70px; 
  animation: hello-good-bye;
  animation-timeline: scroll(root);
}

@keyframes hello-good-bye {

  0% {
    transform: translate(0, 3000px);
    }
/* ======== HELLO ======== */
  21% {
    transform: translate(0, 0);
    }
/* ======== GOOD-BYE ======== */
  38% {
    transform: translate(0, 0);
    }
  100% {
    transform: translate(0, -3000px);
    }
}

.prop-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 width: 90%; 
 height: 0; 
       position: sticky; 
 top: 150px; 
}

.glow-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  height:auto;
  transform: translateY(605px);
}

.glow-box-1 {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
  animation: glow-fade-1;
  animation-timeline: scroll(root);
}

@keyframes glow-fade-1 {

  0% {
    opacity:0;
    }
  23% {
    opacity:0;
    }
  24% {
    opacity:1;
    }
  28% {
    opacity:1;
    }
  28.5% {
    opacity:0;
    }
  100% {
    opacity:0;
    }
}

.glow-box-2 {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
  animation: glow-fade-2;
  animation-timeline: scroll(root);
}

@keyframes glow-fade-2 {

  0% {
    opacity:0;
    }
  29% {
    opacity:0;
    }

  30% {
    opacity:1;
    }
  35% {
    opacity:1;
    }

  35.5% {
    opacity:0;
    }
  100% {
    opacity:0;
    }
}

.glow-box-3 {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
  animation: glow-fade-3;
  animation-timeline: scroll(root);
}

@keyframes glow-fade-3 {

  0% {
    opacity:0;
    }
  36% {
    opacity:0;
    }
  37% {
    opacity:1;
    }
  100% {
    opacity:1;
    }
}

.prop-glow {
max-width: 280px;
opacity: 50%;
animation: spin 15s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.hand-box {
display: flex;
justify-content: center;
align-items: center;
width:33%;
/*background-color: #00800080;*/
transform: translate(-100%, 380px);
  animation: hand-slide;
  animation-timeline: scroll(root);
}

@keyframes hand-slide {

  0% {
    transform: translate(-100%, 3380px) scale(1.2);
    }
  18% {
    transform: translate(-100%, 3380px) scale(1.2);
    }

  24% {
    transform: translate(-100%, 480px) scale(1.2);
    }
  28% {
    transform: translate(-100%, 480px) scale(1.2);
    }

  30% {
    transform: translate(0, 480px) scale(1.2);
    }
  35% {
    transform: translate(0, 480px) scale(1.2);
    }

  37% {
    transform: translate(100%, 480px) scale(1.2);
    }
  100% {
    transform: translate(100%, 480px) scale(1.2);
    }
}

.prop-hand {
max-width: 200px;
}

.items {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
/*border: 2px solid black;*/
}

.weapon-box {
display: flex;
justify-content: center;
align-items: center;
width:33%;
transform: translate(0, 0);
/*background-color: #FFA50080;*/
  animation: weapon-drop;
  animation-timeline: scroll(root);
}

@keyframes weapon-drop {

  0% {
    transform: translate(0, 0);
    }
  12% {
    transform: translate(0, 0) rotate(180deg);
    }
/* ======== DROP BEGINS ======== */
  22% {
    transform: translate(0, 0);
    }
/* ======== DROP ENDS ======== */
  24% {
    transform: translate(0, 180px) scale(1.3);
    }
/* ======== RETURN BEGINS ======== */
  28% {
    transform: translate(0, 180px) scale(1.3);
    }
/* ======== RETURN ENDS ======== */
  30% {
    transform: translate(0, 0);
    }
  100% {
    transform: translate(0, 0);
    }
}

.prop-weapon {
max-width: 200px;
}

.money-box {
display: flex;
justify-content: center;
align-items: center;
width:33%;
/*background-color: #0000ff80;*/
  animation: money-drop;
  animation-timeline: scroll(root);
}

@keyframes money-drop {

  0% {
    transform: translate(0, 0);
    }
  12% {
    transform: translate(0, 0) rotate(180deg);
    }
  24% {
    transform: translate(0, 0);
    }
/* ======== DROP BEGINS ======== */
  28% {
    transform: translate(0, 0);
    }
/* ======== DROP ENDS ======== */
  30% {
    transform: translate(0, 180px) scale(1.3);
    }
/* ======== RETURN BEGINS ======== */
  35% {
    transform: translate(0, 180px) scale(1.3);
    }
/* ======== RETURN ENDS ======== */
  37% {
    transform: translate(0, 0);
    }
  100% {
    transform: translate(0, 0);
    }
}

.prop-money {
max-width: 200px;
}

.cherry-box {
display: flex;
justify-content: center;
align-items: center;
width:33%;
/*background-color: rgb(255 0 0 / 50%);*/
  animation: cherry-drop;
  animation-timeline: scroll(root);
}

@keyframes cherry-drop {

  0% {
    transform: translate(0, 0);
    }
  12% {
    transform: translate(0, 0) rotate(180deg);
    }
  24% {
    transform: translate(0, 0);
    }
/* ======== DROP BEGINS ======== */
  35% {
    transform: translate(0, 0);
    }
/* ======== DROP ENDS ======== */
  37% {
    transform: translate(0, 180px) scale(1.3);
    }
  100% {
    transform: translate(0, 180px) scale(1.3);
    }
}

.prop-cherry {
max-width: 200px;
}

.finger-box {
display: flex;
justify-content: center;
align-items: center;
width:33%;
transform: translate(-100%, 100px);
/*background-color: #00800080;*/
z-index:5;
  animation: finger-slide;
  animation-timeline: scroll(root);
}

@keyframes finger-slide {

  0% {
    transform: translate(-100%, 3000px) scale(1.2);
    }
  18% {
    transform: translate(-100%, 3000px) scale(1.2);
    }
  24% {
    transform: translate(-100%, 100px) scale(1.2);
    }
/* ====== BEGIN MOVE TO THE LEFT ====== */
  28% {
    transform: translate(-100%, 100px) scale(1.2);
    }
/* ====== ARRIVES AT CENTER ====== */
  30% {
    transform: translate(0, 100px) scale(1.2);
    }
/* ====== BEGIN SECOND MOVE ====== */
  35% {
    transform: translate(0, 100px) scale(1.2);
    }
/* ====== ARRIVES AT FINAL SPOT ====== */
  37% {
    transform: translate(100%, 100px) scale(1.2);
    }
  100% {
    transform: translate(100%, 100px) scale(1.2);
    }
}

.prop-finger {
max-width: 200px;
}


/* ======================================================
                         WORDS
====================================================== */

.hidden {
  display: none;
}

.props-intro {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 0 40px;
}

.weapons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: linear-gradient(
    to left, 
    #f5d67e00 0%, 
    #f5d67e80 60%
  );
}

.money {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: linear-gradient(
    to left, 
    #a6d28700 0%, 
    #a6d28780 60%
  );
}

.cherries {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: linear-gradient(
    to left, 
    #f5949400 0%, 
    #f5949480 60%
  );
}

.prop-text {
  width: 40%;
  max-width: 800px;
  padding: 60px 60px;
}

.prop-spacer {
  width: 740px;
}

.prop-title {
  display: flex;
  display: row;
}

.prop-text h1 {
color: #156aa5;
    font-size: 160px;
    font-weight: 900; 
    line-height: 0.8;
    display: inline-block;
    transform: translateY(-10px);
    }

.prop-text h2 {
color: #156aa5;
    font-size: 72px;
    font-weight: 900; 
    line-height: 0.8;
    margin-bottom: 50px;
    display: inline-block;
    }

.prop-text h3 {
    font-size: 40px;
    font-weight: 900; 
    color: #156aa5;
    line-height: 0.8;
    margin-bottom: 50px;
    }

.prop-text p {
    font-size: 20px;
    margin-bottom: 20px;
    }

/* ======================================================

                         FAMILY

====================================================== */


.family-ceiling {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e9e9e9;
    width: 100%;
    padding: 120px 0 70px;
    }

.ceiling-spacer {
    width: 740px;
    padding: 0 60px 0 60px;
    }

.ceiling-text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 40%;
    max-width: 800px;    
    padding: 0 60px 0 60px;
  white-space: nowrap;
  overflow: visible;    
}

.ceiling-text h2 {
    font-size: 72px;
    font-weight: 900; 
    line-height: 0.8;
    margin-bottom: 50px;
    }

.ceiling-text p {
    font-size: 20px;
    margin-bottom: 20px;
    }

.ceiling-shape {
  width: 100%;
  height: 50px;
  background-color: #e9e9e9;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  transform: translateY(-1px);
}

.chandelier-1 {
    display: none;
}

.chandeliers-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 1800px;
    padding: 0 10% 0;
    z-index: 1;
}

.meet-the-family {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  background-color: #e9e9e9;
  border: 10px solid #000000;
  border-radius: 10px;
  padding: 20px 20px 30px;
  margin: 100px 0 0 0;
}


.meet-the-family H3 {
  font-size: 40px;
  font-weight: 900; 
    color: #156aa5;
    line-height: 0.8;
}

.family-wallpaper {
  background: repeating-linear-gradient(
    to right,
    #aebfff,
    #aebfff 20px,
    #e9e9e9 20px,
    #e9e9e9 40px
  );
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portraits {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    max-width: 1800px;
    height: 300px;
    padding: 60px 5% 0;
    margin: 40px 0 120px;
  z-index: 999;
}

.middle-three {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  }

.placard {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
background-color: white;
border: 5px solid #000000 /*#aa6c39*/;
border-radius: 6px;
padding: 3px 6px 1px;
margin: 15px 0 0 0;
}

.placard p {
color: #1c6fb4;
font-size: 14px;
font-weight: 600;
}

.placard2 {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
background-color: white;
border: 5px solid #000000;
border-radius: 6px;
padding: 3px 6px 1px;
margin: 15px 0 0 0;
transform: translateY(-80px);
z-index: -100;
}

.placard2 p {
color: #1c6fb4;
font-size: 14px;
font-weight: 600;
}

.pictures img {
    min-width: 100px;
    width: 180px;
    height: auto;
}

.lifted-image {
  transform: translateY(-80px);
}

.picture-spacer {
    width: 5%;
}

.box2-active {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* ================ PICTURE 1 ================ */

.pic-1 {
display:flex;
flex-direction: column;
align-items: center;
z-index: 1500;
}

.hidden-trigger-1 { 
    display: none; 
}

#trigger-1:checked ~ .box {
    transition: transform .4s;
}

#trigger-1:not(checked) ~ .box {
    transition: transform .4s;
}

#trigger-1:hover ~ .box-1a {
  transition: transform .3s ease;
  transform: rotate(5deg) scale(1.1);
}

#trigger-1:checked ~ .box-1a {
  transform: scale(2);
}

.box-1b {
opacity: 0;
transform: scale(.2);
z-index: 1550;
}

#trigger-1:checked ~ .box-1b {
  transform: scale(1.5) translateY(-80px); 
  opacity: 1;
  pointer-events: none;
  z-index: 1550;
}

/* ================ PICTURE 2 ================ */

.pic-2 {
display:flex;
flex-direction: column;
align-items: center;
z-index: 1400;
}

.pic-2:hover {
z-index: 1600;
}

.hidden-trigger-2 { 
    display: none; 
}

#trigger-2:checked ~ .box {
    transition: transform .4s;
}

#trigger-2:not(checked) ~ .box {
    transition: transform .4s;
}

#trigger-2:hover ~ .box-2a {
  transition: transform .3s ease;
  transform: rotate(5deg) scale(1.1);
}

#trigger-2:checked ~ .box-2a {
  transform: scale(2) translate(-20%, 80px);
}

.box-2b {
opacity: 0;
transform: scale(.2);
z-index: 1450;
}

#trigger-2:checked ~ .box-2b {
  transform: scale(1.5) translate(80%, -205px); 
  opacity: 1;
  pointer-events: none;
  z-index: 1450;
}

/* ================ PICTURE 3 ================ */

.pic-3 {
display:flex;
flex-direction: column;
align-items: center;
z-index: 1300;
}

.pic-3:hover {
z-index: 1600;
}

.hidden-trigger-3 { 
    display: none; 
}

#trigger-3:checked ~ .box {
    transition: transform .4s;
}

#trigger-3:not(checked) ~ .box {
    transition: transform .4s;
}

#trigger-3:hover ~ .box-3a {
  transition: transform .3s ease;
  transform: rotate(5deg) scale(1.1);
}

#trigger-3:checked ~ .box-3a {
  transform: scale(2);
}

.box-3b {
opacity: 0;
transform: scale(.2);
z-index: 1350;
}

#trigger-3:checked ~ .box-3b {
  transform: scale(1.5) translate(150px, -205px); 
  opacity: 1;
  pointer-events: none;
  z-index: 1350;
}

/* ================ PICTURE 4 ================ */

.pic-4 {
display:flex;
flex-direction: column;
align-items: center;
z-index: 1200;
}

.pic-4:hover {
z-index: 1600;
}

.hidden-trigger-4 { 
    display: none; 
}

#trigger-4:checked ~ .box {
    transition: transform .4s;
}

#trigger-4:not(checked) ~ .box {
    transition: transform .4s;
}

#trigger-4:hover ~ .box-4a {
  transition: transform .3s ease;
  transform: rotate(5deg) scale(1.1);
}

#trigger-4:checked ~ .box-4a {
  transform: scale(2) translate(20%, 80px);
}

.box-4b {
opacity: 0;
transform: scale(.2);
z-index: 1250;
}

#trigger-4:checked ~ .box-4b {
  transform: scale(1.5) translate(105%, -200px); 
  opacity: 1;
  pointer-events: none;
  z-index: 1250;
}

/* ================ PICTURE 5 ================ */

.pic-5:hover {
display:flex;
flex-direction: column;
align-items: center;
z-index: 1600;
}

.pic-5 {
display:flex;
flex-direction: column;
align-items: center;
}

.hidden-trigger-5 { 
    display: none; 
}

#trigger-5:checked ~ .box {
    transition: transform .4s;
}

#trigger-5:active {
}

#trigger-5:not(checked) ~ .box {
    transition: transform .4s;
}

#trigger-5:hover ~ .box-5a {
  transition: transform .3s ease;
  transform: rotate(5deg) scale(1.1);
  z-index: 1350;
}

#trigger-5:checked ~ .box-5a {
  transform: scale(2);
}

.box-5b {
opacity: 0;
transform: scale(.2);
z-index: 1350;
}

#trigger-5:checked ~ .box-5b {
  transform: scale(1.5) translate(-150px, -200px); 
  opacity: 1;
  pointer-events: none;
  z-index: 1350;
}

.hidden-moderator {
  display: none;
  }

.hidden-spacer {
  display: none;
  }


/* ================ WORD BUBBLES ================ */

.bubble {
  position: relative;
  width: 160px;
  padding: 15px;
  background: white;
  border: 2px solid black;
  border-radius: 15px;
  text-align: left;
}

.bubble::after {
  content: "";
  position: absolute;
  left: 2%;
  top: 25%;
  width: 2px;
  height: 40px;
  background-color: black;
  transform: rotate(45deg);
  transform-origin: top;
}

.bubble4 {
  position: relative;
  width: 160px;
  padding: 15px;
  background: white;
  border: 2px solid black;
  border-radius: 15px;
  text-align: left;
}

.bubble4::after {
  content: "";
  position: absolute;
  left: 2%;
  top: 25%;
  width: 2px;
  height: 40px;
  background-color: black;
  transform: rotate(45deg);
  transform-origin: top;
}

.bubble2 {
  position: relative;
  width: 183px;
  padding: 15px;
  background: white;
  border: 2px solid black;
  border-radius: 15px;
  text-align: left;
transform: translate(180px, -120px);
}

.bubble2::after {
  content: "";
  position: absolute;
  left: 2%;
  top: 25%;
  width: 2px;
  height: 40px;
  background-color: black;
  transform: rotate(45deg);
  transform-origin: top;
}

.bubble5 {
  position: relative;
  width: 170px;
  padding: 15px;
  background: white;
  border: 2px solid black;
  border-radius: 15px;
  text-align: left;
}

.bubble5::after {
  content: "";
  position: absolute;
  right: 2%;
  top: 25%;
  width: 2px;
  height: 40px;
  background-color: black;
  transform: rotate(-45deg);
  transform-origin: top;
}

.bubble6 {
  position: relative;
  width: 220px;
  padding: 15px;
  background: white;
  border: 2px solid black;
  border-radius: 15px;
  text-align: left;
}

.bubble6::after {
  content: "";
  position: absolute;
  right: 2%;
  top: 25%;
  width: 2px;
  height: 40px;
  background-color: black;
  transform: rotate(-60deg);
  transform-origin: top;
}

.bubble p {
    font-size: 13px;
 }

.bubble2 p {
    font-size: 13px;
 }

.bubble4 p {
    font-size: 13px;
 }

.bubble5 p {
    font-size: 13px;
 }

/* ================ FURNITURE & FLOOR ================ */

.furniture {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    z-index: 1;
}

.fireplace {
  transform:translateX(10%);
  }

.lil-g {
  position: absolute;
  top:-108px;
  right: -80px;
scale: .9;
 }

.lil-g-text {
  position: absolute;
  top:-70px;
  right: 100px;
scale: .9;
 }

.treasure-horse {
  position:absolute;
  top: -200px;
  left: 30%;
  transform: translate(-50%, -50%) scale(.45);
  z-index: 1;
}

.treasure-duck {
  position:absolute;
  top: -290px;
  left: 43%;
  transform: translate(-50%, -50%) scale(.45);
  z-index: 1;
}

.floor-shape {
  width: 100%;
  height: 50px;
  background-color: #aebfff;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  transform: translateY(1px);
}

.family-floor {
  background-color: #aebfff;
  position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 100px 0 60px;
    }

.floor-text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 80%;
    max-width: 1500px;    
    padding: 0 60px 0 60px;
/*  white-space: nowrap; */
  transform: translateY(-50px);
}

.floor-text h2 {
    color: #1c6fb4;
    font-size: 72px;
    font-weight: 900; 
    line-height: 0.8;
    margin-bottom: 50px;
    }

.floor-text p {
    font-size: 20px;
    margin-bottom: 20px;
    }

.floor-text p {
    font-size: 20px;
    margin-bottom: 20px;
    }


.fire {
  position: absolute;
  top: -140px;
  left: 49.6%;
  transform: translate(-50%, -50%) scale(.45);
  z-index: 1;
  }


/* ======================================================

                         JOIN

====================================================== */

.join {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: -10px 0 60px;
  }

.join-top {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9e9e9;
  width: 100%;
  max-width: 2000px;
border: 2px dashed purple;
  }

.join-text {
    width: 40%;
    max-width: 800px;
    padding: 0 0 0 60px;
    }

.join h1 {
    font-size: 72px;
    font-weight: 900; 
    line-height: 0.8;
    margin-top: 30px;
    margin-bottom: 50px;
    }

.join p {
    font-size: 20px;
    margin-bottom: 20px;
    }

.join h2 {
    font-size: 12px;
    font-weight: 600; 
  
  }

.join-contact {
  background: #1c6fb4;
  color: white;
  padding: 40px 10px;
  margin: 20px;
  border-radius: 30px;
  text-align: center;
  }

.circle2 {
    max-width: 700px;
    min-width: 620px;
    height: auto;
    background: none;
    border-radius: 50%;
    margin: 0 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  overflow: hidden;
    border: 36px solid #1c6fb4; 
    }


.circle2 img {
  -webkit-mask-image: radial-gradient(circle, black 60%, transparent 70%);
  mask-image: radial-gradient(circle, black 60%, transparent 70%);

  }



.join-image {
  border: 16px dashed #1c6fb4; 
  border-radius: 50%;
  z-index: 12;
  margin: 0 120px;
}

.join-image img {
  max-width: 640px;
  height: auto;
  background: none;
  position: relative;
  margin: 0;

  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle, black 60%, transparent 70%);
  mask-image: radial-gradient(circle, black 60%, transparent 70%);
  }


.join-hidden-image {
  display: none;
  }


.join-bottom {
  display: flex;
  justify-content: center;
  align-items: start;
  background-color: #e9e9e9;
  width: 100%;
  max-width: 1500px;
  margin: 40px 0 0;
  }

.news {
    max-width: 30%;
    margin: 60px 20px 20px;
    min-width: 300px;
    background: /*#1c6fb4;*/ #fea8f5; /*#FF9DF5;*/
    border-radius: 30px;
    padding: 30px 60px 10px;
    }    

.news h4 {
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 32px;
    }

/* ======================================================

                       NEXT SECTION 

====================================================== */

.next-section {
  width: fit-content;
  margin: -40px 0 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

/* ======================================================

                       RESPONSIVE 

====================================================== */

@media (max-width: 1175px) {

.header-spacer {
  display: none;
}

.menu-logo {
  padding: 0;
  margin: 0;
  align-items: start;
}

.menu-logo img {
  transform: translateX(-25px);
}

.nav {
  width: 70%;
}

    .hero,
    .content-blue,
    .join {

    margin: 60px 0 60px;
    flex-direction: column;
    text-align: left;
  height: fit-content;
    }
    
.hero-text {
    width: 100%;
    max-width: 800px;
    padding: 0 20px 0;
    }

.hero h1 {
    font-size: 72px;
    font-weight: 900;
    }

.circle {
    width: 100%;
    max-width: 640px;
    min-width: 0;
    padding: 250px 0;
    }

.content-blue {
    padding: 30px 0 30px;
    }

.content-text {
    width: 100%;
    max-width: 800px;
    padding: 0 20px 0;
    }

.content-blue h2 {
    font-size: 72px;
    font-weight: 900; 
    line-height: 0.8;
    margin-bottom: 50px;
    }

.content-image {
    width: 100%;
    max-width: 640px;
    min-width: 0;
    padding: 0;
    margin: 20px 0;
    border-radius: 50%;
    mask: none;

        mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0) 100%
    );
    }


/* ===== FAMILY ===== */   /* RESPONSIVE */



.meet-the-family {
  display: none;
  }

.family-ceiling {
    padding: 120px 0 70px;
    }

.ceiling-spacer {
  display: none;
    }

.ceiling-text {
    width: 100%;
    max-width: 800px;
    padding: 0 20px 0;
  white-space: normal;
  overflow: visible;    
  }

.family-wallpaper {
  }


.portraits {
  flex-direction: column;
  width: 100%;
  height: fit-content;
padding: 0 0 50px;
margin: 0;
  }


.middle-three {
  width: 100%;
  height: 250px;
padding: 0;
margin: 50px 0 0;
  }

.picture-spacer {
  display: none;
  }

.hidden-moderator {
  display: flex;
  }

.hidden-spacer {
  display: flex;
  width: 15%;
  }

.pic-1 {
  display: none;
  }


.pic-5 {
  margin-left: 35px;
  }

#trigger-2:checked ~ .box-2a {
  transform: scale(1.8) translate(0, 40px);
}

#trigger-2:checked ~ .box-2b {
  transform: scale(1.5) translate(105%, -205px); 
}

#trigger-3:checked ~ .box-3a {
  transform: scale(1.8);
}

#trigger-4:checked ~ .box-4a {
  transform: scale(1.8) translate(5%, 40px);
}

#trigger-4:checked ~ .box-4b {
  transform: scale(1.5) translate(-90%, -205px); 
}

#trigger-5:checked ~ .box-5a {
  transform: scale(1.8);
}


.bubble4::after {
  content: "";
  position: absolute;
  left: 2%;
  top: 25%;
  width: 2px;
  height: 40px;
  background-color: black;
  transform: rotate(45deg);
  transform-origin: top;

transform: translateX(-140px);
}


.bubble4::after {
  content: "";
  position: absolute;
  left: 150px;
  top: 25%;
  width: 2px;
  height: 40px;
  background-color: black;
  transform: rotate(-45deg);
  transform-origin: top;
}



/* ================ PICTURE 6 (hidden moderator) ================ */

.pic-6 {
display:flex;
flex-direction: column;
align-items: center;
  margin-right: 35px;

z-index: 1500;
}

.hidden-trigger-6 { 
    display: none; 
}

#trigger-6:checked ~ .box {
    transition: transform .4s;
}

#trigger-6:not(checked) ~ .box {
    transition: transform .4s;
}

#trigger-6:hover ~ .box-6a {
  transition: transform .3s ease;
  transform: rotate(5deg) scale(1.1);
}

#trigger-6:checked ~ .box-6a {
  transform: scale(1.8);
}

.box-6b {
opacity: 0;
transform: scale(.2);
z-index: 1550;
}

#trigger-6:checked ~ .box-6b {
  transform: scale(1.5) translate(-5px, -80px); 
  opacity: 1;
  pointer-events: none;
  z-index: 1550;
}

/* ============= END hidden moderator ============ */

.last-one {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 350px;
  padding: 50px;
  margin-top: 10px;

  }


.lifted-image {
  transform: translateY(-40px);
}

.placard2 {
  transform: translateY(-40px);
  }

.lil-g {
/*  right: -40px; */
  }

.lil-g-text {
  top:-70px;
  right: 100px;
scale: .9;
 }

.floor-text {
    width: 100%;
    max-width: 800px;
    padding: 0 20px 0;
  }

.chair2 {
  transform: translateX(20%);
  }

/* ===== JOIN ===== */   /* RESPONSIVE */

.join-top {
  flex-direction: column;
  padding: 80px 0;
border: 2px solid red;
}

.join-bottom {
  flex-direction: column;
  align-items: center;
}

.join-text {
    width: 100%;
    max-width: 800px;
    padding: 0 30px 20px;
    }

.join h2 {
  text-align: center;  
  }

.news {
    width: 95%;
    max-width: 600px;
    border-radius: 30px;
    margin: 20px 60px 30px 60px;
    padding: 30px 30px 10px 30px;
    }

.circle2 {
  display: none;
    }

.join-image {
  display: none;
  }

.join-hidden-image {
  display: flex;
    width: 620px;
    height: auto;
    background: none;
    border-radius: 50%;
    margin: 0 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  overflow: hidden;
    border: 24px solid #1c6fb4; 
}

}

/* ======================================================

                         MOBILE 

====================================================== */

@media (max-width: 600px) {


/* ==============================================
                     MENU                             [MOBILE]
============================================== */

button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.header-spacer {
  display: none;
}

.menu-logo {
  display: none;
}

.nav {
  display: none;
}

.header {
  width: 100vw;
  padding: 5px;
}

.small-logo {
  width: 100px;
  }

.hidden-menu {
  color: #156aa5;
 }

.menu {
  display:flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  }

/* ==============================================
                     HERO                             [MOBILE]
============================================== */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
height: fit-content;
    margin: 0 0 10px;
    padding: 0;
    }

.hero-text {
    padding: 0 20px 0;
    }

.hero h1 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 6px;
    padding: 20px 0 20px;
    }

.hero p {
    font-size: 18px;
    margin-bottom: 0;
    padding: 0 0 20px;
    }

.hero ul {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
    padding: 0 0 20px 60px;
    }

.circle {
    width: 100%;
    height: 100%;
    background: none;
    padding: 60px 0 0;
    }     


/* ==============================================
                    CONTENT                           [MOBILE]
============================================== */

.content-blue {
  margin:15px 0;
  padding:20px 0;
  }

.content-blue h2 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 6px;
    padding: 20px 0 20px;
  height: fit-content;
    }

.content-blue p {
    font-size: 18px;
    margin-bottom: 0;
    padding: 0 0 20px;
    }

.content-image {
    width: 90%;
    border-radius: 30px;
    object-fit: cover;

    mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0) 100%
    );
    }

/* ==============================================
                     PROPS                            [MOBILE]
============================================== */

/* ================= IMAGES ===================*/

.props {
  padding: 0;
}

.animation {
 position: relative; 

}

.top-right {
  width: 48%;
  position: relative; 
  top: -20px; 
  animation: hello-good-bye;
  animation-timeline: scroll(root);
}

@keyframes hello-good-bye {

  0% {
    transform: translate(0, 0);
    }
  100% {
    transform: translate(0, 0);
    }
}

.prop-box {
  position: relative; 
}

.glow-row {
  transform: translateY(225px);
}

.glow-box-1 {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
    transform: translate(20px, -20px);
  animation: glow-fade-1;
  animation-timeline: scroll(root);
}

@keyframes glow-fade-1 {

  0% {
    transform: translate(20px, -20px);
    opacity:0;
    }
  16% {
    transform: translate(20px, -20px);
    opacity:0;
    }
  17% {
    transform: translate(20px, -20px);
    opacity:1;
    }
  100% {
    opacity:1;
    }
}

.glow-box-2 {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
    transform: translate(20px, -35px);
  animation: glow-fade-2;
  animation-timeline: scroll(root);
}

@keyframes glow-fade-2 {

  0% {
    opacity:0;
    }
  20% {
    opacity:0;
    }
  21% {
    opacity:1;
    }
  100% {
    opacity:1;
    }
}

.glow-box-3 {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
    transform: translate(30px, 0);
  animation: glow-fade-3;
  animation-timeline: scroll(root); 
}

@keyframes glow-fade-3 {

  0% {
    opacity:0;
    }
  25% {
    opacity:0;
    }
  26% {
    opacity:1;
    }
  100% {
    opacity:1;
    }
}

.prop-glow {
max-width: 280px;
opacity: 50%;
animation: spin 15s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.hand-box {
display: none;
}

.prop-hand {
display: none;
}

.weapon-box {
width:33%;
    transform: translate(20px, -20px) scale(.9);
/*background-color: #FFA50080;*/
  animation: weapon-pop;
  animation-timeline: scroll(root);
}

@keyframes weapon-pop {

  0% {
    transform: translate(20px, -20px) scale(.55);
    }
  16% {
    transform: translate(20px, -20px) scale(.55);
    }
  17% {
    transform: translate(20px, -20px) scale(1.1);
    }
  100% {
    transform: translate(20px, -20px) scale(1.1);
    }
}

.prop-weapon {
max-width: 200px;
}

.money-box {
display: flex;
justify-content: center;
align-items: center;
width:33%;
    transform: translate(20px, -45px) scale(.9);
  animation: money-pop;
animation-timeline: scroll(root);
}

@keyframes money-pop {

  0% {
    transform: translate(20px, -45px) scale(.55);
    }
  20% {
    transform: translate(20px, -45px) scale(.55);
    }
  21% {
    transform: translate(20px, -45px) scale(1.1);
    }
  100% {
    transform: translate(20px, -45px) scale(1.1);
    }
}

.prop-money {
max-width: 200px;
}

.cherry-box {
display: flex;
justify-content: center;
align-items: center;
width:33%;
    transform: translate(40px, -10px) scale(.9);
/*background-color: rgb(255 0 0 / 50%);*/
  animation: cherry-pop;
  animation-timeline: scroll(root);
}

@keyframes cherry-pop {

  0% {
    transform: translate(40px, -10px) scale(.55);
    }
  25% {
    transform: translate(40px, -10px) scale(.55);
    }
  26% {
    transform: translate(40px, -10px) scale(1.2);
    }
  100% {
    transform: translate(40px, -10px) scale(1.2);
    }
}

.prop-cherry {
max-width: 200px;
}

.finger-box {
display: none;
}

.prop-finger {
display: none;
}

/* ============== NEW STUFF ============== */


.animation {
  display: none;
  }

.prop-spacer {
  }

.hidden-props1 {
  display: block;
  position: absolute;
  top: -25px;
  left: 220px;
  }

.hidden-props2 {
  display: block;
  position: absolute;
  top: -25px;
  left: 220px;
  }

.hidden-props3 {
  display: block;
  position: absolute;
  top: -25px;
  left: 220px;
  }

.weapons {
  position: relative;
  }

.hidden-weapon {
  transform: translate(-10px, -230px);
  }

.money {
  position: relative;
  }

.hidden-money {
  transform: translate(-10px, -230px);
  }

.cherries {
  position: relative;
  }

.hidden-cherries {
  transform: translate(-10px, -230px);
  }

/* ================= WORDS ===================*/

.hidden {
  display: block;
}

.props-intro {
  width: 100%;
  padding: 0 0 20px;
}

.weapons {
  background: linear-gradient(
    to left, 
    #f5d67e00 0%, 
    #f5d67e80 100%
  );
}

.money {
  background: linear-gradient(
    to left, 
    #a6d28700 0%, 
    #a6d28780 100%
  );
}

.cherries {
  background: linear-gradient(
    to left, 
    #f5949400 0%, 
    #f5949480 100%
  );
}

.prop-text {
  width: 100%;
  padding: 10px 20px;
  z-index:100;
}

.prop-spacer {
  display: none;
}


.prop-text h1 {
    font-size: 92px;
    font-weight: 900;
    margin-bottom: 6px;
    padding: 20px 0 20px;
    transform: translateY(-6px);
    }

.prop-text h2 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 6px;
    padding: 20px 0 20px;
    }

.prop-text h3 {
    font-size: 32px;
    font-weight: 900; 
    margin-bottom: 6px;
    padding: 20px 0 20px;
    }

.prop-text p {
    font-size: 18px;
    margin-bottom: 0;
    padding: 0 0 20px;
    }

/* ==============================================
                    FAMILY                            [MOBILE]
============================================== */

.family-ceiling {
  height: fit-content;
  padding: 15px 0 10px;
}

.ceiling-spacer {
  display: none;
}

.ceiling-text {
  width: 100%;
  padding: 10px 20px;
  white-space: normal;
}

.ceiling-text h2 {
  font-size: 42px;
  font-weight: 900; 
  margin-bottom: 6px;
  padding: 20px 0 20px;
}

.ceiling-text p {
  font-size: 18px;
  margin-bottom: 0;
  padding: 0 0 40px;
}

.ceiling-shape {
/*  width: 100%;
  height: 50px;
  background-color: #e9e9e9;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  transform: translateY(-1px); */
  display: none;
}

.chandeliers-2 {
    display: none;
}

.chandelier-1 {
    display: flex;
}

.family-wallpaper {
  background: repeating-linear-gradient(
    to right,
    #aebfff,
    #aebfff 30px,
    #e9e9e9 30px,
    #e9e9e9 60px
  );
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
/*  height: fit-content; */
}

.portraits {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: fit-content;
  padding: 0 0 50px;
  z-index: 999;
  gap: 0;
  margin: 0 auto;
}

.middle-three {
  display: flex;
  flex-direction: column;
  height: fit-content;
 padding: 0;
 margin: 0;

}

.pictures img {
  width: 55%;
  margin: 0 auto;
}

.lifted-image {
  transform: translateY(0px);
}

.placard {
  margin: 15px 0 0;
}

.placard2 {
  transform: translateY(0px);
  margin: 15px 0 0;
}

.box {
  display: flex;
  align-items: center;
  width: 90%;  
}

.picture {
}

.pictures {
  width: 100%;
}

.raised {
    transform: translateY(0);
}

/* ================ PICTURE 1 ================ */

.pic-1 {
  display: flex;
  height: 350px;
  z-index: 1100;
}

.box-1a {
  width: 100%;
}

#trigger-1:not(checked) ~ .box {
  transform: rotate(7deg) scale(.95);
}

#trigger-1:hover ~ .box-1a {
  transition: transform .3s ease;
  transform: rotate(7deg) scale(1);
}

#trigger-1:checked ~ .box-1a {
  transform: scale(1.1);
}

.box-1b {
  width: 90%;
  pointer-events: none;
  z-index: 1150;
}

#trigger-1:checked ~ .box-1b {
  transform: scale(1) translateY(-305px); 
}

/* ================ PICTURE 2 ================ */

.pic-2 {
  height: 350px;
  z-index: 1200;
}

.box-2a {
  width: 100%;
}

#trigger-2:not(checked) ~ .box {
  transform: rotate(-7deg) scale(.95);
}

#trigger-2:hover ~ .box-2a {
  transition: transform .3s ease;
  transform: rotate(-7deg) scale(1);
}

#trigger-2:checked ~ .box-2a {
  transform: scale(1.1);
}

.box-2b {
  width: 90%;
  pointer-events: none;
  z-index: 1250;
}

#trigger-2:checked ~ .box-2b {
  transform: scale(1) translateY(-320px); 
}

/* ================ PICTURE 3 ================ */

.pic-3 {
  height: 350px;
  z-index: 1300;
}

.box-3a {
  width: 100%;
}

#trigger-3:not(checked) ~ .box {
  transform: rotate(10deg) scale(.95);
}

#trigger-3:hover ~ .box-3a {
  transition: transform .3s ease;
  transform: rotate(10deg) scale(1);
}

#trigger-3:checked ~ .box-3a {
  transform: scale(1.1);
}

.box-3b {
  width: 90%;
  pointer-events: none;
  z-index: 1350;
}

#trigger-3:checked ~ .box-3b {
  transform: scale(1) translateY(-335px); 
}

/* ================ PICTURE 4 ================ */

.pic-4 {
  height: 350px;
  z-index: 1400;
}

.box-4a {
  width: 100%;
}

#trigger-4:not(checked) ~ .box {
  transform: rotate(-7deg) scale(.95);
}

#trigger-4:hover ~ .box-4a {
  transition: transform .3s ease;
  transform: rotate(-7deg) scale(1);
}

#trigger-4:checked ~ .box-4a {
  transform: scale(1.1);
}

.box-4b {
  width: 90%;
  pointer-events: none;
  z-index: 1450;
}

#trigger-4:checked ~ .box-4b {
  transform: scale(1) translateY(-335px); 
}

/* ================ PICTURE 5 ================ */

.hidden-spacer {
display: none;
}

.last-one {
display: flex;
justify-content: center;
  height: 350px;
padding: 0;
margin: 0;
}


.pic-5 {
  height: 350px;
  z-index: 1500;
}

.box-5a {
  width: 100%;
}

#trigger-5:not(checked) ~ .box {
  transform: rotate(10deg) scale(.95);
}

#trigger-5:hover ~ .box-5a {
  transition: transform .3s ease;
  transform: rotate(10deg) scale(1);
}

#trigger-5:checked ~ .box-5a {
  transform: scale(1.1);
}

.box-5b {
  width: 90%;
  pointer-events: none;
  z-index: 1550;
}

#trigger-5:checked ~ .box-5b {
  transform: scale(1) translateY(-335px); 
}

/* ================ PIC 6 ================ */

.pic-6 {
display:none;
}

.hidden-moderator {
display:none;
}

/* ================ WORD BUBBLES ================ */

.bubble {
  width: 90%;
  margin: 0 auto; 
  transform: translate(0, -110px);
}

.bubble::after {
  left: 35%;
  top: 94%;
  transform: rotate(-45deg);
}

.bubble p {
    font-size: 16px;
}

.bubble2 {
  width: 90%;
  margin: 0 auto; 
  transform: translate(0, -120px);
}

.bubble2::after {
  left: 35%;
  top: 94%;
  transform: rotate(-45deg);
}

.bubble2 p {
    font-size: 16px;
}

.bubble4 {
  width: 90%;
  margin: 0 auto; 
  transform: translate(0, -110px);
}

.bubble4::after {
  left: 65%;
  top: 94%;
  transform: rotate(45deg);
}

.bubble4 p {
    font-size: 16px;
}

.bubble5 {
  width: 90%;
  margin: 0 auto; 
  transform: translate(0, -110px);
}

.bubble5::after {
  left: 25%;
  top: 94%;
  transform: rotate(-45deg);
}

.bubble5 p {
    font-size: 16px;
}

/* ================ FURNITURE & FLOOR ================ */

.furniture {
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 1;
}

.floor-shape {
  display: none;
}

.family-floor {
  background-color: #aebfff;
  height: fit-content;
  position: relative;
  padding: 20px 0 0;
  margin: 0 0 20px;
}

.floor-text {
  width: 100%;
  padding: 20px 20px 20px;
  white-space: normal;
  transform: translateY(0);
}

.floor-text h2 {
  font-size: 42px;
  font-weight: 900; 
  margin-bottom: 6px;
  padding: 20px 0 20px;
}

.floor-text p {
  font-size: 18px;
  margin-bottom: 0;
  padding: 0 0 20px;
}

.chair {
  display: none;
}

.chair2 {
  display: none;
  }


.fireplace {
  width: 98%;
  transform: translate(0);
display: flex;
    justify-content: center;
  }

.fire {
  top: -90px;
  left: 49%;
}

.lil-g {
  right: -40px;
 }

.lil-g-text {
  top:-70px;
  right: 140px;
scale: .9;
 }


/* ==============================================
                     JOIN                             [MOBILE]
============================================== */

.join {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 10px 0 10px;
    }

.join-text {
    width: 100%;
    padding: 30px 20px 20px;
    }

.join-hidden-image {
    width: 100%;
    height: auto;
    border: 12px solid #1c6fb4; 
    background: none;
    padding: 0;
    margin: 5px 0 15px;
    }     

.join-contact {
    max-width: 380px;
margin: 0 0 -50px;
}

.join-contact h2 {
    font-size: 20px;
    font-weight: 300; 
    line-height: 0.8;
    text-align: center;
    }

join-hidden-image h2 {
  transform: translateY(50px);
}

.go-away {
display:none;
}

.join h1 {
    font-size: 42px;
    font-weight: 900; 
    line-height: 0.8;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
    }

.join p {
    font-size: 18px;
    margin-bottom: 20px;
    }

.email {
    text-align: center;
    }

.news {
    width: 90%;
    max-width: 380px;
    margin: 15px ;
    border-radius: 30px;
    padding: 30px 20px 10px; 
    }    

.news h4 {
    font-size: 32px;
    }

.news p {
    font-size: 18px;
    margin-bottom: 20px;
    }

/* ==============================================
                  NEXT SECTION                             [MOBILE]
============================================== */

.next-section {
  margin: 20px 0 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

}