@font-face {
    font-family: "dosis-xb";
    src: url("../fonts/custom/Dosis-ExtraBold.ttf");
}
@font-face {
    font-family: "mavenpro-r";
    src: url("../fonts/custom/MavenPro-Regular.ttf");
}
@font-face {
    font-family: "mavenpro-b";
    src: url("../fonts/custom/MavenPro-Bold.ttf");
}
body{
    background-color: #bf9904 !important;
    font-family: "mavenpro-r";
}
a{
    color: white !important;
}
a:hover{
    text-decoration: none;
}
.navbar{
    font-size: 1.2em;
    font-family: "dosis-xb", sans-serif;
    letter-spacing: 0.1em;
}
.navbar-collapse {
    line-height: 0px;
    text-align:center;
}
.navbar-nav{
    display:inline-block;
    float:none;
}
.nav>li>a:focus, .nav>li>a:hover{
    text-decoration: none;
    background-color: #1e365c !important;
}
.icon-bar{
    background-color: white !important;
}
.konten{
    padding-top: 5vh;
    color: white;
}
.img-responsive{
    margin-top: 3vh;
    height: 55vmin;
}
.title{
    font-family: "mavenpro-b";
    font-size: 2.5em;
    margin-bottom: 7vh;
}
.desc{
    font-size: 1.2em;
}
#visitorcounter{
    display: inline-block;
    background-color: #781421;
    padding: 0.8em;
    font-family: "mavenpro-b";
    font-size: 1em;
    letter-spacing: 0.3em;

}
#namatitle{
    display: inline-block;
    background-color: #781421;
    padding: 2em;
    font-family: "mavenpro-b";
    font-size: 1em;
    letter-spacing: 0.3em;

}
#home{
    animation-name: fadein;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}
#home i{
    font-size: 3em;
}
@media (max-width: 767px){
    #home .desc > div, #KONTAK .container .col-xs-12{
        margin-bottom: 5vh;
    }
}
#KONTAK{
    background-color: #1e365c;
    text-align: center;
    overflow: hidden;
    margin-top: 5vh;
    padding-top: 5vh;
    padding-bottom: 10vh;
    animation-name: fadein;
    opacity: 0;
    animation-delay: 0.5s;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes fadein {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
#LOGIN{
    background-color: #bf9904 !important;
    text-align: center;
    overflow: hidden;
    margin-top: 5vh;
    padding-top: 5vh;
    padding-bottom: 1vh;
    animation-name: fadein;
    opacity: 0;
    animation-delay: 0.5s;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}