html,body {
  width: 100%; 
  height: 100%;
  margin: 0;
  padding: 0;
  font-family:'Proxima Nova', Helvetica, sans-serif;
  /* font-weight: bold;*/
   font-style: medium;
   -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
 /* -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);*/
   background-image:url(../images/bg.jpg);
}
.clearfix{clear:both}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{background-color:transparent !important}
.ui-content{padding:0 !important; text-align:center; float:left; width:100%;}
/*.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a{font-weight:400 !important}*/
.ui-header{background-color:transparent !important; border:none !important}
.cc_message, .cc_container .cc_btn{font-family:"Proxima Nova",Helvetica,sans-serif !important; text-shadow:none}
.error{color:red}

.header-wrapper{width:100%;  float:left; text-align:center; background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, white 50%, #2ab5d8 1%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, white 50%, #2ab5d8 1%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, white 50%, #2ab5d8 1%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, white 50%, #2ab5d8 1%); /* Standard syntax */}
.wrapper{width:1010px; margin:0 auto; height:auto; /*overflow:hidden;*/ text-align:center; position:relative; display:inline-block; }
.wrapper h1{ text-shadow:none; margin:0; padding:0; margin-top:18px;}
#index-page .wrapper h1{text-align:left; margin-bottom:18px; color:#6ACBE4}
.header-wrapper .wrapper{/*overflow:hidden;*/ display:block}
.share-buttons{width:65px; position:absolute; top:40px; left:-70px;}

.width100-blue{width:100%; overflow:hidden; text-align:center; background-color:#00405d; }
.width100-cyan{width:100%; overflow:hidden; padding-top:2%; padding-bottom:2%; text-align:center; background-color:#2ab5d8;}
.width100-blue.padding{padding-top:2%; padding-bottom:2%}
.width100-blue2{width:100%; clear:both;/*overflow:hidden;*/ padding-top:2%; padding-bottom:2%; text-align:center; background-color:#65c0af;}
.width100-transp{width:100%; clear:both;/*overflow:hidden;*/ /*padding-top:2%; padding-bottom:2%;*/ text-align:center; }

.header-left{float:left; width:25%; background-color:white; padding-top:2%; padding-bottom:1%}
.header-left a{width:100%; float:left; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:15px; color:#00405d; text-transform:uppercase; text-decoration:none;  letter-spacing:2px}
.header-left a:hover, .header-left a:visited{color:#00405d;}
.header-left a img{max-width:80%;/* float:left;*/ margin-bottom:13px}
.header-left a.smaller{font-size:12px; text-transform:lowercase; letter-spacing:1px }
.header-left .mobile-menu{display:none}

.header-right{float:left; width:70%; background-color:#2ab5d8; /*overflow:hidden;*/ padding-top:2%; padding-bottom:3%; padding-left:5%}
.header-right .search-section{float:left; width:100%; margin-bottom:12px}
.header-right .search-section .search-line{float:right; min-width:260px; border-bottom:solid 1px #6acbe4; height:30px}
.header-right .search-section .search-line img{float:left; }
.header-right .search-section .search-line input[type="text"]{float:right; text-align:right; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:15px; color:#fff; border:none; background:none; line-height:30px; text-shadow:none}
.header-right .search-section .search-line input[type="text"]::-webkit-input-placeholder { color: #fff !important;}
.header-right .search-section .search-line input[type="text"]:-moz-placeholder { /* Firefox 18- */  color: #fff !important; opacity:1 }
.header-right .search-section .search-line input[type="text"]::-moz-placeholder {  /* Firefox 19+ */  color: #fff !important;  opacity:1 }
.header-right .search-section .search-line input[type="text"]:-ms-input-placeholder {  color: #fff !important; }

.header-right .column{float:left; width:20%;}
.header-right .link-line{font-family:'Proxima Nova', Helvetica, sans-serif; font-size:15px; color:#fff; text-transform:uppercase; text-decoration:none; text-shadow:none; margin-bottom:17px !important; width:auto; margin-right:20px/*min-height:35px*/}
.header-right .link-line span{float:left; margin-right:5px; clear:both}
.header-right a, .header-right a:visited{float:left; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:14px; color:#fff; text-transform:uppercase; text-decoration:none; text-shadow:none; letter-spacing:1.5px}
.header-right a:hover{color:#fff273}
.submenu-wrapper .breadcrumb-line, .submenu-wrapper .breadcrumb-line a{float:left; list-style-type:none; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:15px; color: #6ACBE4; text-transform:uppercase; text-decoration:none; text-shadow:none; /*margin-bottom:17px !important;*/ width:auto;/*min-height:35px*/}
.submenu-wrapper .breadcrumb-line span{float:left; margin-right:5px; clear:both}
.submenu-wrapper .wrapper ul{float:left; padding:0; margin:0}

.advert1{width:970px; height:90px; margin:0px auto 29px}
#game-page .advert1, #index-page .advert1{margin-bottom:0}
#search-page .advert1, #index-page .advert1, #game-page .advert1{margin-top:18px}

.advert2{width:160px; height:600px; margin-left:10px; float:left}
.advert3{width:336px; height:280px; float:left}

.square-wrapper{float:left; width:840px}
.square-wrapper50{float:left; width:50%}
.square2{float:left; width:420px; position:relative}
.square{float:left; width:210px; height:204px; overflow:hidden; position:relative; background-color:#fff}

.square img.square-img{max-height:100%}
.square .plus{position:absolute; left:0; bottom:0; float:left; width:36px; height:36px}
.centered-wrapper {
  display: table;
  height: 100%;
  width:60%;
  margin:0 auto;
}
.centered {
   display: table-cell;
  text-align: left;
  vertical-align: middle;
}
.square .centered .square-link{float:left; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:18px; color:#6acbe4; text-transform:uppercase; text-decoration:none; text-shadow:none}
.square .centered .square-text{float:left; clear:both; font-family:'Open Sans', Helvetica, sans-serif; font-size:13px; color:#191919;  text-shadow:none; text-align:left; font-weight:100}
.square .centered .diamond{position:absolute; left:-11px; top:50%; z-index:5; margin-top:-11px}
.square .centered .diamond2{position:absolute; right:-11px; top:50%; z-index:5; margin-top:-11px}
.square2 .square-hover{background-color:#35B7CD; opacity:0.6; position:absolute; width:100%; height:204px; top:0; left:0; z-index:10; display:none}
.square2:hover > .square-hover{display:block}
.square.nooverflow{overflow:visible}

a.access{width:auto; clear:both; display:inline-block; margin:4% auto; padding:2% 5%; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:15px; color:#fff; text-transform:uppercase; text-decoration:none; text-shadow:none;  background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #2cb5d6 60%, #62c2ad); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #2cb5d6 60%, #62c2ad); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #2cb5d6 60%, #62c2ad); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #2cb5d6 60%, #62c2ad);}
a.access:hover, a.access:visited{color:#fff}

.width100-blue h2{font-family:'Proxima Nova', Helvetica, sans-serif; font-size:40px; color:#fff; text-transform:uppercase; text-shadow:none }
.width100-blue .left-side{float:left; width:336px;}
.width100-blue .right-side{float:left; margin-left:24px; width:510px;}
.width100-blue .left-side2{float:left; width:80%;}
.width100-blue .right-side2{float:right;}

.width100-cyan .column{float:left; width:250px; text-align:left}
.width100-cyan .column h3{font-family:'Proxima Nova', Helvetica, sans-serif; font-size:18px; color:#fff; text-transform:uppercase; text-shadow:none; margin-bottom:40px; padding-top:0}
.width100-cyan .column a{float:left; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:14px; color:#fff; font-weight:100; text-decoration:none; text-shadow:none; width:100%; height:35px; line-height:35px}
.width100-cyan .column a:hover, .width100-cyan .column a:visited{color:#fff}
.width100-cyan .column input[type="text"]{float:left; text-align:left; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:15px; color:#fff; border:none; background:none; line-height:30px; text-shadow:none; border-bottom:solid 1px #6acbe4; margin-bottom:20px; width:100%}
.width100-cyan .column input::-webkit-input-placeholder { color: #fff !important;}
.width100-cyan .column input:-moz-placeholder { /* Firefox 18- */  color: #fff !important;  opacity:1}
.width100-cyan .column input::-moz-placeholder {  /* Firefox 19+ */  color: #fff !important; opacity:1  }
.width100-cyan .column input:-ms-input-placeholder {  color: #fff !important; }

.width100-blue .left-side2 div, .width100-blue .left-side2 a{font-family:'Proxima Nova', Helvetica, sans-serif; font-size:14px; color:#fff; text-shadow:none; text-decoration:none; line-height:52px; height:52px; text-align:left; font-weight:100}
.width100-blue .left-side2 a:hover,  .width100-blue .left-side2 a:visited{color:#fff}
.width100-blue .right-side2 span{float:right; width:44px; font-family:'Proxima Nova', Helvetica, sans-serif; font-size:12px; color:#6acbe4; text-shadow:none; line-height:18px; margin-top:9px; height:52px; text-align:right; margin-right:13px; }
.width100-blue .right-side2 a{float:right}

/**************************************main menu********************************************************/
nav{float:left; width:100%; margin-top:36px;}
#nav {
position:relative;
/*width:620px;
*/margin:0 auto;
width:1010px;
display:inline-block
}
ul.navigation {
margin:0px auto;
position:relative;
float:left;
padding:0;
}
nav ul{float:left; padding:0}
ul.navigation li, nav ul li {
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
width:16.66%;
text-align:left;
}
ul.navigation li a {
	/*padding:10px 25px;*/
	text-decoration:none;
	display:inline-block;
	
	-webkit-transition: background 1s linear;	
	-moz-transition: background 1s linear;	
	-o-transition:background 1s linear;	
	transition:background 1s linear;	
}
ul.navigation li a:hover {
}

ul.navigation li:hover > a {
}
/* Drop-Down Navigation */
ul.navigation li:hover > ul{
visibility:visible;
opacity:1;
background-color:#999;
}
ul.navigation{
list-style: none;
margin: 0;
padding: 0;
/*position: absolute;*/
z-index: 99999;
width:100%;
/*box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);*/
}

ul.navigation ul{
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
position: absolute;
z-index: 99999;
width:180px;
/*box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);*/
opacity:0;
-webkit-transition:opacity 0.5s linear, visibility 0.5s linear;
-moz-transition:opacity 0.5s linear, visibility 0.5s linear;
-o-transition:opacity 0.5s linear, visibility 0.5s linear;
transition:opacity 0.5s linear, visibility 0.5s linear;
}
ul.navigation ul {
bottom: 18px;
left: 0px;
}
ul.navigation ul li ul {
top: 0;
left: 181px;
}
ul.navigation ul li {
clear:both;
width:100%;
border:0 none;
}
ul.navigation li a {
background:none;
padding:0;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
text-align:left;
font-size:12px;
color:#FFF;
text-shadow:none;
}
ul.navigation ul li a {padding:7px 15px}

ul.navigation li a:visited, ul.navigation li a:hover{color:#fff}
ul.navigation li:first-child a{
	border-left: 0 none;
}
ul.navigation li:last-child a{
border-right: 0 none;
}

/**************************************game page *******************************************************/
.begin {
   width: 100%;
   height: 100%;
   background-color: white;
}

.done {
}

.wraper {
  width: 100%;
  min-height:78vh; 
 /* display: none;*/
}
.header {
  width: 100%;
  height: 10vh;
  background-image:url(../images/header.png);
  background-repeat:repeat-x;
  background-size: 2%;
  position: relative;
  background-size: contain;
}

.logo_mare {
  width: 28%;
  height: 100%;
  margin: 0 auto;
  background-image: url("../images/logo.png");
  background-repeat:no-repeat;
  background-size: 92%;
  background-position: center;
}
.refresh {
   width: 10%;
   height: 5%;
   background-image: url("../images/r_scris.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
   cursor: pointer;
   position: absolute;
   top: 3%;
   right: 12%;
}
.cover {
   width: 50%;
  /* height: 70%;*/
  height:400px;
   position: absolute;
   top: 15%;
   left:25%;
   background: #fff;
   z-index: 3;
  /* opacity: 0.5;*/
   display: none;
   border:solid 1px #000;
}
.close_game {
   width: 3%;
   height: 65%;
   background-image: url("../images/buton_x.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
   cursor: pointer;
   position: absolute;
   top: 20%;
   right: 5%;
   z-index: 20;

}

.close_game_white {
  background-image: url("../img/buton_x_white.png");
}

.board {
  width: 100%;
  height: /*86vh;*/70vh;
  position: relative;
  /*background-color: green;*/
}

.table_game{
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-spacing: 20px;
}

.coll_table {
  /*width: 20%;*/
  /*height: 50%;*/
/*  background-image: url("../img/back.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;*/
  float:left;
  /*height:100%;*/
  margin-right:2%
}

.cards_area {
  width: 100%;
  height: /*80%;*/ 97%;
  margin: 0 auto;
  left: 0%;
  top: 0%; /*10%*/
  position: absolute;
}

.row_table {
  width: 100%;
  /*height: 50%;*/
  margin-bottom:2%
}

.flip-container {
  width: 100%;
  height: 100%;
   -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000
  transform-style: preserve-3d;
}

.flipper {
  width: 100%;
  height: 100%;
  transition: 0.6s;
  transform-style: preserve-3d;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  position: relative;
}

.front, .back {
   width: 100%;
  height: 100%;
  background-color:#fff;
   -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;


    position: absolute;
    top: 0;
    left: 0;
	border: 2px solid #2ab5d8;
    border-radius: 10px;
    margin-right: 10px;
    box-shadow: 10px 10px 10px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.front {
  background-repeat: no-repeat;
  background-position: center;
  /*background-size: auto 100%;*/
  z-index: 2;
}

.back {
  background-image: url("../images/1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
   -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  /*display: none;*/
}

.flip_back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip_front {
  -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/*.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}*/
/*.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}*/

.footer {
  width: 100%;
  height: 4%;
  background-image: url("../images/footer.png");
  background-repeat:repeat-x;
  background-size: 3%;
  background-size: contain;
}

.end {
 /* position: absolute;*/
  top: 35%; left:25%;
 /* width: 50%;*/
 /* height: 50%;*/
 height:230px;
  /* border: 1px solid black;*/
  display: none;
  z-index: 3;
}

.endform .ui-input-text{width:100%}
.win {
   /*background-image: url("../images/bravo.png");
   background-repeat: no-repeat;
   background-position: top center;
   background-size: 50%;*/
}

.win_score {
   width: 100%;
  /* height: 7%;*/
  margin:0;
   /*position: absolute;*/
   top: 0%; /*25%*/
   left: 0;
   font-size: 2.1vw;
   /*display: none;*/
   color: #591612;
}

@-webkit-keyframes spaceboots {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.addShake {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.4s;
  -webkit-transform-origin:50% 50%;
  /*-webkit-animation-iteration-count: infinite;*/-webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}

/*******************************************************score page *************************************************/
.div-table{
  display:table;         
  width:100%;         
  /*background-color:#eee;         
     border:1px solid  #666666;   */   
  /*border-spacing:5px;*//*cellspacing:poor IE support for  this*/
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
  height:45px;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:45%;         
  /*background-color:#e1e1e1;  */
 /* padding:5px;*/
  border-bottom:1px solid  #fff; 
  text-align:left; height:45px; line-height:45px; 
}
.div-table-row:last-of-type .div-table-col{border-bottom:none}
.div-table-row .div-table-col:first-of-type{width:55%}

.div-table-col a.game-title, .div-table-col a.game-title:hover{font-family:'Proxima Nova', Helvetica, sans-serif; font-size:16px; color:#fff; text-transform:uppercase; text-shadow:none; text-decoration:none;}
.div-table-col{font-family:'Proxima Nova', Helvetica, sans-serif; font-size:14px; color:#fff; text-transform:uppercase; text-shadow:none; }
.div-table-col span{margin-right:30px}

.footer-score .div-table-row{
  height:35px;
}
.footer-score .div-table-col{
  height:35px; line-height:35px;  font-size:13px;
}


#score-page .div-table-row .div-table-col:first-of-type{width:100%}
#score-page .width100-blue .right-side{width:45%; margin-left:5% !important}
#score-page .inside-popup .div-table-row .div-table-col, .ui-popup-container .div-table-row .div-table-col{width:30% !important}
#score-page .inside-popup .div-table-row .div-table-col:first-of-type, .ui-popup-container .div-table-row .div-table-col:first-of-type{width:40% !important; overflow:hidden; white-space:nowrap;}


@media (max-width:1010px){
	.wrapper{width:100%}
	.square-wrapper{width:100%}
	.square2{width:100%}
	.square{width:50%}
	.width100-blue .right-side{width:626px}
	.advert2{display:none}
	.width100-cyan, .width100-blue{padding-left:2%; padding-right:2%; width:96%}
	.width100-blue .left-side{width:100%; text-align:center}
	.width100-blue .left-side .advert3{margin:0 auto; float:none}
}

@media (max-width:970px){
	.advert1{width:100%}
	.width100-cyan .column{width:25%}
}

@media (max-width:840px){
	.header-right{width:94%}
	.header-left{width:100%;}
	.header-left a{text-align:center}
	.header-left a img{float:none}
	
	.end{top:32%; width:100%; left:0; /*height:36%*/}
	.cover{width:92%; left:3%; height:350px;/* height:52%*/} 
	.win_score{font-size:14px}
	.end form{top:25% !important}
	.end a{font-size:12px; right:5%}
}

@media (max-width:674px){
	.width100-cyan .column{width:50%}
	.width100-blue .right-side{width:100% !important}
	.header-right .column{width:50%}
	.width100-blue .left-side2 div, .width100-blue .left-side2 a{line-height:26px; font-size:12px;} 
	.width100-blue .left-side2{width:50%}
	#index-page .wrapper h1{font-size:24px}
}

@media (max-width:600px){
	.width100-blue .right-side{margin-left:2% !important}
	.div-table-col span{margin-right:5px !important}
	.width100-blue .right-side .div-table-col:last-of-type{display:none}
	#score-page .width100-blue .right-side .div-table-col:last-of-type{display:block !important; overflow:hidden}
	#score-page .ui-popup .width100-blue .wrapper .right-side .div-table-col:last-of-type{display:none !important}
	.div-table-col .game-title{max-width:70%}
	.width100-blue .right-side .div-table-col{width:90%}
	.header-left a{float:none; display:block; margin:0 auto; font-size:12px;}
	.header-left a img{max-width:15%}
	.header-right .search-section{display:none}
	nav{margin-top:0}
	nav ul{margin:0}
	.header-right a, .header-right .link-line{font-size:10px}
	.header-right{display:none}
	.header-right .link-line{width:100%}
	.header-left{position:relative}
	.header-left .mobile-menu{display:block; position:absolute; right:10px; bottom:10px}
}

@media (max-width:420px){
	.width100-cyan .column{width:100%}
	.square2{width:100% !important}
	.square-wrapper50{ width:100%}
}