body{
    background: #061a30;
    font-family: "open sans";
}

/* for loading */
.loader{
    display:block;border: 6px solid #f3f3f3;border-radius: 50%; border-top: 6px solid #f0c300;width: 60px; height: 60px;animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; -moz-animation:spin 1s linear infinite; -o-animation: spin 1s linear infinite;
}

.option  .pack-list{
    border-bottom: 1px solid #f7f8f8;
}

@keyframes spin{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@-webkit-keyframes spin{
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes spin{
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}

@-o-keyframes spin{
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}

.outside{
    margin-top: 15px;
}

.container-out-page{
    padding-right: 66px;
}

.inside-outside{
    display: flex;
}

.inside-outside .logo{
    height:50px;
    margin-right: 15px;
}

.inside-outside:first-child{
    padding-left: 66px;
}

.vertical-it{
    margin: auto 0;
    line-height: 0.8;
    justify-content: space-around;
}

.outside h1{
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    letter-spacing: 3px;
    font-weight: bold;
    margin-bottom: 0;  
}

.logged{
    justify-content: end;
}

.outside .log-in{
    border: solid 1px #056fa5;
}

.outside .log-in:hover{
    background: #309bd1;color: #fff !important;cursor: pointer;
}

.outside .sign-in{
    background: #056fa5;
}

.outside .sign-in:hover{
    background: #309bd1; color: #fff !important;cursor: pointer;
}

.outside .log-in,
.outside .sign-in{
    color: #fff;padding: 4px 10px;text-transform: uppercase;font-family: 'Open Sans', sans-serif;font-size: 12px;letter-spacing: 0.7px;
}

.outside .btn{
    border-radius: 0 !important
}

.outside .dropdown-toggle::after{
    display: none;
}

.outside button{
    color: #fff;
}

.outside .lang{
    margin-right: 12px;text-transform: uppercase;font-weight: bold;
}

.outside .btn:hover{
    color: #056fa5;
}

.logo_loggin{
    width: 160px;margin: 0 auto;display: block;
}

.modal-header .row{
    width:100%;
}

.modal-header h1{
    text-transform: uppercase;font-weight: bold;font-size: 30px;padding-bottom: 15px;
}

.modal-header p{
    color: rgba(16,113,163,0.8);padding-bottom: 6px;font-size: 14px;
}

.modal-header button.close{
    position: absolute;right: 16px;
}

#logintoGarame span{
    color: rgba(16,113,163,0.8);font-size: 14px;margin-right:30px;
}

#logintoGarame i.fas{
    padding: 7px;background: rgba(255,255,255,0.1);border-radius: 50%;margin-right: 7px;width:28px;height:28px;
}

#logintoGarame a{
    color: rgba(16,113,163,0.8);
}

#logintoGarame span:hover a{
    text-decoration: none; color: #309bd1;cursor: pointer;
}

#logintoGarame span:hover i.fas{
    background: #309bd1 !important; cursor: pointer;color:#191919;
}

#logintoGarame .modal-body{
    padding: 25px 45px;
}

.inside-outside .modal-header h4{
    font-family: 'open sans';text-transform: uppercase; color:#fff;font-size:15px;letter-spacing:1px;
}

.inside-outside .modal-content{
    background: rgba(0,0,0,0.6); border: solid 1px rgba(5,111,165,0.5); border-radius: 0 !important;
}

.inside-outside .modal-content label{
    color: #d6d6d6;
}

.inside-outside .modal-footer{
    border-top: 1px solid rgba(5,111,165,0.4);
}

/* .inside-outside .modal-footer button.btn{
    background: #000;
    text-transform: uppercase;
    font-family: 'open sans';
    font-size: 12px;
    border: solid 1px rgba(5,111,165,0.4);
    letter-spacing: 1.5px;
} */

.btn-footer{
    background: #000;
    text-transform: uppercase;
    font-family: 'open sans';
    font-size: 10px;
    border: solid 1px rgba(5,111,165,0.4);
    letter-spacing: 1.5px;
    color: #fff;
}


.inside-outside .modal-header{border-bottom:solid 1px rgba(5,111,165,0.5);}

#tosignin .modal-header{
    border-radius: 0 !important;
}

#tosignin .modal-header h4{
    font-family: 'open sans'; text-transform: uppercase; color:#fff;font-size:15px;letter-spacing:1px;
}

#tosignin .modal-footer button.btn{
    text-transform: uppercase;font-family: 'open sans';font-size: 12px;
}

#tosignin .modal-dialog{
    max-width: 700px !important;
}

.modal-dialog .form-control{
    border-radius: 0;
}
#tosignin .form-check-label{
    padding-top: 5px;
}
.modal-header button.close:hover{
    color: #063453;text-shadow: 0 1px 0 #063453;
}

.modal-footer button.btn:hover,
.btn-footer:hover{
    color:#fff;
    background: #063453 !important;
}

header{
    padding-right: 0;
}

nav{
    background: #063453;border-bottom: solid 2px #f0c300;text-transform: uppercase;margin-top: 10px;
}

.navbar{
    padding: 0 1rem !important;
}

.navbar-nav{
    padding-left: 37px;
}

nav .nav-item{
    padding: 15px 10px;
}

nav .nav-link{
    color: #f7f7f7;font-family: 'Open Sans', sans-serif;font-size: 14px;
}

nav li.active{
    background-image: linear-gradient(120deg,#f0c300,#ffba00);
}

nav li:hover{
    background-image: linear-gradient(120deg,#f0c300,#ffba00); cursor: pointer;
}

#page .line-effect{
    margin:0; height: 2px; position: relative;animation: light-line 1s ease infinite alternate;
}

@keyframes light-line{
    0%{
        background:rgba(48, 42, 7, 0.4);
        box-shadow: 0 0 2px rgba(255,174,0,0.3);
    }

    100%{
        background:rgba(242, 195, 0, 0.9);
        box-shadow: 0 0 13px rgba(242, 195, 0, 0.7);
    }       
}

.dropdown-menu{
    background: #056fa5;min-width: 0 !important;border-radius: 0 !important;padding: 0;
}
.dropdown-menu .dropdown-item{
    text-transform: uppercase;text-align: center;color: #fff;padding: 10px 23px;
}

.dropdown-menu .dropdown-item:hover{
    color: #061a30;
}

.main-cover .left-side{
    padding-left: 0;
}

.main-cover .right-side{
    background: #000;text-transform: uppercase;font-family: open sans;
}

.main-cover .btn-left:hover{
    animation: glow 800ms ease-out infinite alternate,neon-light 800ms ease infinite;
    
}

@keyframes glow{
    0% {
        border-color: #ffe23f;box-shadow: 0 0 5px rgba(255,214,46,0.2), inset 0 0 5px rgba(255,214,46,0.1);   
    }

    100%{
        border-color: #ffcd00;box-shadow: 0 0 15px rgba(255,214,46,0.7), inset 0 0 5px rgba(255,214,46,0.5);

    }
}

@keyframes neon-light{
    0%, 100% {
        text-shadow: 0 0 5px #ffcd00;
    }

    50%{
        text-shadow: 0 0 2px #ffd332;
    }
}

.main-cover .btn-right:hover{
    color: #a79614 !important;background: #ffed0e !important;
}

.main-cover .right-side h4{
    color: #f0c300;font-size: 21px;font-family: 'open sans';margin-bottom: 0;float: right;
}

.main-cover .right-side h1{
    color: #f3f3f3;font-size: 54px;font-weight: bold;margin-bottom: 0;line-height: 0.8;float: right;
}

.main-cover .right-side .setmargin-first{
    margin-top: 8.5rem;
}

.main-cover .right-side .setmargin-last{
    margin-top: 4.5rem;
}

.main-cover .right-side .setmargin-last div.col-md-5,
.main-cover .right-side .setmargin-last div.col-md-7{
    justify-content: end;display: flex;
}

.main-cover .right-side .setmargin-last .btn-left{
    color: #f0c300;border-color: #f0c300;padding: 10px 26px;text-transform: uppercase;font-family: open sans;border-radius: 0;
}

.main-cover .right-side .setmargin-last .btn-right{
    color: #020107;text-transform: uppercase;color: #020107;background: #f0c300;border-radius: 0;padding: 10px 26px;
}

.game-mode{
    background-image: linear-gradient(to bottom,  #000000, #061a30);
}

.game-mode .col-md-12:first-child h1{
    font-family: 'open sans';
    color: #f7f7f7;
    font-size: 30px;
    text-transform: uppercase;
    padding-top: 4.5rem;
    padding-bottom: 1rem;
}

.game-mode .subtitle{
    background: #063453;
    opacity: 0.4;
    margin-bottom: 2.5rem;
    width:90.5%;
}

.game-mode .col-md-12:last-child{
    padding-bottom:4.5rem;
}

.game-mode .col-md-12:last-child .row{
    justify-content: center;
}

.game-mode .game-choice{
    /*border: solid 2px #e8e8e8;*/
    background-image: radial-gradient(circle,#063453,#000939);
    margin:0px 18px;
    height:234px;
}

.game-mode .game-choice img{
    position:absolute;
    top:20px;
    right:20px;
    width:80%;
    height: auto;
    transition-property: transform;
    transition-duration: 3s;
}

.game-mode .game-choice h1{
    text-transform: uppercase;color:#f7f7f7;font-family: 'open sans';font-size:20px;padding-top: 12rem;
}

.game-mode .game-choice{
    max-width: 19.5%;
}

.game-mode .game-choice:hover{
    background-image: radial-gradient(circle,#f0c300,#cb9000) !important;
    cursor: pointer;
}

.game-mode .game-choice:hover .exterior-circle{
    animation-name: rotate;animation-duration: 7s;animation-iteration-count: infinite;animation-timing-function: linear;
}

.game-mode .game-choice:hover .interior-circle{
    animation-name: rotate-inverse;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: linear;
}

@keyframes rotate{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes rotate-inverse{
    from {transform: rotate(360deg);}
    to {transform: rotate(0deg);}
}

/* info steps */
#info-steps{
    background: #063453;padding: 5em 0 4.5em 0;
}

#info-steps div.container{
    padding-right: 49px;padding-left: 34px;
}

#info-steps div.col-md-5 h1{
    color: #fff;font-size: 11rem;font-family:'open sans';padding-left: 1rem;border-right: 1px solid;line-height: 1;
}

#info-steps div.col-md-7 h1{
    text-transform: uppercase; color:#fff;font-size: 22px;font-weight: bold;font-family:'open sans';letter-spacing: 0.5px;margin-top: 1rem;
}

#info-steps div.col-md-7 p{
    color: #fff;font-family: open sans;font-size: 13px;padding-top: 1rem;
}

.content-summary li::before{
    content: '>';color: #dedede;font-family: "open sans";padding-right: 15px;
}

.content-summary .logo-content{
    height:60px;margin-right: 5px;display: inline-block;
}

.general-informations{
    background: #061a30; padding: 45px 0;
}

.general-informations .actuality,
.general-informations .bestplayers,
.general-informations .elo,
.general-informations .tab-content:first-child .image-side{
    overflow-x: hidden;
}

.general-informations .container{
    padding-left:0;
}

.general-informations .theimage{
    width:104%;
}

.general-informations .details-side,
.general-informations .col-md-11{
    padding-left:0;
}

.general-informations .nav-tabs{
    text-transform: uppercase;
    font-family: 'open sans';
    font-size: 15px;
}

.general-informations ul{
    border-bottom: 1px solid #f0c300;
}

.general-informations li{
    padding: 8px 15px;
}

.general-informations li a{
    color: #f7f7f7;
}

.general-informations li.active{
    background: #f0c300;
}

.general-informations li.active a{
    color: #061a30;
}

.general-informations li:hover{
    background:#eec61f;  
}

.general-informations li:hover a{
    color: #061a30;
}

.general-informations a:hover{
    text-decoration: none;
}

.general-informations .details-side{
    background: #061f37;
    padding-right: 0;
}

.general-informations .details-side ul{
    border-bottom: 1px solid #061a30;
}

.general-informations .details-side .items-dates{
    font-family:'open sans';color: #4ab4f0;font-size: 13px;
}

.general-informations .details-side .items-summary{
    font-family:'open sans';color:#e8e8e8;font-size: 13px;
}

.general-informations .select_items{
    padding-right: 64px;
}

.general-informations .actuality .select_items:hover{
    background: #063453;
    width: 100%;
}

.general-informations .details-side li:not(:first-child){
    background: #061f37;
    border-top: solid 2px #061a30;
}

.general-informations .details-side li.active{
    background: #063453;
}

/* promotionnal-offer */
.promotionnal-offer{
    padding-bottom: 4.5rem;
    background-image: linear-gradient(to bottom, #061a30, #1c538f);
}

.promotionnal-offer h1{
    font-family: 'open sans';
    color: #f7f7f7;
    font-size: 30px;
    text-transform: uppercase;
    padding-top: 4.5rem;
    padding-bottom: 1rem;
}

.promotionnal-offer .subtitle{
    background: #e7e7e7;
    opacity: 0.4;
    margin-bottom: 2.5rem;
    width:90.5%;
}

.promotionnal-offer .pack-container{
    padding-left: 66px; padding-right:66px;
} 

.promotionnal-offer .free-pack{
    background: #061a30;
}

.promotionnal-offer .text-pack{
    text-transform: uppercase;
    opacity: 0.8;
    font-family: open sans;
    line-height: 0.8;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: bold;
}

.promotionnal-offer .free-pack h4{
    color: #319dbc;
}

.promotionnal-offer .starter-pack{
    background: #020106; 
}

.promotionnal-offer .starter-pack h4{
    color: #e1e1e1;
}

.promotionnal-offer .gold-pack{
    background: #f0c300; 
}

.promotionnal-offer .gold-pack h4{
    color: #f6ff00;
}

.promotionnal-offer .header-pack{
    padding: 14px 0;
}

.promotionnal-offer .price{
    text-transform: uppercase;
    color: #fff;
    font-size: 25px;
    font-family: 'open sans';
    margin-bottom: 0;
}

.promotionnal-offer .body-pack{
    background: #e1e1e1;
}

.promotionnal-offer .body-pack ul{
    list-style: none;
    text-align: center;
    padding: 0;
}

.promotionnal-offer .pack-list:first-child{
    padding: 15px 0 8px 0;
    font-family: 'open sans';
}

.promotionnal-offer .pack-list{
    padding: 8px 0;
    font-family: 'open sans';
}

.promotionnal-offer .pack-list:last-child{
    padding: 8px 0 30px 0;
    font-family: 'open sans';
}

/* content-summary */
.content-summary{
    padding: 4.5rem 0;
    background: #063453;
}

.content-summary .col-md-4{
    padding-left:66px;
}

.content-summary .summary-text{
    color: #f5f5f5;
    font-size: 13px;
    font-family: open sans;
    margin-top: 1.6rem;
}

.content-summary .col-md-4 h1{
    text-transform: uppercase;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: bold;
    margin-bottom: 0;
    display: inline-block;
}

.content-summary .social-part .col-md-2{
    padding-left: 0;
}

.content-summary .facebook img{
    height: 20px; margin-left:10px;
}

.content-summary .tweet img{
    height: 15px; margin-left:6px;
}

.content-summary .whatsapp img{
    height: 18px; margin-left:6px;
}

.content-summary li:hover{
    color: #dedede;
    cursor: pointer;
}

.content-summary .icons{
    background: #0e2f46;
    border-radius: 40px;
    width: 30px;
    height: 30px;
}

.content-summary .icons:hover{
    background: #309bd1;
}

.content-summary .all-links h1{
    color: #fff;
    text-transform: uppercase;
    font-size: 21px;
    font-family: 'open sans';
}

.content-summary .all-links ul{
    list-style: none;
    color: #3d81cc;
    text-transform: uppercase;
    font-family: 'open sans';
    margin-top: 17px;
    font-size: 14px;
    padding-left: 0;
}

.content-summary .all-links li{
    padding: 5px 0;
}

.content-summary .all-applications .col-md-12{
    margin-bottom: 30px;
}

.content-summary .all-applications .col-md-12 h2{
    color: #fff;
    font-family: 'open sans';
    font-size: 16px;
    float: left;
    margin-bottom: 0;
}

.content-summary .all-applications .col-md-8{
    display: flex;
}

.content-summary .windows{
    height: 30px;
    margin: auto 0;
}

.content-summary .apple{
    height:40px;
}

.content-summary .android{
    height: 25px;
    margin-top:20px;
}

footer{
    color: #ebebeb;
    font-size: 14px;
    font-family: 'open sans';
    padding: 20px 0;
}

footer .col-md-5 p:first-child{
    padding-left: 50px;
}

.icon-menu{
    width: 25px;
    margin-right: 15px;
}

@media only screen and (min-width: 992px){
    .outside h1{
        margin-bottom: auto;
    }

    .navbar-mobile{
        display: none;
    }

    .navbar-desktop{
        display: flex;
    }
}

@media only screen and (min-width:768px) and (max-width:991px){
    .navbar-mobile{
        display: none;
    }

    .navbar-desktop{
        display: flex !important;
    }

    .navbar-nav{
        flex-direction: row;
    }

    .main-cover .left-side{
        padding: auto;
    }

    .main-cover .right-side h4,
    .main-cover .right-side h1{
        float: none;
        text-align: center;
    }

    .main-cover .left-side img{
        width:100%;
    }
    
    .setmargin-last .btn-left{
        float: right;
    }

    .general-informations .theimage{
        width: auto;
    }

    .outside .vertical-it{
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .game-mode .game-choice{
        max-width: 200px;
        width:100%;
    }
}

@media only screen and (max-width: 767px){
    .navbar-mobile{
        display: flex;
        flex-direction: inherit;
    }

    .navbar-desktop{
        display: none;
    }

    .navbar-desktop{
        padding-left: 0;
    }

    .navbar,
    .navbar .col-md-12{
        padding: 0 !important;
    }

    .navbar-mobile .nav-item{
        margin-left: 15px;
        padding: 10px 20px;
    }

    .navbar-desktop .nav-item{
        padding-left: 75px;
    }

    .imgcover{
        width: 100%;
    }

    .main-cover .right-side .setmargin-first{
        margin-top: 3.5rem;
    }

    .main-cover .right-side h4,
    .main-cover .right-side h1{
        float: none;
        text-align: center;
    }
}

@media only screen and (min-width:576px) and (max-width:767px){
    .inside-outside .logo{
        height: 35px;
    }

    .inside-outside .vertical-it{
        font-size: 15px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .main-cover .right-side h1,
    .main-cover .right-side h4{
        text-align: center;
        float: none;
    }

    .setmargin-last .btn-left{
        float: right;
    }

    .game-mode .game-choice{
        max-width: 200px;
        width:100%;
    }

    .general-informations .select_items{
        padding-right: 60px;
        padding-left: 40px;
        width: 100%;
    }

    .pack:not(:first-child){
        margin-top: 2rem;
    }

    .all-links,
    .all-applications{
        margin-top: 2rem;
    }

    .content-summary .windows{
        height: 24px;
    }

    .content-summary .apple{
        height: 35px;
    }

    .content-summary .android{
        height: 20px;
        margin-top:10px;
    }
}

@media only screen and (max-width:575px){
    .all-links{
        margin-top: 15px;
    }

    .all-applications .windows,
    .all-applications .apple{
        height: 20px;
    }

    .all-applications .android{
        height:17px;
    }

    .all-applications .col-4,
    .all-applications .col-4{
        display: flex;
    }

    .all-applications .apple,
    .all-applications .android{
        margin: 0;
    }

    footer .col-12{
        text-align: center;
    }

    footer .col-12 p{
        padding-left: 0 !important;
    }

    .inside-outside:first-child{
        padding-left: 30px;
    }

    .outside h1{
        margin-bottom: auto;
        font-size: 15px;
    }

    .inside-outside .row{
        width: 100%;
    }

    .vertical-it .creditdiv{
        margin: 0;
        font-size: 13px;
    }

    .info-user,
    .user-setting,
    .vertical-it .creditdiv{
        display: flex;
    }

    .user-setting,
    .vertical-it .creditdiv{
        align-items: center;
    }

    .game-mode .game-choice{
        max-width: 300px;
    }

    .game-mode .game-choice:not(:last-child){
        margin-bottom: 30px;
    }

    .game-mode .game-choice img{
        width: 50%;
        right: 25%;
    }

    .items-content{
        padding-left:30px;
    }
}   

/*animate button dev 122*/

.glow-on-hover {
    width: 220px;
    height: 35px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}