@keyframes movebackground {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes shakebackground {
	0%, 100% {
		transform: translateY(0%);
	}
	60% {
		transform: translateY(1%);
	}
	61% {
		transform: translateY(-2%);
	}
	63% {
		transform: translateY(1%);
	}
	64% {
		transform: translateY(0%);
	}
}

html {
	background-image: url('../assets/pattern3.jpg');
	background-size: auto 80px;
}

.notif {
	display: none;
	position: fixed;
	top: 80px;
	right: 20px;
	padding: 8px 36px;
	background-color: #2f1660;
	font-size: 14px;
	color: #fff;
	border-radius: 20px;
	border: 1px solid #111;
	box-shadow: 0px 8px 4px -6px #666;
	z-index: 2000;
}

#bravmagz-background {
	position: fixed;
	z-index: -2;
	background-color: #fff;
	width: 100%;
	height: 100%;

	animation: shakebackground 10s infinite ease-in;
}

#bravmagz-background [class^="background"] {
  position: absolute;
  width: 200%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}


#bravmagz-background .background-4 {
	background-image: url("../assets/images/background4.png");
	animation: movebackground 60s infinite linear;
}

#bravmagz-background .background-3 {
	background-image: url("../assets/images/background3.png");
	animation: movebackground 50s infinite linear;
}

#bravmagz-background .background-2 {
	background-image: url("../assets/images/background2.png");
	animation: movebackground 40s infinite linear;
}

#bravmagz-background .background-1 {
	background-image: url("../assets/images/background1.png");
	animation: movebackground 30s infinite linear;
}

#bravmagz-container {
	position: fixed;
	left: 0; right: 0;
	top: 0; bottom: 0;
	margin: auto;
}

#bravmagz-flipbook .shadow {
	box-shadow: 0 0 8px #111;
}

#bravmagz-flipbook .page.even .page-number,
#bravmagz-flipbook .page.odd .page-number {
	display: block;
	position: absolute;
	bottom: 0.1em;
	right: 0.2em;

	width: 1.5em;
	height: 1.5em;

	background-color: none;
	font-size: 0.8em;
	text-align: center;
	line-height: 1em;
	border-radius: 0.2em;
}

.putih{
	color: #fff;
}

.merah{
	color: red;
}
#bravmagz-flipbook .page.even .page-number {
	left: 0.2em;
}

#bravmagz-flipbook .page.even:before {
	content: "";
	position: absolute;
	height: 100%;
	width: 20px;
	right: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	background: -moz-linear-gradient(right,  rgba(0,0,0,0.45) 0%, rgba(171, 169, 169, 0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(right,  rgba(0,0,0,0.45) 0%,rgba(226, 223, 223, 0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

#bravmagz-flipbook .page.odd:before {
	content: "";
	position: absolute;
	height: 100%;
	width: 20px;
	left: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	background: -moz-linear-gradient(right,  rgba(0,0,0,0.45) 0%, rgba(171, 169, 169, 0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(right,  rgba(0,0,0,0.45) 0%,rgba(226, 223, 223, 0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

#bravmagz-thumbs {
	position: fixed;
	left: 0; right: 0;
	top: 0; bottom: 0;
	margin: auto;
	z-index: 2100;
	width: 70%;
	height: 225px;
}

#bravmagz-search {
	position: fixed;
	left: 0; right: 0;
	top: 0; bottom: 0;
	margin: auto;
	height: 400px;

	background-color: #fff;
	z-index: 2100;
	border-radius: 4px;
}

#bravmagz-search input { margin-top: 12px; }
#bravmagz-search input:focus { box-shadow: none; }

#bravmagz-search ul {
	height: 340px;
	overflow: auto;
}

#bravmagz-search ul li img {
	width: 80px;
}

#blank-loader {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 5000;
}

.blank {
	position: fixed;
	top: 0; left: 0;
	z-index: 2100;

	width: 100%;
	height: 100%;
	background-color: #111;
	background-color: rgba(0, 0, 0, 0.8);
}

#bravmagz-help img {
	position: fixed;
	top: 0; bottom: 0;
	right: 0; left: 0;
	margin: auto;
	z-index: 2100;
	
	width: 30%;
}

/* Style Layout nag nisor kene */
.logo-bawah {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    bottom: 0;
}

.logo-atas {
	position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    top: 0;
}

.logo-atas img {
	width: 15%;
}

.nav-tengah {
	margin: 0px;
}

.nav-tengah li {
	display: inline;
}


/** img css **/
.img-thumb {
	width: 12.5%;
	margin-bottom: -0.15%;
}

.img-prev, .img-next, .img-front, .img-back {
	width: 2.5%;
	margin: 0.5% 0.2% -1.7% 0.2%;
}

.img-help, .img-download, .img-print, .img-zoomin, .img-zoomout, .img-fullscreen {
	width: 40%;
}

/** navbar **/
.navbar-bawah, .navbar-atas {
	margin: 0px;
	padding: 0px;
}

.navbar-bawah > li > a,
.navbar-atas > li > a {
	max-width: 50px;
	max-height: 50px;
	padding: 0px;
	margin: 10px;
}

.navbar-bawah > li > a > img,
.navbar-atas > li > a > img {
	width: 70%;
}

.btn-prev {
	background-color:#828282;
	width:70px;
	left:0;
	top:41%;
	height:100px;
	z-index:100;
	padding-top:25px;
	padding-left: 10px;
	position:fixed;
	border-bottom-right-radius:50px;
	border-top-right-radius:50px;
}

.btn-prev:hover {
	background-color: #005c93;
}

.btn-next {
	background-color:#828282;
	width:70px;
	right:0;
	top:41%;
	height:100px;
	padding-top:25px;
	padding-left: 25px;
	z-index:100;
	position:fixed;
	border-bottom-left-radius:50px;
	border-top-left-radius:50px;
}

.btn-next:hover {
	background-color: #005c93;
}

/** custom media queries **/

@media (max-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (max-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (max-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (max-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (max-width:1025px) { /* big landscape tablets, laptops, and desktops */
	#bravmagz-container > bravmagz-container > {
		width: 28%;
	}
	.img-tablecontent {
		display: none;
	}
}
@media (max-width:1280px) { /* big landscape tablets, laptops, and desktops */
	#bravmagz-container > bravmagz-container > {
		width: 45%;
		margin-top: -20px;
	}
	.img-thumb {
		width: 18%;
		margin-bottom: -0.15%;
	}

	.img-prev, .img-next, .img-front, .img-back {
		width: 3.5%;
		margin: 0.5% 0.2% -1.7% 0.2%;
	}
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

@-webkit-keyframes moveclouds {
	0% {margin-left: 1500px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1500px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1500px;}
	100% {margin-left: -1000px;}
}

@-webkit-keyframes movecloudsleft {
	0% {margin-left: -250px;}
	100% {margin-left: 1500px;}
}
@-moz-keyframes movecloudsleft {
	0% {margin-left: -250px;}
	100% {margin-left: 1500px;}
}
@-o-keyframes movecloudsleft {
	0% {margin-left: -250px;}
	100% {margin-left: 1500px;}
}

/* 
** ISI MAJALAH **
*/

p.default {
	display: block;
	font-family: "Century Gothic";
	position: absolute;
	text-align: justify;
	font-size: 0.6em;
	padding: 0;
	margin: 0;
	-webkit-column-gap: 15px;
	-moz-column-gap: 15px;
	column-gap: 15px;
}

p.default a {
	color: #ff0;
}