/* core */

[ data-device ] {
 max-width: 100%;
 background-size: 100%;
 background-position: center 0%;
 background-color: transparent;
 transform: translateZ( 0 ); /* Hardware acceleration */
}

[ data-device = 'desktop' ] {
 padding-top: 62.5%; /* 16:10 */
 width: 100%;
}

[ data-device = 'phone' ] {
 padding-top: 200%; /* 10:16 */
 width: 320px;
}

[ data-device = 'tablet' ] {
 padding-top: 75%; /* 4:3 */
 width: 1024px;
}

[ data-device = 'notebook' ] {
 padding-top: 62.5%; /* 16:10 */
 width: 1280px;
}

[ data-scroll ] {
 transition-timing-function: cubic-bezier( 0.6, 0, 0.3, 1 );
 animation-iteration-count: infinite;
}

[ data-scroll = '1' ] {
 animation-name: scroll-1;
 animation-duration: 6s;
 animation-play-state: running;
}

[ data-scroll = '2' ] {
 animation-name: scroll-2;
 animation-duration: 8s;
 animation-play-state: running;
}

[ data-scroll = '3' ] {
 animation-name: scroll-3;
 animation-duration: 12s;
 animation-play-state: running;
}

[ data-scroll = '4' ] {
 animation-name: scroll-4;
 animation-duration: 16s;
 animation-play-state: running;
}

[ data-scroll = '5' ] {
 animation-name: scroll-5;
 animation-duration: 16s;
 animation-play-state: running;
}

[ data-scroll = '1' ]:hover,
[ data-scroll = '1' ]:active {
 animation-play-state: paused;
}

[ data-scroll = '2' ]:hover,
[ data-scroll = '2' ]:active {
 animation-play-state: paused;
}

[ data-scroll = '3' ]:hover,
[ data-scroll = '3' ]:active {
 animation-play-state: paused;
}

[ data-scroll = '4' ]:hover,
[ data-scroll = '4' ]:active {
 animation-play-state: paused;
}


@keyframes scroll-1 {
	0%, 10%, 100% { background-position: center 0% }
 50%, 60%  { background-position: center 100% }
}

@keyframes scroll-2 {
	0%, 10%, 100% { background-position: center 0% }
 33%, 43% { background-position: center 50% }
 66%, 76%  { background-position: center 100% }
}

@keyframes scroll-3 {
	0%, 10%, 100% { background-position: center 0% }
 25%, 35% { background-position: center 33.333% }
 50%, 60% { background-position: center 66.666% }
 75%, 85% { background-position: center 100% }
}

@keyframes scroll-4 {
	0%, 10%, 100% { background-position: center 0% }
 15%, 30% { background-position: center 32% }
 45%, 55% { background-position: center 50% }
 65%, 75% { background-position: center 68% }
 85%, 95% { background-position: center 100% }
}

@keyframes scroll-5 {
	0%, 10%, 100% { background-position: center 0% }
 15%, 30% { background-position: center 32% }
 45%, 55% { background-position: center 57% }
 65%, 75% { background-position: center 67% }
 85%, 95% { background-position: center 89% }
}

.desktop-preview {
  position: relative;
}
.desktop-preview:after {
    content: '';
    position: absolute;
    bottom: -45px;
    left: 60px;
    width: calc(100% - 60px);
    height: 45px;
    background-image: url('../img/solution/motif.png?');
}
.desktop-preview figure div {
 background-image: url('../img/solution/landing-desktop.jpg');
}


.mobile-preview{
  position: absolute;
  right: -70px;
  bottom: -120px;
  width: 250px;
  transform: rotate(15deg);
  background: transparent;
}
.mobile-preview:before {
    content: '';
    position: absolute;
    top: -15px;
    bottom: -15px;
    left: -15px;
    right: -15px;
    margin: auto;
    background-image: url(../img/solution/shadow.png);
    background-size: auto 100%;
    background-position: center;
}
.mobile-preview img {
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    margin: auto;
    z-index: 4;
}

.mobile-preview figure {
    margin: 0;
    padding: 15px;
    background: transparent;
}
.mobile-preview figure div {
 background-image: url('../img/solution/landing-mobile.jpg');
}