#hero {
    height:100vh;
    width:100%;
    background:white;
    display:flex;
    align-items:center;
    justify-content: center;
}



#hero::after {
width:100%;
height:100%;
content: '';
position:absolute;
z-index:10;
top:0;
left:0;
background:rgba(0,0,0,0.5)
}


#hero video {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:5;
object-fit:cover;
font-family:'object-fit: cover';
}


#hero .texture {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:15;
background:url('../texture.png');
}


#hero .caption {

position:relative;
z-index:20;
text-align:center;
color:#ffffff;
}



#hero .caption h1 {

text-transform: uppercase;
font-size:2em;
font-family: 'Oswald', sans-serif;
margin-bottom:0.5rem;
}

#hero .caption h2 {
font-weight:400;
font-size:1.5rem;
margin:0;
font-family: 'PT Sans', sans-serif;
}




@media screen and (min-width:768px)
{
#hero .caption h1 {
    font-size:2.5rem;
}

#hero .caption h2 {
    font-size:1.75rem;
}
}




@media screen and (min-width:992px)
{
#hero .caption h1 {
    font-size:3rem;
}

#hero .caption h2 {
    font-size:2rem;
}
}



@media screen and (min-width:1200px)
{
#hero .caption h1 {
    font-size:4rem;
}

#hero .caption h2 {
    font-size:2.5rem;
}
}



.TitleCliente{
    text-align:center;
    font-size:40px;
    color:#6A6A6A;
    margin-top:100px;
    font-weight:100;
    font-family: 'Roboto', sans-serif;
}

.ContainerCard{
    width:100%;
    max-width:1200px;
    display:flex;
     flex-wrap:wrap;
    justify-content:center;
    margin:auto;
    margin-top: 2rem;
    height:auto;
}
/*.ContainerCard{
    width:100%;
    max-width:1200px;
    height:430px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:auto;
    margin-top: 10rem;
}*/

/*.row{
    width:100%;
    max-width:1200px;
    height:430px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:auto;
}*/

.ContainerCard .card{
    width:470px;
    height:470px;
    border-radius:8px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    overflow:hidden;
    margin:20px;
    text-align:center;
    transition:all 0.25s;
}

.ContainerCard .card:hover{
    transform:translateY(-15px);
    box-shadow: 0 12px 16px rgba(0,0,0,0.2);
}

.ContainerCard .card img{
    width:350px;
    height:320px;
    margin-bottom: 15px;
}

.ContainerCard .card h4{
    font-weight:600;
}

.ContainerCard.card p{
    padding:0 1rem;
    font-size:16px;
    font-weight:300;
}

.ContainerCard .card a{
    font-weight:500;
    text-decoration: none;
    color:#3498db;
}
.ContainerCard .card h3{
   font-weight:400;
    text-decoration: none;
    color:#586072;
}

/* Contactame */
* {
    box-sizing: border-box;
}

/* body {
    background: #fff;
    color: #fff;
    line-height: 1.6;
    font-family: 'Quicksand', sans-serif;
    padding: 0 1.5em;
} */

#lu li{
    margin-bottom: 20px;
    right: 50px;
    color: white;
}

.container-contactame {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em;
}

ul {
    list-style: none;
    padding: 0;
}



.logo {
    text-align: center;
    font-size: 3em;
}

.logo span {
    color: #B70E21;
}

.contact-wrapper {
    box-shadow: 0 0 20px 0 rgba(255, 255, 255, .3);
}

.contact-wrapper > * {
    padding: 1em;
}

.contact-form {
    background: #0C223F;
}

.contact-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contact-form form label {
    display: block;
    color: white;
}
.contact-form h3{
    color: white;
}

.contact-form form p {
    margin: 0;
    padding: 1em;
}

.contact-form form .block {
    grid-column: 1 / 3;
}

.contact-form form button,
.contact-form form input,
.contact-form form textarea {
    width: 100%;
    padding: .7em;
    border: none;
    background: white;
    outline: 0;
    color: black;
    border-bottom: 1px solid #ffffff;
    
}

.contact-form form button {
    background: #3767cf;
    border: 0;
    text-transform: uppercase;
    padding: 1em;
}

.contact-form form button:hover,
.contact-form form button:focus {
    background: #fffefe;
    color: rgb(0, 0, 0);
    transition: background-color 1s ease-out;
    outline: 0;
}

/* CONTACT INFO */
.contact-info {
    background: #222120;
}

.contact-info h4, .contact-info ul, .contact-info p {
    text-align: center;
    margin: 0 0 1rem 0;
}

/* LARGE SIZE */
@media(min-width: 700px) {
    /*body {
        padding: 0 4em;
    }*/
    .contact-wrapper {
        grid-template-columns: 2fr 1fr;
    }
    .contact-wrapper > * {
        padding: 2em;
    }
    .contact-info h4,
    .contact-info ul,
    .contact-info p {
        text-align: left;
    }
}

/* Content video */
/* ::selection{
    background: rgba(23,162,184,0.3);
  }
  .hola{
      max-width: 1000px;
      height: auto;
          margin: auto;
          overflow: auto;
          padding: 0 2rem;
          margin-top: 3rem;
          border:solid 1px #171ab8
  } 
  
  .hola nav{
    position: relative;
    width: 80%;
    height: 50px;
    display: flex;
    align-items: center;
  }
  .hola nav label{
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: #17a2b8;
    font-size: 17px;
    border-radius: 5px;
    margin: 0 5px;
    transition: all 0.3s ease;
  }
  .hola nav label:hover{
    background: rgba(23,162,184,0.3);
  }
  #home:checked ~ nav label.home,
  #blog:checked ~ nav label.blog,
  #code:checked ~ nav label.code,
  #help:checked ~ nav label.help{
    color: #fff;
  }
  nav label i{
    padding-right: 7px;
  }
  nav .slider{
    position: absolute;
    height: 100%;
    width: 25%;
    left: 0;
    bottom: 0;
    z-index: 0;
    border-radius: 5px;
    background: #17a2b8;
    transition: all 0.3s ease;
  }
  input[type="radio"]{
    display: none;
  }
  #blog:checked ~ nav .slider{
    left: 25%;
  }
  #code:checked ~ nav .slider{
    left: 50%;
  }
  #help:checked ~ nav .slider{
    left: 75%;
  }
   #about:checked ~ nav .slider{
    left: 80%;
  } 
  section .content{
    display: none;
    background: #fff;
  }
  #home:checked ~ section .content-1,
  #blog:checked ~ section .content-2,
  #code:checked ~ section .content-3,
  #help:checked ~ section .content-4{
    display: block;
  }
  section .content .title{
    font-size: 21px;
    font-weight: 500;
    margin: 30px 0 10px 0;
  }
  section .content p{
  text-align: justify;
  }
  
  section img{
  padding: 2rem;
  height: 100px;
  } 
  
  
  @media screen and (min-width:1100px) {
      .section {
          flex-wrap: wrap;
      }

      
  }


  @media only screen and (min-width: 375px){

    nav .slider{
        position: absolute;
        height: 100%;
        width: 42%;
        left: 50;
        bottom: 0;
        z-index: 0;
        border-radius: 5px;
        background: #17a2b8;
        transition: all 0.3s ease;
      }

     
    #home:checked ~ nav .slider{
        left: 0%;
      }
    #blog:checked ~ nav .slider{
        left: 39%;
      }
      #code:checked ~ nav .slider{
        left: 85%;

      }
      #help:checked ~ nav .slider{
        left: 91%;
      }

      #home{
        font-size: 0vh
      }
      .hola nav label{
        display: block;

        z-index: 1;

        font-size: 17px;
        border-radius: 5px;
        margin: 0 5px;
        transition: all 0.3s ease;
      }
  } */


  .video-responsive {
    position: relative;
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0;
    overflow: hidden;
    }
    
    .video-responsive iframe,
    .video-responsive object,
    .video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    } 
  
  
    .video-responsive2 {
      position: relative;
      padding-bottom: 56.25%; /* 16/9 ratio */
      padding-top: 30px; /* IE6 workaround*/
      height: 0;
      overflow: hidden;
      }
      
      .video-responsive2 iframe,
      .video-responsive2 object,
      .video-responsive2 embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 90%;
      height: 90%;
      } 


    .container-vid{
        width: auto;
        height: 70vh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 10%;
    }
    
    .container-vid .slider{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    
    .container-vid ul{
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }
    
    .container-vid ul li{
        list-style: none;
        cursor: pointer;
        margin: 10px;
    }
    
    
    .container-vid ul li video{
        width: 100px;
        transition: all 0.3s;
    }
    .container-vid ul li video:hover{
        transform: scale(1.1);
    }
    
    video{
        width: 60%;
        height: 60%;
    }
    
    
    @media only screen and (max-width: 1000px) {
    .container-vid{
        max-width: 100%;
        height: 50vh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    video{
        width: 40%;
        height: 40%;
    }
    
    .container-vid .slider{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .container-vid ul li video{
        width: 70px;

        transition: all 0.3s;
    }
    
    .container-vid ul{
        position: absolute;
        bottom: 260px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }
    }

    /* Asociaciones */
    .Container-relacion-all {
        width: 100%;
        max-width: 1350px;
        margin: auto;
        padding: 40px;
        margin-bottom:0px;
    }
    
    .Container-relacion-all h1{
      text-align: center;
    }
    .Container-relacion-all p{
      text-align: center;
      font-size: 2rem;
    }
    
    
    .Container-body-relacion {
        display: flex;
        justify-content: space-between;
    }
    
    .Column1-Relacion {
        max-width: 600px;
        /* background:black; */
    }
    
        .Column1-Relacion h1 {
            font-size: 22px;
        }
    
        .Column1-Relacion p {
            font-size: 14px;
            color: #C7C7C7;
            margin-top: 20px;
        }
    
    
        .Column2-Relacion {
          max-width: 600px;
          /* background:yellow; */
      }
      
          .Column2-Relacion h1 {
              font-size: 22px;
          }
      
          .Column2-Relacion p {
              font-size: 14px;
              color: #C7C7C7;
              margin-top: 20px;
          }
    
    
    
          .Column3-Relacion {
            max-width: 600px;
            /* background:yellow; */
        }
        
            .Column3-Relacion h1 {
                font-size: 22px;
            }
        
            .Column3-Relacion p {
                font-size: 14px;
                color: #C7C7C7;
                margin-top: 20px;
            }
    
            .row-Relacion{
              margin-top: 20px;
              display: flex;
          }
            .row-Relacion img {
              width: 400px;
              height: 200px;
          }
      
    
            @media screen and (max-width:1100px) {
              .Container-body-relacion {
                  flex-wrap: wrap;
              }
          
              /*.Column1{
              max-width:100px;
          }*/
          .Column1-Relacion{
            margin-top: 40px;
          }
          
              .Column2-Relacion, .Column3-Relacion {
                  margin-top: 40px;
              }
              .row-Relacion img {
        width: 350px;
        height: 180px;
    }
          }
          
          
          
          /* Soluciones */
          

        #body {
            margin-top: 65px;
        }

        .container p {
            font-size: 2em;
        }

        #formulario {
            color: white;
        }
        #Error{
            color: red;
        }
        #lu li{
            margin-bottom: 20px;
            right: 50px;
            color: white;
        }



        #container-content {
            max-width: 1100px;
            margin: auto;
            overflow: auto;
            padding: 0 2rem;
            margin-top: 3rem;
            background: white;
        }

        .main-header {
            height: 55vh;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;

        }

        .main-header h1 {
            font-size: 4rem;
            margin-bottom: 2rem;
            line-height: 1.2;
        }

        .main-header h1 span {
            color: #b50d10;
        }

        .main-header p {
            font-size: 2rem;
        }

        img {
            width: 100%;
        }

        .cardEmpresa {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 2rem;
            background: white;
            margin-bottom: 2rem;
        }

        .cardEmpresa h3 {
            margin-bottom: 2rem;
        }

        .cardEmpresa img {
            height: 400px;
        }

        .cardEmpresa>div {
            padding: 2rem;
        }

        .cardEmpresa:nth-child(even) img {
            order: 2;
        }
        #lis{
            color: black;
            margin-bottom: 5px;
        }

        @media(max-width:600px) {
            .cardEmpresa {
                display: block;
            }

             .cardEmpresa img {
                height: 300px;
                width: 300px;
            } 

            
        }

        #relacion {
            margin: 0 0 25px;
        }
        
        #mapa {
            margin-top: 50px;
        }