@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');

/*
    Reset
*/
* {

    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;

}

p {

    font-size: 1.5em !important;

}

p.p-lg {

    font-size: 1.4em !important;

}

/*
    Header
*/
header {

    width: 100%;
    height: 70px;
    background: #4555b5;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 100px;

}

a.brand {

    height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-left: 10px;

}

a.brand > img {

    height: 100%;

}

/*
    Carousel
*/
.carousel {
    height: 450px !important;
    overflow: hidden;
}

.active-item-container {

    width: 100%;
    height: 450px;
    background: #4555b5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;

}

.pattern {

    width: 100%;
    height: 450px;
    background: url('pattern.png');
    position: absolute;
    z-index: 0;
    mix-blend-mode: overlay;

}

.left-money {

    position: absolute;
    left: -50px;
    bottom: -100px;
    animation: 30s moveToRight ease infinite;
    z-index: 3;

}

.right-money {

    position: absolute;
    right: 100px;
    top: -150px;
    animation: 30s moveToLeft ease infinite;
    z-index: 3;

}

@keyframes moveToRight {

    0%, 100% {

        transform: translate(0,0);

    } 50% {

        transform: translate(100px,20px);

    }

}

@keyframes moveToLeft {

    0%, 100% {

        transform: translateX(0);

    } 50% {

        transform: translate(-100px,-20px);

    }

}

.fa-star {

    color: gold;

}

.left-star {

    transform: translateX(-200px);

}

.right-star {

    transform: translateX(200px);

}

.active-item-container>div {

    position: absolute;
    z-index: 2;

}

.active-item-container>div>h4 {

    font-size: 23px;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1px;

}

.active-item-container>div>h3 {
    
    font-size: 60px;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: bold;
    
}

.active-item-container>div>h4.heading-4 {

    letter-spacing: 4px;
    font-size: 20px;

}

/*
    Lotteries backgrounds
*/
.bg-ms {

    background: #5cb85c;
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

.bg-lf {

    background: #9933CC;
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

.bg-qn {

    background: #1c0da1;
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

.bg-lm {

    background: #FF8800;
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

.bg-ds {

    background: #ff4444;
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

.bg-tm {

    background: #f8d01c;
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

.bg-dt {

    background: #c79229;
    width: 100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

.carousel-item > div > h1 {

    margin: 0;

}

.carousel-item > div > p {

    font-size: 19px;
    text-transform: uppercase;
    margin: 0;

}

.carousel-item > div > button {

    cursor: pointer;
    z-index: 100;

}


/*
    Jumbotron
*/
.jumbotron {

    background: #fafafa !important;

}

.jumbotron > div > h1 {

    color: #4555b5;

}

/*
    Footer
*/
footer {

    background: #4555b5;
    margin-top: -30px;

}

footer > div > h3 {

    text-transform: uppercase;

}

h3.cursive {

    text-transform: none !important;
    font-family: 'Berkshire Swash', cursive !important;
    font-size: 50px;
    margin-top: 30px;
    margin-bottom: 20px;

}

/*
    Social Links
*/
.social-links > a {

    color: #a6a6a6;

}

.social-links > a:hover {

    transition: .5s ease;
    color: #4555b5;

}

.fa-instagram,.fa-facebook-f,.fa-twitter {

    font-size: 30px;

}


/*
    Mobile
*/
@media (max-width: 768px) {

    /*
        Header
    */
    header {

        width: 100%;
        height: 70px;
        overflow: hidden;
        display: flex;
        align-items: center;

    }

    header > div > div.buttons {

        display: none !important;

    }

    a.brand {

        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
    
    }
    
    a.brand > img {
    
        height: 50px !important;
    
    }

    /*
        Carousel
    */
    .carousel {
        height: 450px !important;
        overflow: hidden;
    }

    p.desc {

        font-size: 14px !important;

    }

    .left-money,.right-money {

        display: none !important;

    }

    .active-item-container>div {

        text-align: center !important;

    }

    .active-item-container>div>h4 {

        font-size: 17px;

    }

    .active-item-container>div>h3 {

        font-size: 40px;

    }

    .heading-4 {

        font-size: 15px !important;

    }

    .left-star {

        transform: translateX(-130px);

    }

    .right-star {

        transform: translateX(130px) translateY(-13px);

    }

    h3.slg {

        font-size: 20px !important;

    }

}

/*
    Maladireta Banner
*/
.banner-image {

    width: 100%;
    height: 450px;
    background: rgba(0,0,0,.1);

}

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

    .terms-and-use {

        flex-direction: column !important;
        text-align: center !important;

    }

}