body {
    background: url(../images/body.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}

body, html {width: 100%; margin: 0;}

/* --- Header */
.head-left{width:64.5%; float: left;}
.head-right{width:35%; float: right;}
.head-left, .head-right{padding: 10px; background: url(../images/box.png);}

/* --- Content --- */
.content-left{width: 45%; margin-right: 5px;}
.content-right{width: 27%;}
.content-left-center{width: 72%; float: left;}
.content-left, .content-right, .content-left-center{float: left; margin-top: 10px; padding: 10px; background: url(../images/box.png);}

#sidebar{width: 27%; float: right; margin-top: 10px; margin-left: 5px; padding: 10px; background: url(../images/box.png);}

.footer-1{width:36%; float: left; margin-right: 5px;}
.footer-2{width:35%; float: left;}
.footer-3{width:28%; float: right; margin-left: 5px;}
.footer-1, .footer-2, .footer-3{margin-top: 10px; padding: 10px; background: url(../images/box.png);}

/* --- Footer --- */
.footer{background-color: #202020; text-align: center; padding: 10px 0; color: #FFFAF0; font-weight:bold; }
.footer a{ text-decoration: none; color: #FFFAF0;}
.footer a:hover{ color:#00FFFF;}

/* Main Content */
.konten-text {font-size: 16px; padding: 10px 0 10px 15px; margin-bottom: 5px; color: #F0FFFF; background:url(../images/icon/title.jpg); font-weight: bold;}

/* Carousel Styles */
.carousel-inner img {width: 100%; max-height: 532px;}

.carousel-indicators .active {background-color: #DA251D;}
.carousel-indicators {top: 20px;}

.carousel-inner > .item {margin-left:0;margin-top:0;margin-bottom:0;padding-left: 0;width: 100%; height: 532px;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {display: block; max-width: 100%; height: 532px; margin-left:0; padding-left: 0;}

.caption {position: absolute; top: 87%; left: 0; right: 0; width: 100%; opacity: .7;filter: alpha(opacity=70);}
.caption h4 {font-size: 13px; padding: 10px; text-transform: uppercase; background-color: #202020; text-align:center; color: #FFFAF0;}

/* ---Login---- */
.login { position: fixed; top: 45%; left: 45%; transform: translate(-30%, -50%); background: rgba(4, 29, 23, 0.5); padding: 15px; width: 450px; box-shadow: 0px 0px 25px 10px rgba(124, 207, 0, 0.5); border-radius: 14px;}
.login h2 { text-align: center; color: white; font-size: 20px; font-family: sans-serif; letter-spacing: 3px; padding-top: 0; margin-top: 10px; }
.login h3 { text-align: center; color: white; font-size: 20px; font-family: sans-serif; letter-spacing: 3px; padding-top: 0; margin: -5px 0 30px; }
.login input { width: 100%; }

.bottom { margin: 10px; display: flex; justify-content: space-between; }
.bottom a { color: white; font-size: 14px; text-decoration: none; }
.bottom a:hover { text-decoration: none;}

@media (max-width: 980px) {
    .head-left{width:100%;}
    .head-right{width:100%; margin-top: 5px;}

    .content-left, .content-right{width: 100%;}
    .content-left-center{width: 100%;}
    #sidebar{width: 100%; margin-top: 0px;}

    .footer-1, .footer-2, .footer-3{width:100%;}
    .carousel-inner img {width: 100%; max-height: 205px;}
    .carousel-inner > .item {margin-left:0;margin-top:0;margin-bottom:0;padding-left: 0;width: 100%; height: 205px;}

    .carousel-indicators {display: none;}
    .carousel-inner img {width: 100%; max-height: 205px;}
    .carousel-inner > .item {margin-left:0;margin-top:0;margin-bottom:0;padding-left: 0;width: 100%; height: 205px;}
    
    .login {left: 31%; width: 335px; }
    .login h2 {font-size: 14px;}
    .login h3 { font-size: 18px;}
}