.no-js .liquid-slider {
  height:285px;
  width:400px;
}

.ls-wrapper .ls-preloader {  
  opacity:1;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}
.ls-wrapper {
/*overflow: auto;*/
position: relative;
width:400px !important;
height:285px;
padding:0;
float:left;
}

.ls-wrapper .liquid-slider {
  width:400px;
  height:285px;
  /* Do not edit below this line */
  float: left;
  overflow: hidden;
  position: relative;
}
.ls-wrapper .panel-container {
  position: relative;
}

.ls-wrapper .liquid-slider .panel-container .fade {
  position: absolute;
  top: 0; 
  left: 0;
  display: block;
}

.ls-wrapper .liquid-slider .panel {  
  width: 400px;
  height:285px;
  display: block;
  float: left;
}

.ls-wrapper .liquid-slider .panel img{
}



.ls-wrapper .liquid-slider .panel video {
}



.ls-wrapper .liquid-slider .panel-wrapper {  
  padding:15px 0px;
  position:relative;
}

.ls-wrapper .ls-nav a {
  background: #d8d8d8;
  color: #333333;
  margin-right: 1px;
  padding: 10px 15px;
}

.ls-wrapper .ls-nav a:hover {
  background: #f2f2f2;
  color: #333333;
  text-shadow: none;
}

.ls-wrapper .ls-nav .current {
  background: #f2f2f2;
}

.currentCrossLink {
  font-weight: bold;
}

.ls-wrapper .ls-nav ul {  

  padding:0;

  /* Do not edit below this line */

  clear: both;

  display: block;

  margin: auto;

  overflow: hidden;

}

.ls-wrapper .ls-nav ul li {

  /* Do not edit below this line */

  display: inline;

}

.ls-wrapper .ls-nav ul li a {

 

  /* Do not edit below this line */

  display: block;

  float: left;

  text-decoration: none;

}

/******************************************************

* Arrows

* This section refers to both the non-graphical and 

* graphical navigation arrows. 

*

* Some settings will be overwritten when using the 

* responsive setting.

*******************************************************/

.ls-wrapper .ls-nav-left, .ls-wrapper .ls-nav-right {

  /* Do not edit below this line */

  float: left;

}

.ls-wrapper .ls-nav-left a, .ls-wrapper .ls-nav-right a {

  /* non-graphical arrows */

  background: #000;

  color: #fff;

  padding: 5px;

  width: 100px;

  /* Do not edit below this line */

  display: block;

  text-align: center;

  text-decoration: none;

}

.ls-wrapper .ls-nav-left-arrow, .ls-wrapper .ls-nav-right-arrow {

  cursor: pointer;

  /* Do not edit below this line */

  float: left;

}

.ls-wrapper .ls-nav-left-arrow a, .ls-wrapper .ls-nav-right-arrow a {

  /* Do not edit below this line */

  display: block;

}

.ls-wrapper .ls-nav-left, .ls-wrapper .ls-nav-left-arrow {

  /* Do not edit below this line */

  clear: both;

}

.ls-wrapper .ls-nav-right-arrow {


}

.ls-wrapper .ls-nav-left-arrow {
}

.ls-wrapper .ls-nav-left-arrow:hover {

  /* Left graphical arrows hover */

  background: url(../images/arrow.png) no-repeat bottom left;

}

.ls-wrapper .ls-nav-left-arrow:active {

  /* Left graphical arrows click */

}

.ls-wrapper .ls-nav-right-arrow:hover {

  /* Right graphical arrows hover */

  background: url(../images/arrow.png) no-repeat bottom right;

}

.ls-wrapper .ls-nav-right-arrow:active {

  /* Right graphical arrows click */

}

.arrows .liquid-slider {

  /* Margin between slider and arrows */

  margin: 0 0 0 30px;

}



@media only screen and (max-width : 320px),

only screen and (max-device-width : 320px){

	.arrows .liquid-slider {

  /* Margin between slider and arrows */

margin: 0 0px 0 -56px !important;

}



}

/******************************************************

* Responsive Styles

* Here are the main responsive styles. This mostly 

* covers the arrows, and most of the settings can be

* applied above.

*******************************************************/

.ls-responsive .liquid-slider {

  /* Do not edit below this line */

  width: 100%;

  margin: 0;

}

.ls-responsive .liquid-slider .panel .panel-wrapper {

  padding: 10px;

}

.ls-responsive .ls-nav-left {

  /* Left non-graphical arrows */

  /* Do not edit below this line */

  position: absolute;

  left: 0;

  z-index: 2;

}

.ls-responsive .ls-nav-left a {

  /* Left non-graphical arrows */

  background: #9A9A9A;

  width: 80px;

}

.ls-responsive .ls-nav-left a:hover {

  /* Left non-graphical hover */

  background: #747474;

}

.ls-responsive .ls-nav-right {

  /* Right non-graphical arrows */

  /* Do not edit below this line */

  position: absolute;

  right: 0;

  z-index: 2;

}

.ls-responsive .ls-nav-right a {

  /* Right non-graphical arrows */

  background: #9A9A9A;

  width: 80px;

}

.ls-responsive .ls-nav-right a:hover {

  /* Right non-graphical arrows hover */

  background: #747474;

}

.ls-responsive .ls-nav-left-arrow {

  /* Do not edit below this line */

  position: absolute;

  left: 0;

  z-index: 2;

}

.ls-responsive .ls-nav-right-arrow {

  /* Do not edit below this line */

  position: absolute;

  right: 0;

  z-index: 2;

}



/******************************************************************

* Larger Mobile Devices

* This is for devices like the Galaxy Note or something that's 

* larger than an iPhone but smaller than a tablet. 

******************************************************************/

@media only screen and (min-width: 481px) {

  .ls-wrapper .liquid-slider .panel img{

    /* Example */

    /*

    width:24%;

    margin:2px;

    */

  }



}



/******************************************************************

* Tablet & Smaller Laptops

* This will include tablets and some netbooks.

******************************************************************/

@media only screen and (min-width: 768px) {

  .ls-wrapper .liquid-slider .panel img{

    /* Example */

    /*

    width:24%;

    */

  }

  .ls-responsive .liquid-slider .panel .panel-wrapper {

    padding: 20px 35px;

  }

}



/******************************************************************

* DESKTOP 

* This is the average viewing window. So Desktops, Laptops, and 

* in general anyone not viewing on a mobile device. Here's where

* you can add resource intensive styles.

******************************************************************/

@media only screen and (min-width: 1030px) {

  



}



/******************************************************************

* LARGE VIEWING SIZE 

* This is for the larger monitors and possibly full screen viewers.

******************************************************************/

@media only screen and (min-width: 1240px) {

  



}



/******************************************************************

* RETINA (2x RESOLUTION DEVICES)

* This applies to the retina iPhone (4s) and iPad (2,3) along with 

* other displays with a 2x resolution. You can also create a media

* query for retina AND a certain size if you want. Go Nuts.

******************************************************************/



@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

       only screen and (min--moz-device-pixel-ratio: 1.5),

       only screen and (min-device-pixel-ratio: 1.5) {

  



}

















.class1 

{
    width:180px;
   height:265px;
    background:#f5f5f5;
    text-align:left;
    white-space:normal;
	color:#202221;
	border:#DDD solid 1px;
	padding:0px;
	margin:0px 18px 0 0;
	float:left;
}

.class1 .div-01{ color:#000; text-align:left; float:left;padding-right:50px; line-height:15px; padding:5px 0px 5px 10px; font-weight:normal;}

.class1 .div-01 span{ color:#bd1a51; font-weight:bold;}

.content-01{padding:10px; background:#eff7fa;}



/*slider*/



#example {

	width:400px;

	height:385px;

	position:relative;

	

}



/*

	Slideshow style

*/



#slides {

	position:absolute;

	top:1px;

	z-index:100;

	height: 24px;

	width: 400px;

}



/*

	Slides container

	Important:

	Set the width of your slides container

	If height not specified height will be set by the slide content

	Set to display none, prevents content flash

*/



.slides_container {

	width:400px;

	height:385px;

	overflow:hidden;

	position:relative;

	display:none;

}



/*

	Each slide

	Important:

	Set the width of your slides 

	Offeset for the 20px of padding

	If height not specified height will be set by the slide content

	Set to display block

*/



#slides .slide {

	padding:0px 0px !important;

	width:400px;

	height:385px;

	display:block;

}



/*

	Next/prev buttons

*/

#slides .next,.slides .prev {

	position:absolute;

	width:23px;

	height:16px;

	display:block;

	z-index:101;

	margin-left:0px;

	right:0px;

	top:385px;

	float:right;



	

}



#slides .next {

	left:30px;





}

#slides .next a:hover {

	left:38px;

	background:url(../images/layout-001_32.png)

	

}