@charset "utf-8";
/* CSS Document */

#wrapper, .sliderwrapper {
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	margin-top: 0px; /* Was 25px */
}

/* ~~ The rules below apply to the image slider inserted on the page. The height of all elements in the slider should always be the same if you want the slider to be perfectly level. The width of all elements (exept the arrows) should also be the same. Pay extra attention to the positioning of the elements ~~ */
/* 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:auto;
	max-height: 100%;
	padding: 0;
	position: relative;
	background-image: url(images/spinner.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	margin-right: auto;
	margin-bottom: 0px; /* Was 10px */
	margin-left: auto;
 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
	z-index: 900;
}

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

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 900; position: absolute; bottom: 3%; overflow: visible;
}
.cycle-pager span {
	font-family: arial;
	font-size: 50px;
	width: 16px;
	height: 16px;
	display: inline-block;
	color: rgba(0,204,255,0.3);
	cursor: pointer;
}
.cycle-pager span.cycle-pager-active {
	color: rgba(255,255,255,0.5);
}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: rgba(255,255,255,1); bottom: 15px; right: 15px; z-index: 700; visibility:hidden; }


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


/* hero-entry */
.hero-entry {
	width: 100%;
    font-family: tahoma, arial;
    position: absolute;
	top: 0;
	bottom: 0;
	z-index: 450;
    background: rgba(0,0,0,0.1);
	color: white;
	padding: 15px 0;
}
.entrance {
	width: 90%;
	height: auto;
	max-height: 100%;
	position: absolute;
	top: 10%;
	left: 5%;
    background: -webkit-linear-gradient(left top, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* Standard syntax (must be last) */	
	margin: 0 auto;
	word-wrap: break-word;
}
.entrancetitle {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase;
}
.titledescription {
	color: rgba(255,51,102,1);
	margin-bottom: 15px;
}
.titlecatch {
	margin: 0 auto;
	padding-top: 15px;
	color: rgba(255,255,255,1);
	background: url(../images/dividerbgpattern.png) top center repeat-x;
	display: inline-block;
}











/* prev / next links */
.cycle-prev, .cycle-next {
	position: absolute;
	top: 0;
	width: 10%;
	opacity: 0.70;
	filter: alpha(opacity=70);
	z-index: 800;
	height: 100%;
	cursor: pointer;
	background-image: url(../images/slide/ArrowL.png);
}
.cycle-prev {
	left: 0px;
	background-image: url(../images/slide/ArrowL.png);
	background-repeat: no-repeat;
	background-position: 0% 50%;
	visibility: hidden;
}
.cycle-next {
	right: 0px;
	background-image: url(../images/slide/ArrowR.png);
	background-repeat: no-repeat;
	background-position: 100% 50%;
	visibility: hidden;
}
.cycle-prev:hover, .cycle-next:hover { opacity: 1; 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 screen and (max-width: 767px) {
#wrapper, .sliderwrapper {
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	margin-top: 25px;
}

/* ~~ The rules below apply to the image slider inserted on the page. The height of all elements in the slider should always be the same if you want the slider to be perfectly level. The width of all elements (exept the arrows) should also be the same. Pay extra attention to the positioning of the elements ~~ */
/* 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:auto;
	padding: 0;
	position: relative;
	background-image: url(images/spinner.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
	z-index: 900;
}

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

/* pager */
.cycle-pager {
	text-align: center;
	width: 100%;
	z-index: 500;
	position: absolute;
	bottom: 0.50%;
	overflow: visible;
	display: inline-block;
	visibility: hidden;
}
.cycle-pager span {
	font-family: arial;
	font-size: 50px;
	width: 16px;
	height: 16px;
	display: inline-block;
	color: rgba(0,204,255,0.3);
	cursor: pointer;
}
.cycle-pager span.cycle-pager-active {
	color: rgba(255,255,255,0.5);
}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 5px; 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: .0;
}


/* hero-entry */
.hero-entry {
	width: 100%;
    font-family: tahoma, arial;
    position: absolute;
	top: 0;
	bottom: 0;
	z-index: 450;
    background: rgba(0,0,0,0.1);
	color: white;
	padding-top: 0px;
}
.entrance {
	width: 90%;
	height: auto;
	max-height: 100%;
	position: absolute;
	top: 0%;
	left: 5%;
	margin: 0 auto;
	word-wrap: break-word;
}
.entrancetitle {
	width: 95%;
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase;
}
.titledescription {
	color: rgba(255,51,102,1);
	margin-bottom: 5px;
}
.titlecatch {
	margin: 0 auto;
	padding-top: 0px;
}


/* prev / next links */
.cycle-prev, .cycle-next {
	position: absolute;
	top: 0;
	width: 10%;
	opacity: 1;
	filter: alpha(opacity=0);
	z-index: 800;
	height: 100%;
	cursor: pointer;
	background-image: url(../images/ArrowL.png);
}
.cycle-prev {
	left: 0px;
	background-image: url(../images/slide/ArrowL.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.cycle-next {
	right: 0;
	background-image: url(../images/slide/ArrowR.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.cycle-prev:hover, .cycle-next:hover { opacity: .9; filter: alpha(opacity=90) }

.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 screen and (max-width: 769px)  and (orientation: landscape) {
#wrapper, sliderwrapper {
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	margin-top: 15px;
}
.entrance {
	width: 90%;
	height: 100%;
	padding-top: 20px;
    background: -webkit-linear-gradient(left top, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, rgba(255,51,102,0.5), rgba(102,102,153,0.5)); /* Standard syntax (must be last) */	
	margin: 0 auto;
	word-wrap: break-word;
}
.entrancetitle {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase;
}
.titledescription {
	color: rgba(255,51,102,1);
	margin-bottom: 5px;
	font-size: 85%;
}
.titlecatch {
	margin: 0 auto;
	padding-top: 10px;
	font-size: 100%;
	color: rgba(255,255,255,1);
	background: url(../images/dividerbgpattern.png) top center repeat-x;
	display: inline-block;
}


/* prev / next links */
.cycle-prev, .cycle-next {
	position: absolute;
	top: 0;
	width: 10%;
	opacity: 1;
	filter: alpha(opacity=0);
	z-index: 800;
	height: 100%;
	cursor: pointer;
	background-image: url(../images/ArrowL.png);
}
.cycle-prev {
	left: 0px;
	background-image: url(../images/slide/ArrowL.png);
	background-repeat: no-repeat;
	background-position: 50% 20%;
}
.cycle-next {
	right: 0;
	background-image: url(../images/slide/ArrowR.png);
	background-repeat: no-repeat;
	background-position: 50% 20%;
}
.cycle-prev:hover, .cycle-next:hover { opacity: .9; filter: alpha(opacity=90) }

.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 screen and (max-width: 479px) {

.entrance {
	width: 100%;
	height: 100%;
	padding-top: 15px;
	margin: 0 auto;
	left: 0;
	word-wrap: break-word;
}
.entrancetitle {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase;
}
.titledescription {
	color: rgba(255,51,102,1);
	padding-bottom: 5px;
	font-size: 100%;
}
.titlecatch {
	margin: 0 auto;
	padding-top: 5px;
	font-size: 110%;
	font-style: italic;
}
}