#loading {position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background:url(//charlesroydds.com/wp-content/themes/kallyas/sliders/css3panels/loader_dark.gif) no-repeat center center #f5f5f5;}
#css3panels {overflow:hidden; position:relative; z-index:0;}
#css3panels .panel {width:25%; float:left; overflow:hidden;  border: 3px solid white; margin-top: -35px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; 
-webkit-box-shadow: 0 0 15px #000; -moz-box-shadow: 0 0 15px #000; box-shadow: 0 0 15px #000;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-box-shadow 0.2s ease-out; -moz-transition: -moz-box-shadow 0.2s ease-out; -ms-transition: -ms-box-shadow 0.2s ease-out; transition: box-shadow 0.2s ease-out;
-webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg);
}
#css3panels .panel img {-webkit-transition: opacity 0.4s ease-out,  -webkit-transform 0.8s ease-out; -moz-transition: opacity 0.4s ease-out,  -moz-transform 0.8s ease-out; -ms-transition: opacity 0.4s ease-out,  -ms-transform 0.8s ease-out; -o-transition: opacity 0.4s ease-out,  -o-transform 0.8s ease-out; transition: opacity 0.4s ease-out,  transform 0.8s ease-out;}
#css3panels .panel { }
#css3panels .panel:hover {-webkit-box-shadow: 0 0 60px #000, 0 0 30px #000; -moz-box-shadow: 0 0 60px #000, 0 0 30px #000; box-shadow: 0 0 60px #000, 0 0 30px #000;}
#css3panels .panel.first {width: 28%; margin-left: -5%;}
#css3panels .panel.last {width: 29%; margin-right: -4%;}
#css3panels .panel img {max-width:none; position:relative; vertical-align:top; -webkit-transform: translate3d(0, -60px,0);
-moz-transform:translatey(-60px) translatex(0px);
-ms-transform:translatey(-60px) translatex(0px);
-o-transform:translatey(-60px) translatex(0px);
transform: translate3d(0, -60px,0);
}
#css3panels .panel img:hover { -webkit-transform: translate3d(-100px, -60px,0);
-moz-transform: translatey(-60px) translatex(-100px);
-o-transform: translatey(-60px) translatex(-100px);
-ms-transform: translatey(-60px) translatex(-100px);
transform: translate3d(-100px, -60px,0);}
#css3panels .panel img.grayscale {opacity:0; filter:alpha(opacity=0); z-index:998;}
#css3panels .panel:hover img.grayscale {opacity:1; filter:alpha(opacity=100);}
#css3panels .inner-panel { margin-top:90px; position:relative;
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
transform: rotate(-7deg);
}
#css3panels .caption {position: absolute; top: 450px; right: -100px; color: #e9e9e9; padding: 10px 300px 10px 20px; width: 400px; margin-right: -300px; z-index: 999; opacity:0.7; filter:alpha(opacity=70);
font-weight:500;
-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
#css3panels .caption.upper {top:350px;}
#css3panels .caption:before { content:""; position:absolute; width:100%; height:100%; background:#000; background:rgba(0,0,0,0.9); right: 0; top: 0; z-index: -1;
-webkit-transform: skew(-8deg); -moz-transform: skew(-8deg); -o-transform: skew(-8deg); -ms-transform: skew(-8deg); transform: skew(-8deg); }
#css3panels .caption .title {margin:0; line-height:1.3;}
#css3panels .panel:hover .caption {opacity:1; filter:alpha(opacity=100);}
.iosSlider .item .caption.style1 .title_big {float:left; clear:both; font-size:32px; line-height:1; color:#e9e9e9; position:relative; left: -100px; opacity:0; filter:alpha(opacity=0);
padding:15px 20px 15px 2000px; margin: 0 0 0 -2000px; z-index:1; min-width: 400px; text-align: right;}
.iosSlider .item .caption.style1 .title_big:before { content:""; position:absolute; width:100%; height:100%; background:#000; background:rgba(0,0,0,0.9); right: 0; top: 0; z-index: -1;}
.iosSlider .item .caption.style1 .more {float:left; width:30px; height:62px; margin-left:4px; position:relative; z-index:1; left: -100px;  opacity:0; filter:alpha(opacity=0);}  
.iosSlider .item .caption.style1 .more img {width: auto; padding: 23px 10px; position: absolute;}.carousel-container {
width: 100%;
overflow: hidden;
padding: 130px 0 30px;
}
body.slider_after_header .carousel-container {padding: 30px 0;}
#icarousel {
width: 490px;
height: 400px;
position: relative;
margin: 20px auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
#icarousel .slide {
display:block;
border-radius: 4px;
border: 8px #333 solid;
border: 8px rgba(0,0,0,0.5) solid;
width: 480px;
height: 360px;
}
#icarousel .slide h5 {position: absolute; bottom: 40px; left: 10px; right:10px; opacity: 0.7; filter:alpha(opacity=70); text-align:center; }
#icarousel .slide h5 span {color: white; background: #000; background: rgba(0, 0, 0, 0.4); padding: 5px 10px; display:inline-block;
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
#icarousel .slide:hover h5 { opacity:1; filter:alpha(opacity=100);} a.iCarouselNav {
display: block;
position: absolute;
top: 150px;
width: 40px;
height: 100px;
background-image: url(//charlesroydds.com/wp-content/themes/kallyas/sliders/icarousel/img/nav_paddles.png);
z-index: 1000;
text-indent: -9999px;
opacity: 0.5;
-ms-filter: alpha(opacity=50);
filter: alpha(opacity=50);
cursor:pointer;
}
a.iCarouselNav:hover {
opacity: 1;
-ms-filter: alpha(opacity=100);
filter: alpha(opacity=100);
}
a.iCarouselNav:active {
background-image: url(//charlesroydds.com/wp-content/themes/kallyas/sliders/icarousel/img/nav_paddles_down.png);
}
a#iCarouselPrev {
left: 20px;
background-position: -16px 0px
}
a#iCarouselNext {
right: 20px;
background-position: 56px 0px;
}#iCarousel-preloader {
position: absolute;
z-index: 1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #000 1px solid;
border-color: rgba(0,0,0,0.6);
padding: 1px;
width: 150px;
height: 3px;
}
#iCarousel-preloader div {
float: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height: 3px;
background: #000;
background: rgba(0,0,0,0.6);
width: 0px;
} #iCarousel-timer {
position: absolute;
z-index: 1000;
border-radius: 5px;
cursor: pointer;
}
#iCarousel-timer div {
border-radius: 3px;
}.drop-shadow {
position:relative;
-webkit-box-shadow:0 1px 15px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 15px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 15px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.simple {
-webkit-box-shadow:0 5px 15px rgba(0, 0, 0, 0.8);
-moz-box-shadow:0 5px 15px rgba(0, 0, 0, 0.8);
box-shadow:0 5px 15px rgba(0, 0, 0, 0.8);
} .lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow:0 15px 20px rgba(0, 0, 0, 0.8);
box-shadow:0 15px 20px rgba(0, 0, 0, 0.8);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
} .curled {
-moz-border-radius:0 0 10% 10% / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.curled:before,
.curled:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 18px rgba(0, 0, 0, 0.6);
-moz-box-shadow:0 8px 18px rgba(0, 0, 0, 0.6);
box-shadow:0 8px 18px rgba(0, 0, 0, 0.6);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
}
.curled:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
} .perspective:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
max-height:50px;
-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-webkit-transform:skew(50deg);
-moz-transform:skew(50deg);
-ms-transform:skew(50deg);
-o-transform:skew(50deg);
transform:skew(50deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
.perspective:after {
display:none;
} .raised {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
} .curved:before {
top:10px;
bottom:10px;
left:0;
right:50%;
-webkit-box-shadow:0 0 30px rgba(0,0,0,0.9);
-moz-box-shadow:0 0 30px rgba(0,0,0,0.9);
box-shadow:0 0 30px rgba(0,0,0,0.9);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
}
.curved-vt-2:before {
right:0;
}
.curved-hz-1:before {
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.curved-hz-2:before {
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
} .rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}