Template:Virginia/styles/indexCSS

.mainContainer{ 

 background-image: url("T--Virginia--images--tilewhite.png"); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: white;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.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));
 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%)

}

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

}

  1. video{
 position: absolute;
 top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 transform: translateY(calc(200% + 146vh - 1.3vw - 16px))

} .containerBlock{ 

 height: calc(96vh - 1.3vw - 16px);
 max-height: 57vw;
 position: relative;
 transform: translateY(calc(0px - 1.3vw - 4vh));
 -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 -moz-transform: translateY(calc(0px - 1.3vw - 4vh));
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.leftBlock{ 

 width: 50%;
 max-width: 50%;
 position: absolute;
 height: 100%;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.rightBlock{ 

 width: 50%;
 position: absolute;
 height: 100%;
 right: 0px;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.block1{ 

 background-image: url("T--Virginia--images--tilewhite.png"); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: white;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

} .block2{ 

 background-image: url("T--Virginia--images--tiledark.png"); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: #3B3838;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.right1{ 

 overflow: hidden;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.pathBG{ 

 width:100%;
 position: absolute;
 bottom: 0px;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

@-webkit-keyframes bob2 { 

 0% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }
 50% {
   -webkit-transform: translateY(-1vh);
   transform: translateY(-1vh);
 }
 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

} @keyframes bob2 { 

 0% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }
 50% {
   -webkit-transform: translateY(-1vh);
   transform: translateY(-1vh);
 }
 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

} @-webkit-keyframes bob2-float { 

 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

} @keyframes bob2-float { 

 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

}

.hoverHolder{ 

 display: grid;
 width: 100%;
 height: 100%;
 justify-content: center;

}

.indexBMC{ 

 margin: auto;
 display: block;
 max-width: 70vh;  
 max-width: min(100%, 70vh);
 width: min(100%, 70vh);
 z-index: 2;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-animation-name: bob2-float, bob2;
 animation-name: bob2-float, bob2;
 -webkit-animation-duration: .3s, 1.5s;
 animation-duration: .2s, 1.5s;
 -webkit-animation-delay: 0s, .3s;
 animation-delay: 0s, .3s;
 -webkit-animation-timing-function: ease-out, ease-in-out;
 animation-timing-function: ease-out, ease-in-out;
 -webkit-animation-iteration-count: 1, infinite;
 animation-iteration-count: 1, infinite;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 -webkit-animation-direction: normal, alternate;
 animation-direction: normal, alternate;

}

.left1 > div{ 

 position: relative;
 top: 50%;
 transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left11{ 

 width: 60%;
 padding: 0px 0px 0px 20%;
 vertical-align: center;
 font-size: 2vw;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left12{ 

 width: 60%;
 padding: 0px 0px 0px 20%;
 vertical-align: center;
 font-size: 3vw;
 font-weight: bold;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left13{ 

 color: black;
 width: 60%;
 padding: 0px 0px 0px 20%;
 font-size: 1.2vw;
 vertical-align: center;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left13:visited{ 

 color: black

}

.left2{ 

 overflow: hidden;

}

.labImg{ 

 position: absolute;
 bottom: 0px;
 transform: translateY(20%);
 width: 100%;

}

.abstractSvgHolder{ 

 position: relative;
 width: 100%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

} .abstractSvgHolder > svg{ 

 width: 100%;

}

.abstractHolder{ 

 text-indent: 5ch;
 position: relative;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 max-height: 80%;
 width: 80%;
 color: white;
 text-align: justify;
 text-justify: inter-word;
 font-size: 1.7vw;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.abstractHolder > div{ 

 text-indent: 0px;
 line-height: normal;

}

.block3{ 

 position: relative;
 background-repeat: repeat round;
 background-size: 30%;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;;

}

.promVid{ 

 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 max-height: 100%;
 border: none;

}

.miniBlock{ 

 border-top: solid #3B3838 4px;
 height: calc(46vh - 1.3vw - 16px);
 max-height: 28.5vw;
 position: relative;
 transform: translateY(calc(0px - 1.3vw - 4vh));
 -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 font-family: "THICCCBOI", THICCCBOI, sans-serif;
 display: flex;
 justify-content: space-between;

}

.miniBlock > div{ 

 height: 100%;
 display: grid;
 overflow: hidden;

}

.miniBlock > div > img{ 

 max-width: 20vw;
 cursor: pointer;
 margin: auto;

}