@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --yellow: #fbdd23;
  --black: #000000;
  --darkblue: #314d98;
  --darkgray: #535556;
  --skyblue: #6198b8;
  --gray: #d0d0cd;
  --white: #f6f6e2;
}
html {
  scroll-behavior: smooth;
}
* {
  font-family: "Libre Franklin", sans-serif;
  margin: 0%;
  box-sizing: border-box;
  padding: 0%;
  text-decoration: none;
  font-size:16px;
}

.font-bold {
  font-weight: bold;
}
.color_gray {
  color: var(--gray);
}
.shadow_text {
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.9));
}
a:active{
color:#000000
}
.button {
  cursor: pointer;
  padding: 1rem;
  margin: 1.7rem 0 0 0.3rem;
  font-weight: 600;
  font-size: 1.3rem;
  background-color: var(--yellow);
  border-radius: 5px;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 35px;
}
.button:hover {
  background-color: #9f8d16;
}
h1 {
  font-size: 7rem;
  text-align: start;

}
h2 {
  font-size: 1.8rem;
  text-align: center;
  margin-top:0.5rem;
  margin-bottom:0.7rem;
}
h3 {
  font-size: 1.2rem;
  margin-top:0.5rem;
  margin-bottom:0.7rem;
}
h4{
  margin-top:0.5rem;
}
/*HEADER*/
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  transition: all 0.7s;
}
.logo_club {
  margin-left:0.5rem;
  width: 7rem;
}
.header_color {
  background-color: rgb(21, 21, 20, 0.9);
}
main {
  position: relative;
  right: 0;
  transition: all 300ms;
}
/*BARRA MENU*/
.container__menu {
  height: auto;
  padding: 10px;
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*WEAHTER */
#pop-up_weather {
  position: absolute;
  top: 5.33rem;
  width:90%;
  height: auto;
  margin:auto;
  z-index: 9999999;
  padding: 2rem;
  display: none;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 0 0 var(--shadow-size, 40px) #00000099;
    #close_icon{
      position: absolute;
      right:15px;
      top:15px;
    }
    #close_icon:hover{
      filter: drop-shadow(0px 10px 15px #0b1224 );
      transform: scale(1.2);
    }
    .iframes_weather_div{
      padding-top: 0.5rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap:1rem;
      justify-content: space-between;
        .iframe_little{
          margin:auto;
        
                      }
      }
}
nav {
  /* background-color: brown;   */
  padding-right: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

nav > ul {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* background-color: #fbdd23; */
}
nav > ul > li {
  height: 100%;
  list-style: none;
  /* background-color: #4973aa; */
}
nav > ul > li > a {
  /* background-color: chartreuse; */
  color: var(--white);
  padding: 14px;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: all 300ms ease;
  border-radius: 5px;
}
.link_menu:hover {
  color: #fbdd23;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#link_weather {
  color: #fbdd23;
  border-radius: 50px;
  background-color: var(--darkblue);
  text-transform:lowercase;
  filter: drop-shadow(0px 10px 15px #0b1224 );
  margin-right: 1rem;
  height: 70%;
}
#link_weather:hover {
  filter: drop-shadow(0px 10px 15px #3b445d );
}
.selected {
  color: var(--black);
  transform: scale(1.1);
  background-color: #fbdd23; /*importante que sea background-color porque hay una imagen de fondo*/
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.selected:hover{
  color: var(--black);
}
.button_wp{
  border:none;
  background: none;
  filter: drop-shadow(0px 10px 15px #0b1224 );
    /* background-color: #e4ca23;   */
   a>img{
    width: 2rem;
    }
  }
  .button_wp:hover {
      filter: drop-shadow(0px 10px 15px #3b445d );
  }
/*RESPONSIV ELEMENTS*/
.icon__menu {
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  height: 100%;
  align-items: center;
}
#check__menu {
  display: none;
}
#label__check {
  width: 3rem;
  height: 100%;
  display: none;
}
/*GO TO TOP BUTTON*/
.go-top-container{
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  width: 3rem;
  height:3rem;
    z-index: -1;    
}

.go-top-button{
  width: 0rem;
  height: 0rem;
  overflow: hidden;
  background-color:  rgb(206, 204, 194,0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 35px 35px;
  border-radius: 50%;
  cursor:pointer;
display: flex;
justify-content: center;
align-items: center;
 
}
.go-top-button img{
   width:1rem;
   transition:.2s;
}
.show{
  z-index: 1100;
}
.show .go-top-button{
  animation: popup .3s ease-in-out;
  width: inherit;
  height: inherit;
  z-index: 1100;
}
@keyframes popup {
  0%{
    width: 0rem;
    height: 0rem;
  }
  50%{
    width: 2rem;
    height: 2rem;
  }
  100%{
    width: inherit;
    height: inherit;
  }
}
/*FOOTER*/
footer {
  width: 100%;
  position: relative;
   overflow:hidden; 
   height:  400px; 
  .wave {
    width: 60000px;
    height: 280px;
    background-image: url("../img/wave.svg");
    background-position: top;
  }
  .w1 {
    position: absolute;
    top: 20px;
    left: 0;
    animation: w1 15s linear infinite,
    desplazamiento 8s ease -0.125s infinite;
  }
  .w2 {  position: relative;
    top: 20px;
    left: 0;
    animation: w2 28s linear -0.125s infinite,
     desplazamiento 15s ease -0.125s infinite;
    opacity: 0.8;

  }
  .footer_info{
    width: 100%;
   background-color:var(--darkblue); 
    height:  190px; 
    position:absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
      .left {
        width: auto;
        padding-left:1%;
        height: inherit;
        display:flex;
      flex-direction: column;
    p{  
      font-size: 1rem;
      padding-bottom:0.3rem;
        color: whitesmoke;
        display:flex;
        flex-wrap: nowrap;
        align-items: center;
        .form_icon {
          margin: 0.4rem;
          width: 1.5rem;
        }
      }
    }
    .right {
      width: auto;
      height: inherit;
      padding: 1rem;
      display:flex;
      align-items: flex-end;
      justify-content: flex-end;
      /* background-color: aqua; */
        .social_media_icon {
          padding-bottom:0.5rem;
            margin: 0.5rem;
            width: 2.5rem;
            transition: all 300ms ease;
          } 
          .social_media_icon:hover{
              transform: scale(1.3);
              filter: drop-shadow(0px 10px 15px #0b1224 );
         
          }
         
      }
    }

 
  }
  @keyframes w1 {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1600px;
    }
  }
  @keyframes w2 {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1600px;
    }
  }
  @keyframes desplazamiento {
    0%,
    100% {
      transform: translateY(-25px);
    }
  
    50% {
      transform: translateY(22px);
    }
  } 
/************EFFECT BOAT************************/

.sail {
    animation: sail 2.5s infinite ease-in-out alternate;
  }
  .sailpost {
    animation: sailpost 2.5s infinite ease-in-out alternate;
  }
  #all {
      width: 25rem;
    position:absolute;
    right: 4rem;
   bottom: 0px; 
    animation: boat 2s infinite ease-in-out alternate;
  }
  .bottom {
    animation: bottom 2.3s infinite ease-in-out alternate;
  }
  .top {
    animation: whale 2.3s infinite ease-in-out alternate;
  }
  .ripple {
    display: none;
  }
  #buoy {
 
      width: 5rem;
    position: absolute;
    right: 25rem;
    bottom: 7rem; 
    animation: buoy 2.5s infinite ease-in-out alternate, desplazamiento 8s ease -0.125s infinite; ;
  }  
  @keyframes boat {
      0% {
        transform: translateY(-4px);
      }
      100% {
        transform: translateY(4px);
      }
    }
    @keyframes sailpost {
      0% {
        transform: translateX(0px) skewX(0deg);
      }
      100% {
        transform: translateX(1px) skewX(2deg);
      }
    }
    @keyframes buoy {
      0% {
        transform: rotate(-5deg) translateY(0px);
      }
      100% {
        transform: rotate(5deg) translateY(3px);
      }
    }
    @keyframes bottom {
      0% {
        transform: scale(1) translateX(-19px);
      }
      100% {
        transform: scale(1.101) translateX(-7px) translateY(-17px);
      }
    }
    @keyframes sail {
      0% {
        transform: translateX(-1px) skewX(-1deg);
      }
      100% {
        transform: translateX(1px) skewX(1deg);
      }
    }
/*----------------------------------------------------------*/

/***************************************************************************************/
@media screen and (min-width: 3000px) {
  *{
    font-size:40px
  }
footer{height: 800px;
  .footer_info{
   
    height:  590px; 
  }
}
}
@media screen and (max-width: 2999px) {
  *{
    font-size:26px
  }
}
@media screen and (max-width: 2560px) {
  *{
   font-size:20px 
  }
}
@media screen and (max-width: 2000px) {
  *{
    font-size:18px
  }
}
@media screen and (max-width: 1280px) {
  *{
    font-size:16px
  }
}
@media screen and (max-width: 1000px) {
  *{
    font-size:14px
  }
}
@media screen and (max-width: 720px) {
  *{
    font-size:13px
  }
  #pop-up_weather {
  width: 100%;
  left:0;
  display: none;
  }
  .link_weather {
  margin-right: 0;
  }
  .container__menu {
    margin-top: 0;
  }

  nav > ul {
    flex-direction: column;
    padding-top: 2rem;
    background-color: rgb(21, 21, 20, 0.9);
    position: fixed;
    left: 0;
    top: 5.33rem;
    height: 0px;
    width: 100%;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
  }
  nav > ul > li > .link_menu {
    min-width: 600px;
  }
  nav ul li ul {
    left: 90px;
  }
  nav ul li:hover ul {
    top: 50px;
  }
  #selected {
    transform: scale(1);
  }
  #label__check {
    padding-right: 1rem;
    display: flex;
    justify-content: flex-end;
    height: 100%;
    align-self: flex-end;
  }
  #check__menu {
    align-self: flex-end;
  }
  .menu_visible {
    opacity: 1;
    visibility: visible;
    height: 300px;
    transition: all 300ms ease;
  }
  #link_weather {
    margin-right: 0;
  }
  #buoy {
  right: 2rem;
  bottom: 10rem; 
} 
#all {

right:0;
bottom: 9rem; 

}
  footer{
    .left{
      p{
        .form_icon {
          margin: 0.4rem;
          width: 1.1rem;
        }
    }
    }
  }
}
 @media screen and (max-width: 450px) {
  *{
    font-size:12px
  }
  footer{
    .left{
      p{
        .form_icon {
          margin: 0.3rem;
          width: 1.1rem;
        }
    }
    
    }
  }
 
} 
@media screen and (max-width: 390px) {
  *{
    font-size:10px
  }
  footer{
    .left{
      p{
        padding-bottom:0.3rem;
      }
    }
    #all {

      right:0;
      bottom: 13rem; 
      
      }
  }
}