@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Oswald&family=Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@700&display=swap');
/*
This set up the the logo on the left side of the nav menu.
Video from: 
https://www.pexels.com/video/drone-footage-of-a-car-on-a-road-6942638/
*/
.logoLeft img {
    max-width: 400px;
    max-height: 56px;
    float: left;
  }
  
  .title{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 60px;
  }
  /*
  This set up the the logo on the right side of the nav menu.
  */
  .logoRight img {
    max-width: 7008px;
    max-height: 80px;
    float: right;
  }
  .internalMenu {
    line-height: 50px;
  }
  .sans{
    font-family: 'Josefin Sans', sans-serif;
  }
  .osw{
    font-family: 'Oswald', sans-serif;
  }
  .works{
    font-family: 'Work Sans', sans-serif;
  }

  .boldWord{
    font-weight: bold;
  }

  .lobster{
    font-family: 'Lobster Two', cursive;
  }


  #smallSpan{
    position: relative;
    letter-spacing: 1.5vw;
    animation: dropDown 3.5s forward;
    font-size: 50px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    text-shadow: 0 16px 26px rgba(0, 0, 0,  0.2);
    transform: translate(-100vh);
    color: rgb(240, 241, 255);
  }
  .imageOnDiv {
    height: 914px;
    width: 1680px;
    background-size: cover;
    text-align: center;
  }

  .videoContainer{
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }
  
  .letter{
    font-family: 'Lobster Two', cursive;
    transform: translate(-50%, -50%);
    animation: backcolor 5s linear infinite;
    top: 51%;
    color: transparent;
    background-image: linear-gradient(white, white);
    background-repeat: no-repeat;
    position: absolute;
    left: 49%;
    text-align: center;
    font-size: 250px;
    -webkit-background-clip: text;
    background-position: -750px 0;
  }
  .textColor{
    color:rgba(71,82,94,255);
  }
  .centerText{
    text-align: center;
  }
  @keyframes backcolor {
    100%{
      background-position: 0 0;
    } 
  }

  body {
    background-color: midnightblue;
  }

  /*
  * Table Formatting
  */

  table
  {
    border: 2px solid black;
    text-align: center;
    padding: .5em;
    margin-left: auto;
    margin-right: auto;
  }
  td 
  {
    border: 2px solid black;
    text-align: center;
    padding: .5em;
  }
  th
  {
    background-color: #999594;
    border: 2px solid black;
    text-align: center;
    color: #000000;
    padding: .5em;
  }
  
  tr
  {
    background-color: #FFFFFF;
    border: 2px solid black;
    text-align: center;
    color: #000000;
    padding: .5em;
  }

  .formBox{
    font-size: 30px;
    font-weight: 800;
    font-family: 'Work Sans', sans-serif;
    margin-bottom:15px;
    letter-spacing: 1px;
    border-bottom: 4px solid grey;
    display: inline-block;
  }
  
  .optionBox{
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 630;
    padding-top: 15px;
  }

  .optionBox2{
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 630;
    padding-top: 10px;
  }

  .barDesign{
    border: 1px solid gray;
    border-radius: 30px;
    letter-spacing: 1px;
    color: gray;
    background: transparent;
    width: 55%;
    outline: none;
  }

  .barDesign2{
    border: 1px solid gray;
    border-radius: 30px;
    letter-spacing: 1px;
    color: gray;
    background: transparent;
    width: 15%;
    outline: none;
  }

  .barDesign3{
    border: 1px solid gray;
    border-radius: 30px;
    letter-spacing: 1px;
    color: gray;
    background: transparent;
    width: 25%;
    outline: none;
  }

 
  #margin_div {
    background-color: white;
    margin: 0 20% 0 20%;
    border: 3px solid gray;
    padding: 10px;
  }

  #map{
    height: 550px;
    width: 850px;
    align-content: center;
  }

  .hr{
    height: 1px;
    background-color: white;
    border: none;
  }

.boxForLogin{
  width: 400px;
  height: 450px;
  border-radius: 10px;
  background: gray;
  position: relative;
  text-align: center;
}

.boxForLogin::before{
  position: absolute;
  width: 400px;
  height: 450px;
  animation: animate 6s linear;
  background: linear-gradient(0deg, transparent, transparent, black);
}
footer{
  position:relative;
  left: 50%;
  margin-top:100%;
}

/*
  This is for any animated overlay messages
  The overlay is the faded background
  Javascript controls how the message box or form slides into view
*/

#overlay{
	background-color: #000;
  left: 0;
  right: 0;
  height: 100%;
	position: fixed;
	top: 0px;
	opacity: 0.7;
}
#contactMessage{
	background-color: #fff;
	width: 60%;
	border: 3px solid rgb(128, 128, 128);
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	position: absolute;
	top: -310px;
}
#submitButtonPressed{
	background-color: #fff;
	width: 60%;
	border: 3px solid rgb(128, 128, 128);
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	position: absolute;
	top: -310px;
}
#submitButtonPressed2{
	background-color: #fff;
	width: 60%;
	padding: 20px;
	text-align: center;
	position: relative;
}
#overlay,#submitButtonPressed{
  display: none;
}
#cross, #cross2{
	position: absolute;
    left: 94%;
    top: 0px;
    color: #000000;
	font-size: 18;
	font-weight: bold;
	background-color: transparent;
	border: 0
}
#cross3{
	position: absolute;
  top: 0px;
    color: #000000;
	font-size: 18;
	font-weight: bold;
	background-color: transparent;
	border: 0
}
#contactButtonDiv{
  margin-top: 20px;
  margin-bottom: 20px;
}

/*
  This is for the side resources on About Page
*/

.sidebar{
  height: 100%;
  width: 200px;
  border:3px solid rgb(128, 128, 128);
  position: fixed;
  right: 0;
  padding-top: 40px;
  background-color: white;
}
.sidebar div {
  padding: 8px;
  font-size: 12px;
  display: block;
}
/*
  Center contact button
*/
.vertical-center {
  margin: 100 0 0 0;
  position:absolute;
  left: 50%;
  -ms-transform: translate(0, -50%);
  transform: translate(0%, -50%);
}
/*
  Login/Sign Up Button on Home Page
*/
#adminButton {
  position: absolute;
  right: 10px;
  bottom: 10px;
}