*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

:root{
    --bs-blue:#D9DD6B;
    --bs-info:#D54C4C;
}

html{
      font-size: 62.5%;
}

img {
    max-width: 100%;
    height: auto;
}

.bg-primary{
    background-color: var(--bs-blue) !important;
}

.text-info{
    color: var(--bs-info) !important;
}



/* START HEADER*/
 

  .container-fluid a:hover{
      color: var(--bs-info) !important;
  }

/* END HEADER*/


/* START HERO*/

.hero{
     height: 80vh;
 }

.hero img{
     width: 100vw;
     height: 80vh;  
     object-fit:cover;
 }

.overlay{
    position: relative;
}

.overlay_text{
    width: 100%;
    position: absolute;
    bottom: 5rem;
    display: flex;
    justify-content: center;
    transform: scale(0);
    transition:2s ease ;
}

.overlay_text a{
  text-decoration: none;
  color: #fff;
  text-shadow: 0px 0px 5px black;
  text-align: center;
  transition: 0.6s transform;
  font-size: 3rem;
}

.overlay_text a:hover{
  transform: scale(1.2) ;
}

.overlay:hover .overlay_text{
    transform: scale(1);
}

.span-button{
  width: 5rem;
  height: 5rem;
  transition: 0.5s transform ease;
}

.span-button:hover{
  transform: scale(1.5);
}

/* END HERO*/

/* START CARDS*/

.main_title {
    background-color: #d9dd6b;
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
    margin-bottom: 2.5rem;
    padding: 1.2rem;
  }
.img-thumbnail {
    height: auto;
    min-height: 250px;
    max-width: 94%;
    margin: 10px;
    background-size: 250px;
  }
.card {
    height: auto;
    min-height: 250px;
    max-width: 100%;
    margin: 10px;
    background-color: #d9dd6b;
    border: 3px solid darkgrey;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.25s;
  }
.card:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
  }
.card-title {
    padding: 5px;
    color: black;
    font-weight: bold;
  }
.card-text {
    font-style: verdana;
    padding: 5px;
    color: white;
  }

/*END CARDS*/


/* START GALLERY*/

#gallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#gallery img:hover{
    cursor: pointer;
}

.img-item{
    position: relative;
}

.zoom img{
    transition-property: transform;
    transition-duration: 300ms;
}

.zoom img:hover{
    transform: scale(1.1);
}


.img-item:hover .overlay{
    transform: scale(1);
}

/* END GALLERY*/


/* START FOOTER*/

.footer a{
 transition: 0.5s transform;
}

.footer a:hover{
    transform: scale(1.2);
}

/* END FOOTER*/


/* START MODAL SUBS AND REGISTRACION */

#red {
  border: var(--bs-red);
}
#green {
  color: black;
  border: var(--bs-green)
}
form {
  text-align: center;
}
.item {
  margin: 1rem;
}


/* END MODAL SUBS ADN REGISTRACION */


/* START LOGIN */

.expand img{
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: none;
}

/* END LOGIN */

/* START POST */
.post{
  margin-top: 12rem;
}

.post_subtitle{
  color: #888;
}

.post_video{
  display: none;
  width: 70%;
  height: 40rem;
}

/* END POST */

/* START CONTACT */

.contact{
  margin-top: 12rem;
  margin-bottom: 10rem;
}

.contact h2{
  height: 4rem;
  border-bottom: 0.2rem solid #D9DD6B ;
  font-size:1.8rem;
}


textarea {
  resize: none;
}

.form-label {
  margin-top: 1.2rem;
  color: #d9dd6b;
  text-decoration: underline;
}

/* END CONTACT */

/* START ENTRIES */

.entries{
  margin-top: 12rem;
}

.entries_title {
  font-size: 4rem;
  display: inline-block;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
  font-weight: bold;
}

.separation {
  color: darkgrey;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.entries h2 {
  color: #d9dd6b;
  text-decoration: underline;
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.entries  h3 {
  font-weight: bold;
  display: flex;
  color: darkgray;
  list-style-type: none;
}

.entries p {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  color: darkgray;
  list-style-type: none;
}

.list-unstyled {
  list-style-type: none;
}
.comment-list {
  list-style-type: none;
}
.avatar {
  border-radius: 50%;
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}
.list-unstyled {
  list-style: none;
}

/* END ENTRIES */


/* START ABOUT US */

.about_us{
  margin-top:10rem;
}

.about_us .about_img{
  display:none;
}

.heading {
  color: #D9DD6B;
}


.profile img{
  border-radius: 50%;
  width: 12rem;
  height: 12rem;
  object-fit: cover;
  filter: grayscale(90%);
  transition: .5s filter ease;
}

.profile img:hover{
  filter: grayscale(0);
}

.profile h5 {
  font-size: 18px;
  font-weight: 100;
  letter-spacing: 2px;
  color: #8D2828;
}

.profile p {
  font-size: 16px;
  margin-top: 15px;
  text-align: justify;
}


.user-name {
  margin-top: 30px;
  font-size: 35px;
  color: #D9DD6B;
}

/* END ABOUT US */



@media(min-width:576px){
  .expand img{
    display: block; 
  }
  .span-button{
    width: 8rem;
    height: 8rem;
  }
}

@media(min-width:768px){
  .container-fluid a{
    font-size: 1.7rem !important;
  }
  .main_title{
    font-size: 2.5rem;
  }
  .hero{
    height: 100vh;
  }
  .hero img{
    height: 100vh;
  }
  .overlay_text a{
    font-size: 4rem;
  }
  .post_video{
    display: inline-block;
  }
 .about_us .about_img{
   display: inline-block;
 }

}


