@import url(../../global/css/animate.css);
@import url(tooltip.css);
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Oswald);

body {font-family: 'Roboto', sans-serif; font-size:12px;  margin:0px; padding:0px;  background:#1C1D1F; color: white;}
h1 {font-weight:400; text-transform:uppercase; text-align:center; font-size:12px; color: #a9acb2; margin: 0px;}
h2 {font-family: 'Oswald', sans-serif;font-weight:400; margin:0px; font-size:28px;}

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

.marquee  p {margin:0px;}



.klik {
	font-family: 'Oswald', sans-serif;
	font-size:16px;
	text-transform:uppercase;
	color:black;
    -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; }
}

.wrapper {
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 768px)
{
	.menufixed {position:fixed; z-index:999; top:0; left:0; background:black;}
	.ganjel {height:50px;}

	.klik {text-align:center;}

	.hotline li {margin-bottom:5px; text-align:center; }
	.hotline li img { clear:both;}
	.hotline li .akun {clear:both; margin-left:10px;}

	.greeting {text-align:center;}
	.search {grid-template-columns:1fr 1fr;grid-gap: 5px;}
	.search .submit {grid-column: 1/3;}

	.header {grid-template-columns:1fr; grid-row-gap:10px;}

	h1 { text-align: center;}

	.bodyweb {grid-template-columns:1fr; grid-row-gap:10px; }

	.wrapper { width: 98%;}

}
@media (min-width: 768px)
{
	.wrapper {width: 750px;}



	.hotline {float:right; }
	.hotline li {margin-left:10px; float:left;}
	.hotline li img {float:left; margin:0px 5px;}
	.hotline li .akun {float:left;margin:0px;padding-top:3px;}

	.header { margin-top:30px; margin-bottom: 20px;grid-template-columns:1fr 1fr;}

	.search {grid-template-columns:repeat(7, 1fr); grid-column-gap:10px; padding-top: 10px;}

	.bodyweb {grid-template-columns:50% 25% 25%;}

	.judulatas {grid-column: 1/3;}

	.menuopt li {border-radius: 25px;background: linear-gradient(white, #B9BBC7 , white);}
	.menuopt li img {height:70px;}
	.menuopt li img:hover {-webkit-transform:scale(1.2);transform:scale(1.2);}
	.menuopt li img {-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}

	.atas {grid-template-columns:20% 80%; }

	.sidebar { margin: 0px 10px;}
}
@media (min-width: 1200px)
{
	.wrapper { width: 1170px;}

	.bodyweb {grid-template-columns:70% 15% 15%;}
}


.atas {grid-gap: 10px;}

.hotline li .akun { font-size: 18px;}
.hotline a {color:#fff;}
.hotline a:hover {color:#ffe400;}


.back1 {
	background:#F4F5F6;
	-moz-border-radius:7px;
	border-radius:7px;
	box-shadow:0px 0px 6px #000;
	border:1px solid #FFF;
	color: #1C1D1F;
}

.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:#c0c1c4; color:black;}
.search .submit:hover {background:#ffe400; color:#000; }

.head { padding:5px 10px; font-size:13px; font-family: 'Oswald', sans-serif;text-align:center;  color:#fff; text-transform:uppercase;background:#1C1D1F;background-size:100% ; }

.social {align-self: center;justify-self: center;}
.social li {float:left; margin:0px 5px 5px;}

.alamat {text-align: center;}
.alamat p {margin-bottom:5px;}

.cso li{ border-bottom:1px solid #ccc; padding:10px 0px; }
.cso li img {float:left; margin-top:8px;}
.cso li .akun {float:right; font-size:12px; margin-top:10px;}
.cso a {color: #1C1D1F;}
.cso a:hover {color:#ffe400;}


.track li {margin-bottom:3px; text-align:center; font-size:12px; }
.track input {font-size:11px; text-align:center; border:1px solid #dddcdd; padding:3px;}

.testi .slide {margin-bottom:10px;}
.testi .slide img { float:left; margin:0px 5px 5px 0px; width:50px;}
.testi .slide p {margin:0px; font-size:11px;}
.more {padding:10px; margin-bottom:20px;}
.more a {text-decoration:underline;}

.listhot {padding:3%; text-align:center;  font-size:16px;color:#da6c08;border-bottom:1px solid #ccc;}
.listhot  a { color:#333;}
.listhot  a:hover { color:#f60;}

.bawah {display: block; margin: 10px auto; text-align: center; text-transform: uppercase;}
.bawah  a { color:#fff;}
.bawah  a:hover { color:#f60;}