


#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;
}

marquee {
    color: white;
}

body {
     color: #333;
     font-family: 'Open Sans', sans-serif;
     padding:0px;
     margin:0px;
     font-size:15px;
}

h1 {
     text-transform:uppercase;
     margi-topn:10px;
     font-size: 13px;
     letter-spacing: 1px;
     font-weight: 300;
     color: white;
}
h2 {
     margin:0px 0px 10px 0px;
     font-family: 'Roboto Slab', serif;
}



.background1 {
     background: #001787;
     color: white;
}
.background2 {
     background: #1B60FB;
     color: white;
}



.alamat {
     font-size: 12px;
}
.alamat p {
     margin: 0px;
     padding: 0px;
}



.pad7 {padding: 30px 0px;}

.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;
}


/* ============  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:#001787; color:white;}
.search .submit:hover {background:#000;}

/* ============  footer =============== */






.bawah { font-size:10px; text-transform:uppercase; color: white;}
.bawah a {color:white;}
.bawah a:hover {color:#EC5353;}



.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; }
}

/* ============  sidebar =============== */

.label {
     padding: 10px;
     background: #001787;
     color: white;
     font-weight: bold;
     text-transform:uppercase;
     text-align: center;
     border-radius: 5px 5px 0px 0px;
}
.testimony-sidebar {
     font-size: 13px;
     height: 200px;
}
.testimony-sidebar p {
     margin: 0px;
}
.testimony-sidebar img {
     width: 70px;
     height: 70px;
}
.selengkapnya {
     text-align: center;
     color: white;
     font-family: 'Roboto Slab', serif;
	font-size:14px;
    text-transform: uppercase;
}
.selengkapnya a{
     color: white;
     text-decoration: none;
}
.selengkapnya a:hover{
     color: #333;
}

.koleksiterbaik  a {
     color:black;
     display: block;
     text-align:center;
     font-size:16px;
     background-image: linear-gradient(to bottom right, #ffffff, #e4e4e4);
     padding: 11px;
     font-weight: bold;
}
.koleksiterbaik  a:hover  {
     background-image: linear-gradient(to bottom right, #e4e4e4, #ffffff);
}



.gap {
    grid-gap:10px;
}
.atas {
    padding: 30px 0px 10px 0px;
    grid-gap:20px;
}


.layout3kolom > div {
    padding: 10px;
}

.operatoricon {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 5px;
    background: #ececec;
}
.operatoricon li {
     padding: 5px;
     text-align: center;
}
.operatoricon li img:hover {
     -webkit-transform:scale(1.5);
     transform:scale(1.5);
}
.operatoricon li img {
     -webkit-transition: all 0.7s ease;
     transition: all 0.7s ease;
}

@media (max-width: 740px){
    .isi {order:1;}
    .sidebarkiri {order:2;}
    .sidebarkanan {order:3;}

    .layout3kolom {
          grid-template-columns:1fr;
          grid-gap:10px;
     }
    .logo {
        margin: 10px auto 0px auto;
     }
     .search {
          grid-template-columns:49% 49%;
          grid-gap: 2%;
     }
	.search .submit {grid-column: 1/3;}

     .greeting {
          text-align:center;
     }
     .sticky {position: relative;}

     .wrapper {
          margin-left:10px;
          margin-right:10px;
     }

     .alamat {
          text-align:center;
     }


     h1 { text-align:center;}


     .bawah {text-align: center;}

     h2 {font-size:18px;}

}

@media (min-width: 741px){
    .layout3kolom {
        grid-template-columns:24% 50% 24%;
        grid-gap:2%;
    }
    .atas {
        grid-template-columns: max-content 3fr;
    }
     .search {grid-template-columns:repeat(7, 1fr); grid-column-gap:10px; }

     .wrapper {
          margin-left:10px;
          margin-right:10px;
     }


     .sticky {
          position: -webkit-sticky; /* Safari */
          position: sticky;
          top: 0;
          z-index: 1000;
     }

     h2 {font-size:36px;}


}

@media (min-width: 992px){
    .layout3kolom {
        grid-template-columns:20% 56% 20%;
          grid-gap:2%;
    }
	.wrapper {
          margin-right: auto;
          margin-left: auto;
          max-width: 1170px;
     }
}
