﻿
/*******--------slider wrapper start--------***********/
/*-- hs Slider Start --*/
.slider-area{
	float:left;
	width:100%;
	position:relative;
}

.slider-area .carousel-inner .item .caption-1{
  width:100%;
  height:100%;
  background-position: center!important;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background: url("../images/slider_img2.jpg");
  position: relative;
  min-height:500px;
}


@keyframes scale {
  50% {
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
  }
}


.slider-area .carousel-inner .item .carousel-captions .content {
  display: block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  padding-top:300px;
  padding-bottom:100px;
  float:left;
  text-align:left;
  z-index:10000;
  margin-left:110px;
}
.slider-area .carousel-inner .item .carousel-captions .content h2,
.slider-area .carousel-inner .item .carousel-captions .content p {
  color: #174282;
  font-size:38px;
  font-weight: 600;
   font-family: 'Montserrat', sans-serif;
  line-height:50px;
  margin: 0 0 20px;
  animation-delay: 1.2s;
  text-transform:none;
  background-color: rgba(255,255,255,0.5);
  padding: 0px 10px;
}
.slider-area .carousel-inner .item .carousel-captions .content h2 span{
  color: #fff;
  font-size:40px;
  font-weight: 400;
   font-family: 'Montserrat', sans-serif;
  margin: 0 0 20px;
  animation-delay: 1.2s;
  text-transform:uppercase;
}
.hs_effect_btn ul{
	float:left;
	margin:0;
	padding:0;
}
.hs_effect_btn li{
	float:left;
	list-style:none;
}
.hs_effect_btn li a{
	float: left;
    width: auto;
    height: 50px;
    background: #174282;
    color: #ffffff;
    text-align: center;
    font-size: 15px;
    line-height:50px;
    margin-top: 20px;
    padding: 0 30px;
	font-weight:bold;
	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-family: 'Open Sans', sans-serif;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.hs_effect_btn li a:hover{
    background: #2e7ec8;
    color: #ffffff;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.slider-area .carousel-inner .item .carousel-captions .content li{
	animation-delay: 2.5s;
}
.slider-area .carousel-inner .carousel-indicators li {
	float:left;
  text-indent: 0;
  position: relative;
  width: 14px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.4);
  display: block;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  margin: 0;
  color: #fff;
  margin-right:10px;
  text-align: left;
  margin-top:10px;
   -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	border:1px solid #2e7ec8;
}
.slider-area .carousel-inner .carousel-indicators{
	position: absolute;
    margin: 0px auto;
	width:100%;
	left:45%;
    z-index: 100;
    display: block;
	bottom:40px;
}
.slider-area .carousel-inner .carousel-indicators li span.number {
  display: inline-block;
}
.slider-area .carousel-inner .carousel-indicators li span.con {
  display: inline-block;
  position: relative;
  padding-left: 42px;
}
.slider-area .carousel-inner .carousel-indicators li span.con:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: #cf9c67;
  width: 26px;
}
.slider-area .carousel-inner .carousel-indicators li.active {
  background: #fccf34;
    width: 14px;
    height: 14px;
}
.carousel-nevigation{
	position: absolute;
    margin: 0;
    right: 0;
    bottom:8%;
    z-index: 1000;
    display: block;
}
.carousel-nevigation > .prev{
	right:150px;
	position:absolute;
	width:80px;
	height:45px;
	color:#fff;
	font-family: 'Open Sans', sans-serif;
	background:transparent;
	border:1px solid #fff;
	line-height:46px;
	text-align:center;
	    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.carousel-nevigation > .next{
	right:50px;
	position:absolute;
	width:80px;
	height:45px;
	color:#fff;
	line-height:46px;
	margin-left:15px;
	border:1px solid #fff;
	background:transparent;
	font-family: 'Open Sans', sans-serif;
	text-align:center;
	 -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.carousel-nevigation > .next:hover, .carousel-nevigation > .prev:hover{
	background:#fff;
	color:#2e7ec8;
	    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
/*******----------- hs Slider End ---------***********/


/*********----------991 responsive css-------**********/
@media (max-width: 991px){
	.slider-area .carousel-inner .item .carousel-captions .content{
		margin-left:20px;
	}
}



/*********----------480 responsive css-------**********/
@media (max-width: 480px){
	.slider-area .carousel-inner .item .carousel-captions .content h2{font-size:32px; width: 100%;}
	.slider-area .carousel-inner .item .carousel-captions .content h2 span{font-size:32px;}
	.slider-area .carousel-inner .item .carousel-captions .content{
		margin-left:20px;
	}

}
/*********------------481 $ 766 css-------*************/
@media (min-width: 481px) and (max-width: 766px){
	.slider-area .carousel-inner .item .carousel-captions .content h2{font-size:34px; width: 100%;}
	.slider-area .carousel-inner .item .carousel-captions .content h2 span{font-size:34px;}
	.slider-area .carousel-inner .item .carousel-captions .content{
		margin-left:20px;
	}
}
/*********----------320 responsive css-------**********/
@media (max-width: 320px){
	.slider-area .carousel-inner .item .carousel-captions .content h2{
		font-size:26px;
	}
	.slider-area .carousel-inner .item .carousel-captions .content h2 span{
		font-size:26px;
	}
}



@media (max-width: 550px){
	.slider-area .carousel-inner .item .carousel-captions .content{
		margin-left:0;
		text-align:center;
  padding-top:100px;
  padding-bottom:50px;
	}
	.slider-area .carousel-inner .item .caption-1:after, .slider-area .carousel-inner .item .caption-2:after, .slider-area .carousel-inner .item .caption-3:after{
		display:none;
	}
	.carousel-nevigation{
		display:none;
	}
	.hs_effect_btn ul{
		float:none;
		display:inline-block;
	}
}







.med_toppadder10{
	padding-top:10px;
}
.med_toppadder20{
	padding-top:20px;
}
.med_toppadder30{
	padding-top:30px;
}
.med_toppadder40{
	padding-top:40px;
}
.med_toppadder50{
	padding-top:50px;
}
.med_toppadder60{
	padding-top:60px;
}
.med_toppadder70{
	padding-top:70px;
}
.med_toppadder80{
	padding-top:80px;
}
.med_toppadder90{
	padding-top:90px;
}
.med_toppadder100{
	padding-top:100px;
}
.med_bottompadder10{
	padding-bottom:10px;
}
.med_bottompadder20{
	padding-bottom:20px;
}
.med_bottompadder30{
	padding-bottom:30px;
}
.med_bottompadder40{
	padding-bottom:40px;
}
.med_bottompadder50{
	padding-bottom:50px;
}
.med_bottompadder60{
	padding-bottom:60px;
}
.med_bottompadder70{
	padding-bottom:70px;
}
.med_bottompadder80{
	padding-bottom:80px;
}
.med_bottompadder90{
	padding-bottom:90px;
}
.med_bottompadder100{
	padding-bottom:100px;
}
/*-----scroll top-----*/



/*********------what can we do wrapper---------*************/
.what_can_Wrapper{
	float:left;
	width:100%;
	padding-top:100px;
	padding-bottom:90px;
	background:#f9f9f9;
}
.sw_disc_img_btm{
	position:absolute;
	top:0;
	left:0;
	 -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.sw_right_img_wrapper:hover .sw_disc_img_btm{
	top:60px;
	left:-80px;
	 -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.sw_desc_abt{
	float:left;
	width:100%;
	padding-left:30px;
}
.sw_desc_btm_txt{
	float: left;
    width: 100%;
	margin-bottom:20px;
}
.sw_disc_image {
    float: left;
    width: 50px;
	line-height:60px;
	 -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.sw_disc_image i:before{
	color:#2c416c;
	font-size:46px;
}
.sw_disc_head_text {
    font-size: 15px;
    font-weight: 500;
    float: left;
    width: calc(100% - 50px);
    padding-left: 20px;
    padding-right: 40px;
}
.sw_disc_head_text h5 a {
    font-size: 20px;
    color: #1e9ce5;
	text-transform:uppercase;
    font-weight: 600;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.sw_disc_head_text p{
	margin-top:6px;
	margin-bottom:8px;
}
.sw_disc_head_text h6 a {
    font-size: 14px;
	text-transform:uppercase;
    color: #2c416c;
	font-weight:600;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.sw_disc_head_text h6 a:hover{
    color: #1e9ce5;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.sw_dark_heading_wraper h1{
	color:#fff;
}
.sw_desc_btm_txt:hover .sw_disc_image{
	transform: scale(1.2);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
div#comparison { 
  width:29vw;
  height: 24vw;
  overflow: hidden;
  }
div#comparison figure { 
  background-image: url('../images/old1_img.jpg'); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison figure > img { 
  position: relative;
  width: 100%;
}
div#comparison figure div { 
  background-image: url('../images/new1_img.jpg');
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: -4px;
    height: 100%;
}
input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  top: -15rem; left: -9px;
  background-color: transparent;
  width: 104%; 
}
input[type=range]:focus { 
  outline: none; 
}
input[type=range]:active { 
  outline: none;  
}

input[type=range]::-moz-range-track { 
  -moz-appearance:none;
    height:15px;
    width: 98%;
    background-color: rgba(255,255,255,0.1); 
    position: relative;
    outline: none;    
 }
input[type=range]::active { 
  border: none; 
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width: 25px; height: 25px;   
    background: #1e9ce5;
	 border:6px solid rgba(225, 225, 225, 0.7);
    border-radius: 50px;
   }
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  background: #1e9ce5;
  border:6px solid rgba(225, 225, 225, 0.7);
  border-radius: 50px;
     }   
input[type=range]:focus::-webkit-slider-thumb {
    background: #1e9ce5;
   }
input[type=range]:focus::-moz-range-thumb {
    background: #1e9ce5;
   }
   





@media (max-width: 1650px){
	div#comparison{
		width:100%;
		height:29vw;
	}
}

@media (max-width: 1500px){
div#comparison {
    width: 100%;
    height: 32vw;
}
}

@media (min-width: 1300px) and (max-width: 1400px){
div#comparison {
    width: 100%;
    height: 35vw;
}
}

@media (max-width: 1300px){
div#comparison {
    width: 100%;
    height: 36vw;
}
}


@media (max-width: 1024px){
	div#comparison {
    width: 100%;
    height: 37vw;
}
	
}
/*********----------991 responsive css-------**********/
@media (max-width: 991px){
	div#comparison{
		width:45vw;
	}
	.sw_desc_abt{
		padding-left:0;
		padding-top:50px;
	}
	input[type=range]{
		top: -12rem;
	}
	
}

/*********----------768 responsive css-------**********/
@media (min-width: 768px) and (max-width: 991px){
input[type=range] {
    top: -10rem;
}


}

/*********----------767 responsive css-------**********/
@media (max-width: 767px){
	.what_can_Wrapper{
		padding-bottom:70px;
	}
	div#comparison{
		display:none;
	}

}




