* {    transition: all 0.5s ease 0s;}
a {color:#000;}
body {font-family: 'Open Sans',  Arial ; margin:0;padding:0;text-align: center;color:#000; background: #fff; height: 100vh; background-attachment: fixed;background-size: auto;  background-size: cover;}
.page {max-width:1800px; max-width:1400px; margin:0 auto;}
.box {float:left;width:33%; position: relative;}
.container { padding:10px 20px;}
.container.header {}
.container.header img {}
.content {max-width: 1150px; margin:0 auto;}
.content p {text-align: justify;}
.box iframe {width:100%;}
.box img.ban {width:100%;}
.box img.logo {width:80%; position:absolute; 
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px #000;
    border: 3px solid #fff;
}
.footer {font-size: 12px; text-align: center; margin:20px 0px}
.ban {display:inline-block;}
.btn {     display: inline-block;
    text-decoration: none;
    background: #000;
    padding: 15px 25px;
    min-width: 170px;
    border: 2px solid #000;
    border-radius: 13px;
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    /* margin-top: -102px; */
    position: relative;
    top: -190px;}

img {margin:0; max-width:100%;}
h1 {font-weight:700; font-size:34px;}
.info {max-width:300px; padding:30px; background: rgba(255, 255, 255, 0.76);margin:calc(10vh) auto 0;}

p{} 

.box a:hover .ban {filter: grayscale(0.2);transform: scale(1.1)}
.box a:hover .logo {box-shadow: 0 0 15px #000; top:50%;width:90%;}

@media screen and (min-width:1100px){
        .img2, .img4 {Xmargin-top:120px;} 
}

@media screen and (max-width:900px){
        .box {width:100%;}
        img {max-width:100%;}
    
    
}