/**
* @author    JoomShaper http://www.joomshaper.com
* @copyright Copyright (C) 2010 - 2012 JoomShaper
* @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2
*/

/*-- Responsive --*/

.layout-appico{ 
    position: relative;
    overflow: hidden;   
    background:#fff;
}
.appico-slider{
    position: relative;
    color:#000;
    z-index:0;
    overflow: hidden;
}

.sp-preloader{
    position: absolute;
    text-align: center;
    top:40%;
    left: 45%;
    color:#fff;
    font-size: 36px;
}

.appico-slider .slider-item{
    position: absolute;
    width: 100%;
    height: 100%;
}

.appico-slider .slider-item.animate-in,
.appico-slider .slider-item.animate-out{
    opacity: 1;
    z-index: 4;
}

.appico-slider .slider-item-inner{
    padding: 20px;
}

.appico-slider .slider-content{
    width:45%;
    float: left;
    margin-top:50px;
}

.appico-slider .slider-text{
    font-size:16px;
}


.appico-slider .slider-image{
    width:50%;
    float: left;
}

.appico-slider .slider-image img{
    float: right;
}

/* Animate In */
.animate-in .slider-content {
    -webkit-animation: appicofadeInRight 500ms;
    -moz-animation: appicofadeInRight 500ms;
    -ms-animation: appicofadeInRight 500ms;
    -o-animation: appicofadeInRight 500ms;
    animation: appicofadeInRight 500ms;
}

.animate-in .slider-image {
    -webkit-animation: appicofadeInLeft 500ms;
    -moz-animation: appicofadeInLeft 500ms;
    -ms-animation: appicofadeInLeft 500ms;
    -o-animation: appicofadeInLeft 500ms;
    animation: appicofadeInLeft 500ms;
}

/* Animate Out */
.animate-out .slider-content {
    -webkit-animation: appicofadeOutRight 500ms;
    -moz-animation: appicofadeOutRight 500ms;
    -ms-animation: appicofadeOutRight 500ms;
    -o-animation: appicofadeOutRight 500ms;
    animation: appicofadeOutRight 500ms;
}

.animate-out .slider-image {
    -webkit-animation: appicofadeOutLeft 500ms;
    -moz-animation: appicofadeOutLeft 500ms;
    -ms-animation: appicofadeOutLeft 500ms;
    -o-animation: appicofadeOutLeft 500ms;
    animation: appicofadeOutLeft 500ms;
}

.layout-appico .slider-title h1{
    font-size: 30px;
}
.layout-appico .slider-title h1,.layout-appico .slider-title h1 >small {
    color:#000;
    display:block
}

.layout-appico .slider-title h1 span {
    font-weight:700;
    text-transform:uppercase
}

.layout-appico .slider-introtext {
    font-size:30px;
    font-weight:400
}

.layout-appico .slider-introtext >div {
    padding:20px
}

.layout-appico .slider-controllers {
    background:#fff;
    float:left;
    height:500px
}

.layout-appico .slider-controllers ul {
    display:block;
    list-style:none;
    margin:0;
    padding:30px
}

.layout-appico .slider-controllers ul li {
    cursor:pointer;
    display:block
}

.layout-appico .slider-controllers ul li a {
    display:block;
    margin-bottom:15px;
    position:relative
}

.layout-appico .slider-controllers ul li.active a span {
    background:#ccc;
    border:7px solid #f5f5f5;
    border-radius:100%;
    height:60px;
    line-height:46px;
    width:60px
}

.layout-appico .slider-controllers ul li.active a span:after {
    border:solid transparent;
    border-left-color:#ccc;
    border-width:10px;
    content:" ";
    height:0;
    left:100%;
    margin-left:-1px;
    margin-top:-10px;
    position:absolute;
    top:50%;
    width:0;
    z-index:1
}

.layout-appico .slider-controllers ul li:hover a span{
   background:#ccc;
   border:7px solid #f5f5f5;
   border-radius:100%;
   height:60px;
   line-height:46px;
   width:60px
}

.layout-appico .slider-controllers ul li:hover a span:after{
    border:solid transparent;
    border-left-color:#ccc;
    border-width:10px;
    content:" ";
    height:0;
    left:100%;
    margin-left:-1px;
    margin-top:-10px;
    position:absolute;
    top:50%;
    width:0;
    z-index:1;
}

.layout-appico .slider-controllers ul li a span i {
    background:#fff;
    border:3px solid #444;
    color:#333;
    float:left;
    margin-right:10px;
    text-align:center
}

.layout-appico .slider-controllers ul li a span {
    background:#f5f5f5;
    border:7px solid transparent;
    border-radius:100%;
    display:block;
    height:60px;
    line-height:46px;
    padding:15px;
    position:relative;
    text-align:center;
    width:60px
}

.layout-appico .slider-controllers >a {
    color:#fff;
    cursor:pointer;
    margin:0 .5px;
    padding:0
}

.layout-appico .slider-controllers >a:hover {
    color:#333
}

.layout-appico .slider-controllers >a >span {
    display:block;
    font-size:48px
}

.ltr .layout-appico .slider-item {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%
}

.rtl .layout-appico .slider-item {
    height:100%;
    position:absolute;
    right:0;
    top:0;
    width:100%
}

.layout-appico .slider-content .slider-button {
    cursor:pointer;
    margin-top:20px
}

/*Slider Arrow Navigation */
.slider-arrow-nav{
    position:absolute;
    bottom:100px;
    left:55px;
}

.slider-arrow-nav a{
    display:block;
    color:#f1f1f1;
}
.slider-arrow-nav a:hover{
    color:#e5e5e5;
}

.slider-arrow-nav a.controller-prev{
    border-bottom:1px solid #e3e3e3;
}
.slider-arrow-nav a.controller-prev i, 
.slider-arrow-nav a.controller-next i{
    font-weight:900;
    font-size:40px;
    line-height:20px;
}
.slider-arrow-nav a.controller-prev i{
    margin-right:15px;

}
.slider-arrow-nav a.controller-next i{
    margin-left:15px;
}

/*Loader*/
.sp-preloader {
    height: 20px;
    width: 20px;
    -webkit-animation: appicospin 1.5s linear infinite;
    -moz-animation: appicospin 1.5s linear infinite;
    -ms-animation: appicospin 1.5s linear infinite;
    -o-animation: appicospin 1.5s linear infinite;
    animation: appicospin 1.5s linear infinite;
}
.sp-preloader i{
    height: 20px;
    width: 20px;
    border-radius: 25px;
    display: block;
    position:absolute;
}
.sp-preloader i:before, .sp-preloader i:after{
  content:'';
  display:block;
  position:absolute;
  height:inherit;
  width:inherit;
  border-radius: inherit;
}
.sp-preloader i:first-child:before {
    background: rgba(52, 149, 221, 0.9);

    -webkit-animation: appicorotate-top-left 1.5s linear infinite;
    -moz-animation: appicorotate-top-left 1.5s linear infinite;
    -ms-animation: appicorotate-top-left 1.5s linear infinite;
    -o-animation: appicorotate-top-left 1.5s linear infinite;
    animation: appicorotate-top-left 1.5s linear infinite;
}

.sp-preloader i:first-child:after {
    background: rgba(225, 73, 44, 0.9);

    -webkit-animation: appicorotate-top-right 1.5s linear infinite;
    -moz-animation: appicorotate-top-right 1.5s linear infinite;
    -ms-animation: appicorotate-top-right 1.5s linear infinite;
    -o-animation: appicorotate-top-right 1.5s linear infinite;
    animation: appicorotate-top-right 1.5s linear infinite;
}

.sp-preloader i:last-child:before {
    background: rgba(249, 206, 43, 0.9);

    -webkit-animation: appicorotate-bottom-left 1.5s linear infinite;
    -moz-animation: appicorotate-bottom-left 1.5s linear infinite;
    -ms-animation: appicorotate-bottom-left 1.5s linear infinite;
    -o-animation: appicorotate-bottom-left 1.5s linear infinite;
    animation: appicorotate-bottom-left 1.5s linear infinite;
}

.sp-preloader i:last-child:after {
    background: rgba(0, 153, 117, 0.9);

    -webkit-animation: appicorotate-bottom-right 1.5s linear infinite;
    -moz-animation: appicorotate-bottom-right 1.5s linear infinite;
    -ms-animation: appicorotate-bottom-right 1.5s linear infinite;
    -o-animation: appicorotate-bottom-right 1.5s linear infinite;
    animation: appicorotate-bottom-right 1.5s linear infinite;
}



@keyframes appicospin {
 0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(-180deg);
}
100% {
    transform: rotate(-360deg);
}

}

@-moz-keyframes spin {
 0% {
   -moz-transform: rotate(0deg);
}
50% {
   -moz-transform: rotate(-180deg);
}
100% {
   -moz-transform: rotate(-360deg);
}

}

@-webkit-keyframes appicospin {
 0% {
   -webkit-transform: rotate(0deg);
}
50% {
   -webkit-transform: rotate(-180deg);
}
100% {
   -webkit-transform: rotate(-360deg);
}

}

@-ms-keyframes appicospin {
 0% {
   -ms-transform: rotate(0deg);
}
50% {
   -ms-transform: rotate(-180deg);
}
100% {
   -ms-transform: rotate(-360deg);
}

}

@-o-keyframes appicospin {
 0% {
   -o-transform: rotate(0deg);
}
50% {
   -o-transform: rotate(-180deg);
}
100% {
   -o-transform: rotate(-360deg);
}

}

@keyframes appicorotate-top-right {
 0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(-180deg);
    transform-origin: 20% 20%;
}
100% {
    transform: rotate(-360deg);
}

}

@-moz-keyframes rotate-top-right {
 0% {
   -moz-transform: rotate(0deg);
}
50% {
   -moz-transform: rotate(-180deg);
   -moz-transform-origin: 20% 20%;
}
100% {
   -moz-transform: rotate(-360deg);
}

}

@-webkit-keyframes appicorotate-top-right {
 0% {
   -webkit-transform: rotate(0deg);
}
50% {
   -webkit-transform: rotate(-180deg);
   -webkit-transform-origin: 20% 20%;
}
100% {
   -webkit-transform: rotate(-360deg);
}

}

@-ms-keyframes appicorotate-top-right {
 0% {
   -ms-transform: rotate(0deg);
}
50% {
   -ms-transform: rotate(-180deg);
   -ms-transform-origin: 20% 20%;
}
100% {
   -ms-transform: rotate(-360deg);
}

}

@-o-keyframes appicorotate-top-right {
 0% {
   -o-transform: rotate(0deg);
}
50% {
   -o-transform: rotate(-180deg);
   -o-transform-origin: 20% 20%;
}
100% {
   -o-transform: rotate(-360deg);
}

}

@keyframes appicorotate-top-left {
 0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(180deg);
    transform-origin: 80% 20%;
}
100% {
    transform: rotate(360deg);
}

}

@-moz-keyframes rotate-top-left {
 0% {
   -moz-transform: rotate(0deg);
}
50% {
   -moz-transform: rotate(180deg);
   -moz-transform-origin: 80% 20%;
}
100% {
   -moz-transform: rotate(360deg);
}

}

@-webkit-keyframes "appicorotate-top-left" {
 0% {
   -webkit-transform: rotate(0deg);
}
50% {
   -webkit-transform: rotate(180deg);
   -webkit-transform-origin: 80% 20%;
}
100% {
   -webkit-transform: rotate(360deg);
}

}

@-ms-keyframes appicorotate-top-left {
 0% {
   -ms-transform: rotate(0deg);
}
50% {
   -ms-transform: rotate(180deg);
   -ms-transform-origin: 80% 20%;
}
100% {
   -ms-transform: rotate(360deg);
}

}

@-o-keyframes appicorotate-top-left {
 0% {
   -o-transform: rotate(0deg);
}
50% {
   -o-transform: rotate(180deg);
   -o-transform-origin: 80% 20%;
}
100% {
   -o-transform: rotate(360deg);
}

}

@keyframes appicorotate-bottom-right {
 0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(-180deg);
    transform-origin: 80% 80%;
}
100% {
    transform: rotate(-360deg);
}

}

@-moz-keyframes rotate-bottom-right {
 0% {
   -moz-transform: rotate(0deg);
}
50% {
   -moz-transform: rotate(-180deg);
   -moz-transform-origin: 80% 80%;
}
100% {
   -moz-transform: rotate(-360deg);
}

}

@-webkit-keyframes appicorotate-bottom-right {
 0% {
   -webkit-transform: rotate(0deg);
}
50% {
   -webkit-transform: rotate(-180deg);
   -webkit-transform-origin: 80% 80%;
}
100% {
   -webkit-transform: rotate(-360deg);
}

}

@-ms-keyframes appicorotate-bottom-right {
 0% {
   -ms-transform: rotate(0deg);
}
50% {
   -ms-transform: rotate(-180deg);
   -ms-transform-origin: 80% 80%;
}
100% {
   -ms-transform: rotate(-360deg);
}

}

@-o-keyframes appicorotate-bottom-right {
 0% {
   -o-transform: rotate(0deg);
}
50% {
   -o-transform: rotate(-180deg);
   -o-transform-origin: 80% 80%;
}
100% {
   -o-transform: rotate(-360deg);
}

}

@keyframes appicorotate-bottom-left {
 0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(180deg);
    transform-origin: 20% 80%;
}
100% {
    transform: rotate(360deg);
}

}

@-moz-keyframes rotate-bottom-left {
 0% {
   -moz-transform: rotate(0deg);
}
50% {
   -moz-transform: rotate(180deg);
   -moz-transform-origin: 20% 80%;
}
100% {
   -moz-transform: rotate(360deg);
}

}

@-webkit-keyframes appicorotate-bottom-left {
 0% {
   -webkit-transform: rotate(0deg);
}
50% {
   -webkit-transform: rotate(180deg);
   -webkit-transform-origin: 20% 80%;
}
100% {
   -webkit-transform: rotate(360deg);
}

}

@-ms-keyframes appicorotate-bottom-left {
 0% {
   -ms-transform: rotate(0deg);
}
50% {
   -ms-transform: rotate(180deg);
   -ms-transform-origin: 20% 80%;
}
100% {
   -ms-transform: rotate(360deg);
}

}

@-o-keyframes appicorotate-bottom-left {
 0% {
   -o-transform: rotate(0deg);
}
50% {
   -o-transform: rotate(180deg);
   -o-transform-origin: 20% 80%;
}
100% {
   -o-transform: rotate(360deg);
}

}


@keyframes appicofadeInLeft {
 0% {
    opacity: 0;
    transform: translateX(-30%);
}
100% {
    opacity: 1;
    transform: translateX(0);
}

}

@-moz-keyframes fadeInLeft {
 0% {
   opacity: 0;
   -moz-transform: translateX(-30%);
}
100% {
   opacity: 1;
   -moz-transform: translateX(0);
}

}

@-webkit-keyframes appicofadeInLeft {
 0% {
   opacity: 0;
   -webkit-transform: translateX(-30%);
}
100% {
   opacity: 1;
   -webkit-transform: translateX(0);
}

}

@-ms-keyframes appicofadeInLeft {
 0% {
   opacity: 0;
   -ms-transform: translateX(-30%);
}
100% {
   opacity: 1;
   -ms-transform: translateX(0);
}

}

@-o-keyframes appicofadeInLeft {
 0% {
   opacity: 0;
   -o-transform: translateX(-30%);
}
100% {
   opacity: 1;
   -o-transform: translateX(0);
}

}

@keyframes appicofadeInRight {
 0% {
    opacity: 0;
    transform: translateX(30%);
}
100% {
    opacity: 1;
    transform: translateX(0);
}

}

@-moz-keyframes fadeInRight {
 0% {
   opacity: 0;
   -moz-transform: translateX(30%);
}
100% {
   opacity: 1;
   -moz-transform: translateX(0);
}

}

@-webkit-keyframes appicofadeInRight {
 0% {
   opacity: 0;
   -webkit-transform: translateX(30%);
}
100% {
   opacity: 1;
   -webkit-transform: translateX(0);
}

}

@-ms-keyframes appicofadeInRight {
 0% {
   opacity: 0;
   -ms-transform: translateX(30%);
}
100% {
   opacity: 1;
   -ms-transform: translateX(0);
}

}

@-o-keyframes appicofadeInRight {
 0% {
   opacity: 0;
   -o-transform: translateX(30%);
}
100% {
   opacity: 1;
   -o-transform: translateX(0);
}

}

@keyframes appicofadeOutLeft {
 0% {
    opacity: 1;
    transform: translateX(0);
}
100% {
    opacity: 0;
    transform: translateX(-20%);
}

}

@-moz-keyframes fadeOutLeft {
 0% {
   opacity: 1;
   -moz-transform: translateX(0);
}
100% {
   opacity: 0;
   -moz-transform: translateX(-20%);
}

}

@-webkit-keyframes appicofadeOutLeft {
 0% {
   opacity: 1;
   -webkit-transform: translateX(0);
}
100% {
   opacity: 0;
   -webkit-transform: translateX(-20%);
}

}

@-ms-keyframes appicofadeOutLeft {
 0% {
   opacity: 1;
   -ms-transform: translateX(0);
}
100% {
   opacity: 0;
   -ms-transform: translateX(-20%);
}

}

@-o-keyframes appicofadeOutLeft {
 0% {
   opacity: 1;
   -o-transform: translateX(0);
}
100% {
   opacity: 0;
   -o-transform: translateX(-20%);
}

}

@keyframes appicofadeOutRight {
 0% {
    opacity: 1;
    transform: translateX(0);
}
100% {
    opacity: 0;
    transform: translateX(20%);
}

}

@-moz-keyframes fadeOutRight {
 0% {
   opacity: 1;
   -moz-transform: translateX(0);
}
100% {
   opacity: 0;
   -moz-transform: translateX(20%);
}

}

@-webkit-keyframes appicofadeOutRight {
 0% {
   opacity: 1;
   -webkit-transform: translateX(0);
}
100% {
   opacity: 0;
   -webkit-transform: translateX(20%);
}

}

@-ms-keyframes appicofadeOutRight {
 0% {
   opacity: 1;
   -ms-transform: translateX(0);
}
100% {
   opacity: 0;
   -ms-transform: translateX(20%);
}

}

@-o-keyframes appicofadeOutRight {
 0% {
   opacity: 1;
   -o-transform: translateX(0);
}
100% {
   opacity: 0;
   -o-transform: translateX(20%);
}

}