body {
    margin: 0;
    font-family: arial;
}

.logo{
    position: absolute;
    height: 6vw;
    width: 28vw;
    margin-top: 4vw;
 /* border: 1px solid black; */
    margin-left : 3vw;
    background-repeat: no-repeat;
    background-image : url('https://airlinemember.com/image/AirlineMember.svg');
    background-size: 6vw, auto;
    text-decoration: none
}
.brand {
    margin-left: 5vw;
    margin-top: 1vw;
    display: block;
    font-size: 3vw;
    text-align: center;
    color: white;
    text-decoration: none
}

.a .logo{
    text-decoration: none;
    color: white;
}
  /* .ghero{
      display: grid;
      width:100%;
      grid-template-columns : 1fr;
      grid-template-rows : 1fr
}
  */
  
.hero {
    /* Sizing */
    width: 100%;
    height: 100vh;
    
    /* Flexbox stuff */
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    /* Text styles */
    text-align: center;
    color: white; /* ADD THIS LINE */
    
    
    /* Background styles */
    background-image:linear-gradient(rgba(0, 3, 255, 0.2),rgba(0, 3, 255, 0.2)), url('https://airlinemember.com/image/fly.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
   /*  background-attachment: fixed;  */
}
.hero h1 {
    /* Text styles */
    font-size: 3.5vw;
    
    /* Margins */
    margin-top:13vw;
    margin-bottom: 1vw;
}
.hero h2 {
    /* Text styles */
    font-size: 3vw;
    
    /* Margins */
    margin-top: 2vw;
}
  
  /*
   .hero .btn {
   
    display: block;
    width: 20vw;
    height: 2vw; 
    
    padding: 2vw;
    margin-top: 4vw;
    margin-left: auto;
    margin-right: auto;
    
    
    color: white;
    text-decoration: none;
    font-size: 2vw;
    
  
    border: 1px solid white;
    border-radius: 2vw;
    box-shadow: 0px 1px 2px 2px #3d3d3d3d;
    
   
    background-color: rgba(30, 30, 30, 0.1)
   }
  */

  .vacation {
      width:96%; display: grid; grid-gap: 20px; margin-left:2vw; margin-right:2vw;  grid-template-columns : repeat(3, minmax(300px, 1fr)); grid-template-rows : auto 
    }
    
    @media only screen and (max-width: 823px) {
    
    .vacation {
      width:96%; display: grid; grid-gap: 20px;  grid-template-columns : repeat(2, minmax(300px, 1fr)); grid-template-rows : auto  
     }
     .hero{
    height: 650px; }
  
 }   
    
    
   @media only screen and (max-width: 568px) {
    .vacation {
      width:96%; display: grid; grid-gap: 20px;  grid-template-columns : minmax(300px, 1fr); grid-template-rows : auto  
     }
     
  
 }
 
 
  /* ------------ Social Media --------- */
 
 .SocialMedia {
      position: absolute;
      z-index = 1;
      top: 7vw;
      right: 5vw;
      width: 4vw;
      height:  4vw;
  }
  
  .SocialLink, .SocialMedia-open-button {
      background: #ffa300;
      border-radius: 100%;
      width:4vw;
      /* describes the size of the circle */
      height: 4vw;
      position: absolute;
      line-height: 4vw;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: -webkit-transform ease-out 200ms;
      transition: -webkit-transform ease-out 200ms;
      transition: transform ease-out 200ms;
      transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
      text-align: center;
      color: white;
      align-content: center;
     justify-content: center;
  }
  
  .SocialMedia {
      font-size:3em;
  }
  
  .SocialMedia-open {
      display:none; /*makes the checkbox hidden*/
  }
  
  .ShareLink {
     width: 3.1vw;
     height: 3.1vw;
  /*  background: #596778; */
     display: flex;
     position :absolute;
     left: .5vw;
     top: .5vw;
     align-content: center;
     justify-content: center;
     background-image:url('image/AirlineMemberLink.svg');
     background-size: 3vw;
     background-position: center center;
     background-repeat: no-repeat; 
     -webkit-transition: -webkit-transform 200ms;
     transition: -webkit-transform 200ms;
     transition: transform 200ms;
     transition: transform 200ms, -webkit-transform 200ms;
  }
   
 .SocialLink:hover { /*hover effect for the bubbles*/
     background: #0227dd;
     color: #3290B1;
  }
  
  .SocialMedia-open-button {
    z-index: 2;
      transition-duration: 400ms;
      transform: scale(1.1, 1.1) translate3d(0, 0, 0);
      cursor: pointer;
      box-shadow: .1vw .1vw 0 0 rgba(90, 90, 90, 0.3);
  }
  
  .SocialMedia-open-button:hover {
      -webkit-transform:scale(1.2, 1.2) translate3d(0,0,0);
      transform: scale(1.2, 1.2) translate(0,0,0);
  }
  
  .SocialMedia-open:checked + .SocialMedia-open-button{
    transition-timing-function: linear;
    transition-duration: 200ms;
    transform: scale(0.8, 0.8) translate3d(0,0,0);
}

 
  /* Describes the bubble transition */
  .SocialMedia-open:checked ~ .SocialLink:nth-child(3) { 
  /* :nth(n) selector matches every nth child of its parent */
   transition-duration: 300ms;
    transform: translate3d(0, -5vw, 0);
    
  }
  
    
  .SocialMedia-open:checked ~ .SocialLink:nth-child(4) {
    transition-duration: 330ms;
    transform: translate3d(-5vw, 0, 0);
     
  }
  
  
  .SocialMedia-open:checked ~ .SocialLink:nth-child(5) {
    transition-duration: 310ms;
    transform: translate3d(0, 5vw, 0);
    
  }
  
  
  .twitter {
     background-color: #1da1f2;
     box-shadow: .1vw .1vw 0 0 rgba(0, 0, 0, 0.14);
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
  }
  
  .link-twitter {
    width: 3vw;
    height: 3vw;
    margin-top: .5vw;
    margin-left: .5vw;
    display:flex;
    background-image:url('image/t.svg');
    background-size: 2vw;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
 }
  
  .twitter:hover {
     color: #1da1f2;
     text-shadow: none;
  }
  
  .facebook {
     background-color: #3b5998;
     box-shadow: .1vw .1vw 0 0 rgba(0, 0, 0, 0.14);
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
  }
  
  .link-facebook {
    width: 3vw;
    height: 3vw;
    margin-top: .5vw;
    margin-left: .5vw;
    display:flex;
    background-image:url('image/f.svg');
    background-size: 1vw;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
 }
  
  .facebook:hover {
     color: #3b5998;
     text-shadow: none;
  }
  
 
  .mail {
    background-color: #0077d5;
    box-shadow: .1vw .1vw 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
    align-content: center;
    justify-content: center;
 }
 .link-mail {
    width: 3vw;
    height: 3vw;
    margin-top: .5vw;
    margin-left: .5vw;
    display:flex;
    background-image:url('image/e.svg');
    background-size: 2vw;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
 }
 .mail:hover {
    color: #0077d5;
    text-shadow: none;
 }
 
  /* ------------ Special link --------- */
  
   .glide {
        font-family: sans-serif;
        display: flex;
        width:94%;
        left: -100%;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        cursor: auto;
        -webkit-overflow-scrolling: touch;
    
      }

    .glide__item {
        flex: 1 0 100%;
        order: 2;
        -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        }

    .glide__item.-active {
        order: 1;
        }

    .glide__wrapper {
        overflow: hidden;
        display : flex; 
        padding-top: 2vw;
       left:0;
        width:100%;
        position : absolute;
        
        }

    .glide.-animate {
        -webkit-transform: none !important;
                transform: none !important;
        transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
    .glide.-reverse {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
        }
        @media only screen and (max-width: 815px) {
    .glide.-third {
            left: -38%;
            -webkit-transform: translateX(29%);
                    transform: translateX(29%);
        }
    .glide.-third .glide__item {
            flex-basis: 29%;
        }
    .glide.-third.-reverse {
            -webkit-transform: translateX(-29%);
                    transform: translateX(-29%);
        }


        }
        @media (min-width: 51em) {
    .glide.-third {
            left: -17%;
            -webkit-transform: translateX(14%);
                    transform: translateX(14%);
        }
    .glide.-third .glide__item {
            flex-basis: 14%;
        }
     
    .glide.-third.-reverse {
            -webkit-transform: translateX(-14%);
                    transform: translateX(-14%);
        }
        }
    .glide__item {
            background: #009ed3;
            border-radius: 0.5rem;
            box-shadow: 0 0 0.12rem rgba(0, 0, 0, 0.25);
            padding: 1rem;
            margin-right: .3rem;
            text-align: center;
            color : white;
           
            text-decoration: none;
            list-style: none;
            -webkit-overflow-scrolling: touch;
            -webkit-user-select: none; /* Safari 3.1+ */
            -moz-user-select: none; /* Firefox 2+ */
            -ms-user-select: none; /* IE 10+ */
             user-select: none; /* Standard syntax */
            -khtml-user-select: none;
            -o-user-select: none;
        }

    .glide__item > a {
        color: white;
        font-weight: normal;
        margin: 0;
        padding: 3px;
        text-align: center;
        text-decoration: none; 
        list-style: none;
       }