// === Intro === .intro { min-height: 250px; padding: 48% 0 0 0; background-color: #f2f3f5; overflow: hidden; position: relative; border-radius: 5px; box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.15); transform: translate3d(0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; &__trigger { max-width: 400px; left: 5%; bottom: 16%; color: #fff; position: absolute; z-index: 2; &Title { padding: 2px; line-height: 1.3; font-size: 20px; background-color: rgba(43, 112, 136, 0.8); box-shadow: 10px 0 0 #2b7088, -10px 0 0 #2b7088; text-shadow: 1px 2px #1f5c71; } &Btn { min-height: 40px; margin-top: 30px; padding: 16px 38px; background-color: rgba(43, 112, 136, 0.9); } } &__img { top: 50%; left: 50%; right: 0; bottom: 0; max-width: 1250px; min-height: 100%; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); pointer-events: none; position: absolute; display: block; z-index: 1; } } @media screen and (max-width: 425px) { .intro { &__trigger { &Btn { &:hover { background-color: #29687e; } } } } } // === Animations === @media screen and (min-width: 1024px) { .intro { animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: slideUp; &__trigger { &Title { line-height: 1.3; font-size: 30px; } } } }