@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");

@font-face {
	font-family: 'MTCORSVA';
	src: url('/s_hpcg/fonts/MTCORSVA.eot');
	src: local('MTCORSVA'), url('/s_hpcg/fonts/MTCORSVA.woff') format('woff'), url('/s_hpcg/fonts/MTCORSVA.ttf') format('truetype');
}

body {
    padding:0px;
    margin:0px;
    font-family: 'Roboto Mono';
    box-sizing:border-box;
    background: rgb(52,35,89);
    background: linear-gradient(0deg, rgba(52,35,89,1) 17%, rgba(0,153,244,1) 100%);
    /*background:url(img/bg_main.jpg) no-repeat;
    background-size:cover;*/
}
p {
    line-height:1;
    margin: 5px 0;
}
.h1 {
    font-weight:bold;
    font-size:140%;
    font-size:32px;
    margin-bottom:10px;
    font-family: 'MTCORSVA';
}

.h2 {
    font-weight:bold;
    font-size:130%;
    font-size:25px;
    margin-bottom:10px;
    font-family: 'MTCORSVA';
}
#content {
    overflow:hidden;
}
.container {
    width:100%;
    max-width:600px; 
    margin:auto;
    position:relative;
}

.btn {
    background: #383838;
    border: 1px outset #AFBDE4;
    color: #FFFFFF;
    font-size: 9pt;
    cursor: pointer;
    margin: 2px;
    font-weight: 400;
    padding: 5px 10px;
    text-indent: 0px;
    text-transform: none;
    text-decoration:none;

}

.btn:hover {
    border: 1px outset #A10000;
    color: #FFFFFF;
}
.btn img {
    position:relative;
    top:3px;
    margin-right:5px;
}

#btnPass {
    float:right;
    margin-top:5px;
}


#MainSpace {
    height:calc(100vh - 40px);
    height:100vh; 
    max-height: 900px;
    background-color:#764804;
    top:0px;
    left:0px;
    position:relative;
    overflow:hidden;
    background:url(/s_hpcg/img/main-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* Масштабируем фон */
}

#upper-block {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:30px;
}

#upper-menu {
    background-color:cyan;
    width:100%;
    height:30px;
}

#lower-block {
    position:fixed;
    bottom:0px;
    left:0px;
    height:40px;
    width:100%;
    background-color:#937548;
}

#timer-container {
    width:100%;
    height:20px;
    color:white;
    font-weight:bold;
    position:absolute;
    top:-40px;
    left:0px;
    z-index: 99999;
    visibility:hidden;
    transition: all 0.2s ease-out;
}


#timer-container.active {
    top:0px;
    visibility:visible;
}

#timer {
    width:60px;
    margin:auto;
    height:20px;
    background-color:rgba(0, 0,0, 0.6);
    text-align:center;
    box-sizing:border-box;
    padding:0px;
    border-radius:4px;
    color: #e3c007;
    text-shadow: 2px 2px 2px #000000d9;
    position:relative;
    top:2px;
    right:8px;
    float:right;
    font-size:15px;
}

#timer.red {
    color:red;
}

/**/
ul.life {
    list-style-type:none;
    margin:0;
    padding:0;
}

ul.life li {
    float:left;
    margin-right:15px;
    width:20px;
    height:30px;
    background-color:green;
    background:url(/s_hpcg/img/scar.png) no-repeat 0 0;
    background-size:contain;
}

.lifebar ul.life li {
    width:11px;
    height:20px;
    margin-right:5px;
}

ul.life li.none {
    filter: saturate(0.1);
}

#PassButtonHolder {
    width:30%;
    height:40px;
    margin-left:70%;
}

    #admin-menu {
    position:fixed;
    bottom:40px;
    right:5px;
    width:200px;
    height:130px;
    background-color:rgba(0, 0, 0, 0.7);
    border:groove 2px #7b6f6f;
    color:white;
    overflow:hidden;
    padding:10px;
    z-index:999999;
}
   


.char {
    position:absolute;
    width:100px;
    height:60px;
    padding:2px;
}

    
.char > .content {
    position:relative;
    width:100%;
    height:100%;
    /*background-color:rgba(0, 0, 0, 0.4);border:groove 2px #7b6f6f;*/
    background:url(/s_hpcg/img/char_bg.jpg)  no-repeat;  color:black;
    font-size:11px;
    box-shadow: 0 0 4px rgba(0,0,0,0.5); /* Параметры тени */
}

.char.invisible > .content {
    background:transparent;
    border:none;
    box-shadow: 0 0 6px rgba(0,0,0,0.5); /* Параметры тени */
}

.char.defence > .content{
    border-color:red;
    box-shadow: inset 0 1px 1px rgba(207, 0, 0, 0.075), 0 0 8px rgb(215, 0, 0);
}

.char.active > .content {
    border-color:green;
    box-shadow: inset 0 1px 1px rgba(0, 106, 0, 0.075), 0 0 8px rgb(0, 111, 0);
}

#CharHolder.selecting > .char > .content {
    border-color:gold;
}

    


.char > .content > .dist {
    position:absolute;
    left:40px;
    top:16px;
    background:url(/s_hpcg/img/rings_12.png)  no-repeat;
    padding-left:26px;
    height:12px;
    font-weight:bold;
    font-size:10px;
}

.char > .content > .info-statuscards {
    position:absolute;
    left:40px;
    top:30px;
    background: url(/s_hpcg/img/darov_12.png) no-repeat;
    padding-left:26px;
    padding-top:3px;
    height:17px;
    font-weight:bold;
    font-size:10px;
}

.char > .content .lifebar {
    position:absolute;
    top:2px;
    left:4px;
}
.char > .content > img {
    position:absolute;
    width:35px;
    height:35px;
    left:3px;
    bottom:13px;
}


.char > .content > .name {
    text-align:center;
    position:absolute;
    bottom:3px;
    left:3px;
    width:94px;
    height:10px;
    font-size:9px;
    overflow:hidden;
    background-color:rgba(0, 0, 0, 0.4);
    color:white;
}

    


.char > .content .curse {
    width: 24px;
    height: 24px;
    background: url(/s_hpcg/img/skull_32.ico) no-repeat;
    background-size:contain;
    position:absolute;
    top:3px;
    right:3px;
    opacity:0.6;
}


.char > .content .prison {
    width: 92px;
    height: 54px;
    background: url(/s_hpcg/img/prison_bars.png) repeat;
    position:absolute;
    top:3px;
    left:4px;
}


.char > .content .anim {
    display:none;
    width:0;
    height:0;
}

.char > .content .anim.cure {
    width: 92px;
    height: 54px;
    background: url(/s_hpcg/img/GIFs/Ziai.gif) repeat;
    position:absolute;
    top:3px;
    left:4px;
    display:block;
}


.char > .content .anim.turn {
    width: 35px;
    height: 35px;
    background: url(/s_hpcg/img/GIFs/VlGz.gif) repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* Масштабируем фон */
    position:absolute;
    left:3px;
    bottom:13px;
    opacity:0.4;
    display:block;
    background-color: #0eff0e;
    background-blend-mode: multiply;
}

.char.invisible > .content > .dist,
.char.invisible > .content > .curse,
.char.invisible > .content > .lifebar,
.char.invisible > .content > .info-statuscards,
.char.invisible > .content > img,
.char.invisible > .content > .name
{
    display:none;
}



.char.ability > .content, .card.fake {
    /*outline: 1px solid rgba(4, 174, 255, 0.6); */
    box-shadow: inset 0px 0px 12px rgb(0 198 218);
}



.char.mychar {
    position:absolute;
    bottom:0px!important;
    left:0px!important;
    top:initial!important;
    z-index:9999;
    width:100%;
    height:40px;
    border:groove 2px transparent;

    overflow:visible;
    padding:0px;
    background: linear-gradient(145deg, #674d26, #ff9900);
    border-bottom:none!important;
    border-left:none!important;
    border-right:none!important;
}

    

.char.mychar > .content {
    width:100%;
    height:100%;
    background:transparent;
    border:none;
    font-size:11px;
    color:white;
    box-shadow: none;
    max-width:600px;
    margin:auto;
    position:relative;
    padding:0px;
}


.char.mychar > .content:before {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    width: 100%;
    height: 4px;
    background: linear-gradient(to bottom, rgba(9, 30, 66, 0.2) 0px, rgba(9, 30, 66, 0.05) 1px, rgba(9, 30, 66, 0.02) 2px, rgba(0, 0, 0, 0) 3px);
    background: linear-gradient(to bottom, rgb(0 0 0 / 20%) 0px, rgba(9, 30, 66, 0.05) 1px, rgba(9, 30, 66, 0.02) 2px, rgba(0, 0, 0, 0) 3px);
}

.char.mychar.defence{
    /*border:groove 2px red;
    border-bottom:none;
    border:none;*/
}

.char.mychar > .content > .dist {
    display:none;
}

.char.mychar > .content .lifebar {
    position:absolute;
    top:7px;
    left:60px;

}
.char.mychar > .content > img {
    position:absolute;
    width:38px;
    height:38px;
    left:0px;
    bottom:0px;
}


    

.char.mychar > .content > .info-statuscards {
    position:absolute;
    left:200px;
    top:3px;
    background: url(/s_hpcg/img/darov_35.png) no-repeat;
    height:35px;
    padding-left:43px;
    padding-top:6px;
    font-size:14px;
}


.char.mychar .lifebar ul.life li {
    width:20px;
    height:30px;
    margin-right:6px;
}
.char.mychar > .content .curse {
    left:0px;
    top:initial;
    bottom:0px;
}
.char.mychar > .content .prison {
    left:0px;
    top:0px;
    width:100%;
    width:40px;
    height:40px;
}


.char.mychar > .content .anim.turn {
    left: 2px;
    bottom: 0px;
    height:40px;
}

    
.char.mychar.invisible > .content > .lifebar,
.char.mychar.invisible > .content > .info-statuscards,
.char.mychar.invisible > .content > img
{
    display:initial;
}

/*.char.mychar.invisible > .content > .curse,*/

.char.mychar > .content > .name, .char.mychar > .content > .dist {
    display:none;
}


.char.mychar > .content > .pass-button {
    float:right;
    height: 40px;
    width: 100px;
    padding-right:10px;
}

.char.mychar.away {
    bottom:-90px!important;
}

/**/


.card {
    position:absolute;
    width:114px;
    height:160px;
    background-color:green;
    font-size:11px;
    background:url(/s_hpcg/img/BackFonTest.png) no-repeat;
    background-size: contain; /* Масштабируем фон */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    border-radius:8px;
}

.card.beated {
    filter: saturate(0.2);
}

.card.hand {
    width:150px;
    height:210px;
}

.move-animated {
    transition: all 0.4s ease-out;
}

.move-animated.away {
    transition: all 0.5s ease-in;
}


.modal {
    background-color:rgba(0, 0, 0, 0.7);
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:99998;
}

.modal > .body {
    position:absolute;
    width:90%;
    max-width:400px; 
    height:90%;
    max-height:700px;
    top:0px;
    left:0px;
    color:#301100;
    overflow:hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
      
}


.modal > .body > .body-card {
    width:100%;
    height:100%;
    position:relative;
}

#modal-header {
    width:100%;
    height:84px;
    position:absolute;
    top:0px;
    left:0px;
    background:url(/s_hpcg/img/up0.png)  no-repeat transparent;
    background-size: contain; /* Масштабируем фон */
    border-top-left-radius:14px;
    border-top-right-radius:14px;
    border:none;
    border-bottom:solid 1px transparent;
}

#modal-footer {
    width:100%;
    height:88px;
    position:absolute;
    bottom:-1px;
    left:0px;
    background:url(/s_hpcg/img/down0.png)  no-repeat transparent;
    background-size: contain; /* Масштабируем фон */
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
    border:none;
    border-top:solid 1px transparent;
}

#modal-logo {
    position:relative;
    top:2px;
    left:4px;
    width:100px;
    height:100px;
    background:url(/s_hpcg/img/logo.png) no-repeat;
    background-size: contain; 
    float:left;
}

#modal-image {
    width:100%;
    height:280px;
    overflow:hidden;
    text-align:center;
    background-color:black;
    position:absolute;
}

#modal-image img {
    max-height:100%;
    max-width:100%;
    margin:auto;
}



#modal-content {
    width:100%;
    height:500px;
    position:absolute;
    left:0px;
    top:40px;
    background:url(/s_hpcg/img/background.png) #cda357;
    background-position: top center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-size: cover; /* Масштабируем фон */
}

#modal-content > div {
    padding:10px;
}

#modal-content .h1, #modal-content .h2 {
    text-align:center;
}

#modal-content .life-holder {
    position:absolute;
    top:-48px;
    left:0;
    text-align:center;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}



#modal-content .life-holder > ul.life {
    background: rgba(0,0,0, 0.4);
    border-radius: 4px;
    padding: 6px;
}

  


#modal-close {
    /*float:right;
    color:white;
    padding-right:10px;*/
    position: ABSOLUTE;
    right: 5px;
    top: 2px;
}

#DivCardActions {
    position:absolute;
    width:100%;
    text-align:center;
    bottom:80px;
}

#ModalCardChanger {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:30px;
    padding:0 -20px 0 10px;
}

#ModalCardChanger .arrow {
    width:25px;
    height:20px;
    background:url(/s_hpcg/img/arrows.png) no-repeat 0px 0px transparent;
    float:left;
}

#ModalCardChanger .arrow.right {
    float:right;
    background:url(/s_hpcg/img/arrows.png) no-repeat -25px 0px transparent;

}

#CharStatusCardsHolder {
    display:flex;
    justify-content:flex-start;
    flex-direction:row;
    width:100%;
}


#CharStatusCardsHolder > .card {
    position:relative;
    width:20%;
    box-shadow:none;
    border:none;
    margin-left:5px;
}


.card-ltr {
    position:absolute;
    bottom:3px;
    left:10px;
    color:white;
    font-family: 'MTCORSVA';
    font-weight:bold;
    text-shadow: 2px 2px 2px #000000d9;
    font-size:2rem;
    height:40px;
    padding-right:50px;
}

.ltr-1 {
    background:url(/s_hpcg/img/mast_types/1.png) 0px 0px no-repeat;
    background-position:right;
    background-size:contain;
}

.ltr-2 {
    background:url(/s_hpcg/img/mast_types/2.png) 0px 0px no-repeat;
    background-position:right;
    background-size:contain;
}


.ltr-3 {
    background:url(/s_hpcg/img/mast_types/3.png) 0px 0px no-repeat;
    background-position:right;
    background-size:contain;
}

.ltr-4 {
    background:url(/s_hpcg/img/mast_types/4.png) 0px 0px no-repeat;
    background-position:right;
    background-size:contain;
}

/**/

   
#my-cards {
    position:fixed;
    left:0px;
    bottom:35px;
    width:100%;
    height:100px;
}
    
.shake
{
    -webkit-animation: shake 0.5s infinite;
    -moz-animation: shake 0.5s infinite;
    -o-animation: shake 0.5s infinite;
    animation: shake 0.5s infinite;
    position:relative;
}
@-webkit-keyframes shake {
    0% {top:0px;}
    10% {top:3px;}
    20% {top:0px;}
    30% {top:-3px;}
    40% {top:0px;}
    50% {top:3px;}
    60% {top:0px;}
    70% {top:-3px;}
    80% {top:0px;}
    90% {top:3px;}
    100% {top:0px;}
}
@-moz-keyframes shake {
    0% {top:0px;}
    10% {top:3px;}
    20% {top:0px;}
    30% {top:-3px;}
    40% {top:0px;}
    50% {top:3px;}
    60% {top:0px;}
    70% {top:-3px;}
    80% {top:0px;}
    90% {top:3px;}
    100% {top:0px;}
}

@-o-keyframes shake {
    0% {top:0px;}
    10% {top:3px;}
    20% {top:0px;}
    30% {top:-3px;}
    40% {top:0px;}
    50% {top:3px;}
    60% {top:0px;}
    70% {top:-3px;}
    80% {top:0px;}
    90% {top:3px;}
    100% {top:0px;}
}
@keyframes shake {
    0% {top:0px;}
    10% {top:3px;}
    20% {top:0px;}
    30% {top:-3px;}
    40% {top:0px;}
    50% {top:3px;}
    60% {top:0px;}
    70% {top:-3px;}
    80% {top:0px;}
    90% {top:3px;}
    100% {top:0px;}
}


/*Card images*/
.card.card-1, .card.card-100 {background-image:url(/s_hpcg/img/attack/1.png)}
.card.card-2, .card.card-101 {background-image:url(/s_hpcg/img/attack/2.png);}
.card.card-3, .card.card-102 {background-image:url(/s_hpcg/img/attack/3.png);}
.card.card-4, .card.card-103 {background-image:url(/s_hpcg/img/attack/4.png);}
.card.card-5, .card.card-104 {background-image:url(/s_hpcg/img/attack/5.png);}
.card.card-6, .card.card-105 { background-image:url(/s_hpcg/img/attack/6.png);}
.card.card-7, .card.card-106 {background-image:url(/s_hpcg/img/attack/7.png);}
.card.card-8, .card.card-107 {background-image:url(/s_hpcg/img/attack/8.png);}
.card.card-9, .card.card-108 {background-image:url(/s_hpcg/img/attack/9.png);}
.card.card-10, .card.card-109 { background-image:url(/s_hpcg/img/attack/10.png);}
.card.card-11, .card.card-110 {background-image:url(/s_hpcg/img/attack/11.png);}
.card.card-12, .card.card-111 {background-image:url(/s_hpcg/img/attack/12.png);}
.card.card-13, .card.card-112 { background-image:url(/s_hpcg/img/attack/13.png);}
.card.card-14, .card.card-113 {background-image:url(/s_hpcg/img/attack/14.png);}
.card.card-15, .card.card-114 {background-image:url(/s_hpcg/img/attack/15.png);}
.card.card-16, .card.card-115 { background-image:url(/s_hpcg/img/attack/16.png);}
.card.card-17, .card.card-116 {background-image:url(/s_hpcg/img/attack/17.png);}
.card.card-18, .card.card-117 {background-image:url(/s_hpcg/img/attack/18.png);}
.card.card-19, .card.card-118 { background-image:url(/s_hpcg/img/attack/19.png);}
.card.card-20, .card.card-119 { background-image: url(/s_hpcg/img/attack/20.png);}
.card.card-21, .card.card-120 { background-image:url(/s_hpcg/img/attack/21.png);}
.card.card-22, .card.card-121 { background-image:url(/s_hpcg/img/attack/22.png);}
/**/
.card.card-23 { background-image:url(/s_hpcg/img/defence/1.png);}
.card.card-24 { background-image:url(/s_hpcg/img/defence/2.png);}
.card.card-25 { background-image:url(/s_hpcg/img/defence/3.png);}
.card.card-26 { background-image:url(/s_hpcg/img/defence/4.png);}
.card.card-27 { background-image:url(/s_hpcg/img/defence/5.png);}
.card.card-28 { background-image:url(/s_hpcg/img/defence/6.png);}
.card.card-29 { background-image:url(/s_hpcg/img/defence/7.png);}
.card.card-30 { background-image:url(/s_hpcg/img/defence/8.png);}
.card.card-31 { background-image:url(/s_hpcg/img/defence/9.png);}
.card.card-32 { background-image:url(/s_hpcg/img/defence/10.png);}
.card.card-33 { background-image:url(/s_hpcg/img/defence/11.png);}
.card.card-34 { background-image:url(/s_hpcg/img/defence/12.png);}
.card.card-35 { background-image:url(/s_hpcg/img/defence/13.png);}
.card.card-36 { background-image:url(/s_hpcg/img/defence/14.png);}
.card.card-37 { background-image:url(/s_hpcg/img/defence/15.png);}
/**/
.card.card-38 {background-image:url(/s_hpcg/img/uvorot/1.png)}
.card.card-39 {background-image:url(/s_hpcg/img/uvorot/2.png)}
.card.card-40 {background-image:url(/s_hpcg/img/uvorot/3.png)}
.card.card-41 {background-image:url(/s_hpcg/img/uvorot/4.png)}
.card.card-42 {background-image:url(/s_hpcg/img/uvorot/5.png)}
.card.card-43 {background-image:url(/s_hpcg/img/uvorot/6.png)}
.card.card-44 {background-image:url(/s_hpcg/img/uvorot/7.png)}
.card.card-45 {background-image:url(/s_hpcg/img/uvorot/8.png)}
.card.card-46 {background-image:url(/s_hpcg/img/uvorot/9.png)}
.card.card-47 {background-image:url(/s_hpcg/img/uvorot/10.png)}
/**/
.card.card-48 {background-image:url(/s_hpcg/img/spec/wand.png)}
.card.card-49 {background-image:url(/s_hpcg/img/spec/curse.png)}
.card.card-50 {background-image:url(/s_hpcg/img/spec/cloack.png)}
.card.card-51 {background-image:url(/s_hpcg/img/spec/oborot.png)}
.card.card-52 {background-image:url(/s_hpcg/img/spec/omni1.png)}
.card.card-53 {background-image:url(/s_hpcg/img/spec/omni2.png)}
.card.card-54 {background-image:url(/s_hpcg/img/spec/omni3.png)}
.card.card-55 {background-image:url(/s_hpcg/img/spec/azkaban1.png)}
.card.card-56 {background-image:url(/s_hpcg/img/spec/azkaban2.png)}
.card.card-57 {background-image:url(/s_hpcg/img/spec/azkaban3.png)}
.card.card-58 {background-image:url(/s_hpcg/img/spec/beer1.png)}
.card.card-59 {background-image:url(/s_hpcg/img/spec/beer2.png)}
.card.card-60 {background-image:url(/s_hpcg/img/spec/beer3.png)}
.card.card-61 {background-image:url(/s_hpcg/img/spec/accio1.png)}
.card.card-62 {background-image:url(/s_hpcg/img/spec/accio2.png)}
.card.card-63 {background-image:url(/s_hpcg/img/spec/accio3.png)}
.card.card-64 {background-image:url(/s_hpcg/img/spec/accio4.png)}
.card.card-65 {background-image:url(/s_hpcg/img/spec/gipo1.png)}
.card.card-66 {background-image:url(/s_hpcg/img/spec/gipo2.png)}
.card.card-67 {background-image:url(/s_hpcg/img/spec/frog1.png)}
.card.card-68 {background-image:url(/s_hpcg/img/spec/frog2.png)}
.card.card-69 {background-image:url(/s_hpcg/img/spec/frog3.png)}
.card.card-70 {background-image:url(/s_hpcg/img/spec/frog4.png)}
.card.card-71 {background-image:url(/s_hpcg/img/spec/frog5.png)}
.card.card-72 {background-image:url(/s_hpcg/img/spec/gringots.png)}
.card.card-73 {background-image:url(/s_hpcg/img/spec/bag1.png)}
.card.card-74 {background-image:url(/s_hpcg/img/spec/bag2.png)}
.card.card-75 {background-image:url(/s_hpcg/img/spec/fenix1.png)}
.card.card-76 {background-image:url(/s_hpcg/img/spec/fenix2.png)}
.card.card-77 {background-image:url(/s_hpcg/img/spec/felix1.png)}
.card.card-78 {background-image:url(/s_hpcg/img/spec/felix2.png)}
.card.card-79 {background-image:url(/s_hpcg/img/spec/kosoy1.png)}
.card.card-80 {background-image:url(/s_hpcg/img/spec/kosoy2.png)}
.card.card-81 {background-image:url(/s_hpcg/img/spec/dementor1.png)}
.card.card-82 {background-image:url(/s_hpcg/img/spec/dementor2.png)}
.card.card-83 {background-image:url(/s_hpcg/img/spec/krest1.png)}
.card.card-84 {background-image:url(/s_hpcg/img/spec/krest2.png)}
.card.card-85 {background-image:url(/s_hpcg/img/spec/trans1.png)}
.card.card-86 {background-image:url(/s_hpcg/img/spec/trans2.png)}
.card.card-87 {background-image:url(/s_hpcg/img/spec/trans3.png)}
.card.card-88 {background-image:url(/s_hpcg/img/spec/tr1.png)}
.card.card-89 {background-image:url(/s_hpcg/img/spec/tr2.png)}
.card.card-90 {background-image:url(/s_hpcg/img/spec/tr3.png)}
.card.card-91 {background-image:url(/s_hpcg/img/spec/tr4.png)}
.card.card-92 {background-image:url(/s_hpcg/img/spec/veil1.png)}
.card.card-93 {background-image:url(/s_hpcg/img/spec/veil2.png)}
.card.card-94 {background-image:url(/s_hpcg/img/spec/veil3.png)}
.card.card-95 {background-image:url(/s_hpcg/img/spec/veil5.png)}
.card.card-96 {background-image:url(/s_hpcg/img/spec/sweet1.png)}
.card.card-97 {background-image:url(/s_hpcg/img/spec/sweet2.png)}
.card.card-98 {background-image:url(/s_hpcg/img/spec/nimbus1.png)}
.card.card-99 {background-image:url(/s_hpcg/img/spec/nimbus2.png)}



/**/

.flip {
    position: relative;
}
.flip > .front, .flip > .back {
    display: block;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: .5s;
    transition-property: transform, opacity;
}
.flip > .front {
    transform: rotateY(0deg);
    border-radius:8px;
}
.flip > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
    border-radius:8px;
}
.flip.hover > .front {
    transform: rotateY(180deg);
}
.flip.hover > .back {
    opacity: 1;
    transform: rotateY(0deg);
}

.flip {
    display: block;
    width: 150px;
    height:210px;
    margin:auto;
    position:absolute;

}
.flip > .front, .flip > .back {
    display: block;
    color: white;
    width: inherit;
    height: inherit;
}

.flip > .front {
    background-image:url(/s_hpcg/img/BackFonTest.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.flip > .back > .card {
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
        
}

#flip-container {
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 99996;
    background:rgba(0, 0, 0, 0.7);
    transition:all linear 0.5s;
}


#btnAdminMenu {
    position:fixed;
    top:1px;
    left:1px;
}


#HitBox {
    position:absolute;
    width:100%;
    height:100%;
    background:#ac0303;
    background-blend-mode: multiply;
    top:0px;
    left:0px;
    z-index:9999999;
    animation: blink 0.5s infinite;
}



@keyframes blink {
    0% {opacity:0.1;}
    100% {opacity:0.6;}
}


    .show-mobile {
      display:none;
    }
    .total-center {
        display: grid;
        justify-items: center;
        align-items: center;
        place-items: center;
        width:100%;
        height:100%;
        position:relative;
    }


    .flex-row {
      display:flex;
      justify-content:flex-start;
      align-items:center;
      flex-direction:row;
    }

    .nice-scroll {
      overflow:auto;
    }

    .nice-scroll::-webkit-scrollbar-track{	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);	background-color: #b38a60;	border-radius: 5px;}
    .nice-scroll::-webkit-scrollbar{	width: 5px; height: 5px; 	background-color: #b38a60;}
    .nice-scroll::-webkit-scrollbar-thumb{	border-radius: 5px;	background-color: #b38a60;	
      background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#ffbb3f), to(#b05713),color-stop(.6,#a46a13));   
     }

    #horizontalBlocker {
      display:none;
      visibility:hidden;
    }

    #loader {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      z-index:999999;
      background:transparent;
      user-select:none;
      transition: all .15s linear
    }

    #loader img {
      position:absolute;
      /*top:48%;
      left:48%;*/
      top:10px;
      right:10px;
      opacity:0;
      transition: all .15s linear
    }

    #loader.show {
      background:rgba(0, 0, 0, 0.6);
    }

    #loader.show img {
      opacity: 1
    }
    .fade {
      opacity: 0;
      -webkit-transition: opacity .15s linear;
      -o-transition: opacity .15s linear;
      transition: opacity .15s linear
    }

    .fade.in {
        opacity: 1
    }


    .alert {
      position:absolute;
      width:100%;
      max-width:600px;
      height:110px;
      z-index:99999;
    }


    .alert> .message {
      position:relative;
      height:95px;
      background-color:rgba(0, 0, 0, 0.8);
      border:groove 2px #7b6f6f;
      font-size:13px;
      color:white;
      box-shadow: 0 0 4px rgba(0,0,0,0.5); /* Параметры тени */
      padding:10px;
      overflow:auto;
      width:90%;
      margin:auto;
      padding-bottom:25px;
    }


    .alert > .buttons {
      position:absolute;
      left:0px;
      bottom:0px;
      height:23px;
      text-align:center;
      width:100%;
    }


    

    .input-yellow {
      margin:10px;
      min-height:40px;
      border:none;
      background-color:#d2ae71;
      border:groove 2px #724417;
      padding:5px;
      text-align:center;
      font-size:16px;
      outline:none;
      box-sizing:border-box;
    }
    .input-yellow:focus {
      outline:none;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(207 123 51 / 60%)
    }

    .input-yellow:disabled {
      background-color:#d2ae71;
    }

    #section-main textarea {
      background-color:#d2ae71;
      border:groove 2px #724417;
      text-align:left!important;
    }
    #section-main textarea:disabled {
      background-color:#d2ae71;
    }

    #mobile-menu-toggler {
      float: none;
      margin: 0;
      padding: 0;
      border-width: 0;
      border-radius: 0;
      top: 0px;
      left: 0;
      -webkit-transition: all .3s linear;
      transition: all .3s linear;
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      position:relative;
    }
    .navbar-toggle {
      position:relative;
    }
    .navbar-toggle .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .navbar-toggle .icon-bar {
        width: 25px;
        margin: 4px;
        margin-left: 0;
        background: #FFF;
        border-radius: 0;
        display:block;
        height: 3px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .navbar-toggle.navOpen .icon-bar {
      position: absolute;
      top: 10px;
      left: 0;
      -webkit-transform-origin: center;
      transform-origin: center; 
    }
    .navbar-toggle.navOpen .icon-bar:nth-child(2) {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); 
    }

    .navbar-toggle.navOpen .icon-bar:nth-child(3) {
      opacity: 0.0; 
    }

    .navbar-toggle.navOpen .icon-bar:nth-child(4) {
      top: 10px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg); 
    }

    #mobile-menu-toggler.navbar-toggle.navOpen {
      display:none;
      visibility:hidden;
    }


    #mobile-menu-toggler:after {
      content: '';
      display: block;
      position: absolute;
      right: 0px;
      bottom: 0px;
      background-color: red;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      opacity: 0;
    }


    #mobile-menu-toggler.new:after {
      opacity: 1;
      animation: blink 0.7s infinite;
    }

    .tooltip {
        position: absolute;
        z-index: 1070;
        display: block;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        line-break: auto;
        line-height: 1.42857143;
        text-align: left;
        text-align: start;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        white-space: normal;
        word-break: normal;
        word-spacing: normal;
        word-wrap: normal;
        font-size: 12px;
        opacity: 0;
        filter: alpha(opacity=0)
    }

    .tooltip.in {
        opacity: .9;
        filter: alpha(opacity=90)
    }

    .tooltip.top {
        margin-top: -21px;
        padding: 5px 0
    }

    .tooltip.right {
        margin-left: 3px;
        padding: 0 5px
    }

    .tooltip.bottom {
        margin-top: 3px;
        padding: 5px 0
    }

    .tooltip.left {
        margin-left: -3px;
        padding: 0 5px
    }

    .tooltip-inner {
        max-width: 600px;
        padding: 3px 8px;
        color: #fff;
        text-align: center;
        background-color: #000;
        border-radius: 4px
    }

    .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid
    }

    .tooltip.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        border-width: 5px 5px 0;
        border-top-color: #000
    }

    .tooltip.top-left .tooltip-arrow {
        bottom: 0;
        right: 5px;
        margin-bottom: -5px;
        border-width: 5px 5px 0;
        border-top-color: #000
    }

    .tooltip.top-right .tooltip-arrow {
        bottom: 0;
        left: 5px;
        margin-bottom: -5px;
        border-width: 5px 5px 0;
        border-top-color: #000
    }

    .tooltip.right .tooltip-arrow {
        top: 50%;
        left: 0;
        margin-top: -5px;
        border-width: 5px 5px 5px 0;
        border-right-color: #000
    }

    .tooltip.left .tooltip-arrow {
        top: 50%;
        right: 0;
        margin-top: -5px;
        border-width: 5px 0 5px 5px;
        border-left-color: #000
    }

    .tooltip.bottom .tooltip-arrow {
        top: 0;
        left: 50%;
        margin-left: -5px;
        border-width: 0 5px 5px;
        border-bottom-color: #000
    }

    .tooltip.bottom-left .tooltip-arrow {
        top: 0;
        right: 5px;
        margin-top: -5px;
        border-width: 0 5px 5px;
        border-bottom-color: #000
    }

    .tooltip.bottom-right .tooltip-arrow {
        top: 0;
        left: 5px;
        margin-top: -5px;
        border-width: 0 5px 5px;
        border-bottom-color: #000
    }



    .char.mychar .tooltip.top {
        margin-top: -45px;
    }

    #section-main {
      display:flex;
      align-items:center;
      flex-direction:row;
      justify-content:center;
      position:relative;
      height:100vh;
    }

    #userMenu {
      width:400px;
      height:100vh;
      max-height:900px;
      background-color:#102c79;
      color:white;
      box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
      position:relative;
      overflow:hidden;
    }


    #mobileClose {
      width:100%;
      height:40px;
    }


    #userMenu > .slide {
      position:absolute;
      top:0;
      left:105%;
      width:100%;
      height:100%;
      padding:10px;
      box-sizing:border-box;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      overflow:auto;
    }


    #userMenu > .slide:first-child {
      left:0;
    }

    #userMenu.toggled > .slide {
      left:0;
    }

    #userMenu.toggled > .slide:first-child {
      left:-105%;
    }



    #userMenuActions {
      list-style-type:none;
      margin:0;
      padding:0;
    }


    #userMenuActions > li {
      position: relative;
      display: block;
      padding: 10px 15px;
      background-color: #edf3ff;
      color: #fff;
      background-color: #0082be;
      cursor: pointer;
      max-width: 95%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      text-decoration: none;
    }


    #userMenuActions > li:after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0px;
      left:0px;
      width: 100%;
      height: 4px;
      background: linear-gradient(to top, rgba(9, 30, 66, 0.2) 0px, rgba(9, 30, 66, 0.05) 1px, rgba(9, 30, 66, 0.02) 2px, rgba(0, 0, 0, 0) 3px);
    }

    #userMenuActions > li:hover {
      background-color: #25baff;
    }

   


    #secondSlideContent {
      position:relative;
      width:100%;
      background: transparent;
      height: calc(100% - 50px);
      margin-top: 10px;
      overflow:hidden;
    }

    #secondSlideContent > div {
      width:100%;
      height:100%;
      overflow:auto;
    }


    #secondSlide-1{
      overflow: hidden!important;
    }

    #SlideBackIcon {
      cursor:pointer;
      color:white;
      font-weight:bold;
      font-size:40px;
      box-sizing: border-box;
      line-height: 0.55;
      text-align: center;

      position: relative;
      display: block;
      padding: 8px 15px;
      background-color: #edf3ff;
      color: #fff;
      background-color: #0082be;
      cursor: pointer;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      text-decoration: none;
    }

    #SlideBackIcon:hover {
      background-color: #25baff;
    }

    #SlideBackIcon:after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0px;
      left:0px;
      width: 100%;
      height: 4px;
      background: linear-gradient(to top, rgba(9, 30, 66, 0.2) 0px, rgba(9, 30, 66, 0.05) 1px, rgba(9, 30, 66, 0.02) 2px, rgba(0, 0, 0, 0) 3px);
    }


    #SlideTitleName {
      display:block;
      text-align:center;
      width:calc(100% - 50px);
      font-size:18px;
      font-weight:bold;
      text-transform:uppercase;
    }

    #chatMsgList {
      width:100%;
      height:calc(100% - 50px);
      background: #1c4674;
      position:relative;
      box-sizing: border-box;
    }

    #secondSlide-6 > .log {
      background: #1c4674;
    }
    #chatMsgList > .msg, #secondSlide-6 > .log {
      width:100%;
      padding:10px;
      position:relative;
      box-sizing: border-box;
      font-size: 13px;
    }

    #chatMsgList > .msg:after, #secondSlide-6 > .log:after {
      content: "";
      border-radius: 1px;
      position:absolute;
      left:0px;
      bottom:0px;
      width:100%;
      height:1px;
      box-shadow: 0px 1px 0px rgb(0 0 0 / 21%);
    }

    #chatMsgList > .msg > .info {
      display:flex;
      align-items:center;
      flex-direction:row;
      justify-content:space-between;
    }


    #chatMsgList > .msg > .info > .userName {
       font-weight:bold;
       color:#d9ccbf;
    }

    #chatMsgList > .msg > .info > .time {
      color:#bebebe;
      font-size:12px;
    }


    #chatMsgList > .msg.system {
        font-size:11px;
        color:#bebebe;
    }

    #chatMsgList > .msg.system > .info > .time {
       font-size:9px;
       width:100%;
       text-align:right;
    }

    #chatMsgList > .msg.system > .text {
       text-align:center;
    }
    #chatInputBox {
      padding:0px;
      width:100%;
      height:50px;
      position:relative;
      box-sizing:border-box;
    }
    #chatInputBox > textarea {
      width:100%;
      height:100%;
      margin:0;
      box-sizing:border-box;
      text-align:left;
      padding:4px;
      outline:none;
      padding-right:33px;
      background-color:#fce9ca;
    }

    #ChatSendButton {
      position:absolute;
      top:9px;
      right:2px;
      width:32px;
      height:32px;
      background:url(/s_hpcg/img/letter.png) 0 0 no-repeat;
      cursor:pointer;
      border:none;
      outline:none;
    }


    #ChatToggler {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      cursor:pointer;
      user-select:none;
      background:transparent;
    }

    #liChatNewMsg {
      margin: 0px 5px;
      color: white;
      background: red;
      border-radius: 50%;
      padding: 6px 5px 6px 5px;
      font-size: 11px;
      font-weight: normal;
      position: absolute;
      top: 7px;
      right:10px;
      display:none;
      min-width: 18px;
      text-align: center;
    }


      #liChatNewMsg.shown {
        display:inline-block;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
      }


    .mobile-menu {
      position:absolute;
      top:0px;
      left:4px;
      display:none;
    }

    #right-mobile-bg {
      visibility:hidden;
    }
    #menuWindow, #gameWindow {
      position:relative;
      width:100%;
      max-width:600px;
      margin-top:0px;
      margin-bottom:0px;
      height:100vh;
      max-height:900px;
      background-color:transparent;
      /*box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;*/
    }

    #menuWindow > .flip {
      display:block;
      width:100%;
      height:100%;
      margin:auto;
      position:absolute;
    }
    

    #menuWindow > .flip > .front {
      background:url(/s_hpcg/img/fon.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover; /* Масштабируем фон */
      overflow:hidden;
      height:100%;
      border-radius:0;
    }

    #menuWindow > .flip > .back {
      background:url(/s_hpcg/img/background.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover; /* Масштабируем фон */
      overflow:hidden;
      height:100%;
      border-radius:0;
    }

    #menuWindow > .flip > .front,
    #menuWindow > .flip > .back{
      border-radius:20px;
    }

    #menuWindow > .flip > .front > .content,
    #menuWindow > .flip > .back > .content {
      width:100%;
      height:92%;
      margin:auto;
      margin-top:10px;
      margin-bottom:10px;
      position:relative;
      overflow:auto;
      color:#301100;
      text-shadow: 2px 2px 2px #847474a6;
      padding: 5px 20px;
      box-sizing: border-box;
    }
    #menuWindow #mainLogo {
      width:40%;
      margin:auto;
    }

    #menuWindow #mainLogo img {
      width:100%;
    }


    #mainName {
      text-align:center;
      color:#e3c007;
      text-shadow: 2px 2px 2px #000000d9;
      margin-bottom:20px;

    }

    #mainName > .h1 {
      font-size:40px;
    }

    ul.main-menu {
      list-style-type:none;
      margin:0px;
      color:white;
      
      text-align:center;
      padding:0px;
    }

    ul.main-menu > li {
      margin:0px;
      margin-bottom:15px;
    }

    ul.main-menu > li > a {
      color:white;
      text-decoration:none;
      text-shadow: 2px 2px 2px #000000d9;
      width:100%;
      font-size:13pt;
      display:block;
      width:250px;
      margin:auto;
      /*font-family: 'MTCORSVA';
      font-size:30px;*/
    }

    #buttonBack {
      float:right;
      bottom:0px;
      /*width: 100%;
      text-align: right;
      position: fixed;
      bottom: 0px;
      left: 0px;
      height: 39px;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-end;*/
    }

    #name-input {
      width:80%;
      max-width:400px;
      margin:auto;
      margin-top:30px;
      text-align:center;
    }

    #name-input label {
      width:100%;
      display:block;
      font-size:19px;
    }

    #name-input input {
      width:60%;
      width:90%;
    }

    #gamesList .game {
      width:100%;
      padding:10px;
      box-sizing:border-box;
      background: rgb(255 220 220 / 30%);
      border: solid 1px #381e1099;
      border-radius:10px;
      margin-bottom:10px;
      display:block;
      flex-direction:row;
      justify-content:space-between;
      cursor:pointer;
    }

    
    #gamesList .game .players {
      width:100%;
      font-size:19px;
      display:block;
      margin-bottom:5px;
      text-align:center;
      min-height:25px;

    }

    #gamesList .game > .detail {
      display:flex;
      flex-direction:row;
      justify-content:space-between;
      align-items:center;
      font-size:13px;
    }



    table.table {
      width:100%;
      padding:0;
      margin:0;
      border-collapse:collapse;
      border-spacing: 0px;
    }

    table.table td, table.table th {
      margin:0px;
      border:solid 1px #301100;
      padding:6px 2px;
      text-align:center;
    }

    .ingame-menu {
        position:absolute;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        display: grid;
        justify-items: center;
        align-items: center;
        place-items: center;
        width:100%;
        height:100%;
    }

   .ingame-menu > .content {
      position:relative;
      width:85%;
      height:80%;
      /*margin:auto;
      margin-top:20px;*/
      background-color:rgba(0, 0, 0, 0.8);
      border:groove 2px #7b6f6f;
      font-size:13px;
      color:white;
      box-shadow: 0 0 4px rgba(0,0,0,0.5); /* Параметры тени */
      padding:10px;
      z-index:99;
      box-sizing:border-box;
      overflow-y:auto;
    }

    .ingame-menu .title {
        font-size:17px;
        text-align:center;
        width:100%;
        margin:5px 0;
    }

    .ingame-menu .table td {
      border: solid 1px #413a3a!important;
    }

    .ingame-menu .buttons {
        text-align:center;
        width:95%;
        left:5%;
        position:absolute;
        bottom:20px;
    }

    #AwaitMenu {
        position:absolute;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        display: grid;
        justify-items: center;
        align-items: center;
        place-items: center;
        width:100%;
        height:100%;
    }

    #AwaitMenu .content {
      position:relative;
      width:85%;
      height:80%;
      /*margin:auto;
      margin-top:20px;*/
      background-color:rgba(0, 0, 0, 0.8);
      border:groove 2px #7b6f6f;
      font-size:13px;
      color:white;
      box-shadow: 0 0 4px rgba(0,0,0,0.5); /* Параметры тени */
      padding:10px;
      z-index:99;
      box-sizing:border-box;

    }

    #AwaitMenu .title {
      font-size:17px;
      text-align:center;
      width:100%;
      margin:5px 0;
    }

    #AwaitMenu .table td {
      border: solid 1px #413a3a!important;
    }


    #AwaitMenu .table tr td:last-child {
     width:30px;
    }

    #AwaitMenu .buttons {
      text-align:center;
      width:95%;
      position:absolute;
      bottom:20px;
    }


    .settings {
      margin-bottom:10px;
      box-sizing:border-box;
    }

    .settings:after {
      content: "";
      display:block;
      border-radius: 1px;
      width:98%;
      margin:auto;
      margin-top:5px;
      margin-bottom:5px;
      height: 1px;
      box-shadow: 0px 1px 0px rgb(0 0 0 / 21%);
    }

    .settings > .input-name {
      font-size:17px;
      font-weight:600;
      text-align:center;
      margin-bottom:5px;
      text-transform:uppercase;
    }


    .settings > .input-field > input {
        margin:0px;
    }

    .settings > .input-help {
      padding:2px;
      font-size:13px;
      
    }


    .settings > .input-field > .input-yellow {
      width:100%;
      margin:0;
      min-height: 10px;
    }

    .title {
      font-weight:bold;
      font-size:1.5em;
      margin:10px 0;
    }

    .center {
      text-align:center;
    }

    #MessagesHolder {
        height:0px;
    }


    .menu-page, .menu-page p, .menu-page div, .menu-page ul, .menu-page ul > li {
        font-size:14px!important;
        line-height:16px!important;
        margin:5px 0;
   
    }

    .menu-page h2 {
        font-size:18px!important;
    }

    @media screen and (orientation: portrait) and (max-width: 900px) {
      /*body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
      }

      html {
        height: -webkit-fill-available;
      }*/

      .show-mobile {
        display:block;
      }

      #userMenu {
        position:fixed;
        width:85%;
        height:100%;
        max-width:400px;
        left:-450px;
        top:0px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        z-index:999999;
        visibility:hidden;
      }

      #userMenu > .slide {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
      }

      .mobile-menu {
        display:block;
      }

      #userMenu.show {
          left:0px;
          visibility:visible;
      }


      #right-mobile-bg {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        background-color:rgba(0, 0, 0, 0);
        visibility:hidden;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
      }

      #right-mobile-bg.show {
        visibility:visible;
        background-color:rgba(0, 0, 0, 0.4);
      }

      /*#menuWindow { height:92vh; height:100vh;}*/
      body {
        background-color:#000;
      }

      #section-main {
        display:block;
        position:initial;
        height:inherit;
      }
      #menuWindow {height:100%; position:static; max-height: 100vh;}
      
      #menuWindow, #gameWindow {
        margin:auto;
      }


      #section-main {
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
      }

      #gameWindow, #MainSpace, #gameWindow > .container {
        height:100%;
      }
      /*
      #section-main {height:100vh;}
      #gameWindow { height:100%; position:static; max-height: 100vh;}
      #gameWindow > .container { height:100%;}
      #MainSpace { height:100%;}
      */
      
       #modal-logo {
        width:70px;
        height:70px;
      }

      #timer-container {
        margin-left:50%;
        width:50%;
      }



      #SlideTitleName {
        font-size:14px;
      }

        .card-ltr {
            height:33px;
            padding-right:50px;
        }
    }



    /*
    @media screen and (orientation: landscape) and (max-width: 990px) {
      #horizontalBlocker {
        display:block;
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        min-height:100vh;
        background:rgba(0,0,0,0.9);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:1.2em;
        visibility:visible;
        color:white;
        padding:20px;
        box-sizing:border-box;
        z-index:9999999;
      }
    

    }
  */


    .custom-combo {
      display:block;
      width:100%;
      height: 36px;
      border-radius: 4px;
      background-color: #fff;
      border: 1px solid #d6dbde;
      font-size: 14px;
      transition: border-color .2s;
      position:relative;
      overflow:initial;
      padding:0;
    }
    .custom-combo.expanded {
      border-color: #409ded;
    }

    .custom-combo > .combo-container {
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:flex-start;
      width:100%;
      height:100%;
    }

    .custom-combo > .combo-container > .name{
      width:100%;
      text-align:left;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      margin:0px 5px 0px 10px;
      font-family: ProximaNova,'Open Sans','Helvetica Neue',sans-serif;
      text-shadow:none;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      user-select:none;
    }


    .custom-combo > .combo-container > .carret {
      width:13px;
      height:13px;
      background-image: url(/SiteCMS/img/DXImages2.png);
      background-repeat: no-repeat;
      background-color: transparent;
      background-position: -80px -159px;
      margin:0px 10px 0px 5px;
      cursor:pointer;
    }

    .custom-combo > .combo-container > input {
      border:none;
      outline:none;
      background:transparent;
      font-size:14px;
      margin:0;
      height:36px;
      width:95%;
      padding:0px;
      text-align:left;
    }


    .custom-combo > .combo-dropdown {
      position:absolute;
      width:100%;
      min-height:200px;
      max-height:300px;
      top:38px;
      left:0px;
      border-radius: 8px;
      background:white;
      box-shadow: -4px 5px 18px rgba(29,42,68,.13);
      -webkit-transition: opacity .1s;
      transition: opacity .1s;
      box-sizing: border-box;
      outline:none;
      z-index:999;
    }

    .custom-combo > .combo-dropdown > .combo-filter {
      -webkit-appearance: none;
      margin:0;
      padding:0;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 8px 8px 0 0;
      border: none;
      height: 48px;
      width: 100%;
      position:relative;
      display:flex;
      align-items:center;
      border-bottom: 1px solid #f1f1f5;
    }
    .custom-combo > .combo-dropdown > .combo-filter > input {
      -webkit-appearance: none;
      margin:0;
      padding:0;
      box-sizing: border-box;
      border-radius: 8px 8px 0 0;
      border: none;
      font-family: ProximaNova,'Open Sans','Helvetica Neue',sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      background:inherit;
      text-align:left;
      box-shadow:none;
      width:100%;
    }
    .custom-combo > .combo-dropdown > .combo-filter:before {
      content:' ';
      width:20px;
      display:inline-block;
      background:red;
    }


    .custom-combo > .combo-dropdown > .combo-items {
      width:100%;
      max-height:200px;
      overflow:auto;
      padding:10px 0px;
      box-sizing: border-box;
      border-radius: 0 0 8px 8px;
      background:inherit;
    }


    .custom-combo > .combo-dropdown > .combo-items > .item {
      width:100%;
      height:34px;
      padding:0px 20px;
      display:flex;
      align-items:center;
      background:inherit;
      color:#000;
      box-shadow:none;
      text-shadow:none;
      color: #556066;
      box-sizing: border-box;
      cursor:pointer;
      user-select:none;
    }
    .custom-combo > .combo-dropdown > .combo-items > .item:hover {
      background:#0068ff;
      color:#fff;
    }

    .custom-combo > .combo-dropdown > .combo-items > .item > span {
      display:block;
      width:100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-family: ProximaNova,'Open Sans','Helvetica Neue',sans-serif;
      box-sizing: border-box;
    }


    .owlmodal-bg{
      position: absolute;
      width:100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      z-index: 9999;
    }

    .owlmodal-bg > .title{
      position: absolute;
      width:100%;
      top:-10px;
      left:0px;
      height: 20px;
      text-align: center;
      color: #FFF;
      font-family: 'MTCORSVA';
      font-size: 22px;
      line-height: 20px;
      padding:10px;
      background: rgba(0,0,0,0.5);
      text-shadow: 0 0 4px rgb(0 0 0 / 50%);
    }

    .modal-card{
      width:95%;
      max-width: 500px;
      height: 80vh;
      max-height: 750px;
      position: relative;
    }

    

    .modal-card > .header{
      width: 100%;
      height: 84px;
      position: absolute;
      top: 0px;
      left: 0px;
      background: url(/s_hpcg/img/up0.png) no-repeat transparent;
      background-size: contain;
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
      border: none;
      border-bottom: solid 1px transparent;
    }
  
    .modal-card > .header > .logo{
      position: relative;
      top: 2px;
      left: 4px;
      width: 100px;
      height: 100px;
      background: url(/s_hpcg/img/logo.png) no-repeat;
      background-size: contain;
      float: left;
    }

    .modal-card > .header > .close{
      position: absolute;
      right: 5px;
      top: 2px;

    }

    .modal-card > .image{
      position: absolute;
      top:84px;
      left:0px;
      background-position:  center center;
      background-size: contain;
      background-repeat: no-repeat;
      width:100%;
      height: 280px;
    }


    .modal-card > .content{
      width: 100%;
      height: 500px;
      position: absolute;
      left: 0px;
      top: 40px;
      background: url(/s_hpcg/img/background.png) #cda357;
      background-position: top center;
      background-repeat: no-repeat;
      /* background-attachment: fixed; */
      background-size: cover;
    }

    .modal-card > .content > .data{
      padding:10px;
      text-align: left;
    }

    .modal-card > .content > .data .h1,
    .modal-card > .content > .data .h2{
      text-align: center;
    }


    .modal-card > .content > .data .action-buttons{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 5px;
      position: absolute;
      width: 100%;
      left:0;
      bottom: 100px;
      flex-wrap: wrap;
    }


    .modal-card > .footer{
      width: 100%;
      height: 88px;
      position: absolute;
      bottom: -1px;
      left: 0px;
      background: url(/s_hpcg/img/down0.png) no-repeat transparent;
      background-size: contain;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      border: none;
      border-top: solid 1px transparent;
    }


    @media (max-width: 790px) {

      .modal-card > .content > .data p {
        font-size: 14px;
        line-height: 16px;
      }

      .h1 {
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 0px;
      }

      #menuWindow > .flip > .front,
      #menuWindow > .flip > .back{
        border-radius:0;
      }

      .modal-card > .content > .data p.card-description{
        font-size: 12px;
        line-height: 14px;
      }


      ul.main-menu > li > a {
          font-size: 14px;
      }
    }


    @media (max-width: 380px) {
      .h1 {
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 0px;
      }
      .h2 {
        font-size: 18px;
        margin-bottom: 5px;
      }

    }