/* shared hero styles */
#page-content > section:first-child{
  /* height:calc(100vh - 100px); */
  height:70vh;
  min-height:calc(100vh - 210px);
  padding-top:0;
}

/* illustration */
#illustration-container{
  position:relative;
}
.custom-shape{
  position:absolute;
  transition:1s;
}



/* background-shapes */
[class^="bg-circle"]{
  opacity:.35;
  z-index:0;
  background-color: currentColor;
}
/* dark mode changes */
.dark-mode [class^="bg-circle"]{
  opacity: .2;
  background-color:transparent;
  border: 5px solid currentColor;
}
/*system mode, dark mode styles*/
@media (prefers-color-scheme: dark) {
	.system-mode [class^="bg-circle"]{
    opacity: .2;
    background-color:transparent;
    border: 5px solid currentColor;
  }
}

#home-hero .bg-circle-1{
  animation:circle1HomeFloat 2s ease-in-out infinite alternate-reverse;
}
@keyframes circle1HomeFloat{
  0%{
    top: 23%;
    left: -6%;
    width: 20em;
    height: 20em;
    top: 41%;
    left: 1%;
  }
  100%{
    top: 15%;
    left: -4%;
    width: 20.7em;
    height: 20.7em;
    top: 44%;
    left: 4%;
  }
}
#services-hero .bg-circle-1{
  animation:circle1ServicesFloat 2s ease-in-out infinite alternate-reverse;
}
@keyframes circle1ServicesFloat{
  0%{
    top:-7%;
    right:2%;
    width:10em;
    height:10em;
  }
  100%{
    top:-5%;
    right:4%;
    width:10.7em;
    height:10.7em;
  }
}


#home-hero .bg-circle-2{
  width:15em;
  height:15em;
  animation:circle2HomeFloat 3s ease-in-out infinite alternate-reverse;
}
@keyframes circle2HomeFloat{
  0%{
    /* top: -8%; */
    /* right: -1%; */
    top:-9%;
    right:-1%;
  }
  100%{
    top: -12%;
    right: -3%;
  }
}
#services-hero .bg-circle-2{
  width:20em;
  height:20em;
  animation:circle2ServicesFloat 3s ease-in-out infinite alternate-reverse;
}
@keyframes circle2ServicesFloat{
  0%{
    top:46%;
    right:3%;
  }
  100%{
    top:43%;
    right:5%;
  }
}

#home-hero .bg-circle-3{
  width:5em;
  height:5em;
  animation:circle3HomeFloat 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes circle3HomeFloat{
  0%{
    top: -29%;
    left: 28%;
  }
  100%{
    top: -26%;
    left: 30%;
  }
}
#services-hero .bg-circle-3{
  width:5em;
  height:5em;
  animation:circle3ServicesFloat 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes circle3ServicesFloat{
  0%{
    top:30%;
    left:10%;
  }
  100%{
    top:27%;
    left:12%;
  }
}


/* accent shapes */
/* small circles */
[class^="small-circle"]{
  border:5px solid currentColor;
  border-radius:50%;
  width:20px;
  height:20px;
  opacity:.75;
}
#home-hero .small-circle-1{
  /* top:-5%; */
  top: -15%;
  left: 60%;
}
#services-hero .small-circle-1{
  top:-5%;
  left:30%;
}
/* @keyframes {
  0%{
    top:65%;
  }
  100%{
    top:63%;
  }
} */
#home-hero .small-circle-2{
  top:90%;
  right:25%;
}
#services-hero .small-circle-2{
  top:110%;
  right:37%;
}
/* @keyframes {
  0%{
    top:65%;
  }
  100%{
    top:63%;
  }
} */

/* small triangles */
[class^="small-tri"]{
  border-bottom:20px solid currentColor;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  opacity:.75;
}

#home-hero .small-tri-1{
  top:32%;
  left:-10%;
  /* animation:tri1Bounce .8s ease-in-out infinite alternate; */
}
#services-hero .small-tri-1{
  /* top:-8%;
  right:14%; */
  top: -14%;
  right: 22%;
}
/* @keyframes tri1Bounce{
  0%{
    top:32%;
  }
  100%{
    top:30%;
  }
} */
#home-hero .small-tri-2{
  /* top:65%; */
  /* right:5%; */
  /* top: 96%; */
  top:110%;
  right: 18%;
  /* animation:tri2Bounce .8s ease-in-out infinite alternate-reverse; */
}
#services-hero .small-tri-2{
  top:76%;
  left:5%;
  /* animation:tri2Bounce .8s ease-in-out infinite alternate-reverse; */
}
/* @keyframes tri2Bounce{
  0%{
    top:65%;
  }
  100%{
    top:63%;
  }
} */
/* .small-tri-3{
  top:80%;
  left:6%;
} */

/* hero checkboxes, services page */
.hero-checkbox-container{
  position:relative;
  background-color:var(--background);
  border: 8px solid #4E9DDE;
  border-radius:8px;
  box-shadow:0px 8px 17px -8px rgb(0 0 0 / 40%);
  padding:50px;
  padding-top:70px;
  min-width:400px;
}
/* .dark-mode .hero-checkbox-container{
  background-color:#333333;
}
.dark-mode .hero-checkbox-container:after{
  background-color:#333333;
}
.dark-mode .hero-checkbox{
  background-color:transparent;
}
@media (prefers-color-scheme: dark) {
	.system-mode [class^="bg-circle"]{
    opacity: .2;
    background-color:transparent;
    border: 5px solid currentColor;
  }
} */
.hero-checkbox-container:before{
  content:"";
  position:absolute;
  background-color:#4E9DDE;
  top:0%;
  left:50%;
  height:40px;
  width:50%;
  transform: translateX(-50%) translateY(-62%);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.hero-checkbox-container:after{
  content:"";
  position:absolute;
  border:10px solid #4E9DDE;
  border-radius:50%;
  background-color:var(--background);
  top:calc(0% - 40px);
  left:50%;
  height:20px;
  width:20px;
  transform: translateX(-50%);
}

.hero-checkbox-item{
  margin-bottom:20px;
}
.hero-checkbox-item:first-child{
  margin-bottom:50px;
}
.hero-checkbox-item:first-child .hero-checkbox{
  transform: scale(1);
}
.hero-checkbox-item:last-child{
  margin-bottom:0px;
}

.hero-checkbox{
  border:8px solid currentColor;
  background-color:var(--background);
  border-radius: 8px;
  width:100px;
  height:100px;
  position:relative;
  margin-right:50px;
  transform-origin:right;
  transform:scale(.6);
  /* margin-bottom:30px; */
  /* transform:scale(.8) */
}

.hero-check{
  position:absolute;
  transform-origin: bottom right;
  transform:rotate(-45deg);
  top:-25%;
  left:15%;
  height:20px;
  background-color:currentColor;
  width:100px;
}
.hero-check:before{
  content:"";
  display:block;
  background-color:currentColor;
  height:20px;
  width:20px;
  transform-origin:top left;
  transform:rotate(-90deg) translate(-2px);
}
.hero-checkbox-text{
  height:10px;
  background-color:currentColor;
  margin-bottom:10px;
  opacity:.75;
}
.hero-checkbox-text:last-child{
  margin-bottom:0px;
}


#hero-text-container{
  width:40%;
  margin-left:50px;;
}



/* change order of home hero blocks */
@media only screen and (max-width:1050px){
  #home-hero{
    height:auto;
  }
  .hero-content-container{
    flex-wrap:wrap;
  }
  #hero-text-container{
    width:100%;
    margin-left:0;
    margin-bottom:50px;
  }
  #illustration-container{
    order:2;
    height:auto;
  }
  #intro-text-container{
    margin-bottom:30px;
  }
}

/* change hero on smaller viewports */
@media only screen and (max-height:650px){
  #page-content > section:first-child{
    height:auto;
  }
}
@media only screen and (max-width:1050px){
  #page-content > section:first-child{
    height:auto;
  }
}

@media only screen and (max-width:480px){
  .hero-checkbox-container{
    width: 100%;
    min-width: 0;
    /* min-width: 320px; */
    padding: 50px 30px 30px 30px;
  }
  .hero-checkbox-container:before,
  .hero-checkbox-container:after{
    display:none;
  }
}

/* ************** */
/* About page hero */