@charset "UTF-8";

body {
  font-size: 16px;
}
body,
.bg {
  background: url(../img/bounce-bg.jpg) top center repeat fixed;
  background-position-x: center;
  background-position-y: top;
  background-size: auto;
  background-size: cover;
}

/*header*/
header {
  height: auto;
  padding:20px 0 0 0;
}
header .container {
  position: relative;
}
.btn-menu {
  align-items: center;
  background: #831ef5;
  border:3px solid white;
  display: none;
  height:60px;
  justify-content: center;
  position:absolute;
  right:0px;
  top:00px;
  width:60px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.btn-menu .hide {
  display:none;
}
@media only screen and (max-width: 767px){
  header {
    margin-bottom:20px;
  }
  header a.logo img {
    height: 60px;
  }
  .btn-menu {
    display:flex;
    right:10px;
  }
}

/*mobile nav*/
.mobile-nav {
  height:0px;
  margin-bottom:20px;
  opacity:0;
  transition: .6s;
  visibility:collapse;
}
.mobile-nav.open {
  display:none;
}
@media only screen and (max-width: 767px){
  .mobile-nav.open {
    display:block;
    height:266px;
    opacity:1;
    visibility: visible;
  }
}
.mobile-nav ul {
  background:#831ef5;
  border:3px solid white;
  list-style:none;
	margin:0;
	padding:10px 0 10px 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.mobile-nav ul li {
  display:block;
}
.mobile-nav ul li a {
  color:#ffffff;
	display:block;
	font-size:18px;
	font-weight:normal;
  line-height:60px;
  text-decoration: none;
  transition: .6s;
}
.mobile-nav ul li a:hover {
  font-size: 20px;
  font-weight:bold;
}

/*nav*/
.nav {
	margin:0 0 10px 0;
}
.nav ul {
	list-style:none;
	margin:0;
	padding:0px;
}
.nav ul li {
	float:left;
	height:auto;
	text-align:center;
	width:25%;
}
.nav ul li a {
  border:3px solid transparent;
	color:#ffffff;
	display:block;
	font-size:18px;
	font-weight:normal;
  line-height:40px;
	padding:10px 0px;
  text-decoration: none;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.65);
  transition: .6s;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.nav ul li a:hover {
	background:#831ef5;
  border-color:white;
	display:block;
	font-weight:bold;
  line-height:40px;
	text-decoration:none;
  text-shadow: none;
}
@media only screen and (max-width: 767px){
  .nav {
    display:none;
  }
}

/*containers*/
@media(min-width:960px){
  .container {
    max-width:960px;
  }
}
.main-body .container .inner {
  background: #f1f1f1 url(../img/coins.gif) repeat fixed;
  background-position-x: 0%;
  background-position-y: 0%;
  border: 3px solid #ffffff;
  color: #222222;
  margin: 0 auto;
  position: relative;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.main-body .container .inner .content {
  padding:20px;
}

/*content*/
h1 {
  color: #831ef5;
  font-size: 24px;
  font-weight:bold;
  line-height: 50px;
}
h2 {
  color: #831ef5;
  font-size: 24px;
  font-weight:bold;
  line-height: 50px;
}
.clear {
  clear: both;
}
.purple-bold {
  color: #831ef5;
  font-weight: bold;
}
.big {
  font-size:18px;
}
.fixed-100 {
  width:100px;
}
.fixed-120 {
  width:120px;
}
.fixed-150 {
  width:150px;
}
@media only screen and (max-width: 767px){
  .fixed-150 {
    margin-bottom:20px;
    text-align:center;
    width:100%;
  }
}
ul.scoring, ul.special-btns {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.scoring li {
  align-items: center;
  display:flex;
  height: 66px;
  justify-content: left;
}
ul.scoring li span,
ul.special-btns li span {
  color: #831ef5;
  display:inline;
  font-weight: bold;
  padding-right:5px;
}
ul.special-btns li {
  align-items: center;
  display:flex;
  height: 93px;
  justify-content: left;
}

/*footer*/
footer {
  color: #831ef5;
  line-height: 24px;
  margin: 20px 0 0 0;
  min-height: 40px;
  text-align: center;
  text-transform: none;
}
footer .footer-img {
  background: url(../img/footer-bg.png) top center no-repeat;
  height: 64px;
  margin-top: 20px;
}