@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  body{
    width: 100%;
    height:938px;
    background: #041642;
  }







  #numberelement1{
      display: block;
position:relative;
    left:-730px;
    top: -15px;
    margin:-100px;
    padding:40px;
    font-family: Gill Sans;
    font-style: italic;
    font-weight: 300;
    font-size:350px;
    letter-spacing: 30px;
    line-height: 227px;
    color: rgba(255, 255, 255, 0.1);

  }
  #numberelement2{
    display: block;
position:relative;
  left:-730px;
  top: 30px;
  margin:-100px;
  padding:40px;
  font-family: Gill Sans;
  font-style: italic;
  font-weight: 300;
  font-size:350px;
  letter-spacing: 30px;
  line-height: 227px;
  color: rgba(255, 255, 255, 0.1);

}
#numberelement3{
  display: block;
position:absolute;
left: -670px;
top:1000px;

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size:350px;
letter-spacing: 30px;
line-height: 227px;
color: rgba(255, 255, 255, 0.1);

}
#numberelement4{
  display: block;
position:absolute;
left: -670px;
top:1000px;

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size:350px;
letter-spacing: 30px;
line-height: 227px;
color: rgba(255, 255, 255, 0.1);

}
#numberelement4{
  display: block;
position:absolute;
left: -670px;
top:1400px;

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size:350px;
letter-spacing: 30px;
line-height: 227px;
color: rgba(255, 255, 255, 0.1);

}

#header_title{
  display: block;
  position:relative;
  justify-items: center;

  text-align:center;
  height: 52px;
margin:0px;
  left: 0px;
top: -px;
padding:20px;
font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 30px;


  color: #FFFFFF;
}
.ml7 {
  position: relative;
  font-weight: 900;
  font-size: 3.7em;
  display: block;
  position:relative;
  justify-items: center;

  text-align:center;
  height: 52px;
margin:0px;
  left:0px;
top: 90px;
padding:20px;
font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 30px;


  color: #FFFFFF;

}
.ml7 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}
.ml7 .letter {
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;


}
.containerC{
  display: block;
  position:absolute;
  justify-items: center;

text-align:center;
  height: 52px;
margin:0px;
width:100%;
  left: 0px;
top: 500px;
padding:20px;
background-color:white;
height: 387px;
}
#g{
  display:block;
  justify-items: center;
  align-items: center;
  position:relative;
  top:-100px;
  left:-300px;
  font-family: Gill Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 450px;
  line-height: 517px;
  
  color: #CF142B;
  
  transform: rotate(0deg);
}
#ills{
  display:block;
  position:relative;
top:-550px;
left:90px;
  font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 300px;

color: #00247D;
}
#sans{
  display:block;
  position:relative;
  left: 500px;
  top: -820px;
  
font-family: Gill Sans;
font-style: normal;
font-weight: 300;
font-size: 100px;
line-height: 114px;
color: #CF142B;
}
.qoute{
  display:block;
  position: absolute;
  left:310px;
  top: 930px;
font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 23px;

color: #FFFFFF
}


#link1{

  position: absolute;
  width: 140px;
  height: 38px;
  left: 700px;
  top: 1000px;
  
  font-family: Gill Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 34px;
  
  color: #F2F6FF;
}
:root {
  --mainColor: white;
}
a {
  color: var(--mainColor);
  text-decoration: none;
}

a:hover {
  color: transparent;
  text-decoration: none;
  -webkit-text-stroke: 2px var(--mainColor);
}
#red{
  color: #860101;
}
.word span {
	cursor: pointer;


	user-select: none;

}

.word span:nth-child(1).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%,
	100% {
		transform: rotate(0deg);
	}

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(2).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%,
	35% {
		transform: scale(2, 0.2) translate(0, 0);
	}

	45%,
	50% {
		transform: scale(1) translate(0, -150px);
	}

	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span:nth-child(3).active {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}

	24% {
		transform: rotateX(150deg);
	}

	36% {
		transform: rotateX(200deg);
	}

	48% {
		transform: rotateX(175deg);
	}

	60%,
	85% {
		transform: rotateX(180deg);
	}

	100% {
		transform: rotateX(0deg);
	}
}

.word span:nth-child(4).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%,
	80% {
		transform: rotateY(180deg);
	}

	100% {
		transform: rotateY(360deg);
	}
}

.word span:nth-child(5).active {
	animation: toplong 1.5s linear;
}

@keyframes toplong {
	10%,
	40% {
		transform: translateY(-48vh) scaleY(1);
	}

	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}


/****** FOR MININMIZED BROWSER****/
@media screen and (max-width:800px) {
  .qoute{
    display:block;
    position: absolute;
    left:10px;
    top: 899px;
  
  font-family: Gill Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 23px;
  
  color: #FFFFFF
  }
  #g{
    display:block;
    left:-130px;
    top:-80px;
    font-size:80vw;
  }
  #ills{
    display:block;
    left:130px;
 top:-380px;
    font-size:30vw;
  }
  .ml7{
    width:100%;
    font-size:4vw;
  }
  #sans{
    font-size:10vw;
    left:130px;
    top:-650px;
  }
  #numberelement3{
    left:-500px;
  }
  #numberelement4{
    left:-500px;
  }
  #link1{
    position: absolute;
  width: 550px;
  height: 21px;
  left: 130px;
  top: 1100px;
  
  font-family: Gill Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 40px;
  line-height: 17px;
  
  color: #FFFFFF;
  
  }


  :root {
    --mainColor: white;
  }
  a {
    color: var(--mainColor);
    text-decoration: none;
  }
  
  a:hover {
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 2px var(--mainColor);
  }
}

















@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

  /* STYLES GO HERE */
  #g{
    display:block;
    left:-200px;
    top:-80px;
font-size:70vw;
  }
  #ills{
    left:170px;
    top:-440px;

  }
  .containerC{
    width:100%;
 left:30px;
  }
  #sans{
    top:-780px;
  }
  .qoute{
    width:80%;
  text-align:center;
  left:100px;

  }
  #link1{
    position: absolute;
  width: 550px;
  height: 21px;
  left:340px;
  top: 1100px;
  
  font-family: Gill Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 40px;
  line-height: 17px;
  
  color: #FFFFFF;
  
  }
  :root {
    --mainColor: white;
  }
  a {
    color: var(--mainColor);
    text-decoration: none;
  }
  
  a:hover {
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 2px var(--mainColor);
  }


}


@media only screen and (max-width:620px) {
  /* For mobile phones: */
  
  #g{
    display:block;
    left:-100px;
    top:-60px;
    font-size:80vw;
  }
  #ills{
    display:block;
    left:100px;
 top:-340px;
    font-size:30vw;
  }
  #sans{
    left:80px;
    top:-550px;
  }
  .qoute{
    top:920px;
    text-align:center;
  }

#link1{
  position: absolute;
width: 550px;
height: 21px;
left: 130px;
top: 1100px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 40px;
line-height: 17px;

color: #FFFFFF;

}
:root {
  --mainColor: white;
}
a {
  color: var(--mainColor);
  text-decoration: none;
}

a:hover {
  color: transparent;
  text-decoration: none;
  -webkit-text-stroke: 2px var(--mainColor);
}
}