:root { --font: 'Mukta', sans-serif; --bg-color: #000; --color: #fff; } *, *:before, *:after, *:hover, *:focus { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } html { font-size: 16px; } body { font-family: var(--font); line-height: 1.35; font-weight: 400; font-size: 15px; color: var(--color); display: flex; flex-direction: column; justify-content: center; position: relative; -webkit-appearance: none; background-color: var(--bg-color); background-image: url('../images/bg.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; min-height: 100%; text-align: center; } body::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); } img { max-width: 100%; height: auto; } a { text-decoration: none; cursor: pointer; } .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: margin-top 1.3s ease-out; margin: 0; line-height: 1; } .logo svg { max-width: 620px; height: auto; transition: opacity 2s cubic-bezier(.07,.17,.65,1.28), transform 2s cubic-bezier(.07,.17,.65,1.28), max-width 1.3s ease-out; opacity: 0; transform: scale(0.15); } .logo.is-active { margin-top: -180px; } .logo.is-active svg { max-width: 240px; } .logo.is-visible svg { opacity: 1; transform: scale(1); } .bg-animation { z-index: 1; } .content { position: relative; z-index: 3; padding: 50px; max-width: 800px; margin-left: auto; margin-right: auto; } .splide { opacity: 0; transition: opacity 1s ease-in-out 0.25s, transform 0.8s ease-in-out; transform: scale(0.6); } .splide.is-visible { opacity: 1; transform: scale(1); } .splide__track { } .splide__list { } .splide__slide { display: flex; justify-content: center; align-items: stretch; flex-wrap: nowrap; } .splide__slide a { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; line-height: 1; position: relative; } .splide__slide a img { max-width: 460px; max-height: 460px; height: auto; object-fit: scale-down; transition: all 0.3s ease-in-out; } .splide__slide a:hover img { opacity: 0.25; } .splide__slide a:hover .btn { margin-top: 0; opacity: 1; } .btn { display: inline-flex; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; color: #232323; border-radius: 6px; background-color: #fff; font-weight: 400; padding: 11px 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 20px; opacity: 0; transition: all 0.4s ease-in-out; } .btn svg { fill: #232323; margin-left: 8px; width: 15px; height: auto; flex-shrink: 0; } .btn:hover { background-color: #FFCB00; } .btn:hover svg { } @media screen and (max-width: 799px), screen and (max-height: 480px) and (orientation: landscape), screen and (max-height: 419px) and (orientation: portrait) { .logo svg { max-width: 280px; transition: opacity 1.8s cubic-bezier(.07,.17,.65,1.28), transform 1.8s cubic-bezier(.07,.17,.65,1.28), max-width 1.1s ease-out; } .logo.is-active { margin-top: -130px; } .logo.is-active svg { max-width: 160px; } .content { padding: 30px; max-width: 360px; } .splide__slide a { flex-direction: column; } .splide__slide a img { opacity: 1 !important; max-width: 280px; max-height: 280px; } .btn { font-size: 14px; border-radius: 5px; padding: 9px 8px; position: static; top: initial; left: initial; transform: initial; margin-top: 10px !important; opacity: 1 !important; background-color: transparent !important; color: #fff !important; } .btn svg { fill: #fff; width: 12px; height: auto; flex-shrink: 0; position: relative; top: 1px; } } @media screen and (max-height: 419px) and (orientation: portrait) { .logo svg { max-width: 240px; } .logo.is-active svg { max-width: 125px; } .logo.is-active { margin-top: -110px; } .splide__slide a img { max-width: 250px; max-height: 250px; } }