@font-face{
font-family:"Solomon-Semi-Bold";
src:url("../fonts/SolomonSemiBold/Solomon-Sans-SemiBold.eot");
src:url("../fonts/SolomonSemiBold/Solomon-Sans-SemiBold.eot?#iefix") format("embeddededopentype"),
url("../fonts/SolomonSemiBold/Solomon-Sans-SemiBold.woff2") format("woff2"),
url("../fonts/SolomonSemiBold/Solomon-Sans-SemiBold.woff") format("woff"),
url("../fonts/SolomonSemiBold/Solomon-Sans-SemiBold.ttf") format("truetype"),
url("../fonts/SolomonSemiBold/Solomon-Sans-SemiBold.otf") format("opentype"),
url("../fonts/SolomonSemiBold/Solomon-Sans-SemiBold.svg#svgSolomon-Sans-SemiBold") format("svg");
font-style:normal;
font-weight: bold;
font-display: swap;
}
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
position: relative;
background-color: #eee;
}

#canvas{
position: relative;
z-index: 3;
}
.game_field{
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
}
#data_container{
position: relative;
background: #2C03F5;
background: -webkit-linear-gradient(top left, #2C03F5, #0B5BBD);
background: -moz-linear-gradient(top left, #2C03F5, #0B5BBD);
background: linear-gradient(to bottom right, #2C03F5, #0B5BBD);
padding-top: 0.5rem;
height: 1.9rem;
}
#button_block{
bottom: 0;
position: relative;
z-index: 23;
}
.stat_text{
display: block;
font-size: 1.1rem;
margin-bottom: 0.8rem;
text-align: left;
font-family:"Solomon-Semi-Bold";
font-weight: bold;
}

#info_content{
font-size: 1.1rem;
margin-bottom: 2rem;
text-align: center;
font-family:"Solomon-Semi-Bold";
font-weight: bold;
}

#stat_content{
margin-bottom: 1.5rem;
}
.google_block{
position: absolute;
width: 17%; 
top: 2rem; 
display: none;
height: 100vh;
}
.banner{
display: none;
max-width: 18.25rem;
position: relative;
top: 2rem;
right: 0;
left: 0;
margin: auto;
width: 100%;
}
.adv_right{
right: 0;
}
#score_bar,
#dial_bar,
.brand{
font-family:"Solomon-Semi-Bold";   
font-size: 1rem;
text-transform: uppercase;
display: inline-block;
color: #fff;
font-weight: bold;
}
.text_container{
width: 90vw;
margin: auto;
padding-top: 2rem;
}
#dial_bar{
float: right;
}
#score_bar,
.brand{
float: left;
}
#score_bar{
padding-left: 1.5rem;
}
.information_bar{
width: 90vw;
margin: auto;
min-height: 2rem;
}
.rules{
text-align: justify;
font-size: 1.2rem;
}
#yes_restart,
#yes_new{
margin-right: 2rem;
}
.button {
cursor: pointer;
font-family:"Solomon-Semi-Bold";
user-select: none;
text-transform: uppercase;
display: inline-block;
font-size: 1rem;
color: #fff;
border-radius: 0.9rem;
outline: none;
line-height: 43px;
box-sizing: border-box;
height: 43px;
max-width: 130px;
padding-left: 1.5rem;
padding-right: 1.5rem;
overflow: hidden;
text-align: center;
text-decoration: none;

background-color: #1761bc;    
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.button:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
background-color: #2C03F5;
}

#loader{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff url('../img/preloader.gif');
background-size: 30%;
background-repeat: no-repeat;
background-position: center;
z-index: 99999;
}
#loader.closed{
display: none;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(14, 14, 14, 0.52);
z-index: 999;
display: none;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modal.opened {
display: block;
pointer-events: auto;
}
.modal > div {
width: 90%;
font-family:"Solomon-Semi-Bold"; 
max-width: 375px;
position: relative;
margin: 4% auto;
-webkit-border-radius: 1rem;
-moz-border-radius: 1rem;
border-radius: 1rem;
background-color: #fff;
border: 3px solid #ccc;
padding: 3rem 1.5rem;
}
.modal_button_block{
display: block;
text-align: center;
}
.inner_button{
display: inline-block;
}
.close {
background-color: #333;

font-family:"Solomon-Semi-Bold"; 
color: #fff;
line-height: 1.7rem;
text-align: center;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
position: absolute;
right: 7px;
top: 7px;
width: 1.7rem;
height: 1.7rem;
font-size: 1rem;
border-radius: 100px;
cursor: pointer;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
transition: all 400ms ease-in;	
}
.close:hover {
background-color: #f00c62;
}

h2.modal_title{
font-size: 1.3rem;
text-transform: uppercase;
font-family:"Solomon-Semi-Bold"; 
text-align: center;
margin-top: 0;
margin-bottom: 3rem;
}
h2.modal_title.stat{
margin-bottom: 1rem;
}
@media screen and (min-width: 1366px) {
.google_block,
.banner{
display: block;
}
}
#button_block{
width: 100%;
padding-left: 3%;
}
#data_container{
text-align: center;
}
@media screen and (max-width: 1024px) {
#score_bar,
#dial_bar,
.brand{
font-size: 1rem;
}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
.information_bar{
width: 97vw;
}
.wrapper {
min-height: 100vh;
margin-bottom: -80px;
}
.button{
font-size: 0.9rem;
padding-left: 1rem ;
padding-right: 1rem;
margin-bottom: 0.5rem;
}
#score_bar,
#dial_bar,
.brand{
font-size: 0.9rem;
font-weight: normal;
text-transform: none;
}
#score_bar{
padding-left: 0.8rem;
}
}
.button.level{
display: block;
margin-bottom: 1.5rem;
width: 260px;
max-width: 320px;
height: 50px;
line-height: 50px;
}
#solitaire_down_menu,
#mobile_menu{
display: none;
}
#solitaire_down_menu ul,
ul#solitaire_down_menu{
list-style:none;
}

#solitaire_down_menu{ 
position:absolute; 
left: 10px;
right: 0;
margin: 0 auto;
z-index:3;
bottom: 60px;
width: 100vw;
text-align: center;
}

#solitaire_down_menu li{
float:left; 
display: inline-block; 
}
#solitaire_down_menu li span{
display:inline-block;
padding: 8px 15px;
} 
@media screen and (max-width: 767px) {
.button.level {
display: block;
margin-bottom: 1.1rem;
width: 200px;
max-width: 280px;
height: 40px;
line-height: 40px;
}
#button_block{
text-align: center;
}
.button_wrapper{
display: inline-block;
text-align: center;
margin: 0 auto;
vertical-align: middle;
position: relative;
}
#button_block
{
height: auto;
padding-left: 0;
padding-top: 0;
}
.hidden_on_phone{
display: none;
}
.button {
line-height: 35px;
text-align: center;
box-sizing: border-box;
height: 35px;
max-width: 90px;
padding-left: 0.8rem;
padding-right: 0.8rem;
font-size: 12px;
}
#solitaire_down_menu>li>span.button{
line-height: 25px;	
}
.modal > div {
width: 90%;
max-width: 370px;
padding: 1rem 1em;
}
h2.modal_title {
font-size: 1rem;
margin-bottom: 1rem;
}
#mobile_menu{
display: inline-block;
}
#solitaire_down_menu.opened{
display: block;
}
}
@media (max-width: 767px) and (orientation:landscape){
#button_block
{
padding-top: 10px;
}
}
@media (max-width: 767px) and (orientation:portrait){
#button_block
{
margin-top: -100px;
}
}