#mainSubscribe { background-color: rgba(0, 0, 0, 0.6); background-image: url("../fotos/films.jpg"); background-blend-mode: multiply; background-size: cover; background-position: center; background-repeat: repeat-y; color: #ffffff; } #mainSubscribe-2 { background-image: linear-gradient(to bottom, rgb(55, 42, 82), rgb(0, 0, 0)); } .span-row { font-size: 30px; text-decoration: underline; } @media screen and (max-width: 576px) { .container { width: 100%; } .btn, .span-row { font-size: min(10vw, 25px); } } .btn { width: 248px; height: 50px; font-size: 25px; text-align: center; cursor: pointer; transition: 0.3s; } .btn:hover { transform: scale(1.1); } #img-1, #img-2, #img-3 { height: 320px; width: 220px; } .btn { position: relative; } .btn:after { content: ''; position: absolute; top: 50%; left: 50%; margin: -80px 0 0 -90px; width: 180px; height: 180px; border-radius: 50%; opacity: 0; box-shadow: inset 0 0 0 35px rgba(255, 255, 255, 0.7); display: none; } .btn.click:after { animation: animate-click 0.6s ease-out forwards; display: block; } @keyframes animate-click { 0% { opacity: 1; transform: scale3d(0.4, 0.4, 1); } 60% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1); opacity: 0.3; } 80% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1); opacity: 0.1; } 100% { opacity: 0; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1); transform: scale3d(1.2, 1.2, 1); } } #text-subscribe { height: 100%; width: 100%; font-family: url("/static/fonts/candara-light.ttf"); font-size: 65px; } /* .container { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .container span { text-transform: uppercase; } .text-1 { font-size: 90px; color: #ffffff; letter-spacing: 8px; margin-bottom: 20px; background: #000; animation: text-animation 3s 1; } .text-2 { font-size: 50px; color: azure; letter-spacing: 5px; } @keyframes text-animation { 0% { color: #000; margin-bottom: -40px; } 30% { letter-spacing: 30px; margin-bottom: -40px; } 80% { letter-spacing: 8px; margin-bottom: -40%; } } */ /* @import "bourbon"; span { margin: 0; padding: 0; } .orbs { font-family: 'Raleway', sans-serif; font-weight: 100; display: block; font-size: 128px; span { color: red; display: inline-block; text-align: center; border-radius: 50%; text-shadow: 0 0 20px orange, 1px 1px 20px orange, 2px 2px 20px orange, -1px -1px 20px orange, -2px -2px 20px orange; position: absolute; left: 50%; &:first-child { margin-left: -210px; } &:not(:first-child) { margin-left: -35px; } } } */