@keyframes imgFadeAni {
    0% {
        opacity: 1;
    }

    9% {
        opacity: 1;
    }

    11% {
        opacity: 0;
    }

    98% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

a{
    color: white;
}

body,
html {
    padding: 0;
    margin: 0;
    height: 100%;
    text-align: center;
}

.content {
    height: 100%;
}

.infoContent {
    height: 100%;
    width: 25%;
    float: right;
    padding-right: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
    align-content: center;
    color: white;

}

#profileImg {
    max-width: 300px;
    width: 100%;
    border-radius: 50%;

}

.slideShowContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
}

.slideShowContainer img {
    position: absolute;
    left: 0;
    height: 100%;
    width: 60%;
    object-fit: cover;
    filter: grayscale();


    -webkit-animation-name: imgFadeAni;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 54s;

    -moz-animation-name: imgFadeAni;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 54s;

    -o-animation-name: imgFadeAni;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 54s;

    animation-name: imgFadeAni;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 54s;

}

.slideShowContainer img:nth-of-type(1) {
    animation-delay: 48s;
}

.slideShowContainer img:nth-of-type(2) {
    animation-delay: 42s;
}

.slideShowContainer img:nth-of-type(3) {
    animation-delay: 36s;
}

.slideShowContainer img:nth-of-type(4) {
    animation-delay: 30s;
}

.slideShowContainer img:nth-of-type(5) {
    animation-delay: 24s;
}

.slideShowContainer img:nth-of-type(6) {
    animation-delay: 18s;
}

.slideShowContainer img:nth-of-type(7) {
    animation-delay: 12s;
}

.slideShowContainer img:nth-of-type(8) {
    animation-delay: 6s;
}

.slideShowContainer img:nth-of-type(9) {
    animation-delay: 0s;
}

.shapelyBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    background: black;
    z-index: -1;
    clip-path: polygon(100% 0, 100% 100%, 40% 100%, 60% 0%);

}

.button {
   border-top: 1px solid #000000;
   background: #9c9c9c;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#9c9c9c));
   background: -webkit-linear-gradient(top, #ffffff, #9c9c9c);
   background: -moz-linear-gradient(top, #ffffff, #9c9c9c);
   background: -ms-linear-gradient(top, #ffffff, #9c9c9c);
   background: -o-linear-gradient(top, #ffffff, #9c9c9c);
   padding: 7.5px 15px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 17px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }