/*****************************
  SET DEFAULT DIMENSIONS HERE
 *****************************/
/* change the ID & dimensions to match your slider */

#slider { width:960px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; }

.anythingSlider { width:960px; height:400px !important; margin:0 auto; overflow:hidden; }

#banner-slider { float:left; width:100%; position:relative; margin:0px; padding:0px; }

.textSlide { margin:0px; padding:0px; width:100%; float:left; }
.slider-content-container { margin:2% 0px 0px 4%; float:left; width:48%; padding:0px;  }
.textSlide h2 { color:#fff; font-size:46px; margin:0px; width:auto;  font-weight:normal; float:left; margin-bottom:10px; font-family: 'open_sanslight';}
.bennar_big_titel {
  color: #fff;
  float: left;
  font-family: "open_sanssemibold";
  font-size: 60px;
  line-height: 56px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.bennar_big_titel_slogan{
	font-family: 'open_sanssemibold';
	font-size:22px;
	color:#FFF;
	margin:0px 0px 10px 0px;
	padding:0px;
	letter-spacing:2px;
	
}
.slider-content-container .subtitle { font-size:14px; text-transform:uppercase; text-shadow:none; clear:both; float:left; width:100%; }
.benner_details{
	text-align:justify;
	font-size:13px;
	line-height:22px;
	font-family: 'open_sansregular';
	color:#fff;
	margin:20px 0px 10px 0px;
}
.bennar_red_more {
  background: #f3591d url("../images/shop-now-arrow-img.png") no-repeat scroll left 12px center;
  border-radius: 25px;
  color: #fff;
  float: left;
  margin: 0;
  padding: 10px 20px 10px 50px;
  text-decoration: none;
  font-size:14px;
  text-transform:uppercase;
  font-family: 'open_sansregular';
}
.slider-video-container { float:right; margin:0% 5% 0px 0px; width:40%; text-align:right; }
.slider-video-container iframe { max-width:100% !important; }


.slider-video-container  { position: relative; padding-bottom:55%; padding-top: 10px; height: 0; overflow: hidden; margin-top:2%; }
.slider-video-container img{
	display:block;
	max-width:100%;
	min-height:280px;
}

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


/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-default { margin: 0 auto; /* 45px right & left padding for the arrows, 28px @ bottom for navigation */ }

/* Navigation buttons + start/stop button, default state */

.anythingSlider-default .anythingControls { /*z-index:9999;*/ position:absolute; bottom:10px; margin:0px; padding:0px; width:100%; text-align:center; margin:0; }
.anythingSlider-default .anythingControls ul li { display:inline; margin:0px 2px; }
.anythingSlider-default .anythingControls a { display:inline-block; width:18px; height:7px; width:30px; text-align:center; font-size:0; behavior:url(PIE.htc); border:1px solid #fff; }
.anythingSlider-default.activeSlider .anythingControls a.cur,
.anythingSlider-default.activeSlider .anythingControls a:hover { border:1px solid #f3591d; background:#f3591d; }

.thumbNav { width:100%; text-align:center; }

/***********************
  COMMON SLIDER STYLING
 ***********************/
/* Overall Wrapper */
.anythingSlider { display: block; overflow: visible !important; position: relative; }

/* anythingSlider viewport window */
.anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; }

/* anythingSlider base (original element) */
.anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; }

/* Navigation arrow text; indent moved to span inside "a", for IE7;
  apparently, a negative text-indent on an "a" link moves the link as well as the text */
.anythingSlider .arrow span { display: block; visibility: hidden; }

/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
.anythingSlider .arrow.disabled { display: none; }

/* all panels inside the slider; horizontal mode */
.anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; }

/* vertical mode */
.anythingSlider .vertical .panel { float: none; }

/* fade mode */
.anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; }

/* fade mode active page - visible & on top */
.anythingSlider .fade .activePage { z-index: 1; }


/*----*****---- << Responsive >> ----*****----*/

	/*----*****---- << Tablet (Portrait) >> ----*****----*/	
	
    /* Note: Design for a width of 768px, Gutter: 30px, Unit: 32px */
	
    @media only screen and (min-width: 768px) and (max-width: 989px) {
		
		.anythingSlider { width:750px; height:328px; }
		
		.slider-video-container { margin:3% 0px 0px; }
	}
	
	/*----*****---- << Mobile (Landscape) >> ----*****----*/	
	
    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.anythingSlider { width:460px; height:201px; }
		
		.slider-video-container { margin:3% 0px 0px; }
		
		.slider-content-container { margin-top:10%; }
		.slider-video-container { margin-top:2%; }
		.textSlide h2 { font-size:18px; }
		
	}
	
	/*----*****---- << Mobile >> ----*****----*/	

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		.anythingSlider { width:300px; height:131px; }
		
		.slider-video-container { margin:3% 0px 0px; padding-bottom:40.25%; }
		
	
		.slider-content-container { margin-top:10%; }
		.slider-video-container { margin-top:2%; }
		.textSlide h2 { font-size:14px; line-height:normal; text-transform:none; }
		
		.slider-content-container .subtitle { display:none; }
		
	}

	/*----*****---- << Mobile >> ----*****----*/	

	/* Crappy Android portrait Size (devices and browsers) */
	@media only screen and (max-width:320px) {
		
		.anythingSlider { width:220px; height:96px; }
		
		.slider-video-container { margin:3% 0px 0px; padding-bottom:37.25%; }
		
		.slider-content-container { margin-top:10%; }
		.slider-video-container { margin-top:2%; }
		.textSlide h2 { font-size:11px; line-height:normal; text-transform:none; }
		
		.slider-content-container .subtitle { display:none; }
		
	}

.anythingSlider-default.activeSlider .anythingControls a.cur, .anythingSlider-default.activeSlider .anythingControls a:hover {
  background: none repeat scroll 0 0 #f3591d !important;
}