/* 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 */
[data-theme="dark"] [class^="bg-circle"]{
  opacity: .2;
  background-color:transparent;
  border: 5px solid currentColor;
}
/*system mode, dark mode styles*/
@media (prefers-color-scheme: dark) {
	[data-theme="system"] [class^="bg-circle"]{
    opacity: .2;
    background-color:transparent;
    border: 5px solid currentColor;
  }
}

/* hero styles specific to a page are found in that page's respective .css */
/* accent shapes */
/* small circles */
[class^="small-circle"]{
  border:5px solid currentColor;
  border-radius:50%;
  width:20px;
  height:20px;
  opacity:.75;
}

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

/* 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;
}
.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){
  .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;
    padding: 50px 30px 30px 30px;
  }
  .hero-checkbox-container:before,
  .hero-checkbox-container:after{
    display:none;
  }
}