/* CSS Document */

.controlBtn {
    border: 0;
}

.carousel {
	width: auto!important;
	overflow: hidden;
	position: relative;
	top: 0;
	z-index: 9990;
	background: #64717c;
}
.carousel-inner img {
	-webkit-filter: none !important;
	filter: none !important;
	width: 100%; /* Set width to 100% */
	margin: auto;
}
.carousel-caption {
    right: 15%;
    bottom: 25px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
	font-family: 'Open Sans', sans-serif; 
	font-weight: 700;
    text-shadow: none!important;
}

.carousel-caption .captionH1 {
	color: #fff !important;
	position: absolute;	
    font-size: 7.3vw;
    line-height: .85em;
    margin: 0 0 5px;
    letter-spacing: -1px;
    text-transform: uppercase;	
	z-index: 999;
	text-align: left;
}

.carousel-caption p {
    bottom: -20px;
	color: #fff !important;
	font-family: 'Open Sans', sans-serif; 
	position: absolute;	
    font-size: 7.3vw;
    line-height: .85em;
    margin: 0 0 5px;
    letter-spacing: -1px;
    text-transform: uppercase;	
	z-index: 999;
	text-align: left;
}

@media (max-width: 500px) {
	
}
.carousel-caption.right {
	left: 38%;
	top: 45%;
	float: none;
}
.carousel-caption.left {
	left: 8%;
	top: 20%;
	float: none;
	width: 43%;
	text-align: left;
}

.sliderH1 {
    font-family: 'Open Sans', sans-serif; 
	font-weight: 700;
    font-size: 7.3vw;
    line-height: .85em;
    color: #FFF;
    margin: 0 0 5px;
    letter-spacing: -1px;
    text-transform: uppercase;
	text-align: left !important;
}

.sliderP {
    font-family: 'Open Sans', sans-serif; 
    font-size: 7.3vw;
    line-height: .85em;
    color: #FFF;
    margin: 0 0 5px;
    letter-spacing: -1px;
    text-transform: uppercase;
	text-align: left !important;
}


@media (max-width: 600px) {
	.carousel-caption {
		display: block !important;
	}	
}

.glyphicon-chevron-right:before {
	content: url(/public/assets/images/arrow_next.png) !important; 
	/* content: "\e080";*/
}

.glyphicon-chevron-left:before {
	content: url(/public/assets/images/arrow_prev.png) !important 
	/*content: "\e079";*/
}
	
#carouselButtons {
    margin-left: 0;
    position: absolute;
    bottom: 0px;
	left: 0;
}
@media (max-width: 600px) {
	.carousel-caption  {
	  display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
	}	
	.carousel-caption.left {
		left: 10%;
		top: 20%;
		float: none;
		width: 43%;
		text-align: left;
	}
	.sliderH1 {   
		font-size: 7vw;
		line-height: .85em;
}

	.sliderP {
		font-size: 7vw;
		line-height: .85em;
	}
	.playbtn {
		position: absolute;
		top: 35%;
		left: 95%;
		background-color: transparent;
		color: #fff;
		margin: 0 auto;
		transition: .2s;
		border: none;
	}
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
		margin-left: -100px !important;
	}
@media screen and (min-width: 768px) {
	.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
		margin-left: -40px !important;
	}
}
@media screen and (max-width: 768px) {
	.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
		margin-left: -24px !important;
	}
	.glyphicon-chevron-left:before {
    content: url(/public/assets/images/arrow_back_mobile.png) !important;
	}
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
		margin-right: -100px !important;
	}

@media screen and (min-width: 768px){
	.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
		margin-right: -10px !important;
	}
}

@media screen and (max-width: 768px){
	.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
		margin-right: -24px !important;
	}
	.glyphicon-chevron-right:before {
		content: url(/public/assets/images/arrow_next_mobile.png) !important;
	}
	
}

	
.carousel-control.right {
	right: 0;
	left: auto;
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%); 
	background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0))); 
	background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=1);
	background-repeat: repeat-x; 
}
.carousel-control.left {    
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%); 
	background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0))); 
	background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=1);
	background-repeat: repeat-x; 
}

#carousel-example-generic a.carousel-control {
height: 26%;
top: 33%;
width: 86px;
background: black;
//add your own CSS as you need
}

.carousel-indicators .active {
    width: 14px !important;
    height: 14px !important;
    margin: 0;
    background-color: #fff;
}

.btn-group button {
  display:inline-block;
  height: 14px;
  width: 13px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: transparent;
  font-size: 1px;
}

.btn-group button:not(:last-child) {
  /* border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #fff;
}

.carousel-control.left {
    margin-right: 15px;
}
.carousel-control.right {
    margin-left: 15px;
}
.carousel-control:focus, .carousel-control:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    filter: alpha(opacity=1);
    opacity: 1;
}
.carousel-control {   
    text-shadow: none;
    background-color: transparent;
    filter: alpha(opacity=1);
    opacity: 1;
}