html {
    scroll-behavior: smooth;
}

body {
    background-color: white;
}

    body::-webkit-scrollbar {
        display: none;
    }


.cookie-banner {
    width: 60%;
    position: fixed;
    left: 10px;
    bottom: 20px;
    background: linear-gradient(180deg, #1d491c, #0b300a);
    text-align: left;
    border-radius: 20px;
    padding: 0 0px 10px 10px;
    z-index: 100
}


    .cookie-banner p {
        padding: 5px;
        padding-top: 20px;
        font-size: 1.0em;
        color: white;
        font-weight: 100;
    }

    .cookie-banner button {
        font-size: 1.0em;
        background-color: white;
        color: green;
        padding: 5px;
        width: 30px;
        border-radius: 0 20px 0 5px;
    }



    .cookie-banner a {
        font-size: 1.0em;
        color: yellow;
    }


.close {
    height: 30px;
    cursor: pointer;
    background-color: white;
}


.navbar {
    border-bottom: none;
}

.demo {
    float: right;
    text-align: right;
}

.navbar-collapse {
    background-color: transparent;
}

.collapse {
    background-color: transparent;
    border: none;
}




.navbar-toggle {
    color: #0b300a;
    border: none;
    padding: 4px;
    display: none;
}

    .navbar-toggle:hover {
        padding: 5px 10px;
        background-color: #0b300a;
        color: white;
        border-radius: 10px;
    }

.navbar-nav {
    background-color: transparent;
    border: none;
}

.demo input:focus, .demo input:active, .demo input:hover {
    border: none;
    outline: none;
    color: #1d491c;
}

.demo input:focus {
    background-color: #0b300a;
    color: white;
}

.top-search {
    border: none
}

    .top-search:focus, .top-search:active, .top-search:hover {
        border: none;
        outline: none;
    }

.carousel {
    height: 80vh;
    background: linear-gradient(125deg, #022301,transparent,transparent,transparent ), linear-gradient(30deg, #022301,transparent,transparent,transparent ), linear-gradient(120deg,transparent, #090838,transparent,transparent), linear-gradient(180deg,transparent, #c62424,transparent,transparent), linear-gradient(120deg,transparent, transparent,#d53d8c,transparent), linear-gradient(120deg,transparent, transparent,transparent,#06103e);
    padding-top: 30px;
}

.carousel-inner {
    height: 70vh;
}

    .carousel-inner .item {
        width: 80%;
        height: 90%;
        margin: 20px 10% 20px 10%;
        border-radius: 20px;
        box-shadow: rgba(50, 93, 56, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

        .carousel-inner .item img {
            height: 100%;
            object-fit: cover;
            width: 100%;
        }

.navbar-header i {
    color: #0b300a;
}

.dropdown-content {
    border-radius: 20px;
    box-shadow: rgb(38, 77, 59) 0px 20px 30px -10px;
}

.carousel .slide {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.jumbotron_x {
    min-height: 20vh;
    margin: 0px;
    background-image: url(/content/images/JumboBack.jpg );
    background: linear-gradient(180deg, #0a3d5e,#05364e,black);
    background-size: cover;
    position: relative;
}

    .jumbotron_x .back {
        width: 100%;
        height: 300px;
        object-fit: cover;
        opacity: 0.1;
    }

.plus_x {
    position: absolute;
    top: 5px;
}

    .plus_x p {
        color: white;
        font-size: 35px
    }

    .plus_x h1 {
        color: white;
        text-shadow: 2px 2px 4px #d53d8c;
    }


footer {
    background-color: #1d491c;
    color: white;
    min-height: 10vh;
}

.footer-start {
    text-align: center;
    padding: 10px;
}

    .footer-start a {
        color: white;
    }

        .footer-start a:hover {
            color: #30cc1e;
            text-decoration: none;
            outline: none;
        }

.copyright {
    color: #30cc1e;
}

.footer-end {
    text-align: center;
}

    .footer-end p {
        font-weight: normal;
        color: #e9e9e9;
    }

.wbusiness {
    text-align: center;
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 99;
}

    .wbusiness p {
        padding: 5px;
        background-color: #1d491c;
        color: white;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        border-radius: 15px;
        font-size: 12px;
    }

    .wbusiness .cover {
        margin-bottom: 5px;
        background-color: #1d491c;
        border: 5px solid white;
        color: white;
        border-radius: 40px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        padding: 10px;
    }

    .wbusiness img {
        height: 40px;
        width: 40px;
    }


.home_end {
    background: linear-gradient( 180deg, #f7f7f7, white );
    min-height: 60vh;
    text-align: center;
    padding: 5%;
}

.cl-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.scroll-feed {
    overflow: auto;
    white-space: nowrap;
}

    .scroll-feed a {
        display: inline-block;
        color: white;
        text-align: center;
        text-decoration: none;
    }


.cl-wrapper {
    display: block;
    min-width: 450px;
    max-width: 450px;
    background-color: white;
    margin: 10px;
    float: left;
    color: black;
    position: relative;
    border-radius: 20px;
    box-shadow: rgb(159, 159, 159) 0px 20px 30px -10px;
}


.slider {
    width: 100%;
    height: 500px;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: 20px 5px;
    padding: 0 20px;
}

.cl-wrapper a img {
    min-height: 300px;
    max-height: 300px;
    object-fit: cover;
}





/* width */
.slider::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
.slider::-webkit-scrollbar-track {
    background: #e9e9e9;
}

/* Handle */
.slider::-webkit-scrollbar-thumb {
    background: #0a3d5e;
}

    /* Handle on hover */
    .slider::-webkit-scrollbar-thumb:hover {
        background: #165781;
    }

.cl-wrapper p {
    color: black;
}

.jumbotron_x .btn-new {
    background: linear-gradient(90deg, #1d491c, #0b300a, black);
    color: white;
    border-radius: 15px;
    border-style: none;
    box-shadow: rgba(75, 158, 241, 0.50) 0px 1px 1.5px;
}

.jumbotron_x .btn-store {
    background: linear-gradient(90deg, #9b431d, #83310d, black);
    color: white;
    border-radius: 15px;
    border-style: none;
    box-shadow: rgba(75, 158, 241, 0.50) 0px 1px 1.5px;
}

    .jumbotron_x .btn-store:hover, .jumbotron_x .btn-store:hover, .jumbotron_x .btn-store:hover, .jumbotron_x .btn-new:hover {
        background: linear-gradient(90deg, #0a3d5e, #06103e, black);
        color: white;
    }


.cl-wrapper img {
    max-width: 100%;
    text-align: center;
}

.cl-wrapper a {
}

    .cl-wrapper a:hover {
        text-decoration: none;
        outline: none;
    }

.cl-text {
    padding: 10px;
}

    .cl-text p {
        color: #0b300a;
    }

        .cl-text p:hover {
            color: #1d491c;
        }

    .cl-text hr {
        color: grey;
        width: 100%;
    }


.inner-text {
    position: absolute;
    width: 40%;
    top: 25%;
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    font-size: xx-large;
    right: 30%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

    .inner-text a:hover {
        text-decoration: none;
    }

.r1 {
    display: inline-block;
    background: linear-gradient(180deg, #c81074, #b70a68);
    color: white;
    margin: 5px;
    border-radius: 15px;
    padding: 3px 8px;
    font-size: large;
}

.r2 {
    display: inline-block;
    background: linear-gradient(180deg, #19740d, #126407);
    color: white;
    margin: 5px;
    border-radius: 15px;
    padding: 3px 8px;
    font-size: large;
}

.r3 {
    display: inline-block;
    background: linear-gradient(180deg, #012060, #011c52);
    color: white;
    margin: 5px;
    border-radius: 15px;
    padding: 3px 8px;
    font-size: large;
}


.r5 {
    min-height: 100%;
    min-width: 100%;
    background-image: url('../../Content/Images/encintro.jpg');
    background-size: cover;
}

.r6 {
    min-height: 100%;
    min-width: 100%;
    background-image: url('../../Content/Images/bizintro.jpg');
    background-size: cover;
}

.r7 {
    min-height: 100%;
    min-width: 100%;
    background-image: url('../../Content/Images/everyrightstep.jpg');
    background-size: cover;
}


.footer-start a {
    padding: 3px 7px;
    display: inline-block;
    background: linear-gradient(180deg, #0b300a, #1d5f1c);
    border-radius: 10px;
    margin-bottom: 5px;
}

    .footer-start a:hover {
        background: linear-gradient(180deg, #1d5f1c, #0b300a);
        border-radius: 10px;
        color: #3ee42b;
    }


/*CREDITS*/
.credits {
    margin-bottom: 50px;
}

    .credits .col-md-12 {
        border-radius: 50px 0;
        margin: 20px 0px;
        background: rgb(7,6,92);
        background: radial-gradient(circle, rgba(7,6,92,1) 0%, rgba(2,0,36,1) 7%, rgba(9,9,121,1) 20%, rgba(33,13,120,1) 31%, rgba(104,24,117,1) 55%, rgba(117,26,117,1) 61%, rgba(133,28,116,1) 66%, rgba(150,12,124,1) 100%);
        color: white;
    }

    .credits .col-md-6 {
        padding: 0;
        display: flex;
        min-height: 35vh;
        overflow: hidden;
        align-items: center;
        padding: 10px;
        text-align: justify;
    }

        .credits .col-md-6 a {
            color: #84c1f5;
        }

            .credits .col-md-6 a:hover {
                color: #1d491c;
                outline: none;
                text-decoration: none;
            }

        .credits .col-md-6 .breadcrumb {
            height: 100%;
            border-radius: 10px;
            margin: 0;
            background: linear-gradient(180deg, #f5f5f5a4, #f9f9f968 );
            color: white;
        }

            .credits .col-md-6 .breadcrumb a {
                color: #3e81ba
            }

.footer-start a:focus {
    text-decoration: none;
}

/*CONTACT*/

.contact {
    padding: 0;
    margin: 0;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background-image: url('../../Content/Images/map.png');
    object-fit: contain;
}

    .contact .xd {
        background: linear-gradient(90deg, #e3ffe7 0%, #c2d6f8 100%);
        padding: 10px;
        border-radius: 20px 0;
    }

        .contact .xd a {
            font-weight: 400;
            font-size: medium;
        }

            .contact .xd a:hover {
                text-decoration: none;
            }

    .contact .highlight {
        background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #06afd1 100%);
        width: fit-content;
        padding: 5px 12px;
        border-radius: 0 20px 20px 0;
        color: white;
    }

    .contact .col-md-6 {
        overflow: hidden;
    }

    .contact .sect {
        padding: 20px 10px;
        background-color: #f9f9f9;
        background-image: linear-gradient(180deg, #f9f9f9 0%, #fcfcfc 80%);
        height: 100%;
        margin-bottom: 20px;
    }

    .contact .s-line {
        color: #5b350d;
    }


/*SPECTACULAR*/
.spectacular {
    text-align: justify;
}

    .spectacular .box-office {
        width: 100%;
    }

    .spectacular h1 {
        color: #1185a1;
    }

    .spectacular .br1 {
        min-height: 70vh;
        padding-top: 25vh;
        overflow: hidden;
        padding-left: 10%;
        text-align: left;
    }

        .spectacular .br1 h1 {
            font-size: 56px;
            color: #01aed8;
        }

        .spectacular .br1 p {
            margin-left: 50px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

    .spectacular .br2 {
        background-color: #e2e2e2;
        min-height: 70vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        margin: 10px;
    }

        .spectacular .br2 .jumbotron {
            margin-top: -30px;
            /*  background-image: url(/content/images/visuals/idea.png);*/
            background-image: url(../../Content/Images/visuals/idea.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right;
            text-shadow: 1px 1px 2px #e3e3e3;
            color: black;
            background-color: #e2e2e2;
        }


    .spectacular .br3 {
        max-height: 70vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

        .spectacular .br3 img {
            max-height: 60%;
            object-fit: scale-down;
        }

    .spectacular .br4 {
        min-height: 70vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding: 20px;
    }

        .spectacular .br4 h1 {
            text-align: left;
        }

    .spectacular .br5 {
        min-height: 70vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        color: white;
        background-color: #4158D0;
        background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        text-shadow: 0.5px 0.5px 1px black;
        border-radius: 0;
    }


        .spectacular .br5 img {
            border-radius: 120px;
            margin-bottom: 10px;
        }

        .spectacular .br5 h1 {
            color: white;
        }

        .spectacular .br5 .btn-default {
            background-color: #00DBDE;
            background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
            color: white;
        }


    .spectacular .br6 {
        min-height: 70vh;
        width: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding: 20px;
    }

    .spectacular .br7 {
        min-height: 70vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        background-color: #f9f9f9;
        padding: 20px;
    }

    .spectacular .br8 {
        margin-top: 20px;
    }


/*LICENSE*/
.license {
    padding: 0;
    min-height: 90vh;
    margin: 0;
    background: url('../../Content/Images/license.png') no-repeat;
    background-size: 70%;
    background-color: #f5f5f5;
    object-fit: cover;
}

.license h4{
    color: #005826;
}

.card {
    background-color: white;
    border-radius: 12px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    padding: 10px 20px;
    margin:20px 30px;
    min-height:fit-content;
}

    .card .card-object {
        padding: 10px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        width: fit-content;
        border-radius: 20px;
        background: linear-gradient( 280deg, white, white,white, #d1fed3 90%);
        margin: 15px 5px;
        float:left
    }

        .card .card-object:hover {
            background: linear-gradient( 180deg, white, #aaeff6);
        }

        .card .card-object img {
            height: 30px;
        }

a:hover{
    text-decoration:none;
}

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

    .license {
        background-size: 100%;
    }
}

.login {
    min-height: 80vh;
    text-align:center;
}

.login_feed {
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    padding: 30px;
    border-radius: 35px;
    margin-top: 5vh;
    text-align:center;
}

    .login_feed .form-control-static {
        text-align: center;
        border-radius: 40px;
        background-color: white;
        outline: none;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
       background:white;
       text-align:center;
    }
    .login_feed .btn-default{
        border-radius:30px;
        background: linear-gradient(230deg,#1d491c, #0b300a, #022301);
        color:white;
    }
    .login_feed .badge-warning{
        background-color: #faf653;
        color:black;
        padding: 4px 5px;
    }

   



/*MOBILE VIEW*/
@media (max-width:800px) {
    .spectacular .br8 {
        margin-top: 0px;
    }

    .spectacular .br5 {
        margin: 10px;
        border-radius: 20px;
    }

    .spectacular .br4 .points {
    }

    .spectacular .br3 img {
        visibility: hidden;
        height: 10vh
    }

    .spectacular .br1 {
        min-height: 60vh;
    }

    .spectacular .br1 {
        min-height: 60vh;
        padding-top: 25vh;
    }

        .spectacular .br1 h1 {
            font-size: 35px;
        }

    .cl1 a img {
        border-radius: 20px;
    }

    .cl-wrapper a img {
        border-radius: 20px 20px 0 0;
    }

    .r5 {
        background-image: url('../../Content/Images/encintro_sm.jpg');
        background-size: cover;
    }

    .r6 {
        background-image: url('../../Content/Images/bizintro_sm.jpg');
        background-size: cover;
    }

    .r7 {
        background-image: url('../../Content/Images/everyrightstep_sm.jpg');
        background-size: cover;
    }



    @font-face {
        font-family: 'CormorantGaramond-SemiBold';
        src: url('../../fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
    }

    body {
        font-family: 'Cormorant Garamond', 'Segoe UI';
    }

    .cl-wrapper {
        min-width: 300px;
        max-width: 300px;
    }

        .cl-wrapper a img {
            min-height: 250px;
            max-height: 250px;
            object-fit: cover;
        }

    .plus_x p {
        color: white;
        font-size: 23px
    }

    .contact .container {
        width: 100%;
    }
}

@media screen and (max-width: 1500px) {

    .r4 img {
        object-fit: cover;
    }

    .inner-text {
        width: 70%;
        top: 30%;
        padding: 10px;
        border-radius: 10px;
        font-size: large;
        right: 15%;
    }

        .inner-text img {
            width: 50px;
        }
}

@font-face {
    font-family: 'FORTE';
    src: url('../../fonts/FORTE.ttf') format('truetype');
}

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

    .inner-text {
        width: 70%;
        top: 30%;
        padding: 10px;
        border-radius: 10px;
        font-size: large;
        right: 15%;
    }

    .r5 .inner-text {
        border-radius: 150px;
    }

        .r5 .inner-text img {
            max-width: 150px;
            margin: 0px;
        }

    .r6 .inner-text img {
        max-width: 90px;
        margin: 0px;
    }

    .r6 .inner-text {
    }

    .p-20 {
        padding: 20px;
    }

    .de {
        margin-top: -25px;
        display: block;
        font-family: Forte;
        color: #0b300a;
    }

    .cookie-banner {
        width: 80%;
    }

    .carousel-inner .item {
        width: 90%;
        height: 90%;
        margin: 20px 5% 20px 5%;
        border-radius: 15px;
    }

    .carousel {
        background: linear-gradient(125deg, #022301,transparent,transparent,transparent ), linear-gradient(30deg, #022301,transparent,transparent,transparent ), linear-gradient(120deg,transparent, #090838,transparent,transparent), linear-gradient(180deg,transparent, #c62424,transparent,transparent), linear-gradient(120deg,transparent, transparent,#d53d8c,transparent), linear-gradient(160deg,transparent, transparent,transparent,#06103e), linear-gradient(#0b300a,#090838, #c62424,#d53d8c);
    }

    .slider::-webkit-scrollbar {
        width: 10px;
        height: 5px;
        border-radius: 50%;
    }

    .jumbotron_x .btn-new {
        box-shadow: none;
    }

    .jumbotron_x .btn-store {
        box-shadow: none;
    }

    footer {
        border-radius: 20px;
        margin: 0 10px;
        background: linear-gradient(180deg, #1d491c, #0b300a);
    }

    .login_feed {
        box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
        padding: 10px;
        border-radius: 35px;
        margin:-20px;
        margin-top: 5vh;
        margin-bottom: 50px;

    }

}


/*DESKTOP ONLY VIEW*/
@media screen and (min-width: 768px) {
    .navbar-nav {
        display: none;
    }

    .r5 .inner-text {
        display: none;
    }

    .r6 .inner-text {
        display: none;
    }

    .r7 .inner-text {
        display: none;
    }

    .wbusiness {
        text-align: center;
        position: fixed;
        left: 5%;
        right: auto;
        bottom: 20%;
        z-index: 99;
    }

    .cl1 {
        background: linear-gradient(180deg, black,#022301,#06103e, white 30%);
        border-radius: 20px;
    }

    .cl2 {
        background: linear-gradient(180deg, black, #060b49, #2b67c6, white 40%);
        border-radius: 20px;
    }

    .cl3 {
        background: linear-gradient(180deg, black, #493106, #c68a2b, white 40%);
        border-radius: 20px;
    }

    .cl4 {
        background: linear-gradient(180deg, black, #fbedd3, #b5ac9f, white 40%);
        border-radius: 20px;
    }


    .cl1 a img {
        border-radius: 20px;
    }

    .cl-wrapper a img {
        border-radius: 0 0 20px 20px
    }
}

@font-face {
    font-family: 'CormorantGaramond';
    src: url('../../fonts/CormorantGaramond-Regular.ttf') format('truetype');
}



/*Bizbox*/

.bizbox {
    text-align: justify;
}

    .bizbox h1 {
        font-family: 'Segoe UI';
        font-weight: lighter;
    }

    .bizbox h2 {
        color: #565a8a;
    }


    .bizbox .header {
      
    }

        .bizbox .header .typo {
            padding: 12px;
            background-color: #f7f7f7;
        }

        .bizbox .header .bimage {
            text-align: center;
            height: 200px;
        }

        .bizbox  .bimage2 {
            text-align: center;
            max-width: 100%;
            margin-bottom:15px;

        }

    .bizbox .playcard {
        background: linear-gradient(135deg, #ff974b, #821e26, #1b1f4f, #1b1f4f);
        color: white;
        padding: 5px 7px;
        text-align: left;
        font-size: smaller;
        border-radius: 6px;
        margin: 10px 3px;
    }

    .bizbox .playcard h3{
      
    }

    .bizbox  .typo2 {
        padding: 12px;
        color:white;
        background: linear-gradient(315deg, #0e517c, #06103e, #1d2053);
        border-radius: 25px;
    }
    .bizbox .typo2 h5{
        color:#ffc194;
    }
    .bizbox .section_2{
        margin-top:5px;
    }
    .bizbox .features{
        text-align:left;
    }
    
    .bizbox .on_demand{
        text-align:left;
        font-size:small;
    }

@media screen and (max-width: 768px) {
  
    .card {
        margin: 10px 0;
    }
    .bizbox{
        margin-top: 15px;
    }
    .bizbox .header {
    margin:0;
    padding:0;
    }
     .bizbox h1 {
        text-align: left;
    }

    .bizbox .bimage2 {
        display: none;
    }

    .bizbox .playcard {
        padding: 5px 3px;
        border-radius: 10px;
        margin: 10px 0;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    .bizbox .playcard p{
        font-size: x-small;
    }

    .bizbox .typo2 {
        padding: 10px;
        border-radius: 0px;
        text-align:left;

    }

}

.form-control-static {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    outline: none;
    border-radius: 10px;
    text-decoration: none;
    border-style: none;
    padding-left:10px;
}

    .form-control-static:hover {
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }