/* ==========================================
   CHECK-IN BAR
========================================== */

.checkin-bar{

    width:100%;

    margin-top:0px;

    background:linear-gradient(
        to bottom,
        #0b0b0b,
        #050505
    );

    border-top:1px solid rgba(255,255,255,.06);

    border-bottom:1px solid rgba(255,255,255,.03);

}


/* ==========================================
   CONTAINER
========================================== */

.checkin-container{

    width:min(1400px,90%);

    margin:auto;

    min-height:160px;

    display:flex;

    justify-content:flex-start;

    align-items:flex-start;

    padding:50px 0;

}


/* ==========================================
   CHECK-IN ITEM
========================================== */

.checkin-item{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0 20px;

    text-decoration:none;

    transition:all .4s cubic-bezier(.22,.61,.36,1);

}



/* ==========================================
   TEXT
========================================== */

.checkin-item span{

    color:#ffffff;

    font-family:Arial, Helvetica, sans-serif;

    font-size:34px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    display:inline-block;

}

/* ==========================================
   CHECK-IN ANIMATION
========================================== */

.checkin-item.animate span{

    animation:checkinSlide 1s cubic-bezier(.22,.61,.36,1) forwards;

}

@keyframes checkinSlide{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ==========================================
   HOVER
========================================== */

.checkin-item:hover span{

    color:#ffde73;

}



/* ==========================================
   CHECK-IN TITLE
========================================== */

.checkin-title{

    position:relative;

    display:inline-block;

}


/* ==========================================
   CHECK-IN ICON
========================================== */

.checkin-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:0;

    text-decoration:none;

}

.checkin-item img{

    width:200px;

    height:auto;

    display:block;

    margin-bottom:-30px;

    transition:transform .35s ease;

}

.checkin-item:hover img{

    transform:scale(1.05);

}

.checkin-item span{

    color:#ffffff;

    font-family:Arial, Helvetica, sans-serif;

    font-size:25px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.checkin-item:hover span{

    color:#ffde73;

}