/************************************************************************
 * 1. RESET styles for Divas Slider
 *************************************************************************/


article, aside, details, figcaption, figure, footer, header, hgroup, menu, section { display: block }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after { content: none }

a
{
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent
}

ins
{
	background-color: #ff9;
	color: #000;
	text-decoration: none
}

mark
{
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold
}

del { text-decoration: line-through }

abbr[title], dfn[title]
{
	border-bottom: 1px dotted;
	cursor: help
}

table
{
	border-collapse: collapse;
	border-spacing: 0
}

hr
{
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0
}

input, select { vertical-align: middle }

header, section, footer
{
	position: relative;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	padding-top: 0;
	height: auto;
}

ul, ol { list-style: none outside none; }

.esc
{
	position: relative;
	width: 100%;
	height: 1px;
	clear: both;
}

.clearfix:after
{
	content: "";
	display: table;
	clear: both;
}

/************************************************************************
 * 2. SPINNER styles
 *************************************************************************/

@keyframes 
spin {  to {
 -webkit-transform: rotate(1turn);
 -moz-transform: rotate(1turn);
 -o-transform: rotate(1turn);
 -ms-transform: rotate(1turn);
 transform: rotate(1turn);
}
}
 @keyframes 
extra-spin {  to {
 -webkit-transform: rotate(1.125turn);
 -moz-transform: rotate(1.125turn);
 -o-transform: rotate(1.125turn);
 -ms-transform: rotate(1.125turn);
 transform: rotate(1.125turn);
}
}

.spin
{
	font-size: 36px;
	text-align: center;
	text-indent: -999em;
}

.spin:before, .spin:after
{
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 0.2em;
	position: fixed;
	top: 5em;
	left: 50%;
	display: inline-block;
}

.spin:before
{
	box-shadow:
        /* 1 */
        0 1em #eee,  0 1.125em #eee,  0 1.25em #eee,  0 1.375em #eee,  0 1.5em #eee, 
        /* 3 */
        -1em 0 #aaa,  -1.125em 0 #aaa,  -1.25em 0 #aaa,  -1.375em 0 #aaa,  -1.5em 0 #aaa, 
        /* 5 */
        0 -1em #666,  0 -1.125em #666,  0 -1.25em #666,  0 -1.375em #666,  0 -1.5em #666, 
        /* 7 */
        1em 0 #222,  1.125em 0 #222,  1.25em 0 #222,  1.375em 0 #222,  1.5em 0 #222;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: extra-spin 1s infinite steps(8);
	-moz-animation: extra-spin 1s infinite steps(8);
	-o-animation: extra-spin 1s infinite steps(8);
	animation: extra-spin 1s infinite steps(8);
}

.spin:after
{
	box-shadow:
        /* 2 */
        -1em 0 #ccc,  -1.125em 0 #ccc,  -1.25em 0 #ccc,  -1.375em 0 #ccc,  -1.5em 0 #ccc, 
        /* 4 */
        0 -1em #888,  0 -1.125em #888,  0 -1.25em #888,  0 -1.375em #888,  0 -1.5em #888, 
        /* 6 */
        1em 0 #444,  1.125em 0 #444,  1.25em 0 #444,  1.375em 0 #444,  1.5em 0 #444, 
        /* 8 */
        0 1em #000,  0 1.125em #000,  0 1.25em #000,  0 1.375em #000,  0 1.5em #000;
	-webkit-animation: spin 1s infinite steps(8);
	-moz-animation: spin 1s infinite steps(8);
	-o-animation: spin 1s infinite steps(8);
	animation: spin 1s infinite steps(8);
}

/*end of CSS spinner*/


#loader
{
	position: fixed;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: rgba(255,255,255,1);
	display: block;
	text-align: center;
}

#loader > div
{
	position: relative;
	margin-top: 10%;
}

/************************************************************************
 * 3. MANDATORY Divas styles
 *************************************************************************/
 

#slider_wrapper { overflow: hidden; }

.divas-slider
{
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.divas-slider-container
{
	position: relative;
	margin: 0;
	padding: 0;
}

.divas-slider-container:after
{
	content: "";
	display: table;
	clear: both;
}

.divas-slide
{
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	overflow: hidden;
}

.divas-slide img
{
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	outline: 0 none;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

/************************************************************************
 * 4. DEFAULT slider settings
 *************************************************************************/

/*
 * divas slide transitions
 */

.divas-slide-transition-left
{
	-webkit-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	-moz-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	-o-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

/*
 * divas navigation buttons
 */

.divas-navigation
{
	clear: both;
	position: absolute;
	margin: 0px auto;
	height: 0;
	width: 100%;
	text-align: center;
	top: 47%;
	top: calc(50% - 33px);
}

.divas-has-bullets .divas-navigation { top: calc(50% - 61px); }

.divas-navigation span
{
	height: 66px;
	outline: 0 none;
	position: absolute;
	width: 42px;
	z-index: 9999;
	cursor: pointer;
	margin: 0;
	font-size: 3em;
	color: #fff;
}

.divas-navigation span:hover { color: #ffffff; }

.divas-controls span.divas-start, .divas-controls span.divas-stop { display: block; }

.divas-navigation span.divas-prev
{
	left: 1em;
	background: url("../images/prev.png") no-repeat top center rgba(0, 0, 0, 0);background-size:30px 55px;
}/*
 * svg无法使用。。。。
 */

.divas-navigation span.divas-next
{
	right: 1em;
	background: url("../images/next.png") no-repeat top center rgba(0, 0, 0, 0);background-size:30px 55px;
}
 @media screen and (max-width: 40em) {

.divas-navigation span.divas-prev,  .divas-navigation span.divas-next
{
	background-position: center center;
	-webkit-background-size: 75% auto;
	-moz-background-size: 75% auto;
	-o-background-size: 75% auto;
	background-size: 75% auto;
}

.divas-navigation span.divas-prev { left: 0.5em; }

.divas-navigation span.divas-next { right: 0.5em; }
}

/*
 * divas caption styling
 */

.divas-caption
{
	position: absolute;
	top: 60%;
	width: auto;
	background: rgba(0,0,0,0.7);
	color: #f7f7f7;
	border: none;
	padding: 1em 2em 1.6em;
	margin: 0 4em;
}

/*
 * divas caption transitions: left
 */

.divas-caption.divas-title-transition-left-start { left: -999px; }

.divas-caption.divas-title-transition-left
{
	-webkit-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	-moz-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	-o-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.divas-caption.divas-title-transition-left-stop { left: 0px; }

.divas-caption h1
{
	font-weight: 900;
	font-size: 4.8em;
	line-height: 1.1;
}

.divas-caption p
{
	font-style: italic;
	font-size: 1.6em;
}

/*
 * divas navigation bullets
 */

.divas-bullets
{
	clear: both;
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
}

.divas-bullets ul { list-style: none; }

.divas-bullet
{
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 1.5em;
	display: inline-block;
	height: 16px;
	margin: 0 0.3em;
	text-indent: -9999px;
	width: 16px;
}

.divas-bullet-current { background-color: rgba(0, 0, 0, 0.25); }

#sliderplay, #sliderpause
{
	background: url("../images/btns-next-prev.png");
	background-repeat: no-repeat;
	position:absolute;
	top:92%;
	right:22%;
	width: 12px;
	height: 18px;
	overflow: hidden;
	
	
}

#sliderplay
{
	width: 17px;
	background-position: -24px 0;
}

#sliderplay:hover { background-position: -24px -18px; }

#sliderpause
{
	width: 17px;
	background-position: -41px 0;
}

#sliderpause:hover { background-position: -41px -18px; }
 
 /************************************************************************
 * 5. GENERAL media queries
 *************************************************************************/
 
@media screen and (max-width: 87.5em) {

body { font-size: 54.6875%; }
}
 @media screen and (max-width: 75em) {

body { font-size: 50.875%; }
}
 @media screen and (max-width: 56.75em) {

body { font-size: 45%; }
}
 @media screen and (max-width: 35em) {

.divas-caption { display: none; }
}