@-webkit-keyframes fade-up{
    0%{opacity:0; transform:translate(0,10%);}
    30%{opacity:1};
    100%{opacity:0; transform:translate(0%,0);}
    }

@keyframes fade-up{
    0%{opacity:0; transform:translate(0,10%);}
    30%{opacity:1};
    100%{opacity:0; transform:translate(0%,0);}
    }

@-webkit-keyframes fade{
    0%{opacity:0;}
    100%{opacity:1;}
    }
    
@keyframes fade{
    0%{opacity:0;}
    100%{opacity:1;}
}

body {
	text-align: center; 
	padding: 0;     
    margin: 0;    
    background: #325347;
    font-family: "forevs", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:18px;
}

body.brand {
    background:#325347;
    position:relative;
}

body:before {
    content:'';
    width:100%;
    background-image:url('../images/frame-top-artboard.svg');
    position: absolute;
    top:0; 
    left:0;right:0;
    height:50%;
    background-size:cover;
    background-position:top center;
    pointer-events: none;
    -webkit-animation:fade 2s ease;
    animation:fade 2s ease;
}

body:after {
    content:'';
    width:100%;
    background-image:url('../images/frame-bottom-artboard.svg');
    position: absolute;
    bottom:0; 
    left:0;
    right:0;
    height:50%;
    background-size:cover;
    background-position:bottom center;
    pointer-events: none;
    -webkit-animation:fade 2s ease;
    animation:fade 2s ease;
}


.header {
    z-index:100;
    position: relative;
}

.content{ 
    color:#ffffff;
    max-width:90vw;
    margin: 0 auto;
    padding-top:20px;
}

h1 {
    font-family: "brim-narrow-combined-1", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}
h1 span {
    font-size: 2.8rem;
    color: #bb9e79;
    padding-bottom: 5px;
    display: block;
}

p {
    font-family: "forevs", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
}

p strong {
    font-weight: 500;
}


.logo {
    max-width:70vw;
    height:auto;
    margin:0 auto;
    padding-top:10vh;
    display: block;
    -webkit-animation:fade-up 4s ease;
    animation:fade-up 4s ease;
}


.navbar-brand{
    transform:translate(0,0);
    transition:2s transform ease;
    transition-delay:0.5s;
    z-index:10;
    position:relative;
    background:#01a1db;
    color:#ffffff;
    padding:30px;
}

.btn {
    padding:20px 30px; 
    background:#fff;
    color:#313131;
    text-align: center;
    transition:0.3s ease all;
    text-decoration:none;
    border-radius:4px;
    margin:5px auto;
    display: inline-block;
}
.btn:hover {
    background:#313131;
    color:#fff;
}

p a {
    color:#ffffff;
    display:inline-block;
    border-bottom:2px solid #01a1db; 
}

.footer {
    position:relative;
    z-index:100;
}

.footer p {
    margin-top:20vh;
    padding-bottom:30px;
    color:#ffffff;
    font-size:1rem;
    font-family: arial, sans-serif;
}
@media (min-width: 768px) {
    .logo {
        max-width:60vw;
    }
    .content{
        max-width:70vw;
    }
    .seperator-line {
        width:70%;
        margin:0 auto;
    }
}

@media (min-width: 1200px) {
    .logo {
        max-width:40vw;
    }
    .content{
        max-width:50vw;
    }
}