@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Heebo:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.cdnfonts.com/css/interface-trial');

:root {
    --renk: #0f5ba8;
    --renk2: #EF4B42;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
}

::-webkit-scrollbar-thumb {
    background: var(--renk);
}

    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
    }


body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'InterFace Trial', sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

a {
    color: #000;
    text-decoration: none;
}


    a:hover, a:focus {
        color: #000;
        text-decoration: none;
    }



.footerMargin {
    z-index: 999;
    background-color: white;
    margin-bottom: 635px;
}

.footerFixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}


/*/-/-/-/-/-//Mobil-Menu/-/-/-/-/-//*/

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: #16181b;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 80px;
}

.sidebar_active {
    width: 450px;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(1) {
    animation-delay: .5s;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(2) {
    animation-delay: .7s;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(3) {
    animation-delay: .9s;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(4) {
    animation-delay: 1.1s;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(5) {
    animation-delay: 1.2s;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(6) {
    animation-delay: 1.3s;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(7) {
    animation-delay: 1.4s;
}

.mobil_dropdown_content .accordion-menu .nav_mobil:nth-child(8) {
    animation-delay: 1.5s;
}

#dismiss_mobil {
    position: absolute;
    top: 20px;
    right: 5%;
    font-size: 25px;
    color: #ffffff;
    cursor: pointer;
}

.accordion-menu {
    width: 100%;
}

.mobil_dropdown_content .dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: transparent;
}

.dropdownlink {
    cursor: pointer;
    display: block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
    position: relative;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    padding: 5px;
}

    .dropdownlink i {
        position: absolute;
        top: 6px;
        left: 16px;
    }

    .dropdownlink .fa-chevron-down {
        right: 10px;
        left: auto;
    }

.submenuItems {
    display: none;
}

    .submenuItems a {
        display: block;
        color: #727272;
        padding: 12px 12px 12px 45px;
        -webkit-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }

.mobil_dropdown_content {
    padding-top: 20px;
}

.submenuItems a:hover {
    color: #fff;
}

.sidenav_ul ul {
    margin-bottom: 0px;
}

    .sidenav_ul ul li {
        padding: 5px 5px;
    }

        .sidenav_ul ul li a {
            font-size: 18px;
            font-weight: 700;
            color: #ffffff;
            padding: 5px;
            white-space: nowrap
        }

ul.submenuItems {
    margin-top: 15px;
}

.nav_mobil_bg .accordion-menu {
    background: transparent;
}

.sidenav_ul ul li .mobil_link {
    white-space: nowrap
}

.sidenav_ul ul li a::after {
    display: none;
}

.sidenav_ul .dropdown-menu {
    width: 100%;
    box-shadow: none;
    border: none;
}

.accordion-menu ul li {
    padding: 5px;
}

.mobil_social li {
    display: inline-block;
    padding: 5px !important;
    border-bottom: none !important;
}

.sidenav_ul ul li .mobil_link span {
    font-size: 18px;
    font-weight: 500;
    padding-left: 5px;
}

.overlay_mobil_bg {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
    transition: all 0.5s ease-in-out;
    top: 0;
}

.overlay_mobil_bg_active {
    display: block;
    opacity: 1;
}

.wrapper-menu {
    width: 30px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 330ms ease-out;
}

    .wrapper-menu.open {
        transform: rotate(-45deg);
    }

.line-menu {
    background-color: #c81a21;
    width: 100%;
    height: 4px;
}

    .line-menu.half {
        width: 50%;
    }

    .line-menu.start {
        transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
        transform-origin: right;
    }

.open .line-menu.start {
    transform: rotate(-90deg) translateX(3px);
}

.line-menu.end {
    align-self: flex-end;
    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
    transform-origin: left;
}

.menubg .navbar.header .line-menu {
    background-color: #cc1c22;
    width: 100%;
    height: 4px;
}

    .menubg .navbar.header .line-menu.half {
        width: 50%;
    }

    .menubg .navbar.header .line-menu.start {
        transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
        transform-origin: right;
    }

.menubg .navbar.header .open .line-menu.start {
    transform: rotate(-90deg) translateX(3px);
}

.menubg .navbar.header .line-menu.end {
    align-self: flex-end;
    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
    transform-origin: left;
}

.mobil_menu .menu_lang {
    animation-delay: .5s;
    display: inline-block;
    margin-bottom: 0;
}

.mobil_social {
    animation-delay: 1.5s;
}

    .mobil_social li,
    .mobil_menu .menu_lang li {
        display: inline-block;
        padding: 5px;
    }

.navbar_mobil_bg {
    display: none;
}

#mobil_btn {
    display: none
}


.searchArayuz {
    padding-top: 6rem;
    background: #F3F3F3;
    padding-bottom: 4rem;
    min-height: 50vh;
}


.searchIconi {
    position: absolute;
    right: 10px;
    top: 12px;
}

.searchSayfa input {
    border: 0;
    outline: none;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid lightgrey;
}

.ArananKelime {
    font-size: 23px;
    font-weight: 400;
    border-bottom: 1px solid #c8c8c8;
    padding-bottom: 20px;
}

.refAcilanText {
    background: #0f5ba8cf;
    height: 10rem;
    transition: .60s;
    overflow: hidden;
    margin-top: 15px;
    opacity: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    backdrop-filter: blur(2px);
}

    .refAcilanText.active {
        opacity: 1;
    }

    .refAcilanText div:first-child {
        /* display: -webkit-box; */
        /* -webkit-line-clamp: 5; */
        /* -webkit-box-orient: vertical; */
        /* overflow: hidden !important; */
        padding: 0px 20px !important;
        /* height: 100%; */
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }






.swiper-referans .swiper-slide {
    transition: .75s;
}

.refAcilPopContent {
    max-height: 43rem;
    width: 55rem;
    position: relative;
    background: white;
    animation: opacity 1s;
    height: max-content;
}

    .refAcilPopContent .bx-x {
        position: absolute;
        right: 1rem;
        top: 1rem;
        font-size: 34px;
    }

.refPopUpKapat {
    transition: .35s;
}

    .refPopUpKapat:hover {
        cursor: pointer;
        opacity: .50;
    }

.refAcilPop {
    height: 100%;
    width: 100%;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    background: #00000054;
    animation: opacity 1s;
}

    .refAcilPop.show {
        display: flex;
    }

.akorDiyoki {
    color: var(--renk);
    font-size: 18px;
    font-weight: 600;
    padding-left: 1rem;
    margin: 11px 0;
    display: block;
}

.table td {
    font-weight: 500;
}

.table th {
    color: var(--renk);
    font-weight: 600;
}

.urundetayImg img {
    height: 100%;
    object-fit: cover !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    height: var(--swiper-scrollbar-size, 10px);
}

@media(max-width:991px) {



    .bigvideo {
        width: initial !important;
        height: 100vh;
    }

    .swiper-referans .swiper-slide img {
        object-fit: contain !important;
    }

    .rowMobilTers {
        flex-direction: column-reverse;
    }

    .adava {
        top: 0px !important;
    }

    .swiper-referans .swiper-slide:hover {
        transform: translateY(0rem)
    }

    #mobil_btn {
        display: block;
    }

    .deskop_menu .navbar .navbar-brand img {
        max-height: 60px;
    }
}

@media(max-width:565px) {
    .sidebar_active {
        width: 70%;
    }

    .deskop_menu .navbar .navbar-brand img {
        max-height: 60px;
        position: absolute;
        left: 10px;
        top: 10px;
    }
}


.banneralan {
    position: relative;
    width: 100%;
}



.carousel-control-next, .carousel-control-prev {
    z-index: 9;
}

.carousel-caption-bg {
    position: absolute;
    bottom: 25%;
    left: 15%;
    color: #fff;
    width: 50%;
    padding: 3% 1%;
    border-radius: 15px;
    z-index: 10;
}

    .carousel-caption-bg h5 {
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .carousel-caption-bg p {
        font-size: 25px;
        font-weight: 400;
    }



.referansbox {
    position: relative;
    width: 100%;
    background: #f2f2f2;
    padding: 50px 0;
    margin: 0;
    padding-bottom: 0px;
    overflow: hidden;
    height: 33rem;
}

    .referansbox .referans-title {
        font-size: 40px;
        font-weight: 600;
        color: #000;
        margin-bottom: 20px;
        position: relative;
        text-align: center;
    }

    .referansbox .referans-text {
        font-size: 20px;
        font-weight: 300;
        color: #727272;
    }


.swiper-referans .swiper {
    width: 100%;
    height: 100%;
}

.swiper-referans .swiper-slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

    .swiper-referans .swiper-slide img {
        display: block;
        width: 100%;
        height: 16rem;
        object-fit: cover;
        transition: .5s;
    }



.swiper-referans .swiper {
    margin-left: auto;
    margin-right: auto;
}


.referansbox .arrowbox2 {
    position: absolute;
    display: flex;
    justify-content: space-between;
    bottom: -4rem;
    width: 100%;
    left: 7px;
}


.referansbox .swiper-button-next-test2,
.referansbox .swiper-button-prev-test2 {
    margin-right: 10px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    color: #ef4a41;
}






footer {
    background: rgb(122,122,122);
    background: linear-gradient(180deg, rgb(24 14 14 / 67%) 0%, rgb(83 83 83) 50%, rgb(27 27 27) 100%);
    width: 100%;
    padding: 50px 0 50px 0;
    position: relative;
}

    footer .footerbg {
        position: absolute;
        right: 0px;
        top: 0;
        background-image: url(../images/cizgifooter.png);
        background-position: 100%,30%;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 100%;
        opacity: .4;
        transform: rotate(180deg);
    }



    footer .footer-text {
        font-size: 14px;
        font-weight: 300;
        color: #fff;
        text-align: justify;
        margin-top: 15px;
    }

    footer .foot-tt {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
        color: #fff;
        font-size: 17px;
        font-weight: bold;
    }

        footer .foot-tt::before {
            content: "";
            position: absolute;
            bottom: -5px;
            width: 20%;
            height: 3px;
            background-color: #ef4a41;
        }

    footer .footul {
        padding: 0;
        margin: 20px 0 0 0;
        position: relative;
        height: 12rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

        footer .footul .footli {
            color: #fff;
            font-size: 16px;
            list-style: none;
            padding-bottom: 5px;
            padding-left: 0;
            transition: .5s;
        }

            footer .footul .footli:hover {
                color: #fff;
                font-size: 16px;
                list-style: none;
                padding-bottom: 5px;
                padding-left: 10px;
                transition: .5s;
            }

            footer .footul .footli .footlink {
                color: #fff;
                font-size: 16px;
            }

    footer .footadrs, footer .footadrs a {
        font-size: 16px;
        font-weight: 300;
        color: #fff;
        margin-bottom: 5px;
    }

    footer .footalttext {
        color: #fff;
        font-size: 16px;
        font-weight: 300;
    }

    footer .footerlinks {
        font-size: 16px;
        font-weight: 300;
        color: #fff;
    }

    footer .socialmedia {
        position: relative;
        display: flex;
        justify-content: end;
        gap: 20px;
    }

        footer .socialmedia i {
            color: #fff;
            font-size: 20px;
            margin: 10px 10px 0px 0px;
        }








.uygulamabg {
    position: relative;
    padding: 0px 0px 0 100px;
    margin: 0 0 70px 0;
}

    .uygulamabg .uygulama-title {
        color: #000;
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .uygulamabg .uygulama-text {
        color: #000;
        font-size: 17px;
        font-weight: 300;
        margin-bottom: 20px;
        text-align: justify;
    }




.btn-link {
    font-size: 16px;
    color: #000;
    padding-bottom: 2px;
    text-decoration: none;
}

    .btn-link:hover {
        color: #115da8;
    }

    .btn-link .icon {
        flex: 0 0 auto;
        color: #115da8;
        margin-left: 8px;
    }

.nxt-btn {
    background-color: #F9423A;
    text-align: center;
    padding: 15px;
    color: #fff;
    display: inline-block;
    margin-top: 15px;
    transition: .5s;
    transform: translate(0px,0px);
    border: 1px solid #F9423A;
}

    .nxt-btn:hover {
        background-color: #f7f7f7;
        text-align: center;
        padding: 15px;
        color: #F9423A;
        display: inline-block;
        margin-top: 15px;
        transition: .5s;
        transform: translate(0px,-5px);
        border: 1px solid #F9423A;
    }

.nxt-btn2 {
    background-color: #F9423A;
    text-align: center;
    padding: 15px;
    color: #fff;
    display: inline-block;
    margin-top: 15px;
    transition: .5s;
    transform: translate(0px,0px);
    border: 1px solid #F9423A;
}

    .nxt-btn2:hover {
        background-color: transparent;
        text-align: center;
        padding: 15px;
        color: #fff;
        display: inline-block;
        margin-top: 15px;
        transition: .5s;
        transform: translate(0px,-5px);
        border: 1px solid #fff;
    }

.productpage {
    position: relative;
    width: 100%;
    padding: 100px 0;
    margin: 0;
}

    .productpage .prdctbg {
        position: sticky;
        top: calc(50vh - 12rem);
    }

    .productpage .heading {
        font-size: 40px;
        font-weight: 600;
        color: #000;
        margin-bottom: 20px;
    }

        .productpage .heading:after {
            background-color: #ef4a41;
            content: "";
            display: block;
            height: 2px;
            margin-top: 5px;
            margin-inline: 0;
            width: 25%;
        }

    .productpage .teaser {
        font-size: 18px;
        font-weight: 300;
        line-height: 30px;
        color: #000;
    }

    .productpage .probox1 {
        width: 45%;
        height: max-content;
        position: relative;
        margin: 0;
        padding: 0;
        float: left;
        color: #000;
    }

    .productpage .probox2 {
        width: 45%;
        height: max-content;
        position: relative;
        margin-left: 3%;
        margin-top: 50px;
        padding: 0;
        background-color: #f7f7f7;
        float: left;
        color: #fff;
    }

    .productpage .proimgbox {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

        .productpage .proimgbox::before {
            content: "";
            position: absolute;
            background-color: #0f5ba87d;
            width: 100%;
            height: 100%;
            z-index: 8;
        }

        .productpage .proimgbox img {
            transform: scale(1);
            transition: .5s;
            height: 320px;
        }

        .productpage .proimgbox:hover img {
            transform: scale(1.1);
            transition: .5s;
        }

    .productpage .protxt {
        position: absolute;
        left: 5%;
        right: 5%;
        bottom: 10%;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        z-index: 9;
    }


.fixedsticky {
    position: sticky;
    top: calc(35vh - 0rem);
}

.aboutpage {
    position: relative;
    padding: 100px 0;
    margin: 0;
    padding-bottom: 0px;
}

.aboutdiv {
    position: relative;
    width: 70%;
    padding: 30px;
    background-color: #ffffff;
    z-index: 9;
    text-align: center;
    margin: 0 auto;
}

    .aboutdiv .about-title {
        font-size: 40px;
        font-weight: 300;
        margin-bottom: 20px;
        position: relative;
        color: #000;
    }

        .aboutdiv .about-title .bslkhvr {
            position: relative;
            z-index: 99;
            font-weight: 600;
        }

            .aboutdiv .about-title .bslkhvr:hover {
                color: #fff;
                transition: .5s;
            }



            .aboutdiv .about-title .bslkhvr .cizgibrd {
                position: absolute;
                left: -5px;
                bottom: 0;
                width: 107%;
                height: 2px;
                background-color: #ef4a41;
                opacity: 1;
                z-index: -1;
                transition: .5s;
            }

            .aboutdiv .about-title .bslkhvr:hover .cizgibrd {
                position: absolute;
                left: -5px;
                bottom: 0;
                width: 107%;
                height: 50px;
                background-color: #ef4a41;
                opacity: 1;
                z-index: -1;
                transition: .5s;
            }


    .aboutdiv .abouttext {
        font-size: 17px;
        font-weight: 300;
        margin-bottom: 10px;
    }



.newspage {
    position: relative;
    width: 100%;
    padding: 50px 0;
    overflow: hidden;
    background-color: #f7f7f7;
    border-bottom: 2px solid #f0f0f0;
    border-top: 2px solid #f0f0f0;
}

    .newspage .news-title {
        font-size: 40px;
        font-weight: 600;
        color: #000;
        margin-bottom: 20px;
        position: relative;
    }



    .newspage .news-btn {
        font-size: 18px;
        font-weight: 500;
        border-bottom: 2px solid #f7f7f7;
        padding: 10px;
        color: #000;
        transition: .5s;
        margin-top: 5px;
        display: block;
        width: max-content;
    }

        .newspage .news-btn:hover {
            font-size: 18px;
            font-weight: 500;
            border-bottom: 2px solid #c81a21;
            padding: 10px;
            color: #c81a21;
            transition: .5s;
        }

    .newspage .swiper {
        width: 100%;
        height: 100%;
    }

    .newspage .swiper-slide {
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .5s;
    }

        .newspage .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin-bottom: 10px;
        }


        .newspage .swiper-slide:hover {
            box-shadow: 0px 9px 11px 4px #9c9c9c3d;
            transition: .5s;
        }

    .newspage .swiper {
        margin-left: auto;
        margin-right: auto;
    }

    .newspage .swiper-pagination-bullet-active {
        opacity: 1;
        background-color: #c81a21 !important;
        width: 10px !important;
        height: 10px !important;
    }

    .newspage .swiper-pagination-bullet {
        background-color: #081250;
        opacity: .8;
    }


.hbr-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
    padding: 0px 10px;
    height: 50px;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hbr-txt {
    font-size: 16px;
    font-weight: 300;
    color: #000;
    max-width: 500px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0px 10px;
    height: 45px;
}


section.type {
    overflow: hidden;
    padding: 68px 0 !important;
}

.type-title {
    font-size: 40px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

section.type .row > div.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5vw;
    row-gap: 34px;
}

    section.type .row > div.grid .blokholder {
        position: relative;
        padding: 11px;
    }

        section.type .row > div.grid .blokholder .homecol {
            transition: all 0.33s cubic-bezier(0.79, 0.2, 0.42, 1.15);
            display: block;
        }

            section.type .row > div.grid .blokholder .homecol h2 {
                margin-bottom: 1vw;
                font-size: 15px;
                height: 50px;
            }

            section.type .row > div.grid .blokholder .homecol .image-holder {
                position: relative;
            }

            section.type .row > div.grid .blokholder .homecol .image-holder {
                position: relative;
            }

                section.type .row > div.grid .blokholder .homecol .image-holder img {
                    transition: all ease-out 0.33s;
                    width: 100%;
                }

            section.type .row > div.grid .blokholder .homecol:hover {
                transform: scale(1.05);
            }

        section.type .row > div.grid .blokholder:before {
            transition: all 0.33s cubic-bezier(0.79, 0.2, 0.42, 1.15);
            width: calc(100vw - 15px);
            background-color: #f9f9f9;
            position: absolute;
            bottom: 75px;
            right: 0;
            text-transform: uppercase;
            font-weight: 300;
            z-index: -1;
            padding-top: calc(100% - 150px);
        }

        section.type .row > div.grid .blokholder:nth-child(1) .image-holder:before {
            content: 'NEW';
            position: absolute;
            right: 0;
            top: 0;
            width: 4vw;
            height: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: calc(1vw + 1px);
            font-weight: 200;
            display: none !important;
        }

        section.type .row > div.grid .blokholder:nth-child(2):before,
        section.type .row > div.grid .blokholder:nth-child(4):before {
            content: '';
            right: 11px;
        }

        section.type .row > div.grid .blokholder:nth-child(6):before,
        section.type .row > div.grid .blokholder:nth-child(8):before {
            content: '';
            left: 11px;
        }


        section.type .row > div.grid .blokholder:nth-child(10):before,
        section.type .row > div.grid .blokholder:nth-child(12):before {
            content: '';
            right: 11px;
        }



.dvmbtn {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    transition: .5s;
}

    .dvmbtn:hover {
        color: #fff;
        transition: .5s;
    }

    .dvmbtn::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #F9423A;
        transition: .5s;
        z-index: -1;
    }

    .dvmbtn:hover::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        background-color: #F9423A;
        transition: .5s;
        z-index: -1;
    }

.textref {
    margin-top: 80px;
}

.referenceimg {
    width: 100%;
    position: relative;
}

    .referenceimg img {
        position: absolute;
        top: -30px;
        left: 0px;
        width: 70%;
        filter: opacity(0.3);
        opacity: .1;
    }





.uygulamaslider .swiper-slide {
    width: auto;
    position: relative;
}

    .uygulamaslider .swiper-slide img {
        height: 100%;
        height: 300px;
        width: auto;
        object-fit: cover;
    }

    .uygulamaslider .swiper-slide a::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 99;
        background-color: #00000063;
    }

    .uygulamaslider .swiper-slide p {
        position: absolute;
        bottom: 30px;
        left: 15px;
        right: 15px;
        color: #fff;
        font-size: 16px;
        font-weight: 300;
        padding: 5px;
        z-index: 99;
    }

        .uygulamaslider .swiper-slide p::before {
            content: "";
            width: 100%;
            height: 2px;
            background-color: #F9423A;
            position: absolute;
            bottom: 0px;
            left: 0px;
            color: #fff;
            font-size: 16px;
            font-weight: 300;
            transition: .5s;
            z-index: -1;
        }

    .uygulamaslider .swiper-slide:hover p::before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #F9423A;
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: #fff;
        font-size: 16px;
        font-weight: 300;
        transition: .5s;
        z-index: -1;
    }


.uygulamaslider .swiper-horizontal > .uygulamaslider .swiper-scrollbar, .uygulamaslider .swiper-scrollbar.swiper-scrollbar-horizontal {
    width: auto;
    position: static;
    margin-top: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    margin-left: calc(8.3vw + 80px);
}

.uygulamaslider .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgb(239 73 65);
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0;
}

.hbrbox {
    transition: .5s;
    position: relative;
    transform: translate(0px, 0px);
}


    .hbrbox:hover {
        transition: .5s;
        position: relative;
        transform: translate(0px, -10px);
    }


/*Yeni menu css*/

.k-header {
    background-color: transparent;
    position: fixed;
    top: 0;
    height: 75px;
    z-index: 9999;
    width: 100%;
    padding: 0.7rem 0;
    background: #fff;
    display: flex;
    transition: .35s;
    border-bottom: 1px solid #e9e9e9;
}

.mobilhamb {
    display: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.k-header ul.k-menuLinks li {
    cursor: pointer;
    font-weight: 300;
    font-size: 20px;
    transition: .2s;
}

.urunDetayUl a:hover {
    color: var(--renk2);
}


.ustMenuAll {
    font-size: 18px;
    font-weight: 400;
    color: var(--renk);
    position: relative;
    text-decoration: underline;
}


.k-header ul.k-menuLinks a {
    font-weight: 300;
    color:#000;
}


.k-header ul.k-menuLinks a:hover {
    font-weight: 300;
    color: #F9423A;
}


.k-header ul.k-menuLinks {
    color: black;
    font-weight: 400;
    gap: 40px;
    font-size: 15px;
    display: flex;
    font-weight: bold;
    align-items: center;
    margin-top: 1rem;
    justify-content: center;
}

.k-header-right {
    position: absolute;
    right: 2.4rem;
    top: 0;
    display: flex;
    height: 100%;
    gap: 25px;
}

    .k-header-right .k-header-info {
        color: black;
        font-size: 15px;
        display: flex;
        justify-content: center;
        height: 100%;
        width: 100%;
        flex-direction: column;
    }

    .k-header-right .k-header-other {
        color: black;
        font-size: 15px;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        gap: 25px;
    }


.k-header ul li.active {
    font-weight: bold;
}


.contactUs {
    background: #ef4a41;
    color: white !important;
    text-decoration: none;
    display: block;
    width: max-content !important;
    padding: 8px 22px;
    font-weight: bold;
    font-size: 18px;
}


.k-menuLinks .fa-angle-down {
    position: relative;
    top: 2px;
    left: 3.5px;
    transition: .25s;
}



.dropdownAc {
    position: relative;
}




    .dropdownAc::before {
        position: absolute;
        bottom: -30px;
        content: "";
        left: -5px;
        background: transparent;
        width: 100%;
        height: 30px;
        transition: .25s;
        border-radius: 15px;
    }


.open .fa-angle-down {
    transform: rotate(180deg) !important;
}


.dropdown {
    position: fixed;
    top: 75px;
    left: 0;
    width: 100%;
    transition: .20s;
    height: 100vh;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgb(214, 214, 214);
    z-index: -1;
    animation: opacity .35s;
    display: none;
}


@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.selecionado_opcion a {
    color: white;
    text-decoration: none;
}

.dropdownKutu {
    background: #f8f8f8;
    width: 82%;
    height: max-content;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: hidden;
    padding: 6px;
    border-bottom: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
}


.dropdownBaslikBg {
    width: 100%;
    padding: 0.80rem 1rem;
    padding-bottom: 8px !important;
}

    .dropdownBaslikBg h6 {
        margin: 0;
        padding: 0;
        font-weight: 500;
        font-size: 23.5px;
        font-weight: 400;
    }

.dropdownEnIcUl {
    display: flex;
    flex-direction: column;
    gap: 9px
}

    .dropdownEnIcUl li p {
        font-weight: lighter;
        margin-bottom: 3.5px;
        color: rgb(71, 71, 71);
        font-size: 13px;
    }

    .dropdownEnIcUl li {
        font-size: 20px;
        background: var(--renkHover);
        padding: 4px;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
    }

        .dropdownEnIcUl li i {
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 16px;
            color: #c81a21;
            transition: .5s;
            display: none;
        }

        .dropdownEnIcUl li.arrow i {
            display: block;
        }

.ustMenuChevron {
    position: absolute;
    right: 8px;
    top: 8px;
    opacity: 0;
    color: var(--renk);
    height: 20px;
    width: 20px;
}


.arrow .ustMenuChevron {
    opacity: 1;
}



.ustMenuImg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.ustMenuSlogan {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    color: white;
    font-size: 2rem;
    line-height: 1.25;
}

    .ustMenuSlogan.kalite {
        font-size: 7.5rem;
        color: white;
        opacity: .3;
        bottom: 2rem;
    }

.ustMenuBefore::before {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #3d190570;
    content: "";
    top: 0;
    left: 0;
}

.ustMenuKategoriler {
    height: 100%;
    position: relative;
    overflow: hidden;
    animation: opacity .80s;
}


    .ustMenuKategoriler::before {
        position: absolute;
        bottom: 0rem;
        right: 0.4rem;
        background-color: var(--renk);
        height: 2px;
        width: 50%;
        z-index: 55;
        content: "";
        animation: ustMenuRowAnim 1.90s;
        transform: translateX(-200%);
        z-index: 99999999;
    }

@keyframes ustMenuRowAnim {
    from {
        transform: translateX(-200%);
    }

    to {
        transform: translateX(200%);
    }
}

.urunDetayUl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: 10px;
    margin-top: 3px;
    padding-bottom: 3rem;
}

    .urunDetayUl li {
        width: 28%;
        margin-right: 10px;
        font-size: 19px;
        position: relative;
        padding-left: 4px;
    }

        .urunDetayUl li:hover::before {
            height: 6px;
            width: 6px;
            background: var(--renk2);
        }

        .urunDetayUl li::before {
            position: absolute;
            left: -10px;
            top: 12px;
            height: 4px;
            width: 4px;
            border-radius: 50%;
            content: "";
            background: var(--renk);
        }

.urunDetayRows .row {
    display: none;
}

    .urunDetayRows .row:first-child {
        display: block;
    }


.urunDetayRows {
    height: 100%;
}

.navLogo {
    height: 40px;
    position: absolute;
    padding: 5px;
}

.searchBar {
    height: 75px;
    background: white;
    border-top: 1px solid rgb(235, 235, 235);
    border-bottom: 1px solid rgb(235, 235, 235);
    display: flex;
    align-items: center;
}

.searchClose {
    position: absolute;
    right: 2.4rem;
}

.searchBarBg {
    position: fixed;
    width: 100%;
    transition: .50s;
    top: 0px;
    height: 100%;
    left: 0;
    display: none;
    animation: opacity .50s;
}

.accordion-body {
    overflow: hidden;
    padding: 5px;
}

.searchBarBackKapat {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #00000078;
}

.uygulamaSolMenu {
    padding: 1.5rem 1.4rem;
    background: #f5f5f5;
    height: 100%;
    border-right: 1px solid #e6e6e6;
}


.noT {
    top: 0% !important;
}

.uygulamaSolMenu li.active a {
    font-weight: 600;
    color: var(--renk);
}

.uygulamaSolMenu ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uygulamaSolMenu li {
    position: relative;
    padding-left: 13px;
}

    .uygulamaSolMenu li a:hover {
        color: var(--renk);
    }

    .uygulamaSolMenu li a {
        transition: .45s;
    }

    .uygulamaSolMenu li::before {
        height: 4px;
        width: 4px;
        position: absolute;
        left: 0;
        top: 10px;
        background: var(--renk);
        content: "";
        border-radius: 50%;
    }

.searchBar svg {
    width: 20px;
    height: auto;
    position: absolute;
    right: 9%;
    top: 11px;
    z-index: 99;
}

.searchBar .kapatbtn {
    width: 20px;
    height: auto;
    position: absolute;
    right: 3%;
    top: 11px;
}

.searchBar input {
    height: 100%;
    width: 90%;
    border: 0;
    margin-left: 30px;
    font-size: 17px;
    outline: none;
    border: 1px solid #f7f7f7;
    padding: 10px 15px;
    position: relative;
}


.icBanner {
    height: 60vh;
    padding-top: 80px;
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

    .icBanner::before {
        position: absolute;
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, white, white, transparent);
        content: "";
    }

.breadcrumbbb {
    color: gray;
    position: relative;
    z-index: 2;
}

    .breadcrumbbb span {
        color: black !important;
    }

.icBannerContent h4 {
    font-size: 2.5rem;
    margin-top: 5px;
    position: relative;
    padding-bottom: 15px;
    width: max-content;
}

    .icBannerContent h4::before {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: var(--renk);
        content: "";
        bottom: 0;
    }

    .icBannerContent h4::after {
        position: absolute;
        right: -7px;
        width: 8px;
        transform: rotate(45deg);
        height: 8px;
        background: var(--renk2);
        content: "";
        bottom: -3.7px;
    }

.icBannerContent p {
    color: gray;
    width: 60%;
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}

.kurumsalButons {
    background: var(--renk);
    display: flex;
    padding: 0 1rem;
    justify-content: center;
}


    .kurumsalButons a.active {
        background: var(--renk2);
        color: white;
        border-right: 6px solid white;
        border-left: 6px solid white;
    }

    .kurumsalButons a {
        border: none;
        color: white;
        /* border: 1px solid white; */
        padding: 15px 32px;
        text-align: center;
        width: 50%;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        /* margin: 0px 2px; */
        cursor: pointer;
        transition-duration: 0.4s;
        transform: skewX(-15deg);
        /* border-radius: 13px; */
        border-right: 1px solid white;
        border-left: 1px solid white;
    }

        .kurumsalButons a:hover {
            background: var(--renk2);
            color: white;
            border-right: 1px solid var(--renk2);
            border-left: 1px solid var(--renk2);
        }

        .kurumsalButons a span {
            transform: skew(33deg, 0deg) !important;
        }

.kurumsalButonsAlt {
    width: 70%;
    color: black;
}

.kurumsalButonsAltContainer {
    border-bottom-right-radius: 40px;
    padding-bottom: 1rem;
    border-bottom: 6px solid var(--renk);
    position: relative;
}



.urunlerBanner.hbr {
    height: 14rem;
}

.haberlereDon {
    border: 1px solid #d7d7d7;
    padding: 5px;
    transition: .50s;
}

    .haberlereDon:hover {
        background: #d7d7d7;
    }


.urunbreadcrnb {
    font-size: 14px !important;
}

.haberBaslik {
    display: flex;
    border-bottom: 1px solid #514f4f;
    padding-bottom: 6.5px;
}

.haberYanSolPad h3 {
    font-weight: 600;
}

.haberisim {
    color: var(--renk);
    font-weight: 600;
}

.haberDetayAPad {
    padding-top: 7.5rem;
}

.haberDetayNavPadColImg {
    padding: 0rem 11rem;
}

.haberYanSolPad {
    padding: 0rem 18rem;
}

.hbrTarihe {
    font-weight: 400 !important;
}

.haberBaslike {
    font-weight: 400 !important;
    color: var(--renk) !important;
    text-decoration: underline;
}

    .haberBaslike a {
        color: var(--renk);
    }

.haberBaslik.noborder {
    border: 0;
    margin-top: 10px;
    background: #f8f8f8;
    padding: 12px 5px;
}

.haberBaslik span {
    font-weight: 500;
    color: #514f4f;
}

    .haberBaslik span:first-child {
        width: 30%;
    }

    .haberBaslik span:last-child {
        width: 50%;
    }

.kurumsalFoto {
    padding: 0rem 7rem;
    border-radius: 15px;
}

.kurumsalicerik {
    display: flex;
    flex-direction: column;
    position: relative;
}

    .kurumsalicerik b {
        font-weight: 500;
        font-size: 1.5rem;
        margin-bottom: 7px;
    }

    .kurumsalicerik p {
        color: #5f5f5f;
    }


.ilgiliUrun img {
    height: 220px;
    width: 100%;
}

.ilgiliUrun {
    display: flex;
    flex-direction: column;
}

    .ilgiliUrun div {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


.ilgiliUrunButon {
    width: 100%;
    font-size: 14px;
    background-color: var(--renk);
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0;
}

.ilgiliSag {
    right: -2.25rem;
}

.ilgiliSol {
    left: -2.25rem;
}

    .ilgiliSol::after,
    .ilgiliSag::after {
        color: var(--renk);
        font-size: 30px;
    }


.urunlerBaslikCol.ic b {
    color: black;
}


.urunFoto {
    overflow: hidden;
}

#uruneBagli {
}


.omlsinks {
    margin-top: 33px !important;
    position: relative;
    height: 100% !important;
}

    .omlsinks span {
        font-weight: 300;
        bottom: 14px;
        left: 16px;
        font-size: 110px;
        color: var(--renk);
        z-index: 2;
        transition: .40s;
        color: transparent;
        z-index: 5;
        -webkit-text-stroke: 1px rgb(255 255 255);
        width: max-content;
        text-align: center;
    }

.omUygulamas span {
    font-family: "Bebas Neue", sans-serif;
}


.omUygulamas:hover span {
    color: white;
}

.omUygulamas {
    width: 100%;
    height: 80%;
    background: #ffffff8f;
    position: relative;
    background-position: center !important;
    background-size: cover !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accordion-button:not(.collapsed) {
    background-color: var(--renk);
    color: white;
}


.mySwiper6 {
    height: 150px;
}


.urunSekilsBg {
    background: #f0f0f0;
    padding: 3rem 0;
    margin-top: 50px;
    padding-top: 6rem;
}

.paketSekils span {
    font-weight: 400;
    font-size: 25px;
    margin-bottom: 4px;
    display: block;
}

.uygulRow {
    display: none;
    position: relative;
    animation: opacity .50s;
}


.uygulaRowiLi {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-wrap: wrap;
    height: 29rem;
}


    .uygulaRowiLi li {
        width: 70%;
        border: 1px solid white;
        border-radius: 30px;
        padding: 5px;
        padding-left: 15px;
        transition: .45s;
        cursor: pointer;
    }


        .uygulaRowiLi li:hover {
            background: white;
        }

#uygulaRowi {
    animation: opacity .50s;
}

.uygulaRowiLi li:hover a {
    color: var(--renk) !important;
}

    .uygulaRowiLi li:hover a::before {
        background: var(--renk);
    }

.uygulaRowiLi li a {
    transition: .45s;
    color: white !important;
    font-size: 15px;
    font-weight: 400;
    padding-left: 13.5px;
    position: relative;
    /* display: block; */
    width: 100%;
    height: 100%;
    display: block;
    /* padding: 3px 0; */
}

    .uygulaRowiLi li a::before {
        height: 5px;
        width: 5px;
        border-radius: 50%;
        background: white;
        position: absolute;
        content: "";
        top: 8.5px;
        transform: rotate(45deg);
        left: 0;
    }


#omClosee {
    cursor: pointer;
}


.uygulaRowiKapat {
    position: absolute;
    right: 0;
    width: max-content !important;
    left: inherit !important;
    top: 0 !important;
    -webkit-text-stroke: 0px rgb(255 255 255) !important;
    background: white;
    height: max-content;
    color: black !important;
    font-size: 17px !important;
    bottom: inherit;
    padding: 2px 15px;
    right: 50px;
    border-radius: 30px;
    cursor: pointer;
}


    .uygulaRowiKapat:hover {
        background: var(--renk2);
        color: white !important;
    }



.paketSekils p {
    color: gray;
}

.accordion-button {
    outline: none !important;
    box-shadow: none !important;
}

.omUygulamas:hover span {
    transform: translateX(7px);
}

.omUygulamas::before {
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    /* background: #0f5ba8a1; */
    transition: .45s;
    /* background: radial-gradient(circle, transparent 0%, transparent 50%, #0f5ba8 50%); */
    /* background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 47%, #0f5ba8 45%); */
    background: radial-gradient(circle, #0f5ba8 -9%, #0f5ba882 -100%, #0f5ba8 60%);
}

#uygulaRowi .col-6:first-child .omUygulamas {
    border-right: 1px solid #2d77c2;
}



.omUygulamas:hover::before {
}

.urunFoto::before {
    position: absolute;
    height: 500px;
    width: 500px;
    border-radius: 50%;
    content: "";
    left: -14rem;
    top: -2.5rem;
    z-index: -1;
    background-color: #8a350727;
}


.urunlerBanner.ola {
    height: 15rem;
}


.urunlerBanner {
    height: 18rem;
    display: flex;
    flex-direction: column;
    padding-top: 7rem;
}


    .urunlerBanner p {
        width: 80%;
    }

    .urunlerBanner h1 {
        color: var(--renk);
        font-weight: 300;
    }

.urunKutu {
    min-height: 600px;
    position: relative;
    overflow: hidden;
    background-size: cover !important;
    background-position: center;
}

    .urunKutu::before {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000085;
        content: "";
        transition: .50s;
        opacity: 0.50;
    }

    .urunKutu h5 {
        font-weight: 300;
        color: white;
        position: relative
    }

        .urunKutu h5::before {
            position: absolute;
            left: 0;
            bottom: -15px;
            width: 120px;
            height: 1px;
            background: white;
            content: "";
            transition: .40s;
            transition-delay: .60s;
        }


        .urunKutu h5::after {
            position: absolute;
            left: 0;
            bottom: 0px;
            width: 100%;
            height: 0%;
            background: var(--renk2);
            content: "";
            transition: .40s;
            z-index: -1;
        }


.urunText {
    position: absolute;
    bottom: 2rem;
    left: 1.5rem;
    transition: .35s;
}

    .urunText span {
        margin-top: 50px;
        display: block;
        color: white;
        width: 85%;
        transition: .40s;
        transition-delay: .60s;
        opacity: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.urunKutu:hover .urunText {
    transform: translateY(-1rem);
}

.urunKutu:hover::before {
    opacity: 1;
}




.urunKutu:hover h5::before {
    width: 100%;
}

.urunKutu:hover h5::after {
    height: 100%;
}

.urunKutu:hover span {
    opacity: 1;
}




.refBanner {
    height: auto;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 7rem;
    position: relative;
}

    .refBanner::before {
        position: absolute;
        right: 0;
        top: 0;
        content: "";
        height: 100%;
        width: 100%;
        background: #00000078;
        z-index: 0;
    }

.breadcrumbbb.ref {
    color: #cacaca;
}

    .breadcrumbbb.ref span {
        color: white !important;
    }



.refCont {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
}



.refImg {
    transition: .35s;
    cursor: pointer;
}

    .refImg:hover {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

    .refImg:hover {
    }

.refBanner p {
    width: 80%;
    color: white;
    position: relative;
}

.refBanner h1 {
    margin-top: 16px;
    color: white;
    font-weight: 300;
    position: relative;
}


.adava:nth-child(4n+1) {
    position: relative;
    top: 30px;
}

.adava:nth-child(4n-1) {
    position: relative;
    top: 30px;
}

.refBanner.iletisims {
    height: 22rem !important;
}

.refContent {
    background: #0f5ba8d6;
    padding: 25px;
    position: relative;
    bottom: 0rem;
    margin-top: 3rem;
    transition: .45s;
}


    .refContent:hover {
        transform: translateY(10px);
    }

    .refContent h5 {
        font-weight: 200;
        font-size: 2rem;
        color: white;
    }

.mySwiper7 {
    height: 150px;
}


.swepeCol {
    padding: 20px;
    background: white;
}

.refContent p {
    font-weight: 100;
    font-size: 1rem;
    color: white;
}




.ambalajiBaslikk {
    position: absolute;
    top: -3.5rem;
    color: var(--renk);
    font-size: 28px;
    font-weight: 500;
}


.ambalajBordi {
    border-right: 2px solid var(--renk);
}


.iletisimBanner h1 {
    color: var(--renk);
}



.iletisimBanner {
    padding-top: 4rem;
    padding-bottom: 2rem;
}


    .iletisimBanner h1 {
        font-weight: 300;
    }

    .iletisimBanner p {
        width: 90%;
        color: gray;
    }


.iletisimSosyal {
    height: 60px;
    width: 60px;
    background: white;
    color: var(--renk2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .30s;
}


.adresKutu {
    background: white;
    padding: 25px;
}

    .adresKutu i {
        font-size: 20px;
        color: var(--renk2);
    }

    .adresKutu div:first-child {
        display: flex;
        align-items: center;
    }


.iletisimSosyal:hover {
    background: var(--renk2);
    color: white;
}


.iletisimForm {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 3rem;
    padding: 39px;
    position: relative;
    z-index: 2;
    background: #efefef;
    margin-top: 36px;
}

.haritaKonumu {
    display: block;
    margin-top: 25px;
    color: var(--renk);
    font-size: 24px;
    font-weight: 400;
    position: relative;
    padding-left: 1rem;
}

    .haritaKonumu::before {
        position: absolute;
        left: 0;
        top: 15px;
        height: 5px;
        width: 5px;
        background: var(--renk);
        transform: rotate(45deg);
        content: "";
    }

.teklifMiAlcan a {
    color: white !important;
}

.teklifMiAlcan {
    position: absolute;
    right: 5rem;
    bottom: 0;
    width: auto;
    height: auto;
    color: white;
    background: #0f5ba8b5;
    padding: 15px 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-weight: 400;
}



.iletisimFormBorder {
    position: absolute;
    z-index: 0;
    right: -15px;
    bottom: -15px;
}

    .iletisimFormBorder::before {
        position: absolute;
        content: "";
        right: 0rem;
        bottom: 1rem;
        height: 1px;
        width: 80px;
        background: var(--renk);
    }



    .iletisimFormBorder::after {
        position: absolute;
        content: "";
        right: 1rem;
        bottom: 0rem;
        height: 80px;
        width: 1px;
        background: var(--renk);
    }

.iletisimForm::before {
    position: absolute;
    content: "";
    left: -1rem;
    top: 0rem;
    height: 1px;
    width: 80px;
    background: var(--renk);
}

.iletisimForm::after {
    position: absolute;
    content: "";
    top: -1rem;
    left: 0rem;
    height: 80px;
    width: 1px;
    background: var(--renk);
}

.iletisimForm div {
    display: flex;
    gap: 15px;
}

    .iletisimForm div input {
        width: 50%;
        background: transparent;
        outline: none;
        border: 0;
        border-bottom: 1.5px solid #d8d8d8;
        padding: 14px 0;
        font-weight: 300;
        transition: .50s;
    }

        .iletisimForm div input:focus {
            border-bottom: 1.5px solid var(--renk2);
            background: white;
            padding-left: 7px;
        }

    .iletisimForm div textarea:focus {
        border-bottom: 1.5px solid var(--renk2);
        background: white;
        padding-left: 7px;
    }

    .iletisimForm div textarea {
        width: 100%;
        background: transparent;
        outline: none;
        border: 0;
        border-bottom: 1.5px solid #d8d8d8;
        height: 14rem;
        resize: none;
        padding: 14px 0;
        font-weight: 300;
        transition: .50s;
    }

#verificationCode2 {
    background: var(--renk);
    color: white;
    padding: 12px 25px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    user-select: none;
}


.iletisimForm div input[type=button] {
    background: var(--renk) !important;
    color: white;
    transition: .20s;
    border-radius: 10px;
}

    .iletisimForm div input[type=button]:hover {
        background: var(--renk2) !important;
    }

.iletisimForm span {
    font-size: 32px;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 10px;
}



.iletisimBasariliContainer {
    height: 100vh;
}

.formiBg {
    background: var(--renk);
}

.basarili {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 15px;
    text-align: center;
    padding: 63px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 3px solid #e68f60;
}

    .basarili span {
        font-size: 40px;
        color: var(--renk);
    }

    .basarili p {
        margin-top: 1rem;
        margin-bottom: 1rem;
        color: gray;
    }

    .basarili a {
        background: var(--renk);
        color: white;
        padding: 10px 20px;
        border-radius: 15px;
        font-size: 13px;
        transition: .50s;
    }

        .basarili a:hover {
            opacity: .50;
        }

        .basarili a.urun {
            background: var(--renk2);
            color: white;
        }

.basariliALink {
    position: absolute;
    bottom: 1rem;
    display: flex;
    gap: 15px;
}

.basariliContent {
    position: relative;
    bottom: 15px;
}


.kategoriMenusu {
    font-size: 2rem;
    font-weight: 500;
    color: #e1e1e1;
    position: relative;
    top: 0.9rem;
    z-index: -1;
    font-weight: 400;
}


.leftMenu {
    padding: 15px !important;
    background-color: var(--renk);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding-left: 0;
}

    .leftMenu li a {
        color: white;
        padding-bottom: 6px
    }


.btn-toggle-nav {
    padding-left: 1rem !important;
}

.kategoriAltKutu {
    height: 416px;
    background-position: center !important;
    background-size: cover !important;
    position: relative;
    background-repeat: no-repeat !important;
}

.menuRsm {
    display: none;
}

.menuRsm2 {
    display: none;
}

    .menuRsm2:first-child {
        display: block;
    }

.menuRsm:first-child {
    display: block;
}






.kategoriAltKutu:hover::after {
    opacity: 1;
}


.kategoriAltKutuContent {
    position: absolute;
    bottom: 2.5rem;
    left: 1.3rem;
}

.kategoriAltKutu h4 {
    color: white;
    font-weight: 200;
    position: relative;
    z-index: 2;
}

    .kategoriAltKutu h4::before {
        position: absolute;
        height: 1px;
        width: 4rem;
        background: white;
        content: "";
        bottom: -15px;
        transition: .50s;
    }

.kategoriAltKutu:hover h4::before {
    width: 8rem !important;
}


.urunNavs {
    position: absolute;
    right: 0;
    top: 15px;
    gap: 7px;
    display: flex;
}

    .urunNavs a {
        background: var(--renk);
        color: white;
        padding: 14px 14px;
    }

        .urunNavs a.uruneBagli {
            background: var(--renk);
        }





.openMenu2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: var(--renk);
    z-index: 999;
    padding-top: 6rem;
    transition: opacity .40s;
    transform: translateY(-100%);
    overflow: hidden;
    opacity: 0;
}










.om1 {
    font-size: 2.7rem;
    color: white;
    font-weight: lighter;
    border-bottom: 1px solid #ffffff38;
    padding-bottom: 20px;
}


.omlinks {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    color: white;
    gap: 6px;
}

    .omlinks a {
        color: var(--renk);
        border: 1px solid #ffffff3d;
        padding: 5px;
        background: white;
        font-weight: 500;
        font-size: 15px;
        position: relative;
    }

.urunDty i {
    position: absolute;
    right: 1rem;
    top: 10px;
    opacity: 0;
}

.urunDty.arrow i {
    opacity: 1;
}

.urunDty.active {
    background: var(--renk2);
    color: white;
}

.urunDty2 i {
    position: absolute;
    right: 1rem;
    top: 10px;
    opacity: 0;
}

.urunDty2.arrow i {
    opacity: 1;
}

.urunDty2.active {
    background: var(--renk2);
    color: white;
}

.menuRsm {
    animation: opacity .50s;
}

.menuRsm2 {
    animation: opacity .50s;
}

.om-close {
    position: absolute;
    right: 0;
    cursor: pointer;
    top: 1.7rem;
}

    .om-close svg {
        width: 30px;
        height: 30px;
        fill: white;
        color: white;
    }


#omtab {
    position: absolute;
    top: 1.5rem;
    right: 3.2rem;
    z-index: 5;
    background: white;
    padding: 9px 20px;
    color: black;
    opacity: 0;
}

#omTab1 {
    animation: opacity .45s;
}

#omTab2 {
    animation: opacity .45s;
}


.urunlerSwiperBaslik {
    text-align: center;
    display: block;
    color: white;
    font-size: 34px;
    position: relative;
    top: -3rem;
    font-weight: 500;
    position: relative;
}


    .urunlerSwiperBaslik::before {
        position: absolute;
        width: 50%;
        height: 4px;
        background: white;
        content: "";
        left: 25%;
        border-radius: 11px;
        bottom: -10px;
    }


.urunlerSwiperBaslik2 {
    text-align: center;
    display: block;
    color: white;
    font-size: 34px;
    position: relative;
    font-weight: 500;
    position: relative;
}


    .urunlerSwiperBaslik2::before {
        position: absolute;
        width: 10%;
        height: 4px;
        background: white;
        content: "";
        left: 45%;
        border-radius: 11px;
        bottom: -10px;
    }

.urunSwiperKutuContent {
    height: 68px;
    background: white;
    position: relative;
    bottom: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    padding: 10px;
    text-align: center;
}

.swiperBatnPrev:hover, .swiperBatnNext:hover {
    background: white;
    color: var(--renk);
}


.swiperBgResim {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: -1;
}

.swiperBatnPrev {
    position: absolute;
    color: white;
    transition: .45s;
    bottom: -66px;
    border: 1px solid white;
    padding: 13px 13px;
    left: 1rem;
}

.swiperBatnNext {
    position: absolute;
    transition: .45s;
    color: white;
    bottom: -66px;
    right: 1rem;
    border: 1px solid white;
    padding: 13px 13px;
}


.urunSwiperButon {
    color: black;
    background: white;
    padding: 8px 20px;
    position: relative;
    top: 61px;
}

.swiperUrunKutu {
    height: 325px;
    background-size: cover !important;
    /* width: 300px; */
    position: relative;
    overflow: hidden;
}

.urunGruplariBg {
    background: var(--renk);
    padding: 7rem;
}

    .urunGruplariBg.uygulama {
        background: #f2f2f2;
    }


.urundetayBanner {
    padding-top: 6rem;
}


.urunDetayBaslik {
    color: var(--renk);
    font-size: 2.5rem;
    margin-top: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e6e6;
    display: block;
    transition: .50s;
}

#urunDropdownAc {
    display: block;
    padding-right: 2rem;
}

.urunDetayBaslik2 {
    color: var(--renk);
    font-size: 1.5rem;
    margin-top: 30px;
    display: block;
    font-weight: 500;
    position: relative;
    padding-left: 14px;
}

.urundetayText {
    width: 85%;
}

.urunDetayBaslik2::before {
    position: absolute;
    left: 0;
    top: 17px;
    height: 5px;
    width: 5px;
    background: var(--renk);
    transform: rotate(45deg);
    content: "";
}


.urundetayImg {
    position: relative;
    height: 466px;
}

    .urundetayImg:hover::before {
        left: 0;
        top: 0;
    }

    .urundetayImg::before {
        position: absolute;
        left: -1rem;
        transition: .60s;
        top: 1rem;
        height: 100%;
        width: 100%;
        content: "";
        background: #e9e9e9;
        z-index: -1;
    }

#dropdownKutusa {
    cursor: pointer;
}

.drdks {
    position: absolute;
    right: 20px;
    pointer-events: none !important;
    top: 17px;
    transition: .45s;
}



.urundetayDropdown {
    width: 30rem;
    height: 0%;
    display: none;
    background: var(--renk);
    position: absolute;
    flex-direction: column;
    gap: 8px;
    animation: opacity .60s;
    transition-delay: .20s !important;
    transition: .45s;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    z-index: 3;
}

.dropdownAdd {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 15px;
    background: var(--renk);
    color: white;
}



.urundetayDropdown span {
    font-size: 14px;
    color: white;
    padding-bottom: 6px;
    border-radius: 7px;
}

    .urundetayDropdown span a {
        color: white;
        width: 100%;
        display: block;
    }

    .urundetayDropdown span:hover {
        background: #ececec29
    }

    .urundetayDropdown span.active {
        background: var(--renk2);
        padding-left: 6px;
        border-radius: 7px;
    }


.load {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #1d1d1d;
    z-index: 99999999999999;
    display: none;
    justify-content: center;
    align-items: center;
    transition: 1s;
    overflow: hidden;
    flex-direction: column;
    top: 0;
    left: 0;
}

.navLogoLoad {
    width: 300px;
    height: 80px;
}


.load span {
    transform: skewX(-22deg);
    font-weight: bold;
    font-size: 6rem;
    font-family: "Heebo", sans-serif;
    background: var(--renk);
    color: white;
    padding: 0 4px;
    height: 0px;
    overflow: hidden;
    transition: 1.5s;
}

.slogan span {
    color: white !important;
    font-size: 2.5rem !important;
    height: max-content !important;
    margin-top: 20px;
    background: transparent !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    opacity: 0;
}

.slogan {
    color: white !important;
    font-size: 2.5rem !important;
    height: max-content !important;
    margin-top: 20px;
    background: transparent !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    opacity: 0;
}


.loadS {
    margin: 0 0px;
    padding: 0 20px !important;
    background: var(--renk2) !important;
    position: relative;
}

.loadcizikkutu {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 12.9px;
}

.loadcizik {
    height: 0%;
    transition: .45s;
    width: 3px;
    background: white;
}

.rightl {
    position: relative;
    right: 25px;
}

.leftl {
    position: relative;
    left: 24px;
}

#teklifListesi {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 120px;
}

    #teklifListesi li label {
        margin-left: 6px;
        font-weight: 500;
        color: #494949;
    }

.checkbox-wrapper {
    margin-bottom: 10px; /* Checkbox'lar arasında boşluk bırakır */
}

    .checkbox-wrapper input[type="checkbox"] {
        display: none;
    }

    .checkbox-wrapper .checkbox-label {
        display: inline-block;
        position: relative;
        padding-left: 25px; /* Checkbox genişliği için bir boşluk bırak */
        cursor: pointer;
    }

        /* Checkbox için özel stil */
        .checkbox-wrapper .checkbox-label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px; /* Checkbox genişliği */
            height: 20px; /* Checkbox yüksekliği */
            border: 2px solid #ccc; /* Checkbox kenarlığı */
            border-radius: 4px; /* Checkbox köşeleri yuvarla */
            background-color: #fff; /* Checkbox arka plan rengi */
        }

    /* Checkbox işaretini stillemek */
    .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label:before {
        background-color: var(--renk); /* Seçili checkbox arka plan rengi */
        border-color: var(--renk); /* Seçili checkbox kenar rengi */
    }

    /* Checkbox işaret */
    .checkbox-wrapper .checkbox-label:after {
        content: '\2713'; /* Unicode işaret */
        font-size: 16px;
        color: white; /* Checkbox işaret rengi */
        position: absolute;
        top: -2px;
        left: 5px;
        visibility: hidden; /* Başlangıçta işareti gizle */
    }

    /* Seçili checkbox için işaret görünür olacak */
    .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label:after {
        visibility: visible;
    }


.ambalajBtn {
    position: static !important;
    width: max-content;
    color: var(--renk);
    background: transparent;
    border: 0px !important;
    cursor: pointer;
    margin-top: 10px;
}

    .ambalajBtn svg {
        width: 25px;
        height: 25px;
        position: relative;
        bottom: 1px;
        transition: .25s;
    }


    .ambalajBtn:hover {
        background: var(--renk);
        filter: grayscale(60%);
        color: white !important;
    }

    .ambalajBtn:first-child:hover svg {
        transform: translateX(3.5px);
    }

    .ambalajBtn:last-child:hover svg {
        transform: translateX(-3.5px);
    }

.teklifAlButon {
    background: var(--renk);
    color: white !important;
    padding: 7px 20px;
    margin-top: 26px;
    width: max-content;
    display: block;
    right: 0;
    z-index: 2;
}

.teklifBar {
    height: 13px;
    bottom: -59px;
    width: 350px;
    position: absolute;
    border-radius: 20px;
    left: 0;
    background: white;
    border: 1px solid var(--renk);
    position: relative;
    overflow: hidden;
    transition: .30s;
}

.teklifBarDol div {
    width: 3px;
    background: white;
    opacity: .40;
    transform: rotate(25deg);
    height: 200%;
    position: relative;
    top: -8px;
    display: inline-block;
}

.tumUrunlerSecildi {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    color: white;
    font-weight: 500;
    display: block;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #0f5ba8bd;
    height: 100%;
    align-items: center;
}


.teklifBarDol {
    height: 100%;
    width: 0%;
    transition: .15s;
    background: var(--renk);
}

#teklifBar {
    opacity: 0;
}


.anaLoadd {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--renk);
    z-index: 99999999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-11 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

#anaLoad {
    transition: .45s;
}

.loader-11:after, .loader-11:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #FF3D00 #FF3D00;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: rotationBack 0.5s linear infinite;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}

.loader-11:before {
    width: 32px;
    height: 32px;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1.5s linear infinite;
    animation: rotation 1.5s linear infinite;
}

.teklifAlin {
    color: var(--renk);
    font-weight: 400;
    font-size: 40px;
}


.teklifYazi {
    color: gray;
}


.loader-18 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

    .loader-18:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border-bottom: 4px solid #FF3D00;
        border-left: 4px solid transparent;
    }

#search-barke {
    width: 100%;
}

.aramaSonuc {
    background: white;
    padding: 14px 15px;
    border-bottom: 3px solid var(--renk);
    margin-top: 8px;
}

    .aramaSonuc b {
        color: var(--renk);
        font-weight: 600;
        font-size: 20px;
    }



.searchMargins {
    margin-top: 32px;
}

.farkliArama {
    margin-bottom: 7px;
    display: block;
}

.mobilNav {
    display: none;
}

.urunlerSwiperBaslik.uygulama {
    color: var(--renk);
}

    .urunlerSwiperBaslik.uygulama::before {
        background: var(--renk);
    }

.urunlerSwiperBaslik2.uygulama {
    color: var(--renk);
}

    .urunlerSwiperBaslik2.uygulama::before {
        background: var(--renk);
    }

.urunSwiperButon.uygulama {
    background: var(--renk);
    color: white;
}

.swiperBatnNext.uygulama {
    background: var(--renk);
    border: 1px solid transparent;
}

.swiperBatnPrev.uygulama {
    background: var(--renk);
    border: 1px solid transparent;
}

.hbrbox img {
    height: 180px;
}

.swiperBatnNext.uygulama:hover {
    background: white;
    color: var(--renk);
}

.swiperBatnPrev.uygulama:hover {
    background: white;
    color: var(--renk);
}

.carousel-control-next, .carousel-control-prev {
    z-index: 25;
}

.carousel-item {
    height: 100vh;
}

.ust img {
    height: 100%;
}

.alt {
    padding: 30px;
    height: 70%;
    color: #505050;
}

.ust span {
    font-size: 40px;
}

.ust {
    height: 10rem;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9rem;
}

.fancybox__container {
    z-index: 99999 !important;
}

.urnMbl {
    padding-left: 17px;
    padding-top: 6px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

#urnMbicon.active {
    transform: rotate(180deg);
}

.news-title {
    display: block;
    text-align: center;
}

.uygulama-title {
    text-align: center;
}

.ynBaslik {
    color: var(--renk);
    margin-top: 10px;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 19px;
    position: relative;
    top: 4px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 4px;
        bottom: 2px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background-color: #4CAF50;
}

    input:checked + .slider:before {
        transform: translateX(17px);
    }


.popUp {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 31rem;
    background-color: red;
    font-family: "Inter", sans-serif !important;
    background-color: #f6f6f6;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    padding: 20px 29px;
    height: max-content;
    overflow-y: auto;
    border: 1px solid #e7e7e7;
    z-index: 99999;
}

    .popUp b {
        color: black;
    }

    .popUp p {
        font-size: 13px;
        color: #4f4f4f;
        margin-top: 3px;
    }

    .popUp button {
        background-color: #172983;
        font-size: 16px;
        padding: 4px 20px;
        border-radius: 6px;
        font-weight: 350;
        transition: .25s;
        color: white;
    }

        .popUp button:hover {
            opacity: .5;
        }

.buttonFlex {
    display: flex;
    gap: 6px;
}

.popUpSettings {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000052;
    z-index: 999999;
    display: none;
    font-family: "Inter", sans-serif !important;
    justify-content: center;
    align-items: center;
    animation: opacity .3s;
}

.settings {
    width: 90%;
    max-width: 700px;
    max-height: 600px;
    background-color: #f6f6f6;
    padding: 25px 30px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    overflow: auto;
    position: relative;
}

    .settings b {
        color: black;
    }

    .settings p {
        color: #4f4f4f;
        font-size: 15px;
        margin-top: 3px;
        margin-bottom: 0;
    }

.cerezler {
    display: flex;
    flex-direction: column;
    gap: 2.3rem;
    margin-top: 1.7rem;
}

.cerezBg {
}

.cerezFirst {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.cerezSecond {
    background-color: #91fb91;
    display: flex;
    width: max-content;
    padding: 3px 8px;
}

    .cerezSecond p {
        margin: 0;
        color: rgb(49, 49, 49);
    }

    .cerezSecond span {
        font-size: 15px;
        color: rgb(24, 24, 24);
        margin-right: 7px;
        background: #00000021;
        padding: 0 10px;
    }

.cerezlerFlex {
    display: flex;
    gap: 7px;
    margin-left: 58px;
    margin-top: 8px;
}

.geriDon {
    background-color: #91fb91;
    font-size: 16px;
    padding: 4px 20px;
    border-radius: 6px;
    font-weight: 600;
    width: max-content;
    transition: .25s;
}

    .geriDon:hover {
        opacity: .5;
    }

.buttonSag {
    display: flex;
    align-items: end;
    margin-top: 2rem;
    position: sticky;
    bottom: 0;
    width: 100%;
    right: 1rem;
    flex-direction: column;
    gap: 10px;
}

button {
    border: 0;
}

@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@media(max-width:991px) {

    .popUp {
        position: fixed;
        bottom: 2rem;
        right: 0;
        width: 96%;
        background-color: red;
        font-family: "Inter", sans-serif !important;
        background-color: #f6f6f6;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        padding: 20px 29px;
        height: max-content;
        overflow-y: auto;
        border: 1px solid #e7e7e7;
        z-index: 99999;
        margin: 0 2%;
    }


    .urundetayImg img {
        height: 20rem;
    }

    li#urnMbAc {
        padding-left: 40px;
        padding-right: 5px;
    }


    .urundetayImg {
        position: relative;
        height: 100%;
    }

    .iletisimForm div {
        display: flex;
        gap: 15px;
        flex-direction: column;
        width: 100%;
    }

        .iletisimForm div input {
            width: 100%;
        }

    .svGi {
        justify-content: center;
    }

    .kapatbtn {
        display: none;
    }

    .refAcilPopContent .bx-x {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        font-size: 31px;
    }

    .ust span {
        font-size: 30px;
    }

    .refAcilPopContent {
        width: 90%;
        position: relative;
        background: white;
        animation: opacity 1s;
        height: 70%;
    }

    .alt {
        padding: 14px;
        height: 80%;
        color: #505050;
        font-size: 15px;
        overflow: auto;
    }

    .ust {
        height: 20%;
        gap: 0;
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .ilgiliUrun div div {
        height: 42px;
    }

    footer .footalttext {
        text-align: center;
        margin-bottom: 0px;
    }

    .swiperBatnPrev {
        padding: 7px 7px;
    }

    .swiperBatnNext {
        padding: 7px 7px;
    }

    .refAcilanText {
        display: none !important;
    }

    .urunSwiperKutuContent {
        font-size: 12px;
    }

    .mobilBgClose {
        background: #0000006b;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        transform: translateX(-14rem);
        transition: 1s;
        animation: opacity 1s;
        display: none;
    }

    .swiperUrunKutu {
        height: 200px;
    }

    .urunSwiperKutuContent {
        height: 51px;
    }

    #urunDropdownAc {
        display: block;
        padding-right: 55px;
    }

    .socialsFlex {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        gap: 13px;
    }

        .socialsFlex a {
            background: var(--renk);
            color: white;
            padding: 6px;
            border-radius: 50%;
            height: 30px;
            width: 30px;
            display: flex !important;
            justify-content: center !important;
            /* align-items: center; */
            font-size: 14px;
        }

    .teklifBtnMv {
        color: white;
        /* position: absolute; */
        bottom: 0;
        width: 100%;
        margin-top: 15px;
    }

        .teklifBtnMv a {
            background: var(--renk);
            padding: 6px 20px;
            display: flex !important;
            justify-content: center !important;
            color: white !important;
        }

    .mobilNav ul li a .bx.bx-chevron-right {
        color: #b7b7b7;
        font-size: 25px;
        display: none;
    }

    .mobilNav ul li a {
        display: flex;
        align-items: center;
        /* width: 500px; */
        justify-content: space-between;
    }

        .mobilNav ul li a:hover {
            transform: scale(1.03);
            font-weight: 400;
        }


    .mobilNav ul li:first-child {
        /* border-top: 1px solid lightgray; */
    }

    .mobilNav ul li {
        font-size: 19px;
        padding: 9px 40px;
        /* border-bottom: 1px solid lightgray; */
        color: black;
        font-weight: 300;
        background: #ffffff;
    }

    .mobilNav ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: 13px;
        background: white;
        height: 100%;
        backdrop-filter: blur(2px);
        padding-bottom: 75px;
    }

    .mobilLang {
        position: absolute;
        bottom: 1rem;
        font-size: 18px;
        display: flex;
        gap: 20px;
        font-weight: 500;
        width: 100%;
        align-items: end;
        padding: 0px 20px;
        justify-content: space-between;
    }

    .mbCerezy {
        display: flex;
        flex-direction: column;
    }

        .mbCerezy a {
            color: gray !important;
            font-size: 14px;
        }



    .mobilNav {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 9992;
        padding-top: 75px;
        display: flex;
        justify-content: end;
    }

    .ArananKelime {
        margin-top: 16px;
    }


    .bx-menu {
        font-size: 40px;
        color: var(--renk);
    }

    .bx-x {
        font-size: 40px;
        color: var(--renk);
    }

    .mobilhamb {
        position: absolute;
        right: 19px;
        top: 7.5px;
        z-index: 2;
        display: block;
    }

        .mobilhamb svg {
            height: 42px;
            color: var(--renk);
            width: auto;
        }

    .mobilOverflow {
        overflow: hidden;
    }

    .urunSekilsBg {
        overflow: hidden;
    }


    .swiper {
        overflow: hidden;
    }

    .kurumsalButons a {
        border: none;
        background: #3083d6;
        color: white;
        /* border: 1px solid white; */
        padding: 15px 32px;
        text-align: center;
        width: 50%;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        /* margin: 0px 2px; */
        cursor: pointer;
        transition-duration: 0.4s;
        transform: skewX(-15deg);
        border-radius: 13px;
        border-right: 0px solid white;
        border-left: 0px solid white;
        margin-top: 5px;
    }

    .uygulamaGaleri iframe {
        height: 250px;
        width: 100%;
    }

    .om1 {
        font-size: 1.7rem;
        color: white;
        font-weight: lighter;
        border-bottom: 1px solid #ffffff38;
        padding-bottom: 20px;
        display: block;
        margin-top: 13px;
        width: 80%;
    }

    .menuRsm2 {
        height: 10rem;
        object-fit: cover;
    }

    .om-close {
        position: absolute;
        right: 20px;
        cursor: pointer;
        top: 1.7rem;
    }

    .urundetayDropdown {
        width: 18rem;
    }

    .urunlerBanner h1 {
        color: var(--renk);
        font-weight: 300;
        margin-top: 11px;
    }

    .mobileOmFlex {
        display: flex;
        justify-content: center;
    }

    #omtab {
        position: static;
        top: 1.5rem;
        right: 3.2rem;
        z-index: 5;
        background: white;
        padding: 9px 20px;
        color: black;
        opacity: 0;
    }

    .omlsinks span {
        font-weight: 300;
        bottom: 14px;
        left: 16px;
        font-size: 48px;
        color: var(--renk);
        z-index: 2;
        transition: .40s;
        color: white;
        z-index: 5;
        -webkit-text-stroke: 0px rgb(255 255 255);
        width: max-content;
        text-align: center;
    }

    .urunNavs {
        position: static;
        right: 0;
        top: 15px;
        gap: 7px;
        display: flex;
        /* text-align: center; */
        justify-content: center;
        margin-top: 20px;
    }

    .swepeCol:last-child {
        margin-top: 100px;
    }

    .urunlerBanner.ola {
        height: 19rem;
    }

    bi-file-earmark-check {
        position: relative;
        top: 20px;
    }

    .svGi svg {
        position: relative;
        top: 55px;
    }

    .haberYanSolPad {
        padding: 0;
        padding-left: 1rem;
    }

    .haberDetayNavPadColImg {
        padding: 0rem 1rem;
    }

    .kurumsalFoto {
        padding: 0rem 0rem;
        border-radius: 15px;
    }

    .kurumsalicerik {
        display: flex;
        flex-direction: column;
        padding: 8px !important;
    }

    .kurumsalButons a.active {
        background: var(--renk2);
        color: white;
        border-right: 0px solid white;
        border-left: 0px solid white;
    }

    .kurumsalButons {
        background: var(--renk);
        display: flex;
        padding: 9px 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }



    .icBannerContent p {
        color: gray;
        width: 80%;
        margin-top: 1rem;
        position: relative;
        z-index: 2;
        font-size: 14px;
        /* width: 100%; */
        color: black;
    }

    .icBannerContent h4 {
        font-size: 24px;
    }

    .footerMargin {
        margin-bottom: 0;
    }

    footer {
        background: rgb(122, 122, 122);
        background: linear-gradient(180deg, rgb(24 14 14 / 67%) 0%, rgb(83 83 83) 50%, rgb(27 27 27) 100%);
        width: 100%;
        padding: 25px 0 0px 0;
        position: relative;
    }

        footer .footul {
            padding: 0;
            margin: 20px 0 0 0;
            position: relative;
            height: max-content;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            margin-top: 1rem;
            margin-bottom: 2rem;
        }

    .footerFixed {
        position: static;
    }

    section.type .row > div.grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .urunGruplariBg {
        background: #0f5ba8de;
        padding-bottom: 6rem;
        padding: 0rem;
        padding-top: 5rem;
        padding-bottom: 7rem;
    }

    .uygulamabg {
        padding: 10px;
    }

    .aboutdiv {
        padding: 0;
    }

    .carousel-caption-bg p {
        font-size: 18px;
        font-weight: 400;
    }

    .carousel-caption-bg h5 {
        font-size: 33px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .carousel-caption-bg {
        display: block !important;
        width: 100%;
        left: 1rem;
        padding-right: 4rem;
        padding-left: 2rem;
    }

    section .type .row > div.grid {
        display: block;
    }

    .carousel-item {
        height: 100vh;
    }

        .carousel-item img {
            height: 100vh;
            object-fit: cover;
        }

    .navLogo {
        padding: 11px;
    }

    .k-header ul.k-menuLinks {
        display: none;
    }

    #mobilnav {
        transition: .35s;
        transform: translateX(100%);
    }

    .mobildeYokk {
        display: none;
    }

    .urunlerBanner p {
        width: 100%;
    }

    .urunlerBanner {
        height: max-content;
    }

    .searchBar svg {
        right: 4.6rem;
    }

    .searchBar .kapatbtn {
        right: 17%;
    }

    .mobilSerache {
        margin-right: 40px;
    }

    .load span {
        transform: skewX(-22deg) scale(0.8);
        font-weight: bold;
        font-size: 4rem;
        font-family: "Heebo", sans-serif;
        background: var(--renk);
        color: white;
        padding: 0 4px;
        height: 0px;
        overflow: hidden;
        transition: 1.5s;
        height: 95px !important;
    }

    .slogan span {
        text-align: center;
        font-size: 26px !important;
    }
}
/* keyFrames */
@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes rotationBreak {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBreak {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes zeroRotation {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(0) rotate(360deg);
    }
}

@keyframes zeroRotation {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(0) rotate(360deg);
    }
}

@-webkit-keyframes shadowExpandX {
    0% {
        box-shadow: 0 0, 0 0;
        color: rgba(255, 255, 255, 0.2);
    }

    100% {
        box-shadow: -24px 0, 24px 0;
        color: rgba(255, 255, 255, 0.8);
    }
}

@keyframes shadowExpandX {
    0% {
        box-shadow: 0 0, 0 0;
        color: rgba(255, 255, 255, 0.2);
    }

    100% {
        box-shadow: -24px 0, 24px 0;
        color: rgba(255, 255, 255, 0.8);
    }
}

@-webkit-keyframes shadowPulse {
    33% {
        background: #FFF;
        box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
    }

    66% {
        background: #FF3D00;
        box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    }

    100% {
        background: #FFF;
        box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
    }
}

@keyframes shadowPulse {
    33% {
        background: #FFF;
        box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
    }

    66% {
        background: #FF3D00;
        box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    }

    100% {
        background: #FFF;
        box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
    }
}

@-webkit-keyframes shadowRolling {
    0% {
        box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }

    12% {
        box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }

    36% {
        box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
    }

    62% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
    }

    75% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
    }

    87% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
    }

    100% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
    }
}

@keyframes shadowRolling {
    0% {
        box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }

    12% {
        box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }

    36% {
        box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
    }

    62% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
    }

    75% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
    }

    87% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
    }

    100% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader14 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

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

@keyframes animloader14 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

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

@-webkit-keyframes scale50 {
    0%, 100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes scale50 {
    0%, 100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

@-webkit-keyframes scaleOut {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes scaleOut {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes animloader27 {
    0%, 100% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes animloader27 {
    0%, 100% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes animloader28 {
    0% {
        box-shadow: -72px 0 #FFF inset;
    }

    100% {
        box-shadow: 48px 0 #FFF inset;
    }
}

@keyframes animloader28 {
    0% {
        box-shadow: -72px 0 #FFF inset;
    }

    100% {
        box-shadow: 48px 0 #FFF inset;
    }
}

@-webkit-keyframes animloader38 {
    50% {
        transform: scale(1) translate(-50%, -50%);
    }
}

@keyframes animloader38 {
    50% {
        transform: scale(1) translate(-50%, -50%);
    }
}

@-webkit-keyframes animloader42 {
    0% {
        box-shadow: -38px -6px, -14px 6px, 14px -6px;
    }

    33% {
        box-shadow: -38px 6px, -14px -6px, 14px 6px;
    }

    66% {
        box-shadow: -38px -6px, -14px 6px, 14px -6px;
    }

    100% {
        box-shadow: -38px 6px, -14px -6px, 14px 6px;
    }
}

@keyframes animloader42 {
    0% {
        box-shadow: -38px -6px, -14px 6px, 14px -6px;
    }

    33% {
        box-shadow: -38px 6px, -14px -6px, 14px 6px;
    }

    66% {
        box-shadow: -38px -6px, -14px 6px, 14px -6px;
    }

    100% {
        box-shadow: -38px 6px, -14px -6px, 14px 6px;
    }
}

@-webkit-keyframes animloader44 {
    0% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }

    25% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
    }

    50% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
    }

    75% {
        box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }

    100% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }
}

@keyframes animloader44 {
    0% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }

    25% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
    }

    50% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
    }

    75% {
        box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }

    100% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }
}

@-webkit-keyframes animloader45 {
    0% {
        box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
    }

    33% {
        box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
    }

    66% {
        box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
    }

    100% {
        box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
    }
}

@keyframes animloader45 {
    0% {
        box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
    }

    33% {
        box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
    }

    66% {
        box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
    }

    100% {
        box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
    }
}

@-webkit-keyframes animloader46 {
    0% {
        background: white;
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    14% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    28% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    42% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    57% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    71% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    85% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
    }

    100% {
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }
}

@keyframes animloader46 {
    0% {
        background: white;
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    14% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    28% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    42% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    57% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    71% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }

    85% {
        background: rgba(255, 255, 255, 0);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
    }

    100% {
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader34 {
    0% {
        border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
    }

    33% {
        border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
    }

    66% {
        border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
    }

    100% {
        border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
    }
}

@keyframes animloader34 {
    0% {
        border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
    }

    33% {
        border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
    }

    66% {
        border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
    }

    100% {
        border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
    }
}

@-webkit-keyframes animloader51 {
    0% {
        border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }

    33% {
        border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }

    66% {
        border-color: white white white rgba(255, 255, 255, 0);
    }

    100% {
        border-color: white white white white;
    }
}

@keyframes animloader51 {
    0% {
        border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }

    33% {
        border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }

    66% {
        border-color: white white white rgba(255, 255, 255, 0);
    }

    100% {
        border-color: white white white white;
    }
}

@-webkit-keyframes animloader57 {
    0% {
        box-shadow: 0 0, 0 0, 0 0;
    }

    33% {
        box-shadow: 24px 0px, 24px 0px, 24px 0px;
    }

    66% {
        box-shadow: 24px 24px, 24px 24px, 24px 0px;
    }

    100% {
        box-shadow: 0px 24px, 24px 24px, 24px 0px;
    }
}

@keyframes animloader57 {
    0% {
        box-shadow: 0 0, 0 0, 0 0;
    }

    33% {
        box-shadow: 24px 0px, 24px 0px, 24px 0px;
    }

    66% {
        box-shadow: 24px 24px, 24px 24px, 24px 0px;
    }

    100% {
        box-shadow: 0px 24px, 24px 24px, 24px 0px;
    }
}

@-webkit-keyframes animloader58 {
    0%, 32% {
        box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    33%, 65% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    66%, 99% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
    }
}

@keyframes animloader58 {
    0%, 32% {
        box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    33%, 65% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    66%, 99% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
    }
}

@-webkit-keyframes animloader58m {
    0% {
        transform: translate(0, 0) rotateX(0) rotateY(0);
    }

    33% {
        transform: translate(100%, 0) rotateX(0) rotateY(180deg);
    }

    66% {
        transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
    }

    100% {
        transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
    }
}

@keyframes animloader58m {
    0% {
        transform: translate(0, 0) rotateX(0) rotateY(0);
    }

    33% {
        transform: translate(100%, 0) rotateX(0) rotateY(180deg);
    }

    66% {
        transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
    }

    100% {
        transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
    }
}

@-webkit-keyframes flipX {
    0% {
        transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
    }

    100% {
        transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
    }
}

@keyframes flipX {
    0% {
        transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
    }

    100% {
        transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
    }
}

@-webkit-keyframes fill {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 0 -48px inset;
    }
}

@keyframes fill {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 0 -48px inset;
    }
}

@-webkit-keyframes fillX {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 48px 0 inset;
    }
}

@keyframes fillX {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 48px 0 inset;
    }
}

@-webkit-keyframes animloader56 {
    0% {
        transform: translate(0, 0) rotateX(0) rotateY(0);
    }

    25% {
        transform: translate(100%, 0) rotateX(0) rotateY(180deg);
    }

    50% {
        transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
    }

    75% {
        transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
    }

    100% {
        transform: translate(0, 0) rotateX(0) rotateY(360deg);
    }
}

@keyframes animloader56 {
    0% {
        transform: translate(0, 0) rotateX(0) rotateY(0);
    }

    25% {
        transform: translate(100%, 0) rotateX(0) rotateY(180deg);
    }

    50% {
        transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
    }

    75% {
        transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
    }

    100% {
        transform: translate(0, 0) rotateX(0) rotateY(360deg);
    }
}

@-webkit-keyframes animloader59 {
    0% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    12% {
        box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    37% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
    }

    62% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
    }

    75% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
    }

    87% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
    }

    100% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }
}

@keyframes animloader59 {
    0% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    12% {
        box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }

    37% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
    }

    62% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
    }

    75% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
    }

    87% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
    }

    100% {
        box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader60 {
    0% {
        top: 0;
        color: white;
    }

    50% {
        top: 30px;
        color: rgba(255, 255, 255, 0.2);
    }

    100% {
        top: 0;
        color: white;
    }
}

@keyframes animloader60 {
    0% {
        top: 0;
        color: white;
    }

    50% {
        top: 30px;
        color: rgba(255, 255, 255, 0.2);
    }

    100% {
        top: 0;
        color: white;
    }
}

@-webkit-keyframes animloader61 {
    0% {
        height: 48px;
    }

    100% {
        height: 4.8px;
    }
}

@keyframes animloader61 {
    0% {
        height: 48px;
    }

    100% {
        height: 4.8px;
    }
}

@-webkit-keyframes animloader61m {
    0% {
        height: 40px;
        transform: translateY(0);
    }

    100% {
        height: 10px;
        transform: translateY(30px);
    }
}

@keyframes animloader61m {
    0% {
        height: 40px;
        transform: translateY(0);
    }

    100% {
        height: 10px;
        transform: translateY(30px);
    }
}

@-webkit-keyframes animloader63 {
    0% {
        box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
    }

    50% {
        box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
    }

    100% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
    }
}

@keyframes animloader63 {
    0% {
        box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
    }

    50% {
        box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
    }

    100% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
    }
}

@-webkit-keyframes animloader64 {
    0% {
        box-shadow: 20px -10px, 40px 10px, 60px 0px;
    }

    25% {
        box-shadow: 20px 0px, 40px 0px, 60px 10px;
    }

    50% {
        box-shadow: 20px 10px, 40px -10px, 60px 0px;
    }

    75% {
        box-shadow: 20px 0px, 40px 0px, 60px -10px;
    }

    100% {
        box-shadow: 20px -10px, 40px 10px, 60px 0px;
    }
}

@keyframes animloader64 {
    0% {
        box-shadow: 20px -10px, 40px 10px, 60px 0px;
    }

    25% {
        box-shadow: 20px 0px, 40px 0px, 60px 10px;
    }

    50% {
        box-shadow: 20px 10px, 40px -10px, 60px 0px;
    }

    75% {
        box-shadow: 20px 0px, 40px 0px, 60px -10px;
    }

    100% {
        box-shadow: 20px -10px, 40px 10px, 60px 0px;
    }
}

@-webkit-keyframes animloader65 {
    0% {
        box-shadow: -10px 20px, 10px 35px, 0px 50px;
    }

    25% {
        box-shadow: 0px 20px, 0px 35px, 10px 50px;
    }

    50% {
        box-shadow: 10px 20px, -10px 35px, 0px 50px;
    }

    75% {
        box-shadow: 0px 20px, 0px 35px, -10px 50px;
    }

    100% {
        box-shadow: -10px 20px, 10px 35px, 0px 50px;
    }
}

@keyframes animloader65 {
    0% {
        box-shadow: -10px 20px, 10px 35px, 0px 50px;
    }

    25% {
        box-shadow: 0px 20px, 0px 35px, 10px 50px;
    }

    50% {
        box-shadow: 10px 20px, -10px 35px, 0px 50px;
    }

    75% {
        box-shadow: 0px 20px, 0px 35px, -10px 50px;
    }

    100% {
        box-shadow: -10px 20px, 10px 35px, 0px 50px;
    }
}

@-webkit-keyframes animloader66 {
    0% {
        width: 4.8px;
    }

    100% {
        width: 48px;
    }
}

@keyframes animloader66 {
    0% {
        width: 4.8px;
    }

    100% {
        width: 48px;
    }
}

@-webkit-keyframes animloader68 {
    0% {
        box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    20% {
        box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    40% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    60% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    80% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
    }
}

@keyframes animloader68 {
    0% {
        box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    20% {
        box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    40% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    60% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
    }

    80% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
    }
}

@-webkit-keyframes animloader69 {
    0% {
        width: 20px;
    }

    100% {
        width: 48px;
    }
}

@keyframes animloader69 {
    0% {
        width: 20px;
    }

    100% {
        width: 48px;
    }
}

@-webkit-keyframes animloader71 {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}

@keyframes animloader71 {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}

@-webkit-keyframes animloader89 {
    0% {
        box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
    }

    75% {
        box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
    }
}

@keyframes animloader89 {
    0% {
        box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
    }

    25% {
        box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
    }

    75% {
        box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
    }
}

@-webkit-keyframes animloader91 {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 0 -70px inset;
    }
}

@keyframes animloader91 {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 0 -70px inset;
    }
}

@-webkit-keyframes animloader92 {
    0% {
        box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
    }

    100% {
        box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
    }
}

@keyframes animloader92 {
    0% {
        box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
    }

    100% {
        box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader93 {
    0% {
        transform: rotate(-70deg);
    }

    10% {
        transform: rotate(-40deg);
    }

    20%, 45%, 35% {
        transform: rotate(-10deg);
    }

    40%, 30% {
        transform: rotate(-30deg);
    }

    50%, 60% {
        transform: rotate(20deg);
    }

    55%, 65%, 75% {
        transform: rotate(40deg);
    }

    70% {
        transform: rotate(45deg);
    }

    85%, 90% {
        transform: rotate(50deg);
    }

    95% {
        transform: rotate(75deg);
    }

    100%, 93% {
        transform: rotate(70deg);
    }
}

@keyframes animloader93 {
    0% {
        transform: rotate(-70deg);
    }

    10% {
        transform: rotate(-40deg);
    }

    20%, 45%, 35% {
        transform: rotate(-10deg);
    }

    40%, 30% {
        transform: rotate(-30deg);
    }

    50%, 60% {
        transform: rotate(20deg);
    }

    55%, 65%, 75% {
        transform: rotate(40deg);
    }

    70% {
        transform: rotate(45deg);
    }

    85%, 90% {
        transform: rotate(50deg);
    }

    95% {
        transform: rotate(75deg);
    }

    100%, 93% {
        transform: rotate(70deg);
    }
}

@-webkit-keyframes animloader94 {
    0% {
        transform: translate(-10px, -10px);
    }

    25% {
        transform: translate(-10px, 10px);
    }

    50% {
        transform: translate(10px, 10px);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(-10px, -10px);
    }
}

@keyframes animloader94 {
    0% {
        transform: translate(-10px, -10px);
    }

    25% {
        transform: translate(-10px, 10px);
    }

    50% {
        transform: translate(10px, 10px);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(-10px, -10px);
    }
}

@-webkit-keyframes animloader98 {
    0% {
        background-position: 0px 80px;
    }

    100% {
        background-position: 0px 0px;
    }
}

@keyframes animloader98 {
    0% {
        background-position: 0px 80px;
    }

    100% {
        background-position: 0px 0px;
    }
}

@-webkit-keyframes animloader98s {
    0% {
        box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
    }

    20% {
        box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
    }

    40% {
        box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
    }

    60% {
        box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
    }

    80% {
        box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
    }
}

@keyframes animloader98s {
    0% {
        box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
    }

    20% {
        box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
    }

    40% {
        box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
    }

    60% {
        box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
    }

    80% {
        box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader99 {
    0% {
        box-shadow: 0px 0px inset;
    }

    100% {
        box-shadow: 0px -80px inset;
    }
}

@keyframes animloader99 {
    0% {
        box-shadow: 0px 0px inset;
    }

    100% {
        box-shadow: 0px -80px inset;
    }
}

@-webkit-keyframes animloader100 {
    0% {
        box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
    }

    50% {
        box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
    }
}

@keyframes animloader100 {
    0% {
        box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
    }

    50% {
        box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader105 {
    0% {
        height: 64px;
    }

    90%, 100% {
        height: 0px;
    }
}

@keyframes animloader105 {
    0% {
        height: 64px;
    }

    90%, 100% {
        height: 0px;
    }
}

@-webkit-keyframes animloader106back {
    0%, 30%, 70% {
        transform: translateY(0px);
    }

    20%, 40%, 100% {
        transform: translateY(-5px);
    }
}

@keyframes animloader106back {
    0%, 30%, 70% {
        transform: translateY(0px);
    }

    20%, 40%, 100% {
        transform: translateY(-5px);
    }
}

@-webkit-keyframes animloader106 {
    0% {
        box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
        width: 34px;
        height: 34px;
        background-position: -44px -44px;
        background-size: 100px 100px;
    }

    100% {
        box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
        width: 30px;
        height: 28px;
        background-position: -36px -36px;
        background-size: 80px 80px;
    }
}

@keyframes animloader106 {
    0% {
        box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
        width: 34px;
        height: 34px;
        background-position: -44px -44px;
        background-size: 100px 100px;
    }

    100% {
        box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
        width: 30px;
        height: 28px;
        background-position: -36px -36px;
        background-size: 80px 80px;
    }
}

@-webkit-keyframes animloader108 {
    0% {
        box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
    }

    20% {
        box-shadow: 40px -1px 0 -2px, 0 0 0 -2px, 40px -1px 0 -5px, 0 0 0 -5px;
    }

    40% {
        box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 40px -1px 0 -5px, -40px -1px 0 -5px;
    }

    60% {
        box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -40px -1px 0 -5px;
    }

    80%, 95% {
        box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -23px -29px 0 -5px;
    }

    100% {
        box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
    }
}

@keyframes animloader108 {
    0% {
        box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
    }

    20% {
        box-shadow: 40px -1px 0 -2px, 0 0 0 -2px, 40px -1px 0 -5px, 0 0 0 -5px;
    }

    40% {
        box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 40px -1px 0 -5px, -40px -1px 0 -5px;
    }

    60% {
        box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -40px -1px 0 -5px;
    }

    80%, 95% {
        box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -23px -29px 0 -5px;
    }

    100% {
        box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader108s {
    0% {
        box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
    }

    20% {
        box-shadow: 40px 2px 0 -2px, 0 0 0 -2px, 40px 2px 0 -5px, 0 0 0 -5px;
    }

    40% {
        box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 40px 2px 0 -5px, -40px 2px 0 -5px;
    }

    60% {
        box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -40px 2px 0 -5px;
    }

    80%, 95% {
        box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -23px -23px 0 -5px;
    }

    100% {
        box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
    }
}

@keyframes animloader108s {
    0% {
        box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
    }

    20% {
        box-shadow: 40px 2px 0 -2px, 0 0 0 -2px, 40px 2px 0 -5px, 0 0 0 -5px;
    }

    40% {
        box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 40px 2px 0 -5px, -40px 2px 0 -5px;
    }

    60% {
        box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -40px 2px 0 -5px;
    }

    80%, 95% {
        box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -23px -23px 0 -5px;
    }

    100% {
        box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes animloader115 {
    0% {
        box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 10px 0 white, 20px 0 white;
    }
}

@keyframes animloader115 {
    0% {
        box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 10px 0 white, 20px 0 white;
    }
}

@-webkit-keyframes animloader116 {
    0% {
        top: 8px;
        transform: rotate(0deg) scale(1);
    }

    100% {
        top: 0px;
        transform: rotate(180deg) scale(1.5);
    }
}

@keyframes animloader116 {
    0% {
        top: 8px;
        transform: rotate(0deg) scale(1);
    }

    100% {
        top: 0px;
        transform: rotate(180deg) scale(1.5);
    }
}

@-webkit-keyframes animloader117 {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 0 -28px inset;
    }
}

@keyframes animloader117 {
    0% {
        box-shadow: 0 0 inset;
    }

    100% {
        box-shadow: 0 -28px inset;
    }
}

@-webkit-keyframes animMarker {
    0% {
        transform: rotate(45deg) translate(5px, 5px);
    }

    100% {
        transform: rotate(45deg) translate(-5px, -5px);
    }
}

@keyframes animMarker {
    0% {
        transform: rotate(45deg) translate(5px, 5px);
    }

    100% {
        transform: rotate(45deg) translate(-5px, -5px);
    }
}

@-webkit-keyframes animShadow {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes animShadow {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes bump {
    0% {
        transform: translate(-50%, 5px);
    }

    100% {
        transform: translate(-50%, -5px);
    }
}

@keyframes bump {
    0% {
        transform: translate(-50%, 5px);
    }

    100% {
        transform: translate(-50%, -5px);
    }
}

@-webkit-keyframes animPend {
    0% {
        transform: rotate(22deg);
    }

    50% {
        transform: rotate(0deg);
    }
}

@keyframes animPend {
    0% {
        transform: rotate(22deg);
    }

    50% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes animPend2 {
    0%, 55% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-22deg);
    }
}

@keyframes animPend2 {
    0%, 55% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-22deg);
    }
}

@-webkit-keyframes animloader85 {
    0%, 100% {
        transform: translateX(-150%);
    }

    50% {
        transform: translateX(150%);
    }
}

@keyframes animloader85 {
    0%, 100% {
        transform: translateX(-150%);
    }

    50% {
        transform: translateX(150%);
    }
}

@-webkit-keyframes barStripe {
    0% {
        background-position: 1em 0;
    }

    100% {
        background-position: 0 0;
    }
}

@keyframes barStripe {
    0% {
        background-position: 1em 0;
    }

    100% {
        background-position: 0 0;
    }
}

@-webkit-keyframes raceBoard {
    0% {
        background-position: 0 0, 16px 16px;
    }

    100% {
        background-position: 32px 0px, 48px 16px;
    }
}

@keyframes raceBoard {
    0% {
        background-position: 0 0, 16px 16px;
    }

    100% {
        background-position: 32px 0px, 48px 16px;
    }
}

@-webkit-keyframes fadePush {
    0% {
        transform: translate(-50%, -15px);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, 0px);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 15px);
        opacity: 0;
    }
}

@keyframes fadePush {
    0% {
        transform: translate(-50%, -15px);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, 0px);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 15px);
        opacity: 0;
    }
}

@-webkit-keyframes fadePull {
    0% {
        transform: translate(-50%, 15px);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, 0px);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -15px);
        opacity: 0;
    }
}

@keyframes fadePull {
    0% {
        transform: translate(-50%, 15px);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, 0px);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -15px);
        opacity: 0;
    }
}

@-webkit-keyframes hitZak {
    0% {
        left: 0;
        transform: translateX(-1%);
    }

    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}

@keyframes hitZak {
    0% {
        left: 0;
        transform: translateX(-1%);
    }

    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}

@-webkit-keyframes animFw {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes animFw {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes coli1 {
    0% {
        transform: rotate(-45deg) translateX(0px);
        opacity: 0.7;
    }

    100% {
        transform: rotate(-45deg) translateX(-45px);
        opacity: 0;
    }
}

@keyframes coli1 {
    0% {
        transform: rotate(-45deg) translateX(0px);
        opacity: 0.7;
    }

    100% {
        transform: rotate(-45deg) translateX(-45px);
        opacity: 0;
    }
}

@-webkit-keyframes coli2 {
    0% {
        transform: rotate(45deg) translateX(0px);
        opacity: 1;
    }

    100% {
        transform: rotate(45deg) translateX(-45px);
        opacity: 0.7;
    }
}

@keyframes coli2 {
    0% {
        transform: rotate(45deg) translateX(0px);
        opacity: 1;
    }

    100% {
        transform: rotate(45deg) translateX(-45px);
        opacity: 0.7;
    }
}

@-webkit-keyframes animloader121 {
    0% {
        background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
    }

    100% {
        background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
    }
}

@keyframes animloader121 {
    0% {
        background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
    }

    100% {
        background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
    }
}

@-webkit-keyframes animloader123 {
    0% {
        background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
    }

    100% {
        background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
    }
}

@keyframes animloader123 {
    0% {
        background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
    }

    100% {
        background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
    }
}

@-webkit-keyframes animloader124 {
    0% {
        background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }

    100% {
        background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }
}

@keyframes animloader124 {
    0% {
        background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }

    100% {
        background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }
}

@-webkit-keyframes animloader126 {
    0% {
        background-position: 0 0, 0 0, 0px 85px, 0px 110px;
    }

    100% {
        background-position: 150% 0, 0 0, 0px 85px, 0px 110px;
    }
}

@keyframes animloader126 {
    0% {
        background-position: 0 0, 0 0, 0px 85px, 0px 110px;
    }

    100% {
        background-position: 150% 0, 0 0, 0px 85px, 0px 110px;
    }
}

@-webkit-keyframes floating {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-25px);
    }
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-25px);
    }
}

@-webkit-keyframes animloader110 {
    0% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}

@keyframes animloader110 {
    0% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}

@-webkit-keyframes animloader111 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes animloader111 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes animloader113 {
    0% {
        transform: translate(0px, 0px) scaleX(1);
    }

    14% {
        transform: translate(-12px, -16px) scaleX(1.05);
    }

    28% {
        transform: translate(-27px, -28px) scaleX(1.07);
    }

    42% {
        transform: translate(-46px, -35px) scaleX(1.1);
    }

    57% {
        transform: translate(-70px, -37px) scaleX(1.1);
    }

    71% {
        transform: translate(-94px, -32px) scaleX(1.07);
    }

    85% {
        transform: translate(-111px, -22px) scaleX(1.05);
    }

    100% {
        transform: translate(-125px, -9px) scaleX(1);
    }
}

@keyframes animloader113 {
    0% {
        transform: translate(0px, 0px) scaleX(1);
    }

    14% {
        transform: translate(-12px, -16px) scaleX(1.05);
    }

    28% {
        transform: translate(-27px, -28px) scaleX(1.07);
    }

    42% {
        transform: translate(-46px, -35px) scaleX(1.1);
    }

    57% {
        transform: translate(-70px, -37px) scaleX(1.1);
    }

    71% {
        transform: translate(-94px, -32px) scaleX(1.07);
    }

    85% {
        transform: translate(-111px, -22px) scaleX(1.05);
    }

    100% {
        transform: translate(-125px, -9px) scaleX(1);
    }
}

@-webkit-keyframes animloader113L {
    0% {
        box-shadow: 0 -6px, -122.9px -8px;
    }

    25%, 75% {
        box-shadow: 0 0px, -122.9px -8px;
    }

    100% {
        box-shadow: 0 0px, -122.9px -16px;
    }
}

@keyframes animloader113L {
    0% {
        box-shadow: 0 -6px, -122.9px -8px;
    }

    25%, 75% {
        box-shadow: 0 0px, -122.9px -8px;
    }

    100% {
        box-shadow: 0 0px, -122.9px -16px;
    }
}

@-webkit-keyframes animloader114 {
    0% {
        transform: translateY(8px) scaleY(1) scaleX(1.25);
    }

    25%, 75% {
        transform: translateY(-5px) scaleY(1.2) scaleX(1);
    }

    50% {
        transform: translateY(-10px) scaleY(1) scaleX(1);
    }

    100% {
        transform: translateY(8px) scaleY(0.8) scaleX(0.8);
    }
}

@keyframes animloader114 {
    0% {
        transform: translateY(8px) scaleY(1) scaleX(1.25);
    }

    25%, 75% {
        transform: translateY(-5px) scaleY(1.2) scaleX(1);
    }

    50% {
        transform: translateY(-10px) scaleY(1) scaleX(1);
    }

    100% {
        transform: translateY(8px) scaleY(0.8) scaleX(0.8);
    }
}

@-webkit-keyframes animloader118 {
    0% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1.2);
    }
}

@keyframes animloader118 {
    0% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1.2);
    }
}

@-webkit-keyframes animloader119 {
    0% {
        filter: blur(0px);
        transform: skew(0deg);
    }

    100% {
        filter: blur(3px);
        transform: skew(-4deg);
    }
}

@keyframes animloader119 {
    0% {
        filter: blur(0px);
        transform: skew(0deg);
    }

    100% {
        filter: blur(3px);
        transform: skew(-4deg);
    }
}



.mas-banner {
    height: 70vh;
    width: 100%;
    position: relative;
    overflow: hidden; /* Taşan kısımları gizle */
    background-size: cover !important;
    background-position: center !important;
}

    .mas-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bg) center/cover no-repeat;
        transform-origin: center center;
    }


.mas-banner-content b {
    font-size: 4rem;
    color: white;
}

.mas-banner-content p {
    font-size: 28px;
    color: white;
    width: 35vw;
}

.mas-banner-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-top: 1rem;
    position: relative;
    width: 50%;
}


.mas-banner-sirketlogo {
    width: 20rem;
    margin-top: 1rem;
    border-radius: 14px;
}


.kirklogo {
    position: absolute;
    width: 100%;
    height: 4rem;
    bottom: 1rem;
    left: 0;
    display: flex;
    justify-content: center;
    user-select: none;
    pointer-events: none;
}

    .kirklogo img {
        height: 100%;
    }


.kirklogodiv {
    background-color: white;
    border-radius: 50%;
    padding: 15px;
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.bannerSwiperr {
    margin-top: 73px;
}

    .bannerSwiperr .swiper-button-next,
    .bannerSwiperr .swiper-button-prev {
        color: #172983;
        background: #ffffffad;
        border-radius: 8px;
        backdrop-filter: blur(10px);
    }

        .bannerSwiperr .swiper-button-next:after,
        .bannerSwiperr .swiper-button-prev:after {
            font-size: 22px;
        }


@media(max-width:1640px) {
    .mas-banner {
        height: 80vh;
        width: 100%;
        position: relative;
        overflow: hidden; /* Taşan kısımları gizle */
        background-size: cover !important;
        background-position: center !important;
    }

    .mas-banner-content {
        width: 45%;
    }

        .mas-banner-content b {
            font-size: 2rem;
            color: white;
        }
}

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

    .mas-banner-content p {
        font-size: 28px;
        color: white;
        width: 25vw;
    }
}

@media(max-width:1440px) {
    .mas-banner-content b {
        font-size: 2rem;
        color: white;
    }


    .mas-banner-content p {
        font-size: 20px;
        color: white;
        width: 35vw;
    }

    .k-header ul.k-menuLinks {
        color: black;
        font-weight: 300;
        gap: 15px;
        font-size: 13px;
        display: flex;
        font-weight: bold;
        align-items: center;
        margin-top: 0.5rem;
        justify-content: center;
    }

        .k-header ul.k-menuLinks a {
            font-weight: 300;
            color: #000;
            font-size: 15px;
        }

    .navLogo {
        height: 40px !important;
        position: absolute;
        padding: 5px;
        top: 10px;
    }

    .contactUs {
        background: #ef4a41;
        color: white !important;
        text-decoration: none;
        display: block;
        width: max-content !important;
        padding: 5px 10px;
        font-weight: bold;
        font-size: 15px;
    }

    .k-header-right .k-header-other {
        gap: 15px;
    }
}


@media(max-width:1192px) {
    .k-header ul.k-menuLinks {
        color: black;
        font-weight: 300;
        gap: 15px;
        font-size: 13px;
        display: flex;
        font-weight: bold;
        align-items: center;
        margin-top: 0.5rem;
        justify-content: center;
    }

        .k-header ul.k-menuLinks a {
            font-weight: 300;
            color: #000;
            font-size:15px;
        }

    .navLogo {
        height: 40px !important;
        position: absolute;
        padding: 5px;
        top: 10px;
    }

    .contactUs {
        background: #ef4a41;
        color: white !important;
        text-decoration: none;
        display: block;
        width: max-content !important;
        padding: 5px 10px;
        font-weight: bold;
        font-size: 15px;
    }

    .k-header-right .k-header-other {
        gap: 15px;
    }
}

.mobildil
{
    display:none !important; 
}


.lang-select {
    font-family: Arial, sans-serif;
    position: relative;
    max-width: 193px;
}

    .lang-select a:hover {
        background-color: #f9f9f9;
    }

    .lang-select .selected, .lang-select .lang-select-dropdown-content a {
        color: #494949;
    }

    .lang-select .selected {
        background-color: #ffffff;
        padding: 11.5px;
        font-size: 12px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
    }

        .lang-select .selected:hover, .lang-select .selected:focus {
            outline: none;
        }

.down {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #494949;
    position: relative;
    left: 10px;
    top: 9px;
}

.up {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #494949;
    position: relative;
    left: 10px;
    bottom: 9px;
}

.lang-select .lang-select-dropdown-content {
    display: none;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #ededed;
    border-radius: 0 0 8px 8px;
    width: 100%;
    overflow: visible;
    z-index: 1;
    top: 45px;
    left:-15%;
    padding: 10px 0 10px 0;
}

    .lang-select .lang-select-dropdown-content a {
        padding: 10px 25px 0 25px;
        font-size: 18px;
        text-decoration: none;
        display: block;
    }

.lang-select-dropdown-content:before {
    content: '';
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    background: #fff;
    border-left: 1px solid #ededed;
    border-top: 1px solid #ededed;
    border-top-left-radius: 4px;
    position: absolute;
    top: -8px;
    right: 18px;
}

.lang-select a:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #F0F0F0;
    display: block;
    margin-top: 10px;
}

.lang-select a:nth-last-child(1):after {
    display: none;
}

.lang-select a:nth-last-child(1) {
    padding-bottom: 10px;
}

.lang-select .show {
    display: block;
}


/* Dropdown styles */
.dropdowns {
    position: absolute;
    padding: 0;
    margin-right: 1em;
    border: none;
    left: -40%;
    top: 12px;
}

    .dropdowns summary {
        list-style: none;
        list-style-type: none;
    }

    .dropdowns > summary::-webkit-details-marker {
        display: none;
    }

    .dropdowns summary:focus {
        outline: none;
    }

        .dropdowns summary:focus a.button {
            border: 2px solid white;
        }

    .dropdowns summary:focus {
        outline: none;
    }

    .dropdowns ul {
        position: absolute;
        padding: 10px 0;
        width: auto;
        left: 0%;
        margin-left: calc((var(--dropdown-width) / 2) * -1);
        box-sizing: border-box;
        z-index: 2;
        background: #fff;
        border-radius: 6px;
        list-style: none;
    }

        .dropdowns ul li {
            padding: 0;
            margin: 0;
        }

            .dropdowns ul li a:link, .dropdowns ul li a:visited {
                display: inline-block;
                padding: 10px 0.8rem;
                width: 100%;
                box-sizing: border-box;
                color: var(--dropdown-color);
                text-decoration: none;
            }

            .dropdowns ul li a:hover {
                background-color: var(--dropdown-highlight);
                color: var(--dropdown-background);
            }



    /* Close the dropdown with outside clicks */
    .dropdowns > summary::before {
        display: none;
    }

    .dropdowns[open] > summary::before {
        content: ' ';
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
    }


@media(max-width:991px) {


    .mobildil {
        position:absolute;
        right:15%;
        top:15px;
        display: flex;
        gap:15px;
    }
    .k-header ul.k-menuLinks {
        display: none;

    }

    .hbr-title {
        font-size: 15px;
    }

    .swiperUrunKutu {
        height: 295px;
    }

    .bannerSwiperr {
        margin-top: 0px;
    }

    .mas-banner {
        height: 92vh;
        margin-top: 70px;
    }

    .mas-banner-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: start;
        padding-top: 2rem;
        position: relative;
        align-items: center;
        width: 100%;
    }

    .mas-banner-sirketlogo {
        width: 9rem;
        margin-top: 3rem;
    }

    .mas-banner-content p {
        font-size: 20px;
        color: white;
        width: 92%;
        text-align: center;
    }

    .mas-banner-content b {
        font-size: 30px;
        color: white;
        text-align: center;
    }

    .mas-banner-sirketlogo {
        width: 10rem;
        margin-top: 1rem;
    }

    .urunlerSwiperBaslik2 {
        font-size: 30px;
  
    }

    .urunlerSwiperBaslik {
        font-size: 30px;
    }

    .urunlerSwiperBaslik2::before {

        width: 35%;
        content: "";
        left: 32%;

    }

    .urunSwiperButon {
        padding: 11px 20px;
        top: 66px;
    }

    .urunKutu {
        min-height: 450px;
    }

    .dropdowns {
        position: absolute;
        padding: 0;
        margin-right: 1em;
        border: none;
        left: -90%;
        top: 12px;
    }
}

@media(max-width:768px) {
    .urunKutu {
        min-height: 350px;
    }
}


    @media(max-width:425px) {


        .mobildil {
            position: absolute;
            right: 25%;
            top: 15px;
            display: flex;
            gap: 5px;
        }

        .navLogo {
            height: 30px !important;
            position: absolute;
            padding: 5px;
            top: 10px;
        }

        .urunKutu {
            min-height: 350px;
        }
    }

    @media(max-width:375px) {


        .mobildil {
            position: absolute;
            right: 35%;
            top: 15px;
            display: flex;
            gap: 5px;
        }

            .mobildil img {
                width: 30px;
            }

        .navLogo {
            height: 30px !important;
            position: absolute;
            left: 0px;
            padding: 5px;
            top: 15px;
        }
    }

    @media(max-width:320px) {


        .mobildil {
            position: absolute;
            right: 35%;
            top: 15px;
            display: flex;
            gap: 5px;
        }

            .mobildil img {
                width: 30px;
            }

        .navLogo {
            height: 30px !important;
            position: absolute;
            left: 0px;
            padding: 5px;
            top: 15px;
        }
    }