.bx-slider {
	width:calc(100% - 16px);
	min-width:300px;
	height:380px; /* calc(100vh - 80px); */
	position:relative;
	margin:60px auto;
	overflow:hidden;
	background-size:250% 100%;
}

.bx-slider > .bx-slider-bgimage {
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    z-index: 0;
}

@keyframes bx-moveBackground {
     0%  { left: -0% }
     20% { left: -8% }
     24% { left: -65% }
    96%  { left: -65%; }
    100% { left: -0%;  }
}
 
/************************
 *   Slides
 ***********************/

.bx-slide {
	position:absolute;
    padding-left:15%;
    padding-right:15%;
	height:100%;
	top:0;
}

.bx-slide {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
}

.bx-slider .bx-slide:first-child {
    opacity:1;
}

.bx-slider .bx-slide:not(:first-child) {
    opacity:0;
}


/************************
 *   Dots
 ***********************/

.bx-dots{
	position:absolute;
	text-align:right;
	right:10%;
	bottom:40px;
	z-index:20;
}

.bx-dots div{
	display:inline-block;
	position:relative;
	width:12px;
	height:12px;
	border-radius:50%;
	background:DarkGray;
	margin:3px;
	/*
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
	*/
}

.bx-dots .bx-dot-selected{
	content:'';
	width:8px;
	height:8px;
	position:absolute;
	top:-1px;
	left:-1px;
	border-radius:50%;
	background:SaddleBrown;
}

.bx-dots:not(:first-child)  .bx-dot-selected{
    opacity:0;
}

/************************
 *   Animations
 ***********************/

.bx-slider .bx-slide:nth-of-type(1) {
    animation:bx-cycleSlide1 20s ease-out infinite;
    animation-delay:0s;
}
.bx-slider > .bx-dots > .bx-dot:nth-child(1) .bx-dot-selected {
    animation:bx-fadeImage1 20s ease-out infinite;
    animation-delay:0s;
}
.bx-slider > .bx-slider-bgimage:nth-child(1) {
    animation:bx-fadeImage1 20s ease-out infinite, bx-moveBackground 20s linear infinite;
    animation-delay:0s;
}

.bx-slider .bx-slide:nth-of-type(2) {
    animation:bx-cycleSlideM 20s ease-out infinite;
    animation-delay:4s;
}
.bx-slider > .bx-dots > .bx-dot:nth-child(2) .bx-dot-selected {
    animation:bx-fadeImageM 20s ease-out infinite;
    animation-delay:4s;
}
.bx-slider > .bx-slider-bgimage:nth-child(2) {
    animation:bx-fadeImageM 20s ease-out infinite, bx-moveBackground 20s linear infinite;
    animation-delay:4s;
}

.bx-slider .bx-slide:nth-of-type(3) {
    animation:bx-cycleSlideM 20s ease-out infinite;
    animation-delay:8s;
}
.bx-slider > .bx-dots > .bx-dot:nth-child(3) .bx-dot-selected {
    animation:bx-fadeImageM 20s ease-out infinite;
    animation-delay:8s;
}
.bx-slider > .bx-slider-bgimage:nth-child(3) {
    animation:bx-fadeImageM 20s ease-out infinite, bx-moveBackground 20s linear infinite;
    animation-delay:8s;
}

.bx-slider .bx-slide:nth-of-type(4) {
    animation:bx-cycleSlideM 20s ease-out infinite;
    animation-delay:12s;
}
.bx-slider > .bx-dots > .bx-dot:nth-child(4) .bx-dot-selected {
    animation:bx-fadeImageM 20s ease-out infinite;
    animation-delay:12s;
}
.bx-slider > .bx-slider-bgimage:nth-child(4) {
    animation:bx-fadeImageM 20s ease-out infinite, bx-moveBackground 20s linear infinite;
    animation-delay:12s;
}

.bx-slider .bx-slide:nth-of-type(5) {
    animation:bx-cycleSlideL 20s ease-out infinite;
    animation-delay:16s;
}
.bx-slider > .bx-dots > .bx-dot:nth-child(5) .bx-dot-selected {
    animation:bx-fadeImageL 20s ease-out infinite;
    animation-delay:16s;
}
.bx-slider > .bx-slider-bgimage:nth-child(5) {
    animation:bx-fadeImageL 20s ease-out infinite, bx-moveBackground 20s linear infinite;
    animation-delay:16s;
}


/* Cycle for first slide */
@keyframes bx-cycleSlide1 {
   0%  { transform:translateX(0%);  opacity:1; }
   4%  { transform:translateX(0%); opacity:1; }
   20% { transform:translateX(0%); opacity:1; }
   28% { transform:translateX(-100%); opacity:0; }
   96% { transform:translateX(-100%); opacity:0; }
   100%{ transform:translateX(0%); opacity:1; }
}


/* Cycle for middle slides */
@keyframes bx-cycleSlideM {
   0%  { transform:translateX(100%);  opacity:0; }
   4%  { transform:translateX(0%); opacity:1; }
   20% { transform:translateX(0%); opacity:1; }
   28% { transform:translateX(-100%); opacity:0; }
   96% { transform:translateX(100%); opacity:0; }
   100%{ transform:translateX(100%); opacity:0; }
}


/* Cycle for last slide */
@keyframes bx-cycleSlideL {
   0%  { transform:translateX(100%);  opacity:0; }
   4%  { transform:translateX(0%); opacity:1; }
   16% { transform:translateX(0%); opacity:1; }
   24% { transform:translateX(100%); opacity:0; }
   96% { transform:translateX(100%); opacity:0; }
   100%{ transform:translateX(0%); opacity:0; }
}
@keyframes bx-fadeImage1 {
   0%  { opacity:1; transform:translateZ(0); }
   20% { opacity:1; transform:translateZ(0); }
   28% { opacity:0; transform:translateZ(0); }
   96% { opacity:0; transform:translateZ(0); }
   100%{ opacity:1; transform:translateZ(0); }
}@keyframes bx-fadeImageM {
   0%  { opacity:0; transform:translateZ(0); }
   4% { opacity:1;  transform:translateZ(0); }
   20% { opacity:1; transform:translateZ(0); }
   28% { opacity:0; transform:translateZ(0); }
   100% { opacity:0;transform:translateZ(0); }
}@keyframes bx-fadeImageL {
   0%  { opacity:0; transform:translateZ(0); }
   4% { opacity:1;  transform:translateZ(0); }
   16% { opacity:1; transform:translateZ(0); }
   20% { opacity:0; transform:translateZ(0); }
   100%{ opacity:0; transform:translateZ(0); }
} 
 
/************************
 *   Slide-Content
 ***********************/
.bx-link {
   text-decoration:none;
}

.bx-slide .bx-slide-text {
    margin-left:-15%;
    width:80%;      
}


.bx-slide h2, 
.bx-slide p {
    width:90%;
    margin-left:0;
	line-height:1em;    
	z-index:5;
}

.bx-slide h2{
	top:10px;
	color:rgb(240,240,240);
	font-size:2em;
	font-weight:700;
    text-shadow:1px  1px 1px rgba(0,0,0,0.3),
                  1px -1px 1px rgba(0,0,0,0.3),
                 -1px  1px 1px rgba(0,0,0,0.3),
                 -1px -1px 1px rgba(0,0,0,0.3);	
                 
}

.bx-slide p{
	top:85px;
	color:#331a00;
	font-size:1.3em;
	font-style:normal;
	font-weight:300;
    text-shadow:1px  1px 1px rgba(255,255,255,0.3),
                  1px -1px 1px rgba(255,255,255,0.3),
                 -1px  1px 1px rgba(255,255,255,0.3),
                 -1px -1px 1px rgba(255,255,255,0.3);
}

.bx-slide .bx-img{
	top:70px;
}

.bx-slide .bx-img  img{
	width:300px;
    margin-left:-5%;
}




/************************
 *   Media
 ***********************/


@media screen and (max-width:700px) {
    .bx-slide  h2, 
    .bx-slide p {
    }
    .bx-slide .bx-img , .bx-slide .bx-img  img{
        width:200px;
    }
}

@media screen and (max-width:600px) and (min-height:414px) {
    .bx-slide {
        flex-direction:column;
        justify-content:flex-start;
        padding-left:15%;
    }
    
    .bx-slide .bx-slide-text {
        position:relative;  
    }
    
    .bx-slide  .bx-img-container {
        height:100px;
        position:relative;
        margin-left:-15%;
    }
    
    
    .bx-slide  h2, 
    .bx-slide p {
        width:100%;
    }
}


@media screen and (max-width:415px) {

    .bx-slider {
        height:calc(100vh - 93px);
    }

    .bx-slide .bx-img {
        width:150px;
        top:30px;
        margin-left:initial;
    }

    .bx-slide {
        flex-direction:column;
        justify-content:flex-start;
    }
    
    .bx-slide .bx-slide-text {
        position:relative;        
    }
    
    .bx-slide  .bx-img-container {
        height:100px;
        position:relative;
        margin-left:initial;
    }
    
    
    .bx-slide  h2, 
    .bx-slide p {
        width:100%;
    }
}

@media screen and (max-height:500px) {

    .bx-slider {
        height:calc(100vh - 93px);
    }
}