/*links*/
a{
	background-color: white;
	transition: background-color 2s ease-in-out;
	
	&:link{
		text-decoration: none;
		color:black;
		box-shadow: 0 0 0 0 white;
	}
	&:visited{
		text-decoration:none;
		color:black;
	}
	&:hover{
		text-decoration:none;
		color:white;
		background-color: black;
		transition: all 0.5s;
		transform: rotate(-3deg) scale(1.1);
		box-shadow:0px 3px 5px rgba(0,0,0,0.4);
	}
	&:active{
		text-decoration:noene;
		color:black;
	}
}


/*menu*/
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
.links
{
	background-color:white;
	display:block;
	padding:8px;
}
li
{
	display:inline;
	float:left;
}
.centralizador{
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertical */
    height: 100vh;           /* ocupa toda la pantalla */
}
.galeria {
	display: flex;
    overflow: hidden;
    width: 100%;
    height: 200px;
	
	& img {
	margin-right: 10px;
    animation: mover 15s linear infinite;
	}
}



    @keyframes mover {
      0% {
        transform: translateX(900%);
      }
      100% {
		transform: translateX(-900%);
      }
	}

/*animación de imagen principal de la pagina con iframe*/
.anImg{
	animation: img 15s linear infinite;
}

@keyframes img {
	0%{transform:rotateX(0deg);}
	50%{transform:rotateX(360deg);}
	51%{transform:rotateX(0deg);}
	100%{transform:rotateX(0deg);}
}








/*botones secundarios de la pagina*/
.button{
  background-color: darkgray;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 22px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow:5px 5px 10px rgba(0,0,0, 0.3);
  width:350px;
  height:50px;
  overflow: hidden;
  transition: all 0.5s;
  position: relative;
  
	&:focus{
		box-shadow:0px 0px 4px rgba(0,0,0, 0.2);
		transform:translateY(4px);

	}

	&:hover{
		transition: all 0.5s;
		transform: rotate(-3deg) scale(1.1);
		box-shadow:0px 3px 5px rgba(0,0,0,0.4);
	
	
	}
	& span{
		position: relative;
		display:block;
	}

	& span:nth-child(1){
		height:3px;
		width: 350px;
		top: -40px;
		left:-3000px;
		background: linear-gradient(to right, rgba(0,0,0,0), black);
		border-top-right-radius: 1px;
		border-bottom-right-radius: 1px;
		animation: span1 2s linear infinite;
		animation-delay: 1s;
	}

	& span:nth-child(2){
		height:50px;
		width: 3px;
		top: -100px;
		right:  -378px;
		background: linear-gradient(to bottom, rgba(0,0,0,0), black);
		border-bottom-left-radius: 1px;
		border-bottom-right-radius: 1px;
		animation: span2 2s linear infinite;
		animation-delay: 2s;
	}
	

}

@keyframes span1{
	0%{
		left:-3000px;
	}
	100%{
		left: 3000px;
	}
}
@keyframes span2{
	0%{
		top:-100px;
	}
	100%{
		top: 100px;
	}
}






















/*botton con luces circulares*/

.wrapper{
	position: absolute;
	transform: translate(0%, 50%);
	width: fit-content;
	height: auto;	
}
.superButton{
	width:200px;
	height:70px;
	background: linear-gradient(to left top, black 50%, grey 50%);
	border-style: none;
	color: white;
	font-size: 23px;
	font-family: 'Lato';
	font-weight: 600;
	outline: none;
	position: relative;
	padding: 0px;
	overflow: hidden;
	transition: all 0.5s;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
	
	& span{
		position: absolute;
		display: block;
	}
	& span:nth-child(1){
		height:3px;
		width: 200px;
		top: 0px;
		left:-200px;
		background: linear-gradient(to right, rgba(0,0,0,0), yellow);
		border-top-right-radius: 1px;
		border-bottom-right-radius: 1px;
		animation: span1 2s linear infinite;
		animation-delay: 1s;		
	}
	
	& span:nth-child(2){
			height:70px;
		width: 3px;
		top: -70px;
		right: 0px;
		background: linear-gradient(to bottom, rgba(0,0,0,0), yellow);
		border-bottom-left-radius: 1px;
		border-bottom-right-radius: 1px;
		animation: span2 2s linear infinite;
		animation-delay: 2s;
	}
	
	& span:nth-child(3){
		height:3px;
		width: 200px;
		right: -200px;
		bottom: 0px;
		background: linear-gradient(to bottom, rgba(0,0,0,0), yellow);
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		animation: span3 2s linear infinite;
		animation-delay: 3s;
	}
	& span:nth-child(4){
		height: 70px;
		width: 3px;
		left:  0px;
		bottom: -70px;
		background: linear-gradient(to top, rgba(0,0,0,0), yellow);
		border-top-right-radius: 1px;
		border-top-left-radius: 1px;
		animation: span4 2s linear infinite;
		animation-delay: 4s;
	}
}

@keyframes span1{
	0%{
		left:-200px;
	}
	100%{
		left:200px;
	}
}

@keyframes span2{
	0%{
		top:-70px;
	}
	100%{
		top:70px;
	}
}

@keyframes span3{
	0%{
		right:-200px;
	}
	100%{
		right:200px;
	}
}

@keyframes span4{
	0%{
		bottom:-70px;
	}
	100%{
		bottom: 70px;
	}
}