.adhesion-body { overflow: hidden !important; } .root { min-height: 100%; } .adhesion-container { background-color: black; height: 100%; width: 100%; min-height: 100%; height: 90vh; .video-presentation { height: 100%; iframe { width: 100%; height: 100%; } } } .adhesion { } .adhesion-footer { background-color: $background; width: 100%; height: 10vh; padding: 1rem 0; display: flex; justify-content: center; align-items: center; } .adhesion-btns { display: flex; justify-content: space-between; } .btn { background-color: white; opacity: 0.8; transition: 0.2s all; .btn__icon { margin-right: 1rem; width: 2rem; height: 2rem; } &:hover { opacity: 1; } } .subscribe-button { text-transform: uppercase; display: flex; justify-content: center; align-items: center; border-radius: 35px; color: black; text-decoration: none; padding: .7rem 2rem; } .socials { display: flex; list-style-type: none; padding: 0; margin: 0; li { background-color: white; border-radius: 50%; width: 3rem; height: 3rem; margin-right: 1rem; a { display: block; width: 100%; height: 100%; text-transform: uppercase; svg { display: block; padding: .7rem; fill: black; width: 100%; height: 100%; } } } } @media (max-width: $md-breakpoint) { .adhesion-container { height: 85vh; } .adhesion-footer { height: 15vh; } } @media (max-width: $xs-breakpoint) { .adhesion-container { height: 80vh; } .adhesion-footer { height: 20vh; .subscribe-button { margin-bottom: 1rem; } .adhesion-btns { flex-direction: column; } .socials { justify-content: center; } } }