/*
Bootstrap 4 Carousel with Fade Captions
Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com
Image credits: unsplash.com
*/


.carousel-indicators
{
	bottom:0;
	margin-bottom:0;
}

.fade-carousel .carousel-indicators > li{
	margin:0;
	background:url('../images/slider/bullet.png') #f78e1d no-repeat center center;
	opacity: 1;
}
.fade-carousel .carousel-indicators > li.active{
	background:url('../images/slider/bullet-active.png') #f78e1d no-repeat center center;
}

/*      Carousel Captions       */
.fade-carousel .carousel-inner .carousel-caption{
	top: 50%;
	left: 50%;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0,0,0,.75);
	  -webkit-transform: translate3d(-50%,-50%,0);
		 -moz-transform: translate3d(-50%,-50%,0);
		  -ms-transform: translate3d(-50%,-50%,0);
		   -o-transform: translate3d(-50%,-50%,0);
			  transform: translate3d(-50%,-50%,0);
	
}
.fade-carousel .carousel-inner .carousel-caption h1{
	font-size:200%;
	font-weight: 800;
	margin: 0;
	padding: 0;
}

.fade-carousel .carousel-inner .carousel-caption div
{
	opacity: 0;
	-webkit-transition: .5s all;
	   -moz-transition: .5s all; 
		-ms-transition: .5s all; 
		 -o-transition: .5s all; 
			transition: .5s all;
			margin-top:20px;
}

.fade-carousel .carousel-inner .carousel-caption div img
{
	opacity: 0;
	-webkit-transition: .5s all;
	   -moz-transition: .5s all; 
		-ms-transition: .5s all; 
		 -o-transition: .5s all; 
			transition: .5s all;
}

.fade-carousel .carousel-inner .active .carousel-caption div {
	opacity: 1;
	-webkit-transition: .5s all;
	   -moz-transition: .5s all; 
		-ms-transition: .5s all; 
		 -o-transition: .5s all; 
			transition: .5s all;
			margin-top:0;
			-webkit-transition-delay: .2s;
			transition-delay: .2s;
			
}

.fade-carousel .carousel-inner .active .carousel-caption div img {
	opacity: 1;
	-webkit-transition: .5s all;
	   -moz-transition: .5s all; 
		-ms-transition: .5s all; 
		 -o-transition: .5s all; 
			transition: .5s all;
	-webkit-transition-delay: .7s;
			transition-delay: .7s;
}


.carousel-item .container .row
{
	height:500px;
}

.carousel-item .container .row .carousel-caption
{
	display:flex;
	align-items: center;
}

.marco img
{
	height:auto;
	width:100%;
}

.slide-1, .slide-2, .slide-3, .slide-4, .slide-5
{
	background-size:cover;
}

.slide-1
{
	background:#f78e1d;
}

.slide-2
{
	background:url('../images/slider/2.jpg') no-repeat center center;
}

.slide-3
{
	background:url('../images/slider/3.jpg') no-repeat center center;
}

.slide-4
{
	background:url('../images/slider/4.jpg') no-repeat center center;
}

.slide-5
{
	background:url('../images/slider/5.jpg') no-repeat center center;
}


.slide-1 .marco
{
	background:url('../images/slider/logo.png') no-repeat center center;
	background-size:contain;
	width:100%;
	height:500px;
}

.slide-2 .marco
{
	background:url('../images/slider/marco2.png') no-repeat;
	background-size:contain;
}

.slide-3 .marco
{
	background:url('../images/slider/marco3.png') no-repeat;
	background-size:contain;
}

.slide-4 .marco
{
	background:url('../images/slider/marco4.png') no-repeat;
	background-size:contain;
}

.slide-5 .marco
{
	background:url('../images/slider/marco5.png') no-repeat;
	background-size:contain;
}

.carousel-item   .container {
    width: 100%;
    max-width: 100%;
  }

  .carousel-item .container .row {
    height: 220px;
}

.fade-carousel .carousel-indicators > li {
    height: 20px;
}

@media (min-width: 576px) {
.carousel-item   .container {
    width: 540px;
    max-width: 100%;
  }

  .carousel-item .container .row {
    height: 350px;
}

.fade-carousel .carousel-indicators > li {
    height: 40px;
}
}

@media (min-width: 768px) {
.carousel-item   .container {
    width: 720px;
    max-width: 100%;
  }

  .carousel-item .container .row {
    height: 500px;
}

.fade-carousel .carousel-indicators > li {
    height: 50px;
}
}

@media (min-width: 992px) {
  .carousel-item .container {
    width: 960px;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .carousel-item .container {
    width: 1140px;
    max-width: 100%;
  }
}