* {
  box-sizing: border-box;
}
.logo{
		width: 20%;
		cursor: pointer;
		animation: movedown 1s linear 1;
		animation-delay: 1s;
		visibility: hidden;
		animation-fill-mode: forwards;
}
@keyframes movedown{
        0%{
		transform: translateY(-100px);
		visibility: visible;
        }
        100%{
		transform: translateY(0);
		visibility: visible;
	}
}
.menu {
  float: left;
  width: 15%;
  text-align: center;
  animation: moveright 1s linear 1;
  animation-delay: 2s;
  visibility: hidden;
  animation-fill-mode: forwards;
}
@keyframes moveright{
        0%{
		transform: translateX(-100px);
		visibility: visible;
        }
        100%{
		transform: translateX(0);
		visibility: visible;
	}
}
.menu a {
  background: linear-gradient(30deg, #2BB5FF, #ffffff, #2BB5FF);
  padding: 10px;
  margin-top: 5px;
  display: block;
  border-bottom-style:groove;
  border-radius: 8px;  
  text-decoration: none;
  width: 100%;
  color: black;
}
.menu a:hover{
               color: #333fff;
}
.main {
  float: left;
  width: 70%;
  padding: 5px;
}
.foto{
			max-width: 100%;
            height: auto;
            align: center;
            animation: zoomin 1s linear 1;
		    animation-delay: 3s;
		    visibility: hidden;
		    animation-fill-mode: forwards;
}
@keyframes zoomin{
        0%{
		transform: scale(0.5);
		visibility: visible;
        }
        100%{
		transform: translateX(1);
		visibility: visible;
	}
}
.right {
  float: left;
  width: 15%;
  text-align: center;
}
.right a {
  background: linear-gradient(40deg, #ffffff, #2BB5FF);
  padding: 7px;
  margin-top: 5px;
  display: block;
  border-bottom-style:groove;
  border-radius: 8px;
  text-decoration: none;
  width: 100%;
  color: #333fff;
}
.social{
  float: left;
  width: 15%;
  text-align: center;
  animation: moveleft 1s linear 1;
  animation-delay: 3s;
  visibility: hidden;
  animation-fill-mode: forwards;
}
@keyframes moveleft{
        0%{
		transform: translateX(100px);
		visibility: visible;
        }
        100%{
		transform: translateX(0);
		visibility: visible;
	}
}
.button {
  display: inline-block;
  padding: 10px;
  margin: 15px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #ffffff;
  background: linear-gradient(#2BB5FF, #ffffff, #2BB5FF);
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #f6f6f6;
}
.button:hover {
              background-color: #2BB5FF;
              color: #333333;              
}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 3px #666;
  transform: translateY(4px);
}
.pagina_jos{
          float: left;
          width: 100%;
          text-align: center;
          font-family: Times New Roman;
          color: #800000;
          font-size: smaller;          
}
.pagina_jos a{
        margin-top: 1%;
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-family: Times New Roman;
        color: #80476C;
}
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .social, .pagina_jos {
    width: 100%;
  }
}