@charset "utf-8";
/*
// Jos ten Berg 2015
// Copyright Five ICT
// cycle2 custom CSS
*/

/* set container size to normalize other elements on page */
#slider { width:100%; height:455px; }

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width:100%; height:455px; }
.cycle-slideshow div.cycle-slide { width:100%; height:455px; }
.cycle-slideshow .slider-box { width:750px; height:385px; padding-top:60px; margin-left:0px; position:absolute; z-index:700; }
.slider-box .label-box { width:500px; height:30px; }
.slider-box .label-box .label { padding:6px 12px; color:#fff; font-family: 'DINMedium', sans-serif; font-size:16px; font-weight:400; text-transform:uppercase; float:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.slider-box .label-box .label.new { background-color:#0089d0; }
.slider-box .label-box .label.top-deal { background-color:#d00000; }
.slider-box .label-box .label.sale { background-color:#a1cc3a; }
.slider-box .text { width:500px; color:#fff; text-align:left; text-shadow: 1px 1px 0px #000; }
.slider-box h1 { font-size:60px; font-family: 'DINRegular', sans-serif; letter-spacing:-0.05em; font-weight:normal; color:#fff; text-transform:none; line-height:normal; margin:10px 0px 0px -5px; text-shadow: 1px 1px 0px #000; }
.slider-box h2 { color:#fff; font-size:20px; margin:0px 0px 10px; line-height:24px; }
.slider-box .btn-box { padding-top:10px; }
.slider-box .btn-box a.btn { line-height:48px; padding:6px 16px; color:#fff; border:1px solid #fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-size:26px; font-weight:normal; font-family: 'DINAlternateRegular', sans-serif; text-transform:uppercase; }
.slider-box .btn-box a.btn:hover { text-decoration:none; background-color:#0089d0; border:1px solid #0089d0; }

/* in case script does not load */
.cycle-slideshow img:first-child { position: static; z-index: 100; }

/* pager */
.slider-pager{ text-align: center; width: 100%; z-index: 400; margin-top: -37px; overflow: hidden; position:relative; }
.slider-pager span { display: inline-block; cursor: pointer; }
.slider-pager span a { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; display: block; height: 15px; margin: 0 3px; outline: 0 none; text-indent: -9999px; width: 15px; border:1px solid #fff; }
.slider-pager span.cycle-pager-active a, .slider-pager span:hover a { background: none repeat scroll 0 0 #fff; }
.slider-pager > * { cursor: pointer; }

/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }

/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}

/* prev / next links */
.slider-prev, .slider-next { position: absolute; margin-top: -266px; width: 77px; height: 77px; opacity: .5; filter: alpha(opacity=50); z-index: 400;  cursor: pointer; }
.slider-prev { left: 50px;  background: url(../../images/slider-prev.png) 50% 50% no-repeat;}
.slider-next { right: 50px; background: url(../../images/slider-next.png) 50% 50% no-repeat;}
.slider-prev:hover, .slider-next:hover { opacity: 1.0; filter: alpha(opacity=100) }

.disabled { opacity: .5; filter:alpha(opacity=50); }


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 1400px), only screen and (max-device-width: 1400px) {
	.slider-prev, .slider-next { display:none }
}

/*
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .cycle-slideshow { width: 200px;}
    .cycle-overlay { padding: 4px }
    .cycle-caption { bottom: 4px; right: 4px }
}
*/