@font-face {
  font-family: "GothamLight";
  src: url(Gotham-Light.otf);
}
     
@font-face {
font-family: "GothamBold";
src: url(GothamBold.otf);
     }
     
@font-face {
font-family: "GothamMedium";
src: url(GothamMedium.ttf);
     }

     body {font-family: 'GothamLight'; background-color: black; color: black; display: flex; min-height: 100vh; flex-direction: column; overflow-x: hidden;}
     main {flex: 1 0 auto;}
     video {width: 100%; height: 100%; z-index: 1;}       
     .nav-wrapper {z-index: 2; min-height: 75px; position: fixed; background-color: transparent; transition-duration: .5s; margin: 0px; padding: 0px;}
     
     
     .section {margin: 0px; padding: 0px;}
     .brand-logo img {height: 70px; max-height: 70px; margin: 0px; padding: 0px;}
     
     .collapsible-body {height: 75%; overflow-y: scroll; color: black; line-height: 35px;}
     .collapsible-body br {display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 20px; /* change this to whatever height you want it */}
     .collapsible-header {color: black;}
     h1 {font-weight: bold;}   
     #X:hover {color: green;}


.sidenav1 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 5%;
}

.sidenav1 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: black;
  display: block;
  transition: 0.3s;
}

     .closebtn {position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;}
     .closebtn h1{transition: 0.1s;}
     .closebtn h1:hover {color: #7EC684;}
     .collapsible {border: 0!important; box-shadow: none!important; background-color: white; margin: 0!important; padding: 0!important;}
     .collapsible {border: 0px;}
     .collapsible li {display: block;}
     .collapsible-header, .collapsible-body, ul.collapsible>li 
        {
          margin: 0!important;
          padding: 0!important;
          border: 0!important;
          box-shadow: none!important;
          background-color: white;
        }
     .socialicons {display:inline; margin-right: 5%;}
     .page-footer {width: 100%; padding: 0px; margin: 0px; background-color: black; color: white;}
     .no-padding {padding-bottom:0px !important; margin-bottom:0px !important;}
     .container {background-color: none;}
     .navbar-fixed {position: absolute;z-index:999999999;}    
     .material-icons.md-18 { font-size: 18px; }
     .material-icons.md-24 { font-size: 24px; }
     .material-icons.md-36 { font-size: 36px; }
     .material-icons.md-48 { font-size: 60px; }  
     .drop-shadow {text-shadow: 2px 2px black;}
     #index-banner {height: 100%;}     
     .bgtext {padding-top: 30%; position: relative;}

.hero{
  width: 100%;
  
  
  text-align: center;
  margin: 0 auto;
  background: #392f28;
  position: relative; 
  color: #392f28;
}

.hero h1{
  font-size: 6em;
  margin: auto;
  position: absolute; 
  top: 38%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero img{
  width: 100%;
}


* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.image-box {
    position: relative;
    margin: auto;
    overflow: hidden;
    width: 540px;
}


     .newimg {display: block; width: 100%; height: auto;}
     .overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s; background-color: #008CBA; background-blend-mode: screen;}
     .image-box:hover .overlay {transform: scale(1.1); opacity: 1;}
     .image-box:hover .newtext {background-blend-mode: normal; opacity: 1; font-size: 60px;}
     
     .newtext {color: white; font-size: 20px; position: absolute; top: 50%; left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        }     

     #map {
        display: block;
        height: 450px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       } 
       
     .navmargin {padding-left: 35px;} 
     .extrapad {padding-top: 20px; padding-bottom: 20px; margin-bottom: 20px;}
     #services {white-space: nowrap;}
     #vertdividerheight {}
     #vertdivider {padding-left: 5%; border-left: 1px solid #7EC684;}
     .br {line-height: 20px;}
     .container {margin: 0 auto; max-width: 1280px; width: 80%;}
     
     
     .bluebutton {background-color: #0899EA;}
     .bluebutton:hover {background-color: #24A5EA;}
     .greenbutton {background-color: #7EC684;}
     .greenbutton:hover {background-color: #ABDDAE;}
     .amberbutton {background-color: #F3AB44;}
     .amberbutton:hover {background-color: #FFC169;}
     .pinkbutton {background-color: #FE529E;}
     .pinkbutton:hover {background-color: #FE7EB6;}
     .btn-block {width: 100%; min-width: 150px;}
     .clickedgreen {color: #7EC684;}
     .clickedblue {color: #0899EA;}
     .clickedamber {color: #F3AB44;}
     .clickedpink {color: #FE529E;}
     .navgreen:hover {color: #7EC684;}
     .navpink:hover {color: #FE529E;}    
     .navblue:hover {color: #0899EA;}   
     .navamber:hover {color: #F3AB44;}
     .collapsible-body .underlineamber {margin: 0px; padding: 0px; display: inline; color: #F3AB44; text-decoration: underline; text-decoration-color: #F3AB44}
     .collapsible-body .underlinegreen {margin: 0px; padding: 0px; display: inline; color: #7EC684; text-decoration: underline; text-decoration-color: #7EC684}
     .collapsible-body .underlinepink {margin: 0px; padding: 0px; display: inline; color: #FE529E; text-decoration: underline; text-decoration-color: #FE529E}
     .collapsible-body .underlineblue {margin: 0px; padding: 0px; display: inline; color: #0899EA; text-decoration: underline; text-decoration-color: #0899EA}


     .underlineamber {margin: 0px; padding: 0px; display: inline; color: #F3AB44; text-decoration: underline; text-decoration-color: #F3AB44}
     .underlinegreen {margin: 0px; padding: 0px; display: inline; color: #7EC684; text-decoration: underline; text-decoration-color: #7EC684}
     .underlinepink {margin: 0px; padding: 0px; display: inline; color: #FE529E; text-decoration: underline; text-decoration-color: #FE529E}
     .underlineblue {margin: 0px; padding: 0px; display: inline; color: #0899EA; text-decoration: underline; text-decoration-color: #0899EA}

     .academy {background-color: #7EC684;}
     .workshop {background-color: #0899EA;}
     .courtyard {background-color: #F3AB44;}
     .portfolio {background-color: #FE529E;}
     .dividergreen {border: 1px solid #7EC684; margin-bottom: 20px;}
     .dividerblue {border: 1px solid #0899EA; margin-bottom: 20px;}
     .divideramber {border: 1px solid #F3AB44; margin-bottom: 20px;}
     .dividerpink {border: 1px solid #FE529E; margin-bottom: 20px;}
     .amberheader {color: #F3AB44;}
     .pinkheader {color: #FE529E;}
     .greenheader {color: #7EC684;}
     .blueheader {color: #0899EA;}
     .greenheaderinline {color: #7EC684; display: inline;}
     .blueheaderinline {color: #0899EA; display: inline;}
     .textinline {display: inline;}
     .amberheaderbold {color: #F3AB44; font-family: 'GothamBold';}
     .pinkheaderbold {color: #FE529E; font-family: 'GothamBold';}
     .greenheaderbold {color: #7EC684; font-family: 'GothamBold';}
     .blueheaderbold {color: #0899EA; font-family: 'GothamBold';}
     .footerlinks .navgreen:hover {color: #7EC684;}
     .footerlinks .navblue:hover {color: #0899EA;} 
     .footerlinks .navamber:hover {color: #F3AB44;}     
     .footerlinks .navpink:hover {color: #FE529E;}
     #greencard {background-color: #7EC684;}
     #bluecard {background-color: #0899EA;}
     #ambercard {background-color: #F3AB44;}
     #pinkcard {background-color: #FE529E;}
#menunav {margin-top: 0px}
     
     .footerlinks {font-family: 'GothamMedium'; font-size: 14px; margin: 0px; padding: 0px;}
     .footerlinks a {text-decoration: none; color: white; display: inline-block;}
     .footerlinks li {display: inline-block; color: white; margin-right: 20px;}
     .sidenav1 .footerlinks {font-family: 'GothamMedium'; margin: 0px; padding: 0px;}
     .sidenav1 .footerlinks a {text-decoration: none; color: white; display: inline-block;}
     .sidenav1 .footerlinks li {display: inline-block; color: white;}
     .GIGSLogo {height: 80px; width: 80px;}
     .client {width: 400px; height: 100px;}
     .pushtab {padding-left: 30px; margin-bottom: 50px;}
     .nav-footer {position: relative; color: black; background-color: white; bottom: 0px; left: 0px; width: 100vw; margin: 0px; padding: 0px; margin-top: 150px;}
     .nav-footer a {font-size: 16px; color: black;}
     .nav-footer .footerlinks li a {color: black;}
     .nav-footer .footerlinks a {color: black;}
     .nav-footer .footerlinks a:hover {background-color: white;}
.page-footer .footerlinks a:hover {background-color: black;}
     .titletext {clear: both; display: inline-block; overflow: hidden; white-space: nowrap;}
     .imagemargins {margin: 0 auto; max-width: 90%; width: 90%;}
     .buttontext {font-size: 20px}

/* Workshop Code */
     .listheight {line-height: 50px;}    
     .carousel {position: relative; width: 100vw; height: 350px; margin: 0px; padding: 0px; font-family: 'GothamMedium';}
     .carousel .indicators {}
     .carousel .indicators .indicator-item {background-color: #0899EA;}
     .carousel .indicators .indicator-item.active {background-color: #7EC684;}
     .carousel a {text-decoration: none; color: #0899EA;}
     .carousel p {font-family: 'GothamLight'; color: black;}
     .carousel-item {min-width: 400px;}
     .carousel-item h4 {line-height: 10px;}
.nav-wrapper a h3 {font-size: 40px;}
video {margin-top: -5vw; margin-bottom: 0px;}
     
    
@media all and (min-width: 2000px) {     

}
    
@media only screen and (min-width: 601px) {
  .container {width: 85%;}
}

@media only screen and (min-width: 993px) {
  .container {width:80%;}
    

}
   
@media only screen and (max-width: 1280px) {     
    .collapsible {margin-top: 60px!important;
}
    
@media only screen and (max-width: 1080px) {   
    #vertdivider {padding-left: 2%;} 
}
         
@media only screen and (max-width: 1020px) {   
    #vertdivider {border: none; padding-left: 1%;} 
}
  
    @media all and (max-width: 992px) {
        #map {height: 300px; margin-bottom: 20px;}
        video {margin: 0px; padding: 0px;}
        .page-footer a {margin-right: 10px;}
        .page-footer .nav-footer {margin-top: 0px; background-color: black;}
     .page-footer .footerlinks a {color: white;}
        
      
    }
    
@media screen and (max-width: 600px) {
     .quarter {height: 100%;}
     .footerlinks {font-size: 12px; margin-right: 10px}
     .footermargin a {margin-left: 10px;}
     .client {width: 90%; height: 8%;}
     .nav-footer a {margin: 0px; padding: 0px; margin-right: 10px; font-size: 14px;}
    .buttontext {font-size: 14px}
    .navmargin {padding-left: 0px;}
    .nav-wrapper a h3 {font-size: 26px;}
    .collapsible-body h4 {font-size: 22px;}
    .collapsible h3 {margin-left: -22px;}
    .collapsible-body p {font-size: 18px;}
    .collapsible-body a {font-size: 18px;}
    .nav-footer {margin-top: 50px;}
    #map {height: 200px}
    .page-footer a {margin-right: 0px;}
}      
  
@media screen and (max-height: 450px) {
  .sidenav1 {padding-top: 15px;}
  .sidenav1 a {font-size: 18px;}  
}
    
@media screen and (max-width: 378px) {
    .footermargin a {font-size: 12px; margin: 0px; padding: 0px; text-align: center;
    }