@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,700';

html, body{
    font-family: 'Work Sans', sans-serif;
    color: #444; 
    overflow-x: hidden;
}
    

.info{
    position: absolute;
    z-index: 999;
}


h1{
    font-size: 1.75rem;
    line-height: 2.25rem;
    letter-spacing: .125rem;
    padding-top: 7rem;
}



h2,h3,h4{
    text-align:center;
}

h2{
    font-size: 1.45rem;
    text-transform: uppercase;
    margin-bottom: 35px;
}
  

h3{
    font-size: 1.35rem;
    text-transform: uppercase;
}

h4{
    font-size: 1.25rem;
    letter-spacing: .0125rem;
    margin-bottom: 35px;
}
          
p, ul{
font-size: 1.25rem;
text-align: left justify;
}
          
a{
    color: #222;
}
          
a:hover{
    text-decoration: none;
    color: #ddd;
}

/*            Fixed Navbar*/
.bg-inverse{
    background-color: rgba(0, 0, 0,.9) !important;
    padding: 15px;
}





\\

ul.nav.navbar-nav.pull-xs-right{
    margin-top: 8px;
}

.navbar-dark .navbar-nav .nav-link{
    color: rgba(255, 255, 255, 1);
    font-size: 1rem;
}
 

.slide{
height: 100%;
padding-bottom: 8.5rem;
}

.bg-white{
background-color: rgba(255,255,255,100);
}

.bg-grey{
background-color: rgba(150,150,150,.20);
}

.bg-yellow{
background-color: rgba(255,255,0,.75);
}

.bg-black{
background-color: rgba(0,0,0,.90);
}

          
/*            Slide 1*/  
header{
height: 45rem;
 background: url(../imgs/bck-banner.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
transition: all 0.2s ease;
} 

.scroll-down{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(183, 214, 105,.90);
    left: 50%;
    top: -90px;
    margin-left: -25px;
    text-align: center;
    color: #fff;
    padding: 8px 4px;
    font-size: 1.5rem;
    z-index: 999; 
}

.scroll-down:hover{
    background-color: rgba(255, 255, 255,.90); 
}


nav.top{
    position: fixed;
    top: 110px;
    right: 30px;
    z-index: 999;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

nav.top a{
    color: rgba(255,255,255,100);
    background-color: rgba(183, 214, 105,.90);
}

nav.pull-xs-right.top.bck-lime-green:hover{
    color: rgba(0,0, 0,.90)
    background-color: rgba(255, 255, 255,.90);
}

.brand-name{
    height: 100%;
}


/* Hamburger Menu */
/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: rgba(0,0,0,.90);
}
.navigation li.nav-item a.nav-link{
    margin-top: 15px;
    color: rgba(255,255,255,.85);
    font-size: 1rem;
}
/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 1500px;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 285px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 270px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.25);
}



/*            Slide 2*/


    .lime-green{
        color: rgba(183, 214, 105,100);
        font-weight: 600;
    }

    .blue{
        color: rgba(41, 171, 226,.50);
        font-weight: 600;
    }

    .orange{
        color: rgba(247, 147, 30,.50);
        font-weight: 600;
    }

    .purple{
        color: rgba(147, 39, 143,.50);
        font-weight: 600;
    }

    .blueberry{
        color: rgba(50, 39, 143,.50);
        font-weight: 600;
    }

    .red{
        color: rgba(140, 0, 20,.50);
        font-weight: 600;
    }

    .green{
        color: rgba(20, 140, 20,.50);
        font-weight: 600;
    }


    .bck-lime-green{
        background-color: rgba(183, 214, 105,100);
    }

    .bck-blue{
        background-color: rgba(41, 171, 226,.50);
    }

    .bck-orange{
        background-color: rgba(247, 147, 30,.50);
    }

    .bck-purple{
        background-color: rgba(147, 39, 143,.50);
    }

    .bck-blueberry{
        background-color: rgba(50, 39, 143,.50);
    }

    .bck-red{
        background-color: rgba(140, 0, 20,.50);
    }

    .bck-green{
        background-color: rgba(20, 140, 20,.50);
    }



/*            Slide 3*/
.slide-3{
height: auto;
background-color: rgba(100, 100, 100,.10);
padding: 150px 0;
}
    
    div.col-md-6, div.col-lg-6{
        padding: 20px 20px;
        margin-bottom: 50px;
    }
 
.heading{
    margin-top: -20px;
    font-size: 1.75rem;
    line-height: 2.25rem;
    letter-spacing: .125rem;
} 


.m-top{
    margin-top: -50px;
}

/*            Slide 4*/
.slide-4{
background-color: rgba(183, 214,105,100);
padding: 70px 0;
}
    .slide-4 p{
        font-size: 2.35rem;
    }
    

 .btn-lg:hover{
     color: rgba(0, 0, 0, 100);
 }   
    
    

.copyright{
    font-size: 1rem;
    line-height: 1.25rem;
    margin: 20px 0;
    color: #fff;
}


.btn {
    border-radius: 0px;
}

.btn-lg {
    color: rgba(255,255,255,100);
    background-color: rgba(0,0,0,.85);
}

.btn-lg a:hover {
    color: rgba(0,0,0,.85);
}

.btn-lg:hover {
    background-color: rgba(255,255,255,100);
}

.btn-lg a {
    color: rgba(255,255,255,100);
}



a.scroll-down:hover {
    color: rgba(0,0,0,.75);
}

@media (max-width: 992px) {
    
    header{
    width: 100%;
    height:50vw;
    background: url(../imgs/bck-banner.jpg) no-repeat center center; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
        
    }
    
    nav.top{
    position: absolute;
    top: 10px;
    right: 22px;
} 
    h1{
    font-size: 1.5rem;
    line-height: 2rem;
}
    
    #about h1{padding-top: 3rem;}
}

@media (max-width: 809px) {
    .scroll-down{
        visibility: hidden;
    }
}