* {
	box-sizing: border-box;
}

body {
	background: url(./img/AnimaCosfest.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
    background-position: 50% 50%;
    overflow-x: hidden;
}
.pisca{
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(./img/AnimaCosfest-luz.png);
	top: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
    background-position: 50% 50%;
    left: 0;
    opacity: 0.5;
    z-index:1;
 	animation-name: logo;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}




main {
	position: relative
}



.menu .circulo{
	width: 500px;
	height: 500px;
	background-image: url(./img/circulo.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: auto auto !important;
	position: fixed;
	top: 50% !important;
	margin-top: -250px !important;
	left: 50% !important;
	margin-left: -248px !important;
	animation-name: rodar;
	animation-duration: 30s;
	animation-iteration-count: infinite;

}


@keyframes rodar {
	from{
		transform: rotate(-360deg);
	}

}




.slide1{
	width: 570px;
	height: 570px;
	background-image: url(./postes/slide1.png) !important;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: auto auto !important;
	position: fixed;
	top: 50% !important;
	margin-top: -270px !important;
	left: 50% !important;
	margin-left: -270px !important;
	z-index: 120;
	transition: 0.5s;
}

.slide2{
	width: 415px;
	height: 470px;
	background-image: url(./postes/slide2.png) !important;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: auto auto !important;
	position: fixed;
	top: 50% !important;
	margin-top: -245px !important;
	left: 50% !important;
	margin-left: -195px !important;
	z-index: 120;
	transition: 0.5s;
}

.slide3{
	width: 600px;
	height: 600px;
	background-image: url(./postes/slide3.png) !important;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: auto auto !important;
	position: fixed;
	top: 50% !important;
	margin-top: -330px !important;
	left: 50% !important;
	margin-left: -320px !important;
	z-index: 120;
	transition: 0.5s;
}
.slide4{
	width: 573px;
	height: 500px;
	background-image: url(./postes/slide4.png) !important;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: auto auto !important;
	position: fixed;
	top: 50% !important;
	margin-top: -240px !important;
	left: 50% !important;
	margin-left: -270px !important;
	z-index: 120;
	transition: 0.5s;
}
.slide5{
	width: 460px;
	height: 480px;
	background-image: url(./postes/slide5.png) !important;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: auto auto !important;
	position: fixed;
	top: 50% !important;
	margin-top: -260px !important;
	left: 50% !important;
	margin-left: -250px !important;
	z-index: 120;
	transition: 0.5s;
}



.btn1{
	width: 100px;
	height: 100px;
	position: fixed;
	left: 50% !important;
	margin-left: -370px;
	top: 50% !important;
	margin-top: -50px !important;
	background-image: url(./img/Arrow2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0.8;
	z-index: 200;
	cursor: pointer;
	transition: 0.2s;
}
.btn1:hover{
	opacity: 1 !important;
	margin-left: -375px;
}

.btn2{
	width: 100px;
	height: 100px;
	position: fixed;
	left: 50% !important;
	margin-left: 270px;
	top: 50% !important;
	margin-top: -50px !important;
	background-image: url(./img/Arrow.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0.8;
	z-index: 200;
	cursor: pointer;
	transition: 0.2s;
}
.btn2:hover{
	opacity: 1 !important;
	margin-left:  275px;
}




@keyframes logo {
	0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }

}