html{
font-family: 'Gloria Hallelujah', cursive;
background:white;
overflow:hidden;
}

h1, h2, a{
position:fixed;


}
a.nav-header {
    margin-left: 15%;
    color: white;
    font-size: 32px;
    margin-top: 23px;
    text-decoration: none;
}
 
a.nav-name{
margin-top:8.5%;
color:white;
font-size:24px;
text-decoration:none;
}
a.nav-name.hailey{
margin-left:4.5%;
padding:20px;
padding-left:40px;
padding-right:40px;
line-height:1;
}

a.nav-name.brian{
margin-left:16.3%;
padding:10px;
padding-left:40px;
padding-right:40px;
}

a.nav-name.tony{
margin-left:27.8%;
padding:10px;
padding-left:40px;
padding-right:40px;
}




.container{
width:100%;
margin:0;
}

img#logopic{
width:37%;
margin:0 auto;
margin-top:-18%;
margin-left:-247px;
position:absolute;
}



img#navpic{
width:43%;
margin:0 auto;
margin-top:-14%;
}

div#content{
text-align:center;
}

div#navbar{
text-align:center;
}

.hidden{
display:none;
width:23%;
margin:0 auto;
margin-top:-14%;
}

a.close-btn{
color:black;
text-decoration:none;
padding-top:30px;
padding-bottom:30px;
padding-left:45px;
padding-right:45px;
border-radius:100px;
border:2px solid black;
font-size:40px;
font-family:'Nunito', sans-serif;
position:absolute;
margin:30px;
margin-left:140px;
}



a.position{
color:black;
position:absolute;
font-size:70px;
line-height:1.5;
margin-top:-180px;
margin-left:70px;
}
a.education{
color:black;
position:absolute;
font-size:20px;
line-height:1.5;
margin-top:90px;
margin-left:-610px;
}
a.position.b{
font-size:100px;
margin-top:-140px;
margin-left:170px;
}
a.education.b{
font-size:20px;
line-height:1.5;
margin-top:100px;
margin-left:-560px;
}
a.position.t{
font-size:100px;
line-height:1.5;
margin-top:-140px;
margin-left:-500px;

}
a.education.t{
font-size:20px;
line-height:1.5;
margin-top:100px;
margin-left:-440px;
}

.animated {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         
         @-webkit-keyframes fadeInLeft {
            0% {
               opacity: 0;
               -webkit-transform: translateX(-80px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }
         
         @keyframes fadeInLeft {
            0% {
               opacity: 0;
               transform: translateX(-80px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }
         .fadeInLeft {
         -webkit-animation-name: fadeInLeft;
         animation-name: fadeInLeft;
         } 
         
         @-webkit-keyframes fadeInRight {
            0% {
               opacity: 0;
               -webkit-transform: translateX(80px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }
         
         @keyframes fadeInRight {
            0% {
               opacity: 0;
               transform: translateX(80px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }
         
         .fadeInRight {
         -webkit-animation-name: fadeInRight;
         animation-name: fadeInRight;
         } 

         
         @-webkit-keyframes fadeInDown {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-80px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }
         
         @keyframes fadeInDown {
            0% {
               opacity: 0;
               transform: translateY(-80px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }
         .fadeInDown {
         -webkit-animation-name: fadeInDown;
         animation-name: fadeInDown;
         } 
 @-webkit-keyframes fadeInUp {
            0% {
               opacity: 0;
               -webkit-transform: translateY(80px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }
         
         @keyframes fadeInUp {
            0% {
               opacity: 0;
               transform: translateY(80px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }
         .fadeInUp {
         -webkit-animation-name: fadeInUp;
         animation-name: fadeInUp;
         } 


img#headpic.hhead{
    position: absolute;
    width: 25%;
    margin-top: -240px;
    margin-left: -610px;
}

img#headpic.bhead {
    position: absolute;
    width: 25%;
    margin-top: -240px;
    margin-left: -560px;
}

img#headpic.thead {
    position: absolute;
    width: 25%;
    margin-top: -200px;
    margin-left: 300px;
}

a.tritripro{
font-size:50px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
margin:20px;
border:5px solid black;
border-radius:100px;
margin-top:-150px;
margin-left:-190px;
cursor:pointer;
color:black;
background:white;
text-decoration:none;
}
a.tritriprobtn{
font-size:50px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
margin:20px;
border:5px solid black;
border-radius:100px;
    margin-top: -360px;
    margin-left: -650px;
cursor:pointer;
color:black;
background:white;
text-decoration:none;
}
a.tritripro.na:hover{
background:black;
color:white;
cursor:pointer;
}
a.quesbankpro{
font-size:50px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
margin:20px;
border:5px solid black;
border-radius:100px;
margin-top:10px;
margin-left:-200px;
cursor:pointer;
color:black;
text-decoration:none;
}
a.quesbankpro.na:hover{
background:black;
color:white;
cursor:pointer;
}


a.tritripro.active{
    margin-top: -360px;
    margin-left: -650px;
    color:white;
    background:black;
}
a.quesbankprobtn{
font-size:50px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
margin:20px;
border:5px solid black;
border-radius:100px;
    margin-top: -360px;
    margin-left: 230px;
cursor:pointer;
color:black;
text-decoration:none;
}
@-webkit-keyframes fadeInGame {
            0% {
               opacity: 1;
               -webkit-transform: translate(400px, 210px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translate(0,0);
            }
         }
         
         @keyframes fadeInGame {
            0% {
               opacity: 1;
               transform: translate(400px,210px);
            }
            100% {
               opacity: 1;
               transform: translate(0,0);
            }
         }
         .fadeInGame {
         -webkit-animation-name: fadeInGame;
         animation-name: fadeInGame;
         } 
         
         @-webkit-keyframes fadeInWeb {
            0% {
               opacity: 1;
               -webkit-transform: translate(-400px, 310px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translate(0,0);
            }
         }
         
         @keyframes fadeInWeb {
            0% {
               opacity: 1;
               transform: translate(-400px,310px);
            }
            100% {
               opacity: 1;
               transform: translate(0,0);
            }
         }
         .fadeInWeb {
         -webkit-animation-name: fadeInWeb;
         animation-name: fadeInWeb;
         } 
         
         
.active{
background:black;
color:white;
}

img.triproj{
position:absolute;
margin-top:-210px;
margin-left:-367px;
}
img.downloadapp{
position:absolute;
margin-top:-130px;
margin-left:-300px;
}

.quesbankprobtn.active{
background:black;
color:white;
}

img.quesbankproj {
    position: absolute;
    width: 60%;
    margin-top: -200px;
    margin-left: -400px;
}