@charset "utf-8";
/* CSS Document - Vallsan Design */
html, body {
	height: 100%;
	height: 100%;
}
body {
	background:url(../Batista/img/background10.jpg) repeat;
	font: 11px arial;
	color: #fff;
	margin: 0;
	padding: 0;
}

.fullscreen-bg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: -100;
}
.fullscreen-bg__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.show hover {
	z-index: 9999;
}
.show {
	outline: none;
	position: inherit;
	margin: 0 auto;
	text-align: center;
	background-size: cover;
	width: 29.99999%;
	height: 35%;
	padding: 0 6px;
}
.show1 {
	-webkit-animation-name: show1; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
	animation-name: show1;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

 @-webkit-keyframes show1 {
 0% {
top: 0;
left: 0;
}
 100% {
top: 20%;
left: 35%px;
}
}
@keyframes show1 {
 0% {
top: 0;
left: 0;
}
 100% {
top: 20%;
left: 35%;
}
}
.show2 {
	-webkit-animation-name: show2; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	animation-name: show2;
	animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
 @-webkit-keyframes show2 {
 0% {
top: 0;
right: 0;
}
 100% {
top: 10%;
right: 15%;
}
}
@keyframes show2 {
 0% {
top: 0px;
right: 0px;
}
 100% {
top: 10%;
right:15%;
}
}
.show3 {
	-webkit-animation-name: show3; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	animation-name: show3;
	animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
 @-webkit-keyframes show3 {
 0% {
bottom: 0;
left: 0;
}
 100% {
bottom: 10%;
left: 15%;
}
}
@keyframes show3 {
 0% {
bottom: 0;
left: 0;
}
 100% {
bottom: 10%;
left: 15%;
}
}
.show4 {
	-webkit-animation-name: show4; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	animation-name: show4;
	animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
 @-webkit-keyframes show4 {
 0% {
bottom: 0;
right: 0;
}
 100% {
bottom: 10%;
right:15%;
}
}
@keyframes show4 {
 0% {
bottom: 0;
right: 0;
}
 100% {
bottom: 10%;
right: 15%;
}
}
.container {
	position: absolute;
	/*background:url(images/kidBack1.jpg) repeat;*/
	width: 100%;
	height: 100%;
}
.content {
	position: absolute;
 display: inline-block  text-align: center;
	top: 0;
	left: 50%;
	width: 900px;
	height: 100%;
 margin 0 auto;
	transform: translateX(-50%);
}
 @-webkit-keyframes fadeIn {
from {
opacity:0;
}
to {
	opacity: 1;
}
}
 @keyframes fadeIn {
from {
opacity:0;
}
to {
	opacity: 1;
}
}
.fade-in {
	opacity: 0;  /* make things invisible upon start */
	-webkit-animation: fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	-webkit-animation-fill-mode: forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
}
.fade-in.one {
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.fade-in.two {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.fade-in.three {
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
.fade-in.four {
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
	animation-delay: 2.5s;
}
div.img {
	outline: none;
	border-color: 0px #9ecaed;
}
div.img {
	transition: all .2s ease-in-out;
}
div.img:hover {
	transform: scale(1.3);
	border: 2px solid #9ecaed;
	border-color: #9ecaed;
	box-shadow: 0 0 80px #9ecaed;
}
div.img img {
	height: 22%;
	width: 100%;
	padding: 6px auto;
}
div.desc {
	padding: 10px;
	font-size:16px;
	text-align: center;
}
* {
	box-sizing: border-box;
}
 @media only screen and (max-width: 1024px) {
.content {
	width: 90%;
}
div.img img {
	width: 80%;
	height: auto;
}
div.desc {
	padding: 0;
}
}
 @media only screen and (max-width: 700px) {
.content {
	width: 100%;
}
div.img img {
	width: 100%;
	height: auto;
}
}
 @media only screen and (max-width: 500px) {
div.desc {
	padding: 15px;
	font-size: smaller;
}
div.img img {
	width: 100%;
	height: auto;
}
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
/* video*/

.fullscreen-bg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: -100;
}
.fullscreen-bg__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

}


 @media (max-width: 767px) {
}