#sequence {
max-width: 1600px;
height: 600px;
margin: 0 auto;
background: #f1f1f1;
position: relative;
z-index: 11;
overflow: hidden;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#sequence.sub {
max-width: 1440px;
height: 300px;
}
#sequence .seq-screen,
#sequence .seq-canvas,
#sequence .seq-canvas > * {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#sequence img {
width: auto;
height: 100%;
opacity: 0;
position: absolute;
left: 0;
right: 0;
object-fit: cover;
object-position: center;
transform: scale(1.025);
-webkit-transition-duration: 1.25s;
transition-duration: 1.25s;
}
#sequence li {
z-index: 1;
}
#sequence li hr {
border: 0;
height: 1px;
width: 100%;
display: inline-block;
background: transparent;
}
#sequence .seq-in img {
opacity: 1;
transform: scale(1);
transition-timing-function: ease;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
#sequence .seq-out img {
opacity: 0;
transform: scale(1);
transition-timing-function: ease;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
#sequence div.contain {
width: 100%;
max-width: 1440px;
height: auto;
margin: 0 auto;
padding: 0 40px;
position: absolute;
left: 0;
right: 0;
bottom: 40px;
z-index: 5;
opacity: 0;
text-align: left;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
#sequence .seq-in div.contain {
opacity: 1;
transform: scale(1);
transition-timing-function: ease-in;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
#sequence .seq-out div.contain {
opacity: 0;
transform: scale(1);
transition-timing-function: ease-out;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
#sequence div.contain div.content {
width: 100%;
max-width: 640px;
padding: 30px 30px 40px;
display: inline-block;
background: rgba(17,6,66,0.5); border-left: 5px solid #2485af;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#sequence div.contain.single div.content {
background: none;
border: 0;
padding: 0;
}
#sequence div.contain div.content h1,
#sequence div.contain div.content h2 {
width: 100%;
margin: 0;
color: #fff;
font-size: 36px;
line-height: 36px;
font-weight: 900;
text-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
}
#sequence div.contain.single div.content h1 {
background: none;
border: 0;
padding: 0;
font-size: 45px;
line-height: 45px;
font-weight: 900;
letter-spacing: -0.025em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}
#sequence div.contain div.content span {
width: 100%;
margin: 15px 0 0 0;
padding: 0;
display: inline-block;
z-index: 9005;
color: #fff;
font-size: 20px;
line-height: 26px;
font-weight: 400;
text-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
}
#sequence div.contain div.content a.button {
height: auto;
margin: 0;
padding: 10px 30px 10px 15px;
background: #009fe3 url(//kleincaravans.nl/cms/wp-content/themes/kleincaravans/assets/img/icons/icon-arrow-right.svg) no-repeat calc(100% - 7px) center / 16px;
border-bottom: 2px solid #0193d2;
display: inline-block;
vertical-align: top;
color: #fff;
font-size: 18px;
line-height: 18px;
font-weight: 700;
text-align: center;
position: relative;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: linear background 100ms, linear padding 100ms;
transition: linear background 100ms, linear padding 100ms;
}
#sequence div.contain div.content a.button:hover { 
background-color: #00b1fd; 
padding-right: 35px;
}
button.seq-arrow {
width: 50px;
height: 50px;
margin: auto;
background: #fff no-repeat center / 30px;
border: 0;
position: absolute;
bottom: 40px;
cursor: pointer;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: ease 100ms all;
transition: ease 100ms all;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
}
button.seq-arrow.seq-prev {
left: 40px;
background-image: url(//kleincaravans.nl/cms/wp-content/themes/kleincaravans/assets/img/icons/icon-arrow-left.svg);
}
button.seq-arrow.seq-prev:hover {
left: 35px;
}
button.seq-arrow.seq-next {
right: 40px;
background-image: url(//kleincaravans.nl/cms/wp-content/themes/kleincaravans/assets/img/icons/icon-arrow-right.svg);
}
button.seq-arrow.seq-next:hover {
right: 35px;
}
div.seq-pagination {
max-width: 1400px;
margin: 20px auto 0;
padding: 0 20px;
text-align: center;
}
div.seq-pagination button {
width: calc(25% - 16px);
height: 200px;
margin-right: 20px;
padding: 0;
background: none;
overflow: hidden;
cursor: pointer;
position: relative;
z-index: 19;
border: 0;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: linear 100ms all;
transition: linear 100ms all;
}
div.seq-pagination button h2 {
width: 100%;
padding: 10px 15px;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .6);
z-index: 20;
font-family: sofia-pro, sans-serif; 
font-size: 18px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}
div.seq-pagination button:last-of-type {
margin-right: 0;
}
div.seq-pagination button img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: grayscale(1);
-webkit-transition: linear 100ms all;
transition: linear 100ms all;
}
div.seq-pagination button:hover img {
transform: scale(1.05);
}
div.seq-pagination button.seq-current img {
filter: grayscale(0);
}
div.seq-pagination.bullets button {
width: 10px;
height: 10px;
background: rgba(0, 0, 0, .2);
-webkit-border-radius: 10px;
border-radius: 10px;
}
div.seq-pagination button.seq-current {
background: rgba(0, 0, 0, .5);
}
#sequence li.single > * {
opacity: 1;
}
#sequence li.single div.contain {
padding: 0 20px;
bottom: 20px;
}
#sequence li.single div.contain div.content {
width: auto;
max-width: auto;
padding: 15px 15px 20px;
}
#sequence li.single img  {
width: 100%;
} @media only screen and (min-width: 0) and (max-width: 1600px) { 
#sequence {
-webkit-border-radius: 0;
border-radius: 0;
}
button.seq-arrow {
bottom: auto;
top: 40px;
} 
@media only screen and (min-width: 0) and (max-width: 1024px) { 
div.seq-pagination button {
height: 150px;
}
} 
@media only screen and (min-width: 0) and (max-width: 640px) { 
div.seq-pagination button {
height: 120px;
width: calc(50% - 5px);
}
div.seq-pagination button:nth-of-type(n) {
margin: 0 10px 0 0;
}
div.seq-pagination button:nth-of-type(2n+2) {
margin-right: 0;
}
#sequence div.contain div.content h1, 
#sequence div.contain div.content h2 {
font-size: 20px;
line-height: 28px;
}
} 
@media only screen and (min-width: 0) and (max-width: 414px) { 
div.seq-pagination button h2 {
font-size: 14px;
line-height: 18px;
font-weight: 400;		
}
}