/*!
...
 */

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
:root {
    --background-img: url(../img/landing-new-back.jpg);
    --sprite-background: url(../img/sprite-landing-final.png);
}

body {
    overflow-x: hidden;
    font-family: Montserrat, sans-serif
}

.wrap-back {
    background: var(--background-img) no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 100%;
    float: left;
    padding-bottom: 15%
}

.wrap-text {
    text-align: center
}

.container-fluid {
    width: 100%;
    max-width: 1140px;
    padding: 0
}

.wrap-text h1 {
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 74px;
    margin-top: 45px;
    margin-left: 20px;
    padding-bottom: 10px;
    display: inline-block
}

.wrap-text .col-md-3 {
    width: 25%;
    margin-top: 15px
}

.cod-in {
    background: var(--sprite-background) 510px 0;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.cod-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.vanguard-in {
    background: var(--sprite-background) 760px -373px;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.vanguard-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.d2-in {
    background: var(--sprite-background) 1526px 0;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.d2-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.ow-in {
    background: var(--sprite-background) 0 0;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.ow-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.ow2-in {
    background: var(--sprite-background) 0 0;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.ow2-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.valorant-in {
    background: var(--sprite-background) 0 427px;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.valorant-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.apex-in {
    background: var(--sprite-background) 256px 0;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.apex-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.mod-in {
    background: var(--sprite-background) 1272px 0;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    
    background-position: -1280px -374px;
}

.mod-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.tft-in {
    background: var(--sprite-background) 764px 0;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.tft-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.nw-in {
    background: var(--sprite-background) 1526px 427px;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.cod-cold-war {
    background: var(--sprite-background) 1013px 427px;
    height: 370px;
    width: 100%;
    border-radius: 6px;
    float: left;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1)
}

.nw-in:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.cod-cold-war:hover {
    -webkit-box-shadow: 0 0 10px 3px #11317c, inset 0 -100px 50px -20px #11317c
}

.wrap-text .col-md-3 a {
    color: #fff;
    text-decoration: none;
    transition: all .5s ease;
    position: relative
}

.wrap-text .col-md-3 a img {
    max-height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 30px
}

.wrap-text .col-md-3 a h3 {
    font-weight: 500;
    text-shadow: 0 0 4px #646464;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    font-size: 20px
}

.wrap-text h2 {
    margin-left: 15px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: 300;
    font-size: 26px;
    margin-top: 0;
    padding-bottom: 0;
    display: block
}

@media(max-width:1050px) {
    .cod-cold-war {
        background-position-x: 992px
    }
}

@media(max-width:992px) {
    .wrap-text h1 {
        font-size: 35px;
        margin-top: 40px;
        padding-bottom: 15px;
        border-bottom: 2px solid #fff
    }
    .wrap-text .col-md-3 {
        width: 33%;
        margin-top: 15px;
        margin-bottom: 0;
        float: left
    }
    .apex-in,
    .cod-in,
    .d2-in,
    .mod-in,
    .nw-in,
    .ow-in,
    .ow2-in,
    .tft-in {
        background-size: 2321px
    }
    .valorant-in {
        background-size: 1880px;
        background-position-y: 451px
    }
    .d2-in {
        background-position-x: 1990px
    }
    .mod-in {
        background-position-x: 1658px
    }
    .tft-in {
        background-position-x: 996px
    }
    .cod-in {
        background-position-x: 666px
    }
    .apex-in {
        background-position-x: 334px
    }
    .nw-in {
        background-position-x: 1990px;
        background-position-y: 447px
    }
    .cod-cold-war {
        background-position-x: 1116px;
        background-position-y: 450px;
        background-size: 1957px
    }
    .wrap-text .col-md-3 a img {
        max-height: 50px
    }
    .wrap-text .col-md-3 a h3 {
        font-size: 20px
    }
    .wrap-text h2 {
        font-size: 30px;
        margin-top: 15px
    }
    .wrap-back {
        height: auto
    }
}

@media(max-width:870px) {
    .cod-cold-war {
        background-position-x: 1070px
    }
}

@media(max-width:753px) {
    .cod-cold-war {
        background-position-x: 1180px;
        background-size: 2070px
    }
    .wrap-text .col-md-3 {
        width: 42%
    }
    .valorant-in {
        background-size: 2040px;
        background-position-y: 489px
    }
}

@media(max-width:480px) {
    .wrap-text .col-md-3 {
        width: 41%
    }
}

@media(max-width:600px) {
    .cod-cold-war {
        background-position-x: 1130px
    }
}

@media(max-width:420px) {
    .cod-cold-war {
        background-position-x: 1313px;
        background-size: 2300px;
        background-position-y: 505px
    }
    .wrap-text .col-md-3 {
        width: 91%;
        margin-left: 23px
    }
    .valorant-in {
        background-size: 2310px;
        background-position-y: 555px
    }
}

@media(max-width:360px) {
    .cod-cold-war {
        background-position-y: 464px;
        background-size: 1980px;
        background-position-x: 1126px
    }
}

@media(max-width:360px) {
    .cod-cold-war {
        background-position-x: 1095px
    }
}