/*
main background color = 1e1e1e
sub background color = 252526 
menu and button color = 333333 
*/

/* Fonts ***/
@font-face {
  font-family: 'audiowide-regular-webfont';
  src: url('../fonts/audiowide-regular-webfont.eot');
  src: url('../fonts/audiowide-regular-webfont.woff') format('woff'), url('../fonts/audiowide-regular-webfont.ttf') format('truetype'), url('../fonts/audiowide-regular-webfont.svg') format('svg');
}

/* End Fonts ***/

/* Globals ***/
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  background-color: #1e1e1e;

  /* font */
  font-family: audiowide-regular-webfont;
  color: #fff;
  font-size: 12px;
}

/* Utility class*/
.invisible {
  display: none;
}

/* Global container settings */
.container {
  width: 100%;
}

.inner {
  width: 80%;
  margin: auto;
  background-color: #333333;
}

/* End Globals ***/

/* Header ***/
header * {
  background-color: #252526;
  z-index: 999;
}

header .sticky {
  position: fixed;
  top: 0;
}

header .container {
  height: 60px;
}

header .logo {
  float: left;
}

header .logo a {
  height: 60px;
}

header .logo img {
  background-color: #333333;
}

header ul {
  list-style-type: none;
  overflow: hidden;
  float: right;
}

header li {
  float: left;
  padding: 22px 10px 0 10px;
}

header a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
}

header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #e8491d;
  font-weight: bold;
}

header i {
  padding-left: 3px;
}

/* End Header ***/

/* Main showcase ***/
.main_showcase * {
  background-color: transparent;
}

.main_showcase .container .inner {
  background: url('../img/bg-home.jpg') no-repeat center center/cover;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main_showcase .container .inner img {
  width: 100%;
}

.main_showcase .container .inner .main_text {
  font-size: 5rem;
  font-weight: bold;
}

.main_showcase .container .inner .main_arrow {
  border-radius: 5px;
  border: 1px solid #e8491d;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 5px;
  right: 5px;
  cursor: pointer;
}

.main_showcase .container .inner .main_arrow i {
  color: #e8491d;
  font-size: 2rem;
  padding-top: 4px;
}

/* Animate main_showcase text */
.animated {
  background: url('/img/text-bg2.png') no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: moveBg 90s linear infinite;
  -webkit-animation: moveBg 90s linear infinite;
}

@keyframes moveBg {
  0% {
    background-position: 0% 30%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* End main_showcase ***/

/* Mission statement ***/
.main_mission .container .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
  background-color: #00008B;
}

.main_mission .container .inner .mission_title {
  font-size: 3rem;
  padding-bottom: 1vh;
  background-color: #00008B;
}

.main_mission .container .inner .mission_statement {
  font-size: 2rem;
  padding-top: 1vh;
  background-color: #00008B;
}

/* End Mission statement ***/

/* Featured ***/
:root {
  --thumb_width: 1440px;
  --thumb_height: 900px;
  --thumb_zoom: 0.60;
}

.main_featured .inner {
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #333333;
  padding-bottom: 1vh;
}

.main_featured .featured_h1 {
  background-color: #252526;
  width: 100%;
  font-size: 3rem;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.main_featured .thumbnails {
  padding-top: 1vh;
  width: 100%;
  background-color: #333333;
}

.thumb_outer {
  background-color: #333333;
}

.thumb_title {
  background-color: #333333;
  padding: 2px;
  font-size: 1.7rem;
}

.thumb_first_instruct {
  background-color: #333333;
  font-size: .8rem;
}

/* This container helps the thumbnail behave as if it were an unscaled IMG element */
.thumbnail-container {
  width: calc(var(--thumb_width) * var(--thumb_zoom));
  height: calc(var(--thumb_height) * var(--thumb_zoom));
  display: inline-block;
  overflow: hidden;
  position: relative;
  background-color: #333333;
  padding: 5px;
}

/* This is a masking container for the zoomed iframe element */
.thumbnail {
  -ms-zoom: var(--thumb_zoom);
  -moz-transform: scale(var(--thumb_zoom));
  -moz-transform-origin: 0 0;
  -o-transform: scale(var(--thumb_zoom));
  -o-transform-origin: 0 0;
  -webkit-transform: scale(var(--thumb_zoom));
  -webkit-transform-origin: 0 0;
}

/* This is our screen sizing */
.thumbnail {
  width: var(--thumb_width);
  height: var(--thumb_height);
  background-color: #333333;
}

/* This facilitates the fade-in transition instead of flicker. It also helps us maintain the illusion that this is an image, since some webpages will have a preloading animation or wait for some images to download */
.thumbnail .frame {
  opacity: 0;
  transition: all 300ms ease-in-out;
  width: var(--thumb_width);
  height: var(--thumb_height);
  background-color: #333333;
}

/* This pseudo element masks the iframe, so that mouse wheel scrolling and clicking do not affect the simulated "screenshot" */
.thumbnail:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Footer ***/
.main_footer .inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #252526;
}

.main_footer .footer_p {
  background-color: #252526;
  font-size: 1.5rem;
}

/* End Footer ***/

/* About page */
.about_content .container {
  background-color: #1e1e1e;
}

.about_content .inner * {
  background-color: #333333;
}

.about_content .inner {
  padding-top: 10rem;
  padding-bottom: 6rem;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about_content .my_image_div {
  padding: 2rem;
  min-width: 40%;
}

.about_content img {
  width: 60%;
}

.about_content .about_info {
  padding: 2rem;
  margin-right: 2rem;
  background-color: #1e1e1e;
}

.about_content .heading {
  padding-bottom: 1rem;
  font-size: 2rem;
  background-color: #1e1e1e;
}

.about_content .heading_text,
.about_content p {
  padding-top: 1rem;
  background-color: #1e1e1e !important;
}

/* End Footer ***/

/* Education page */
.education_content .container {
  background-color: #1e1e1e;
}

.education_content .inner * {
  background-color: #333333;
}

.education_content .inner {
  padding-top: 10rem;
  padding-bottom: 6rem;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.education_content .heading {
  padding-bottom: 1rem;
  font-size: 4rem;
  background-color: #1e1e1e;
}

.education_content .edu_con_right .heading {
  padding-bottom: 1rem;
  font-size: 3rem;
  background-color: #1e1e1e;
}

.education_content i {
  font-size: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #1e1e1e !important;
}

.education_content .edu_con_right i {
  font-size: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #1e1e1e !important;
}

.education_content i::before {
  background-color: #1e1e1e;
}

.education_content .edu_con_left {
  padding: 2rem;
  margin-left: 2rem;
  margin-right: 1rem;
  background-color: #1e1e1e;
  width: 50%;
  min-height: 300px;
}

.education_content .edu_con_right {
  padding: 2rem;
  margin-right: 2rem;
  margin-left: 1rem;
  background-color: #1e1e1e;
  width: 50%;
  min-height: 300px;
}

.education_content ul {
  list-style-type: none;
}

.education_content li {
  padding: 1rem;
  font-size: 1.8rem;
}

.education_content a {
  font-size: 1.8rem;
}

.education_content li,
.education_content a {
  background-color: #1e1e1e !important;
}

.education_content .heading_text,
.education_content p {
  padding-top: 1rem;
  background-color: #1e1e1e !important;
}

/* End Education ***/