html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif !important;
}
body{
    overflow-x: hidden;
}
.container {
    width: 100%;
    max-width: 1100px;
    padding: 0 15px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.btn {
    background: #42B51F;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    line-height: 50px;
    padding: 0 32px;
    display: inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    min-width: 200px;
    text-align: center;
}

.green {
    color: #42B51F;
    font-weight: bold;
}

.btn:hover {
    background: #89BC00;
}

nav {
    background: #151515;
    height: 90px;
}

nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
}
nav img {
    width: 200px;
}

header {
    background-image: url('src/img/bg-header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

header .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

header .bonus {
    width: 55%;
    padding: 74px 15px;
}

header .bonus * {
    color: #fff;
}

header .bonus .top {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 6px;
}

header .bonus h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
    margin-bottom: 24px;
}

header .bonus h1 span {
    color: #42B51F;
}

header .bonus ul li {
    display: flex;
    align-items: center;
    font-size: 20px;
    margin-bottom: 12px;
}

header .bonus .container-btn {
    margin-top: 32px;
}

header .bonus ul li img {
    margin-right: 8px;
    width: 32px;
}

header .bonus i {
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    margin-top: 8px;
}

header .container-btn {
    text-align: left !important;
}

header .container-btn .btn {
	margin-bottom: 8px;
}

header .visuel {
    width: 45%;
    margin-left: -80px;
}

header .visuel img {
    max-width: 650px;
}

section {
    padding: 48px 0;
}

.promo {
    background: #151515;
}

.promo .container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.promo .container > div {
    margin: 0 32px;
}

.promo .container > div img {
    margin-bottom: 16px;
}

.promo .top {
    font-size: 26px;
    font-weight: 500;
    margin: 8px 0;
    text-transform: uppercase;
    color: #42B51F;
}

.promo .bottom {
    color: #fff;
}

.container-btn {
    text-align: center;
    margin-top: 32px;
}

.providers {
    background: #2D2D2D;
    color: #fff;
    text-align: center;
}

.providers_list,
.listing {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.listing img {
    margin: 16px;
    max-width: 80px;
    max-height: 55px;
    width: auto;
    height: auto;
}

.amatic, .betsoft, .big-time-gaming, .booming, .booongo, .cayetano, .dice-lab, .egt, .elk-studios, .evoplay, .felix-gaming, .felixgaming, .fuga, .fugaso, .gamomat, .groove, .isoftbet, .kalamba, .mga, .netent, .noble-gaming, .noblegaming, .nolimitcity, .oryx, .playngo, .playson, .pragmatic-play, .push-gaming, .quickspin, .red-rake-gaming, .red-tiger-gaming, .redrake, .redtiger, .relax, .relax-gaming, .rival, .spinomenal, .sthlm-gaming, .wazdan, .wazdan-games, .yggdrasil {
    display: inline-block;
    overflow: hidden;
    height: 26px;
    background-repeat: no-repeat;
    background-image:url(https://assets.winoui.com/images/providers-sprite-v1.png);
    margin: 8px;
}

.elk-studios {
    width: 65px;
    background-position: 68.7563% 68.107%;
    background-size:433.898%
}

.amatic {
    width: 93px;
    background-position: 5.96659% 5.14403%;
    background-size:550.538%
}

.betsoft {
    width: 68px;
    background-position: 32.2072% 5.14403%;
    background-size:752.941%
}

.big-time-gaming {
    width: 128px;
    background-position: 61.4583% 5.14403%;
    background-size:400%
}

.booongo {
    width: 100px;
    background-position: 6.06796% 15.6379%;
    background-size:512%
}

.cayetano {
    width: 78px;
    background-position: 89.6313% 5.14403%;
    background-size:656.41%
}

.dice-lab {
    width: 90px;
    background-position: 35.545% 15.6379%;
    background-size:568.889%
}

.egt {
    width: 55px;
    background-position: 57.9869% 15.6379%;
    background-size:930.909%
}

.evoplay {
    width: 94px;
    background-position: 82.5359% 15.6379%;
    background-size:544.681%
}

.felix-gaming, .felixgaming {
    width: 97px;
    background-position: 6.0241% 26.1317%;
    background-size:527.835%
}

.fuga {
    width: 82px;
    background-position: 34.186% 26.1317%;
    background-size:624.39%
}

.fugaso {
    width: 90px;
    background-position: 60.1896% 26.1317%;
    background-size:568.889%
}

.gamomat {
    width: 154px;
    background-position: 6.98324% 36.6255%;
    background-size:332.468%
}

.groove {
    width: 61px;
    height: 20px;
    background-position: 92.6829% 77.6423%;
    background-size:839.344%
}

.isoftbet {
    width: 86px;
    background-position: 86.6197% 26.1317%;
    background-size:595.349%
}

.kalamba {
    width: 102px;
    background-position: 49.7561% 36.6255%;
    background-size:501.961%
}

.mga {
    background-position:75.3986% 36.6255%
}

.mga, .netent {
    width: 73px;
    background-size:701.37%
}

.netent {
    background-position:5.69476% 47.1193%
}

.noble-gaming, .noblegaming {
    width: 71px;
    background-position: 27.8912% 47.1193%;
    background-size:721.127%
}

.nolimitcity {
    width: 91px;
    background-position: 52.019% 47.1193%;
    background-size:562.637%
}

.oryx {
    width: 152px;
    background-position: 93.0556% 47.1193%;
    background-size:336.842%
}

.playngo {
    width: 95px;
    background-position: 5.9952% 57.6132%;
    background-size:538.947%
}

.pragmatic-play {
    width: 114px;
    background-position: 36.4322% 57.6132%;
    background-size:449.123%
}

.push-gaming {
    width: 118px;
    background-position:72.0812% 57.6132%
}

.booming, .push-gaming {
    background-size:433.898%
}

.booming {
    width: 78px;
    background-position:103.0812% 57.6132%
}

.quickspin {
    width: 83px;
    background-position: 5.82751% 68.107%;
    background-size:616.867%
}

.red-tiger-gaming {
    width: 118px;
    background-position: 33.7563% 68.107%;
    background-size:433.898%
}

.red-rake-gaming, .redrake {
    width: 42px;
    background-position: 91.2766% 36.6255%;
    background-size:1219.05%
}

.redtiger {
    width: 118px;
    background-position: 70.0508% 68.107%;
    background-size:433.898%
}

.relax, .relax-gaming {
    width: 82px;
    background-position: 5.81395% 78.6008%;
    background-size:624.39%
}

.rival {
    width: 61px;
    background-position: 92.9047% 68.107%;
    background-size:839.344%
}

.spinomenal {
    background-position:33.5025% 78.6008%
}

.spinomenal, .sthlm-gaming {
    width: 118px;
    background-size:433.898%
}

.sthlm-gaming {
    background-position:69.797% 78.6008%
}

.playson {
    width: 150px;
    background-position: 44.42674% 89.0947%;
    background-size:320.26%
}

.wazdan, .wazdan-games {
    width: 123px;
    background-position: 6.42674% 89.0947%;
    background-size:416.26%
}

.yggdrasil {
    width: 107px;
    background-position: 79.2593% 89.0947%;
    background-size:478.505%
}

.others-promos {
    background: #262626;
}

.others-promos .container-promos {
    display: flex;
    align-items: center;
    justify-content: center;
}

.others-promos .promo-card {
    width: 25%;
    padding: 0 15px;
}

.others-promos .promo-card img {
    width: 100%;
    position: relative;
    z-index: 20;
}

.others-promos .promo-card .name {
    background: #151515;
    padding: 30px 15px 15px 15px;
    color: #fff;
    z-index: 21;
    margin-top: -15px;
    border-bottom: solid 4px #4d4d4d;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    text-transform: uppercase;
    font-size: 14px;
    min-height: 77px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.others-promos .container-btn i {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
    color: #fff;
}

.payments {
    background: #2D2D2D;
}

footer {
    background: #151515;
    padding: 64px;
    text-align: center;
    color: #fff;
}

footer img {
    width: 200px;
    margin-bottom: 15px;
}

@media screen and (max-width: 1100px) {
    header .bonus {
        width: 50%;
    }

    header .visuel {
        width: 50%;
        margin-top: 32px;
        margin-left: -32px;
    }

    header .visuel img {
        width: 730px;
    }
}

@media screen and (max-width: 991px) {
    header .bonus .top {
        font-size: 20px;
    }

    header .bonus h1 {
        font-size: 42px;
    }

    header .bonus .bottom {
        font-size: 24px;
    }

    header .bonus ul li {
        font-size: 18px;
    }

    header .bonus ul li img {
        width: 22px;
    }

    header .visuel {
        margin-left: -70px;
    }

    header .visuel img {
        width: 650px;
    }

    .others-promos .container-promos {
        flex-wrap: wrap;
    }

    .others-promos .promo-card {
        width: 50%;
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 767px) {
    nav,
    nav .container {
        justify-content: center;
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    nav .btn {
        display: none;
    }

    header .container {
        flex-wrap: wrap;
        padding-top: 97px;
    }

    header .bonus {
        position: relative;
        z-index: 21;
        width: 100%;
        text-align: center;
        padding: 15px;
    }

    header .bonus i {
        text-shadow: 0 0 7px #000000;
    }

    header .bonus h1 {
        font-size: 32px;
        line-height: 42px;
    }

    header .bonus ul {
        text-align: left;
        width: 340px;
        margin: 0 auto;
        padding-left: 50px;
    }

    header .bonus ul.benefits__list {
        padding-left: 75px;
    }

    header .container-btn {
        text-align: center !important;
    }

    header .visuel {
        position: relative;
        z-index: 20;
        margin-top: -20px;
        margin-left: 0;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header .visuel img {
        margin-left: 0;
        width: 120%;
        max-width: none;
    }

    .promo .container {
        flex-wrap: wrap;
    }

    .promo .container > div {
        width: 100%;
        margin-bottom: 32px;
    }

    .others-promos .promo-card {
        width: 100%;
    }
}@media screen and (max-width: 375px) {
    header .bonus ul {
        width: 300px;
        padding-left: 10px;
    }

    header .bonus ul.benefits__list {
        padding-left: 50px;
    }

    .listing img {
        margin: 8px;
    }

    footer {
        padding: 45px;
    }
}