@media(min-width:1020px){
  .animateimg{
position :relative !important;
-webkit-animation: mymove 1s !important; /* Safari 4.0 - 8.0 */
animation: mymove 1s !important;
}
@keyframes mymove {
    from {top: 700px;}
    to {top: 0px;}
}
  html, body{
    width:100% !important;
    height:100% !important;
    background-color:#fff !important;
  }
.carousel-inner,.carousel,.item,.container,.fill {
  height:100% !important;
  width:100% !important;
  background-position:center center !important;
  background-size:cover !important;
}
.slide-wrapper{display:inline !important;}
.slide-wrapper .container{padding:0px !important;}

/*------------------------------ vertical bootstrap slider----------------------------*/

.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
   -webkit-transition: 0.6s ease-in-out top;
   -moz-transition: 0.6s ease-in-out top;
   -ms-transition: 0.6s ease-in-out top;
   -o-transition: 0.6s ease-in-out top;
   transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
   top: 0;
}

.carousel.vertical .next {
   top: 400px;
}

.carousel.vertical .prev {
   top: -400px;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
   top: 0;
}

.carousel.vertical .active.left {
   top: -400px;
}

.carousel.vertical .active.right {
   top: 400px;
}

.carousel.vertical .item {
   left: 0;
}

/*------------------------------- vertical carousel indicators ------------------------------*/
.carousel-indicators{
position:absolute !important;
top:0 !important;
bottom:0 !important;
margin:auto !important;
height:20px !important;
right:10px; left:auto !important;
width:auto !important;
}
.carousel-indicators li{display:block !important; margin-bottom:5px !important; border:1px solid #00a199 !important; }
.carousel-indicators li.active{margin-bottom:5px !important; background:#00a199 !important;}
}

.carouselImgPart.animate{
position :relative;
-webkit-animation: mymove 1s ; /* Safari 4.0 - 8.0 */
animation: mymove 1s;
}

#carouselImgPart{
position :relative;

}
.slide-wrapper i{

	color:#17d826;
}
.arrows{

  position: absolute;
  left:10%;
  bottom:2%;
}
@keyframes mymove {
    from {top: 700px;}
    to {top: 0px;}
}
@keyframes MOVE-BG {
	 0%   {background: #e3e3e3; top: 100px;}
    100%  {background: yellow;  top: 0px;}
}
.greenhr{
    margin-bottom: 10%;
    margin-top: -1.8%;
    border-top-width: 3px;
    width: 13%;
    border-color: #17d826;
    border-style: solid;
    border-radius: 5px 5px 5px 5px;
}

#carouselSection1{
	padding: 5% 5% 15% 10%;
	/*background: linear-gradient(90deg, #FFFFFF 60%, #F4F4F4 40%);*/
	height:100%;

}
#carouselSection3 {
	padding: 5% 5% 20% 10%;
	background: linear-gradient(90deg, #FFFFFF 60%, #F4F4F4 40%);
	height:100%;

}
#myCarousel{

	/*background: linear-gradient(90deg, #FFFFFF 60%, #F4F4F4 40%);*/
}
#carouselSection2 {
	padding: 5% 5% 22% 10%;
	background: linear-gradient(90deg, #FFFFFF 60%, #9b9999 40%);
	height:100%;
}

#carouselTxtPart h1 {
	padding: 10% 5% 0% 0%;
}

#carouselTxtPart p:first-child {
	padding:5% 20% 5% 0%;
	line-height: 150%;
}

#carouselTxtPart p {
	padding:0% 20% 5% 0%;
	line-height: 150%;
    color:#676565;
}

#carouselTxtPart hr {
	width:10%;
}
/*.carouselTxtPart{

	opacity: 0;
}*/
#carouselImgPart img {
		width:500px;
    height:500px;
    max-width:500px;
	}
/*Carousel next and previous section scroll*/
#carouselScrollSection a {
	text-decoration: none;
	color: #000000;
}

.background-caurosel{
    height: 530px;
    width: 500px;
    position: fixed;
    margin-left: 42.5%;

}
.mobilearrows{
	display: none;

}
.dpHr{
    margin-top: 0%;
    margin-bottom: 0%;
}

.carousel-inner{overflow:visible;}
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {  
.background-caurosel{
    position: absolute;
}
}
/*Media Queries*/
/* Landscape phones and portrait tablets */


@media (min-width: 640px) and (max-width:991px) {

	.carouselTxtPart {
    margin-left: 5%;
}
#carouselImgPart img {
    margin-left: 10%;
    max-width: 100%;
    width: 80%;
}
.mobilearrows{
	margin-top: -60% !important;
    padding-left: 6%
}
.carouselSectionNum {
  
    margin-left: 4% !important;
 }   
 .greenhr{

		display:none;
	}


}
@media (max-width: 991px) {
	.greenhr{

		display:none;
	}
	.dpHr{

		display: none;
	}
	.arrow-leftSpan{
		float: left;
	}
	.arrow-rightSpan{
		float: left;
	}
	.mobilearrows {
	    display: block;
	    margin-left: 10%;
	    width: 84%;
	    position: absolute;
    bottom:-1%;
	}
	#carouselSection1, #carouselSection3 {
		padding: 0% 5%;
		background: linear-gradient(360deg, #FFFFFF 70%, #F4F4F4 30%);
	}
	#carouselSection2 {
		padding: 0% 5%;
		background: linear-gradient(360deg, #FFFFFF 70%, #9b9999 30%);
	}
	#carouselImgPart {
		padding: 0% 5%;
		width: 100%;
		float: none;
	}
	#carouselTxtPart {
		width: 100%;
    clear:right;
    padding-top:10%;
	}
	#carouselTxtPart h1 {
	padding: 0% 0% 0% 5%;
	}
	#carouselTxtPart p, #carouselTxtPart p:first-child {
	padding:0% 5% 5% 5%;
	line-height: 150%;
	}
	.backgroundBlack{
		display: none;
	}
	.arrows{

	display: none;
}
.arrow-left{
	
	margin-top: -2%;
    margin-right: 2%;
    float: left;
}
.arrow-left i{

	
}
.arrow-right{

	float: right;
    margin-right: 84%;
    margin-top: -8%;
}
.carouselSectionNum{
	margin-right: 5%;
    margin-top: 1%;
    margin-left: 3%;
    float: left;
    font-size:2.2rem;
}
.carouselImgPart img{margin-top:20%;}
.carouselTxtPart .fontMain2{font-size:6vw; }
.carouselTxtPart .fontPara2{font-size:3vw; }

.background-caurosel{
     height: 530px;
    width: 64.8%;
    position: fixed;
    margin-left: 12.6%;
    margin-top: 18%;

}

.arrow-leftSpan{padding-right:20px; font-size:2rem;}
.arrow-rightSpan{padding-left:20px; font-size:2rem;}
}

@media only screen and (device-width:  992px) {
  /* For general iPad layouts */
  
	#carouselSection1 {
    
    	padding: 5% 5% 23% 10% !important;
		
	}
	#carouselSection2 {
    	padding: 5% 5% 28% 10% !important;
	}


   .background-caurosel{
	    height: 83% !important;
	    width: 42.5% !important;
	    position: fixed;
	    margin-left: 42.5%;
	}

	

}
@media only screen and (device-width:  992px)  and (orientation: portrait){
.arrows{

		top: 22%!important;
	
	}
}




@media only screen and (device-width:  768px){ 

#carouselSection1, #carouselSection3 {
    padding: 0% 5%;
    background: linear-gradient(360deg, #FFFFFF 50%, #F4F4F4 30%);
}
.mobilearrows{
    margin-top: -1% !important;
}
#carouselSection2 {
		padding: 0% 5%;
		background: linear-gradient(360deg, #FFFFFF 50%, #9b9999 30%);
	}

}



@media (min-width: 992px) and (max-width:1200px) {

    #carouselImgPart img {
		width:400px;
    height:400px;
    max-width:400px;
	}
    .background-caurosel{
    height: 430px;
    width: 400px;
    position: fixed;
    margin-left: 42.5%

}

}
@media (max-width: 639px) {

 #carouselImgPart img {
		width:100%;
    height:400px;
    max-width:100%;
	}
.background-caurosel{

    height: 430px;
    width: 80.8%;
    position: fixed;
    margin-left: 4.6%;
    margin-top: 18%;
    }
}

@media(max-width:480px){
.arrow-right{
	margin-top: -7% !important;
}
.arrow-left {
 	margin-top: 0% !important;
}
.mobilearrows {
    display: block;
    margin-left: 10%;
    position: absolute;
    width: 84%;
}
.greenhr{

		display:none;
	}

     #carouselImgPart img {
		width:100%;
    height:270px;
    max-width:100%;
	}
.background-caurosel{

    height: 290px;
    width: 80.8%;
    position: fixed;
    margin-left: 4.6%;
    margin-top: 18%;
    }

.carouselTxtPart .fontMain2 {
    font-size: 5rem;
}

.carouselTxtPart .fontPara2{    font-size: 2.5rem;}
}


@media(max-width:375px){

	.arrow-right {
    float: right;
    margin-right: 84%;
    margin-top: -8%;
}
.arrow-left{
    margin-top: -1%!important;
}
.greenhr{

		display:none;
	}
}