@charset "utf-8";
/* CSS Document */

h1 a {color:#000!important}
.teaser {padding: 40px 25px 40px 40px;}
	
	.teaser p {font-size:16px; line-height:2; font-family: 'Arvo', serif; margin-bottom:15px;}

	
#content #products .category_products .teaser h1 {
	font: italic 3.5em/.8em 'PT Sans',sans-serif;
	font-weight: 700;
	text-transform:uppercase;
	letter-spacing:-1px;
	margin:0 0 40px 0;
	color:#2c2b2b;
	}

#content #products .category_products .teaser h1 span {
	font-size:34px;
	letter-spacing:-2px;
	display:block;
	clear:both;
	
	font-weight: 400;
	margin:0 0 -5px;
	*margin:0 0 -1px;
	}

.teaser h3 {font-size:30px; padding-top:2em;}

/* CSS3 EFFECT */
.box2 {width:907px; height:100%; margin:25px auto 50px; z-index:1;}

.effect2 { position: relative;}
.effect2:before, .effect2:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.img-caption {
position: relative;
padding: 0;
margin: 10px 30px 10px 0;
float: left;
}
.img-caption img {
display: block;
max-width: 100%;
height: auto;
}
.img-caption:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.5) 100%) repeat 0 0;
z-index: 1;
}
.img-caption-text {
display: block;
position: absolute;
width: 100%;
font-weight:700;
font-style:italic;
letter-spacing:1px;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


blockquote {
border-top: 1px solid #FF8B59;
border-bottom: 1px solid #FF8B59;
color: #FF8B59;;
font-style: italic;
margin: 40px;
padding: 30px;
text-align: center;
}

.teaser blockquote p {
  font-family:'PT Sans',sans-serif;
  display: inline;
  font-size:x-large;
}

/* LIST */
.list-type5{ font-size:16px; font-family:'Arvo', serif; padding:1.5em 0;	}
.list-type5 ol {
list-style-type: none;
margin: 0;
margin-left: 3em;
padding: 0;
counter-reset: li-counter;
}
.list-type5 ol li{
position: relative;
margin-bottom: 2em;
padding: 1em;
background-color: #F0D756;
padding-left: 58px;
}

.list-type5 a{
text-decoration:none;
color:black;
font-size:15px;
}

.list-type5 ol li:before {
position: absolute;
top: -0.3em;
left: -0.5em;
width: 1.8em;
height: 1.2em;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: white;
background-color: #FF8B59;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 99;
overflow: hidden;
content: counter(li-counter);
counter-increment: li-counter;
}

.list-type4{
width:90%;
padding-left:5%;
padding-top:5px;
padding-bottom:15px;
}

.list-type4 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 1.5em;
padding: 0;
margin-bottom: 1em;
}
.list-type4 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .8em 0;
background: #5975D9;
color: white;
text-decoration: none;
box-shadow:inset 0.5em 0 black;
-webkit-transition: box-shadow 1s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 1s;
}

.list-type4 a:hover{
box-shadow:inset 2em 0 black;
}
/* YOUTUBE VIDEO */
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; width:49%; float:left; margin-right:30px; margin-bottom:30px;}

.video-container.full {width:100%}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


@media only screen and (max-width: 1250px) {
	.box2 {width:707px;}
	

#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#layout {
    position: relative;
    left: 0;
    padding-left: 0;
}
    #layout.active #menu {
        left: 215px;
        width: 228px;
    }

    #layout.active .menu-link {
        left: 228px;
    }

#menu {
    margin-left: -215px; /* "#menu" width */
    width: 215px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background:rgb(30, 30, 30);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #F00;
    background: rgba(255,0,0,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #000;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }


@media (min-width: 49em) {
    #layout {left: 0;padding-left:0;}
    #menu {
		position:relative;
		background:none;
		width:inherit;
		overflow-y:inherit;
		margin-left:inherit;
    }
    .menu-link {position: fixed;left: 150px;display: none;}
    #layout.active .menu-link {left: 150px;}
}

@media (max-width: 49em) { 
    #layout.active {position: relative;left: 150px;}
	.gridContainer {width: 100%; margin: auto;}
	nav > ul > li > a, nav > ul > li > a:visited {padding:18px 12px; font-size:11px;}
	#logo {z-index:9}
}

@media (min-width: 320px) and (max-width: 481px) {
/* HEADER*/
	nav {font-size:11px; background-color:black; height:65px;}
	nav > ul > li > a, nav > ul > li > a:visited {
	padding:10px 13px;}
	nav li#goto_home a {padding-right 17px; padding-left:10px;}
	#mysubmenuarea {display:none;}
	#content_breadcrumb .cart-holder {width: 220px;background: url(../images/sprite.png) no-repeat 88% -704px;}
	.cart-block .frame {padding: 12px 0;}
	#content_breadcrumb .cart, #content_breadcrumb .tech {font-size:1em; width:180px;}

/* CONTENT*/
  .gridContainer {width:100%}
  section#products {width:100%}
  #logo {z-index:1; height:145px; width:100%; margin:0;}
  h1.gridContainer span {font-size:11px; padding:0;top:140px;}
  .abs {top:inherit}
  .box2 {width:100%;}
  aside.filter .box h2 {border-bottom:1px solid #e5e5e5; padding:3px 0}
  #user_links .links { position:relative; z-index:5}
  #content #products .category_products .teaser h1 {font-size:2.8em;margin:20px 0 30px;}
  #content #products .category_products .teaser h1 span {font-size:.8em}
  .teaser {padding:50px 20px 10px}
	  .teaser p {font-size:14px;}
	  
	  .teaser h3 {font-size:26px; padding-bottom:10px;}
	  blockquote {margin:20px 0; padding:20px 0;}
	  .teaser blockquote p {font-size:16px; font-weight:700;}
  #menu a {color:#BDBCBC}
  section#products article {width:100%}
  	section#products article .item {width:340px;}
	.keterangan {font-size:inherit; line-height:inherit;}
	.item .photo {left:inherit}
  	.duaGambar img {padding:2px 0;}
	.img-caption {margin-right:0;}
	  
	.youtubeCenter {position: relative; padding-bottom: 56.25%;height: 0; width:100%}
		.youtubeCenter iframe{position: absolute; top: 0;left: 0;width: 100%;height: 100%;}
		
	.list-type5 ol {margin-left:.5em;}
	.video-container {float:none; width:95%; border:none}

/* FOOTER */
  .block_claim_footer {display:none}
  }