.content {margin:20px; padding:1.5rem;}

section.colored-b{background-color: rgb(245, 242, 242);}

main img {
    display: block; margin: auto; 
    width: 70%; max-width: 350px;
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.55);
}

.video-area{ position: relative; width: 100%; height: 65vh; min-height: 500px;}

.color-overlay {
    position: absolute;
    top: 0;
    opacity: 0.2;
    height: inherit;
    width: inherit;
    min-height:inherit;
    background: #222fe6;
  }

video{object-fit:cover; width: 100%; min-height: inherit; height: inherit;}

.video-area h1{
    color:white;
    text-shadow: #000000 2px 5px 4px;
    font-size:2.3rem;
    position: absolute;
    text-align: center;
    top: 40%;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}

.banner{padding: 5rem; background-color: #000000; color:white;}

p a.btn{
    display:block;
    text-align: center;
    background-color:#000000;
    margin: auto;
    width: 8.5rem;
    text-decoration: none;
    color: aliceblue;
    border: 1px solid #000000;
    padding: 12px;
    cursor: pointer;
    transition: background-color .5s;
}

.btn:hover{
    display: block;
    margin: auto;
    background-color: whitesmoke;
    color: black;
    border: #000000 1px solid;
    transition: background-color .5s;
}

section h4, div h4{text-align: center;}

img[data-src] {filter: blur(0.2em);}
  
img {filter: blur(0em); transition: filter 0.5s;}

.valores div{margin: 0; padding: 0;}

@media only screen and (min-width: 40rem){
/* main section{font-size:1.1rem;} */

.video-area h1{font-size:3rem;}
.valores{display:flex; justify-content: center; align-items: center;}

div.grid{
    display: grid; 
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows:3rem 1fr 5rem; */
    grid-template-rows:3rem 1fr 5rem;
    justify-content: center;
}
    div.grid h2{grid-column: 1/3;}
    
    div.grid p{
        grid-column: 1/3; 
        overflow-wrap: break-word; 
        word-break:keep-all; 
        hyphens: auto;
    }
    
    div.grid img{
    width:80%; 
    grid-column: 3/5; 
    grid-row:1/3;
    align-self: center;
    justify-self: center;
}

.btn{width: 10rem;}

}

@media only screen and (min-width: 65rem ){
.content{max-width:75vw; margin: auto;}
main div.large-image p{max-width:75vw; margin: auto; margin-top:15px; margin-bottom:15px;}
.video-area{height: 77vh;}
video{object-fit:fill; height: inherit;}

div.grid{grid-template-rows:3rem .8fr 5rem;}

}