/** RESET **/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }


body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #000;
   }

p {
    margin-bottom: 5px;
}

/** Typography **/

h1 {
    text-transform: uppercase;
    line-height: initial;
}

/** Utilities **/

.text-align-center {
    text-align: center;
}

.mt-small {
    margin-top: 2rem;
}

.mt-medium {
    margin-top: 4rem;
}

.mt-large {
    margin-top: 8rem;
}

.mb-small {
    margin-bottom: 2rem;
}

.mb-medium {
    margin-bottom: 4rem;
}

.mb-large {
    margin-bottom: 8rem;
}

.d-inline-block {
    display: inline-block;
}


@media only screen and (max-width: 600px){
    .mb-large {
        margin-bottom: 6rem;
    }
}

/** Layout **/

.flex-container {
    display: flex;
    justify-content: space-evenly;
}

.flex-item {
   flex: 1;
}

.grid-rows-1 {
    grid-template-rows: repeat(1, min-content);
}

.grid-rows-2 {
    grid-template-rows: repeat(2, min-content);
}

.grid-container {
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 800px;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
}

/** Forms **/

form input,
form textarea {
    width: 100%;
    border-radius: 0;
    padding: 20px;
    font-family: 'lato', sans-serif;
    font-size: 16px;
    border: none;

}

.footer-contactform input {
  margin-bottom: 8px;
}

form button {

  background-color: white;
  color: #000;
  display: inline-block;
  font-size: 16px;
  font-weight: 200;
  padding: 20px;
  border: none;
  text-decoration: none;
  transition: all .3s;
  outline: none;

}

form button:hover {
  background-color: black;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px white;
}

form button:active {

  transform: translateY(3px);
  box-shadow: none;


}

/** Header **/

#parallax {
    height: 90vh;
    display: grid;
    align-items: center;
    justify-items: center;
}



header.header {
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    background-image: linear-gradient( to bottom right,  rgba(40,75,255,.5),rgba(13,220,239, .5) ), url(../images/mountains_lg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    z-index: 10;
    position: relative;

}

@media only screen and (max-width: 600px){
    header.header {
        background-image: linear-gradient(to bottom right,  rgba(40,75,255,.5),rgba(13,220,239, .5)  ), url(../images/mountains_sm.jpg);
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }
}


header.header div.header-title {

    text-align: left;

}



.header-title h1 {
    font-size: 175px;
    line-height: 140px;

}



.header-title h1 {
    text-shadow: 5px 0px #FFF;
    
}

.header button {
    font-size: 24px;
    font-family: 'lato', sans-serif;
    text-transform: uppercase;
    background-color: #000;
    color: white;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    font-weight: 400;
    padding: 20px 50px;
    border: none;
    text-decoration: none;
    transition: all .3s;
    outline: none;
    border-radius: 100px;
}

.header button:hover {
    background-color: white;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 5px black;
}

.header button:active {

    transform: translateY(3px);
    box-shadow: none;


}

@media only screen and (max-width: 800px) {
    .header-title h1 {
        font-size: 120px;
        line-height: 95px;
    }
}

@media only screen and (max-width: 600px){
    .header-title h1 {
        font-size: 110px;
        line-height: 90px;
    }

    .header button {
        font-size: 20px;
        font-weight: 400;
        padding: 15px 40px;
       
    }
    
    .header button:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px black;
    }
    
    .header button:active {
        transform: translateY(3px);
        box-shadow: none;
    
    
    }
}

@media only screen and (max-width: 500px){
    .header-title h1 {
        font-size: 90px;
        line-height: 70px;
    }
}







/** NAVBAR **/

.clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .navbar {
    margin: 0;
    padding: 30px 20px;
    position: fixed;
    width: 100vw;
    z-index: 50;
    text-transform: uppercase;
    font-weight: 600;
  }

   a {
    text-decoration: none;
    color: inherit;
  }

  .navbar-scroll {
   color: white;
   background-color: black;
   transition: all .8s;   
  }
  
  .navbar-top {
    color: black;
    background-color: transparent;
    transition: all .8s;   
   }

  .navbar-logo {
    float: left;
    margin-left: 30px;
    padding: 0;
  }
  
  .navbar-links {
    float: right;
    margin-right: 30px;
  }
  
  .navbar-links a:not(:last-child){
    margin-right: 10px;
  }


  
  @media only screen and (max-width: 600px){
   .navbar-links {
    display: none;
    width: 100vw;
    height: 100vh;
    float: none;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: grey;
    }
    
  .navbar-links a:not(:last-child){
    margin-right: 0;
    }

    .navbar-logo {
            float: left;
            margin-left: 30px;
            padding: 0;
        }    

  }

  .navbar-mobile_menu i {
      color: inherit;
  }
  
  .main {
    display: flex;
    color: white;
    background-color: black;
    font-size: 30px;
    line-height: 60px;

  }
  
  .navbar-mobile_menu {
    position: absolute;
    right: 0;
    margin-right: 30px;
    z-index: 50;
    display: none;
  }
  
  @media only screen and (max-width: 600px){
   .navbar-mobile_menu {
    display: block;
    } 
  }

  /** BODY **/

  .welcome-section {
    background-color: #f7f7f7;
    padding: 300px 0;
    margin-top: -20vh;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);

  }

  @media only screen and (max-width: 600px){
    .welcome-section {
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        padding: 300px 0 180px 0;
    }

    .welcome-section .container {
        padding: 0;
    }
}

@media only screen and (min-width: 600px){
    .welcome-section {
        padding: 200px 0 300px 0;
    }
}

  #about {
    background-image: linear-gradient(to right, rgba(40,75,255,.5),rgba(13,220,239, .5) );
    display: inline-block;
    -webkit-background-clip: text;
    color: transparent;
  }

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 0;
}

.section:not(:first-child) {
    padding-top: 30px;
}



.image-component {
    position: relative;
}

.image-component img {
    width: 150px;
}

.img-1 { 
    position: absolute;
    top: 40px;
    right: 110px;
    z-index: 50;
}

.img-2 { 
    position: absolute;
    right: 50px;

}

.img-3 { 
    position: absolute;
    top: 80px;
    right: 0px;
}

@media only screen and (max-width: 900px) {
    .container {
        max-width: 80%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 700px) {
    .flex-container {
        display: block;
    }

    .img-1,.img-2,.img-3 {
        position: static;

    }

    .image-component {
        margin-top: 30px;
    }
}

/** NEWSLETTER **/

#newsletter {
    background-image: linear-gradient(to right, rgba(40,75,255,.5),rgba(13,220,239, .5) );
    display: inline-block;
    -webkit-background-clip: text;
    color: transparent;
}

.newsletter {

    overflow: hidden;
    position: relative;

}

#clouds {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.newsletter:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 5;
    background: rgba(255,255,255,.8); 
}

.newsletter .container {
    position: relative;
    z-index: 6;
    color: black;
}


.newsletter form button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
background-color: black;
color: #FFF;
display: inline-block;
font-size: 16px;
font-weight: 200;
padding: 20px;
border: none;
text-decoration: none;
transition: all .3s;
outline: none;
}

  
  .newsletter form button:hover {
    background-color: white;
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 5px black;
  }
  
  .newsletter form button:active {
  
    transform: translateY(3px);
    box-shadow: none;
  
  
  }

.newsletter__form-container {
 position: relative;
}



.newsletter input::placeholder {
    text-align: center;
}

@media only screen and (max-width: 900px) {
    #clouds {
        width: 900px;
    }
}


  /** Trip Cards **/





.card {

    -webkit-box-shadow: 0px 0px 40px -25px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 40px -25px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 40px -25px rgba(0,0,0,0.75);
    
}

.card-pic {
    height: 200px;

}

.card-content {
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}

i.fas.fa-star {
    color: rgb(233, 198, 0);
}

div.grand_canyon {
    background-image: url('../images/grand_canyon.jpg');
    background-size: cover;
    background-position: center;
}

div.yosemite {
    background-image: url('../images/yosemite.jpg');
    background-size: cover;
    background-position: center;
}

div.zion {
    background-image: url('../images/zion.jpg');
    background-size: cover;
    background-position: center;
}

div.yellowstone {
    background-image: url('../images/yellowstone.jpg');
    background-size: cover;
    background-position: center;
}

.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.scrolling-wrapper .card {
      display: inline-block;
    }
      
@media only screen and (max-width:800px){
    .scrolling-wrapper::-webkit-scrollbar {
        display: none;
      }
}

@media only screen and (max-width:800px){
    .card-grid {
        display: block;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        /* padding: 20px 0; */
        }
    
    

        .card-grid .card {
        display: inline-block;
        width: 300px;

        
      }

      .card-grid .card:not(:last-child){
        margin-right: 20px;
      }

      .card-grid::-webkit-scrollbar {
        display: none;
      }
}

  /** FOOTER **/

  .footer {

    background-image: linear-gradient( to bottom right,  rgba(40,75,255,.5),rgba(13,220,239, .5) ), url(../images/river_rapids.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    color: white;
    font-weight: 100;
    border: none;
   
    /* padding: 30px; */

  }

  .footer-contactinfo {  
    padding: 25px; 
    background-color: #000;
    align-self: center;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .footer-contactform {
 
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

}

  @media only screen and (max-width: 800px){

    .footer-contactinfo {  
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
      }
    
      .footer-contactform {
     
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    
    }

  }