/*===============================================

	Tower Chase
	Version: 1.0.0
	Author: Icedor.se
	
	Table of contents:
	- CSS Reset
	- General
	- Typography
	- Links & Buttons/Input
	- Images
	- Columns & Layout
	- Content
	- Media Querys

===============================================*/

/* ########## Reset ##### */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	zoom:1;
}

/* ########## HTML5 display-role reset for older browsers ##### */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
ul {list-style: disc inside;margin-bottom: 25px;}
	ul > li > ul,
	ol > li > ol {margin-left: 25px;}
ol {list-style: decimal inside;margin-bottom: 25px;}

/* ########## General ##### */
* {
    box-sizing: border-box;
}
html, body {
	width:100%;
	height:100%;
	padding:0;
	margin-left:0;
	margin-right:0;
	font-family: 'Open Sans Condensed', sans-serif;
	-webkit-font-smoothing: antialiased;
	position: relative;
	font-size:16px;
}

body {
	height:100%; 
	overflow-x: hidden;
	overflow-y: auto;
	line-height:1.8em;
}

.anim_st1 {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* ########## Typography ##### */

::-moz-selection
 {
	 background:#444444;
	 color:#fff;
}
::selection
{
	background:#444444;
	color:#fff;
}

h1,h2,h3,h4,h5,h6{
	float:left;
	width:100%;
	margin-bottom: 25px;
	color: #444;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height:1.4em;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	text-transform:uppercase;
}
h1 {
	font-size:50px;
}
h2 {
	font-size:40px;
}
h3 {
	font-size:36px;
}

p {
	margin-bottom:20px;
	line-height:1.8em;
}

.preamble {
	font-size:1.6em;
	font-style:italic;
}

hr {
    border-bottom: 3px dashed;
    color: #ffffff;
    display: inline-block;
    width: 100%;
}

.center_content {
	text-align:center;	
}



/* ########## Links & Buttons/Input ##### */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

a {
	color:#fff;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

a:hover,
a:active,
a:focus {
	color:#8ed1ce;
	outline:none;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.button_1 {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 8px 7px 34px -19px #000000;
    color: #444444;
    float: left;
    font-size: 22px;
    margin-top: 20px;
    padding: 15px 40px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
.button_1:hover {
	box-shadow: 2px 2px 34px -19px #000000;
	color: #444444;
}
.button_close {
    background-color: #2e3b56;
    bottom: 0;
    color: #ffffff;
    font-size: 22px;
    left: 0;
    padding: 15px 40px;
    position: fixed;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}
.button_close:hover {
	color: #ffffff;
}

input {
    background-color: #ffffff;
    border: medium none;
    color: #000000;
    font-family: "Open Sans Condensed",sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
    padding: 5px 20px;
    text-align: center;
    width: 100%;
}
input[type=submit] {
	background-color:#2e3b56;
	color:#fff;
	cursor:pointer;
}

/* ########## Images ##### */

img {
	max-width: 100%;
	-moz-user-select: none; 
	-webkit-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	-webkit-user-drag: none;
	user-drag: none;
}

p > img {
	max-width: 100% !important;
	height: auto;
}

/* ########## Columns & Layout ##### */

header {
    background-color: #8ed1ce;
    float: left;
    margin-bottom: 50px;
    min-height: 100px;
    position: relative;
    width: 100%;
}
#logo {
	position: relative;
    display: inline;
    height: 100%;
    margin-top: 30px;
    min-width: 200px;
    width: 30%;
	margin-bottom:50px;
}
.towerCaseGameplay {
    max-width: 500px;
    position: absolute;
    right: -20px;
    top: 20px;
    width: 25%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

section.fullw_white, section.fullw_blue{
	position: relative;
	float:left;
	width:100%;
	color:#fff;
	padding: 40px 0;
}
section.fullw_white {
	color:#444444;
}
section.fullw_blue {
	background-color:#8ed1ce;
}

.fullw_blue h1, .fullw_blue h2, .fullw_blue h3, .fullw_blue h4, .fullw_blue h5, .fullw_blue h6 {
	color:#fff;
}

.centrer {
    display: table;
    margin: auto;
    max-width: 1100px;
    padding: 0 20px;
    position: relative;
    width: 100%;
}
.centerInside{
	text-align:center;
}

div.row {
	float:left;
	width:100%;
}
div.row.underline {
	border-bottom:3px #fff dashed;
}
div.column_100, div.column_70, div.column_50, div.column_30 {
    display: table-cell;
    padding: 60px 40px 90px;
    position: relative;
    width: 100%;
}
div.column_70{
	width:70%;
}
div.column_50 {
	width: 50%;
}
div.column_30 {
	width: 30%;
}
div.cell{
	float:left;
}
div.cell.c_50{
	width:50%;
}
div.cell.c_33{
	width:33.3333333%;
}
dynCell{
	float:left;
}

.bottomSpacer{
	float:left;
	width:100%;
	height:100px;
}

/* ########## Content ##### */
.downloadApp {
    text-align: center;
    width: 100%;
}
.downloadApp a img {
    margin-bottom: 20px;
    max-width: 300px;
    width: 25%;
	border-radius:10px;
	box-shadow:10px 10px -1px 0 #000000;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.downloadApp a img:hover {
    box-shadow: 10px 10px 17px -12px #000000;
}
.downloadApp a:first-child img {
	margin-right: 20px;
}
.DuelWrapper {
    float: left;
    font-size: 27px;
	max-width: 800px;
    padding-bottom: 50px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.fromApp .DuelWrapper {
	max-width:none;
}
.DuelWrapper .vs_VS {
	float:left;
	width:30%;
    font-size: 2em;
}
.DuelWrapper .vs_w {
	float:left;
	width:35%;
}
.DuelWrapper .vs_city {
	float:left;
	width:100%;
}
.DuelWrapper .vs_score {
	float:left;
	width:100%;
}
	  
.HighScoreWrapper{
	float:left;
	max-width:800px;
	width:100%;
	text-transform:uppercase;
}
.fromApp .HighScoreWrapper{
	max-width:none;
}
.HighScoreWrapper .row:first-child{
	font-weight:bold;
}
.HighScoreWrapper .row:nth-child(2n+2){
	background-color:#eee;
}
.c_name{
	float:left;
	width:20%;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	padding-right:3px;
	padding-left:5px;
}
.c_city{
	float:left;
	width:20%;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	padding-right:3px;
}
.c_highscore{
	float:left;
	width:20%;
}
.c_besttime{
	float:left;
	width:20%;
}
.c_date{
	float:left;
	width:20%;
}
.shareScoreWrapper {
    float: left;
    padding-bottom: 50px;
    width: 100%;
}
.addToHighscoreForm{
	float:left;
	width:100%;
}
.errorPostingScore {
    color: #fff;
    float: left;
    font-size: 22px;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

.sharePromtWrapper{
	float: left;
    padding-bottom: 50px;
    width: 100%;
}
.sharePromtWrapper a {
    background-color: #ffffff;
    color: #444444;
    float: left;
    margin-left: 15px;
    overflow: hidden;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    width: calc(33.3333% - 10px);
	box-shadow:10px 10px 29px -21px #000000;
}
.sharePromtWrapper a:first-child{
	margin-left:0;
}
.sharePromtWrapper a:hover {
	box-shadow:10px 10px 29px -11px #000000;
}
section.fullw_blue.sharedScore{
	 background-color: #2e3b56;
}
.sharedScoreWrapper {
    background-color: #2e3b56;
    float: left;
    padding: 20px;
    width: 100%;
}
.sharedDate{
	font-size:20px;
}

/* ########## Media Querys ##### */
@media only screen and (max-width: 900px) {
	
	h3 {
		font-size: 26px;
	}
	div.column_100, div.column_70, div.column_50, div.column_30 {
		float:left;
		padding: 40px;
		width: 100%;
	}

	.button_1 {
		margin-left: 0;
		text-align: center;
		width: 100%;
	}

	.downloadApp a img {
		margin-bottom: 20px;
		max-width: 300px;
		width: 80%;
	}
	
}
@media only screen and (max-width: 680px) {
	
	.no_mob{
		display:none !important;
	}
	html, body {
		font-size: 14px;
	}
	h2 {
		font-size: 28px;
	}
	section.fullw_white, section.fullw_blue {
		padding: 20px 0;
	}
	div.column_100, div.column_70, div.column_50, div.column_30 {
		float: left;
		padding: 30px 0;
		width: 100%;
	}
	.DuelWrapper {
		font-size:16px;
	}
	.sharePromtWrapper {
		padding-bottom: 20px;
	}
	.sharePromtWrapper a {
		margin-bottom: 20px;
		margin-left: 0;
		width: 100%;
	}
	
	.downloadApp a:first-child img {
		margin-right: 0px;
	}

	.c_name{
		width:32%;
	}
	.c_city{
		width:31%;
	}
	.c_highscore{
		width:21%;
	}
	.c_besttime{
		width:16%;
	}
	.c_date{
		display:none;
	}

}
@media only screen and (max-width: 480px) {
	
	.towerCaseGameplay {
		left: 25%;
		opacity: 0.5;
		right:auto;
		width: 50%;
	}

}