*{
  padding:0;
  margin:0;
}
/*
font-family: 'Caveat', cursive;
font-family: 'Courgette', cursive;
font-family: 'Great Vibes', cursive;
font-family: 'Kaushan Script', cursive;
font-family: 'Marck Script', cursive;
font-family: 'Parisienne', cursive;
font-family: 'Pinyon Script', cursive;
font-family: 'Tangerine', cursive;
*/
/*
font-family: 'Gayathri', sans-serif;
font-family: 'Livvic', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Hepta Slab', serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Red Hat Text', sans-serif;
font-family: 'Noto Sans', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Lora', serif;
font-family: 'Mukta', sans-serif;
font-family: 'Martel', serif;
*/
body{
  box-sizing:border-box;
  overflow-x:hidden;
}
.burger-box{
 padding: 20px 10px;
  position: fixed;
  top: calc(3em + 10vh);
  right: 5%;
  cursor: pointer;
  z-index:100000000000;
  background: #f2989d;
  border-radius: 15%;
}
.burger,
.burger::before,
.burger::after{
  content:'';
  display:block;
  background-color:black;
  width: calc(1em + 2vw);
  height:3px;
  border-radius:3px;
}
.burger::before{
  transform: translateY(-7px);
}
.burger::after{
  transform: translateY(4px);
}
.cross{
	transform-origin: center;
	transform: rotate(45deg);
}
@media screen and (min-width: 601px){
.menu-wrapper{
  width:200px;
  height:500px;
  overflow:hidden;
  position:fixed;
  top:calc(3em + 10vh);
  right:5%;
  z-index:300;
}
}
@media screen and (max-width: 600px){
.menu-wrapper{
  width:200px;
  height:500px;
  overflow:hidden;
  position:fixed;
  top:calc(3em + 10vh);
  right:5%;
  z-index:300;
}
    
}
.menu{
  width:0;
  height:0;
  border-radius: 0 0 0 200px;
  position:absolute;
  top:0;
  right:0;
  background-image:linear-gradient(110.8210951619775deg, rgba(244, 40, 53,1) 5.533854166666667%,rgba(244, 40, 53,1) 96.67968749999999%);
  transition: all ease-in-out 500ms;
}
.site-nav{
  border:1px solid transparent;
  
  margin:45px 0;
  position:absolute;
  opacity:0;
  right:9px;
  transform: translateX(100%);
  transition: all ease-in-out 0.3s;
}
.site-nav a{
  display:block;
  text-decoration:none;
  text-transform: uppercase;
  color:white;
  font-weight:500;
  transition: all ease-in-out 0.5ms;
}
.site-nav a:hover{
  border-radius:10px 0 0 10px;
  background:white;
  color:black;
}
.header, .section{
  width:100%;
  height:100vh;
  position:sticky;
  top:0;
}
.bg1{
  width:50%;
  height:inherit;
  display:flex;
  justify-content:center;
  align-items:center;
  }
.bg2{
	width:50vw;
	height:50vw;
	background-color:#f3f3f3;
}  
.headline-wrapper{
	margin: 0 5vw;
}	
.headline{
font-family: 'Tangerine', cursive;
     color:white;
	 font-weight:900;
	 font-size: 5vw;
  }
.bg-one{
     background-color:RGBA(205, 92, 92,1);
  }
.bg-two{
	  z-index:100;
	  background-color:#90d698;
  }
.bg-three{
	z-index:150;
  background-color:#006666;
}
.bg-four{
  z-index:170;
  background-color:#ffbf00	;
}
.bg-five{
  z-index:200;
  background-color:	#9e75c5;
}
.bg-six{
  z-index:210;
  background-color:#065535;
}
.bg-seven{
  z-index:230;
  background-color:#8aa2e4;
}
.bg-eight{
  z-index:250;
  background-color:#830101;
}
.right{
   position:absolute;
   right:0;
 }
 @media only screen and (max-width: 900px) {
.bg1{
  width:100%;
  height:100vh;
  }
}