/*!
 * Start Bootstrap - Scrolling Nav (https://startbootstrap.com/template/scrolling-nav)
 * Copyright 2013-2020 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-scrolling-nav/blob/master/LICENSE)
 */


 a {
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

img.fluid{
    max-width:100%;
    height: auto;
}


section {
  padding: 100px 0;
}

@media (max-width: 768px){
  section{
    padding: 50px 0;
  }
}

/*HEADER*/
.wrapper-logo-konig img{
  width: 100px;
  margin-bottom: 10px;
}

@media (max-width: 768px){
  .wrapper-logo-konig img{
    max-width: 60px;
  }
}

.navbar{
  background-color: white;
}

.navbar-nav .nav-link{
  color: #c20e1a;
  font-weight: 400;
  font-size: 1.2rem;
  border-bottom: white solid 2px;
}

.navbar-nav .nav-link:hover{
  color: #333;  
}

.navbar-nav .active{
  /*background-color: rgba(194, 14, 26, .8);
  border-radius: 5px;
  color:white;*/
  border-bottom: #000 solid 2px;
  color: black
}

.navbar-brand{ 
  max-width: 350px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px){
  .navbar-brand{ 
    max-width: 200px;
  }
}

.navbar-brand span{
  white-space: normal;
  font-size: 15px;
  margin-top: 10px;
  color: gray;
}

@media (min-width: 992px){
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .7rem;
    padding-left: .7rem;
  }
}

.navbar-toggler{
  background-color: #c20e1a;
}

.navbar-toggler-icon img{
  width: 25px;
}

/*GENERICS*/
body{
  font-family: 'Helvetica Neue';
  padding-top: 50px;
}

.primary-color{
  color: #c20e1a;
}

h2{
  font-weight: 100;
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 20px;
}

h2 span{
  font-weight: 800;
}

p{
  font-size: 24px;
  font-weight: 400;
}

/*TOP SECTION*/
.top-section{
  background: url(../images/hemovac-top-image.jpg) no-repeat center center;
  background-size: cover;
  min-height: 500px;
}

/*TRISTEZA*/
.tristeza{
  background: url(../images/bg-section-tristeza.jpg) no-repeat center top;
  background-size:cover;
  color: white;
  position: relative;
}

.tristeza h2{
  z-index: 5;
  position: relative;
}

.tristeza p{
  z-index: 10;
  position: relative;
}

/*CONSECUENCIAS*/
.consecuencias{
  padding: 100px 0;
  background: url(../images/bg-section-consecuencias.jpg) no-repeat center top;
  background-size: cover;
}

.consecuencias .card{
  color: white;
  padding: 20px 15px;
  border: inherit;
  background-color: transparent;
}

.consecuencias .card::after{
  content: "";
  background-color: rgba(227, 5, 20, .5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: -10px;
  top: 0px;
  z-index: 1;
  border-radius: 15px;
  transform:skewX(-5deg);
}

.boxs-section{
  margin-top: 150px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  justify-content: space-around;
  gap: 5px;
}

.card h3{
  text-transform: uppercase;
  font-size: 1.4rem;
  min-height: 50px;
}

.card h3, .card p{
  position: relative;
  z-index: 5;
}

.card p{
  margin-bottom: 0px;
}


@media (max-width: 1200px){
  .boxs-section{
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 100%);   
    gap: 20px;
    justify-content: space-between;
  }

  .card h3{    
    min-height: inherit;
  }
  
}


/*
.card p{
  font-size: 1.15rem;
  margin-bottom: 0px;
  font-weight: 300;
  line-height: 1.4;
}
*/

/*HEMOVAC*/
.hemovac{
  padding: 100px 0;
  background: url(../images/bg-actua.jpg) no-repeat center top;
  background-size: cover;
}

.hemovac h2, .hemovac p{
  color: white;
}

/*VACUNAR*/
.vacunar{
  background-color: rgba(0, 0, 0, .05);
}


/*TESTIMONIOS*/
.wrapper-videos .embed-responsive{
  margin-bottom: 30px;
  background-color: rgba(0, 0, 0, .05);
}

/*CONTACTO*/
.contact{
  color: white;
  background-color: #c20e1a;
}

.contact h2{
  color: white;
}

.contact label{
  font-size: 1.2rem;
}

.contact .btn-primary{
  background-color: black;
  border-color: black;
  font-size: 1.25rem;
}

.form-control:focus{
  border-color: black;
  box-shadow: none;
}

.invalid-feedback{
  color: yellow;
}

/*FOOTER*/
footer{
  background-color: #343a40;
  padding: 20px 0!important;    
}

footer p{
  font-size: 1rem;
}

/*WHATSAPP*/
.btn-whatsapp {
  color: white;
  background-color: #00b66c;
  display: flex;
  padding: 8px 15px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  align-items: center;
  justify-content: center;
  max-width: 280px;
  position: fixed;
  right: 0px;
  top: 15px;
  bottom: auto;
  z-index: 5000;
}

@media (max-width: 992px){
  .btn-whatsapp{
    bottom: 20px;
    top: auto;
  }
}

.btn-whatsapp:hover{
  background-color: #c20e1a;
}

.btn-whatsapp img{
  width: 25px;
}

/*ANCLAS*/
.ancla{
  padding-top: 130px;
  margin-top: -30px;
  /*display: none;*/
}