body:before {
	content:"";
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1; 
	background:#0f6106;
	background: linear-gradient(to bottom, #000, #22c910 ) ;
}

#logo{
	float:left;
	margin:auto;
	padding-left:50px;
}

.half-block{
	background-color: #292f33;
	border-radius:10px;
	color:#fff;
	float:left;
	margin:15px 2%;
	padding:5px 20px;
	position:relative;
	width:42%;
	z-index:20;
}
@media (max-width: 1000px) {
	.half-block {
		width: 90%;
	}
}

.block{
	background-color: #292f33;
	border-radius: 10px;
	color: #fff;
	margin: 25px auto;
	padding: 5px 20px;
	position: relative;
	width: 90%;
	z-index: 20;
}

.center{
	margin:auto;
	text-align: center;
}

.greyscale{
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.green{ background-color:#00ff00;}
.dark_green{ background-color:#096409;}
.lemon{ background-color:#D0FA58;}
.yellow{ background-color:#F7FE2E;}
.orange{ background-color:#FE9A2E;}
.red{ background-color:#FF0000;}
.dark_red{ background-color:#a70606;}
.blue{ background-color:#0030ff;}
.dark_blue{ background-color:#100a9b;}
.teal{ background-color:#58F4FA;}
.purple{ background-color:#7d0db0;}
.grey{ background-color:#999999;}

a{
	font-weight: bold;
	text-decoration:none;
	color: #00ccff !important
}

a:hover{
	color: #00ccff !important
	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

.clearfix{
	clear:both;
}

.social{
	width:80%;
	clear:both;
	position:relative;
	z-index:100;
}

.social-block{
	float:right;
	margin: 0 30px;
}


/*---- background smoke ----*/
#playground {
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
}

.smoke {
	bottom: -200px;
	background: url(./images/Smoke10.png) transparent no-repeat 0 0;
	height: 200px;
	width: 200px;
	position: absolute;
	margin: -100px 0 0 -100px;
	background-size: contain;
	opacity: 0;
	animation-name: smoking;
	animation-duration: 4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

@keyframes smoking {
  0% {
	opacity: 0.1;
	bottom: -200px;
	transform: scale(1) rotateZ(0);
  }
  20% {
	opacity: 1;
  }
  90% {
	bottom: 65%;
	opacity: 0.8;
	transform: scale(2.7) rotateZ(18deg);
  }
  100% {
	bottom: 70%;
	opacity: 0;
	transform: scale(3) rotateZ(20deg);
  }
}



/*---- carousel ----*/
.carousel-wrapper {
	overflow: hidden;
	width: 80%;
	position:relative;
	margin:auto;
	padding-bottom:50px;
	z-index: 10;
}

.carousel-wrapper * {
	box-sizing: border-box;
}

.carousel {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.carousel__photo {
	opacity: 0;
	position: absolute;
	top:0;
	width: 100%;
	margin: auto;
	padding: 1rem 4rem;
	z-index: 100;
	transition: transform .5s, opacity .5s, z-index .5s;
}

.carousel__photo.initial, .carousel__photo.active{
	opacity: 1;
	position: relative;
	z-index: 900;
}

.carousel__photo.prev, .carousel__photo.next {
	z-index: 800;
}

.carousel__photo.prev {
	transform: matrix(0,0,0,0,-100%,-50%);
}

.carousel__photo.next {
	transform: matrix(0,0,0,0,-100%,-50%);
}

.carousel__button--prev, .carousel__button--next {
	display: none;
	position: absolute;
	top:50%;
	width: 3rem;
	height: 3rem;
	background-color: #FFF;
	transform: translateY(-50%);
	border-radius: 50%;
	cursor: pointer; 
	z-index: 1001;
	border:1px solid black;
}

.carousel__button--prev {
	left:0;
}

.carousel__button--next {
	right:0;
}

.carousel__button--prev::after, .carousel__button--next::after {
	content: " ";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 50%;
	left: 54%;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	transform: translate(-50%, -50%) rotate(135deg);
}

.carousel__button--next::after {
	left: 47%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes moveSlideshow {
	100% { 
		transform: translateY(100%);  
	}
}


/*---- Slider ----*/
.tech-slideshow {
	display:none;
	height: 100%;
	overflow: hidden;
	position: fixed;
	right: 0;
	transform: translate3d(0, 0, 0);
	top:0;
	width:15%;
}

.tech-slideshow > div {
	width: 300px;
	background: url(http://maddcow.com/themes/business/logo.png);
	position: absolute;
	top: 0;
	height: 100%;
	background-repeat: repeat-y;
	background-size: 50%;
	transform: translate3d(0, 0, 0);
}

.tech-slideshow .mover-1 {
	top: -100%;
	animation: moveSlideshow 10s linear infinite;
}

.tech-slideshow .mover-2 {
	animation: moveSlideshow 10s linear infinite;
}


/*---- menu ----*/
.hamburger {
	display: inline-block;
	margin-left: 1rem;
	z-index:10;
}

.hamburger a {
	text-decoration: none;
	color: #7f8c8d;
	font-size: 36px;
}

.menuWrapper{
	position:relative;
	z-index:10;
}

#mobileMenu {
	display: none;
	width: 96%;
	z-index:10;
}

#mobileMenu ul {
	list-style-type: none;
	padding-left: 20px;
}

#mobileMenu li {
	padding: 4px 0 4px 0;
	border-bottom: 1px solid #7f8c8d;
}

#mobileMenu a {
	text-decoration: none;
	text-transform: uppercase;
	color: #7f8c8d;
}

@media (min-width: 641px) {
	.hamburger,
	#mobileMenu {
		display: none !important;
	}

	ul.menu {
		float: right;
		margin-right: 10%;
	}
	.menu li {
		float: left;
	}
	.menu li a {
		text-decoration: none;
		padding: 0 15px;
		color: #7f8c8d;
		text-transform: uppercase;
		border-right: solid 1px gray;
	}
	.menu li:last-child {
		border-right: none;
	}
}

@media (max-width: 640px) {
	.menu {
		display: none;
	}
}

.gamehides, .legalhides{

    display:none;
	position:absolute;
	margin:30px;
}

#mobileMenu .gamehides, #mobileMenu .legalhides{
	position:relative;
}

ul ul li{
	font-size: 0.75em;
	list-style:none;
}

.menu {
	list-style-type: none;
}