body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items:flex-start;
    font-family: 'helvetica neue', Arial, sans-serif;


}
* {
  /*border:1px solid black;*/
}

body{
  overflow-x:hidden;
  background-image: url('img/bg2.jpg');
  background-position: top center;
  background-size: auto;
  background-repeat: no-repeat;
  background-color: #000;
}

li {
    list-style-type: none; /* This removes the bullet */
    font-style: italic;

}
.explain{
  max-width: 600px;
  font-size: 25px;
  font-weight: 200;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);

}
.orange{
  color:#fa7804;
}
.green{
  color:#5cc3a4;
}
.yellow{
  color:#e0e233;
}
.white{
  color:#FFF
}
.butterfly{
  position:absolute;
}

.b1{
  left:-400px;
  animation: float 5s ease-in-out infinite;
}

.b2{
  top:-145px;
  left:-650px;
  animation: float2 8s ease-in-out infinite;


}

.b3{
  top:-180px;
  right:-800px;
  animation: float3 8s ease-in-out infinite;


}

.no-animation {
  animation-play-state: paused;
}



@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1) rotate(20deg); /* Return to slightly larger size at start and end */
    }
    25% {
        transform: translateY(-10px) scale(0.95) rotate(18deg); /* Move up slightly and scale down */
    }
    50% {
        transform: translateY(-20px) scale(1) rotate(20deg); /* Peak of the float */
    }
    75% {
        transform: translateY(-10px) scale(0.8) rotate(18deg); /* Move down slightly and scale down again */
    }
}


@keyframes float2 {
    0%, 100% {
        transform: translate(12px, 10px) scale(.5) rotate(3deg); /* Return to slightly larger size at start and end */
    }
    25% {
        transform: translate(10px, -10px) scale(0.4) rotate(2deg); /* Move up slightly and scale down */
    }
    50% {
        transform: translate(20px, 10px) scale(.5) rotate(5deg); /* Peak of the float */
    }
    75% {
        transform: translate(10px, 10px) scale(0.4) rotate(8deg); /* Move down slightly and scale down again */
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translateY(0) scale(.7) rotate(-20deg); /* Return to slightly larger size at start and end */
    }
    25% {
        transform: translateY(-10px) scale(0.75) rotate(-18deg); /* Move up slightly and scale down */
    }
    50% {
        transform: translateY(-20px) scale(.7) rotate(-20deg); /* Peak of the float */
    }
    75% {
        transform: translateY(-10px) scale(0.8) rotate(-18deg); /* Move down slightly and scale down again */
    }
}


.container {
  position: relative;
    display: flex;
    justify-content: center;
    width: 100%;


}

.content {
  position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;



}
.spacer{
  position: relative;

}

.spacerow{
  height:80px;
  margin:10px;


}

.headline{
   font-size: 90px;
 line-height: 1;
   font-weight: bold;


}

.subheadline{
   font-size: 30px;
   line-height: 1;
   font-weight: bold;
   font-weight: 300;
   line-height: 1.25;
   max-width: 1000px;

}

.textcontainer{


}
.buttonoff{
  display: flex;
  justify-content: center;
  align-items:center;
  position: relative;
  background-color: black;
  width:364px;
  height:60px;
  border-radius: 30px;
  color:#edebeb;
  cursor: pointer;
  user-select: none;


}

.buttoncircle1{
  position: absolute;
  right:5px;
  background-color: #edebeb;
  width:40px;
  height:40px;
  border-radius: 30px;
}

.buttonon{
  display: flex;
  justify-content: center;
  align-items:center;
  position: relative;
  background-color: #8d8d8d;
  width:364px;
  height:60px;
  border-radius: 30px;
  color:#edebeb;
  cursor: pointer;
  user-select: none;
  display: none;


}

.bar{
  width:150px;
  height:2px;
  background-color: black;
}

.headline2{
  font-size: 60px;
  line-height: 1;
  font-weight: 300;
  line-height: 1.25;
}
.boldit{
  font-weight:800;

}

.sims {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;

    width:100%;

    width:100%;
    padding-top: 40px;



}

.sims > div {
    width: 50px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin:0 10px;






}

.sims  img{
  width:170px;
}
.sims .name{

  font-size:30px;
  font-weight: bold;
}
.sims .more{

  font-size:20px;
  width:300px;
}



.frame{

  margin:-20px 0 0 0px;

}
.frameholder{
  margin-top: -50px;
    border-radius: 0px;
  overflow: hidden;

}
.frameholderout{

  position: relative;
}


.content-row {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    text-align: center;
    width: 100%; /* Use 100% width to use max-width effectively */
    font-size:60px;
    font-size: 24px !important;
}

.content-wrap {

    flex-wrap: wrap; /* Allows items to wrap onto the next line */
}

.content-top{

      align-items:flex-start;

}

.simsbio{
 width:200px;
 margin:40px 10px;

 text-align: left;
}
.simsbio img{
  width:150px;
}

.simsbio .name{
  font-size:20px;
  line-height: 1.5;
}


@media (max-width: 900px) {
    br {
        display: none;
    }
    .headline, .subheadline{
      width:600px;
    }


}


@media (max-width: 850px) {
    .simrow{
      width:600px;
    }
    .sim{
      display:none !important;
      width:600px;
    }

    .sims  img{
      width:100px;
    }
    .sims .name{

      font-size:20px;
      font-weight: bold;
    }
    .sims .more{

      font-size:16px;
      width:300px;
    }

}