Template:Virginia/styles/indexCSS

.mainContainer{

 background-image: url(""); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: white;

}

.mainContainer2{

 background-image: url(""); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: #F2F2F2;
 color: white;

}

.videoholder{

 height: 100vh;
 max-height: 57vw;
 overflow: hidden;
 margin: auto;
 background-color: white;
 transform: translateY(calc(0px - 1.3vw - 4vh));
 -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 -webkit-transform: translateY(calc(0px - 1.3vw - 4vh));
 -moz-transform: translateY(calc(0px - 1.3vw - 4vh));
 border-width: 2vh;

}

.mainvideo{

 position: relative;
 top: 0;
 left: 50%;
 height: 100vh;
 max-height: 57vw;
 transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);

}

.downScrollHolder{

 position: relative;
 bottom: 0px;
 transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 -webkit-transform: translateY(-100%);
 -moz-transform: translateY(-100%);
 display: flex;
 justify-content: center;
 width: 100%;
 padding-bottom: 3%; 

}

.scrollDown{

 cursor: pointer;
 opacity: 0.58;
 transition: 0.3s;

}

.scrollDown:hover{

 opacity: 1

}

.downText{

 width: 100%;
 font-family: THICCCBOI;
 font-size: 2vw;
 font-weight: lighter;
 text-align: center;
 color: transparent;
 visibility: hidden;

}

@keyframes show {

 from {visibility: transparent;}
 to {visibility: white;}

}

.textAppear{

 visibility: visible;
 color: white;
 animation-name: show;
 animation-duration: 1s;

}

.downArrow {

 height: 5vh;
 max-height: 2.85vw;
 width: 5vh;
 max-width: 2.85vw; 
 border: solid white;
 border-width: 0 0.4vw 0.4vw 0;
 display: inline-block;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);

}

1. scrollCheckpoint{

 position: absolute;
 top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 transform: translateY(100%)

}