#toTop {
     width:50px;
     height:50px;
     position:fixed;
     bottom:20px;
     right:60px;
     cursor:pointer;
     display:none;
     z-index:999;
     background: url(../../../images/frontend/2/totopoff.png) center center no-repeat;
     border:none;
}


:root {
     --page-width: 1024px; /* width of header image */
}

html {
     box-sizing: border-box;
}
*,
:after,
:before {
     box-sizing: inherit;
}

body {
     width: var(--page-width);
     color: #fff; /* default text color */
     font-family: 'Open Sans', sans-serif;
     background-color: #000;
     margin: 0 auto;
     padding: 0;
     font-size: 16px;
}

h1 {
     text-transform:uppercase;
     margin:0px 0px 20px 0px;
     font-size: 20px;
     letter-spacing: 1px;
     font-weight: 300;
     text-align: center;
}
h2 {
     margin:0px 0px 10px 0px;
     font-family: 'Roboto Slab', serif;
}



.alamat {
     font-size: 12px;
}
.alamat p {
     margin: 0px;
     padding: 0px;
}

.koleksiterbaik  a {
     color:#081c82;
     display: block;
     text-align:center;
     font-size:16px;
     padding: 10px;
     font-weight: bold;
     background: white;
     border-radius: 25px;
}
.koleksiterbaik  a:hover  {
     background-image: linear-gradient(to bottom right, #9a1c3f, red);
}

#logo-container {
     display: grid;
     grid-template-columns: 1fr 3fr 1fr;
     grid-gap: 10px;
}


#logoataskanan {
     justify-content: flex-end; 
}

.logo-atas {
     width: 150px;
}


.pad7 {padding: 30px 0px;}
.pad8 {padding: 60px 0px;}
.pad9 {padding: 90px 0px;}
.gap10 {grid-gap: 10px;}
.gap20 {grid-gap: 20px;}
.gap30 {grid-gap: 30px;}

.dua-kolom-fixed {
     grid-template-columns: 1fr 1fr;
     display: grid;
     grid-gap: 10px;
}

#atas {
     grid-template-columns: max-content 1fr;
     display: grid;
     grid-gap: 10px;
}

.head {
     font-size: 25px;
     font-weight: bold;
     text-transform: uppercase;
     text-align: center;
     background:url(../../../images/frontend/2/head.png) bottom center no-repeat;
     padding-bottom: 10px;
     margin-top: 20px;
}





.no-data {
     font-size: 16px;
     font-weight: bold;
     color: #de3713;
}

.greeting {
     font-size: 12px;
}


/* ============  sidebar =============== */

.klik {
     font-family: 'Roboto Slab', serif;
	font-size:14px;
	text-transform:uppercase;
	color: white;
     text-decoration: underline;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}




.header {
     padding: 20px 10px;
}


.box {
     border: 1px solid #666666;
     border-radius: 15px;
}


.atas {
     grid-template-columns: max-content 3fr;
}

.tombolhalamanutama {
     font-weight: bold;
     color: white;
     background: #333333;
     padding: 10px;
     text-align: center;
     display: block;
     font-size: 13px;
     border-radius: 15px;
}
.tombolhalamanutama:hover {
     background: white;
     color: blue;
}

/* ============  search =============== */
.search input {font-size:11px; padding:10px; background:#fff;border:none; color:#333333;}
.search select {font-size:11px; padding:9px; background:#fff;border:none;color:#333333;}
.search .submit {padding:9px; cursor:pointer;background:#fff; color:#333333; margin-left: 10px;}
.search .submit:hover {background:#666666;}

.search-container {
     justify-content: flex-end;
     align-content: center;
}
.search {
     align-items: center;
     font-size: 13px;
}
.search strong {
     margin-left: 15px;
     margin-right: 10px;
}

.layout-1 {
     grid-template-columns: 200px 600px 200px;
}

.layout-2 {
     grid-template-columns: 200px 800px;
}

.label-sidebar {
     background: #555555;
     color: white;
     font-weight: bold;
     font-size: 13px;
     padding: 5px 10px;
}

footer {
     font-weight: bold;
     font-size: 13px;
}
footer a {
     color: red;
}
footer a:hover {
     color: #f60;
}