/*Basics*/
:root {
    --cyan: #48c6b8;
    --orange: #e77817;
    --bubble: linear-gradient(180deg, rgba(255,203,2,1) 0%, rgba(246,141,31,1) 100%);
    --green: #a1b512ff;
}

.overflow-hidden {
    overflow: hidden;
}

.position-relative {
    position: relative;
}

.mt {
    margin-top: 3rem;
}

.mirror {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.orng {
    background-color: var(--orange)!important;
    color: white!important;
    font-weight: bold;
}

.cya {
    color: white!important;
    background-color: var(--cyan)!important;
    font-weight: bold;
}

.white {
    color: var(--orange)!important;
    font-weight: bold;
}

.play-ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    -webkit-mask-image: url("/media/case-study/lion/icons/play-button.svg");
    mask-image: url("/media/case-study/lion/icons/play-button.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--orange);
    margin-right: 5px;
    transition: transform 250ms ease;
}

.case-section-tag .content a:hover {
    text-decoration: none;
}

.bubble {
    text-align: center;
    color:black;
    font-weight: 700;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    background: var(--bubble);
}

.main {
    overflow-x: hidden;
}

.img-responsive {
    width: 100%;
    display: block;
}

body {
    overflow-x: hidden;
}

.quick-ref-links {
    position: relative;
    z-index: 5;
}

/*Header*/
header {
    position: relative;
    overflow: hidden;
    padding-top: 10rem;
    background-color: white;
    z-index: 3;
}

.h__text {
    color: var(--cyan);
    width: fit-content;
    display: block;
    text-align: center;
}

.h__text h1 {
    font-size: max(7rem, 20vw);
    margin: 0;
    letter-spacing: .0625rem;
}

.h__text p {
    font-size: max(2rem, 2.5vw);
    margin: -1vw 0 0 1vw;
    font-weight: 300;
    line-height: 1.2;
}

.h__dino-monolog {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 5rem 0;
    gap: 4%;
}

.h__dino-monolog img {
    width: 40%;
}

.h__dino {
    position: absolute;
    display: none;
    width: max(45%, 30rem);
    max-width: 1400px;
    height: auto;
    bottom: 20%;
    left: -2%;
    transform: scaleX(-1) rotate(20deg);
    animation: FlyDino 1s;
}

.h__dino-monolog .bubble {
    clip-path: polygon( 74.716% 99.986%,74.716% 99.986%,75.832% 99.816%,76.909% 99.318%,77.935% 98.513%,78.897% 97.42%,79.786% 96.06%,80.588% 94.451%,81.294% 92.616%,81.891% 90.572%,82.368% 88.34%,82.714% 85.94%,85.933% 64.75%,100% 54.346%,88.971% 44.732%,92.252% 23.133%,92.252% 23.133%,92.498% 19.454%,92.423% 15.884%,92.055% 12.497%,91.42% 9.367%,90.548% 6.566%,89.465% 4.167%,88.199% 2.245%,86.778% 0.872%,85.228% 0.121%,83.578% 0.066%,7.574% 14.212%,7.574% 14.212%,6.086% 14.797%,4.715% 15.937%,3.481% 17.569%,2.404% 19.632%,1.501% 22.064%,0.793% 24.804%,0.299% 27.789%,0.038% 30.959%,0.028% 34.251%,0.29% 37.603%,8.846% 86.264%,8.846% 86.264%,9.205% 88.618%,9.691% 90.804%,10.292% 92.805%,10.997% 94.6%,11.795% 96.171%,12.676% 97.499%,13.628% 98.565%,14.641% 99.349%,15.704% 99.834%,16.806% 100%,74.722% 100% );
    font-size: max(5vw, 25px);
    padding: 3% 7% 3% 6%;
    opacity: 0;
    animation: FadeIn 1s ease-in-out forwards;
    animation-delay: 1s;
}

.quote {
    text-align: center;
}

.quote q{
    font-size: 3.5rem;
    color: var(--cyan);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    display: block;
}


.quote q::before, blockquote.bubble p::before  {
    content: "„";
}

.quote q::after, blockquote.bubble p::after  {
    content: "”";
}


.mission {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--cyan);
    grid-gap: 0;
    justify-content: center;
    padding: 3rem;
}

.mission.hid .mission__item {
    opacity: 0;
}

.mission.anim .mission__item {
    animation: FlyIn 1s forwards;
}

.mission.anim .mission__item:nth-of-type(2) {
    animation-delay: .5s;
}

.mission.anim .mission__item:nth-of-type(3) {
    animation-delay: 1s;
}

.jumbotron--m {
    background-color: var(--cyan);
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.jumbotron--m p {
    font-weight: 300;
}

.quote h2 {
    margin-bottom: -1.5rem;
    font-size: 6rem;
}

.mission__item {
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    font-size: 22px;
}

.mission__item img {
    height: 60px;
}

.container-fluid::before, .container-fluid::after {
    content: none;
}

/*Mission description*/

.mission-desc p, .dino-game p {
    font-size: 2.5rem;
    color: var(--cyan);
    font-weight: 300;
}

.dino-head svg {
    width: 55%;
    height: auto;
    float: right;
    margin-top: 5rem;
    opacity: 0;
    position: relative;
}

.dino-head .bubble {
    position: absolute;
    flex-direction: column;
    font-size: max(1.5vw, 12px);
    line-height: 98%;
    opacity: 0;
}

.dino-head.anim svg {
    animation: FlyLeft 1s forwards;
}

.dino-head p {
    opacity: 0;
}

.dino-head.anim p {
    animation: FlyRight 1s forwards;
}

.dino-head.anim .bubble {
    animation: FadeIn 1s forwards;
}

.dino-head .bubble:nth-of-type(1) {
    clip-path: polygon( 73.059% 100%,73.059% 100%,74.123% 99.865%,75.15% 99.469%,76.128% 98.828%,77.048% 97.958%,77.898% 96.874%,78.669% 95.591%,79.349% 94.126%,79.929% 92.493%,80.396% 90.707%,80.742% 88.786%,84.647% 61.298%,100% 48.851%,86.847% 45.797%,88.993% 30.699%,88.993% 30.699%,89.246% 27.961%,89.237% 25.274%,88.984% 22.686%,88.507% 20.249%,87.824% 18.012%,86.953% 16.027%,85.913% 14.342%,84.722% 13.01%,83.399% 12.079%,81.963% 11.601%,8.619% 0.053%,8.619% 0.053%,7.026% 0.101%,5.531% 0.716%,4.159% 1.839%,2.937% 3.409%,1.892% 5.367%,1.05% 7.654%,0.438% 10.209%,0.082% 12.972%,0.01% 15.884%,0.247% 18.885%,9.453% 88.521%,9.453% 88.521%,9.786% 90.48%,10.247% 92.303%,10.823% 93.971%,11.504% 95.47%,12.279% 96.783%,13.136% 97.894%,14.065% 98.786%,15.055% 99.443%,16.094% 99.849%,17.172% 99.988%,73.066% 99.988% );
    bottom: 60%;
    padding: 2% 5% 2% 2%;
    right: 55%;
    animation-delay: .75s;
}

.dino-head .bubble:nth-of-type(2) {
    clip-path: polygon( 82.038% 99.988%,82.038% 99.988%,82.797% 99.849%,83.529% 99.443%,84.226% 98.786%,84.88% 97.894%,85.484% 96.783%,86.029% 95.47%,86.509% 93.971%,86.914% 92.303%,87.239% 90.48%,87.474% 88.521%,88.865% 73.584%,100% 73.942%,90.198% 59.27%,93.956% 18.886%,93.956% 18.886%,94.123% 15.882%,94.072% 12.968%,93.821% 10.203%,93.391% 7.647%,92.798% 5.36%,92.062% 3.402%,91.201% 1.833%,90.235% 0.712%,89.182% 0.099%,88.061% 0.054%,5.147% 11.602%,5.147% 11.602%,4.136% 12.081%,3.204% 13.011%,2.366% 14.343%,1.634% 16.028%,1.02% 18.013%,0.539% 20.25%,0.203% 22.687%,0.026% 25.275%,0.019% 27.962%,0.197% 30.7%,6.011% 88.786%,6.011% 88.786%,6.256% 90.708%,6.586% 92.493%,6.994% 94.126%,7.473% 95.591%,8.016% 96.874%,8.614% 97.958%,9.261% 98.828%,9.95% 99.469%,10.672% 99.865%,11.421% 100%,82.042% 100% );
    bottom: 75%;
    padding: 2% 4% 1% 3%;
    right: 55%;
    animation-delay: 1.25s;
}

.dino-head .bubble:nth-of-type(3) {
    clip-path: polygon( 10.574% 64.483%,10.574% 64.483%,10.948% 66.366%,11.464% 68.117%,12.109% 69.721%,12.872% 71.161%,13.74% 72.423%,14.7% 73.49%,15.74% 74.347%,16.849% 74.979%,18.013% 75.369%,19.22% 75.503%,43.702% 75.503%,49.464% 100%,54.819% 75.503%,81.833% 75.503%,81.833% 75.503%,83.024% 75.373%,84.174% 74.992%,85.27% 74.377%,86.3% 73.541%,87.253% 72.499%,88.116% 71.266%,88.878% 69.858%,89.527% 68.289%,90.051% 66.574%,90.438% 64.727%,99.686% 29.498%,99.686% 29.498%,99.969% 26.868%,99.959% 24.286%,99.677% 21.799%,99.142% 19.457%,98.377% 17.308%,97.402% 15.4%,96.237% 13.782%,94.903% 12.501%,93.421% 11.607%,91.812% 11.148%,9.654% 0.051%,9.654% 0.051%,7.87% 0.097%,6.195% 0.688%,4.658% 1.767%,3.29% 3.276%,2.119% 5.158%,1.176% 7.355%,0.491% 9.81%,0.092% 12.465%,0.011% 15.263%,0.277% 18.147%,10.588% 64.472% );
    top: 2%;
    padding: 2% 3% 4% 4%;
    right: 36%;
    animation-delay: 1.75s;
}

.dino-head .bubble:nth-of-type(4) {
    clip-path: polygon( 99.723% 15.331%,99.723% 15.331%,99.989% 12.893%,99.908% 10.527%,99.51% 8.282%,98.824% 6.208%,97.881% 4.351%,96.711% 2.762%,95.342% 1.488%,93.806% 0.578%,92.131% 0.08%,90.347% 0.044%,8.187% 9.409%,8.187% 9.409%,6.578% 9.797%,5.097% 10.552%,3.763% 11.634%,2.598% 13.001%,1.623% 14.613%,0.858% 16.429%,0.323% 18.407%,0.041% 20.508%,0.031% 22.689%,0.314% 24.911%,9.561% 72.064%,9.561% 72.064%,9.95% 73.624%,10.475% 75.073%,11.124% 76.398%,11.886% 77.588%,12.749% 78.629%,13.701% 79.509%,14.731% 80.216%,15.826% 80.736%,16.975% 81.057%,18.166% 81.167%,32.383% 81.167%,29.573% 100%,42.815% 81.167%,80.774% 81.167%,80.774% 81.167%,81.982% 81.054%,83.146% 80.724%,84.254% 80.191%,85.294% 79.467%,86.255% 78.565%,87.122% 77.499%,87.885% 76.282%,88.53% 74.928%,89.046% 73.449%,89.42% 71.858%,99.73% 15.331% );
    top: 5%;
    padding: 3% 3% 5% 3%;
    right: 9%;
    animation-delay: 2.25s;
}

/* Logo a symbol */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.card img {
    max-width: 100%;
    height: min(100px, 15vw);
}

.card:nth-of-type(2) {
    margin-top: 5rem;
}

.dino--aside {
    display: none;
    width: 40%;
    height: auto;
    position: absolute;
    opacity: 0;
}

.dino--aside:nth-of-type(1) {
    left: -20vw;
    top: -50%;
}

.dino--aside.anim:nth-of-type(1) {
    animation: FlyRight 1s forwards;
}

.dino--aside:nth-of-type(2) {
    right: -30vw;
    bottom: 0;
}

.dino--aside.anim:nth-of-type(2) {
    animation: FlyLeft 1s forwards;
    animation-delay: .5s;
}

/* Webovky jako vino */
.web, .logoNsymbol, .dino-head, .brand, .mission-desc, .ofln, .dino-game { position: relative; z-index: 1;}

.web-window .web-window__bar {
    display: flex;
    width: 100%;
    min-height: 38px;
    background-color: #c0c0c0;
    gap: 10px;
    align-items: center;
    z-index: 2;
    position: relative;
    box-shadow: 0 12px 20px -8px rgba(0,0,0,0.15) inset;
    padding-left: 20px;
}

.web-window .web-window__bar .point {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f5f5f5;
}

.web p, .hory-text p, .ofln p, .brand p {
    margin-top: 3rem;
}

.web-window {
    aspect-ratio: 16/9;
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
    filter: drop-shadow(0px 0px 10px #d6d6d6);
}

.web-window__img {
    width: 100%;
    min-width: 100%;
    object-fit: contain;
}

.row.anim .web-window .web-window__img {
    animation: web-scroll 17500ms ease-in-out infinite;
}

.web__dino-head {
    display: none;
    position: absolute;
    overflow: hidden;
    top: -75%;
    left: 3%;
    width: 35%;
    height: auto;
    opacity: 0;
}

.row.anim .web__dino-head {
    opacity: 1;
    animation: FlyUp 1s;
}

.orng-card, .card h3 {
    background: #f3731a;
    color: white;
    padding: 1rem 2rem;
    border-radius: 10px;
}

.orng-card--wine {
    position: absolute;
    margin-left: 1rem;
    transform: rotate(-2deg);
    font-size: 5rem;
    padding: .5rem 2rem;
    margin-top: -.5rem;
    color: black;
    background: var(--bubble);
}

.dino--wine {
    display: none;
    position: absolute;
    height: 100%;
    width: auto;
    transform: rotate(10deg);
    right: -80%;
    top: -15%;
}

.brand-animation {
    border: 1px solid black;
    border-radius: 1rem;
}

/*socials*/

.hory {
    position: relative;
}

.hory .hory__layer {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    transform: translateY(-99%);
}

.socky {
    position: relative;
}

.socky__dino {
    position: absolute;
    width: 50%;
    height: auto;
    z-index: 4;
    right: 50%;
    top: -7%;
    transform: translateX(50%);
    max-height: 1000px;
}

.hory .hory__layer:nth-child(1) {
    z-index: 1;
}

.hory .hory__layer:nth-child(2) {
    z-index: 2;
}

.hory .hory__layer:nth-child(3) {
    z-index: 3;
}

.hory__trava {
    position: absolute;
    width: 100%;
    height: 35vh;
    bottom: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(161,181,16,1) 75%, rgba(255,255,255,1) 100%);
    transform: translateY(99%);
}

.hory-text {
    margin-bottom: min(50%, 25rem);
    margin-top: 10rem;
}

.posts {
    position: relative;
    margin-top: 8rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    z-index: 4;
}

.posts picture {
    opacity: 0;
    -webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.1));
    filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.1));
}

.posts.anim picture {
    animation: FlyUp 1s forwards;
}


.posts picture:nth-of-type(2) {
    margin-top: 10rem;
    animation-delay: .5s;
}

.posts picture:nth-of-type(3) {
    margin-top: 5rem;
    animation-delay: 1s;
}

.posts::before {
    content: none;
}

/*offline*/

.swiper {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    border-radius: 25px;
    margin-bottom: 5rem;
}

.swiper-pagination {
    scale: 1.2;
}

.swiper-pagination-bullet-active {
    background-color: var(--orange);
}

.videos {
    position: relative;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    height: auto;
}

.swiper-slide > img {
    display: block;
    width: 100%;
}

.swiper-button-prev {
    left: 4%;
}
.swiper-button-next {
    right: 4%;
}

.swiper-button-prev,
.swiper-button-next {
    color: white;
}

/*Game*/

.dino-game {
    margin-bottom: max(40%, 45rem);
}

.dino-game__controls img {
    display: none;
}

.dino-game__screen {
    position: relative;
    min-height: 150px;
    z-index: 5;
}

.dino-game__tooltip {
    content: "i";
    font-size: 2rem;
    background: var(--bubble);
    border-radius: 20px;
    position: absolute;
    z-index: 10;
    right: -1rem;
    bottom: -5rem;
    color: black;
    font-weight: bold;
    padding: 5px 17px;
    cursor: help;
}

.dino-game__lable{
    color: black;
    position: absolute;
    right: 0;
    bottom: -97px;
    font-weight: bold;
    border-radius: 10px;
    background: var(--bubble);
    padding: 1rem;
    font-size: .7em;
    z-index: 3;
    transition: .3s ease all;
    width: 100%;
    opacity: 0;
}

.dino-game__tooltip:hover ~ .dino-game__lable, .dino-game__tooltip:focus ~ .dino-game__lable {
    opacity: 1;
}

/*CEO ref*/

.ceo-ref {
    position: relative;
}

.ceo-ref .container-fluid {
    position: relative;
    z-index: 2;
    background-color: var(--green);
}

.ceo-ref .container-fluid > .row {
    padding-top: 5rem;
    padding-bottom: 20%;
}

.ceo-ref__text {
    text-align: center;
}

.ceo-ref__text p {
    font-size: 3rem;
    color: white;
    font-weight: 900;
}

.ceo-ref__text a {
    text-decoration: none!important;
    display: inline-block;
    background-color: var(--green);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 2rem;
    padding: 1.5rem 3rem;
    font-size: 2.25rem;
    transition: transform 300ms ease, background-color 300ms ease;
    font-weight: 300;
    text-align: center;
}

.ceo-ref__text a:hover {
    color: var(--green);
    background-color: #fff;
}

.ceo-ref .ceo-ref__layer {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    transform: translateY(-97%);
}

.ceo-ref .ceo-ref__layer:nth-of-type(1) {
    z-index: 1;
    transform: translateY(-104%);
}

.ceo-ref .ceo-ref__layer:nth-of-type(2) {
    z-index: 2;
}

.ceo-ref-land {
    position: absolute;
    top: 0;
    z-index: 4;
    display: flex;
    transform: translateY(-100%);
    justify-content: center;
    flex-direction: column;
    gap: 5rem;
}

.ceo-ref-land__house {
    width: 25%;
    height: auto;
    align-self: flex-end;
}

.ceo-ref-land__bubble {
    position: relative;
    border-radius: 25px;
    border: none;
    flex-direction: column;
    align-items: start;
    text-align: start;
    padding: 2rem;
    align-self: center;
    width: fit-content;
    margin: 0;
    opacity: 0;
}

.ceo-ref-land.anim .ceo-ref-land__bubble {
    animation: FadeIn 1s forwards;
}

.ceo-ref-land__bubble::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 3rem;
    bottom: -2rem;
    right: 3rem;
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    border-top: 3rem solid #f68d1f;
}

.ceo-ref-land__dino {
    display: none;
    position: absolute;
    width: 35%;
    height: auto;
    z-index: 2;
    left: -17%;
    top: -16%;
    opacity: 0;
}

.ceo-ref-land.anim .ceo-ref-land__dino {
    animation: FlyRight 1s forwards;
}

.ceo-ref-land__bubble p {
    font-size: max(16px, 1.5vw);
}

.ceo-ref-land__bubble footer:before {
    content: none;
}

.ceo-ref-land__bubble footer {
    display: block;
    color: black;
    font-weight: 500;
    font-size: calc(max(16px, 1.5vw) * .9);
    position: static;
    z-index: 1;
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
}


.ceo-ref-land__step {
    position: absolute;
    width: max(3%, 25px);
    height: auto;
    opacity: 0;
}

.ceo-ref-land__step.anim ~ .ceo-ref-land__step, .ceo-ref-land__step.anim  {
    animation: FlyDown 1s ease-in-out forwards;
}

.ceo-ref-land__step:nth-of-type(1) {
    top: 5%;
    right: 10%;
}

.ceo-ref-land__step:nth-of-type(2) {
    top: 20%;
    right: 10%;
    animation-delay: .5s!important;
    scale: 1.1;
}

.ceo-ref-land__step:nth-of-type(3) {
    top: 35%;
    right: 2%;
    animation-delay: 1s!important;
    scale: 1.3;
    rotate: -25deg;
}

.ceo-ref-land__step:nth-of-type(4) {
    top: 50%;
    right: 10%;
    animation-delay: 1.5s!important;
    scale: 1.6;
}

.ceo-ref-land__step:nth-of-type(5) {
    top: 70%;
    right: 5%;
    animation-delay: 2s!important;
    scale: 1.8;
}

.ceo-ref-land__step:nth-of-type(6) {
    top: 80%;
    right: 15%;
    animation-delay: 2.5s!important;
    scale: 2;
    rotate: 30deg;
}

/*Media Queries*/

@media screen and (min-width: 578px) {
    .ceo-ref .container-fluid p {
        font-size: 4rem;
    }
}

@media screen and (min-width: 768px) {

    .dino-game__lable {
        bottom: -97px;
        width: 50%;
    }

    .ceo-ref-land {
        flex-direction: row;
        gap: 1rem;
    }

    .ceo-ref-land__bubble {
        padding: 7% 9% 4%;
        clip-path: polygon( 82.038% 99.988%,82.038% 99.988%,82.797% 99.849%,83.529% 99.443%,84.226% 98.786%,84.88% 97.894%,85.484% 96.783%,86.029% 95.47%,86.509% 93.971%,86.914% 92.303%,87.239% 90.48%,87.474% 88.521%,88.865% 73.584%,100% 73.942%,90.198% 59.27%,93.956% 18.886%,93.956% 18.886%,94.123% 15.882%,94.072% 12.968%,93.821% 10.203%,93.391% 7.647%,92.798% 5.36%,92.062% 3.402%,91.201% 1.833%,90.235% 0.712%,89.182% 0.099%,88.061% 0.054%,5.147% 11.602%,5.147% 11.602%,4.136% 12.081%,3.204% 13.011%,2.366% 14.343%,1.634% 16.028%,1.02% 18.013%,0.539% 20.25%,0.203% 22.687%,0.026% 25.275%,0.019% 27.962%,0.197% 30.7%,6.011% 88.786%,6.011% 88.786%,6.256% 90.708%,6.586% 92.493%,6.994% 94.126%,7.473% 95.591%,8.016% 96.874%,8.614% 97.958%,9.261% 98.828%,9.95% 99.469%,10.672% 99.865%,11.421% 100%,82.042% 100% );
        align-self: flex-start;
        margin-bottom: 15%;
    }

    .ceo-ref-land__bubble::after {
        content: none;
    }

    .card:nth-of-type(2) {
        margin-top: 0;
    }

    .card {
        align-items: start;
    }

    .h__text {
        text-align: start;
    }

    .quote {
        text-align: start;
    }

    .quote h2 {
        margin-bottom: -2.2rem;
        font-size: 8rem;
    }

    .mission {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        background-color: var(--cyan);
        grid-gap: 5rem;
        justify-content: center;
    }

    .mission__item:nth-of-type(3) {
        grid-column: span 2;
        width: 50%;
        justify-self: center;
    }

    .mission__item img {
        height: 150px;
    }

    .dino--wine, .dino--aside {
        display: block;
    }

    .ceo-ref-land__dino {
        display: block;
    }

    .socky__dino {
        top: -12%;
    }

    .ceo-ref-land__step:nth-of-type(1) {
        right: 25%;
    }

    .ceo-ref-land__step:nth-of-type(2) {
        right: 25%;
    }

    .ceo-ref-land__step:nth-of-type(3) {
        right: 17%;
    }

    .ceo-ref-land__step:nth-of-type(4) {
        right: 25%;
    }

    .ceo-ref-land__step:nth-of-type(5) {
        right: 20%;
    }

    .ceo-ref-land__step:nth-of-type(6) {
        right: 30%;
    }

    .ceo-ref__text {
        text-align: end;
    }
}

@media screen and (min-width: 992px) {
    .dino-head .container .col-xs-12 {
        margin-top: -10%;
        margin-bottom: 10%;
    }
    .mission__item:nth-of-type(3) {
        grid-column: auto;
        width: auto;
        justify-self: unset;
    }
    .mission {
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }

    .web__dino-head {
        display: block;
    }

    .web {
        margin-top: 15rem;
    }

    .socky__dino {
        transform: rotate(10deg);
        top: -15%;
        right: 0;
    }

    .ceo-ref .container-fluid a {
        text-align: start;
    }

    .play-ico:hover {
        transform: scale(1.1);
    }

    .dino-head .bubble:nth-of-type(1) {
        clip-path: polygon( 73.059% 100%,73.059% 100%,74.123% 99.865%,75.15% 99.469%,76.128% 98.828%,77.048% 97.958%,77.898% 96.874%,78.669% 95.591%,79.349% 94.126%,79.929% 92.493%,80.396% 90.707%,80.742% 88.786%,84.647% 61.298%,100% 48.851%,86.847% 45.797%,88.993% 30.699%,88.993% 30.699%,89.246% 27.961%,89.237% 25.274%,88.984% 22.686%,88.507% 20.249%,87.824% 18.012%,86.953% 16.027%,85.913% 14.342%,84.722% 13.01%,83.399% 12.079%,81.963% 11.601%,8.619% 0.053%,8.619% 0.053%,7.026% 0.101%,5.531% 0.716%,4.159% 1.839%,2.937% 3.409%,1.892% 5.367%,1.05% 7.654%,0.438% 10.209%,0.082% 12.972%,0.01% 15.884%,0.247% 18.885%,9.453% 88.521%,9.453% 88.521%,9.786% 90.48%,10.247% 92.303%,10.823% 93.971%,11.504% 95.47%,12.279% 96.783%,13.136% 97.894%,14.065% 98.786%,15.055% 99.443%,16.094% 99.849%,17.172% 99.988%,73.066% 99.988% );
        bottom: 50%;
        padding: 3% 5% 2.5% 2%;
        right: 55%;
    }
    .dino-head .bubble:nth-of-type(2) {
        clip-path: polygon( 82.038% 99.988%,82.038% 99.988%,82.797% 99.849%,83.529% 99.443%,84.226% 98.786%,84.88% 97.894%,85.484% 96.783%,86.029% 95.47%,86.509% 93.971%,86.914% 92.303%,87.239% 90.48%,87.474% 88.521%,88.865% 73.584%,100% 73.942%,90.198% 59.27%,93.956% 18.886%,93.956% 18.886%,94.123% 15.882%,94.072% 12.968%,93.821% 10.203%,93.391% 7.647%,92.798% 5.36%,92.062% 3.402%,91.201% 1.833%,90.235% 0.712%,89.182% 0.099%,88.061% 0.054%,5.147% 11.602%,5.147% 11.602%,4.136% 12.081%,3.204% 13.011%,2.366% 14.343%,1.634% 16.028%,1.02% 18.013%,0.539% 20.25%,0.203% 22.687%,0.026% 25.275%,0.019% 27.962%,0.197% 30.7%,6.011% 88.786%,6.011% 88.786%,6.256% 90.708%,6.586% 92.493%,6.994% 94.126%,7.473% 95.591%,8.016% 96.874%,8.614% 97.958%,9.261% 98.828%,9.95% 99.469%,10.672% 99.865%,11.421% 100%,82.042% 100% );
        bottom: 75%;
        padding: 2% 4% 2% 3%;
        right: 50%;
    }

    .dino-head .bubble:nth-of-type(3) {
        clip-path: polygon( 10.574% 64.483%,10.574% 64.483%,10.948% 66.366%,11.464% 68.117%,12.109% 69.721%,12.872% 71.161%,13.74% 72.423%,14.7% 73.49%,15.74% 74.347%,16.849% 74.979%,18.013% 75.369%,19.22% 75.503%,43.702% 75.503%,49.464% 100%,54.819% 75.503%,81.833% 75.503%,81.833% 75.503%,83.024% 75.373%,84.174% 74.992%,85.27% 74.377%,86.3% 73.541%,87.253% 72.499%,88.116% 71.266%,88.878% 69.858%,89.527% 68.289%,90.051% 66.574%,90.438% 64.727%,99.686% 29.498%,99.686% 29.498%,99.969% 26.868%,99.959% 24.286%,99.677% 21.799%,99.142% 19.457%,98.377% 17.308%,97.402% 15.4%,96.237% 13.782%,94.903% 12.501%,93.421% 11.607%,91.812% 11.148%,9.654% 0.051%,9.654% 0.051%,7.87% 0.097%,6.195% 0.688%,4.658% 1.767%,3.29% 3.276%,2.119% 5.158%,1.176% 7.355%,0.491% 9.81%,0.092% 12.465%,0.011% 15.263%,0.277% 18.147%,10.588% 64.472% );
        top: -7.5%;
        padding: 2% 3% 4% 3%;
        right: 29%;
    }

    .dino-head .bubble:nth-of-type(4) {
        clip-path: polygon( 99.723% 15.331%,99.723% 15.331%,99.989% 12.893%,99.908% 10.527%,99.51% 8.282%,98.824% 6.208%,97.881% 4.351%,96.711% 2.762%,95.342% 1.488%,93.806% 0.578%,92.131% 0.08%,90.347% 0.044%,8.187% 9.409%,8.187% 9.409%,6.578% 9.797%,5.097% 10.552%,3.763% 11.634%,2.598% 13.001%,1.623% 14.613%,0.858% 16.429%,0.323% 18.407%,0.041% 20.508%,0.031% 22.689%,0.314% 24.911%,9.561% 72.064%,9.561% 72.064%,9.95% 73.624%,10.475% 75.073%,11.124% 76.398%,11.886% 77.588%,12.749% 78.629%,13.701% 79.509%,14.731% 80.216%,15.826% 80.736%,16.975% 81.057%,18.166% 81.167%,32.383% 81.167%,29.573% 100%,42.815% 81.167%,80.774% 81.167%,80.774% 81.167%,81.982% 81.054%,83.146% 80.724%,84.254% 80.191%,85.294% 79.467%,86.255% 78.565%,87.122% 77.499%,87.885% 76.282%,88.53% 74.928%,89.046% 73.449%,89.42% 71.858%,99.73% 15.331% );
        top: 12%;
        padding: 2% 3% 3% 3%;
        right: 10%;
    }
}



@media screen and (min-width: 1200px) {
    .ceo-ref .container-fluid p {
        font-size: 6rem;
    }

    .dino--aside:nth-of-type(1) {
        left: -25vw;
        top: -45%;
    }
    .h__dino-monolog .bubble {
        font-size: 6rem;
        margin-bottom: 10%;
    }

    .h__dino {
        display: block;
    }

    .h__text {
        margin-bottom: 30%;
    }

    .h__dino-monolog {
        position: absolute;
        top: 26%;
        right: -25%;
    }

    .h__dino-monolog img {
        transform: rotate(10deg);
    }

    .mt-lg-0 {
        margin-top: 0;
    }

    .socky__dino {
        top: -25%;
    }

    .dino-game__controls img {
        display: block;
    }
}

@media screen and (min-width: 1300px) {
    .swiper-button-prev,
    .swiper-button-next {
        color: var(--orange);
    }

    .swiper-button-prev {
        left: -4%;
    }

    .swiper-button-next {
        right: -4%;
    }
}

@keyframes FadeIn {
    0% {
        opacity: 0;
        transform: translateX(35%) translateY(40%);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes FlyIn {
    0% {
        opacity: 0;
        transform: translateX(35%) translateY(40%);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes FlyRight {
    0% {
        opacity: 0;
        transform: translateX(-35%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes FlyLeft {
    0% {
        opacity: 0;
        transform: translateX(35%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes FlyUp {
    0% {
        opacity: 0;
        transform: translateY(35%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes FlyDino {
    0% {
        opacity: 0;
        transform: translateX(-35%) scaleX(-1) rotate(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scaleX(-1) rotate(20deg);
    }
}

@keyframes FlyDown {
    0% {
        opacity: 0;
        transform: translateY(-35%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes web-scroll {
    0%,8% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-18%)
    }

    40% {
        transform: translateY(-27.75%)
    }

    60% {
        transform: translateY(-53%)
    }

    80% {
        transform: translateY(-73%)
    }

    90%,95% {
        transform: translateY(-82%)
    }

    100% {
        transform: translateY(0)
    }
}

#videotitle {
    z-index: 12000;
}

#videotitle iframe {
    width: 100%;
    height: 100%;
}