.main-image-animation > .container{ padding: 0; position: relative;
} #animation-offer { position: relative; width: 100%; font-size: 0.625em; margin: 0 auto; position: relative; top: 0;
}
#animation-offer > .sequence-canvas { height: 100%; width: 100%; list-style: none;
}
#animation-offer > .sequence-canvas > li { position: absolute; width: 100%; z-index: 1;
}
#animation-offer > .sequence-canvas > li img { width: 210px;
}
#animation-offer > .sequence-canvas li > * { position: absolute; -webkit-transition-property: left, opacity; -moz-transition-property: left, opacity; -ms-transition-property: left, opacity; -o-transition-property: left, opacity; transition-property: left, opacity;
} .sequence-next,
.sequence-prev { color: white; cursor: pointer; display: none; font-weight: bold; padding: 10px 15px; position: absolute; top: 50%; z-index: 1000; height: 75px; margin-top: -47.5px;
} .sequence-pause { bottom: 0; cursor: pointer; position: absolute; z-index: 1000;
} .sequence-paused { opacity: 0.3;
} .sequence-prev { left: 3%;
} .sequence-next { right: 3%;
} .sequence-prev img,
.sequence-next img { height: 100%; width: auto;
} .sequence-pagination { left: 40%; bottom: 100px; display: none; position: absolute; z-index: 10; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;
}
.sequence-pagination li { display: inline-block; *display: inline; }
.sequence-pagination li img { cursor: pointer; opacity: 0.5; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: margin-bottom, opacity; -moz-transition-property: margin-bottom, opacity; -ms-transition-property: margin-bottom, opacity; -o-transition-property: margin-bottom, opacity; transition-property: margin-bottom, opacity;
}
.sequence-pagination li img:hover { margin-bottom: 4px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;
}
.sequence-pagination li.current img { opacity: 1;
} .sequence-next,
.sequence-prev { position: absolute; opacity: 0.6; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} .sequence-next:hover,
.sequence-prev:hover { opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} #animation-offer .more { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal; font-size: 12pt; line-height: 120%; left: 65%; opacity: 0; top: 110px; z-index: 50;
} #animation-offer .animate-in .more{ left: 280px; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} #animation-offer .animate-out .more { right: 10px; opacity: 0; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} #animation-offer .title { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: bold; font-size: 22pt; line-height: 120%; white-space: nowrap; left: 65%; width: 35%; opacity: 0; top: 20px; z-index: 50;
}
#animation-offer .title span.stars { color: orange;
} #animation-offer .animate-in .title { left: 260px; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} #animation-offer .animate-out .title { right: 10px; opacity: 0; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} #animation-offer .subtitle { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal; line-height: 120%; font-size: 17pt; left: 10%; width: 35%; opacity: 0; top: 55px; white-space: nowrap;
} #animation-offer .animate-in .subtitle { left: 290px; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} #animation-offer .animate-out .subtitle { left: 10%; opacity: 0; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;
} #animation-offer .price { left: 15%; opacity: 0; display: table; top: 120px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: bold; font-size: 28pt; text-align: left; line-height: 120%;
}
#animation-offer .price span.pricefrom{ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: normal; font-size: 14pt;
} #animation-offer .price sup { font-size: 18pt; padding-top: 10px;
} #animation-offer .animate-in .price { left: 65%; text-align: right; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} #animation-offer .animate-out .price { left: 15%; text-align: left; opacity: 0; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5; transition-duration: 0.5s;
} #animation-offer .model { left: -20%; opacity: 0; top:40px; display: table; position: relative; height: auto !important; border: 3px solid #fff; -webkit-transform: rotate(-6.5deg);
-moz-transform: rotate(-6.5deg);
-o-transform: rotate(-6.5deg);
-ms-transform: rotate(-6.5deg);
transform: rotate(-6.5deg);
} #animation-offer .model:before,
#animation-offer .model:after { display: table; content: "";
}
#animation-offer .model:after{ background: url('//assets.specials.de/img/header-top-img-after.png'); background-position: top center; background-repeat: no-repeat; background-size: 100%; width: 100%; position: absolute; height: 300px; top: 10px; z-index: -1; margin-left: -15px; -webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
} #animation-offer .animate-in .model { left: 0; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} .animate-out .model { left: 45%; opacity: 0; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;
} .preloader{ position:absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255,255,255,.8); z-index: 999;
}
.preloader img{ position:absolute; left: 50%; margin-left: -14px; top: 50%; margin-top: -14px; background: rgba(255,255,255,.6);
} @media only screen and (min-width: 992px) { #sequence .title { width: 42%; }
}
@media only screen and (max-width: 838px) { #sequence { height: 550px; } #sequence .model { max-height: 530px !important; width: auto; }
}
@media only screen and (max-width: 768px) { #sequence { height: 500px; } #sequence .title { font-size: 2.8em; } #sequence .subtitle { font-size: 1.6em; } #sequence .sequence-next, #sequence .sequence-prev { height: 60px; margin-top: -40px; } #sequence .model { max-height: 480px !important; width: auto; }
}
@media only screen and (max-width: 568px) { #sequence .model { left: 50%; min-width: 40%; width: 40%; } #sequence .animate-in .model { left: 50%; margin-left: -20%; } #sequence .animate-out .model { left: 50%; margin-left: -20%; } #sequence .title { background: #a1a1a1; background: rgba(0, 0, 0, 0.3); bottom: 0; left: 100%; padding: 4%; bottom: -50%; width: 100%; z-index: 10; } #sequence .animate-in .title { left: 0%; } #sequence .animate-out .title { left: -100%; } #sequence .subtitle { visibility: hidden; } #sequence .sequence-pagination { bottom: 40px; } #sequence .sequence-pagination li img { height: 100px; }
}
@media only screen and (max-width: 518px) { #sequence { height: 450px; }
}
@media only screen and (max-width: 468px) { #sequence { height: 415px; } #sequence .sequence-pagination { opacity: 0; visibility: hidden; }
}
@media only screen and (max-width: 418px) { #sequence { height: 375px; }
}
@media only screen and (max-width: 368px) { #sequence { height: 325px; } #sequence .title { font-size: 2.2em; }
}
@media only screen and (max-width: 320px) and (orientation: portrait) { #sequence { height: 320px; } #sequence .model { min-width: 45%; width: 45%; } #sequence .animate-in .model { margin-left: -22.5%; } #sequence .animate-out .model { margin-left: -22.5%; }
}
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) { #sequence { height: 260px; } #sequence .model { min-width: 24%; width: 24%; } #sequence .animate-in .model { left: 17.5%; margin-left: 0; } #sequence .animate-out .model { left: 17.5%; margin-left: 0; } #sequence .sequence-pagination { right: 17.5%; }
}