@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/* latin-ext */
@font-face {
    font-family: 'Mali';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Mali Regular'), local('Mali-Regular'), url(assets/fonts/N0ba2SRONuN4SCPED2xx.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Mali';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Mali Regular'), local('Mali-Regular'), url(assets/fonts/N0ba2SRONuN4SC3EDw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
      U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Mali';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Mali Bold'), local('Mali-Bold'), url(assets/fonts/N0bV2SRONuN4QJbhGl1QJObW.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Mali';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Mali Bold'), local('Mali-Bold'), url(assets/fonts/N0bV2SRONuN4QJbhGlNQJA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
      U+FEFF, U+FFFD;
  }
  

* { 
    margin: 0;
}

.rob {
    font-family: 'Roboto', sans-serif;
}

.mali {
    font-family: 'Mali'!important;
}

.dark {
    color: #3A444C;
}

.sm-font {
    font-size: 14px;
}

.xsm-font {
    font-size: 12px;
}

/* HEADER */
.header-bg {
    background-image: url('../assets/img/bg-map-sm.png');
    background-position: center;
    background-position-y: 87rem;
}

.logo {
    height: 130px;
}

.z-index-lg {
    z-index: 100;
}

.main-contain-sm {
    max-width: 950px;
}

.main-contain-lg {
    max-width: 1240px;
}

.bg-woman {
    background-color: #B9EDFC;
    z-index: 3;
}

.bg-man {
    background-color: #CBC834;
    z-index: 3;
}

.bg-dali {
    top: -40px;
}

#woman-section span,
#contact-section span:nth-child(2) {
    margin-left: 4.5rem!important;
}

#woman-section div:nth-child(2),
#man-section div:nth-child(2) {
    width: 50%;
}

#woman-section div:nth-child(2),
#man-section div:nth-child(2) {
    box-shadow: 2px 2px 3px 0px dimgrey;
    font-size: 14px;
    top: 0.4rem;
}

#man-section span {
    margin-right: 4.5rem!important;
}

.btn-game {
    color: white;
    background-color: #3A444C;
    border-radius: 40px;
    border-color: inherit;
    border: none!important;
}

/* CREATOR-SECTION */
#creator-section {
    background-image: url('../assets/icon/icon-clap-xl.png');
    background-repeat: no-repeat;
    background-size: 63rem;
    background-position: center;
    background-position-y: center;
}

.sm-bold {
    font-weight: 500;
}

#creator-section i {
    font-size: 2rem;
}

/* PLAYER-SECTION */
#player-section {
    background-color: rgb(146, 146, 146, 0.1);
    background-image: url('../assets/icon/icon-map-xl.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55rem;
    z-index: 1;
    height: 633px!important;
}

/* GET IT SECTION */
#get-it-section {
    background-image: url('../assets/icon/icon-earth-xl.png');
    background-repeat: no-repeat;
    background-size: 50rem;
    background-position: top;
}

.btn-go {
    background-color: #D3112C;
    border-radius: 40px;
    border-color: inherit;
    padding-left: 4rem;
}

.btn-go img {
    margin-right: 2rem;
}

.go-button {
    background-color: #D3112C;
    border: none!important;
    margin-top: 30px!important;
}

/* FOOTER */
footer {
    background-color: #3A444C;
}

footer img {
    z-index: 10;
}

#footer {
    max-width: 1500px!important;
    margin: 0 auto!important;
}

#btn-submit {
    transition: .4s;
    border-radius: 0!important;
}

.text-red,
.contact:hover {
    color: #D3112C;
}

.check {
    top: 6px;
    left: 334px;
}

.check i {
    font-size: 34px!important;
}

#status-msg {
    top: -20px;
}

.my-45 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* LINES */

.cross {
    top: -278px;
    left: 486px;
}

.first-line {
    left: 444px;
    top: -258px;
    background: url('../assets/img/line-start.png');
    background-size: 172px 290px;
    -webkit-animation-name: lines-animation;
    animation-name: lines-animation;
}

.second-line {
    left: -81px;
    top: 136px;
    background: url('../assets/img/line-second.png');
    background-size: 380px 384px;
    -webkit-animation-name: lines-animation;
    animation-name: lines-animation;
}

.third-line {
    left: 255px;
    top: 479px;
    background: url('../assets/img/line-third.png');
    background-size: 320px 260px;
    -webkit-animation-name: lines-animation;
    animation-name: lines-animation;
}

.fourth-line {
    left: -102px;
    top: 716px;
    background: url('../assets/img/line-fourth.png');
    background-size: 808px 1150px;
    background-repeat: no-repeat;
    -webkit-animation-name: line-end;
    animation-name: line-end;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}

.first-line,
.second-line,
.third-line {
    background-repeat: no-repeat;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

@keyframes line-end {
    0% {
        height: 0%;
    }
    100% {
        height: 236%!important;
    }
}

@-webkit-keyframes line-end {
    0% {
        height: 0%;
    }
    100% {
        height: 236%!important;
    }
}

@keyframes lines-animation {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}

@-webkit-keyframes lines-animation {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}

/* RESPONSIVE-SECTION */

@media (max-width: 991px) {
    .logo {
        height: 110px;
    }

    .cross,
    .first-line,
    .second-line,
    .third-line,
    .fourth-line {
        display: none;
    }

    #woman-section div,
    #man-section div {
        width: 100%!important;
    }

    #creator-section {
        background-image: url('../assets/icon/icon-clap-sm.png');
        background-size: 25rem;
        background-position: center;
    }

    #player-section {
        background-image: url('../assets/icon/icon-map-sm.png');
        background-position: center;
        background-size: 25rem;
        z-index: 1;
        height: auto!important;
    }

    #get-it-section {
        background-image: url('../assets/icon/icon-earth-sm.png');
        background-size: 30rem;
    }

    .sm-font-game {
        font-size: 16px!important;
    }

    .sm-font-free {
        font-size: 14px!important;
    }

    .footer-col {
        flex-direction: column!important;
        align-content: center;
    }
}