body {
	background: #24D1C4;
	color: #fff;
	font-weight: 300;
	height:100%;
	overflow-y: scroll;
	overflow-x: hidden;
	text-align:center;
	font-size: 100%;
	font-family: 'Open Sans', sans-serif;
}
h1{
	font-family: 'Oswald', sans-serif;}
h2{
margin-top:30px;}
.top-side {
	width:100%;
	position:absolute;
	top:0;
	height:50%;
	background:#24D1C4;
	right:0;
	border-bottom:1px solid #fff;
}
.content {
	position:relative;
	top:25%;
}
.bottom-side {
	width:100%;
	position:absolute;
	bottom:0;
	height:50%;
	background:#292929;
	left:0;
}
.left-box {
	width:50%;
	position:absolute;
	height:100%;
	left:0;
	top:0;
	overflow:hidden;
}
.right-box {
	width:50%;
	position:absolute;
	height:100%;
	right:0;
	bottom:0;
	overflow:hidden;

}
.bg {
	width:100%;
	position:absolute;
	height:100%;
	left:0;
	bottom:0;
	z-index:3;
	background-size: cover;
	background-attachment: scroll;
	background-position: center;
	background-repeat:no-repeat;
}
.right-box a , .left-box a {
	font-size:12px;
	color:#fff;
	z-index:5;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	box-sizing: content-box;
	z-index:20;
}
.left-box {
	border-right:1px solid #fff;
}
.right-box a span, .left-box a span {
	position:relative;
	top:50%;
} 
.overlay {
	width:100%;
	position:absolute;
	height:100%;
	left:0;
	top:0;
	opacity:1;
	background:#292929;
	z-index:4;
}
.right-box:hover span.overlay  , .left-box:hover span.overlay{
	opacity:0.8;
}


.transition{
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.img-rotade{
	-webkit-animation: spinAround 42s linear infinite;
	-moz-animation: spinAround 42s linear infinite;
	animation: spinAround 42s linear infinite;
}
@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform:scale(5.0) rotate(60deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: scale(5.0) rotate(60deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: scale(5.0) rotate(60deg);
	}
}
.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	   -moz-animation-duration: 2s;
	     -o-animation-duration: 2s;
	        animation-duration: 2s;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }  
    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInY;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInY;
	backface-visibility: visible !important;
	animation-name: flipInY;
}
@media only screen and  (max-width: 767px) {
.left-box , .right-box  {
	width:100%;
	position:relative;
	padding:80px 0;
	float:left;
}

}
@media only screen and  (max-width: 540px) {

	

}