/* Homepage -> Slider */ .slider { background-color: var(--secondary); height: calc(100vh - 2rem); width: 100%; z-index: 20; overflow: hidden; } .slider-container { display: flex; justify-content: space-between; align-items: center; width: 100%; height: calc(100vh - 2rem); z-index: 20; overflow: hidden; } .slider-container ul { padding: 0; } .morphist > * { display: none; } .morphist > .animated { display: inline-block; } .slider-text { flex: 50%; z-index: 20; } .slider-image { flex: 50%; background-color: var(--dark); background-size: contain; border-radius: 43% 57% 56% 44% / 40% 53% 47% 60%; -webkit-animation: slider-image 5s linear infinite; animation: slider-image 5s linear infinite; z-index: 20; } .slider-text, .slider-text h1, .slider-text h2, .slider-text h3, .slider-text h4 { color: #ffffff; } @-webkit-keyframes slider-image { 0%, 100% { border-radius: 43% 57% 56% 44% / 40% 53% 47% 60%; } 50% { border-radius: 64% 36% 56% 44% / 60% 69% 31% 40%; } } @keyframes slider-image { 0%, 100% { border-radius: 43% 57% 56% 44% / 40% 53% 47% 60%; } 50% { border-radius: 64% 36% 56% 44% / 60% 69% 31% 40%; } } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media (max-width: 991px) { .slider-container { flex-direction: column; } .slider-text { height: 60%; max-height: 60%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .slider-text h1, .slider-text h2, .slider-text h3 { line-height: 1.2; } .slider-text h1 { font-size: 1.8rem; } .slider-text h2 { font-size: 1.6rem; } .slider-text h3 { font-size: 1.4rem; } .slider-text .button-dark { padding: 0.6rem 1rem; border-radius: 6px; } .slider-image { height: 40%; max-height: 40%; display: flex; flex-direction: column; justify-content: center; } .slider-image img { max-height: 100% } }