/*----------------------Slider-------------------*/



.captionL, .captionR{
height:100%;
margin:1%;
font-size:30px;
}

.captionL{
left: 0;
color: var(--headlineColor);
}

.captionR{
right: 0;
color: var(--headlineColor);
}

.captionL a{
text-decoration: none;
color: white;
transition: ease-in 0.25s;
}

.captionL a:hover{
color: var(--headlineColor);
}
.captionR a{
text-decoration: none;
color: var(--headlineColor);
transition: ease-in 0.25s;
}
.captionR a:hover{
color:white;
}
#slider img
{
display: block;
width: 100%;
height: 100%
}

#slider
{
position: relative;
width: 100%;
height: 400px;
min-height:400px;
}

#slider:before,
#slider:after
{
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}

#slider:after
{
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-transform: skew(8deg) rotate(3deg)
}

#slider input{display: none}

#slider .slider-container
{
position:relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden  
}

#slider #slides
{
position: absolute;
width: 400%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
overflow: hidden;
-webkit-animation: slider 27s infinite;
animation: slider 27s infinite
}

/*
#slider #slides:hover
{
-webkit-animation-play-state: paused;
animation-play-state: paused
}
*/

#slider #slides .slide
{
position: relative;
width: calc(100%/4);
height: 100%;
float: left;
overflow: hidden;
background-size:cover;
background-position: center;
}

#slider #slides .slide .caption
{
width: 100%;
height: 15%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(255,255,255,.7); /*bg color 2 */
color: #fff;
padding: 0;
display: flex;
justify-content: space-between;
}

#slider #slides .slide .caption p
{
font-size: 120%; 
line-height: 150%;
position: relative
}

#slider #slides .slide .caption p:before,
#slider #slides .slide .caption p:after
{
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index: 10;
border-color: #FD756C;
border-style: solid
}

#slider #slides .slide .caption p:before
{
border-width: 2px 0 0 2px;
top: -5%;
left: -5%
}

#slider #slides .slide .caption p:after
{
border-width: 0 2px 2px 0;
bottom: -5%;
right: -5%
}

#slider .timeline
{
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: #f5f5f5;
-webkit-animation: timeline 27s infinite;
animation: timeline 27s infinite
}

/*
#slider #slides:hover ~ .timeline
{
-webkit-animation-play-state: paused;
animation-play-state: paused
}
*/

/*--- Start Slider animation ---*/


@-webkit-keyframes slider
{

0%, 29.62962962963%, {left: 0}
33.333333333333%, 62.962962962963%{left: -100%}
66.666666666667%, 96.296296296296%{left: -200%}
70.37037037037%, 99.9999%{ left: -300%}
}

@keyframes slider
{
0%, 29.62962962963%{left: 0}
33.333333333333%, 62.962962962963%{left: -100%}
66.666666666667%, 96.296296296296%{left: -200%}
100%{ left: -300%}
}

@-webkit-keyframes timeline
{
0%, 33.333333333333%, 66.666666666667%, 100%{width: 0}
29.62962962963%, 62.962962962963%, 96.296296296296%{width: 100%}
}

@keyframes timeline
{
0%, 33.333333333333%, 66.666666666667%, 100%{width: 0}
29.62962962963%, 62.962962962963%, 96.296296296296%{width: 100%}
}

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


.captionL, .captionR{
font-size: initial;
}

#slider #slides .slide .caption p{font-size: 100%}

#slider{
height: 200px;
min-height: 200px;
}

}
