@font-face {
    font-family:GothamRounded; src:url('fonts/GothamRounded-Medium.otf');
}
@font-face {
    font-family:GothamRoundedLight; src:url('fonts/GothamRounded-Light.otf');
}
html, body {
    font-size:10px; margin:0 0 auto !important;
}
body {
    position:relative !important;
}
.btntop{
    display:none; position:fixed; bottom:1.4rem; right:1.4rem; z-index:100; border:.2rem solid transparent; border-radius:.8rem; color:white;  
    background-color:rgb(100,128,186); padding:.4rem 1rem !important; box-shadow:.2rem .4rem .9rem rgba(100,128,186,0.5); transition:.2s all;
}
.btntop:hover, .btntop:focus {
    background-color:white; border:.2rem solid rgb(100,128,186); color:rgb(100,128,186); box-shadow:none; outline:none; transition:.2s all;
}

/* --NAVBAR-- */
.navbar {
    background-color:white; padding:1.4rem; z-index:100 !important; transition:.2s all;
}
.navbar.fixed {
    background-color:rgb(100,128,186); box-shadow:0rem 1rem 1.1rem rgba(90,117,172,0.4); transition:.2s all;
}
.nav-item {
    padding:.8rem 2rem; margin-right:.4rem; border-radius:2.4rem; transition:.2s all; 
}
.nav-link {
    color:rgb(100,128,186); font:500 1.6rem 'GothamRounded'; letter-spacing:.06rem; text-decoration:none; text-align:center;
}
.navbar.fixed .nav-link, .award h2, .konten5 h2, .konten5 h5, .form-control::placeholder {
    color:white;
}
.nav-item:hover, .active {
    background-color:rgb(100,128,186); transition:.2s all;
}
.nav-item:hover .nav-link, .active .nav-link {
    color:white; transition:.2s all;
}
.navbar.fixed .nav-item:hover, .navbar.fixed .active { 
    background-color:white; transition:.2s all;
}
.navbar.fixed .nav-item:hover .nav-link, .navbar.fixed .active .nav-link {
    color:rgb(100,128,186) !important; transition:.2s all;
}
.toggler, .toggler2, .icon-bar {
     display:none;
}

/* --HEADER-- */
.header, .konten1, .konten2, .konten3, .konten4, .konten5 {
    border-radius:0; background-color:white; background-size:cover; padding-top:8.6rem;
}
.profil {
    width:100%; float:right;
}
.header h1 {
    margin-top:30%;
}
.header h3 {
    margin-top:-1rem; margin-bottom:-.6rem;
}
.kontak {
    width:4rem; height:4rem; margin:0rem .2rem; border-radius:50%; box-shadow:.2rem .4rem .9rem rgba(90,117,172,0.4); background-color:rgb(100,128,186); transition:.2s all;
}
a:nth-child(4) .kontak:hover {
    background-color:rgb(37,211,102); box-shadow:none; transition:.2s all;
}
a:nth-child(5) .kontak:hover {
    background-color:rgb(187,0,27); box-shadow:none; transition:.2s all;
}
a:nth-child(6) .kontak:hover {
    background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow:none; transition:.2s all;
}
a:nth-child(7) .kontak:hover {
    background-color:rgb(14,118,168); box-shadow:none; transition:.2s all;
}
a:nth-child(8) .kontak:hover {
    background-color:rgb(33,31,31); box-shadow:none; transition:.2s all;
}

/* --ABOUT-- */
table tr td {
    font:normal 1.6rem/2.4rem 'GothamRoundedLight'; color:rgb(18,18,18); letter-spacing:.06rem;
}
.btndownload {
    background-color:rgb(100,128,186); border:.2rem solid transparent; padding:1.4rem 2rem; 
    border-radius:3.4rem; box-shadow:.2rem .4rem .9rem rgba(90,117,172,0.4); transition:.2s all;
}
.btndownload a {
    font:normal 1.6rem 'GothamRounded'; color:white; text-decoration:none;
}
.btndownload:hover, .btndownload:focus {
    outline:none !important; background-color:transparent; border:.2rem solid rgb(100,128,186); box-shadow:none;  transition:.2s all;
}
.btndownload:hover a, .btndownload:focus a {
    color:rgb(100,128,186);
}
.konten1 img {
    width:100%;
}
.konten1 a, .konten4 a {
    text-decoration:none;
}

/* --EDUCATION & SKILLS-- */
.timeline {
    position:relative; margin:4rem auto; padding:2rem 0;
}
.timeline::before {
    content:''; position:absolute; left:50%; width:.2rem; height:85%; background:rgb(18,18,18);
}
.timeline ul {
    margin:0; padding:0;
}
.timeline ul li {
    list-style:none; position:relative; width:50%; padding:2rem 4rem;
}
.timeline ul li:nth-child(odd) {
    float:left; text-align:right; clear:both;
}
.timeline ul li:nth-child(even) {
    float:right; text-align:left; clear:both;
}
.content {
    padding-bottom:2rem;
}
.timeline ul li:nth-child(odd):before {
    content:''; position:absolute; top:2.4rem; right:-0.6rem; width:1rem; height:1rem; background:rgb(18,18,18); border-radius:50%; box-shadow:0 0 0 .4rem rgba(156,156,156,0.2)
}
.timeline ul li:nth-child(even):before {
    content:''; position:absolute; top:2.4rem; left:-0.4rem; width:1rem; height:1rem; background:rgb(18,18,18); border-radius:50%; box-shadow:0 0 0 .4rem rgba(156,156,156,0.2)
}
.timeline ul li h5 {
    margin:0; padding:0;
}
.timeline ul li .time h5 {
    margin:0; padding:0; color:white;
}
.timeline ul li:nth-child(odd) .time, .timeline ul li:nth-child(even) .time {
    position:absolute; top:1.2rem; margin:0; padding:.8rem 1.6rem; background-color:rgb(100,128,186); 
    color:white !important; box-shadow:0 0 0 .4rem rgba(156,156,156,0.4);
} 
.timeline ul li:nth-child(odd) .time {
    right:-16.5rem; border-radius:0rem 2.4rem 2.4rem 0rem;
}
.timeline ul li:nth-child(even) .time {
    left:-16.5rem; border-radius:2.4rem 0rem 0rem 2.4rem;
}
.box {
    width:100%; background-color:rgb(230,230,230); border-radius:.4rem !important;
}
.skill {
    color:white; margin-bottom:1.2rem; border-radius:.4rem;
}
.ket {
    padding-left:1rem; padding-top:.6rem; padding-bottom:.6rem; border-radius:.4rem 0rem 0rem .4rem;
}
.html {width: 90%; background-color: rgb(233,104,21);}
.php {width: 75%; background-color: rgb(100,130,221);}
.js {width: 70%; background-color: rgb(251,222,28);}
.ci {width: 85%; background-color: rgb(190,78,6);}
.pr {width: 85%; background-color: rgb(201,62,146);}
.ps {width: 80%; background-color: rgb(14,157,210);}
.ae {width: 70%; background-color: rgb(134,29,93);}

/* --AWARD & EXPERIENCE-- */
.award {
    padding:3.8rem; background-color:rgb(100,128,186); border-radius:2.8rem; border:none;
}
.award ul li {
    font:normal 1.6rem/2.4rem 'GothamRoundedLight'; color:white; letter-spacing:.06rem; margin-left:-2rem;
}

/* --PORTFOLIO-- */
.konten4 .card {
    border:none; box-shadow:.5rem .9rem 4.6rem rgb(235,235,235); border-radius:1.2rem; margin-bottom:3.4rem; transition:.2s all;
}
.card-img-top {
    border-radius:1.2rem 1.2rem 0rem 0rem;
}
.konten4 .card h4 a {
    color:rgb(18,18,18); transition:.2s all;
}
.konten4 .card h4 a:hover {
    color:rgb(100,128,186); transition:.2s all;
}

/* --CONTACT-- */
.konten5 {
    background-color:rgb(100,128,186);
}
.form-control {
    margin-bottom:2.6rem; border-radius:1rem; outline:none !important; border:.2rem solid white; height:4.8rem; font:normal 1.6rem 'GothamRoundedLight'; 
    background-color:transparent; color:white !important;
}
textarea {
    padding:1rem !important;
}
.form-control:focus {
    border-radius:1rem; outline:none !important; border:.2rem solid white;
    background-color:transparent; color:white !important;
}
.btnsubmit {
    background-color:white; border:.2rem solid white; padding:1.2rem 2.2rem; font:normal 1.6rem 'GothamRounded'; 
    border-radius:3.4rem; color:rgb(100,128,186); transition:.2s all;
}
.btnsubmit:hover, .btnsubmit:focus {
    outline:none !important; background-color:transparent; color:white; transition:.2s all;
}

/* --FOOTER-- */
.page-footer{
    width:100%; background-color:rgb(100,128,186); padding:1.6rem 0rem; margin-top:-2rem;
}
.page-footer h5 {
    font-weight:lighter; text-align:center; line-height:2.8rem; color:white;
}

/* --FONT & TYPOGRAPHY-- */
h1 {
    font:normal 5rem/7.5rem 'GothamRounded'; color:rgb(18,18,18);
}
h2 {
    font:normal 3.2rem/4.8rem 'GothamRounded'; text-align:center; margin-bottom:3.2rem; color:rgb(100,128,186);
}
h3 {
    font:normal 2.5rem/3.75rem 'GothamRounded'; color:rgb(18,18,18); 
}
h4 {
    font:normal 2rem/3rem 'GothamRounded'; color:white;
}
h5, p {
    font:normal 1.6rem/2.4rem 'GothamRoundedLight'; color:rgb(18,18,18); letter-spacing:.06rem;
}
h6 {
    font:normal 1rem/1.5rem 'GothamRoundedLight'; color:rgb(18,18,18); letter-spacing:.06rem; text-align:center;
}
strong {
    color:rgb(100,128,186); font-weight:lighter;
}
hr {
    margin-bottom:1rem; width:100%; float:left; background-color:rgb(18,18,18); height:.2rem;
}
@media screen and (max-width: 1023px) {
    .navbar {
        padding:1.4rem;
    }
    .navbar.fixed {
        background-color:rgb(100,128,186); box-shadow:0rem 1rem 1.1rem rgba(90,117,172,0.4); transition:.2s all;
    }
    .nav-item {
        padding:.8rem 2rem; margin-top:.8rem;
    }
    .nav-link {
        text-align:left;
    }
    .toggler, .toggler2 {
        outline:none; border:none; background-color:transparent; padding-left:1.5rem !important;
    }
    .toggler {
        display:block;
    }
    .toggler:focus, .toggler2:focus {
        outline:none !important; 
    }
    .icon-bar {
        width:3rem; height:.3rem; background-color:rgb(100,128,186); display:block; transition:.2s all; margin:.4rem 0rem; 
    }
    .navbar.fixed .icon-bar {
        background-color:white; transition:.2s all;
    }
    .toggler2 .top-bar{
        transform:rotate(-28deg); 
    }
    .toggler2 .middle-bar{
        opacity:0; 
    }
    .toggler2 .bottom-bar{
        transform:rotate(28deg); 
    }
    .navbar-collapse {
        padding:1.5rem 1.5rem !important;
    }
    .header h1 {
        margin-top:10%;
    }
    h1 {
        line-height:5.2rem;
    }
    .header h3 {
        margin-top:1rem; margin-bottom:-.5rem;
    }
    .konten1 .clm, .navbar-collapse, .toggler2 {
        display:none;
    }
    .timeline {
        width:100%; padding-bottom:0;
    }
    .timeline:before {
        left:0; width:.2rem; height:80%; top:0;
    }
    .timeline ul li:nth-child(even),
    .timeline ul li:nth-child(odd) {
        width:100%; text-align:left; padding-left:3rem; padding-bottom:5rem;
    }
    .timeline ul li:nth-child(even):before,
    .timeline ul li:nth-child(odd):before {
        top:-1.8rem; left:-0.3rem;
    }
    .timeline ul li:nth-child(even) .time,
    .timeline ul li:nth-child(odd) .time {
        top:-3rem; left:3rem; right:inherit; border-radius:0rem 2.5rem 2.5rem 0rem;
    }
}
@media screen and (max-width: 767px) {
    .nav-link, table tr td, .award ul li, h5, p, h6 {
        letter-spacing:.05rem !important;
    }
    .toggler, .toggler2 {
        padding-left:1.4rem !important;
    }
    .navbar-collapse {
        padding:1.4rem 1rem !important;
    }
    .header h3 {
        margin-top:1rem; margin-bottom:-0.5rem;
    }
    .container {
        padding:none !important;
    }
    .profil {
        float:none; margin-top:1rem;
    }
    .header h1 {
        margin-top:0%;
    }
    .page-footer{
        width:100%; padding:2.4rem;
    }
    .page-footer h5 {
        text-align:left;
    }
}