.cb-slideshow,
.cb-slideshow:after { 
    position: absolute;
    width: 100%;
    height: 830px;
    top: -18px;
    left: 0px;
    z-index: -10;
}

@media screen and (max-width:800px ) {
    
    .cb-slideshow,
.cb-slideshow:after { 
    position: absolute;
    width: 100%;
    height: 340px;
    top: -18px;
    left: 0px;
    z-index: -10;
}
    
}

/*

//imagen por encima de las imagenes de carusel (esta debe de ser png y con trasparencia por defecto)

.cb-slideshow:after { 
    content: '';
    background: transparent url(../img/f4.png) repeat top left; 
}

*/

/**li{
	list-style:none;
	} **/

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 24s linear infinite 0s; 
}

.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 24s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 100px;
    padding: 0;
    line-height: 350px; 
}

@media screen and (max-width:600px ) {
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    padding: 0;
    line-height: 50px; 
}

}


.cb-slideshow li:nth-child(1) span { 
    background-image:url(../img/insptruck_02.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../img/barco_contenedor.jpg);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../img/portada2.jpeg);
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../img/portada1.jpeg);
    animation-delay: 18s; 
}
/** .cb-slideshow li:nth-child(5) span { 
    background-image: url(../img/f2.jpg);
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../img/f3.jpg);
    animation-delay: 30s; 
} **/

.cb-slideshow li:nth-child(2) div { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    animation-delay: 18s; 
}
/** .cb-slideshow li:nth-child(5) div { 
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    animation-delay: 30s; 
} **/

@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	10% {
	    opacity: 1;
	   /** transform: scale(1.05); **/
	    animation-timing-function: ease-out;
	}
	20% {
	    opacity: 1;
	    /**transform: scale(1.1) rotate(3deg); **/
	}
	40% {
	    opacity: 0;
	    /**transform: scale(1.1) rotate(3deg); **/
	}
	100% { opacity: 0 }
}

@keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    transform: translateX(200px);
	}
	8% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	17% {
	    opacity: 1;
	    transform: translateX(0px);
	}
	19% {
	    opacity: 0;
	    transform: translateX(-400px);
	}
	25% { opacity: 0 }
	100% { opacity: 0 }
}



/** Animation **/


@keyframes loop {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 9))}
}


/*Styling*/
.slider {
	height: 100px;
	margin: auto;
	overflow:hidden;
	position: relative;
	width: 100%;
	
}
	
	&::before,
	&::after {
		background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
		content: "";
		height: 100px;
		position: absolute;
		width: 200px;
		z-index: 2;
	}
	
	&::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	&::before {
		left: 0;
		top: 0;
	}
	
	.slide-track {
		animation: loop 40s linear infinite;
		display: flex;
		width: calc(250px * 18);
	}
	
	.slide {
		height: 100px;
		width: 250px;
	}