html, body{
font-size: 16px;
height: 100%;
overflow-y: hidden;
}
body{
position: relative;
overflow-x: hidden;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#show_imageAd{
position:absolute;
z-index:2;
height:10rem;
width:10rem;
/*background-image: url('/../../img/demo/1.png');
background-position:center center;
background-repeat:no-repeat;*/
top:0.5rem;
right:0.5rem;
}
#game_field{
position:relative;
z-index:3;
}


#dealer_set,
#player_set {
width: max-content;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
position: relative;
-webkit-perspective: 400px;
        perspective: 400px;
text-align: center;
}
.flipped_container {
min-width: 120px;
height: 180px;
margin: 0;
margin-right: 20px;

}
.active {
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
}
.player_card {
position: relative;
min-width: 120px;
height: 180px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
-o-transition: transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.card figure {
z-index: -1;
display: block;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
background-image: url('/../../img/blackjack/back.jpg');
background-size: contain;
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
margin-right: 20px;
}
.flipped {
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.player_container {
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
position: relative;
width: 100px;
overflow: visible;
-webkit-perspective: 800px;
        perspective: 800px;
}
.game_play{
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
margin-top: 6vh;
}
.container{
max-width: 1920px;
margin: 0 auto;
}
.column_3{
width: 33%;
float: left;
}
.column_9{
width: 66%;
float: right;
min-height: 20vh;
}
.column_2{
width: 25%;
float: left;
}
.column_10{
width: 75%;
float: right;
min-height: 300px;
}
.score_text{
font-size: 1.2rem;
text-align: center;
color: #fff;
text-transform: uppercase;
display: inline-block;
font-weight: bold;
background-color: #ff3403;
cursor: default;
padding: 0.5rem;
}
.score_container{
padding: 30px 15px;
text-align: center;
}
.players_parts{
text-transform: uppercase;
color: #fff;
font-size: 1.3rem;
text-align: center;
margin-top: 5%;
}
#intro{
position: fixed;
overflow-x: hidden;
height: 100%;
width: 100%;
background-image: url('../img/intro.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 11;
text-align: center;
padding-top: 2rem;
}
.intro__buttons_block{
display: inline-block;
margin: 0 auto;
text-align: center;
}
#instructions{
margin-right: 2rem;
}


#reset {
float: right;
}
.centered{
overflow: hidden;
position: relative;
height: 450px;
width: 650px;
margin: 10px auto;
padding-top: 20px;
}
.dealer{
text-align: left;
}
#playerGameButtons,
#playerButtons{
position: absolute;
text-align: right;
max-width: 20rem;
display: inline-block;
right: 2rem;
top: 40%;
}
#playerButtons{
display: none;
z-index: 10;
}
#overlay{
background-color: rgba(0,0,0,0.1);
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top:0;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
display: none;
}
#game_information{
background-color: #fff;
padding: 1rem 2rem;
display: inline-block;
text-align: center;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 0px 0px #cecaca;
box-shadow: 0px 0px 0px 0px #cecaca;
position: absolute;
top:10%;
right: 0;
left: 0;
z-index: 13;	
width: 90%;
max-width: 450px;
border-radius: 1.2rem;
display: none;
}
.information_text{
font-size: 1rem;
margin-top: 2.5rem;
line-height:1.2rem; 
}
.gamenotification{
background-color: #ff3403;
padding: 1rem;
display: inline-block;
-webkit-box-shadow: 0px 0px 0px 0px #cecaca;
box-shadow: 0px 0px 0px 0px #cecaca;
position: absolute;
bottom: 3%;
left: 1%;
margin: 0 auto;
width: 30%;
max-width: 380px;
border-radius: 1rem;
}
#result>p.game_result{
color: #fff;
text-transform: uppercase;
font-size: 1.2rem;
}
@media (max-width: 1366px) {
.welcome_text{
font-size: 4.1rem;
max-width: 70%;
margin-top: 9%;
}
}
#close_modal {
position: absolute;
right: 1rem;
top: 0.5rem;
width: 2rem;
height: 2rem;
opacity: 0.3;
cursor: pointer;
}
#close_modal:hover {
opacity: 1;
}
#close_modal:hover {
opacity: 0.8;
}
#close_modal:before, #close_modal:after {
position: absolute;
left: 1rem;
content: ' ';
height: 2rem;
width: 2px;
background-color: #333;
}
#close_notification:before{
background-color: #fff;
}
#close_modal:before {
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#close_modal:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 767px) {
.player_card {
text-align: center;
min-width: 60px;
height: 90px;
}
.flipped_container  {
min-width: 60px;
height: 90px;
text-align: center;
}

body{
overflow-y: visible;
}
.desktop_break{
display: none;
}
.column_3{
width: 100%;
margin-bottom: 1rem;
text-align: center;
}
.column_2,
.column_10 {
width:100%;
float: none;
display: block;
margin-bottom: 1.5rem;
min-height: auto;
}
#playerGameButtons,
#playerButtons{
position: relative;
text-align: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
right: 0;
top: 0%;
}
.game_button.black,
.game_button.blue{
display: block;
margin: 0 auto;
margin-bottom: 1.5rem;
}
.game_play{
display: block;
}
.game_button {
font-size: 1rem;
padding: 0.8rem 1rem;
margin-bottom: 1rem;
}
.score_text {
font-size: 1rem;

}
.players_parts {
font-size: 1rem;
text-align: center;
}
.dealers_cards, .players_cards {
display: block;
text-align: center;
}
#result>p.game_result{
font-size: 1rem;
}
.gamenotification {
width: 90vw;
max-width: 350px;
border-radius: 1rem;
}
}