/* Generic styling for ALS elements */
.sliderpage{
	background: none !important;
}
#vpro{
  display:block;
  margin: 20px auto;
  /*border-top: 1px solid #f53753;
  border-bottom: 1px solid #f53753;*/
  background: #fafafa;
}
#editvpro{
  margin: 20px auto;
  border-top: 1px solid rgba(51, 51, 51, 0.2);
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
  background: #fafafa;
}
.als-container{
    position:relative;
    width:100%;
    margin:0 auto;
    z-index:0;
}
.als-viewport{
    position:relative;
    overflow:hidden;
    margin:0px auto;
	width:95% !important;
}
#editvpro .als-viewport{
	width:90% !important;
}
.als-wrapper{
    position:relative;
    list-style:none;
}
.als-item{
    position:relative;
    display:block;
    text-align:center;
    cursor:pointer;
    float:left;
}
.als-prev, .als-next{
    position:absolute;
    cursor:pointer;
    clear:both;
}
/* specific  styling for #demmo1 */
#vpro .als-item, #editvpro .als-item{
    padding:0 5px;
    text-align:center;
}
#vpro .als-item img, #editvpro .als-item img{
    display:block;
    margin:0 auto;
    vertical-align:middle;
}
#vpro .als-prev, #vpro .als-next{
    top:35%;
	color: #f53753;
	transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
#editvpro .als-prev, #editvpro .als-next{
    top:30%;
	color: #212121;
	transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
#vpro .als-prev:hover, #vpro .als-next:hover, #editvpro .als-prev:hover, #editvpro .als-next:hover{
	box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -o-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#vpro .als-prev, #editvpro .als-prev{
    left:5px;
}
#vpro .als-next, #editvpro .als-next{
    right:5px;
}
#editvpro .als-viewport img{
	height:auto !important;	
	width:105px !important;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/
/***************************************************************/
/*************** Footer Bar Style ******************************/
/***************************************************************/
.footer-bar
{
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #111;
    border-top: 1px solid #E62600;
    position: fixed;
    bottom: 0;
    left: 0;
}
.footer-bar .article-wrapper{
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #888;
    float: left;
    margin-left: 10%;
}
.footer-bar .article-link a, .footer-bar .article-link a:visited{
    text-decoration: none;
    color: #fff;
}
.site-link a, .site-link a:visited{
    color: #888;
    font-size: 14px;
    font-family: arial, sans-serif;
    float: right;
    margin-right: 10%;
    text-decoration: none;
}
.site-link a:hover{
    color: #E62600;
}
/*----*/
.text-desc{
	position: absolute; 
	left: 0; top: 0;
	background-color: rgba(33, 33, 33, 0.62);
	height: 100%; 
	opacity: 0;
	width: 100%;
	padding: 20px;
 }
/* effect-7 css */
.port{
	float: left;
	 width: 100%; 
	 position: relative; 
	 overflow: hidden;
	 text-align: center;
	 overflow: hidden;
 }
.port .text-desc{
	opacity: 0;
	 transition: 0.5s;
	 color: #fff;
 }
 .port .text-desc h6{
	font-size: 1.2em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    font-weight: bold;
 }
.port .text-desc p{
	font-size: 0.9em;
    line-height: 1.6em;
    letter-spacing: 0px;
	max-height:85px;
	overflow:hidden;
 }
.port.effect-1 img{
	transition: 0.5s; 
	position: relative;
	 max-width: 100%;
	 height:auto;
	 left: 0;
 }
.port.effect-1:hover img{
	left: 50%;
}
.port.effect-1 .text-desc{
	transform: perspective(600px) rotateY(90deg); 
	transform-origin: left center 0;
	width: 50%;
	position: absolute;
	left: 0; top: 0; 
	padding: 3em 0.7em;
 }
.port.effect-1:hover .text-desc{
	opacity: 1; 
	transform: perspective(600px) rotateY(0deg);
	 z-index: 99;
}
.port .text-desc p.views{
	padding:5px 0;
}
/* effect-7 css end */
.als-item img{
	width:290px !important;
}
.port .text-title{
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(51, 51, 51, 0.69);
    color: #f5f5f5;
    padding: 10px;
}
.port:hover .text-title{
	opacity:0;
}
/*-- responsive-design --*/
@media(max-width:1440px){
	.port.effect-1 .text-desc {
		transform: perspective(600px) rotateY(90deg);
		transform-origin: left center 0;
		width: 50%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 3.5em 0.7em;
	}
	.als-item img{
		width:332px !important;
	}
}
@media(max-width:1366px){
	.als-item img{
		width:314px !important;
	}
}
@media(max-width:1280px){
	.port.effect-1 .text-desc {
		padding: 3em 0.7em;
	}
	 .port .text-desc p {
		font-size: 0.85em;
		line-height: 1.6em;
		max-height:80px;
	}
	.als-item img{
		width:290px !important;
	}
}
@media(max-width:1080px){
	.port.effect-1 .text-desc {
		padding: 2em 0.7em;
	}
	.als-item img{
		width:246px !important;
	}
	#editvpro .als-prev, #editvpro .als-next{
		top:20%;
	}
	#editvpro .als-viewport img{
		width:85px !important;
	}
}
@media (max-width: 1050px){
	.port.effect-1 .text-desc {
		padding: 1.7em 0.7em;
	}
	 .port .text-desc p {
		font-size: 0.80em;
		line-height: 1.5em;
		max-height: 67px;
	}
	.als-item img{
		width:239px !important;
	}	
}
@media(max-width:1024px){
	.port.effect-1 .text-desc {
		padding: 2.5em 0.7em;
	}
	 .port .text-desc p {
		font-size: 0.9em;
		line-height: 1.6em;
		max-height: 82px;
	}
	.als-viewport{
		width:94% !important;
	}
	.als-item img{
		width:310px !important;
	}
}
@media(max-width:991px){
	.als-item img{
		width:300px !important;
	}
	.menu-main {
		padding-right: 0px;
		padding-left: 0;
	}
	
	#editvpro .als-viewport img{
		width: 72px !important;
	}
}
@media(max-width:900px){
	.port.effect-1 .text-desc {
		padding: 2em 0.6em;
	}
	.als-item img{
		width:272px !important;
	}
}
@media(max-width:800px){
	.port.effect-1 .text-desc {
		padding: 1.5em 0.5em;
	}
	.port .text-desc p {
		font-size: 0.85em;
		line-height: 1.5em;
		max-height: 72px;
	}
	.als-item img{
		width:240px !important;
	}
}
@media(max-width:768px){
	.port.effect-1 .text-desc {
		padding: 3em 1em;
	}
	.port .text-desc p {
		font-size: 0.9em;
		line-height: 1.6em;
		max-height: 85px;
	}
	.als-item img{
		width:350px !important;
	}
	.menu-main {
		padding-right: 5px;
		padding-left: 5px;
	}
}
@media(max-width:767px){ 
	.als-item img{
		width:350px !important;
	}
	.menu-main {
		padding-right: 15px;
		padding-left: 15px;
	}
	.mg-top{
		margin-top:50px;
	}
}
@media (max-width: 736px){
	.als-item img{
		width:335px !important;
	}
}
@media(max-width:667px){
	.port.effect-1 .text-desc {
		padding: 2em 0.7em;
	}
	.als-item img{
		width:303px !important;
	}
	#editvpro .als-viewport img {
		width: 62px !important;
	}
}
@media(max-width:650px){
	.als-item img{
		width:295px !important;
	}
	#editvpro .als-viewport img {
		width: 60px !important;
	}
}
@media(max-width:640px){
	.port.effect-1 .text-desc {
		padding: 2em 0.5em;
	}
	.als-item img{
		width:290px !important;
	}
	#editvpro .als-viewport img {
		width: 58px !important;
	}
}
@media(max-width:600px){
	.port .text-desc p {
		font-size: 0.85em;
		line-height: 1.5em;
		max-height: 72px;
	}
	.als-viewport{
		width:92% !important;
	}
	.als-item img{
		width:266px !important;
	}
	#editvpro .als-viewport img {
		width: 53px !important;
	}
}
@media (max-width: 568px){
	.port.effect-1 .text-desc {
		padding: 1.8em 0.5em;
	}
	.als-item img{
		width:251px !important;
	}
	#editvpro .als-viewport img {
		width: 49px !important;
	}
}
@media(max-width:540px){
	.port .text-desc h6 {
		font-size: 1.5em;
	}
	.port.effect-1 .text-desc {
		padding: 3.5em 1.5em;
	}
	.port .text-desc p {
		font-size: 1.1em;
		line-height: 1.6em;
		max-height: 99px;
	}
	.als-item img{
		width:485px !important;
	}
	#editvpro .als-prev, #editvpro .als-next{
		top:30%;
	}
	#editvpro .als-viewport img {
		width: 145px !important;
	}
}
@media(max-width:480px){
	.als-viewport{
		width:90% !important;
	}
	.als-item img{
		width:422px !important;
	}
	#editvpro .als-prev, #editvpro .als-next{
		top:33%;
	}
	#editvpro .als-viewport img {
		width: 127px !important;
	}
}
@media(max-width:425px){
	.port.effect-1 .text-desc {
		padding: 3em 1em;
	}
	.als-viewport{
		width:86% !important;
	}
	.als-item img{
		width:365px !important;
	}
	#editvpro .als-prev, #editvpro .als-next{
		top:30%;
	}
	#editvpro .als-viewport img {
		width: 110px !important;
	}
}
@media(max-width:414px){
	.port.effect-1 .text-desc {
		padding: 2.7em 1em;
	}
	.als-item img{
		width:356px !important;
	}
	#editvpro .als-prev, #editvpro .als-next{
		top:28%;
	}
	#editvpro .als-viewport img {
		width: 105px !important;
	}
}
@media(max-width:384px){
	.port.effect-1 .text-desc {
		padding: 2.7em .8em;
	}
	.port .text-desc p {
		font-size: 1em;
		line-height: 1.6em;
		max-height: 92px;
	}
	.als-item img{
		width:330px !important;
	}
	#editvpro .als-prev, #editvpro .als-next{
		top:25%;
	}
	#editvpro .als-viewport img {
		width: 95px !important;
	}
}
@media(max-width:375px){
	.port.effect-1 .text-desc {
		padding: 2em .7em;
	}
	.port .text-desc p {
		font-size: 1em;
		line-height: 1.6em;
		max-height: 92px;
	}
	.als-item img{
		width:322px !important;
	}
}
@media(max-width:330px){
	.port.effect-1 .text-desc {
		padding: 1.7em .5em;
	}
	.port .text-desc p {
		font-size: .9em;
		line-height: 1.55em;
		max-height: 79px;
	}
	.als-viewport{
		width:82% !important;
	}
	.als-item img{
		width:262px !important;
	}
	#editvpro .als-prev, #editvpro .als-next{
		top:20%;
	}
	#editvpro .als-viewport img {
		width: 80px !important;
	}
}
/*-- //responsive-design --/
/*-------------------------
BANER SLIDER  PAGE SYSTEM
-------------------------*/
.slider {
	position: relative;
} 
.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
} 
.rslides li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;
}

.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
}

.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
}

.callbacks_nav {
	position: absolute;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	top: 55%;
	left: 0;
	opacity: 0.7;
	z-index: 3;
	text-indent: -9999px;
	text-decoration: none;
	height: 61px;
	width: 38px;
	background: transparent url("../images/themes.gif") no-repeat left top;
	margin-top: -45px;
}
.callbacks_nav.next {
	left: auto;
	background-position: right top;
	right: 0;
}
.callbacks_nav {
	left: 20px;
} 
.callbacks_nav.next {
	right: 20px;
}
.solution .callbacks_tabs{
	display:none !important;
}
/*-------------------------
BANER SLIDER  PAGE PRODUCTS
-------------------------*/
.page-products .callbacks_nav {
    background: url(../images/img-sp.png) no-repeat -11px -16px;
    width: 50px;
}
.page-products .callbacks_nav.next {
    left: auto;
    background-position: 21% 11%;
    right: 20px;
}

/*-- banner --*/
/*------------------ Slider Part starts Here----------*/

.callbacks_container {
  position: relative;
  float: left;
  width: 100%;
  background: rgba(33, 33, 33, 0.65);
  top:120px;
}
.callbacks li {
  position: absolute;
  left: 0;
  top: 0;
}
.callbacks img {
  position: relative;
  z-index: 1;
  height: auto;
  border: 0;
}
.callbacks_nav:active {
  opacity: 1.0;
}
.callbacks_tabs{
	list-style: none;
	position: absolute;
	bottom: -18%;
	z-index: 999;
	left: 47%;
	padding: 0;
	margin: 0;
}
.callbacks_tabs li{
	display: inline-block;
	margin:0;
}
@media screen and (max-width: 600px) {
  .callbacks_nav {
    top: 47%;
    }
}
/*----*/
.callbacks_tabs a{
 visibility: hidden;
}
.callbacks_tabs a:after {
  content: "\f111";
  font-size:0;
  font-family: FontAwesome;
  visibility: visible;
  display: block;
  height:13px;
  width:13px;
  display:inline-block;
  background: #FFFFFF;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  -ms-border-radius: 25px;
  border: 2px solid #FFFFFF;
}
.callbacks_here a:after{
	background: #1ABC9C;
	border: 2px solid #FFFFFF;
}
/*------------------ Slider Part ends Here----------*/
.banner-info-slider{
	padding:1.5em;
	float:left;
}
.banner-info-slider-left{
	float:left;
	width:70%;
	padding:0 .5em 0 1.5em;
}
.banner-info-slider-right{
	float:left;
	text-align:left;
	width:30%;
	padding-left:10px;
}
.banner-info-slider h3{
	color: #fff;
    font-size: 2em;
    text-transform: uppercase;
    font-weight: 400;
    margin: .5em 0;
}
.banner-info-slider p{
	font-size: 1.5em;
    color: #fff;
    line-height: 1.8em;
    font-weight: 300;
	margin:0 0 0.5em;
}