/*------------------------------------------------------------------
    IMPORT FILES
-------------------------------------------------------------------*/

@import url(css/animate.css);

@import url(css/hero-slider.css);
@import url(css/swiper.min.css);
@import url(css/bootstrap-select.min.css);
@import url(css/owl.carousel.css);
/*@import url(css/prettyPhoto.css);

@import url(css/font-awesome.min.css);
@import url(css/flaticon.css);*/



a img.alignright {
    float: right;
    margin: 10px 0 20px 20px;
}

a img.alignnone {
    margin: 10px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 10px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}






.owl-buttons{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 40%;
    left: 0;
}
.owl-prev,
.owl-next{
    position: absolute;
    left: 0;
    transition: all 0.4s ease-in-out 0s;
}
.owl-next{
    left: auto;
    right: 0;
}
.owl-buttons .owl-prev:before,
.owl-buttons .owl-next:before{
    content: "\f104";
    font-family:'FontAwesome';
    font-weight: 900;
    font-size: 60px;
    font-weight: 900;
    color: #cacaca;
    line-height: 20px;
    opacity: 0.8;
}
.owl-buttons .owl-next:before{
    content: "\f105";
}
.owl-buttons .owl-prev:hover:before,
.owl-buttons .owl-next:hover:before{
    opacity: 1;
}
.owl-theme .owl-controls .owl-buttons div{
    background: transparent;
}
.owl-theme .owl-controls{
    margin-top: 40px;
}
.owl-theme .owl-dots .owl-dot{
	display: inline-block;
}
.owl-theme .owl-dots .owl-dot span{
    width: 50px;
    height: 50px;
	display: block;
	margin: 5px 7px;
    border-radius: 50%;
    border: 4px solid #333333;
    background: url("uploads/img-2.jpg") no-repeat;
    background-size: cover;
    transition: all 0.3s ease-in-out 0s;
}
.owl-theme .owl-dots .owl-dot:nth-child(2) span{
    background: url("uploads/img-1.jpg") no-repeat;
    background-size: cover;
}
.owl-theme .owl-dots .owl-dot:nth-child(3) span{
    background: url("uploads/img-3.jpg") no-repeat;
    background-size: cover;
}
.owl-theme .owl-dots.clickable .owl-dot:hover span{
    opacity: 0.5;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot.active:hover span{
    border-color: #E65100;
    opacity: 1;
}
@media only screen and (max-width: 479px){
    .owl-buttons{ bottom: 30%; }
}



/*------------------------------------------------------------------
    ICON BOXES
-------------------------------------------------------------------*/

.icon-wrapper {
    position: relative;
    cursor: pointer;
    display: block;
    z-index: 1;
}

.icon-wrapper i {
    width: 75px;
    height: 75px;
    text-align: center;
    line-height: 75px;
    font-size: 28px;
    background-color: #f2f3f5;
    color: #1f1f1f;
    margin-top: 0;
}

.small-icons.icon-wrapper:hover i,
.small-icons.icon-wrapper:hover i:hover,
.small-icons.icon-wrapper i {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: #e3e3e3 !important;
    background-color: transparent !important;
    background: none !important;
    margin-right: 10px !important;
    vertical-align: middle;
    font-size: 24px !important;
}

.small-icons.icon-wrapper h3 {
    font-size: 18px;
    padding-bottom: 5px;
}

.small-icons.icon-wrapper p {
    padding: 0;
    margin: 0;
}

.icon-wrapper h3 {
    font-size: 21px;
    padding: 0 0 15px;
    margin: 0;
}

.icon-wrapper p {
    margin-bottom: 0;
    padding-left: 95px;
}

.icon-wrapper p small {
    display: block;
    color: #999;
    margin-top: 10px;
    text-transform: none;
    font-weight: 600;
    font-size: 16px;
}

.icon-wrapper p small:after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 5px;
    font-size: 11px;
}


.post-media {
    position: relative;
}

.post-media img {
    width: 100%;
}





.playbutton {
    position: absolute;
    color: #ffffff !important;
    top: 40%;
    font-size: 60px;
    z-index: 12;
    left: 0;
    right: 0;
    text-align: center;
    margin: -20px auto;
}

.hoverbutton {
    background-color: #99c129;
    position: absolute;
    color: #ffffff !important;
    top: 48%;
    font-size: 21px;
    z-index: 12;
    left: 0;
    opacity: 0;
    right: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: -20px auto;
}

.service-widget:hover .hoverbutton {
    opacity: 1;
}





.sep1 {
    display: block;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    bottom: -20px;
    left: 50%;
    margin-left: -14px;
    background-color: #1f1f1f;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}

.sep2 {
    display: block;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    top: -20px;
    left: 50%;
    margin-left: -14px;
    background-color: #1f1f1f;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}

.swiper-wrapper {
    padding: 20px 0 20px;
}
.swiper-slide.swiper-slide-active .post-media img {
    border-radius: 30px;
}

.mobilescreen-image{
	background-image: url(uploads/app-mobile.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;	
	display: block;
	height: 675px;
	margin-top:19px;
	left: calc(50% + 0.5px);
	position: absolute;	
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 410px;
	z-index: 2;
	top: 24px;
/*	-webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
	border-radius: 60px;
	
	*/
}





.owl-screenshots .swiper-button-next, .owl-screenshots .swiper-button-prev{
	background-image: none;
	font-size: 54px;
	color: #8bc34a;
}

.owl-screenshots .swiper-button-next:hover, .owl-screenshots .swiper-button-prev:hover{
	color: #214e51;
}

.swiper-pagination-bullet{
	opacity: 1;
	background: #333333;
}
.swiper-pagination-bullet-active{
	background: #99c129;
}

.swiper-container-horizontal > .swiper-pagination-bullets{
	bottom: -7px;
}



    .box{
        width: 100%;
        height: 100%;            
        position: absolute;
        top: 0;
        left: 0;
       /* opacity: 0.8;   for demo purpose  */
    }
    .stack-top{
        z-index: 9;
       /* margin: 20px;  for demo purpose  */
    }



.containerS {
  position: relative;
	width:60%;
	
}


.item1 {
 /* background: blue;*/
	width:100%;
	height:100%;
	
}

.item2 {
  top: 0px;
  left: 0px;
  position: absolute;
/*background: red;*/
	width:100%;
	height:100%;
		
}

.card {

    border-radius: 45px;
	width:280px;height:480px;padding:0px;background:#fdfdfd;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black;margin-top:0px;
	background-size: 100% 100%;	
	left: calc(50% + 0.5px);
	position: absolute;
	top: 10px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;

}

.card1{width:268px;height:470px;position:absolute;top:5px;left:5px;border-radius:40px;background:#000000;z-index:1;}

/* iphone X 
.card:before{width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;content:'';left:5px;border-radius:40px;background:#000000;z-index:1}*/
.roll{
	height:480px;width:270px;padding-left:6px;margin-top:-13px;border-radius:0px;
	
}




.card .inner-shadow:before{-webkit-box-shadow:inset 0 0 10px 0 #FFFFFF;box-shadow:inset 0 0 10px 0 #FFFFFF;width:100%;height:116%;
	position:absolute;top:-8%;content:'';left:0;border-radius:10px / 112px;z-index:2}
.card .inner-shadow{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;overflow:hidden;left:10px;
	border-radius:40px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);z-index:1}
.card .inner-shadow:before{-webkit-box-shadow:inset 0 0 10px 0 #FFFFFF;box-shadow:inset 0 0 10px 0 #FFFFFF;width:100%;height:116%;
	position:absolute;top:-8%;content:'';left:0;border-radius:10px / 112px;z-index:2}
.card .screen{border-radius:30px;-webkit-box-shadow:none;box-shadow:none; background:#000000;width:100%!important;height: 100%;}
.card .volume,.card .volume:before,.card .volume:after,
.card .sleep{width:3px;background:#b5b5b5;position:absolute}.card .volume{left:-3px;top:116px;height:32px}
.card .volume:before{height:62px;top:62px;content:'';left:0}.card .volume:after{height:62px;top:140px;content:'';left:0}
.card .sleep{height:96px;top:200px;right:-3px}.card .camera{width:6px;height:6px;top:9px;border-radius:100%;position:absolute;left:54px;background:rgb(48, 212, 90);}
.card .speaker{height:6px;width:40px;left:50%;position:absolute;top:9px;margin-left:-30px;background:#171818;border-radius:6px}
.card .notch{position:absolute;width:80px;height:20px;top:11px;left:100px;z-index:4;background:#000000;border-radius:20px;}
.card .notch:before,.card .notch:after{content:'';height:8px;position:absolute;top:0;width:8px;z-index:4;}
.card .notch:after{/*background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);*/left:-8px}
.card .notch:before{/*background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);*/right:-8px}