:root{
    --primary: #CE2029; /* rgb(212, 0, 0); #CE2029 #B721FF #21D4FD*/
    --secondary: #111;
    --tetiary:rgb(20,20,20);
    --paragraph: #666;
    --white:#fefefe; 
    --shadow: 3px 4px 10px rgba(0,0,0,0.2);
}
h1 { text-transform: uppercase; font-size: 40px;  }
p { color: var(--paragraph);}
figure { margin:0px;}
/* NAVIGATION */
.head { background-color: rgba(255,255,255,0.2);}
.logo { background: url('../logo.png') no-repeat center; background-size: contain; margin-left: 20px; height: 50px; width: 120px; display: inline-block;}
.showitred { background-color: var(--primary); color: var(--white); }
.head nav ul li a.showitred  { color: var(--white); font-style: italic;}
.head nav ul li a:hover     { color: var(--primary); }
.head nav ul li a.showitred:hover  { background-color: var(--secondary); }
/* LANDING */
.glasspic001 { background: url('../glasspic001.png') no-repeat center; background-size: contain; margin-left: 20px; height: 50px; width: 120px; display: inline-block;}
.welcome        { position:relative; height: 100vh; overflow: hidden; top: -50px;  width: 100vw;} 
.welcome article { width: 40vw;}
.welcome   h1   { color: var(--secondary);}
.influencergirl { height: 100vh; position: absolute; bottom: 0px; right: 10vw;}
article button  { border: 0px; height: 40px; line-height: 40px; padding: 0px 30px; margin: 20px 20px 10px 0px; font-style: normal;}
.socialcard     { border-radius: 20px; height: 200px; width: 160px; box-shadow: var(--shadow); background-color: var(--white); position: absolute;  text-align: center;  transition: all 0.5s ease 0s; }
.socialcard .pic { height: 90px; width: 90px; margin: 20px auto 0px; background-color: var(--paragraph);}
.socialcard .names { line-height: 40px; color: var(--paragraph); font-weight: bold; opacity: 0.6;}
.socialcard .socials { letter-spacing: 8px; font-size: 18px; color: var(--primary); opacity: 0.9; line-height: 20px;}
.pic1 { background: url('../pic1.jpeg') no-repeat center; background-size: cover; }
.pic2 { background: url('../pic2.jpeg') no-repeat center; background-size: cover; }
.pic3 { background: url('../pic3.jpeg') no-repeat center; background-size: cover; }
.social1 { right: 40vw; bottom:120px; }
.social2 { right: 20vw; bottom:-120px; }
.social3 { right: 3vw; bottom:80px; }
/* SECTIONS */
.cover1 { background: url('../cover1.jpg') no-repeat center; background-size: cover; }
.cover2 { background: url('../cover2.jpg') no-repeat center; background-size: cover; height: 100%; width: 100%; }
.cover3 { background: url('../cover3.jpg') no-repeat center; background-size: cover; height: 100%; width: 100%; }
main section    { min-height: 80vh;  align-items: center;}
main section  figure { border-radius: 50px; box-shadow: var(--shadow);  }
main section article { vertical-align: middle; display: inline-block;  padding: 0px 5vw;}
main section article h1 { color:var(--primary);}

.socialcard:hover { background-color: #f1f1f1;}

.box-wrapper {
    position: absolute;
    right: 40vh;
    bottom: 10vh;
    width: 50vh;
    height: 50vh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease;
  }
  .box-wrapper .box {
    width: 52%;
    height: 90%;
    background-image: linear-gradient(19deg, var(--secondary) 0%, var(--primary) 100%);
    transition: all 0.5s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box-wrapper .box::before, .box-wrapper .box::after {
    content: "";
    position: absolute;
    background: inherit;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transition: all 0.5s ease;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .box-wrapper .box::before {
    transform: rotateZ(60deg);
  }
  .box-wrapper .box::after {
    transform: rotateZ(-60deg);
  }
  .box-wrapper .box:hover {
    border-radius: 50px;
  }
  .box-wrapper .box:hover::before, .box-wrapper .box:hover::after {
    border-radius: 50px;
  }
  .box-wrapper:hover {
    transform: rotateZ(180deg);
  }


  .floating {   
    animation-name: floating; 
    animation-duration: 7s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
    margin-left: 30px; 
    margin-top: 5px; 
} 

.floating2 {   
    animation-name: floating; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
    margin-left: 30px; 
    margin-top: 5px; 
} 
.floating3 {   
    animation-name: floating; 
    animation-duration: 11s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
    margin-left: 30px; 
    margin-top: 5px; 
} 
  
@keyframes floating { 
    0% { transform: translate(0,  0px); } 
    50%  { transform: translate(0, 15px); } 
    100%   { transform: translate(0, -0px); }     
} 


@media screen and (max-width: 768px) {
    .welcome { height: 160vh;}
    .welcome article { width: 94vw;}
    article button { padding: 0px 10px;}
    main>section { padding: 20px 0px;}
    .influencergirl { right: 0px;}
    .social1 { right: 4vw; bottom:100px; }
    .social2 { left: -2vw; bottom:-90vh; }
    .social3 { right: 3vw; bottom:-240vh; }
    section>figure.cover3, section>figure.cover2 { height: 120vw;}
    section>figure.cover2  { order:-1; }

}