$res .= '<div class="clay_ipad">';\r
$res .= '<img src="/images/services/Pencil.png" class="pencil" />';\r
$res .= '<img src="/images/services/Eraser.png" class="eraser" />';\r
- $res .= '<video width="100" loop muted autoplay><source src="/images/services/Showreel_Fluidbook_v0.mp4" /></video>';\r
+ $res .= '<video width="100" loop muted autoplay><source src="/images/services/Showreel_Fluidbook_05.mp4" /></video>';\r
$res .= '<img src="/images/services/ipad.png" class="layer" />';\r
$res .= '</div>'; // Ipad container\r
$res .= '</div>'; // Video wrapper\r
\r
.video-container {\r
position: absolute;\r
- top: 0;\r
left: 0;\r
display: flex;\r
justify-content: flex-end;\r
width: 100%;\r
- height: 100%;\r
+ height: max-content;\r
padding: 0 8%;\r
+ top: 50%;\r
+ transform: translateY(-50%);\r
\r
@media @m900 {\r
position: relative;\r
padding: 100px 5% 100px;\r
+ height: 100%;\r
+ top: 0;\r
+ transform: none;\r
}\r
\r
.video-wrapper {\r
align-items: center;\r
justify-content: flex-end;\r
position: relative;\r
+ height: max-content;\r
\r
@media @m900 {\r
flex-direction: column;\r
.ruler {\r
position: absolute;\r
width: 266px;\r
- bottom: -12vh;\r
+ bottom: -16px;\r
right: 0;\r
+ transform: translateY(100%);\r
\r
@media @m900 {\r
bottom: 15px;\r
right: -5%;\r
+ transform: none;\r
}\r
}\r
\r
height: auto;\r
display: flex;\r
//overflow: hidden;\r
+ box-shadow: 16px 16px 34px rgba(0,0,0,.4);\r
+ border-radius: 35px;\r
@media @m900 {\r
width: 100%;\r
}\r