@charset "UTF-8";
/* CSS Document */

@media screen {
	*, body, div, h1, h2, h3, a, p, ul, li {margin:0; padding:0; font-family:'Open Sans', Verdana, Geneva, sans-serif !important; text-align:justify;}
	div { display:block;}
	img { margin: 0; padding: 0; border: 0; display: block;}
	h1 { font-size:30px; letter-spacing: 0.2rem; font-family:'Anton','Open Sans', Verdana, Geneva, sans-serif !important; position: relative; top: 45%; width: 100%; text-align: center;}
	h2 { font-size:24px; font-family:'Open Sans', Verdana, Geneva, sans-serif !important; font-weight: 300; width: 100%; text-align: center; padding-bottom:20px; color:#2a707e;}
	h2.plate { background: #39919f; background-size: 100% auto; width:100%; max-width: 400px; padding-top: 23px; height:35px; font-size:20px; margin:0 auto 20px; color:#fff; text-shadow: 2px 2px 3px #000;}
	h3 { text-align: center; margin:0 0 10px;}
	h3.band { background: #bfbfbf; margin-bottom: 20px; padding: 10px;}
	.rowLogo {width: 100%; height:300px; background: #000; text-align: center;}
	.rowLogoInner {display:block; width: 300px; position: relative; top: 23%; margin: 0 auto;}
	.pad10 { padding: 10px;}
	.pad15 {padding:15px;}
	.pad20 { padding: 20px;}
	.alignRight { text-align: right;}
	.alignLeft { text-align:left;}
	
	.centered { text-align: center;}

	a.btn { display: block; width: 70%; text-align: center; padding: 10px 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background: #34C443; color:#fff; text-decoration:none; margin:0 auto;}
	.question { background: url(../images/#) top left no-repeat; font-weight:600; padding-left:50px; background-size:40px 40px; padding-top:8px; margin-bottom: 10px; min-height:40px;}
	.answer { background: url(../images/#) top left no-repeat; padding-left:50px; background-size:40px 40px; padding-top:8px; margin-bottom: 30px; min-height:40px;}
	
	 /* Style the navbar */

	#navbar {
	  overflow: visible;
	  background-color: #2a707e;
	}

	
	/* Page content */
	.row { width: 100%; margin:0; padding: 0px;}
	.rowInner { width:96%; margin:0 auto; padding: 20px 0;}
	.clear { clear: both;}
	.twoCol { width:100%; margin:0 0 20px;}
	.threeCol { width: 100%; margin:0 0 20px;}
	.fourCol { width: 100%; margin:0 0 20px; }
	.twoCol.last, .threeCol.last, .fourCol.last { margin-bottom:0;}
	.twoCol img:hover { box-shadow: 4px 4px 4px #999;transition: 0.4s;}
	.sixty, .forty, .seventyFive, .twentyFive { text-align: justify;}
	.col2wide {width:100%; margin:0 0 20px; text-align: center;}
	.col2wide img { display: block; width:100%; margin: 0 auto;}
	.col10wide { width: 100%; margin: 0 0 20px;}

	/* The sticky class is added to the navbar with JS when it reaches its scroll position */
	.sticky {
	  position: fixed;
	  top: 0;
	  width: 100%
	}

	/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
	.sticky + .content {
	  padding-top: 60px;
			} 

	.twoColTable { width: 100%;}
	.twoColTable .columnLeft { display: block; width: 100%; text-align: justify;}
	.twoColTable .columnBlank { display: block; width: 100%;}
	.twoColTable .columnRight { display: block; width: 100%; text-align: justify;}
	
	.row.statBlock { background: #424141; color:#fff; font-size:14px;}
	.row.statBlock .rowInner { padding:10px 0;}
	.row.footer {background-color: #2a707e; color:#fff; font-size:14px; line-height: 24px;}
	.row.footer a, .row.footer a:active, .row.footer a:visited { color:#fff;}
	.row.footer a:hover { color:#A4C5C3;}
	a.articleLink, a.articleLink:active, a.articleLink:visited { font-weight:bold; color: #2B707E;}
	a.articleLink img {width:100%; margin-bottom:5px; display:block; border-bottom:5px solid #2B707E;}
	a.articleLink:hover, a.articleLink:hover img { opacity:0.9; background:#f3f3f3; display: block;}
	a.articleLink span {text-decoration: none !important; font-weight:normal; text-align:center; font-size:12px; padding:5px;display: block;}
	
	a.navBtnSingle { color:#fff; text-decoration: none; padding:16px 20px;}
	a.navBtnSingle:hover {background:#599F9E; cursor: pointer;}
	
	.dropbtn {
    background-color: #2a707e;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
	}

	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #2a707e;
		width: 200px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.dropdown-content a {
		color: #fff;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		width:168px;
		text-align: left;
	}

	.dropdown-content a:hover {background-color: #599F9E;}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown:hover .dropbtn {
		background-color: #599F9E;
		text-align: left;
	}

	.players {background: url(../images/game_element_players.png) #1D371E top left no-repeat;}
	.ages {background: url(../images/game_element_ages.png) #1D371E top left no-repeat;}
	.time {background: url(../images/game_element_time.png) #1D371E top left no-repeat;}
	
}

@media screen and (min-width: 480px) {
	.rowInner { width:96%; margin:0 auto; padding: 40px 0; max-width: 980px;}
	.rowLogoInner { width: 420px; top:9%;}
	.twoCol { width:48%; float: left; margin:0 4% 0 0;}
	.threeCol { width: 32%; float: left; margin:0 2% 0 0;}
	.fourCol { width: 23.5%; float: left; margin:0 2% 0 0;}
	.twoCol.last, .threeCol.last, .fourCol.last { margin-right:0;}
	.left {float:left;}
	.right {float:right;}
	.sixty { width: 59%; }
	.forty { width:39%; }
	.seventyFive {width:74%;}
	.twentyFive { width:24%;}
	
	.col2wide {width:18%; display: block; float: left; border: 1px solid #f00;}
	.col10wide { width: 78%; display: block; float: right; border:1px solid #0f0;}
	
	.twoColTable {}
	.twoColTable .columnLeft { display: table-cell; width: 48%;}
	.twoColTable .columnBlank { display: table-cell; width: 4%;}
	.twoColTable .columnRight { display: table-cell; width: 48%;}
	

}