﻿
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

body h1,body h2 ,body h3,body h4,body p,body a,body span {
    font-family: 'Poppins', sans-serif;
}
/*Grid classes*/
[class*='col-'] {
    float: left;
}

    [class*='col-']:last-of-type {
        padding-right: 0;
    }

.row::after {
    clear: both;
}
/* Main content */


.container {
    width: 100%;
    margin: 0 auto;
    background: url(../images/homepage/background.jpg) black top left;
    background-size: 100%;
    padding: 0 3.5vw;
}

.row {
    display: block;
    position: relative;
    clear: both;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 1% 0;
    text-align: center;
}

    .row:after {
        clear: both;
        content: '';
        display: table;
    }


a, a:focus {
    outline: none;
}

.content_box {
    background: #ebebeb;
    padding: 1% 10px;
    box-sizing: border-box;
    margin: 1%;
    border-radius: 2vw;
    border-radius: 2vw;
    border: 2px solid #cbcbcb;
    width: 18%;
}


.games .logo_box img {
    max-height: 6vw;
    border-radius: 1vw;
}
.logo_box {
    width: 75%;
    padding: 0;
    margin: 0 auto;
    min-height: 4.5vw;
}

    .logo_box img {
        max-height: 4vw;
    }


.container h1 {
    color: white;
    font-size: 1.75vw;
    margin: 0.25vw auto;
    font-weight: bold;
}

.container h2 {
    color: white;
    font-size: 2vw;
    margin: 0.25vw auto;
    font-weight: bold;
}

.container h3, .container a {
    text-decoration: none;
    color: #404040;
}

.offer_box h2 {
    font-size: 1.75vw;
    margin: 0;
    font-weight: bold;
    color: #404040;
}

.offer_box h3 {
    font-size: 1vw;
    margin-top: 0.5vw;
}

.icons_box img {
    width: 90%;
    margin: 0 auto;
}

.button_box {
    background: #8c298e;
    width: 90%;
    margin: 1vw auto 1vw;
    border-radius: 0.5vw;
}

    .button_box.spin {
        background: #de006f;
        background: -moz-linear-gradient(-45deg,#de006f 0%,#f73736 100%);
        background: -webkit-linear-gradient(-45deg,#de006f 0%,#f73736 100%);
        background: linear-gradient(135deg,#de006f 0%,#f73736 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#de006f',endColorstr='#f73736',GradientType=1);
    }

    .button_box.rfc {
        background: #c82657
    }

    .button_box.gcc {
        background: #86e100
    }

    .button_box.sps {
        background: #15562c;
        background: -moz-linear-gradient(left,#15562c 20%,#92c740 80%);
        background: -webkit-linear-gradient(left,#15562c 20%,#92c740 80%);
        background: linear-gradient(to right,#15562c 22%,#33b44a 77%,#92c83f 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#15562c',endColorstr='#92C740',GradientType=1);
    }

    .button_box p {
        color: white;
        font-size: 1.5vw;
        padding: 1vw;
        margin: 0;
    }

.rating_box {
    width: 95%;
    box-sizing: border-box;
    padding: 0.5vw 0;
    margin: 0.25vw auto 0.25vw;
    font-size: 12px;
    line-height: 14px;
}

    .rating_box .rating {
        width: 12%;
        display: inline-block;
        background-image: url(../images/homepage/star.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 3vw;
        list-style-type: none;
    }

        .rating_box .rating.star1 {
            background-image: url(../images/homepage/star1.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .rating_box .rating.star2 {
            background-image: url(../homepage/star2.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }

.seo_text_header {
    color: white;
    padding: 2vw 0;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    padding: 0 8vw
}

.seo_text {
    color: white;
    padding: 2vw 0;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    padding: 0 8vw;
}


.col-100.content_box {
    width: auto;
}

.col-100.title_box {
    width: 100%;
}

.title_box p {
    box-sizing: border-box;
    font-size: 14px;
    line-height: 16px;
    padding: 2% 0;
    text-align: left;
    color: rgba(255,255,255,0.7);
}

.col-100 a {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.col-100 .logo_box {
    min-height: 100%;
    margin: auto 1%;
    width: 30%;
    min-width: 110px;
    max-width: 11%;
}

.col-100 .offer_box {
    text-align: left;
    width: auto;
}

.col-100 .button_box {
    width: 30%;
    margin: 0 1% 0 2%;
    min-width: 105px;
}

.col-100 .rating_box {
    margin: 0;
    width: auto;
}

.col-lg-1 {
    float: none;
    width: 36%;
    text-align: center;
    margin: 0 auto;
}
/* Media queries */

@media (max-width:1024px) {
    .content_box {
        width: 31%;
    }
    .offer_box h2 {
        font-size: 2.75vw;

    }
    .offer_box h3 {
        font-size: 1.75vw;
        margin-top: 0.5vw;
    }
    }
    @media (max-width:767px) {

        .col-lg-1 {
            width: 87%;
        }

        .col-100 a {
            flex-direction: column;
        }

        .col-100 .rating_box {
            margin: 6vw auto;
            width: auto;
            text-align: center;
        }

        .col-100 .button_box {
            width: 70%;
            margin: 0 1% 3vw 2%;
        }

        .container h1 {
            font-size: 4.75vw;
        }

        .content_box {
            width: 98%;
        }

        .logo_box {
            height: 17vw;
        }

        .seo_text {
            padding: 0 2vw
        }

        .rating_box .rating {
            height: 12vw;
        }

        .rating_box {
            margin: 4.25vw auto 0.25vw;
        }

        .seo_text_header {
            padding: 0 2vw
        }

        .swipe-text {
            margin: -6px 0 50px;
        }

        .logo_box img {
            max-height: 13vw;
            margin-top: 2vw;
            margin-bottom: 2vw;
        }

        .icons_box img {
            width: 66%;
            margin: 0 auto;
        }


        .container h2 {
            color: white;
            font-size: 4vw;
            margin: 7vw auto 5vw;
            font-weight: bold;
        }
        .title_box p {
            padding: 6% 0;
            font-size: 12px;
            line-height: 14px;
        }
            .offer_box h2 {
            font-size: 7vw;
            text-align: center;
            margin-top: 1vw;
            color: #404040;
        }

        .offer_box h3 {
            font-size: 4vw;
            margin-top: 2vw;
            text-align: center;
        }

        .rating_box {
            width: 60%;
            font-size: 3.5vw;
            line-height: 5vw;
        }

        .button_box {
            background: #8c298e;
            width: 70%;
            margin: 3.5vw auto 1vw;
            border-radius: 3.5vw;
        }

        .icons_box {
            margin: 0 15vw;
        }

        .button_box p {
            color: white;
            font-size: 4.5vw;
            padding: 4vw;
            margin: 0;
            text-align: center;
            text-transform: uppercase;
        }

        .container h1 {
            margin: 2.5vw auto;
        }

        .games .col-100 .logo_box {
            min-height: auto;
            margin: auto 1%;
            width: 90%;
            min-width: 110px;
            height: auto;
            max-width: 100%;
        }

        .games .logo_box img {
            width: 100%;
            max-height: 100vw;
        }
    }

