body {
  font-family: "Open sans", sans-serif; 
  color:#555; 
  margin:0 auto; 
  padding: 0;
  background-color:#fff;
  font-size:16px;
}
h1,h2,h3,h4{
padding: 4px; margin: 24px 0 0 0;
display:block;
} 

h2    {font-size:18px;}
h3,h4 {font-size:17px;}
ul {padding: 0 0 0 24px; margin: 0;}
li {padding: 0; margin: 0;}

img{
  background-color: transparent;
  border: 0;
  overflow: hidden;
}
a{
  text-decoration: none;
}
p{
  margin:8px;
}

.no-margin{
  margin:0 auto!important;
  width:100%!important;
}

.big{
font-size:24px!important;
}
.paragraph{
max-width: 750px!important;
}
.white-text{
  color: white!important;
}
.light-gray-text{
  color: #ccc!important;
}
.green-text{
  color: green!important;
}
.red-text{
  color: #e00!important;
}
.orange-text{
  color: #f70!important;
}
.facebook-color-text{
  color: rgb(59, 87, 157)!important;
}
.white{
  background-color: #fff!important;
}
.gray{
/*  background-color: gray!important;*/
  background: linear-gradient(to bottom right, gray, #555);
}
.dark-gray{
    background:linear-gradient(to bottom right, #222, #555)
}
.center{
  text-align:center;
}

.orange{
/*  background-color: #f80!important;*/
  background: linear-gradient(to bottom right, #f80, #fc0);
  padding: 16px 0!important;
}
.background{
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("banner-spm.jpg");
  padding: 64px 0!important;
}


.devider{
  display: block;
  border:none;
  border-top: 1px dashed #ccc;
  clear: both;
  height: 0; margin: 0; padding: 0;
}
.block{			/*common full-width block*/
  display:table;
  position:relative;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0;
}
.sub-block{		/*common block for content*/
  display:table;
  position: relative;
  width: 95%;
  max-width: 1000px;
  min-height: 44px;
  margin: 16px auto;
}
.download-block{		/*container for download buttons*/
  display:table;
  position: relative;
  margin: 8px auto;
}
.sub-block-left{	/*768+ wide screen*/
  display:table;
  float: left;
  width: 60%;
  margin: 0;
}
.sub-block-right{	/*768+ wide screen*/
  display:table;
  float: right;
  width: 60%;
  margin: 0;
}
.sub-block-narrow{	/*768+ wide screen*/
  display:block;
  vertical-align: middle;
  width: 65%;
  margin: 0;
}
.big-image{
  display:block;
  width: 100%;
  height: 480px;
  background-color: orange;
  margin: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("games/solitaire-perfect-match/banner-spm.jpg");	/* */
  text-align: center;
}
#home-page-image{
  /*background-image: url("games/solitaire-perfect-match/banner-spm-home.jpg")!important;	 */
  background-image: url("games/kingdom-chronicles-2/banner-kc2.jpg")!important;	background-position: 50% 50%;
}
.big-image img {
  width:100%
}
.title{
  width: 100%;
  position: absolute;
  bottom: 30px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  font-size: 64px;
  text-shadow: 0px 1px 10px #000;
  padding: 0;
}
.sub-title{
color: #f80;
font-size: 30px;
margin: 0;
padding: 0;
text-align: center;
}
.sub-title-left{
color: #f80;
font-size: 30px;
margin: 0;
padding: 0 0 0 8px;
text-align: left;
}
.sub-block-image{
  display: block;
  width: 25%;
  height: auto;
/*  background-color: #def;*/
  margin:8px;
  padding: 0 8px;
  vertical-align: middle;
}
.image{
  width: 100%;
  height: auto;
}
.right{
/*  padding-left: 64px!important;*/
  float:right;
}
.left{
/*  padding-right: 64px!important;*/
  float:left;
}

#header{
  z-index: 999;
  background-color: rgba(255,255,255,0.85) !important;
/*  background: linear-gradient(to top, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.51));*/
}
#logo{
  height: 44px;
  padding: 6px 12px;
}
#main-menu{
  display:table;
  height: 56px;
  margin: 0px auto;
  float: right;
}
#menu-icon{
  display: none;
  background: url("images/menu.png");
}
#menu-items{
  display:table;
  height: 56px;
  font-size: 18px;
}
.menu-item{
  display: table-cell;
  vertical-align: middle;
}
.menu-item a{
  color: #555; 
  padding: 24px 16px;
  border-radius: 6px;
  margin: 0 6px;
  transition: background-color 0.25s linear 0s;  
}
.menu-item a:hover{
  color: #fff;background-color: #FFA115;
  transition: background-color 0.1s linear 0s;
}
.menu-item a:active{
  color: #fff; background-color: #FB6A00;
}
#big-image{
margin-top: -64px;
}
#big-image a{
  display:block;
  transition: opacity 0.25s linear 0s;
}
#big-image a:hover{
  display:block;
  opacity:0.75;
  transition: opacity 0.1s linear 0s;
}
#footer{
  border-top: 4px solid #ddd!important;
  border-bottom: none!important;
  text-align: center;
/*  margin-top: 32px;*/
}

/*
Game icons
=====================================================================================*/
.game-icon{
  height:120px;
  width:120px;
}
.new-game{
  position: absolute;
  height:20px;
  width:40px;
  background-image: url("img-big.jpg");
  top: 20px;
/*  left: 20px;*/
}
.games{
max-width: 950px;
}
.game{
  display:block;
  position: relative;
  width:20%;
  height:200px;
  float:left;
  margin: 12px auto;
}
.related{
/*  float: none;*/
/*  display:table-cell;*/
/*  vertical-align: middle;*/
}
.game a{
  display:block;
  color:#555;
  padding: 8px 0 0 8px;
  width: 150px;
  margin: 0 auto;
}
.game p,.game h2,.game h3{
  font-size:15px;
  margin:0px;
  padding: 0 8px 0 0;
}
.game-logo{
position:absolute;
top:70%;bottom:0;left:0;right:0;
margin:auto;
}

/*
Slider
=====================================================================================*/

.screenshots{
  background-color: #eee;
  display:block;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.screenshot{
}
.slide{
height: 320px;
width: 480px;
float: left;
margin: 0 5px;
background-color: #def;
/*border: 1px solid #ccc;*/
/*box-sizing: border-box;*/
overflow: hidden;
box-shadow: 0px 0px 0px 1px #999;
}
.slide img{
width:100%;
}
.slide-overlay-left{
width: 5px;
height: 3200px;
top:0; left:0;
background: rgba(238, 238, 238, 0.75);
position: absolute;
z-index: 2;
}
.slide-overlay-right{
width: 5px;
height: 3200px;
top:0; right:0;
background: rgba(238, 238, 238, 0.75);
position: absolute;
z-index: 2;
}

/*
Social
=====================================================================================*/
.social{
  margin: 0 4px;
}


/*
Download Buttons
=====================================================================================*/

a:link.download-macappstore{
display: block;
background-image: url(images/download-button-macappstore.png);
text-indent: -5555px;
width:186px;
height:45px;
margin: 8px;
float: left;
}
a:link.download-appstore{
display: block;
background-image: url(images/download-button-appstore.png);
text-indent: -5555px;
width:152px;
height:45px;
margin: 8px;
float: left;
}
a:link.download-googleplay{
display: block;
background-image: url(images/download-button-googleplay.png);
text-indent: -5555px;
width:129px;
height:45px;
margin: 8px;
float: left;
}
a:link.download-amazon{
display: block;
background-image: url(images/download-button-amazon.png);
text-indent: -5555px;
width:132px;
height:45px;
margin: 8px;
float: left;
}
a:link.download-windows{
/*height:40px;width:135px;*/
display: block;
background-image: url(images/download-button-windows.png);
text-indent: -5555px;
width:132px;
height:45px;
margin: 8px;
float: left;
}
a:link.download-iphone{
/*height:40px;width:135px;*/
display: block;
background-image: url(images/download-button-iphone.png);
text-align:center;
}
a:link.download-ipad{
/*height:40px;width:135px;*/
display: block;
background-image: url(images/download-button-ipad.png);
text-align:center;
}
.get-it-free{
font-size: 50px;
color: #f80;
text-align: center;
}

/*
Subscribe
=====================================================================================*/
#video{
  width: 100%;
  margin: 0 auto;
  max-width:750px;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}
#video iframe, #video object, #video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*
Subscribe
=====================================================================================*/
#subscribe{
display: table;
margin: 24px auto;
max-width: 750px!important;
}
#subscribe fieldset{
border: none;
}
.buttons input{
border-radius: 6px;
border: none;
background-color: #f80;
font-size: 18px;
color: white;
padding: 12px;
}
.mailchimp{
display: table;
margin: 24px auto;
}


/*
Media
=====================================================================================*/
/* 1024+ */
@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 900px) {
.new-line2{	/*to move download button to a new string*/
clear: both;
float: none!important;
margin: auto!important;
}
}

/* 768- */
@media only screen and (max-width: 768px) {
#main-menu{
width: 100%;
position: absolute;
top: 0px;
right: 0px;
display: block;
}  
#menu-icon{
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  z-index: 9999;
}
#menu-items{
display: none;
height: auto;
font-size: 24px;
margin-top: 56px;
background-color: rgba(255,255,255,0.9);
border-top: 1px dashed orange;
border-bottom: 1px dashed orange;
position: absolute;
left: 0;
top: 0px;
width: 100%;
}
.menu-item{
  display:block;
  width:100%;
}
.menu-item a{
  display: block;
  padding: 20px;
  border-radius: 0px;
  margin: 0 0px;
  text-align: center;
}

.game{
  width:25%;
}
.game p,.game h2,.game h3{
  font-size:14px;
}
a:link.download-macappstore, a:link.download-windows{
  display:none;
}
}

/* 568- */
@media only screen and (max-width: 568px) {
.game{
  width:33%;
  margin: 4px auto;
}
}

/* 480- */
@media only screen and (max-width: 480px) {
#logo{
  height: 40px;
  padding: 6px 12px;
}
#menu-items{
margin-top: 52px;
}

.title{
color: #fff;
font-size: 50px;
bottom: 24px;
}
.sub-title, .sub-title-left{
font-size: 22px;
}
#big-image{
margin-top: -74px;
}
.big-image{
  height: 400px;
}
.game{
  width:50%;
}
.slide{
height: 260px;
width: 390px;
}
.get-it-free{
font-size: 40px;
color: orange;
text-align: center;
}
.new-line{	/*to move download button to a new string*/
clear: both;
float: none!important;
margin: auto!important;
}
}

/* 320- */
@media only screen and (max-width: 380px){
#logo{
  height: 40px;
  padding: 6px 12px;
}

.title{
color: #fff;
font-size: 40px;
bottom: 16px;
}
.big-image{
  height: 340px;
}
.download-block{		/*container for download buttons*/
  -width: 100%;
}
a:link.download-appstore{
margin: 4px 2px;
}
a:link.download-googleplay{
margin: 4px 2px;
}
a:link.download-amazon{
margin: 4px 2px;
}

.sub-block-narrow{	/*full width for small screens*/
  display:table;
  width: 100%;
}
.sub-block-image{
  display: block;
  width: 100%;
  height: auto;
  margin: 0px auto;
  padding: 0px;
}
.right, .left{
  padding: 0!important;
}
.slide{
height: 200px;
width: 300px;
}
}