body,
html {
    position: relative;
    height: 100%
}

html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed
}

body {
    font-size: 21px;
    line-height: 30px;
    background-image: linear-gradient(to bottom, #cadcf1, #d4e3f4, #dfeaf6, #e9f1f9, #f4f8fc);
    display: flex;
    flex-direction: column
}

.mt-6 {
    margin-top: 5rem !important
}

.main-content {
    margin-top: 82px
}

.display-4 {
    font-size: 42px;
    line-height: 51px;
    margin-bottom: 18px;
    letter-spacing: -.52px;
    font-weight: 700
}

.img-shadow {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .25);
    border: 2px solid #dd267a;
    border-radius: 100px;
    background: #dd267a
}

.navbar-custom {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #fff !important
}

.navbar-dark .navbar-nav .nav-link {
    color: #16283a
}

.navbar-dark .navbar-nav .nav-link {
    color: #16283a
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #db287d
}

.highlight {
    color: #ee0979;
    font-size: 22px;
    line-height: 29px;
    margin-bottom: 20px
}

* {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    box-sizing: border-box
}

.highlighted-text {
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    background-position: left bottom, right bottom;
    background-attachment: scroll, scroll;
    background-image: linear-gradient(-225deg, transparent 5px, #7085ec 0), linear-gradient(-45deg, transparent 5px, #7085ec 0);
    background-origin: padding-box, padding-box;
    background-clip: border-box, border-box;
    background-size: 51% 7px;
    background-repeat: no-repeat
}

.active-breadcrum {
    color: #ee0979
}

.navbar-dark .navbar-nav .nav-link:focus {
    color: #000
}

.navbar-nav {
    display: flex;
    align-items: center
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
    margin: 0 20px
}

.nav-link {
    display: block;
    padding: 0 1rem
}

nav {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 50px 0
}

nav ul {
    list-style: none;
    text-align: center
}

nav ul li {
    display: inline-block
}

nav ul li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #aaa;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 10px
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
    transition: all .5s
}

nav ul li a:hover {
    color: #555
}

nav.fill ul li a,
nav.stroke ul li a {
    position: relative
}

nav.fill ul li a:after,
nav.stroke ul li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: #ea2879;
    height: 2px;
    top: 40px
}

nav.stroke ul li a:hover:after {
    width: 100%
}

.btn--outer {
    float: left;
    border: 1px solid red;
    display: block;
    border: none;
    background: 0 0;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale
}

.btn--outer:focus {
    outline: 0
}

.btn--outer>span {
    vertical-align: middle
}

.btn--outer.button--aylen {
    border: 2px solid #475cc5;
    background: #fff;
    color: #000;
    overflow: hidden;
    -webkit-transition: color .3s;
    transition: color .3s;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1rem;
    font-family: CircularStd;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 18px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    list-style: none
}

.button--aylen.button--inverted {
    background: 0 0;
    color: #fff
}

.button--aylen::after,
.button--aylen::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    left: 0;
    z-index: -1;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .2s;
    -webkit-transition-timing-function: cubic-bezier(.75, 0, .125, 1);
    transition-timing-function: cubic-bezier(.75, 0, .125, 1)
}

.button--aylen::before {
    background: #475cc5
}

.button--aylen::after {
    background: #475cc5
}

.button--aylen:hover {
    color: #fff
}

.button--aylen:hover::after,
.button--aylen:hover::before {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.button--aylen:hover::after {
    -webkit-transition-delay: 175ms;
    transition-delay: 175ms
}

.btn--outer--pink {
    float: left;
    border: 1px solid red;
    display: block;
    border: none;
    background: 0 0;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale
}

.btn--outer--pink:focus {
    outline: 0
}

.btn--outer--pink>span {
    vertical-align: middle
}

.btn--outer--pink.button--aylen--pink {
    border: 2px solid #dd267a;
    background: #fff;
    color: #000;
    overflow: hidden;
    -webkit-transition: color .3s;
    transition: color .3s;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1rem;
    font-family: CircularStd;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 18px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    list-style: none
}

.button--aylen--pink.button--inverted--pink {
    background: 0 0;
    color: #000
}

.button--aylen--pink::after,
.button--aylen--pink::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    left: 0;
    z-index: -1;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .2s;
    -webkit-transition-timing-function: cubic-bezier(.75, 0, .125, 1);
    transition-timing-function: cubic-bezier(.75, 0, .125, 1)
}

.button--aylen--pink::before {
    background: #dd267a
}

.button--aylen--pink::after {
    background: #dd267a
}

.button--aylen--pink:hover {
    color: #fff
}

.button--aylen--pink:hover::after,
.button--aylen--pink:hover::before {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.button--aylen--pink:hover::after {
    -webkit-transition-delay: 175ms;
    transition-delay: 175ms
}

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.menu li {
    text-align: center;
    flex-grow: 1;
    position: relative;
    border-right: 1px #dd267a solid
}

.menu li:last-child {
    border-right: none
}

.swiper-container {
    width: 100%;
    height: 100vh
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.swiper-button-next {
    right: 0 !important;
    left: auto;
    background: #fff;
    width: 40px !important;
    height: 70px !important
}

.swiper-button-prev {
    left: 0 !important;
    left: auto;
    background: #fff;
    width: 40px !important;
    height: 70px !important
}

.swiper-button-prev:after {
    color: #dd287d !important
}

.swiper-button-next:after {
    color: #dd287d !important
}

.game-title {
    font-size: 4rem;
    color: #fff
}

.downloads {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800
}

.game-desc {
    color: #fff
}

.slider-game-icons {
    width: 150px;
    border-radius: 40px;
    border: 2px solid #ea2879;
    box-shadow: 0 0 43px #0000006b
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #dd267a
}

.btn--outer--pink.button--aylen--pink.active {
    background-color: #dd267a;
    color: #fff
}

#rc-anchor-container {
    width: min-content !important
}

@-webkit-keyframes animate {
    0% {
        background-position: left 0 top -100px
    }
    20% {
        background-position: left 800px top -50px
    }
    40% {
        background-position: left 1800px top -60px
    }
    60% {
        background-position: left 2400px top -80px
    }
    80% {
        background-position: left 3400px top -50px
    }
    100% {
        background-position: left 4400px top 50px
    }
}

.pd-telephone-input {
    margin: 0 !important
}

.lightgray-bg {
    background: 0 0
}

.white-bg {
    background-color: #fff
}

.page-title-area {
    padding: 50px 0
}

.customshadow {
    box-shadow: -6px -6px 0 1px #7085ec !important
}

.form-row .form-group label span {
    font-size: 16px !important
}

.fixed-top {
    box-shadow: 0 0 43px #00000026;
    transition: .5s ease !important
}

.navbar-custom .navbar-nav .nav-item .nav-link {
    font-family: CircularStd;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 18px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    list-style: none
}

.bg-black {
    background-color: #475cc5 !important
}

.btn:focus {
    outline: 0;
    box-shadow: none
}

.navbar-dark .navbar-toggler {
    border: 3px solid #ff1493
}

.navbar-dark .navbar-toggler::focus {
    border: 3px solid #dd267a !important
}

.navbar-dark .navbar-toggler-icon {
    background-image: url(../Assets/img/toggle.png)
}

button:focus {
    outline: 1px dotted;
    outline: 0
}

.w-15 {
    width: 15%;
    border-radius: 40px;
    border: 3px solid #ea2879;
    box-shadow: 0 0 43px #0000006b
}

.why-gameanax-point {
    padding: 0;
    margin: 0;
    list-style: none
}

.why-gameanax-point li {
    display: block !important;
    width: 100% !important;
    color: #000;
    font-size: 20px;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    vertical-align: top
}

.why-gameanax-point li:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    left: 0;
    top: 10px;
    background-color: #dd277c;
    border-radius: 50%;
    display: inline-block
}

nav.stroke ul li a.active:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    content: '.';
    color: transparent;
    background: #ea2879;
    height: 2px;
    top: 40px
}

.policy p {
    font-size: 15px
}

.policypoints li {
    display: block !important;
    width: 100% !important;
    color: #212529;
    font-size: 15px;
    position: relative;
    padding-left: 30px;
    margin-bottom: 7px;
    vertical-align: top
}

.policypoints li:before {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    left: 0;
    top: 10px;
    background-color: #dd277c;
    border-radius: 50%;
    display: inline-block
}

@-moz-document url-prefix() {
    nav.fill ul li a,
    nav.stroke ul li a {
        position: relative
    }
    nav.fill ul li a:after,
    nav.stroke ul li a:after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0%;
        content: '.';
        color: transparent;
        background: #ea2879;
        height: 2px;
        top: 30px
    }
    nav.stroke ul li a:hover:after {
        width: 100%
    }
    nav.stroke ul li a.active::after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        content: '.';
        color: transparent;
        background: #ea2879;
        height: 2px;
        top: 30px
    }
}

.spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center
}

.spinner {
    width: 40px;
    height: 40px;
    background-color: #dd277c;
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

.form-control {
    font-size: 15px !important;
    border: 1px solid silver;
    padding: 21px 12px !important;
    border-radius: 0
}

.form-control:focus {
    border: 1px solid #000;
    box-shadow: none;
    border-radius: 5px
}

.form-group {
    margin-bottom: .5rem
}

.btn-custom-form {
    padding: 12px 110px;
    background: #dd277c;
    color: #fff;
    border: 1px solid #dd277c !important;
    transition: all .3s ease
}

.btn-custom-form:hover {
    background-color: #fff;
    border: 1px solid #dd277c;
    color: #dd277c;
    box-shadow: 0 10px 10px -12px #000;
    transition: all .3s ease
}

.divider {
    width: 100%;
    background-image: url(../Assets/img/divider.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    background: #a7777700 url(../Assets/img/divider.png);
    background-repeat: no-repeat;
    background-position: top center;
    height: 30px;
    margin-bottom: 30px
}

.mobile-about {
    display: none !important
}

@media only screen and (max-width:991px) {
    .menu li {
        border-right: none;
        margin-top: 20px
    }
    #menu-btn {
        margin-top: 20px;
        margin-left: 15px
    }
    .loader h2 {
        font-size: 3rem
    }
    .game-name {
        margin-top: 20px
    }
    .game-icon {
        display: none
    }
    .idle-human-slide {
        background-position-x: 24% !important
    }
}

@media only screen and (max-width :600px) {
    .img-shadow {
        border-radius: 50px
    }
    #g_recaptcha_container>div {
        width: 100% !important;
        overflow: hidden
    }
}

@media only screen and (max-width :480px) {
    #recaptcha_challenge_image {
        margin: 0 !important;
        width: 100% !important;
        height: auto !important
    }
    #recaptcha_response_field {
        margin: 0 !important;
        width: 100% !important;
        height: auto !important
    }
    .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 100% !important;
        height: auto !important
    }
    .recaptchatable .recaptcha_image_cell,
    .recaptchatable .recaptcha_r1_c1,
    .recaptchatable .recaptcha_r2_c1,
    .recaptchatable .recaptcha_r3_c1,
    .recaptchatable .recaptcha_r3_c2,
    .recaptchatable .recaptcha_r3_c3,
    .recaptchatable .recaptcha_r4_c1,
    .recaptchatable .recaptcha_r4_c2,
    .recaptchatable .recaptcha_r4_c4,
    .recaptchatable .recaptcha_r7_c1,
    .recaptchatable .recaptcha_r8_c1 {
        margin: 0 !important;
        width: 100% !important;
        background: 0 0 !important;
        height: auto !important
    }
    .btn-custom-form {
        width: 100%;
        padding: 10px 0
    }
    .rc-anchor-normal {
        width: 232px !important
    }
}

@media only screen and (max-width:667px) and (min-width:667px) {
    .swiper-container {
        height: 100%
    }
    .hero-button-bar {
        margin-bottom: 1.5rem
    }
}

@media only screen and (min-width:600px) {
    .custom-captcha {
        display: inline-block
    }
}

@media only screen and (max-width:600px) {
    .btn-custom-form {
        margin-top: 6px
    }
}

@media only screen and (max-width:600px) {
    .buttonbar {
        margin-top: 6px
    }
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #212529;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px
}

.timeline-box {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%
}

.timeline-box:nth-child(n+2) {
    margin-top: -50px
}

.timeline-box::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -12px;
    border: 4px solid #ee0979;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    background-image: linear-gradient(to bottom, #cadcf1, #d4e3f4, #dfeaf6, #e9f1f9, #f4f8fc);
    background-repeat: no-repeat;
    background-attachment: fixed
}

.timeline-box.left {
    left: 0;
    padding: 10px 60px 10px 0
}

.timeline-box.right {
    left: 50%;
    padding: 10px 0 10px 60px
}

.timeline-box.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 50px;
    border: medium solid #9babf5;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #9babf5
}

.timeline-box.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 50px;
    border: medium solid #9babf5;
    border-width: 10px 10px 10px 0;
    border-color: transparent #9babf5 transparent transparent
}

.timeline-box.right::after {
    left: -12px
}

.timeline-box .content {
    padding: 20px 30px;
    position: relative;
    border-radius: 6px;
    background: #9babf5
}

.box-image {
    border: 2px solid #dd267a;
    border-radius: 20px;
    background: #dd267a
}

.timeline-box p {
    text-align: justify
}

.timeline-box h2 {
    color: #ee0979;
    margin-bottom: 15px
}

.timeline-box h3 a {
    color: #212529;
    position: relative
}

.timeline-box h3 a:hover {
    text-decoration: none;
    color: #ea2879
}

.timeline-box h3 a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: #ea2879;
    height: 2px;
    top: 40px;
    transition: all .5s
}

.timeline-box h3 a:hover:after {
    width: 100%;
    content: '.';
    color: transparent;
    background: #ea2879;
    height: 2px;
    top: 40px
}

@media screen and (max-width:767px) {
    .timeline::after {
        left: 0
    }
    .timeline-box {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px
    }
    .timeline-box::before {
        left: 60px;
        border: medium solid #fff;
        border-width: 10px 10px 10px 0;
        border-color: transparent #fff transparent transparent
    }
    .timeline-box.left::after,
    .timeline-box.right::after {
        left: -12px
    }
    .timeline-box.right {
        left: 0;
        padding: 10px 0 10px 30px
    }
    .timeline-box.left {
        padding: 10px 0 10px 30px
    }
    .timeline-box.left::before {
        transform: rotate(180deg);
        left: 20px
    }
    .timeline-box.right::before {
        left: 20px
    }
    .timeline-box:nth-child(n+2) {
        margin-top: 0
    }
}

.footer {
    background: rgba(0, 0, 0, .2);
    padding-top: 50px
}

.copyright {
    background: #17283a
}

.footer-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 40px
}

.footer-links ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.footer-links ul li {
    margin: 0 0 15px;
    padding: 0
}

.footer-links ul li a {
    color: #212529;
    position: relative
}

.footer-links ul li a:hover {
    color: #ea2879;
    text-decoration: none
}

.footer-links ul li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: #ea2879;
    height: 2px;
    top: 40px;
    transition: all .5s
}

.footer-links ul li a:hover:after {
    width: 100%;
    content: '.';
    color: transparent;
    background: #ea2879;
    height: 2px;
    top: 40px
}

.footer-contact {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

.footer-contact a {
    color: #212529;
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px
}

.footer-contact a:hover {
    color: #ea2879;
    text-decoration: none
}

a.phone-number:before {
    position: absolute;
    content: "\f095";
    left: 0;
    top: 1px;
    display: inline-block;
    color: #212529;
    font-family: FontAwesome;
    font-size: 16px
}

a.email:before {
    position: absolute;
    content: "\f0e0";
    left: 0;
    top: 0;
    display: inline-block;
    color: #212529;
    font-family: FontAwesome;
    font-size: 16px
}

.social-media a {
    position: relative
}

.social-media a:hover {
    background-color: #ee0979;
    border-color: #ee0979;
    color: #fff
}

[class*=hint--]:after,
[class*=hint--]:before {
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    transition-delay: 0s
}

[class*=hint--]:after {
    background: #ee0979;
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap
}

.hint--top:hover:after {
    color: #17283a
}

[class*=hint--][aria-label]:after {
    text-shadow: none !important
}

.hint--top:hover:after {
    -webkit-transform: translateX(-50%) translateY(-8px);
    -moz-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px)
}

[class*=hint--][aria-label]:after {
    content: attr(aria-label)
}

.hint--top:after,
.hint--top:before {
    bottom: 100%;
    left: 50%
}

[class*=hint--]:hover:after,
[class*=hint--]:hover:before {
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    transition-delay: .1s
}

[class*=hint--]:hover:after,
[class*=hint--]:hover:before {
    visibility: visible;
    opacity: 1;
    color: #fff
}

[class*=hint--]:before {
    content: '';
    position: absolute;
    background: 0 0;
    border: 6px solid transparent;
    z-index: 1000001
}

.hint--top:before {
    margin-bottom: -11px
}

.hint--top:before {
    left: calc(50% - 6px)
}

.hint--success.hint--top:before {
    border-top-color: #ee0979
}

.hint--top:hover:before {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    transform: translateY(-8px)
}

.whatsup-number i {
    color: #212529
}

.social-media {
    margin-top: 30px;
    text-align: center
}

.social-media a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    border: 2px solid #212529;
    border-radius: 50%;
    margin-right: 6px;
    font-size: 16px;
    color: #212529
}

.fa-app-store-ios:before {
    content: "\f370"
}

.available-on a {
    display: inline-block;
    vertical-align: middle
}

.available-on a img {
    max-height: 37px
}

.game-detail p {
    margin-bottom: 25px
}

.game-detail {
    margin-bottom: 18px
}

.our-games-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -15px
}

.our-games-list .item {
    flex-basis: 33.33%;
    position: relative;
    margin-bottom: 30px;
    padding: 0 15px
}

.our-games-list .overlay-text {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    text-align: center;
    background: rgba(0, 0, 0, .5);
    padding: 0 10px;
    border-radius: 0 0 20px 20px
}

.our-games-list h3 {
    color: #fff;
    transform: translateY(18px);
    transition: all .3s;
    margin: 0
}

.our-games-list .available-on {
    visibility: hidden;
    opacity: 0;
    transform: translateY(37px);
    transition: all .3s
}

.our-games-list .item:hover h3 {
    transform: translateY(0);
    margin-bottom: 10px
}

.our-games-list .item:hover .available-on {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    height: auto
}

.our-games-list .item:hover .overlay-text {
    padding: 15px 10px 18px
}

.our-games-list .img-shadow {
    border-radius: 20px
}

.masonry {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    width: 100%;
    padding-bottom: 50px
}

.masonry-brick {
    flex: auto;
    height: auto;
    min-width: 150px;
    padding: 0 4px 8px;
    margin: 0;
    max-width: 40%;
    position: relative
}

.masonry-brick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.masonry-brick:nth-child(4n+1) {
    width: 20%
}

.masonry-brick:nth-child(4n+1):nth-child(4n+2) {
    width: 25%
}

.masonry-brick:nth-child(4n+1):nth-child(4n+3) {
    width: 22%
}

.masonry-brick:nth-child(4n+1):nth-child(4n+4) {
    width: 30%
}

.masonry-brick:nth-child(11) {
    width: 20%
}

.caption {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    bottom: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 15px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in
}

.masonry-brick:hover .caption {
    bottom: 8px;
    opacity: 1;
    visibility: visible
}

.hero-slider {
    height: calc(100vh - 82px);
    min-height: 550px;
}

.page-title {
    padding: 3rem 0;
    margin: 15px 0 0
}

.home-game-list .detail,
.home-game-list .image {
    padding: 3rem
}

.home-game-list .image img {
    max-width: 355px
}

.contact-wrap {
    padding: 3rem
}

.published-detail {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    color: #000;
    margin-bottom: 10px;
    font-weight: 700
}

.publisher-info img {
    max-height: 30px;
    line-height: 30px;
    display: block;
    height: 30px
}

.publisher-info strong {
    display: block;
    margin-top: 15px
}

.publisher-info {
    margin-left: 5px
}

.footer {
    background: #17283a
}

.social-media a {
    color: #fff;
    border-color: #fff
}

.footer-links ul li a {
    color: #fff
}

.footer-contact a,
.whatsup-number i,
a.email:before,
a.phone-number:before {
    color: #fff
}

.copyright {
    background: rgba(65, 65, 66, .7);
    padding: 5px 0
}

.copyright p {
    font-size: 14px
}

.footer-logo img {
    max-width: 240px
}

.footer .available-on {
    margin-top: 30px;
    text-align: center
}

.social-media a:last-child {
    margin-right: 0
}

.footer .navbar-brand {
    margin-right: 0
}

.footer-logo {
    text-align: center
}

/******01-03-2021******/

.note {
    font-size: 13px;
    line-height: 20px;
    padding: 0 12px;
    color: #17283a;
}
.game-submission-form .form-control{
	height: auto;
}
.game-submission-form .form-row{
	margin-bottom: 10px;
}
.game-submission-form .whiteBox{
	background: #fff;
	border: 1px solid #c0c0c0;
	padding: 17px 0;
	font-size: 15px;
	border-left: 2px solid #f95e6d;
	display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
}
.game-submission-form .form-check-inline, .game-submission-form .whiteBox > label{
	padding-left: 12px;
	margin: 0;
}
/*.game-submission-form .form-check-inline, {
	cursor: pointer;
}*/
.form-check-inline .form-check-input, .game-submission-form .form-check-label{
	cursor: pointer;
}
.check-flex-row{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}
.check-flex-row .form-check{
	flex-basis: 33.33%;
	margin: 10px 0 0;
}
.game-submission-form  input[type="file"]{
	padding: 18px 12px !important;
}
.customFileIinput{
	position: relative;
}
.customFileIinput >label{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    margin: 0;
    align-items: center;
    padding: 0 12px;
    font-size: 15px;
    cursor: pointer;
    z-index: 9;
    border: 1px solid #c0c0c0;
}
.game-submission-form .form-control.required-fild{
	border-left: 2px solid #f95e6d;
}
.iti{
	width: 100%;
	font-size: 15px;
}
.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel]{
	width: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
	border: 1px solid #c0c0c0;
	border-left:2px solid #f95e6d;
}

.other-input {
	border: none;
	border-bottom: 1px solid #c0c0c0;
	padding-left: 10px;
	padding-right: 10px;
	max-height: 30px;
}
.mouse-pointer{
	cursor: pointer;
}

.or{
	font-size: 16px;
}
button, input, optgroup, select, textarea{
	outline: none;
}
button:focus, input:focus, optgroup:focus, select:focus, textarea:focus{
	outline: none;
}

#partitioned {
  padding-left: 15px;
  letter-spacing: 38px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 51px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 315px;
  min-width: 315px;
  background-color: transparent;
  font-size: 21px;
}

#divInner{
  left: 0;
  position: sticky;
}

#divOuter{
  width: 290px;
  overflow: hidden;
  margin: 0 auto;
}
.opt-modal .modal-body{
	background-image: linear-gradient(to bottom, #cadcf1, #d4e3f4, #dfeaf6, #e9f1f9, #f4f8fc);
}
.opt-modal .modal-content{
	border-width: 0;
    border-radius: 10px;
}
/*.opt-modal .modal-footer{
	background: #dd277c;
}*/
.opt-modal .modal-header{
	border: none;
	align-items: center;
}
.opt-modal .modal-title{
	font-weight: 400 !important;
}
.opt-modal .highlighted-text{
	font-weight: bold;
	background-size: 51% 4px;
}
.opt-modal .close{
	opacity: 1;
	padding: 0;
	font-size: 30px;
}


.screnshot-slider{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.screen-item{
	padding: 0 5px 10px;
	flex-basis: 20%;
}
.screen-item img{
	max-width: 100%;
}
.slick-dots{
	margin: 30px 0 0;
	list-style: none;
	text-align: center;
	padding:0;
}
.slick-dots li{
	display: inline-block;
	margin: 0 5px;
	padding: 0;
}
.slick-dots li button{
	padding: 0;
	border: none;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background: #000;
	text-indent: -99999px;
}
.slick-dots li.slick-active button{
	background: #dd267a;
}
.screen-shots{
	padding-top: 40px;
}
.game-detail h2{
	margin-bottom:20px;
	color: #dd267a;
  text-transform: capitalize;
}
.game-detail > ul{
	margin: 20px 0 30px;
	padding: 0;
	list-style: none;
}
.game-detail > ul > li{
	padding: 0 0 0 25px;
    margin: 0 0 10px;
    position: relative;
}
.game-detail > ul > li:before{
	content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 11px;
    background: #dd267a;
    left: 0;
}
.slug{
  cursor: pointer;
}

    /******26/03/2021*******/
    /* The Modal (background) */
  .gallery-modal.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  }

  /* Modal Content */
  .gallery-modal .modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1500px;
  background: none;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 100px);
  }

  /* The Close Button */
  .gallery-modal .close {
  top: 82px;
  color: #fff;
  text-shadow: none;
  font-weight: 700;
  opacity: 1;
  padding: 2px 10px 5px;
  background: #dd267a;
  position: absolute;
  right: 0;
  font-size: 35px;
  font-weight: bold;
  z-index: 9;
  }

  .gallery-modal .close:hover,
  .gallery-modal .close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
  }

  .mySlides {
  display: none;
  }

  .cursor {
  cursor: pointer;
  }

  /* Next & previous buttons */
  .gallery-modal .prev{
  left: 0;
  }
  .gallery-modal .prev,
  .gallery-modal .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: #dd267a !important;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background: #fff;
  font-weight: 300;
  }

  /* Position the "next button" to the right */
  .gallery-modal .next {
  right: 0;
  border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  /*.prev:hover,
  .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  }*/

  /* Number text (1/3 etc) */
  .gallery-modal .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  }
  img.hover-shadow {
  transition: 0.3s;
  }

  .hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  @media only screen and (max-width: 767px) {
  .gallery-modal .prev, .gallery-modal .next{
  padding: 8px;
  }
  .gallery-modal .close{
  font-size: 25px;
  }
  }

/*** 1 april 2021 **/
.left-bar{
padding: 0;
margin: 0 0 30px;
border-radius: 10px 10px 0 0;
}
.left-bar h4{
padding: 10px 15px;
background: #17283a;
color: #fff;
border-radius: 10px 10px 0 0;
cursor: pointer;
}
.left-bar ul{
margin: 0;
padding: 10px 0;
list-style: none;
position: absolute;
top: 100%;
left: 0;
width: 0;
display: none;
flex-wrap: wrap;
border-top: 3px solid #17283a;
border-radius: 0 10px 0 0;
background: #fff;
z-index: 9;
box-shadow: 5px 4px 5px -1px rgba(23,40,58,0.65);
-webkit-box-shadow: 5px 4px 5px -1px rgba(23,40,58,0.65);
-moz-box-shadow: 5px 4px 5px -1px rgba(23,40,58,0.65);
transition: all 0.3s ease-in-out;
opacity: 0;
}
.left-bar ul.menu-open{
display: flex;
width: 600px;
opacity: 1;
}
.left-bar ul li{
margin: 0 0 5px;
padding: 0;
display: block;
flex-basis: 33.33%;
}
.left-bar ul li a{
padding: 7px 15px;
display: block;
font-family: CircularStd;
letter-spacing: 1.4px;
text-transform: uppercase;
line-height: 18px;
font-weight: 500;
font-size: 14px;
}
.left-bar ul li a:hover{
background: #17283a;
color: #fff;
text-decoration: none;
}
.blog-content{

}
.blog-list{
display: flex;
justify-content: space-between;
align-items: top;
flex-wrap: wrap;
padding-left: 15px;
}
.blog-item{
flex-basis: 31%;
margin-bottom: 20px;
background: #fff;
padding: 10px 15px;
border-bottom: 5px solid #17283a;
border-top: 5px solid #17283a;
border-radius: 10px;
display: flex;
flex-direction: column;
}
.blog-item.latest{
flex-basis: 100%;
flex-direction: row;
flex-wrap: wrap;
padding-top: 20px;
}
.blog-item.latest .blog-image{
flex-basis: 60%;
padding-right: 20px;
}
.blog-item.latest .blog-detail{
flex-basis: 40%;
}
.blog-item.latest .blog-detail p{
display: block;
}
.blog-image img{
max-width: 100%;
}
.blog-image {
margin-bottom: 20px;
}
.blog-title h2, .blog-title h2 a{
font-size: 18px;
text-transform: capitalize;
margin:0 0 10px;
font-weight: 500 !important;
color: #17283a;
}
.blog-title h2 a:hover{
text-decoration: none;
color: #dd277c;
}
.meta{
font-size: 14px;
margin-bottom: 10px;
color: #17283a;
/* display: none; */
}
.meta a{
color: #17283a;
}
.meta span{
padding-right: 20px;
position: relative;
}
.meta span:after{
content: "";
position: absolute;
right: 9px;
top: 50%;
width: 1px;
height: 15px;
margin-top: -7px;
background: #17283a;
}
.meta span:last-child{
padding-right: 0;
}
.meta span:last-child:after{
display: none;
}
.blog-detail p{
font-size: 16px;
display: none;
}
.blog-detail .btn{
margin: 0 auto 10px;
display: table;
}
.category-name h4{
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin: 0 0 10px;
color: #7085ec;
}
.blog-search {
margin-bottom: 15px;
display: flex;
justify-content: flex-end;
}
.blog-search button{
border: none;
background: #17283a;
color: #fff;
width: 34px;
height: 34px;
}
.left-menu{
position: relative;
}
.left-bar .Contact-form{

}
.left-bar .btn-custom-form{
padding: 12px 20px;
width: 100%;
}
nav.pagination-nav {
background: none;
padding:10px 0 40px;
}
.pagination{
align-items: center;
justify-content: center;
margin: 0;
}
nav.pagination-nav ul li a{
margin: 0;
}
.page-item.active .page-link {
background-color: #17283a;
border-color: #17283a;
}
.page-link{
color: #17283a;
}
#search_action,.blog_detail_page{
  cursor: pointer;
}
.blog-list{
justify-content: flex-start;
}
.blog-item{
margin-right: 3.5%;
}
.blog-item:nth-child(3n+1) {
margin-right: 0;
}

/** 02 april 2021 blog detail page ***/
.blog-detail-page .page-title{
padding-bottom: 0;

}
.blog-detail-page .page-title .display-4{
margin-bottom: 10px;
}
.writen-by {
font-size: 16px;
margin-bottom: 30px;
}
.blog-discription img{
margin-bottom: 40px;
max-width: 100%;
}
.blog-discription p{
margin-bottom: 30px;
}
.blog-discription h2, .blog-discription h1{
font-size: 32px;
margin: 0 0 20px;
text-transform: capitalize;
}
.blog-discription h3, .blog-discription h4, .blog-discription h5, .blog-discription h6{
font-size: 24px;
margin: 0 0 15px;
text-transform: capitalize;
}
.blog-discription ul, .blog-discription ol{
margin: 0;
padding:0 0 25px 25px;
list-style: none;
}
.blog-discription ul li{
margin: 0 0 10px;
padding: 0 0 0 25px;
display: block;
position: relative;
}
.blog-discription ul li:before{
content: "";
position: absolute;
left: 0;
top: 12px;
height: 10px;
width: 10px;
background: #000;
}
.blog-discription > br{
display: none;
}
.share-bar .thread-share-bar-buttons {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
}

.share-bar .thread-share-bar-buttons .thread-share__button {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
padding: 2px 8px;
white-space: nowrap;
color: #fff;
font-size: 13px;
position: relative;
font-weight: 600;
border-radius: 4px;
margin-right: 8px;
cursor: pointer;
}
.share-bar .thread-share-bar-buttons .share-twitter {
background-color: #00aced;
}
.share-bar .thread-share-bar-buttons .thread-share__button .share-text {
margin-left: 4px;
margin-top: .5px;
}
.share-bar .thread-share-bar-buttons .share-facebook {
background-color: #3b5998;
}
.comment-nav ul{
margin: 40px 0 10px 0;
padding: 0;
list-style: none;
display: flex;
border-bottom:1px solid gray;
}
.comment-nav ul li{
margin: 0 15px 0 0;
padding:0;
}
.comment-nav ul li a{
color: rgba(0,0,0,0.6);
display: block;
padding-bottom: 5px;
position: relative;
}
.comment-nav ul li a:hover{
text-decoration: none;
}
.comment-nav ul li a.active{
color: #000;
}
.comment-nav ul li a.active:after{
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 2px;
background: #000;
}
.blog-action{
display: flex;
}
.recommend-button{
margin-right: 15px;
}
.write-comment {
padding-top: 20px;
display: flex;
}
.avatar-image {
width: 50px;
height: 50px;
margin-right: 15px;
}
.avatar-image img{
max-width: 100%;
}
.comment-fild{
flex-basis: calc(100% - 65px);
}
.comment-fild textarea{
width: 100%;
padding: 15px;
font-size: 15px;
}
.connect__button {
display: block;
text-indent: -9999em;
opacity: .9;
border: none;
cursor: pointer;
}
.auth-facebook button {
background: url('../Assets/img/blog/svg-sprite.svg') -38px -38px no-repeat;
width: 38px;
height: 38px;
}
.use-opacity-transitions .connect__button, .use-opacity-transitions .sso__button {
transition: opacity .2s;
}
.auth-twitter button {
background: url('../Assets/img/blog/svg-sprite.svg') -39px 0 no-repeat;
width: 38px;
height: 38px;
}
.auth-google button {
background: url('../Assets/img/blog/svg-sprite.svg') 0 -38px no-repeat;
width: 38px;
height: 38px;
}
.login-with{
display: flex;
margin-top: 10px;
}
.comment-fild > span{
font-size: 15px;
}
.comment-section{
margin-bottom: 40px;
}
.comment-list{
margin: 30px 0;
}
.comment-row{
display: flex;
align-items:flex-start;
flex-wrap: wrap;
margin-bottom: 10px;
}
.usser-pic{
height: 40px;
width: 40px;
border-radius: 50%;
background: #dd267a;
line-height: 40px;
margin-right: 15px;
color:#fff;
text-transform: uppercase;
font-weight: 700;
font-size: 20px;
text-align: center;
}
.usser-pic a{
color: #fff;
}
.user-detail{
flex-basis: calc(100% - 55px);
font-size: 15px;
line-height: 27px;
}
.user-detail p{
margin: 0;
line-height: 20px;
}
.comment-row.inner{
margin-top: 10px;
}
.comment-row.inner .usser-pic{
height: 25px;
width: 25px;
font-size: 15px;
line-height: 25px;
}
.comment-row.inner .user-detail{
flex-basis: calc(100% - 40px);
}

.blog-detail-page .meta{
display: flex;
}
.back-button {
    padding: 15px 0 0 15px;
    position: fixed;
}
.back-button .btn-custom-form{
	padding: 5px 15px;
}
.contact-image img{
	max-width: 100%;
}
.back-button{
z-index:9;
}
.blog-image{
	min-height: 117px;
}
.blog-title h2{
	min-height: 75px;
}
.blog-item.latest .blog-title h2{
	min-height: inherit;
}
.blog-image img {
    width: 100%;
    min-height: 117px;
    object-fit: cover;
}

/** 16 april 2021 **/
.blog-item.latest .blog-title h2 {
    min-height: inherit;
    width: 270px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.category-name h4{
	text-transform: capitalize;
}

.blog-item.latest .blog-image{
	margin-bottom: 10px;
}
.blog-item.latest .blog-detail p{
	margin-bottom: 0;
}
.blog-search .search-fild{
	padding-left: 15px;
    background: none;
    font-size: 16px;
    border: none;
    flex-basis: calc(100% - 34px);
}
.blog-search {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
    background: #fff;
    border-radius: 20px;
    padding: 0 5px 3px 0;
}
.blog-search button{
	background: none;
    color: #17283a;
}
.left-bar h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.left-bar h4 span {
    flex-basis: calc(100% - 30px);
    font-size: 20px;
}
nav.pagination-nav ul li a{
font-size: 16px;
padding: 5px;
}
.page-item.active .page-link{
font-size: 16px;
}

/** 18 april 2021 **/
.sitemap-content{
padding-bottom: 30px;
}
.sitemap-content ul{
margin: 0;
padding: 25px 0 15px 25px;
list-style: none;
}
.sitemap-content ul li{
margin: 0 0 10px;
padding: 0 0 0 25px;
display: block;
position: relative;
}
.sitemap-content ul li:before {
content: "";
position: absolute;
left: 0;
top: 12px;
height: 10px;
width: 10px;
background: #dd267a;
}
.sitemap-content ul li a{
color: #212529;
text-transform: capitalize;
}
.sitemap-content ul li a:hover{
text-decoration: none;
color: #dd267a;
}

/*****21/04/2021*******/
.blog-discription iframe{
	width: 100%;
	max-width: 100%;
	height: 600px;
}
.dev_app_play_store_btn{
  cursor: pointer;
}