/*-DEFAULT STYLES-*/
* {
      margin: 0;
      padding: 0;
}
body {
      font-size: 62.5%;
      color: #000;
      background-color: #fff;
      font-family: "Epilogue", sans-serif;
}
html {
      font-size: 1em;
      line-height: 1.4;
}
.clearfloat {
      clear: both;
}
.epilogue {
      font-family: "Epilogue", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
}
.gelica {
      font-family: "gelica", sans-serif;
      font-weight: 600;
      font-style: normal;
}
/*--     RED= #F15623-*/
/*--    YELLOW = #F2B01D-*/
/*--     GREY = #D9D8D6-*/
/*-STRUCTURE STYLES-*/
.wrapper {
      min-width: 960px;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 5%;
      box-sizing: border-box;
}
header {
      width: 100%;
      height: 100vh;
      background-color: #fff;
}
#header-container {
      height: 100vh;
}
#bg-video {
      position: absolute;
      right: 0;
      top: 0;
      min-width: 100%;
      min-height: 100%;
      transform: translateX(calc((100% - 100vw) / 2));
      z-index: 0;
}
#about {
      background-color: #F15623;
      width: 100%;
      box-sizing: border-box;
      padding: 240px 160px 100px 160px;
}
#demo-reel {
      max-width: 100%;
}
#demo-reel video {
      width: 100%;
}
#red-pattern {
      background-image: url("../img/ui-img/red-pattern.svg");
      background-repeat: repeat-x;
      height: 200px;
      background-color: none;
      margin-top: -120px;
}
#yellow-pattern {
      background-image: url("../img/ui-img/yellow-pattern.svg");
      background-repeat: repeat-x;
      height: 200px;
      width: auto;
}
#students {
      background-color: #fff;
      width: 100%;
      box-sizing: border-box;
      padding: 100px 160px 0px 160px;
}
#students-btns {
      display: flex;
      margin: 40px 0;
}
#cc-logo img {
      width: 200px;
      margin: 20px 0;
}
#event {
      background-color: #F2B01D;
      width: 100%;
      box-sizing: border-box;
      padding: 100px 160px;
}
footer {
      background-size: 80%;
      background-color: #000;
      width: 100%;
      box-sizing: border-box;
      padding: 60px 160px;
}
#partner-logos {
      display: flex;
      justify-content: space-evenly;
}
footer img {
      width: 100px;
}
/*-NAV STYLES-*/
/*-NAV STYLES-*/
/*-NAV STYLES-*/
/*-NAV STYLES-*/
/*----HAMBURGER MENU----*/
.hamburger-menu {
      z-index: 10000;
}
.hamburger-menu a:link, .hamburger-menu a:visited {
      text-decoration: none;
}
.hamburger {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10000;
      background-color: none;
      height: 100px;
}
#hamburger-container {
      float: left;
      width: 25px;
      margin-left: 5%;
      margin-top: 5%;
}
.nav-menu {
      position: fixed;
      left: -100%;
      top: 0px;
      flex-direction: column;
      background-color: #fff;
      width: 350px;
      transition: 0.3s;
      z-index: 9000;
      height: 100vh;
      opacity: .9;
}
.nav-menu.active {
      left: 0;
}
.nav-item {
      margin: 2.5rem 0;
      font-size: 1em;
}
.hamburger {
      display: block;
}
.bar {
      display: block;
      width: 25px;
      height: 2px;
      margin: 7px auto;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      background-color: #D9D8D6;
}
ul.nav-menu {
      background-color: #F15623;
      opacity: 1.0;
      padding-top: 120px;
      list-style: none;
      padding-right: 30px;
      box-sizing: border-box;
}
.nav-menu li.social img {
      width: 10%;
      float: right;
      margin: 30px 20px 0;
}
.nav-menu li.larry-nav img {
      position: absolute;
      bottom: -50px;
      margin-left: 100px;
      width: 300px;
}
.nav-item {
      text-align: right;
      padding-right: 0px;
      font-optical-sizing: auto;
      font-weight: 700;
      width: auto;
      text-decoration: none;
      display: block;
      text-transform: uppercase;
      padding-top: 0px;
      color: #fff;
      box-sizing: border-box;
}
.nav-item img {
      width: 65px;
}
.nav-link {
      font-size: 2.4em;
      letter-spacing: 10px;
      font-weight: 600;
      color: #fff;
}
.nav-link:hover {
      color: #F2B01D;
}
/*----STUDENT PROFILES----*/
/*----STUDENT PROFILES----*/
/*----STUDENT PROFILES----*/
/*----STUDENT PROFILES----*/
#student-container {
      margin-bottom: 200px;
}
.student-profile-container {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      max-width: 100%;
      margin: 0 100px 0 260px;
}
.student-profile {
      width: 400px;
      height: 500px;
      display: block;
      z-index: 5000;
      margin: 10px 10px;
}
.student-profile-container a {
      text-decoration: none;
}
.student-title h2 {
      position: relative;
      top: 0px;
      left: 18px;
      /* Border is the new background */
      background: none;
      /* Rotate from top left corner (not default) */
      transform-origin: 0 0;
      transform: rotate(90deg);
      color: #000;
      font-weight: 700;
      font-size: 1.4em;
}
.group {
      border-left: 1px solid #000;
      margin-left: 20px;
      margin-top: 50px;
}
#student-1 a:link, #student-2 a:link, #student-3 a:link, #student-4 a:link, #student-5 a:link, #student-6 a:link, #student-7 a:link, #student-8 a:link, #student-9 a:link, #student-10 a:link, #student-11 a:link, #student-12 a:link, #student-13 a:link, #student-14 a:link, #student-15 a:link, #student-16 a:link, #student-17 a:link, #larry-1 a:link, #larry-2 a:link, #larry-3 a:link, #larry-4 a:link {
      width: 400px;
      height: 500px;
      display: block;
      font-size: 6em;
      font-family: "gelica", sans-serif;
      font-weight: 700;
      color: #F2B01D;
      margin-bottom: 60px;
      line-height: .8em;
      letter-spacing: -3px;
      padding: 300px 0 0 20px;
      background-repeat: no-repeat;
      background-blend-mode: normal;
      transition: all 0.4s ease;
      box-sizing: border-box;
}
#student-1 a:link, #student-1 a:visited {
      background-image: url("../img/student-portraits/bailey.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-1 a:hover, #student-1 a:focus, #student-1 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-2 a:link, #student-2 a:visited {
      background-image: url("../img/student-portraits/becc.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-2 a:hover, #student-2 a:focus, #student-2 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-3 a:link, #student-3 a:visited {
      background-image: url("../img/student-portraits/ben.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-3 a:hover, #student-3 a:focus, #student-3 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-4 a:link, #student-4 a:visited {
      background-image: url("../img/student-portraits/caio.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-4 a:hover, #student-4 a:focus, #student-4 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-5 a:link, #student-5 a:visited {
      background-image: url("../img/student-portraits/dakota.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-5 a:hover, #student-5 a:focus, #student-5 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-6 a:link, #student-6 a:visited {
      background-image: url("../img/student-portraits/emily.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-6 a:hover, #student-6 a:focus, #student-6 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-7 a:link, #student-7 a:visited {
      background-image: url("../img/student-portraits/hannah.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-7 a:hover, #student-7 a:focus, #student-7 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-8 a:link, #student-8 a:visited {
      background-image: url("../img/student-portraits/jadyn.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-8 a:hover, #student-8 a:focus, #student-8 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-9 a:link, #student-9 a:visited {
      background-image: url("../img/student-portraits/john.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-9 a:hover, #student-9 a:focus, #student-9 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-10 a:link, #student-10 a:visited {
      background-image: url("../img/student-portraits/julien.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-10 a:hover, #student-10 a:focus, #student-10 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-11 a:link, #student-11 a:visited {
      background-image: url("../img/student-portraits/kady.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-11 a:hover, #student-11 a:focus, #student-11 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-12 a:link, #student-12 a:visited {
      background-image: url("../img/student-portraits/kerstin.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-12 a:hover, #student-12 a:focus, #student-12 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-13 a:link, #student-13 a:visited {
      background-image: url("../img/student-portraits/nikunj.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-13 a:hover, #student-13 a:focus, #student-13 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-14 a:link, #student-14 a:visited {
      background-image: url("../img/student-portraits/quang.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-14 a:hover, #student-14 a:focus, #student-14 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-15 a:link, #student-15 a:visited {
      background-image: url("../img/student-portraits/varun.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-15 a:hover, #student-15 a:focus, #student-15 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-16 a:link, #student-16 a:visited {
      background-image: url("../img/student-portraits/liam.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-16 a:hover, #student-16 a:focus, #student-16 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#student-17 a:link, #student-17 a:visited {
      background-image: url("../img/student-portraits/ishant.jpg");
      background-size: cover;
          color: #F2B01D;

}
#student-17 a:hover, #student-17 a:focus, #student-17 a:active {
      background-color: #F15623;
      background-blend-mode: screen;
      color: #fff;
}
#larry-1 a:link, #larry-1 a:visited {
      background-image: url("../img/student-portraits/larry.jpg");
      background-size: cover;
      color: #F15623;
}
/*-TYPE STYLES-*/
/*-TYPE STYLES-*/
/*-TYPE STYLES-*/
/*-TYPE STYLES-*/
/*-TYPE STYLES-*/
.bold {
      font-weight: 600;
}
.space {
      margin: 50px 0
}
#about h1, #students h1 {
      font-size: 10em;
      font-family: "gelica", sans-serif;
      font-weight: 700;
      color: #F2B01D;
      margin-bottom: 60px;
      line-height: 1.1em;
      letter-spacing: -7px;
}
#event h1 {
      font-size: 10em;
      font-family: "gelica", sans-serif;
      font-weight: 700;
      color: #FFF;
      margin-bottom: 60px;
      line-height: 1.1em;
      letter-spacing: -7px;
}
#about p, #event p {
      font-size: 2.4em;
      font-weight: 300;
      color: #fff;
      line-height: 1.8em;
      padding-bottom: 60px;
}
#event h2 {
      font-size: 2.4em;
      font-weight: 600;
      color: #fff;
      line-height: 1.8em;
      margin-top: 60px;
}
#event h3 {
      font-size: 2.4em;
      font-weight: 300;
      color: #fff;
      line-height: 1.8em;
}
#event p.small {
      font-size: 14px;
}
#students p {
      font-size: 2.4em;
      font-weight: 300;
      color: #F15623;
      line-height: 1.8em;
      padding-bottom: 60px;
}
/*-EVENT STYLES-*/
#event-photos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 100%;
}
#event-photos img {
      width: 50%;
}
#event-photos img.review {
      width: 100%;
}
#gif-bg {
      width: 100%;
      background-color: #080404;
}
#gif-bg img {
      margin: 0 auto;
      width: 690px;
      display: block;
}
/*-STUDENT PAGE STYLES-*/
/*-STUDENT PAGE STYLES-*/
/*-STUDENT PAGE STYLES-*/
/*-STUDENT PAGE STYLES-*/
#profile-name {
      position: absolute;
      left: 10%;
      bottom: 10%;
      z-index: 6000;
}
#profile-name h1 {
      font-size: 10em;
      font-family: "gelica", sans-serif;
      font-weight: 700;
      color: #F2B01D;
      margin-bottom: 60px;
      line-height: .8em;
      letter-spacing: -7px;
    text-transform: uppercase;
}
#social-bank {
      position: relative;
      display: flex;
}
#social-bank img {
      margin: 5px;
}
/*----PROJECT STYLES -----*/
/*----PROJECT STYLES -----*/
/*----PROJECT STYLES -----*/
/*----PROJECT STYLES -----*/
#projects video {
      /* override other styles to make responsive */
      width: 100% !important;
      height: auto !important;
}
#project-1, #project-2, #project-3 {
      padding-top: 160px;
}
#project-1 {
      background-color: #F15623;
}
#project-2 {
      background-color: #FFF;
          padding-bottom: 160px;

}
#project-3 {
      background-color: #F2B01D;
}

#projects h1 {
      font-size: 10em;
      font-family: "gelica", sans-serif;
      font-weight: 700;
      color: #fff;
      line-height: .8em;
      letter-spacing: -7px;
    text-transform: uppercase;
        


}
#projects h2 {
      font-size: 3.6em;
      font-weight: 600;
      color: #fff;
}

#projects p {
      font-size: 2.4em;
      font-weight: 300;
      color: #fff;
      line-height: 1.8em;
      padding: 60px 0;
}

#projects p.red, #projects h1.red, #projects h2.red  {
          color: #F15623;

}

/*--     RED= #F15623-*/
/*--    YELLOW = #F2B01D-*/
/*--     GREY = #D9D8D6-*/

/*-----PROJECT IMAGES------*/
/*-----PROJECT IMAGES------*/
/*-----PROJECT IMAGES------*/
/*-----PROJECT IMAGES------*/
.full-image img {
      width: 100%;
      margin-bottom: .7%;
}
.square-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
}
.half-image {
      width: 49.5%;
      box-sizing: border-box;
      margin-bottom: .7%;
}
.half-image img {
      width: 100%;
}
/*-----BOTTOM NAV STYLES------*/
/*-----BOTTOM NAV STYLES------*/
/*-----BOTTOM NAV STYLES------*/
/*-----BOTTOM NAV STYLES------*/
#bottom-nav {
      background-color: #000;
      padding: 100px 0;
   
}

#btns {
     display: flex;
    justify-content: center;
}

#bottom-nav p {
    font-size: 2.4em;
      font-weight: 300;
      color: #fff;
      line-height: 1.8em;
      padding-bottom: 60px;
    text-align: center;
}

#bottom-nav a:link, #bottom-nav a:visited   {
      text-decoration: none;
          font-family: "gelica", sans-serif;
font-size: 2.4em;
    letter-spacing: -1px;
      margin: 0 50px;
     background-color: #F15623;
    color: #F2B01D;
       width: 300px;
      height: 100px;
      box-sizing: border-box;
      padding: 20px;
}

#bottom-nav a:hover, #bottom-nav a:focus, #bottom-nav a:active  {
    background-color:  #F2B01D;
    color:#F15623;
}


/*------MEDIA QUERY 0-959px--------*/
/*------MEDIA QUERY 0-959px--------*/
/*------MEDIA QUERY 0-959px--------*/
@media only screen and (max-width : 959px) {
      .wrapper {
            min-width: 100%;
            max-width: 100%;
            box-sizing: border-box;
      }
     #head-landing {
            background-image: url("../img/hero-image.jpg");
            background-repeat: no-repeat;
            background-color: #F15623;
            background-size: cover;
            background-position: -160px;
            width: 100%;
            height: 100vh;
            /*--     RED= #F15623-*/
            /*--    YELLOW = #F2B01D-*/
            /*--     GREY = #D9D8D6-*/
      }
      #video-container {
            position: relative;
            height: 100vh;
      }
      #bg-video {
            position: absolute;
            right: 0;
            top: auto;
            bottom: 0;
            width: 100%;
            min-height: inherit;
            z-index: 0;
      }
      #event-photos {
            justify-content: center;
            max-width: 100%;
      }
      #event-photos img {
            width: 100%;
      }
      .nav-menu li.larry-nav img {
            position: absolute;
            margin-left: 60px;
            width: 300px;
      }
      .nav-menu {
            position: fixed;
            left: -100%;
            width: 280px;
      }
      #yellow-pattern, #red-pattern {
            height: 100px;
      }
      #red-pattern {
            margin-top: -60px;
      }
      #about, #students {
            padding: 0px 20px 60px 20px;
            box-sizing: border-box;
      }
      #about, #event, footer {
            padding: 40px 20px;
      }
      #event {
            padding: 40px 20px 80px 20px;
      }
      #about h1, #students h1, #event h1, #profile-name h1, #projects h1 {
            font-size: 5em;
            letter-spacing: -3px;
            line-height: .8em;
      }
     
    
      #about p, #event p, #students p {
            font-size: 2.4em;
      }
      #students h2, #students h3 {
            font-size: 2.4em;
      }
      footer img {
            width: 80px;
            margin: 20px 20px;
            padding: 0;
      }
      #partner-logos {
            display: flex;
            flex-wrap: wrap;
      }
      .student-profile-container a {
            text-decoration: none;
      }
      #student-1 a:link, #student-2 a:link, #student-3 a:link, #student-4 a:link, #student-5 a:link, #student-6 a:link, #student-7 a:link, #student-8 a:link, #student-9 a:link, #student-10 a:link, #student-11 a:link, #student-12 a:link, #student-13 a:link, #student-14 a:link, #student-15 a:link, #student-16 a:link, #student-17 a:link, #larry-1 a:link {
            width: 320px;
            height: 500px;
            background-position: center;
      }
      .student-profile-container {
            justify-content: center;
            max-width: none;
            margin: 0 0px 0 40px;
      }
      #gif-bg img {
            width: 300px;
      }
    #social-bank {
      position: relative;
      display: flex;
        flex-wrap: wrap;
}
#social-bank img {
      margin: 0px;
    width: 80%;
    display: block;
}
    
    
#projects h2 {
      font-size: 2.4em;
     
      margin-bottom: 0px;
}
    
    
    #previous-student, #next-student {
        width: 100%;
        margin: 10px 20px;
    }
     
    #bottom-nav {
      background-color: #000;
      padding: 100px 0;
   
}

#btns {
     display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


#bottom-nav a:link, #bottom-nav a:visited   {
      text-decoration: none;
          font-family: "gelica", sans-serif;
font-size: 2.4em;
    letter-spacing: -1px;
      margin: 0 0px;
     background-color: #F15623;
    color: #F2B01D;
       width: 100%;
    display: block;
      height: 100px;
      box-sizing: border-box;
      padding: 30px 0;
        text-align: center;

}
}