html,
body {
    margin: 0;
    height: calc(70vh - 0.5em);
    background-color: #031634;
    color: white;
    font-family: 'Roboto', sans-serif;
}


.header {
    
    /* background-color: #031634; */
}
#slide 
{
    height: 50vh;
    background-color:#ccc;
    /* position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030; */
}

#slide > figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 50vh;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    /* z-index: 0; */
    margin:0;

  }

#slide > figure:nth-child(1) { background-image: url('/img/s1.jpg'); }

#slide > figure:nth-child(2) {
    animation-delay: 6s;
    background-image: url('/img/s2.jpg');
    background-position: center right;

  }
  
#slide > figure:nth-child(3) {
    animation-delay: 12s;
    background-image: url('/img/s3.jpg');
    background-position: center right;
  }
  
#slide > figure:nth-child(4) {
    animation-delay: 18s;
    background-image: url('/img/s4.jpg');
  }
  
#slide > figure:nth-child(5) {
    animation-delay: 24s;
    background-image: url('/img/s5.jpg');
  }

  @keyframes 
  imageAnimation {  0% {
   animation-timing-function: ease-in;
   opacity: 0;
  }
   8% {
   animation-timing-function: ease-out;
   opacity: 1;
  }
   17% {
   opacity: 1
  }
   25% {
   opacity: 0
  }
   100% {
   opacity: 0
  }
  }








#content {
    /* margin-top: calc(30vh + 0.5em); */
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto 20px auto;

}

.name {
    /* background-color: #036564; */
    /* text-align: center; */
    font-family: 'Epilogue', sans-serif;
}
.name h1{
        padding: .5em 0 .5em 0;

}

p,a,ul{
    color:white;
    font-size: 1.1em;
    line-height: 1.5em;
}

.links {
    padding: 0;
    margin:0;
}

.links li {
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
}

.links li.text:hover {
    color: #031634;
    background-color: white;
    transition: 0.5s;

}


.links li.text {
    border: 2px solid white;
    border-radius: 5px;
    padding: 0.5em;
    margin-bottom: 15px
}

.links li i.fab {
    font-size: 2em;
}

.links li a {
    text-decoration: none;
}


@media only screen and (min-width: 992px) {

    #slide 
    {
        height: 100vh;
        background-color:#ccc;
        position: fixed;
        top: 0;
        right: 0;
        left: 50%;
        z-index: 1030;
    }
    #slide > figure {

        height: 100vh;
    }

    #content {
        position:absolute;
        top: 0;
        width: calc(50vw - 100px);
        left: 0;
        padding-right: 50px;
        padding-left: 50px;
        margin-right: auto;
        margin-left: auto;

    }
    #slide > figure:nth-child(1) { background-image: url('/img/1.jpg'); }

#slide > figure:nth-child(2) {
    animation-delay: 6s;
    background-image: url('/img/2.jpg');
    background-position: center center;
  }
  
#slide > figure:nth-child(3) {
    animation-delay: 12s;
    background-image: url('/img/3.jpg');
  }
  
#slide > figure:nth-child(4) {
    animation-delay: 18s;
    background-image: url('/img/4.jpg');
  }
  
#slide > figure:nth-child(5) {
    animation-delay: 24s;
    background-image: url('/img/5.jpg');
    
  }
}