body{
    font-family: "Roboto", sans-serif;
    background-size: cover;
    background-color: #0D1821;
}

.epk-banner{
    background: url(../img/epkbannermobile.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.epk-inner-banner img{
    width: 90%;
    display: block;
    margin: 0 auto;
    padding: 3rem 0 0 0;
}

.epk-nav-inner{
    display: flex;
    justify-content: center;
    align-items: center;
}

.epk-nav-inner a{
    padding: 2rem 0.5rem 0 0.5rem;
    font-size: 2rem;
    color: #66001e;
}

.epk-inner-banner a:hover{
    color: #218380;
}

.email{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 0 0;
    text-decoration: none;
}

.location{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 5rem 0;
}

.email p,
.location p{
    font-size: 1rem;
    color: #66001e;
    font-weight: bold;
    padding: 0 0.2rem;
}


.email i,
.location i{
    font-size: 1rem;
    padding: 0.5rem;
    margin: 0 0.2rem;
    background: #66001e;
    border-radius: 200px;
    color: white;
}

.epk-links{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: #0D1821;
    position: relative;
}

.epk-links a,
.epk-links button{
    display: inline-block;
    border-radius: 10px;
    text-decoration: none;
    background: transparent;
    color: white;
    border: 2px solid white;
    width: 90%;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: inset 0 0 0 0 #66001e;
    margin: 2rem -.25rem;
    padding: 1rem 0rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    z-index: 10;
}

.epk-links a:hover,
.epk-links button:hover{
    border: 2px solid #66001e;
    box-shadow: inset 1000px 0 0 0 #66001e;
    color: white;
}

.bio{
    background-color: #0D1821;
    font-size: 1rem;
    line-height: 1.5;
    padding: 2rem 0;
}

.bio h1{
    font-family: "talon", sans-serif;
    text-align: center;
    font-size: 6rem;
    line-height: 1;
    color: #AFBCDA;
}

.bio p{
    width: 90%;
    margin: 0 auto;
    padding: 1rem;
    color: white;
    z-index: 99;
}

svg {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 436px;
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s linear ;
	        animation: bounce-in-top 1.1s linear ;
}

@media only screen and (min-width: 768px) {
    .epk-banner{
        background: url(../img/epkbanner.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .epk-inner-banner img{
        width: 50%;
    }

    .epk-links{
        flex-direction: row;
        padding: 2rem 1rem;
        background: #0D1821;
        position: relative;
    }

    .epk-links a,
    .epk-links button{
        width: 30%;
        font-size: 1.2rem;
        margin: 2rem 1rem;
        padding: 1rem 0rem;
    }

    svg {
        height: 186px;
    }

}

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

    .epk-inner-banner img{
        width: 40%;
        padding: 3rem 0 0 0;
    }

    .epk-nav-inner a{
        padding: 1rem 0.5rem 0 0.5rem;
    }

    .location{
        padding: 0 0 2rem 0;
    }
}

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

    .epk-inner-banner img{
        width: 30%;
        padding: 3rem 0 0 0;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2025-6-18 15:15:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}