/* GLOBAL STYLES -------------------------------------------------- */
 
 
 /* Padding below the footer and lighter body text */
 
 
 /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */
 
 
 /* Special class on .container surrounding .navbar, used for positioning it into place. */
 
 .navbar-wrapper {
 	position: absolute;
 	top: 0;
 	right: 0;
 	left: 0;
 	z-index: 20;
 }
 
 
 /* Flip around the padding for proper display in narrow viewports */
 
 .navbar-wrapper>.container {
 	padding-right: 0;
 	padding-left: 0;
 }
 
 .navbar-wrapper .navbar {
 	padding-right: 15px;
 	padding-left: 15px;
 }
 
 .navbar-wrapper .navbar .container {
 	width: auto;
 }
 
 .carousel-control .glyphicon-chevron-right,
 .carousel-control .icon-next {
 	right: 50%;
 	margin-right: 0px;
 }
 
 .carousel-control .glyphicon-chevron-left,
 .carousel-control .icon-prev {
 	left: 50%;
 	margin-left: 0px;
 }
 
 
 /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */
 
 
 /* Carousel base class */
 
 .carousel-control {
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	width: 4%;
 	font-size: 20px;
 	color: #fff;
 	text-align: center;
 	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
 	filter: alpha(opacity=50);
 	opacity: .5;
 }
 
 .carousel,
 .carousel .container {
 	position: relative;
 }
 
 .sl1 {
 	background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/sl1.jpg) center center no-repeat;
 	background-size: cover;
 }
 
 .sl2 {
 	background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/sl4.jpg) center center no-repeat;
 	background-size: cover;
 }
 
 .sl3 {
 	background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/sl3.jpg) center center no-repeat;
 	background-size: cover;
 }
 
 .sl5 {
 	background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/sl5.jpg) center center no-repeat;
 	background-size: cover;
 }
 
 
 /* Since positioning the image, we need to help out the caption */
 
 .carousel-caption {
 	z-index: 10;
 	bottom: auto;
 	top: 10%;
 	left: 0%;
 }
 
 .carousel-caption>p {
 	position: absolute;
 	color: #fff;
 	background: rgba(0, 0, 0, 0.8);
 	padding: 5px;
 	width: 50%;
   font-size: 25px;
 	text-align: left;
 	margin: 0 5px;
 	line-height: 1.2;
 	border-left: 10px solid #0099da;
 }
 
 .carousel-caption>p span {
 	color: #0099da;
 	display: block;
 }
 
 
 /* Declare heights because of positioning of img element */
 
 .carousel .item {
 	min-height: 580px;
 	background-color: #777;
 }
 
 .carousel-inner>.item>img {
 	position: absolute;
 	top: 0;
 	left: 0;
 	min-width: 100%;
 	height: 100%;
 }
 
 
 /* MARKETING CONTENT -------------------------------------------------- */
 
 
 /* Center align the text within the three columns below the carousel */
 
 .marketing .col-lg-4 {
 	margin-bottom: 20px;
 	text-align: center;
 }
 
 .marketing h2 {
 	font-weight: normal;
 }
 
 .marketing .col-lg-4 p {
 	margin-right: 10px;
 	margin-left: 10px;
 }
 
 
 /* Featurettes ------------------------- */
 
 .featurette-divider {
 	margin: 80px 0;
 	/* Space out the Bootstrap <hr> more */
 }
 
 
 /* Thin out the marketing headings */
 
 .featurette-heading {
 	font-weight: 300;
 	line-height: 1;
 	letter-spacing: -1px;
 }
 
 
 /* RESPONSIVE CSS -------------------------------------------------- */
 
 @media (min-width: 768px) {
 	/* Navbar positioning foo */
 	.navbar-wrapper {
 		margin-top: 20px;
 	}
 	.navbar-wrapper .container {
 		padding-right: 15px;
 		padding-left: 15px;
 	}
 	.navbar-wrapper .navbar {
 		padding-right: 0;
 		padding-left: 0;
 	}
 	/* The navbar becomes detached from the top, so we round the corners */
 	.navbar-wrapper .navbar {
 		border-radius: 4px;
 	}
 	/* Bump up size of carousel content */
 
 	.featurette-heading {
 		font-size: 50px;
 	}
 }
 
 @media (min-width: 992px) {
 	.featurette-heading {
 		margin-top: 120px;
 	}
 }
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
 	/* Since positioning the image, we need to help out the caption */
 	/* Declare heights because of positioning of img element */
 	.carousel .item {
 		height: 20px;
 		background-color: #777;
 	}
 	/* Declare heights because of positioning of img element */
 	.carousel .item {
 		height: 250px;
 		background-color: #777;
 	}
 	.carousel-inner>.item>img {
 		position: absolute;
 		top: 0;
 		left: 0;
 		min-width: 100%;
 		height: 250px;
 	}
 }
 
 @media screen and (min-width:100px) and (max-width:768px) {
 	.sl1 {
 		background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/xs-1.jpg) center center no-repeat;
 		background-size: cover;
 	}
 	.sl2 {
 		background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/xs-4.jpg) center center no-repeat;
 		background-size: cover;
 	}
 	.sl3 {
 		background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/xs-3.jpg) center center no-repeat;
 		background-size: cover;
 	}
 	.sl5 {
 		background: url(http://d2ovaz7fxvur3h.cloudfront.net/bix/landing/iruna/003/css/../img/xs-5.jpg) center center no-repeat;
 		background-size: cover;
 	}
 	.carousel-caption>p {
 		position: absolute;
 		color: #fff;
 		background: rgba(0, 0, 0, 0.8);
 		padding: 5px;
 		width: auto;
     font-size: 15px;
 		text-align: left;
 		margin: 0 10px;
 		line-height: 1.2;
 		border-bottom: 2px solid #0099da;
 	}
 }