.content {
    margin: 0 auto;
    padding: 5% 40px
}

#humberger_check {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden
}

#humberger_check:checked+.humberger span {
    background-color: #fff0
}

#humberger_check:checked+.humberger span::before {
    top: 0;
    transition: top 0.1s cubic-bezier(.33333, 0, .66667, .33333) 0.15s, transform 0.13s cubic-bezier(.215, .61, .355, 1) 0.22s;
    -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
    transform: translate3d(0, 10px, 0) rotate(45deg)
}

#humberger_check:checked+.humberger span::after {
    top: 4px;
    transition: top 0.2s cubic-bezier(.33333, 0, .66667, .33333), transform 0.13s cubic-bezier(.215, .61, .355, 1) 0.22s;
    -webkit-transform: translate3d(0, 6px, 0) rotate(-45deg);
    transform: translate3d(0, 6px, 0) rotate(-45deg)
}

#humberger_check:checked~.hidden_menu {
    transform: translateY(0)
}

.humberger {
    position: fixed;
    top: 6px;
    right: 5vw;
    width: 42px;
    height: 36px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 3px;
    border: 1px solid #fff
}

.humberger span {
    position: absolute;
    top: 7px;
    left: 46%;
    width: 26px;
    height: 2px;
    margin: 0 auto auto -11px;
    background-color: #fff;
    transition: background-color 0.1s linear 0.13s
}

.humberger span::before,
.humberger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff
}

.humberger span::before {
    top: 10px;
    transition: top 0.1s cubic-bezier(.33333, .66667, .66667, 1) 0.2s, transform 0.13s cubic-bezier(.55, .055, .675, .19)
}

.humberger span::after {
    top: 19px;
    transition: top 0.2s cubic-bezier(.33333, .66667, .66667, 1) 0.2s, transform 0.13s cubic-bezier(.55, .055, .675, .19)
}

.hidden_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    -webkit-perspective: 1600px;
    perspective: 1600px;
    z-index: 999;
    transform: translateY(-100%)
}

.menu_underline {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 20%;
    background-color: #fff
}

.menu_underline.visible {
    height: 3px
}

.header_bar {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
    height: 0;
    padding: 0 5vw;
    text-align: left;
    z-index: 999;
    justify-content: space-between;
    transform: translateY(0) !important
}

.header_bar .onee {
    width: 110px;
    position: relative;
    left: 40px
}

.header_bar .neo-calender {
    position: absolute;
    width: 140px;
    height: auto;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: transform 300ms
}

.header_bar .neo-calender:hover {
    transform: translateX(40px);
    transition: all .2s;
    opacity: 1;
    z-index: -1
}

.header_bar.navbar-scroll {
    position: sticky
}


.header_bar.navbar-scroll .onee {
    width: 60px;
    opacity: 0
}

.header_bar.navbar-scroll .twoo {
    width: 180px;
    opacity: 1;
    top: 20px;
    position: absolute;
    left: 40px;
    display: block
}

.header_bar .twoo {
    opacity: 0;
    width: 160px;
    display: none
}

.header_bar::before {
    background-color: rgb(0 0 0 / .84);
    box-shadow: 0 2px 8px rgb(0 0 0 / .26);
    opacity: 0
}

.header_bar.show-bg::before {
    opacity: 1
}

.header_bar h1 {
    position: relative;
    margin: 0 0 0;
    font-size: 20px;
    display: inline-block
}

.header_bar.sticky {
    top: 0
}

.header_bar.sticky .logo {
    line-height: 60px;
    transition: all 3s ease-in-out;
    top: 5px
}

.header_bar.sticky .logo .onee {
    display: none
}

.header_bar.sticky .logo .twoo {
    width: 180px;
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    height: auto
}

.content {
    position: relative;
    margin: 100px auto 4vw;
    padding: 0 5vw;
    height: 100vh
}

.content h2 {
    position: relative;
    top: 30vh;
    font-size: 38px
}

@keyframes scaling {
    50% {
        opacity: .28;
        transform: scale(.5)
    }

    100% {
        opacity: 0;
        transform: scale(1.05)
    }
}

@media (max-width:680px) {

    #humberger_check:checked+.humberger,
    #humberger_check:checked~.header_bar,
    #humberger_check:checked~.container {
        transform: translateY(30px)
    }
}

.header_bar.sticky {
    top: 0
}

.header_bar.sticky .logo {
    line-height: 60px;
    transition: all 3s ease-in-out;
    top: 5px
}

.header_bar.sticky .logo .one {
    display: none
}

.header_bar.sticky .navigation {
    line-height: 60px
}

.html5-video-player {
    z-index: 999999 !important
}

@media only screen and (min-width :1601px) and (max-width :1920px) {
    .header_bar .onee {
        width: 110px;
        left: 30px
    }

    .header_bar.navbar-scroll .twoo {
        width: 200px;
        left: 30px
    }
}

@media only screen and (min-width :1401px) and (max-width :1600px) {
    .header_bar .onee {
        width: 110px;
        left: -40px
    }

    .header_bar.navbar-scroll .twoo {
        width: 160px;
        left: 30px
    }
}

@media only screen and (min-width :1366px) and (max-width :1400px) {
    .header_bar .onee {
        width: 110px;
        left: -40px
    }

    .header_bar.navbar-scroll .twoo {
        width: 160px;
        left: 30px
    }
}

@media only screen and (min-width :1281px) and (max-width :1365px) {
    .header_bar .onee {
        width: 110px;
        left: -40px
    }

    .header_bar.navbar-scroll .twoo {
        width: 160px;
        left: 30px
    }
}

@media only screen and (min-width :1200px) and (max-width :1280px) {
    .header_bar .onee {
        width: 110px;
        left: -40px
    }

    .header_bar.navbar-scroll .twoo {
        width: 160px;
        left: 30px
    }
}

@media only screen and (min-width :1200px) and (max-width :1400px) {
    .header_bar .neo-calender:hover {
        transform: translateX(84px)
    }

    .header_bar .neo-calender {
        width: 140px;
        left: 3px
    }

    .header_bar.navbar-scroll .twoo {
        width: 160px;
        left: 30px
    }
}

@media only screen and (min-width :1024px) and (max-width :1199px) {
    .header_bar .neo-calender:hover {
        transform: translateX(50px)
    }

    .header_bar .neo-calender {
        width: 120px;
        left: -11px
    }

    .header_bar.navbar-scroll .twoo {
        width: 130px;
        left: 30px;
        top: 18px
    }

    .header_bar .onee {
        width: 95px;
        left: 7px
    }

    .humberger {
        display: none
    }

    .hidden_menu {
        transform: translateY(0%)
    }
}

@media only screen and (min-width :768px) and (max-width :1023px) {
    .header_bar .neo-calender:hover {
        transform: translateX(50px)
    }

    .header_bar .neo-calender {
        width: 90px;
        left: -20px
    }

    .header_bar.navbar-scroll .twoo {
        width: 130px;
        left: -14px;
        top: 18px
    }

    .header_bar .onee {
        width: 80px;
        left: -4px
    }

    .humberger {
        display: none
    }

    .hidden_menu {
        transform: translateY(0%)
    }
}

@media only screen and (min-width :150px) and (max-width :767px) {
    .header_bar .neo-calender:hover {
        transform: translateX(50px)
    }

    .header_bar .neo-calender {
        width: 90px;
        right: -70px
    }

    .header_bar h1 {
        display: inline-block !important;
        width: 0
    }

    .header_bar.navbar-scroll .twoo {
        left: 0;
        width: 130px;
        top: 18px;
        height: auto;
        object-fit: contain;
        opacity: 1;
        display: block !important
    }

    .humberger {
        display: none
    }

    .hidden_menu {
        transform: translateY(0%)
    }

    .header_bar .onee {
        width: 70px;
        position: relative;
        left: 0
    }

    .humberger span::before {
        top: 9px
    }

    .humberger span::before,
    .humberger span::after {
        height: 4px
    }

    .humberger span::after {
        top: 18px
    }

    .humberger span::before,
    .humberger span::after {
        height: 4px
    }
}