/* INDEX */
body {
    color: #777;
}

#index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 98vh;
}

#about_us ul {
    list-style: square inside url("../media/anchor.png");
    list-style-position: outside;
  }



  #about_us h1 {
    margin-left: 1rem;
  }

#logo_3 {
    margin-top: -107%;
}

#index h1 {
    color: #737373;
    text-align: center;
    font-size: 1.5rem;
    text-transform: uppercase;
}

#index h1 b {
    color: #0a87c6;
    font-weight: 900;
}

.btn-outline-primary {
    color: #737373;
    width: 50%;
    margin-left: 25%;
    border: solid #ababab 1px;
    text-transform: uppercase;
}

.btn-outline-primary:hover {
    outline: solid #ffcdfc44 5px;
    border-color: #cdcdcd;
    outline-offset: 1px;
    background-color: unset ;
}

#navigation {
    background-color: white !important;
}

#navigation a {
    text-align: center;
    text-transform: uppercase;
}

#navigation ul li {
    padding: .2rem;
}

.navbar-toggler,
.navbar-toggler:focus {
    border: unset;
    outline: unset;
}

.navbar-brand {
    padding: 0;
    margin: 0;
    margin-left: .5rem;
}

video {
    margin-top: 20vh;
    width: auto;
    max-width: 90%;
    margin-inline: auto;

}

.container-fluid:has(video) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container-fluid:has(video) h1 {
    max-width: 74%;
    text-align: center;
    
    color: #0a87c6;
    line-height: 110%;
    font-size: 1.4rem;
    margin-top: 4rem;
}

#about_us {
    margin-top: 100px;
    min-height: 96vh;
    padding-inline: 2rem;
}

#about_us_text_block,
#join_us_text_block,
#cooperatives_text_block {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.container-fluid:has(video) .btn-outline-primary {
    margin-left: 0%;
    transform: translateY(0);
}

#join_us_text_block {
    margin-top: 2rem;
}

.calenadrium_photo_row .img {
    max-width: 90vw;
}

/* ----------------------------------------------------- */

#targets {
    background-image: url(../media/targets.png);
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 5rem;
    margin-bottom: 3rem;
  }
 
  #targets h1 {
    margin-top: 5rem;
  }
 
  .target {
    max-width: 600px;
    display: flex;
    flex-direction: row;
    rotate: 30deg;
    margin-bottom: -4rem;
  }
 
  .target h3 {
    font-size: 10rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px;
    line-height: .7;
    color: #0a87c6;
    margin-right: .8rem;
    text-align: right;
  }


 
  .target h2 {
    font-size: 1.5rem;
  }
 
  .target .strong {
    color: #0a87c6;
    font-size: 2rem;
  }
 
  .rotor {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    justify-content: center;
    align-items: center;
    rotate: -30deg;
  }

/* ----------------------------------------------------- */

#calendarium {
    margin-top: 6rem;
}

.calenadrium_photo_row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.calenadrium_photo_row img {
    max-height: 55vh;
    border-radius: .7rem;
}

.calenadrium_photo_row .col-12 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.calenadrium_photo_row .col-12:nth-child(1) {
    transform: rotate(-2deg);
    z-index: 5;
}
.calenadrium_photo_row .col-12:nth-child(2) {
    transform: rotate(3rem);
   z-index: 3;
}



.calendarium_text:hover {
    scale: 1.1;
    transition: .5s;
  }
 
  .calendarium_text {
    z-index: 2;
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -10%;
    z-index: 6;
  }
 
  .calendarium_text h3 {
    text-align: center;
    margin-top: -1.1rem;
    font-size: 1.3rem;
    color: #818181;
  }
 

 
  .calendarium_text h2 {
    background-color: rgba(255, 255, 255, 0.918);
    border-radius: 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #dcb0d7;
    text-align: center;
    line-height: 100%;
    padding: 1rem 2rem;
  }

  .calendarium_describe {
    margin-bottom: 5rem;
  }

/* ----------------------------------------------------- */

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
  
  #logo_2 {
    opacity: 1;
    animation-name: fadeout;
    animation-duration: 3s; 
    animation-delay: 2s;
     animation-iteration-count: infinite;
     animation-direction: alternate;  
  }
  
@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}


.autoShow {
    animation: autoShowAnimation;
    -webkit-animation: autoShowAnimation;
    -moz-animation: autoShowAnimation;
    animation-timeline: view(60% auto);
 }

 @keyframes autoShowAnimation {
    from {
        opacity: 0;
        transform: translateY(200px) scale(.3);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);     
    }
 }

 .autoShowTwo {
   animation: autoShowAnimationTwo;
   -webkit-animation: autoShowAnimationTwo;
   -moz-animation: autoShowAnimationTwo;
   animation-timeline: view(10% auto);
}

 @keyframes autoShowAnimationTwo {
   from {
      opacity: 0;
      transform: translateY(0) scale(1);
   }
   to {
       opacity: 1;
       transform: translateY(200px) scale();     
   }
}

/* ----------------------------------------------------- */



@media (max-width: 992px) {
    #index h1 {
        transform: translateY(-8vh);
    }

    .btn-outline-primary {
        transform: translateY(-7vh);
    }


    /* ------------------------------------------------- */

    #targets h1 {
        margin-bottom: 4rem;
        text-align: center;
      }
    
      .rotor {
        display: flex;
       flex-direction: column;
       gap: 14vh;
       justify-content: center;
       align-items: center;
       rotate: unset;
       margin-bottom: 30vh;
      }
    
      .target {
        max-width: 70vw;
       display: flex;
       flex-direction: row;
       rotate: unset;
      }
    
      .target h3 {
        font-size: 6rem;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 3px;
        line-height: .7;
        color: #0a87c6;
      }
     
      .target h2 {
        font-size: 1rem;
      }
     
      .target .strong {
        color: #0a87c6;
        font-size: 1.2rem;
      }

      .calendarium_desktop {
        display: none;
      }

      .calendarium_describe {
        margin-top: 1.5rem;
      }

      .calendarium_mobile {
        margin-top: 1.6rem;
        margin-bottom: 1rem;
        margin-inline: auto;
      }

      .calenadrium_photo_row:has(.video_mob) {
        margin-top: -8rem !important;
        margin-bottom: -12rem;
        margin-inline: auto;
      }
          
    
}



#lang {
    outline: solid #9f9f9f33 1px;
    padding: .5rem;
    border-radius: 0 .5rem .5rem 0;
    z-index: 99999;
    position: fixed;
    margin-top: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
}

#lang a{
    text-decoration: none;
    color: gray;
}

#lang .active {
    color: #0a87c6;
    font-weight: 800;
}


#contact_form {
    background-color: rgb(49, 49, 49);
    padding: 1.5rem 2.5rem;
    border-radius: .8rem .8rem 0 0;
  }
  
  #contact_form h1,
  #contact_form label,
  #contact_form .form-text {
    color: white;
  }
  
  #contact_info {
    background-color: rgb(119, 45, 45);
    padding: 1.5rem 2.5rem;
    border-radius: 0 0 .8rem .8rem;
  }
  
  
  
  #contact_panel {
    background-color: #d6ebfd;
    padding: 1.8rem 2.2rem;
    border-radius: 0 1rem 1rem 0;
  
    box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07)
  ;
  }
  
  
  #contact_info2 {
    font-size: 1.5rem;
  }
  
  #contact_info2 .row {
    background-color: white;
    padding: 1.8rem 2.2rem;
    border-radius:  2rem;
    outline: solid 1px #8f8f8f22;
    margin-block: 1rem;
    box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035)
  ;
  }
  
  #contact_info2 .row a {
    text-decoration: none;
    color: #6f6f6f;
    font-size: 1.5rem;
  }

  .media_link {
    text-decoration: none;
    color: #0a87c6;
    font-weight: 900;
    
  }

  .media_link h2 {
    font-size: 1.3rem;
  }

 body:has(#targets) {
    background-image: url(../media/beach.png);
    background-position: bottom;
    background-repeat: no-repeat;

    
    height: 100%;
    padding-bottom: 30vw;
    margin-bottom: 50px !important;
  }

  .row:has(.media_top) {
    margin-block: 1rem;
    outline: solid 1px #ededed;
    padding: 1rem 2rem 1rem 3rem;
    border-radius: .7rem;
  }

  .row:has(.media_top) h2 {
    margin-left: -2rem;
  }


  @media (min-width: 993px) {

    .calendarium_mobile {
      display: none;
    }
  
    
  
      #index h1 {
          font-size: 2.5rem;
          margin-bottom: 2rem;
          text-align: left;
      }
  
      #index #sec_hero>div>div>div:has(h1) {
          transform: translateX(-5vw) translateY(5vh);
      }
  
      .btn-outline-primary {
          margin-left: 0%;
      }
  
      #navigation ul li {
          padding: .3rem 1.5rem;
      }
  
      .navbar-brand {
          margin-left: 2rem;
      }
  
      .container-fluid:has(video) {
          min-height: 90vh;
      }
      
      .container-fluid:has(video) h1 {
          font-size: 2.3rem;
      }
  
      .calenadrium_photo_row .col-12:nth-child(1) {
          transform: translateX(4vw) rotate(-5deg);
          justify-content: end;
          align-items: end;
  
      }
  
      .calenadrium_photo_row .col-12:nth-child(2) {
          align-items: left;
          justify-content: left;
          transform: translateX(-4vw) rotate(4deg);
      }
  
      .calendarium_describe {
          max-width: 50%;
          margin-left: 25%;
          margin-top: 2rem;
          margin-bottom: 8rem;
      }
      
      .calendarium_describe p {
          text-align: justify;
      }
  
      .calendarium_text h2 {
          font-size: 3rem;
      }
  
      .calendarium_text h3 {
          font-size: 2.3rem;
      }

      #contact_info2 .row a {
        font-size: 1.1rem;
      }
  }