@charset "utf-8";
/* ---------------------------------------------
reset all styles
--------------------------------------------- */
.zuperSlider,
.zuperSlider * {
margin: 0;
padding: 0;
border: medium none;
font: normal 12px/18px Arial,Verdana;
}
.zuperSlider *:focus{
outline: none
}
.zuperSlider *::-moz-focus-inner {
border: medium none;
}
.zuperSlider ul,
.zuperSlider ul li {
list-style-type: none;
}
/* END - reset all styles */
/* ---------------------------------------------
general properties
--------------------------------------------- */
/* container used for responsive feature.
Set here the width and height of slider (for responsive use max-width and min-width; height must have numeric values)
For full screen with responsive feature set:
height: 100%;
width:100%;
min-width: 640px; // your min-width value for slider
position: fixed;
*/
.zuperWrap {
background: none repeat scroll 0 0 #FFFFFF;
height: 175px;
margin: 0 auto;
max-width:1800px;
min-width:320px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
/* do not modify. To change the slider width and height please modify zuperWrap class */
.zuperSlider {
position: relative;
height: 100%;
width: 100%;
}
/* hide all children of slider (used for loading screen)*/
.zuperSlider > * {
visibility: hidden;
}
/* loading screen image and size*/
.zuperSliderLoader {
background: url("../images/loader.gif") no-repeat scroll center center transparent;
}
.zuperSlider img {
display: block;
}
/* END - properties */
/* ---------------------------------------------
container properties
--------------------------------------------- */
.zuperSlider > .container {
overflow: hidden;
position: absolute;
z-index: 1;
/*-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;*/
/* change container size and position */
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* set container dimension */
.zuperSlider > .container > ul {
position: absolute;
width: 100%;
height: 100%;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
/* style
of container */
.zuperSlider > .container > ul > li {
position: absolute;
visibility: hidden;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* first child will be above all children */
.zuperSlider > .container > ul > li:nth-child(1) {
z-index: 2;
}
/* slide active will have class 'active3' */
.zuperSlider > .container > ul > li.active3 {
visibility: visible;
overflow: hidden;
z-index: 4;
}
/* slide animated will have class 'active2' */
.zuperSlider > .container > ul > li.active2 {
visibility: visible;
overflow: hidden;
z-index: 3;
}
/* END - container properties */
/* ---------------------------------------------
direction navigation - arrows (next, prev)
--------------------------------------------- */
.zuperSlider > .arrow {
position: absolute;
z-index: 20;
cursor: pointer;
/* change arrows size here */
height: 67px;
width: 29px;
}
/* right arrow image */
.zuperSlider > .next {
background: url("../images/sprite.png") no-repeat scroll -140px -69px transparent;
}
.zuperSlider > .next:hover {
background: url("../images/sprite.png") no-repeat scroll -140px 0 transparent;
}
/* left arrow image */
.zuperSlider > .prev:hover {
background: url("../images/sprite.png") no-repeat scroll -111px 0 transparent;
}
.zuperSlider > .prev {
background: url("../images/sprite.png") no-repeat scroll -111px -69px transparent;
}
/* END - arrow buttons (next, prev) */
/* ---------------------------------------------
alternative navigation (bullets, numbers or images)
--------------------------------------------- */
.zuperSlider > .zuperNav {
position: absolute;
z-index: 21;
}
/* bullets navigation */
.zuperSlider > .zuperNav > ul.nav > li {
background: url("../images/sprite.png") no-repeat scroll -36px -49px transparent;
cursor: pointer;
float: left;
margin: 0 2px;
/* change alternative navigation size here (bullets)*/
width: 14px;
height: 14px;
}
/* 'bullets navigation' that is active */
.zuperSlider > .zuperNav > ul.nav > li.active {
background: url("../images/sprite.png") no-repeat scroll -36px -33px transparent;
}
/* numbers navigation */
.zuperSlider > .zuperNav > ul.nav_num > li {
background: url("../images/sprite.png") no-repeat scroll -50px -70px transparent;
color: #09BBBB;
cursor: pointer;
float: left;
font: italic 20px/36px Georgia,Arial,Verdana;
margin: 0 2px;
text-align: center;
/* change alternative navigation size here (numbers)*/
height: 42px;
width: 42px;
}
/* 'numbers navigation' that is active */
.zuperSlider > .zuperNav > ul.nav_num > li.active {
background: url("../images/sprite.png") no-repeat scroll -3px -70px transparent;
color: #fff;
}
/* images navigation (set size with config option from zuperSlider plugin)*/
.zuperSlider > .zuperNav > ul.nav_img > li {
cursor: pointer;
float: left;
margin: 2px;
opacity: 0.7;
filter: alpha(opacity = 70);
overflow: hidden;
position: relative;
border: 3px solid #fff;
}
/* 'images navigation' that is active */
.zuperSlider > .zuperNav > ul.nav_img > li.active {
border: 3px solid #09bbbb;
opacity: 1;
filter: alpha(opacity = 100);
}
/* if 'images navigation' has content style it */
.zuperSlider > .zuperNav > ul.nav_img > li > div {
position: absolute;
top: 5px;
left: 5px;
}
/* navigation with thumbs (set size with config option from zuperSlider plugin) */
.zuperSlider .nav_thumb {
background: url("../images/thumbs_arrow.png") no-repeat scroll center bottom transparent;
padding-bottom: 3px;
position: absolute;
}
.zuperSlider .nav_thumb > div {
overflow: hidden;
border: 3px solid #000;
}
/* END - alternative navigation (bullets, numbers or images) */
/* ---------------------------------------------
auto (slideshow)
--------------------------------------------- */
/* circular type */
.zuperSlider > .circular {
background: url("../images/sprite.png") no-repeat scroll 0 0 transparent;
position: absolute;
z-index: 17;
/* change circular size here */
width: 30px;
height: 30px;
}
.zuperSlider > .circular > .circularWrap {
cursor: pointer;
position: absolute;
/* change circular clip property here */
clip: rect(0 30px 30px 15px);
/* change circular container size here */
height: 30px;
width: 30px;
}
.zuperSlider > .circular > .circularWrap > .circularRight,
.zuperSlider > .circular > .circularWrap > .circularLeft {
position: absolute;
top: 0;
left: 0;
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
/* change circular elements size here */
width: 30px;
height: 30px;
}
/* circular left element */
.zuperSlider > .circular > .circularWrap > .circularLeft {
background: url("../images/sprite.png") no-repeat scroll -31px 0 transparent;
display: none;
}
/* circular right element */
.zuperSlider > .circular > .circularWrap > .circularRight {
background: url("../images/sprite.png") no-repeat scroll -61px 0 transparent;
}
/* numbers type */
.zuperSlider > .numbers {
color: #fff;
font: italic 26px Georgia,Arial,Verdana;
position: absolute;
z-index: 17;
}
/* line type */
.zuperSlider > .wrapTimer {
position: absolute;
z-index: 17;
overflow: hidden;
/* change line width here (for responsive to work you must insert values in %)*/
width: 80%;
}
.zuperSlider > .wrapTimer > .timer {
background: #fff;
/* change line height here */
height: 2px;
}
/* play/pause button */
.zuperSlider > .playPause {
cursor: pointer;
position: absolute;
z-index: 18;
/* change play/pause size here */
width: 13px;
height: 13px;
}
/* play is visible */
.zuperSlider > .play {
background: url("../images/sprite.png") no-repeat scroll -1px -34px transparent;
}
.zuperSlider > .play:hover {
background: url("../images/sprite.png") no-repeat scroll -1px -50px transparent;
}
/* pause is visible */
.zuperSlider > .pause {
background: url("../images/sprite.png") no-repeat scroll -18px -33px transparent;
}
.zuperSlider > .pause:hover {
background: url("../images/sprite.png") no-repeat scroll -18px -50px transparent;
}
/* END - auto (slideshow) */
/* ---------------------------------------------
caption
--------------------------------------------- */
.zuperSlider .caption {
position: absolute;
z-index: 2;
opacity: 0;
filter: alpha(opacity = 0);
}
/* start - captions style */
.captionH1 {
position:absolute;
color: #fff;
font-family:BrandonGrotesque-Regular, Arial, sans-serif;
font-size:34px;
line-height:44px;
text-align: right;
right: 0;
top: 10%;
background:#e41;
padding:3px 15px 0;
text-transform:uppercase;
}
.captionH2 {
color: #FEFEFF;
font: 700 40px 'Rokkitt', serif, Arial;
width: 87%;
text-align: right;
left: 0;
top: 50%;
}
/* END - caption */
/* ---------------------------------------------
square effect // internal needs (please do not modify)
--------------------------------------------- */
.zuperSlider > .container > ul > .block {
overflow: hidden;
position: absolute;
z-index: 5;
}
.zuperSlider > .container > ul > .block > li {
display: block;
visibility: visible;
overflow: visible;
position: absolute;
width: 100%;
height: 100%;
}
/* END - square effect */
/* ---------------------------------------------
used by touch navigation // internal needs (please do not modify)
--------------------------------------------- */
.zuperSlider .grab * {
cursor: url(../images/grab.cur), move;
cursor: grab;
cursor: -moz-grab;
}
.zuperSlider .grabbing * {
cursor: url(../images/grabbing.cur), move !important;
cursor: grabbing !important;
cursor: -moz-grabbing !important;
}
.zuperSlider .nonGrab {
cursor: auto;
}
/* END - used by touch navigation */
/* ---------------------------------------------
content style
--------------------------------------------- */
/* END - content style */