/* Styles for Body and Other General Tags */

body {
  background: white;
}

#myNavbar > ul {
  margin-top: 0;
}

nav a.navbar-brand {
  display: none;
}

#aboutMenu {
  display: block !important;
}

#linksMenu {
  display: block !important;
}

nav form {
  display: none;
}

/* First Section is welcome and search */

#welcome {
  background: url('/images/homepage/web08.jpg') no-repeat center top fixed;
  background-size: cover;
  background-position: right top;
  padding: 0px;
  height: 800px;
}

#logoAndSearch {
  margin-top: 175px;
  padding: 0px 5px 0px 0px;
}

#logoWrapper {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
}

#circleIndexLogo {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
}

#circleIndexLogo use {
  fill: #e8bb3b !important;
}

#circleIndexLogo svg path {
  fill: inherit;
}

#welcomeText {
  margin-top: 35px;
  padding-left: 60px;
  font-size: 20pt;
  font-weight: 200;
  line-height: 130%;
  color: #fff;
}


#searchBox {
  margin-top: 60px;
  padding: 0px 50px 0px 60px;
}

#searchBox .btn, #smallSearchBox .btn {
  background: #e8bb3b;
}

#searchBox .btn:hover, #smallSearchBox .btn:hover
#searchBox .btn:focus, #smallSearchBox .btn:focus {
  color: #fff;
}


input[type="text"]:focus {
  border-color: #e8bb3b;
  box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset, 0 0 8px rgba(126,239,104,0.6);
  outline: 0 none;
}

#searchBox li a {
  font-size: 12pt !important;
}

#smallSearchBox {
  display: none;
}

#smallSearcBox li a {
  font-size: 12pt !important;
}

#smallSearchBox input::placeholder {
  font-size: 10pt;
}


/* New Resources Section */

#newResources {
  color: #000;
}

/*
li.resource-entry .grades {
  color: #e8bb3b;
}
*/

#newResources .newR {
  display: none;
}


/* ALC Videos Section */

#alcVideos {
  position: relative;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  height: 600px;
}

#alcVideos:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url('/images/homepage/web04.jpg') no-repeat right top fixed;
  transform: scaleX(-1);
  background-size: cover;
}

#alcVideos .overlay {
  background-color: rgba(232,187,59,0.8);
  height: 600px;
  color: #fff;
}

#alcVideos a {
  color: #fff;
}

#alcVideos a:hover {
  text-decoration: none;
}

#alcVideos h2 {
  color: #fff;
}

#alcVideos h2 {
  text-align: center;
  padding: 25px;
  margin-bottom: 50px;
}

#alcVideos img {
  display: block;
  width: 320px;
  margin: auto;
}

#alcVideos .video {
  margin-bottom: 50px;
}

#alcVideos .videoInfo {
  display: block;
  margin: auto;
  width: 310px;
}


/* blog section */

#blog {
  margin-bottom: 60px;
}

#blog a {
  color: #000;
}

.blogFeature {
  margin-top: 20px;
  padding: 5px;
}

#blog h3 {
  margin: 0px;
}

#blog hr {
  border: 0;
  height: 1px;
  margin-left: 10%;
  margin-right: 10%;
  background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
}

#blogEntries {
  color: #000;
  padding-bottom: 40px;
}



/* responsive CSS */

/* for lage and smaller devices */
@media screen and (max-width: 1199px) {
  #alcVideos, #alcVideos .overlay {
    height: 850px;
  }  
  #searchBox ::placeholder {
    font-size: 10pt;
  }
}

/* for medium or smaller divices, adjust how background image is rendered */
@media screen and (max-width: 992px) {
  #welcome {
    height: 500px;
    background-size: contain;
  }
  #logoAndSearch {
    margin-top: 80px;
  }
  #circleIndexLogo {
    margin-top: 10px;
    margin-left: 0px;
    margin-right: -20px;
    height: 80%;
    width: 80%;
  }  
  #welcomeText {
    margin-top: 0px;
    font-size: 16pt;
  }
  #searchBox {
    margin-top: 25px;
  }
  #searchBox input[type="text"] {
    font-size: 10pt;
  }
  #alcVideos, #alcVideos .overlay {
    height: 1600px;
  }
  #alcVideos .videoInfo {
    margin-bottom: 50px;
  }
}

/* for small devices adjust search bar and text size again */
@media screen and (max-width: 767px) {
  #welcome {
    height: 400px;
    background-size: auto 425px;
  }
  #logoAndSearch {
    margin-top: 100px;
  }
  #welcomeText {
    margin-top: 30px;
    font-size: 12pt;
    padding-left: 30px;
    color: #000;
  }
  #searchBox {
    display: none;
  }
  #smallSearchBox {
    display: block;
  }
}

/* for extra small devices adjust height even further */
@media screen and (max-width: 575px) {
  #welcome {
    height: 300px;
    background-size: auto 325px;
  }
  #logoAndSearch {
    margin-top: 75px;
  }
  #welcomeText {
    padding-left: 20px;
  }
  #alcVideos, #alcVideos .overlay {
    height: 1400px;
  }
}