/* HIDE ALL ELEMENTS FOR MOBILE SCREENS */

#navMobile {
    display: none;
}

#headerMobile {
    display: none;
}

#mainMobile {
    display: none; 
}

#upSquareIconMobile {
    display: none; 
}



* {
    box-sizing: border-box;
    border: none;
  }


  body {
    position: relative;
    background-image: linear-gradient(rgb(219, 219, 219), rgb(168, 168, 168));
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    padding: 0;
    margin: 0;
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    -webkit-tap-highlight-color: transparent;
    animation: incrOpacityBodyAnim 0.3s ease-in 1 forwards;
  }
  
  @keyframes incrOpacityBodyAnim {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  
#headerDesktop {
    width: 100vw;
    max-width: 100vw;
    height: 5vw;
    padding: 0;
    margin: 0;
    z-index: 120;
    background-image: linear-gradient(rgb(16, 56, 96), rgb(39, 138, 196));
    display: flex;
    justify-content: right;
    align-items: center;
    color: white;
  }
  
  #logo {
    height: 4.5vw;
    width: 4.5vw;
    margin-left: 0.5vw;
  }

  #HimaraSeas {
    height: 5vw;
    width: 18vw;
    color: white;
    font-size: 1.2vw;
    margin-left: 0.7vw;
    margin-right: auto;
    font-family: 'Lora', serif;
  }
  
  #spanHimaraSeas {
    display: block;
    letter-spacing: 0.1vw;
    margin-top: 1vw;
  }

  #spanSPEEDBOAT {
    display: block;
    letter-spacing: 0.3vw;
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    font-style: italic;
  }

  #menuItemsContainer {
    display: grid;
    grid-template-columns: 18vw 18vw 12vw 12vw 8vw;
    color: whitesmoke;
    margin-left: 1vw;
    margin-right: 5vw;
    height: 5vw;
    width: 68vw;
  }

  .menuItems {
    display: flex;
    color: whitesmoke;
    text-decoration: none;
    letter-spacing: 0.1vw;
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    font-size: 1.8vw;
    align-content: center; 
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 1px 1px 2px rgba(0, 0, 0, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.6);
  }

  #navTripsPrivateDesktop {
    position: absolute;
    width: 18vw;
    height: 25vw;
    top: 5vw;
    left: 27vw;
    text-decoration: none;
    letter-spacing: 0.1vw;
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    font-size: 1.8vw;
    background-image: linear-gradient(rgb(39, 138, 196), rgb(115, 188, 230));
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 120;
    display: none;
  }

  #navTripsGroupDesktop {
    position: absolute;
    width: 18vw;
    height: 15vw;
    top: 5vw;
    left: 45vw;
    text-decoration: none;
    letter-spacing: 0.1vw;
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    font-size: 1.8vw;
    background-image: linear-gradient(rgb(39, 138, 196), rgb(115, 188, 230));
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 120;
    display: none;
  }

  .menuItems2Desktop {
    display: flex;
    height: 5vw;
    color: wheat;
    text-decoration: none;
    letter-spacing: 0.1vw;
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    font-size: 1.5vw;
    align-content: center; 
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 1px 1px 2px rgba(0, 0, 0, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.6);
  }

  

/* MAIN DESKTOP */

  .mainDesktop {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    padding: 0;
    margin: 0;
    z-index: 1;
    color: black;
  }

  h1 {
    font-family: 'Lora', serif;
    font-size: 2vw;
    letter-spacing: 0.1vw;
    margin-top: 3.5vw;
    margin-bottom: 1vw;
    margin-left: 5.5vw;
    margin-right: 5.5vw;
    justify-self: left;
    font-weight: 550;
  }

  h2 {
    font-family: 'Lora', serif;
    font-size: 2.5vw;
    letter-spacing: 0.1vw;
    margin-top: 3vw;
    margin-bottom: 0.5vw;
    align-self: center;
    font-weight: 550;
    text-align: center;
  }
  
  h3 {
    align-self: left;
    margin-top: 1vw;
    margin-bottom: 0.5vw;
    letter-spacing: 0.1vw;
    font-size: 1.5vw;
    font-family: 'Lora', serif;
    align-self: flex-start;
    text-align: flex-start;
    font-weight: 500;
    margin-left: 3vw;
  }
  
  h4 {
    font-size: 1.2vw;
    color: rgb(198, 198, 198);
    letter-spacing: 0.1vw;
    text-align: center;
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    align-self: center;
    font-weight: 300;
    margin-bottom: 2vw;
    margin-top: 0;
  }
  
  p {
    font-family: 'Lora', serif;
    letter-spacing: 0.03vw;
    margin-top: 0;
    margin-bottom: 2vw;
    margin-left: 5.5vw;
    margin-right: 5.5vw;
    text-align: justify;
    text-indent: 5.5vw;
    line-height: 3vw;
    font-size: 1.2vw;
  }


  iframe {
    width: 80vw;
    max-width: 80vw;
    height: 45vw;
    max-height: 45vw;
    margin-top: 0.5vw;
    margin-bottom: 4vw;
    border-radius: 16px;
    margin-left: 10vw;
  }


  .tripDetailsContainer {
    position: relative;
    width: 80vw; 
    max-width: 80vw;
    margin-left: 10vw;
    display: flex;
    flex-direction: column;
    justify-content: right;
    justify-items:  right;
    align-content: flex-start;
    align-items: flex-start;
    background-color: rgb(27,35,47);
    color: whitesmoke;
    border-radius: 16px;
    margin-top: 1vw;
    margin-bottom: 4vw;
  }
  
  .tripDetailsContainer > p {
    font-family: 'Lora', serif;
    letter-spacing: 0.03vw;
    margin-top: 0.5vw;
    margin-bottom: 3vw;
    margin-left: 5vw;
    margin-right: 5vw;
    text-align: justify;
    text-indent: 5.5vw;
    line-height: 3vw;
    font-size: 1.2vw;
  }

  .durationH3 {
    margin-top: 1.5vw;
  }

  .tripDetailsContainer > p.duration {
    margin-bottom: 1.5vw;
 }

  .photoSlip1 {
    width: 80vw; 
    max-width: 80vw;
    height: 15.5vw;
    display: flex;
    justify-content: center;
    margin-bottom: 2vw;
  }

  .photoSlip2 {
    position: relative;
    width: 80vw; 
    max-width: 80vw;
    height: 15.5vw;
    display: flex;
    justify-content: center;
    margin-bottom: 2vw;
    margin-top: -17.5vw;
    transition: opacity 3s;
  }

  .photo {
    width: 20vw;
    height: 15.5vw;
  }

ul {
    font-family: 'Lora', serif;
    margin-top: -3vw;
    margin-bottom: 2vw;
    margin-left: 12vw;
}
  
li {
    font-family: 'Lora', serif;
    padding: 0;
    text-indent: 0;
    margin-top: 1vw;
    letter-spacing: 0.05vw;
    font-size: 1.2vw;
}


/* BOOK BUTTON */
.bookButton {
    font-family: 'News Cycle', 'Source Sans Pro', 'Arial';
    box-shadow: 0 0 20px 10px rgb(255, 95, 2, 0.7); 
    display: flex;
    width: 18vw;
    height: 5vw;
    color: whitesmoke;
    z-index: 5;
    padding: 0;
    margin-bottom: 5vw;
    margin-top: 2vw;
    text-decoration: none;
    letter-spacing: 0.1vw;
    font-size: 2vw;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    border-radius: 20px;
    font-weight: 500;
    animation: buttonBlink 6s ease-in-out infinite forwards;
    text-align: center;
    align-self: center;
  }
  
  @keyframes buttonBlink {
    0% {
      box-shadow: 0 0 20px 10px rgb(255, 95, 2, 0.7); 
    }
    20% {
      box-shadow: 0 0 20px 10px rgb(255, 95, 2, 1); 
    }
    50% {
      box-shadow: 0 0 20px 10px rgb(255, 95, 2, 0.7); 
    }
    100% {
      box-shadow: 0 0 20px 10px rgb(255, 95, 2, 0.7); 
    }
  }

  .bookButton:hover {
    background-image: linear-gradient(rgb(11, 115, 136), rgb(11, 73, 136));
  }


  /* UPSQUARE ICON - SCROLL TO THE TOP OF THE PAGE*/
#upSquareIconDesktop {
    display: block;
    position: fixed;
    right: -5vw;
    bottom: 1vw;
    z-index: 130;
    transition: all 0.5s ease-in-out;
    cursor: default;
  }
  
  #upSquareIconDesktop.show {
    right: 1vw;
  }
  
  .up-square-icon {
    fill: none;
  }
  
  #SVGRepo_tracerCarrier polyline {
    fill: none;
    stroke:rgb(255, 255, 255);
    stroke-width: 0.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .up-arrow {
    stroke:rgb(255, 255, 255, 1);
    stroke-width: 2;
    stroke-miterlimit: 10;
  }
  
  .square {
    fill: rgb(27,35,47, 0.5); 
  }