/* -- start setup -- */

@font-face {
  font-family: 'Meister';
  src: url('Meister-Bold.otf')  format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Meister R';
  src: url('Meister-Bold-R.otf')  format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
font-family: 'Roboto Slab', serif;
font-family: 'Hind', sans-serif;
*/

* {
font-family: 'Nunito Sans', sans-serif, Arial, Verdana, Trebuchet MS,Helvetica;
font-size : 18px;
color:#fff;
transition: all 0.5s ease;
}

/* -- common -- */
.horniIndex {vertical-align : super; font-size:9px;}
.i {font-style : italic;}
sup {font-size: 0.7em;}

/* -- float -- */
.floatLeft {float : left;}
.floatRight {float : right;}
.clear {clear : both;}
.textLeft {text-align:left !important;}
.pb90 {padding: 0 0 90px 0;}
.ml20 {margin-left:20px !important;}

/* -- all pages -- */
hr {display : none;}
body {background-color: #000;}

.imgCenter {
display:block;
margin-left:auto;
margin-right:auto;
}

#header {
padding:23px 0 28px 6%;
background-color:#132b1b; 
border:none !important;
}

@media only screen and (min-width : 768px) {
#header {padding:23px 0 28px 10.8%;}
}

#carousel {
margin-top:67px;	
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


.carouselSlideLeft, .carouselSlideRight {
z-index:99999;
background-position: center center;
background-repeat: no-repeat;
width:40px;
height:40px;
top:50%;
margin-top:-20px;
display:block;
}

.carousel-control {display:none;	}

@media only screen and (min-width : 768px) {
.carousel-control {display:block;	}
}

.carousel-control { opacity: .65;  transition: opacity 0.5s; }
.carousel-control:HOVER { opacity: 1;  }

.carouselSlideLeft {
background-image: url(../pcs/pcs_layout/carousel-left.png)!important;
left:20px;
}

.carouselSlideRight {
background-image: url(../pcs/pcs_layout/carousel-right.png)!important;
right:20px !important;
}
 
.carousel-indicators li {
width: 12px;
height: 12px;
/*    position: absolute;*/
background: #999999;
background: -moz-linear-gradient(top, #999999 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #999999 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #999999 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #999999 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #999999 0%,#e1e1e1 100%);
filter: progid:dximagetransform.microsoft.gradient( startcolorstr=\"#999999\", endcolorstr=\"#e1e1e1\",gradienttype=0 );
border: 3px solid #e5e5e5;
border-radius: 50%;
cursor: pointer;
box-sizing: content-box;	
margin:0 2px;
}


.carousel-indicators li.active {
background: #fff;	
background: #666666;
margin:0 2px;
}

.topContent {
background-color:#f6f6f6;
margin-bottom:120px;
padding-top:60px;
}

.content {}

h1 { 
font-size: 30px;  
line-height: 35px; 
color:#131313;
text-transform:uppercase;
font-weight:bold;
font-family: 'DINCE-Bold';
}

@media only screen and (min-width : 480px) {
h1 { 
font-size: 33px; 
line-height: 40px; 
}
}

@media only screen and (min-width : 768px) {
h1 { 
font-size: 36px; 
line-height: 45px; 
}
}

@media only screen and (min-width : 992px) {
h1 { 
font-size: 39px; 
line-height: 48px; 
}
}

@media only screen and (min-width : 1200px) {
h1 { 
font-size: 42px; 
line-height: 60px; 
}
}

h1 span { 
font-size: 35px;   
color:White;
text-transform:uppercase;
font-weight:bold;
display:block;
margin-bottom:30px;
font-family: 'DINCE-Bold';
}

@media only screen and (min-width : 480px) {
h1 span { font-size: 44px;  }
}

@media only screen and (min-width : 768px) {
h1 span { font-size: 53px;  }
}

@media only screen and (min-width : 992px) {
h1 span { 
font-size: 62px;  
margin-bottom:45px;
}
}

@media only screen and (min-width : 1200px) {
h1 span { font-size: 72px;  }
}

.topClaim a {
color:White;
font-size:16px;
text-transform:uppercase;
text-decoration:underline;
}


h2 { 
font-size: 25px;  
line-height: 32px; 
font-weight:200;
color:White;
text-transform:uppercase;
font-family: 'DINCE-Light';
}

@media only screen and (min-width : 480px) {
h2 { 
font-size: 26px; 
line-height: 34px; 
}
}

@media only screen and (min-width : 768px) {
h2 { 
font-size: 27px; 
line-height: 34px; 
}
}

@media only screen and (min-width : 992px) {
h2 { 
font-size: 28px; 
line-height: 35px; 
}
}

@media only screen and (min-width : 1200px) {
h2 { 
font-size: 30px; 
line-height: 35px; 
}
}

h2 span { 
font-size: 30px;  
line-height: 35px; 
font-weight:600;
color:White;
display:block;
font-family: 'DINCE-Bold';
}

@media only screen and (min-width : 480px) {
h2 span { 
font-size: 33px; 
line-height: 38px; 
}
}

@media only screen and (min-width : 768px) {
h2 span { 
font-size: 36px; 
line-height: 41px; 
}
}

@media only screen and (min-width : 992px) {
h2 span { 
font-size: 39px; 
line-height: 44px; 
}
}

@media only screen and (min-width : 1200px) {
h2 span { 
font-size: 42px; 
line-height: 45px; 
}
}

.oddTop {
margin-top:30px;
margin-bottom:30px;
height:2px;
width:152px;
background-color:#9d6f4d;	
margin-left:auto;
margin-right:auto;	
}

.odd {
margin-top:30px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
height:1px;
width:82px;
background-color:#9d6f4d;		
}

@media only screen and (min-width : 768px) {
.odd, .oddTop  {
margin-left:0;
margin-right:0;}
}


h3 { 
font-size: 20px;  
line-height: 26px; 
font-weight:500;
color:#132b1b;
text-align:center;
font-family: 'Hind', sans-serif;
margin-top:-50px;
}

h3.topTitle { 
font-size: 20px;  
font-family: 'Roboto Slab', serif; 
color:#181818;
}



@media only screen and (min-width : 480px) {
h3 { 
font-size: 23px; 
line-height: 30px; 
}
}

@media only screen and (min-width : 768px) {
h3 { 
font-size: 26px; 
line-height: 32px; 
text-align:left;
margin-top:0;
}
}

@media only screen and (min-width : 992px) {
h3 { 
font-size: 29px; 
line-height: 36px; 
}

h3.topTitle { font-size: 28px;  }
}

@media only screen and (min-width : 1200px) {
h3 { 
font-size: 30px; 
line-height: 38px; 
}

h3.topTitle { font-size: 28px;  }
}

h3 span { 
font-size: 20px;   
font-weight:600;
color:#818181;
display:block;
font-family: 'Hind', sans-serif;
}

@media only screen and (min-width : 480px) {
h3 span { font-size: 22px;  }
}

@media only screen and (min-width : 768px) {
h3 span { font-size: 26px;  }
}

@media only screen and (min-width : 992px) {
h3 span { font-size: 30px;  }
}



.topImage {
margin-bottom:-150px;
}

.mainText {
font-size:14px;
line-height:27px;
margin-bottom:20px;
margin-top:20px;
text-align:center;
color:#4e4e4e;
}

.topContent .mainText {
font-family: 'Roboto Slab', serif;
color:#7c766c;
font-size:15px;
line-height:27px;
margin-bottom:20px;
margin-top:20px;
}

@media only screen and (min-width : 768px) {
.mainText {text-align:left;}
}


.buyButton {
font-weight:500;
background-color:#132b1b;
border:none;
display:block;
font-size:16px;
color:White;
width:217px;
height:55px;
line-height:55px;
text-align:center;
transition: background-color 0.5s;
text-transform: uppercase;
font-weight:600;
margin:20px auto;
font-family: 'DINCE-Medium';
}

@media only screen and (min-width : 768px) {
.buyButton {margin:20px 0;}
}

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

.buyButton:HOVER {
color:White;
text-decoration:none;
background-color:Black;
}

.origin, .origin strong {
color:#292929;
font-family: 'Roboto Slab', serif;
font-size:16px !important;
text-align:center;
}

@media only screen and (min-width : 768px) {
.origin, .origin strong {
text-align:left;
}
}

.ingrediences p {
color:#292929;
font-family: 'Roboto Slab', serif;
font-size:16px;
font-weight:100;
}

.ingrediences p strong {
color:#9d6f4d;
font-family: 'Roboto Slab', serif;
font-size:16px;
text-transform:uppercase;
}

.line {
margin-top:30px;
margin-bottom:30px;
height:1px;
background-color:#e4e4e4;	
}

.footer {
margin-top:50px;
background-color:Black;
padding-top:35px;	
padding-bottom:40px;
}  

@media only screen and (min-width : 768px) {
.footer {
padding-top:65px;	
padding-bottom:65px;
}  
}

.footer p {
color:#a4aaa4;
font-size:14px;
}  

.wall-bg {
  background-image: url('/scharf/pcs/pcs_layout/wall.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.scharf-bold-clasic {
	font-family: 'Meister', sans-serif;
	text-transform: uppercase;
}

.scharf-bold {
  font-family: 'Meister R', sans-serif;
  text-transform: uppercase;
}

.ss-glyph {
  font-family: inherit;
  text-transform: lowercase;
}

.scharf-red {
	color: #e52519;
	font-family: inherit;
  font-size: inherit;
}

@media (min-width: 1920px) {
	.content .container-mega {
		max-width: 1920px;
	}
}

.img-btn-responsive {
  top: 69.5%;
  left: 18.2%;
}

.img-top-mobile {
  display: none;
}

@media (max-width: 991px) {
	.img-btn-responsive {
		display: none;
	}
  .img-top-mobile {
    display: block;
  }
  .img-top {
    display: none;
  }

}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 2px;
  border-color: #e52519;
}

.block-heading {
  font-size: 38px;
  text-transform: uppercase;
  font-family: 'Meister R', sans-serif;
}

.product {
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

.product .product-thumbnail {
  overflow: hidden;
  border: 2px solid transparent;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.product .product-thumbnail:hover {
  /* border: 2px solid #e52519; */
}

.product .product-thumbnail img {
  width: 100%;
}

.product .product-name {
  min-height: 68px;
}

.product .product-name a {
  font-size: .7rem;
  text-decoration: none;
  color: #fff;
}

.product .product-name a:hover {
  color: #e52519;
}

.product:hover .product-thumbnail {
  max-width: 100%;
  max-height: 100%;
  border-width: 2px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to top, 
      #e52519, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
}

.product:hover .product-thumbnail img {
  transform: scale(1.1);
}

.product:hover .product-name a {
  color: #e52519;
}

.product .product-price span {
  display: block;
}

.product .product-price span.original-price strike {
  font-size: .8rem;
}

.product .product-price span.action-price {
  font-weight: 900;
  color: #e52519;
}