*{
	margin:0;
	padding: 0;
}

body{
	margin:auto;
	text-align: center;
	color:white;
}

.bkground{
  width: 100%;
  height: 100%;
  background-image:url("../img/vestigeback.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

#content{
 padding-top: 15%;
}
img{
	padding:20px;
	border-bottom: 1px solid white;
}

h1{
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-size: 20px;
	padding:20px;
}
/*universal animation duration*/
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*how far does it move? from when its 0 - 100% opacity. 2 keyframes are 
necessary because 2 animatin-duration is called in class="animated"*/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
} 

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

/*call the fadeInDown elements to work with html*/
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}