body{
 font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
  text-align: center;

  font-size: 5vh;
  color: #FFFFFF;
    }

a {
  text-decoration: none;
}

.courseTile {
  position: fixed;
  top: 10vh;
  width: 30vw;
  height: 70vh;
   background-color:rgba(25,25,25,0.8);
  border-radius: 2vh;
  box-shadow: 0 0 1vh white,0.4vh 1vh 4vh 0.5vh rgba(56, 49, 50, 0.5);
  text-align: center;
  text-shadow:0 0 1vh black;
   font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
cursor:pointer;
  font-size: 5vh;
  padding: 2vh 0 0 0;
  font-weight:bold;
}



    #KS3 {
  left: 3vw;
  color: #f08973;
      background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 10%,
      #f0897333 25%,
      transparent 30%,
      transparent 55%,
      #f0897355 60%,
      transparent 70%,
      transparent 100%
    ),
    linear-gradient(135deg,
      transparent 0%,
      transparent 2%,
      #f0897333 3%,
      transparent 5%,
      transparent 75%,
      #f0897355 85%,
    transparent 90%,
      transparent 100%
    ),
    linear-gradient(135deg,
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    );
}

#KS3:hover{
     box-shadow: inset 0 0 4vh #f08973,inset  0 0 0.25vh 0.25vh #ffffff,0 0 4vh #f08973, 0 0 0.25vh 0.25vh #ffffff;

    }

#KS4 {
  left: 35vw;
  color: #a1f5b0;
       background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 20%,
      #a1f5b033 35%,
      transparent 40%,
      transparent 55%,
      #a1f5b026 60%,
      transparent 80%,
      transparent 100%
    ),
    linear-gradient(135deg,
      transparent 0%,
      transparent 5%,
      #a1f5b020 10%,
      transparent 20%,
      transparent 80%,
      #a1f5b015 85%,
    transparent 95%,
      transparent 100%
    ),
    linear-gradient(135deg,
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    );
}

#KS4:hover{
  box-shadow: inset 0 0 4vh #a1f5b0,inset  0 0 0.25vh 0.25vh #ffffff,0 0 4vh #a1f5b0, 0 0 0.25vh 0.25vh #ffffff;

    }

#KS5 {
  left: 67vw;
  color: #a1e6f5;
      
      background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 10%,
      #31a7e533 25%,
      transparent 30%,
      transparent 55%,
      #31a7e555 60%,
      transparent 70%,
      transparent 100%
    ),
    linear-gradient(135deg,
      transparent 0%,
      transparent 2%,
      #31a7e533 3%,
      transparent 5%,
      transparent 75%,
      #31a7e555 85%,
    transparent 90%,
      transparent 100%
    ),
    linear-gradient(135deg,
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    );
}

#KS5:hover{
 box-shadow: inset 0 0 4vh #31a7e5,inset  0 0 0.25vh 0.25vh #ffffff,0 0 4vh #31a7e5, 0 0 0.25vh 0.25vh #ffffff;

    }


.icon {
  margin: 1vh 0vw 3vh 0vw;
  background: linear-gradient(#ffffff, #11121c);
       font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  
  box-shadow: 0 0 0vh 1vh #bbbbbb,0 0 3vh 1vh #ffffff, inset 0 1vh 3vh 0 #11121c;
   
  border-radius: 100%;
  display: inline-block;
  height: 17vh;
  width: 17vh;
  text-shadow: 0.1vw 0.1vw 0vw #11121c, 0.2vw 0.2vw 0vw #11121c, 0.3vw 0.3vw 0vw #11121c, 0.4vw 0.4vw 0vw #11121c, 0.5vw 0.5vw 0vw #11121c, 0.6vw 0.6vw 0vw #11121c, 0.7vw 0.7vw 0vw #11121c, 0.8vw 0.8vw 0vw #11121c, 0.9vw 0.9vw 0vw #11121c, 1.0vw 1.0vw 0vw #11121c, 1.1vw 1.1vw 0vw #11121c, 1.2vw 1.2vw 0vw #11121c, 1.3vw 1.3vw 0vw #11121c, 1.4vw 1.4vw 0vw #11121c, 1.5vw 1.5vw 0vw #11121c, 1.6vw 1.6vw 0vw #11121c, 1.7vw 1.7vw 0vw #11121c, 1.8vw 1.8vw 0vw #11121c, 1.9vw 1.9vw 0vw #11121c, 2.0vw 2.0vw 0vw #11121c, 2.1vw 2.1vw 0vw #11121c, 2.2vw 2.2vw 0vw #11121c, 2.3vw 2.3vw 0vw #11121c, 2.4vw 2.4vw 0vw #11121c, 2.5vw 2.5vw 0vw #11121c, 2.6vw 2.6vw 0vw #11121c, 2.7vw 2.7vw 0vw #11121c, 2.8vw 2.8vw 0vw #11121c, 2.9vw 2.9vw 0vw #11121c, 3.0vw 3.0vw 0vw #11121c, 3.1vw 3.1vw 0vw #11121c, 3.2vw 3.2vw 0vw #11121c, 3.3vw 3.3vw 0vw #11121c, 3.4vw 3.4vw 0vw #11121c, 3.5vw 3.5vw 0vw #11121c, 3.6vw 3.6vw 0vw #11121c, 3.7vw 3.7vw 0vw #11121c, 3.8vw 3.8vw 0vw #11121c, 3.9vw 3.9vw 0vw #11121c;
  overflow: hidden;
  line-height: 16vh;
    font-weight: bold;
  font-size: 8vh;
       
}

.courseDescription {
  padding: 1vh 0vw 3vh 0vw;
  position: relative;
  left: 10%;
  font-weight: normal;
  font-size: 3vh;
  width: 80%;
  color: #cccccc;
}

.button {
     position:fixed;
    line-height: 8vh;
  color: white;
  display: inline-block;
  border-radius: 10vh;
  top: 65vh;
  height: 8vh;
  width: 20vw;
  cursor: pointer;
  pointer-events: auto;
     font-size:5vh;
     font-weight:normal;
     text-transform:uppercase;
}


#KS3Button {
   
  background-color: transparent;
  left: 8vw;
  border:solid 0.1vh #f08973;
  box-shadow: 0 0 1vh #f08973,0.4vh 1vh 4vh 0.5vh rgba(56, 49, 50, 0.5);
}

#KS3Button:hover {
  box-shadow: 0 0 0 0.5vh #222222;}

#KS4Button {
  background-color: transparent;
  left: 40vw;
    border:solid 0.1vh #a1f5b0;
   box-shadow: 0 0 1vh #a1f5b0,0.4vh 1vh 4vh 0.5vh rgba(56, 49, 50, 0.5);
}

#KS4Button:hover {
  box-shadow: 0 0 0 0.5vh #222222;}

#KS5Button {
   background-color: transparent;
  left: 72vw;
    border:solid 0.1vh #31a7e5;
  box-shadow: 0 0 1vh #31a7e5,0.4vh 1vh 4vh 0.5vh rgba(56, 49, 50, 0.5);
}

#KS5Button:hover {
  box-shadow: 0 0 0 0.5vh #222222;
  }


#instructions {
  position: fixed;
  top: 80vh;
  left: 0vw;
  width: 100vw;
  text-align: center;
  font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
  font-weight: bold;
  text-shadow:0 0 1vh black;
  font-size: 5vh;
  color: #FFFFFF;
  line-height: 22vh;
  pointer-events:none;
}

#deptLogo{
 position:fixed;
 height:8vh;
 right:1vw;
 top:1vh;
}
#finchLogo{
 position:fixed;
 width:20vw;
 right:1vw;
 bottom:1vh;
    }


#loginInput, #loginInput2, #schoolInput{
   text-align: center;
  outline: none;
  border: none;
  height: 4vh;
  font-size: 3.2vh;
  width:40vw;
   background: white;
    border-radius: 10vh;
  font-weight: bold;
   color: #4c4c4c;
}


#schoolDropMenu {
    position: fixed;
    z-index: 3000;
    background-color: rgba(150,150,150,0.8);
    border-radius: 2vh;
    max-height: 45vh;
    overflow: auto;
    left: 50vw;
    bottom: 62vh;
    box-shadow: 0.4vh 1vh 4vh 0.5vh rgba(56, 49, 50, 0.5);
}



.schoolItem{
    font-size:3vh; 
    cursor:pointer;
    padding:0.5vh 1vw;
    text-transform:capitalize;
}

.studentItem:hover{
  background:white;
  color:#005997;
}

/*============INFO BOX=============*/

#screenShield{
  transition:0.3s;
  position: fixed;
  top: 100vh;
  left: 0vw;
  width:100vw;
  height:100vh;
  background-color:rgba(0,0,0,0.5);
  z-index: 400;
}

#info{
  position: fixed;
  top: 30vh;
  left: 10vw;
  width:76vw;
  max-height:60vh;
  background-color:rgba(0,0,0,0.8);
  z-index: 500;
  overflow: auto;
  border-radius: 5vh;
  font-weight:bold;
  font-size:6vh;
  text-align: center;
  box-shadow: 0.4vh 1vh 4vh 0.5vh rgba(56, 49, 50, 0.5);
  padding:3vh 2vw;
}

#infoClose{
 outline: none;
  z-index: 5000;
  position: fixed;
  right: 5vw;
  top: 22vh;
  font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
  text-shadow:none;
  background-color: #444;
  overflow: hidden;
  border-radius: 100%;
  display: inline-block;
  height: 15vh;
  width: 15vh;
  text-align: center;
  line-height: 13vh;
  font-size: 14vh;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 0 0 1vh #FFFFFF, 0vw 0vh 3vh 0vh #FFFFFF;
  
}
#infoClose:hover{
  color: #ec5848;
  background: white;
  box-shadow: 0 0 0 1vh #ec5848, 0vw 0vh 3vh 0vh #000000;
}

.message{
  font-style:italic;
  font-weight:normal;
   font-size:4vh;
  color:#ffffff;
   text-transform: none;
   text-decoration:none;

}

.yesButton,.yesButtonRevision{
 display:inline-block;
  border: 0.4vh solid white;
  border-radius: 10vh;
  text-align:center;
  color:white;
  cursor:pointer;
   padding:1vh 1.5vw;
   margin:1vh 1.5vw;
   opacity:1;
 text-shadow:none;
  background-color:#1ab188;
}

.yesButton:hover,.yesButtonRevision:hover{
   opacity:0.7;
}