#sequence {
width: 100%;
height: 660px;
padding: 0;
display: inline-block;
vertical-align: top;
position: relative;
z-index: 13;
overflow: hidden;
-webkit-border-radius: 3px;
}
.sub #sequence {
height: 240px;
}
#sequence .seq-screen,
#sequence .seq-canvas,
#sequence .seq-canvas > * {
position: absolute;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#sequence li {
z-index: 3;
}
#sequence li div.background {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
background-size: 100% auto;
background-position: center bottom;
background-repeat: no-repeat;
-webkit-transition-property: opacity, transform;
transform: scale(1);
}
#sequence li.seq-in div.background {
opacity: 1;
transform: scale(1.05);
transition-timing-function: ease;
-webkit-transition-duration: 2s, 10s;
transition-duration: 2s, 10s;
}
#sequence li.seq-out div.background {
opacity: 0;
transform: scale(1.05);
transition-timing-function: ease;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
#sequence li span.title {
width: 100%;
max-width: 680px;
margin: 0;
padding: 0;
position: absolute;
top: 280px;
left: 90px;
z-index: 100;
opacity: 0;
overflow: hidden;
color: #19233e;
font: 400 42px / 56px 'soleil', sans-serif;
letter-spacing: -.025em;
-webkit-transition-property: opacity, top;
}
#sequence li.seq-in span.title {
opacity: 1;
top: 250px;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
#sequence li.seq-out span.title {
opacity: 0;
top: 250px;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
#sequence li a.button {
width: 100%;
max-width: 320px;
margin: 0;
padding: 20px 10px;
position: absolute;
top: 430px;
left: 90px;
z-index: 100;
opacity: 0;
overflow: hidden;
color: #fff;
background: #19233e url(//brugginkcaravans.nl/cms/wp-content/themes/bruggink/assets/img/icons/icon-arrow-right-white.svg) no-repeat calc(100% - 15px) center / 20px;
font: 400 20px  / 20px 'soleil', sans-serif;
-webkit-border-radius: 300px;
letter-spacing: -.025em;
-webkit-transition-property: opacity, top;
}
#sequence li.seq-in a.button {
opacity: 1;
top: 400px;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 1s;
-webkit-transition-delay: .4s;
}
#sequence li.seq-out a.button {
opacity: 0;
top: 400px;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .2s;
}
#sequence li.seq-in a.button:hover {
-webkit-transition-property: transform;
-webkit-transition-duration: .2s;	
-webkit-transition-delay: 0s;
}
div.seq-pagination {
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
position: absolute;
bottom: 30px;
left: 0;
right: 0;
text-align: center;
}
div.seq-pagination button {
width: 15px;
height: 15px;
margin-right: 10px;
padding: 0;
background: none;
overflow: hidden;
cursor: pointer;
background: rgba(255, 255, 255, .5);
position: relative;
z-index: 11;
border: 0;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: linear 100ms all;
transition: linear 100ms all;
}
div.seq-pagination button.seq-current {
background: #fff;
}
div.seq-pagination button:last-of-type {
margin-right: 0;
}
#sequence li.single > * {
opacity: 1;
}
#sequence li.single div.content {
width: auto;
max-width: 0;
padding: 15px 15px 20px;
}
#sequence li.single img  {
width: 100%;
height: 100%;
object-fit: cover;
} @media screen and (min-width: 3680px) {
#sequence {
height: 1000px;
}
}
@media only screen and (min-width: 0) and (max-width: 1280px) {
#sequence {
width: 100%;
}
}
@media only screen and (min-width: 0) and (max-width: 768px) { 
#sequence {
height: 300px;
}
#sequence li div.background {
width: calc(100% - 260px);
right: calc(-100% + 260px);
}
#sequence li div.content {
max-width: 260px;
}
#sequence li div.content span.title {
min-height: 70px;
font: 400 22px  / 30px 'soleil', sans-serif;
}
} 
@media only screen and (min-width: 0) and (max-width: 640px) {
#sequence {
height: 500px;
}
#sequence li div.background { 
width: 100%;
height: calc(100% - 260px);
right: -100%;
}
#sequence li div.content {
max-width: 100%;
height: 260px;
bottom: 0;
top: auto;
}
#sequence li div.content span.title { 
min-height: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#sequence li div.content a.button {
max-width: 100%;
margin: 0;
}
#sequence li div.content a.button.presentation3d {
margin-top: 10px;
}
div.seq-pagination {
display: none;
}
}