@media (max-width: 810px) {

/* ----------------------------------------------General------------------------------------- */
#header, #topnav, #bottomlinks, #copyright {display:block; position:relative; width:98%; margin:0 auto;}
.sec6 {background-color:#800000;color:#000000; font-size:100%; padding:50px 0 50px 0; }
.sec7 {background-color:#800000;color:#000000; font-size:100%; padding:50px 0 30px 0; }
.sec8 {background-color:#800000;color:#000000; font-size:100%; padding:0 0 30px 0; }
.sec9 {background-color:#800000;color:#000000; font-size:100%; padding:0 0 50px 0; }
#content, #mscol{display:block; background-color:#ffffff; font-size:100%; overflow:auto;position:relative; width:95%; margin:0 auto; padding: 0; box-shadow: 0px 0px 20px 4px #000000;border-radius: 6px;}

/* ----------------------------------------------Top Nav------------------------------------- */
.sec1, .sec1 a{color:#ffffff; text-decoration:none;}
.sec1 {background-color:#990000; border-bottom:1px solid #ffffff;}
#topnav{padding:10px 0; font-size:95%; font-style: normal; }
#topnav p{display:none; float:left; margin:0; padding:0;}
#topnav p.tel {display: inline; text-decoration: none;padding: 0 0 0 8px;color: #ffffff;}
#topnav a{display: inline; text-decoration: none;padding: 10px 12px 10px 8px;color: #ffffff;}
#topnav ul{float:right; margin:0; padding:0; list-style:none;}
#topnav li {display:inline; padding: 10px 0 10px 0;}
#topnav li.cart {display:inline; padding: 10px 0 0 0;}
#topnav li:hover{background-color: #000000;padding: 10px 0 10px 0; }

/* ----------------------------------------------Header-------------------------------------- */
.sec2 {;background-color:#2D2B2B; color:#ffffff;}
/*.sec2 {background-image: url("images/bunting.png"); background-repeat: repeat;background-color:#2D2B2B; color:#ffffff;}*/
/*.sec2 {background-image: url("images/july.jpg");color:#ffffff;}*/

#header {height:130px;}
#header h1{margin:0; padding:0;font-size:100%; font-weight: normal;text-align:center; position: relative;top:40px;line-height:20px;}
#header h2{ display:none;margin:0; padding:0;font-size:100%; font-weight: normal;text-align:center; position: relative;top:35px;line-height:30px;}
img.logo {display:block; float:left;padding:0 0 0 6px; max-width: 180px; height: auto;}

/* ----------------------------------------------Main Navigation----------------------------- */
.sec3{background-image: url("odyssey/images/greypattern.jpg"); border-bottom:2px solid #333333;}

/* ----------------------------------------------Bottom Navigation------------------------------------- */
.sec4 {color:#ffffff; background-color:#2D2B2B; border-top:1px solid #ffffff;}
.sec4 a{color:#ffffff; text-decoration:none;}
.sec4 a:hover{color:#990000;}
#bottomlinks{padding:20px 0 20px 0;}
#bottomlinks h2{color:#ff0000;font-size:85%;font-weight:bold; margin:0;}
#bottomlinks h3{color:#ffffff;font-size:100%;font-weight:normal; margin:0; padding:0;}
#bottomlinks h4{display:none;color:#ffffff;font-size:100%;font-weight:normal; margin:0; padding:0;}
#bottomlinks a{font-size:85%;margin:0; padding:0; font-weight:normal;  line-height:1.5;}
#bottomlinks .mail{float:left; padding:0 0 0 18px; font-size:85%;}
#bottomlinks .footbox{float:right;  margin:0; padding:0 10px 0 10px;}
#bottomlinks .footboxdoc{display:none;float:right;  margin:0; padding:0 0 0 18px;}
#bottomlinks .last{margin:0;}
#company{float:left; padding:0 0 0 18px; font-size:85%;}

/* ----------------------------------------------Copyright---------------------------------- */
.sec5 {border-top:1px solid #ffffff;background-color:#4d4d4d;color:#DCDCDC; font-size:75%;}
#copyright{padding:8px 0;}
#copyright p{margin:0; padding:0; text-align: center}

/*---------------------------------------------Index------------------------------------*/

.imgcut{width: 50%; height:50%; margin: auto; padding-top: 1em; }
#colone{width:auto; margin:20px}
#coltwo{width:auto;  margin:20px}
#colthree{width:auto;  margin:20px}
#colone p {margin:8px 60px 0 0 ; padding:0}
#coltwo p {margin: 8px 60px 0 0; padding:0}
#colthree p {margin: 8px 60px 0 0; padding:0}
#frontgray {margin:0 ;padding:0 5%;float:left;width:90%;line-height:1.5; background-color:#eeeeee; border-top:solid 1px #000000}
	
.container { width:auto; margin:0; padding:0 }
.container .ism-slider { margin-left: auto; margin-right: auto; }
.frbanner {float:none; padding: 0 20px 0 0}


/* Accessory landing pages */
#acc p.top{padding:10px 20px; margin:20px 20px 0px 20px;   background-color:#D3D3D3; font-weight:bold; border: solid 1px #000000;}
#acc p.bottom{padding:22px 20px 8px 20px; margin:0 20px 20px 20px; min-height:110px;border-left: solid 1px #000000; border-bottom:solid 1px #000000; border-right:solid 1px #000000}
#acc p.middle{padding:22px 20px 8px 20px; margin:0 20px 0 20px; min-height:110px; border-left: solid 1px #000000;  border-bottom:solid 1px #000000;border-right:solid 1px #000000}
.imgacc {float:right; padding:0 20px 0 0; position:relative; top: -12px}


/* Application landing pages */
.imgcar{float:none; padding:0; display:block; margin:auto}
.tableauto {
	margin-top:0px;padding:10px 0px 0px 0px; margin-left:0%;
	width:100%;
	border:0px solid #000000;
	font-size:100%;}
.tableauto td:nth-child(odd) {width: 60%}
.tableauto t:nth-child(even) {width: 40%}
.tableauto table{
	border-top:1px solid #000000;
	border-bottom: 1px solid #000000;
	background-color:#eeeeee;
    border-collapse: collapse;
    border-spacing: 0;
	height:100%;
	margin:0px;padding:0px;}
.tableauto td{vertical-align:middle;border:0px solid #000000;padding:5px 10px 5px 10px;}



/* Batteries - Extreme, Performance main pages */
.tnoshow{display:none}
.tablebats {
	margin:20px 1%; 	
	padding:0 ; 
	width:98%;
	table-layout:fixed;
	border:0px solid #000000;
	font-size:100%;}
.tablebats table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;}
.tablebats td{
	vertical-align:middle;
	text-align: center;
	width: 18%;
	border:1px solid #000000;
	padding:3px;}
.tablebats th{
	vertical-align:middle;
	text-align: left;
	font-weight: normal;
	width: 28%;
	border:1px solid #000000;
	padding:3px;}

.tablebatstest {
	margin:20px 1%; 	
	padding:0 ; 
	width:98%;
	table-layout:fixed;
	border:0px solid #000000;}
.tablebatstest table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;}
.tablebatstest td{
	vertical-align:middle;
	text-align: center;
	font-size: 85%;
	border:1px solid #000000;
	padding:3px;}
.tablebatstest tr:nth-child(odd) {background-color: #f2f2f2}
.tablebatstest th{
	vertical-align:middle;
	text-align: middle;
	background-color:#000000;
	color:#ffffff;
	font-weight: normal;
	font-size: 85%;
	border:1px solid #000000;
	padding:3px;}

.space {line-height: 1.5;font-size: 90%;width:98%}
	
.novolt{display:none;}

/*-----------------------------------------Battery / accessory pages-------------------------*/
#price { margin: 20px 10px; width: auto; padding:0;}
#price p{margin:0; padding:10px; border:solid 1px #000000 }

#price p:last-child{background-color:#D3D3D3;}
#describe {margin:0px}
#describe p {margin:10px}
.tablespecs {margin:20px 10px; padding:0 ; border:0px solid #000000;}
.tablespecs tr:nth-child(odd) {background-color:#D3D3D3}
.tablespecs table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;	
	margin:0px;padding:0px;}
.tablespecs td{
	vertical-align:middle; font-size:95%;
	border:1px solid #000000;
	text-align:left;
	padding:6px;}
.tablespecs td:nth-child(even) {width:200px}
.tablespecs th{
	vertical-align:middle;
	text-align: left;
	font-weight: bold;
	border:1px solid #000000;
	color:#ffffff; 

	padding:6px;}
img.bat {display:none; max-width: 400px; height: auto;	float: right; margin:20px; padding: 0 ;}
img.batcomp {width: 110px; height: auto}
img.bat1 {display:block; max-width: 250px; height: auto; float: right; padding:  0 20px 8px 8px;}


/* Battery series, Documentation */	
img.bro {float:none; position: static; display: block; margin: 0 auto; max-width:100%; }
#series p.term {display:block;float:none; width:auto; text-align:center; padding: 0; margin: 5%}
#series p.top{padding:20px; margin:0 10px 0 10px; min-height:120px; border: solid 1px #000000;}
#series p.bottom{padding:20px; margin:0 10px 20px 10px; min-height:120px; border-left: solid 1px #000000; border-bottom:solid 1px #000000; border-right:solid 1px #000000}
#series p.middle{padding:20px; margin:0 10px 0 10px; min-height:120px; border-left:solid 1px #000000; border-bottom:solid 1px #000000;border-right:solid 1px #000000}
#series p.topb{padding:20px 6px 2px 25px; margin:0; min-height:100px; border-bottom: solid 1px #000000;}
#series p.bottomb{padding:20px 6px 2px 25px; margin:0; min-height:100px; }
#series p.middleb{padding:20px 6px 2px 25px; margin:0; min-height:100px;border-bottom: solid 1px #000000; }
#series h4 {margin:0; padding:10px 0 20px 20px;color:#000000; font-size:100%; font-weight:normal;  }	
#pdata .pd{margin:20px 0 0 0;padding:0; font-weight:bold; color:#ff0000;text-align:center;}
#pdata .tentwo {margin:0;padding:10px 0;font-weight:bold;text-align:center;}
#accone{width:50%; float:left; text-align:center; background-color: #e2e2e2;border-top:solid 1px #000000; }
#acctwo{width:50%; float:left; text-align:center; background-color: #e2e2e2; border-top:solid 1px #000000;}
#accthree{width:50%; float:left; text-align:center; background-color: #e2e2e2; border-top:solid 0px #000000;}
#accfour{width:50%; float:left; text-align:center; background-color: #e2e2e2; border-top:solid 0px #000000;}
.tablespecsa {margin:10px; padding:0 ; border:0px solid #000000;}
.tablespecsa tr:nth-child(odd) {background-color:#D3D3D3}
.tablespecsa table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;	
	margin:0px;padding:0px;}
.tablespecsa td{
	vertical-align:middle; font-size:100%;
	border:1px solid #000000;
	text-align:left;
	padding:6px;}
.tablespecsa td:nth-child(even) {width:200px}
.tablespecsa th{
	vertical-align:middle;
	text-align: left;
	font-weight: bold;
	border:1px solid #000000;
	color:#ffffff; 
	padding:6px;}
	
.tabletm {
	margin-left:2%; 
    margin-right:2%;	
	margin-bottom:2%;
	padding:0 ; 
	width:96%;
	table-layout:fixed;
	border:0px solid #000000;}
.tabletm tr:nth-child(odd) {background-color:#D3D3D3}
.tabletm table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;}
.tabletm td{
	vertical-align:middle;
	text-align: center;
	width:20%;
	border:1px solid #000000;
	padding:5px;}
.tabletm th{
	vertical-align:middle;
	text-align: center;
	font-weight: bold; color:#ffffff; background-color: #8d0000;
	border:none;
	padding:8px;}
.tabletm th:last-child {border-right:1px solid #000000;}
	
.imgterm{display:block; float:none; margin-left:auto; margin-right:auto; padding:0; max-width: 100%; height: auto;}
.imgseries {float:left; padding:10px 50px 30px 10px}
.imgseriesr {float:right; padding:0 50px 0 50px}
.header{padding:8px 10px; margin:0 10px 0 10px;border-left: solid 1px }


/* Catalog */	
.catpic {float:left; margin:10px 0 8px 2.7%}
.caption {text-align: center;}


/* Charger - Odyssey */
#obcprice { margin: 2%; width:96%}
#obcprice p{margin:0; padding:10px; border:solid 1px #000000 }
#obcprice p:first-child{background-color:#2D2B2B; color:#ffffff;font-weight:bold;}
#obcprice p:last-child{background-color:#D3D3D3;}
img.obcstages {float:none; position: static; display: block; margin: 0 auto; max-width:100%; }
img.obc {float:right; padding:20px 50px 0 20px}
img.obc1 {float:right; padding:80px 50px 0 20px}
img.obc2 {float:right; padding:20px 50px 0 20px}
img.obc3 {float:right; padding:58px 50px 0 50px}
img.aci {float:right; padding:60px 60px 0 20px}
.odych {margin: 0 20px 0 20px; padding:0; min-height:233px}



/*-----------------------------------------Design advantages---------------------------------*/
#design{margin:0;padding:0; width:100%; height:auto}
#design p.rt{margin:8px; padding:4px; color:#000000; font-size:100%; }
#design h2{margin:0; padding:0; color:#000000; font-size:100%;}
#design h1{margin:0; padding:20px 0 4px 8px; color:#000000; font-size:100%;font-style: italic; position:relative; left:0px ;}
img.design {float:none; position: static; display: block; margin: 0 auto; max-width:100%; }
img.small {}

.designbox{margin:0 0 20px 0px;padding:20px 10px 10px 10px;float:none; font-size:90%; border-bottom:solid 1px #000000;
width:auto; 
	background-color:#D3D3D3;
	box-shadow: 0px 0px 0px #888888;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;}
.designbox p{margin:0;padding:10px 0 0 0; line-height:1.4}


/*---------------------------------------------MicroStarts-------------------------------------*/

#mscolone{margin: 0;width:49.5%;  text-align:center; background-color: #F5F5F5;border-top:solid 1px #cccccc;border-right:solid 1px #cccccc;border-bottom:solid 1px #cccccc; }
#mscoltwo{width:50%;  text-align:center;background-color: #F5F5F5; border-top:solid 1px #cccccc;border-right:solid 0px #cccccc;border-bottom:solid 1px #cccccc;}
#mscolthree{width:99.7%;   text-align:center; background-color: #FFFFFF; border-top:solid 1px #cccccc;border-right:solid 1px #cccccc;border-bottom:solid 1px #cccccc;}
#mscolfour{width:49.5%;  text-align:center; background-color: #F5F5F5; border-top:solid 0px #cccccc;border-bottom:solid 1px #cccccc;border-right:solid 1px #cccccc;}
#mscolfive{width:50%;  text-align:center; background-color: #F5F5F5; border-top:solid 0px #cccccc;border-right:solid 0px #cccccc;border-bottom:solid 1px #cccccc;}
.mstarttop {font-size:200%; font-style: italic; color:#1E90FF}
.xpcase {width:100%; background-color:#e2e2e2;padding:0px 0px 20px 0px;border-top:solid 2px #000000;}
.xpcase p{margin:0; padding:0px 0px 0px 20px}
.xpcase h1 {font-size:110%; color:#0099cc;margin:10px 0 0 0;padding-left:20px}
.xpcasepic {float:none; padding:0}
.mjcasepic {float:right; padding:10px 10px 0 0; max-width:200px; height:auto}
#mscol p.price{font-size:120%; color:red}
.xphead {font-size: 115%; font-weight:bold;}
.xphead A:link {text-decoration: none;color: #000000}
.xphead A:visited {color: #000000}
.xphead A:hover	  {text-decoration: none; color: #ff0000}
#mscol p.text{padding: 10px 25px}
#mscol p.desc{display: none}
#xpcolone {width:100%; float:left; min-height: auto;}
#xpcoltwo {width:100%; float:right; min-height: auto;}
.tablespecsms {margin:20px 10px; padding:0 ; border:0px solid #000000;}
.tablespecsms tr:nth-child(odd) {background-color:#D3D3D3}
.tablespecsms table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;	
	margin:0px;padding:0px;}
.tablespecsms td{
	vertical-align:middle; font-size:95%;
	border:1px solid #000000;
	text-align:left;
	padding:6px;}
.tablespecsms td:nth-child(even) {width:600px}
.tablespecsms th{
	vertical-align:middle;
	text-align: left;
	font-weight: bold;
	border:1px solid #000000;
	color:#ffffff; 
	background-color:#2D2B2B;
	padding:6px;}


/* ----------------------------------------------CSS Menu------------------------------------ */

#cssmenu {
  font-family: droid;
  font-size: 105%;
  width:100%; margin:0 auto;
  line-height: 1;
  text-align: center;  
}
#cssmenu > ul {
  
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */

}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
  text-align: left;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 200px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index:1000;
  background: #dddddd;
  border:1px solid #000000;box-shadow: 4px 4px 10px 0px #000000;border-radius: 5px;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
 
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #800000;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 10px 6px 10px 6px;
  text-decoration: none;
  color: #000000;

}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #800000;
  color: #fff;
  text-shadow: 0px 1px 0px #000000;
}

/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 980px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}



.ism-slider > ol, .ism-slider > ol > li, .ism-slider > ol > li > img { width: 100%; list-style: none; margin: 0; padding: 0; }
.ism-slider {
  overflow: hidden;
  position: relative;
  padding: 0 !important;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-animation: ism-fadein 3s;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
@-webkit-keyframes ism-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-webkit-keyframes ism-loading {
  50% { left: 120px; }
}

.ism-slider .ism-slides {
  list-style: none;
  position: absolute;
  height: 100%;
  top: 0;
  padding: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 1;
}

.ism-slider li.ism-slide {
  height: 100%;
  overflow: hidden;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #d5d5d5;
  text-align: center;
}

.ism-slider .ism-img-frame {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

.ism-slider a.ism-image-link {
  position: absolute;
  color: inherit;
  text-decoration: none;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ism-slider .ism-img {
  display: block;
  border: none;
  position: absolute;
  pointer-events: none;
}

.ism-button {
  position: absolute;
  display: block;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  border: none;
  outline: none;
  text-align:center;
  z-index: 6;
  cursor: pointer;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
}



.ism-pause-button {
  display: none;
  left: 50%;
}

.ism-slider:hover .ism-pause-button {
  display: block;
}

.ism-caption {
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  padding: 0 1em;
  text-shadow: none;
  line-height: 1.2em;
  
  width: auto;
  height: auto;
  text-align: center;
  visibility: hidden;
}

a.ism-image-link .ism-caption, a.ism-caption {
  text-decoration: none;
  font-weight: normal;
}

a.ism-caption:hover {
  text-decoration: underline;
}

.ism-caption-0 {
  z-index: 3;
}

.ism-caption-1 {
  z-index: 4;
}

.ism-caption-2 {
  z-index: 5;
}

.ism-radios {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
  font-size: 1px;
}

.ism-slider .ism-radios {
  position: absolute;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  z-index: 6;
  bottom: 5px;
  left: 0;
  right: 0;
  width: auto;
  background-color: rgba(255, 255, 255, 0.0);
  padding: 0 7px;
  height: 0;
  overflow: visible;
}

.ism-slider .ism-radios.ism-radios-as-thumbnails {
  bottom: 5px;
}

.ism-radios li {
  position: relative;
  display: inline-block;
  margin: 0 3px;
  padding: 0;
}

.ism-radios input.ism-radio {
  display: none;
}

.ism-radios label {
  display: block;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}

.ism-radios-as-thumbnails label {
  -webkit-background-size: 120% auto; -moz-background-size: 120% auto; -o-background-size: 120% auto; background-size: 120% auto;
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.6);
  opacity: 0.8;
}

.ism-radios-as-thumbnails label:hover {
  border: 2px solid #fff;
  opacity: 1;
}

.ism-radios-as-thumbnails li.active label {
  border: 2px solid rgba(255, 255, 255, 1.0);
  opacity: 1;
}

p.ism-badge {
  margin: 0 auto;
  text-align: right;
  font-size: 10px;
  padding-top: 1px;
  color: #ccc;
  font-family: sans-serif;
  font-weight: normal;
}

p.ism-badge a.ism-link {
  color: inherit;
  text-decoration: none;
  margin-right: 0.25em;
}

p.ism-badge a.ism-link:hover {
  color: #aaa;
  text-decoration: underline;
}

.ism-zoom-in {
  -webkit-animation: zoomin 0.81s linear 1;
  animation: zoomin 0.81s linear 1;
}

@-webkit-keyframes zoomin {
  0% { -webkit-transform: scale(1.0); transform: scale(1.0); }
  100% { -webkit-transform: scale(3.0); transform: scale(3.0); }
}
@keyframes zoomin {
  0% { -webkit-transform: scale(1.0); transform: scale(1.0); }
  100% { -webkit-transform: scale(3.0); transform: scale(3.0); }
}

@-webkit-keyframes fadein {
  0% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes fadein {
  0% { opacity: 0; }
 100% { opacity: 1; }
}

@-webkit-keyframes slidein {
  0% { -webkit-transform: translate(-1200px, 0); transform: translate(-1200px, 0); }
  100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes slidein {
  0% { -webkit-transform: translate(-1200px, 0); transform: translate(-1200px, 0); }
  100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}

@-webkit-keyframes popin {
  50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
}
@keyframes popin {
  50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
}

.ism-zoom-pan {
  -webkit-animation: zoompan 20.0s linear 1;
  animation: zoompan 20.0s linear 1;
}
@-webkit-keyframes zoompan {
  0% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }
  50% { -webkit-transform: translate(-5%, -5%) scale(1.3); transform: translate(-5%, -5%) scale(1.3); }
  100% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }
}
@keyframes zoompan {
  0% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }
  50% { -webkit-transform: translate(-5%, -5%) scale(1.3); transform: translate(-5%, -5%) scale(1.3); }
  100% { -webkit-transform: translate(0, 0) scale(1.0); transform: translate(0, 0) scale(1.0); }
}

.ism-zoom-rotate {
  -webkit-animation: zoomrotate 20.0s linear 1;
  animation: zoomrotate 20.0s linear 1;
}
@-webkit-keyframes zoomrotate {
  0% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }
  50% { -webkit-transform: rotate(-5deg) scale(1.3); transform: rotate(-5deg) scale(1.3); }
  100% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }
}
@keyframes zoomrotate {
  0% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }
  50% { -webkit-transform: rotate(-5deg) scale(1.3); transform: rotate(-5deg) scale(1.3); }
  100% { -webkit-transform: rotate(0) scale(1.0); transform: rotate(0) scale(1.0); }
}
/* SLIDER */

#slider {
    width: 100%;
    -webkit-border-radius: 5px; border-radius: 5px; 
}

#slider-ism-badge {
    width: 100%;
}

#slider:before {
    content: ''; display: block; padding-top: 30%;
}

#slider .ism-frame {
    position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
}

#slider .ism-button {
    display: block;
    border-radius: 16px;
    width: 32px; height: 32px; background-size: 16px 16px; top: 50%; margin-top: -16px;
    color: #fff; background-color: rgba(0, 0, 0, 0.3);
    visibility: hidden;
}

#slider .ism-button-prev {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAIVBMVEX///////////////////////////////////////////9/gMdvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAuUAAALlARv+XnsAAABUSURBVEjH7dYxCgAgEAPB8weX/39WFBtBbsFSY2sYyzXicDLq0wQDKQGQAKiJAZTEvC+IRgPBYAEyYOB1AAf4hAkTXxB5nySOGmaRw4pp5rhv34MOQwscJ7/MrxQAAAAASUVORK5CYII=);
    left: 10px;
}

#slider .ism-button-next {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAIVBMVEX///////////////////////////////////////////9/gMdvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAuUAAALlARv+XnsAAABYSURBVEjH7dYxDoAwDEPR5Ab1/S8LVEgsyL8SG3XWWK/dnKpnumA0/L4lAOSJE/DEtXfEBBxxBwYFBH8IEWJbggL4RIAAPwFWC+VDqXEtYrFyNWO5v58HB4q9HAkl7KTYAAAAAElFTkSuQmCC);
    right: 10px;
}

#slider .ism-pause-button {
    width: 32px; height: 32px; background-size: 16px 16px; top: 50%; margin-top: -16px; border-radius: 16px; margin-left: -16px;
    color: #fff; background-color: rgba(0, 0, 0, 0.3); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAc0lEQVR42u3SsQkAIAxFQeP+O38XsBKxMPfKgCQcjqHe1W6YJFeXVNXJuxd3zO4/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID0RwuEoAh40yYcSQAAAABJRU5ErkJggg==);
}

#slider .ism-pause-button.ism-play {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAs6AAALOgFkf1cNAAACy0lEQVR42uWbS2hUVxyHv78PLKKiFgXBiIgvBEVKwZWL4kJrF7oQCSpoAlYkuhCyq4hQ2goqSBFBsNBCoXShbgp15XsTQSGKqKj1QdTYFCVQiuDic5FcGkQhj0nm3vl/6+Ge+X3zO2fumTkXhoi6S51NVtQbapfallVAh//Toc7KLED1jbpPnZJVQMF99fPMAgqOqZ9mFqD6UP06s4CC8+r0MucZN8rX/wJ4pu5VP8nYgIHcU5dna8BAFgM31e8rvUiOoAHvt2FHZgEFf6iTs0yBD/EV0K3uVidkFAAwFTgB3FKXZBRQsBS4q+5XZ2YUUPAtcEVtzioAYBnwm/q7OimjgILNwAt1Z1YBADOAk+ptdUFGAQDRPy0equ213GBVRcBADgOX1Y1ZBQAsB86qP4/0BqqqAgq292+3W7IKAJgNnFI71XkZBRQ5VgBP1DZ1WjYBAzkOXFLXZhUAsBI4p55Qx2cUULAbeKxuyyoAYC7wi3pdnZNRQJHzs/5FslWdmk1AwUTgJ+Ciui6jAACBWcDfGQX0At8A8yPiBsCEROHPA80R0ZNtEXwKtETEmvfDZ2jAIeDHiHjxsRc0ogCBl8DGiOjIdiv8H3AQaBpM+EZrwFVgU0S8zLYd7gLaImL1UMM3QgOOAUcjomu4F6iqgH+AzRFxoRabhCrxlr6/zppqEb5qDbgGbIiI7lpvE8vOc6A9IlbVOnwVGnAS+CEinozWAGUV8BrYGhF/jvZAZZwCh4B5YxG+bA3oBNZHxPOxHLQMDegG9kfEyrEOX4YG/AociIhH9XoD9RLQC7RGxJl6168eU+Aofb/JnSnB9BvTBtwBvhzN7/SyNqAH+C4ilpUt/LAY4lnh0+pCGolBCuhVt9CIDPKhqco8WVrLRfAvYG1EPKjSB1qLRfAVcARYVLXwtZgC5+pxxL3eAq6p/47kaFrVBexRmxolzzsZ+iOF4pXTWQAAAABJRU5ErkJggg==);
}

#slider .ism-button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

#slider .ism-pause-button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

#slider:hover .ism-button {
    visibility: visible;
}

#slider .ism-radios {
    display: none;
    height: 20px;
    text-align: center;
}

#slider .ism-radios label {
    width: 20px; height: 20px;
    border-radius: 3px;
    color: #000; background-color: rgba(255, 255, 255, 0.5);
}

#slider .ism-radios li.active label {
    background-color: rgba(255, 255, 255, 1.0);
}

#slider .ism-radios label:hover {
    background-color: rgba(255, 255, 255, 0.8);
}


/* SLIDES */

#slider .ism-slide-0 .ism-img-frame {
    width: 100%;
}

#slider .ism-slide-0 .ism-img {
    width: 100%;
    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}

#slider .ism-slide-1 .ism-img-frame {
    width: 100%;
}

#slider .ism-slide-1 .ism-img {
    width: 100%;
    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}

#slider .ism-slide-2 .ism-img-frame {
    width: 100%;
}

#slider .ism-slide-2 .ism-img {
    width: 100%;
    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}

#slider .ism-slide-3 .ism-img-frame {
    width: 100%;
}

#slider .ism-slide-3 .ism-img {
    width: 100%;
    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}
/*#slider .ism-slide-4 .ism-img-frame {
    width: 100%;
}

#slider .ism-slide-4 .ism-img {
    width: 100%;
    top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}*/


/* CAPTIONS */

#slider .ism-slide-0 .ism-caption-0.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-0 .ism-caption-1.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-0 .ism-caption-2.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-1 .ism-caption-0.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-1 .ism-caption-1.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-1 .ism-caption-2.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-2 .ism-caption-0.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-2 .ism-caption-1.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-2 .ism-caption-2.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-3 .ism-caption-0.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-3 .ism-caption-1.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-3 .ism-caption-2.ism-caption-anim {
    -webkit-animation: fadein 0.5s; animation: fadein 0.5s;
}

#slider .ism-slide-0 .ism-caption-0 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 10%;
    left: 5%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-0 .ism-caption-1 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 60%;
    left: 40%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-0 .ism-caption-2 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 20%;
    left: 60%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-1 .ism-caption-0 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 10%;
    left: 5%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-1 .ism-caption-1 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 60%;
    left: 40%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-1 .ism-caption-2 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 20%;
    left: 60%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-2 .ism-caption-0 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 10%;
    left: 5%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-2 .ism-caption-1 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 60%;
    left: 40%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-2 .ism-caption-2 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 20%;
    left: 60%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-3 .ism-caption-0 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 10%;
    left: 5%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-3 .ism-caption-1 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 60%;
    left: 40%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}

#slider .ism-slide-3 .ism-caption-2 {
    font-size: 1.25em;
    font-family: sans-serif;
    position: absolute; top: 20%;
    left: 60%;
    border-radius: 4px;
    border: none;
    color: #fff; background-color: rgba(0, 0, 0, 0.70);
}




}