body, .magic-line, .magic-line li a, .single-slide, .slider-content, .btn-effect, .bullet, .feature-app-icon a, .feature-app-icon, .section-has-bg, .section-has-bg-content, .whychoose-img, .section-title, .question-img, .accordion-title, .accordion-heading, .single-member-img, .testimonial, .testimonial-img, .single-price, .screenshots-area  .owl-carousel .owl-item img , .screenshot-slide{position: relative;}
#magic-line, .section-overlay, .slide-bg, .slide-bg:before, .btn-effect:before, .magic-line.nav-menu li a:before,  #magic-line2, #magic-line2:before, .single-img, .section-saparator, .section-saparator:before, .section-saparator:after, .acco-title-icon, .acco-expand-icon, .member-social-icon, .testimonial:after, .owl-dots, .owl-dot.active:before, .testimonial:after, .testimonial-img span.icon-quote, .single-price:before, #mainslider  .owl-dot.active:before, .testimonial-carousel .owl-dot.active:before, .screenshot-app-bg{ position: absolute;}
body, html, .slider-area, .main-wrapper, .slider, .single-slide, .slider-content, .slider  .owl-stage-outer, .slider  .owl-stage, .slider  .owl-stage  .owl-item{height:100%}
.slide-bg, .slide-bg:before, .section-overlay, .btn-effect:before{
height: 100%;
width: 100%;}
.fix{overflow: hidden !important;}
.magic-line li, #fetured-nav li, .feature-app-icon a, .testimonial-img{float: left;}
.float_right {float: right;}


/*************************************************************
--------------------------------------------------------------
..................... SCREENSHOTS SECTION .................
--------------------------------------------------------------
*************************************************************/
.hidden-xs.screenshot-app-bg { text-align:left}
.section-title h3{color: #2c3e50;
letter-spacing: 3px;
margin-top: 0;}
.screenshots-area  .owl-carousel.owl-loaded {
display: block;
margin-top: -3px;
}
.screenshots-area  .owl-stage-outer{height: 100%;
padding: 25px 0 52px;}
.screenshots-area  .owl-carousel .owl-item img {
  top: 71px;
}
.screenshot-slide{}
.screenshot-app-bg{z-index:1}
.screenshots-area  .owl-item{} 
.screenshots-area  .owl-item.active{z-index:1}
.screenshots-area  .owl-item.big.active.center {
  height: 474px;
  padding: 17px;
  -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
          transform: scale(1.3);
}
.screenshots-area .owl-item{z-index:-1}
.screenshots-area  .owl-item.left.active{
-webkit-transform: perspective(1500px) translateX(-32%) rotateY(-40deg);
        transform: perspective(1500px) translateX(-32%) rotateY(-40deg);
-webkit-transform-origin: right center 0;
    -ms-transform-origin: right center 0;
        transform-origin: right center 0;
}
.screenshots-area  .owl-item.left.sm.active{
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transform: perspective(1500px) translateX(-14%) rotateY(-40deg) scale(0.8);
        transform: perspective(1500px) translateX(-14%) rotateY(-40deg) scale(0.8);z-index:11}

.screenshots-area  .owl-item.right.active{
  -webkit-transform: perspective(1500px) translateX(32%) rotateY(40deg);
          transform: perspective(1500px) translateX(32%) rotateY(40deg);
  -webkit-transform-origin: left center 0;
      -ms-transform-origin: left center 0;
          transform-origin: left center 0;
}
.screenshots-area  .owl-item.right.sm.active{-webkit-transform: perspective(1500px) translateX(14%) rotateY(40deg) scale(0.8);transform: perspective(1500px) translateX(14%) rotateY(40deg) scale(0.8);opacity:0.5;filter: alpha(opacity=50)}
.screenshots-area  .owl-nav{margin-top: 38px;
text-align: center;}
.screenshots-area  .owl-nav div{background: #2c3e50 none repeat scroll 0 0;
color: #ffffff;
display: inline-block;
font-size: 22px;
height: 34px;
padding-top:2px;
text-align: center;
width: 34px;-webkit-transition: color 0.3s ease 0s;transition: color 0.3s ease 0s}
.screenshots-area  .owl-nav div.owl-next{margin-left: 2px;}
.screenshot-app-bg{
left: -webkit-calc(50% - 146.4px);
left: expression(50% - 146.4px);
left: -moz-calc(50% - 146.4px);
left: -o-calc(50% - 146.4px);
left: calc(50% - 146.4px);
top: -webkit-calc(46% - 292.5px);
top: expression(46% - 292.5px);
top: -moz-calc(46% - 292.5px);
top: -o-calc(46% - 292.5px);
top: calc(46% - 292.5px);
}
.screenshot-app-bg img{
width: -webkit-calc(100% - 33px);
width: expression(100% - 33px);
width: -moz-calc(100% - 33px);
width: -o-calc(100% - 33px);
width: calc(100% - 33px);
}

body.preloder_priview{overflow:hidden}
#loader-wrapper {
background: rgba(255, 255, 255, 0.95) none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}