From 7f54515e07343dd8db6bb808d3271a8cc135cba3 Mon Sep 17 00:00:00 2001 From: Sam Thilmany Date: Mon, 13 Nov 2017 20:01:21 +0100 Subject: [PATCH 1/2] Added an scss version Added npm scripts to compile the scss Added folders for the less and the scss code Changed the path to the less version in the Gruntfile --- Gruntfile.js | 4 +- dist/device-mockups.css | 2568 +++++++++++++--------------- dist/device-mockups.min.css | 2 +- package-lock.json | 642 ++++++- package.json | 7 +- src/{ => less}/device-mockups.less | 0 src/{ => less}/devices.less | 0 src/{ => less}/for.less | 0 src/{ => less}/general.less | 0 src/scss/device-mockups.scss | 59 + src/scss/devices.scss | 129 ++ src/scss/general.scss | 22 + 12 files changed, 1982 insertions(+), 1451 deletions(-) rename src/{ => less}/device-mockups.less (100%) rename src/{ => less}/devices.less (100%) rename src/{ => less}/for.less (100%) rename src/{ => less}/general.less (100%) create mode 100644 src/scss/device-mockups.scss create mode 100644 src/scss/devices.scss create mode 100644 src/scss/general.scss diff --git a/Gruntfile.js b/Gruntfile.js index f66e441..57dc3c8 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,7 +10,7 @@ module.exports = function (grunt) { ], }, files: { - 'dist/device-mockups.css': 'src/device-mockups.less' + 'dist/device-mockups.css': 'src/less/device-mockups.less' } } }, @@ -41,4 +41,4 @@ module.exports = function (grunt) { grunt.registerTask('default', ['less', 'cssmin', 'usebanner']); -}; \ No newline at end of file +}; diff --git a/dist/device-mockups.css b/dist/device-mockups.css index 6fbad6b..af24102 100644 --- a/dist/device-mockups.css +++ b/dist/device-mockups.css @@ -1,1468 +1,1282 @@ -/*! - * html5-device-mockups (https://github.com/pixelsign/html5-device-mockups) - * Copyright 2013 - 2017 pixelsign - * Licensed under MIT (https://github.com/pixelsign/html5-device-mockups/blob/master/LICENSE.txt) - * Last Build: Thu Sep 21 2017 21:24:45 - */ .device-wrapper { max-width: 300px; - width: 100%; -} + width: 100%; } + .device { position: relative; - background-size: cover; -} -.device .screen { - position: absolute; - background-size: cover; -} -.device .button { - position: absolute; - cursor: pointer; -} -.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 51.41800246609125%; - background-image: url("../device-mockups/galaxyS3/landscape_black.png"); -} -.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .screen { - top: 7.074340527577938%; - left: 9.3711467324291%; - width: 78.91491985203453%; - height: 86.33093525179856%; -} -.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .button { - top: 38.84892086330935%; - left: 93.34155363748458%; - width: 3.390875462392109%; - height: 22.54196642685851%; -} -.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 51.41800246609125%; - background-image: url("../device-mockups/galaxyS3/landscape_white.png"); -} -.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .screen { - top: 7.074340527577938%; - left: 9.3711467324291%; - width: 78.91491985203453%; - height: 86.33093525179856%; -} -.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .button { - top: 38.84892086330935%; - left: 93.34155363748458%; - width: 3.390875462392109%; - height: 22.54196642685851%; -} + background-size: cover; } + .device .screen { + position: absolute; + background-size: cover; + pointer-events: none; } + .device .button { + position: absolute; + cursor: pointer; } + .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 194.7178871548619%; - background-image: url("../device-mockups/galaxyS3/portrait_black.png"); -} -.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .screen { - top: 9.67940813810111%; - left: 6.602641056422569%; - width: 86.31452581032413%; - height: 78.91491985203453%; -} -.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .button { - top: 93.15659679408138%; - left: 38.655462184873954%; - width: 22.56902761104442%; - height: 3.2675709001233044%; -} + padding-bottom: 194.71789%; + background-image: url(../../images/assets/mockups/galaxyS3/portrait_black.png); } + .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .screen { + top: 9.67941%; + left: 6.60264%; + width: 86.31453%; + height: 78.91492%; } + .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .button { + top: 93.1566%; + left: 38.65546%; + width: 22.56903%; + height: 3.26757%; } + .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 194.7178871548619%; - background-image: url("../device-mockups/galaxyS3/portrait_white.png"); -} -.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .screen { - top: 9.3711467324291%; - left: 6.602641056422569%; - width: 86.31452581032413%; - height: 78.91491985203453%; -} -.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .button { - top: 93.15659679408138%; - left: 38.655462184873954%; - width: 22.56902761104442%; - height: 3.2675709001233044%; -} + padding-bottom: 194.71789%; + background-image: url(../../images/assets/mockups/galaxyS3/portrait_white.png); } + .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .screen { + top: 9.67941%; + left: 6.60264%; + width: 86.31453%; + height: 78.91492%; } + .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .button { + top: 93.1566%; + left: 38.65546%; + width: 22.56903%; + height: 3.26757%; } + +.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] { + padding-bottom: 51.418%; + background-image: url(../../images/assets/mockups/galaxyS3/landscape_black.png); } + .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .screen { + top: 7.07434%; + left: 9.37115%; + width: 78.91492%; + height: 86.33094%; } + .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .button { + top: 38.84892%; + left: 93.34155%; + width: 3.39088%; + height: 22.54197%; } + +.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] { + padding-bottom: 51.418%; + background-image: url(../../images/assets/mockups/galaxyS3/landscape_white.png); } + .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .screen { + top: 7.07434%; + left: 9.37115%; + width: 78.91492%; + height: 86.33094%; } + .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .button { + top: 38.84892%; + left: 93.34155%; + width: 3.39088%; + height: 22.54197%; } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 193.9837398373984%; - background-image: url("../device-mockups/galaxyS5/portrait_black.png"); -} -.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .screen { - top: 9.80720871751886%; - left: 6.097560975609756%; - width: 87.8048780487805%; - height: 80.4694048616932%; -} -.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .button { - top: 92.62363788767813%; - left: 38.943089430894304%; - width: 22.520325203252032%; - height: 3.730092204526404%; -} + padding-bottom: 193.98374%; + background-image: url(../../images/assets/mockups/galaxyS5/portrait_black.png); } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .screen { + top: 9.80721%; + left: 6.09756%; + width: 87.80488%; + height: 80.4694%; } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .button { + top: 92.62364%; + left: 38.94309%; + width: 22.52033%; + height: 3.73009%; } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 193.9837398373984%; - background-image: url("../device-mockups/galaxyS5/portrait_white.png"); -} -.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .screen { - top: 9.80720871751886%; - left: 6.097560975609756%; - width: 87.8048780487805%; - height: 80.4694048616932%; -} -.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .button { - top: 92.62363788767813%; - left: 38.943089430894304%; - width: 22.520325203252032%; - height: 3.730092204526404%; -} + padding-bottom: 193.98374%; + background-image: url(../../images/assets/mockups/galaxyS5/portrait_white.png); } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .screen { + top: 9.80721%; + left: 6.09756%; + width: 87.80488%; + height: 80.4694%; } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .button { + top: 92.62364%; + left: 38.94309%; + width: 22.52033%; + height: 3.73009%; } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 193.9837398373984%; - background-image: url("../device-mockups/galaxyS5/portrait_gold.png"); -} -.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .screen { - top: 9.80720871751886%; - left: 6.097560975609756%; - width: 87.8048780487805%; - height: 80.4694048616932%; -} -.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .button { - top: 92.62363788767813%; - left: 38.943089430894304%; - width: 22.520325203252032%; - height: 3.730092204526404%; -} + padding-bottom: 193.98374%; + background-image: url(../../images/assets/mockups/galaxyS5/portrait_gold.png); } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .screen { + top: 9.80721%; + left: 6.09756%; + width: 87.80488%; + height: 80.4694%; } + .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .button { + top: 92.62364%; + left: 38.94309%; + width: 22.52033%; + height: 3.73009%; } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 51.55071248952222%; - background-image: url("../device-mockups/galaxyS5/landscape_black.png"); -} -.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .screen { - top: 6.097560975609756%; - left: 9.80720871751886%; - width: 80.4694048616932%; - height: 87.8048780487805%; -} -.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .button { - top: 38.53658536585366%; - left: 92.62363788767813%; - width: 3.730092204526404%; - height: 22.520325203252032%; -} + padding-bottom: 51.55071%; + background-image: url(../../images/assets/mockups/galaxyS5/landscape_black.png); } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .screen { + top: 6.09756%; + left: 9.80721%; + width: 80.4694%; + height: 87.80488%; } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .button { + top: 38.53659%; + left: 92.62364%; + width: 3.73009%; + height: 22.52033%; } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 51.55071248952222%; - background-image: url("../device-mockups/galaxyS5/landscape_white.png"); -} -.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .screen { - top: 6.097560975609756%; - left: 9.80720871751886%; - width: 80.4694048616932%; - height: 87.8048780487805%; -} -.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .button { - top: 38.53658536585366%; - left: 92.62363788767813%; - width: 3.730092204526404%; - height: 22.520325203252032%; -} + padding-bottom: 51.55071%; + background-image: url(../../images/assets/mockups/galaxyS5/landscape_white.png); } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .screen { + top: 6.09756%; + left: 9.80721%; + width: 80.4694%; + height: 87.80488%; } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .button { + top: 38.53659%; + left: 92.62364%; + width: 3.73009%; + height: 22.52033%; } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 51.55071248952222%; - background-image: url("../device-mockups/galaxyS5/landscape_gold.png"); -} -.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .screen { - top: 6.097560975609756%; - left: 9.80720871751886%; - width: 80.4694048616932%; - height: 87.8048780487805%; -} -.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .button { - top: 38.53658536585366%; - left: 92.62363788767813%; - width: 3.730092204526404%; - height: 22.520325203252032%; -} + padding-bottom: 51.55071%; + background-image: url(../../images/assets/mockups/galaxyS5/landscape_gold.png); } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .screen { + top: 6.09756%; + left: 9.80721%; + width: 80.4694%; + height: 87.80488%; } + .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .button { + top: 38.53659%; + left: 92.62364%; + width: 3.73009%; + height: 22.52033%; } + .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 168.33616298811543%; - background-image: url("../device-mockups/galaxyTab4/portrait_black.png"); -} -.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .screen { - top: 8.572869389813414%; - left: 5.68760611205433%; - width: 87.94567062818336%; - height: 83.00554715078164%; -} -.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 168.33616%; + background-image: url(../../images/assets/mockups/galaxyTab4/portrait_black.png); } + .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .screen { + top: 8.57287%; + left: 5.68761%; + width: 87.94567%; + height: 83.00555%; } + .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 168.33616298811543%; - background-image: url("../device-mockups/galaxyTab4/portrait_white.png"); -} -.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .screen { - top: 8.522440746343923%; - left: 5.68760611205433%; - width: 87.94567062818336%; - height: 83.05597579425114%; -} -.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 168.33616%; + background-image: url(../../images/assets/mockups/galaxyTab4/portrait_white.png); } + .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .screen { + top: 8.52244%; + left: 5.68761%; + width: 87.94567%; + height: 83.05598%; } + .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 80.46663049376018%; - background-image: url("../device-mockups/iMac/portrait_black.png"); -} -.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen { - top: 5.057316250842886%; - left: 4.0694519804666305%; - width: 91.86109603906674%; - height: 64.19420094403236%; -} -.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 80.46663%; + background-image: url(../../images/assets/mockups/iMac/portrait_black.png); } + .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen { + top: 5.05732%; + left: 4.06945%; + width: 91.8611%; + height: 64.1942%; } + .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 129.56989247311827%; - background-image: url("../device-mockups/iPad/portrait_black.png"); -} -.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .screen { - top: 9.12863070539419%; - left: 10.304659498207885%; - width: 79.21146953405018%; - height: 81.3969571230982%; -} -.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .button { - top: 93.15352697095436%; - left: 47.132616487455195%; - width: 6.003584229390681%; - height: 4.495159059474412%; -} + padding-bottom: 129.56989%; + background-image: url(../../images/assets/mockups/iPad/portrait_black.png); } + .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .screen { + top: 9.12863%; + left: 10.30466%; + width: 79.21147%; + height: 81.39696%; } + .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .button { + top: 93.15353%; + left: 47.13262%; + width: 6.00358%; + height: 4.49516%; } + .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 129.56989247311827%; - background-image: url("../device-mockups/iPad/portrait_white.png"); -} -.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .screen { - top: 9.12863070539419%; - left: 10.483870967741936%; - width: 79.3010752688172%; - height: 81.3969571230982%; -} -.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .button { - top: 93.15352697095436%; - left: 47.132616487455195%; - width: 6.003584229390681%; - height: 4.495159059474412%; -} + padding-bottom: 129.56989%; + background-image: url(../../images/assets/mockups/iPad/portrait_white.png); } + .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .screen { + top: 9.12863%; + left: 10.48387%; + width: 79.30108%; + height: 81.39696%; } + .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .button { + top: 93.15353%; + left: 47.13262%; + width: 6.00358%; + height: 4.49516%; } + .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 77.04011065006915%; - background-image: url("../device-mockups/iPad/landscape_black.png"); -} -.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .screen { - top: 10.23339317773788%; - left: 9.266943291839558%; - width: 81.32780082987551%; - height: 79.44344703770197%; -} -.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .button { - top: 46.768402154398565%; - left: 93.22268326417704%; - width: 4.426002766251729%; - height: 6.014362657091562%; -} + padding-bottom: 77.04011%; + background-image: url(../../images/assets/mockups/iPad/landscape_black.png); } + .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .screen { + top: 10.23339%; + left: 9.26694%; + width: 81.3278%; + height: 79.44345%; } + .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .button { + top: 46.7684%; + left: 93.22268%; + width: 4.426%; + height: 6.01436%; } + .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 77.04011065006915%; - background-image: url("../device-mockups/iPad/landscape_white.png"); -} -.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .screen { - top: 10.23339317773788%; - left: 9.266943291839558%; - width: 81.32780082987551%; - height: 79.44344703770197%; -} -.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .button { - top: 46.768402154398565%; - left: 93.22268326417704%; - width: 4.426002766251729%; - height: 6.014362657091562%; -} + padding-bottom: 77.04011%; + background-image: url(../../images/assets/mockups/iPad/landscape_white.png); } + .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .screen { + top: 10.23339%; + left: 9.26694%; + width: 81.3278%; + height: 79.44345%; } + .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .button { + top: 46.7684%; + left: 93.22268%; + width: 4.426%; + height: 6.01436%; } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 141.3929784824462%; - background-image: url("../device-mockups/iPadAir2/portrait_black.png"); -} -.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .screen { - top: 9.090909090909092%; - left: 6.455266138165346%; - width: 86.9762174405436%; - height: 82.01842210652784%; -} -.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .button { - top: 93.55226271525831%; - left: 46.82899207248018%; - width: 6.285390713476784%; - height: 4.445334401281538%; -} + padding-bottom: 141.39298%; + background-image: url(../../images/assets/mockups/iPadAir2/portrait_black.png); } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .screen { + top: 9.09091%; + left: 6.45527%; + width: 86.97622%; + height: 82.01842%; } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .button { + top: 93.55226%; + left: 46.82899%; + width: 6.28539%; + height: 4.44533%; } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 141.3929784824462%; - background-image: url("../device-mockups/iPadAir2/portrait_white.png"); -} -.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .screen { - top: 9.090909090909092%; - left: 6.455266138165346%; - width: 86.9762174405436%; - height: 82.01842210652784%; -} -.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .button { - top: 93.55226271525831%; - left: 46.82899207248018%; - width: 6.285390713476784%; - height: 4.445334401281538%; -} + padding-bottom: 141.39298%; + background-image: url(../../images/assets/mockups/iPadAir2/portrait_white.png); } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .screen { + top: 9.09091%; + left: 6.45527%; + width: 86.97622%; + height: 82.01842%; } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .button { + top: 93.55226%; + left: 46.82899%; + width: 6.28539%; + height: 4.44533%; } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 141.3929784824462%; - background-image: url("../device-mockups/iPadAir2/portrait_gold.png"); -} -.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .screen { - top: 9.090909090909092%; - left: 6.455266138165346%; - width: 86.9762174405436%; - height: 82.01842210652784%; -} -.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .button { - top: 93.55226271525831%; - left: 46.82899207248018%; - width: 6.285390713476784%; - height: 4.445334401281538%; -} + padding-bottom: 141.39298%; + background-image: url(../../images/assets/mockups/iPadAir2/portrait_gold.png); } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .screen { + top: 9.09091%; + left: 6.45527%; + width: 86.97622%; + height: 82.01842%; } + .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .button { + top: 93.55226%; + left: 46.82899%; + width: 6.28539%; + height: 4.44533%; } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 70.72486984381257%; - background-image: url("../device-mockups/iPadAir2/landscape_black.png"); -} -.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .screen { - top: 6.5685164212910525%; - left: 9.090909090909092%; - width: 82.01842210652784%; - height: 86.9762174405436%; -} -.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .button { - top: 46.88561721404304%; - left: 93.55226271525831%; - width: 4.445334401281538%; - height: 6.285390713476784%; -} + padding-bottom: 70.72487%; + background-image: url(../../images/assets/mockups/iPadAir2/landscape_black.png); } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .screen { + top: 6.56852%; + left: 9.09091%; + width: 82.01842%; + height: 86.97622%; } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .button { + top: 46.88562%; + left: 93.55226%; + width: 4.44533%; + height: 6.28539%; } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 70.72486984381257%; - background-image: url("../device-mockups/iPadAir2/landscape_white.png"); -} -.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .screen { - top: 6.5685164212910525%; - left: 9.090909090909092%; - width: 82.01842210652784%; - height: 86.9762174405436%; -} -.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .button { - top: 46.88561721404304%; - left: 93.55226271525831%; - width: 4.445334401281538%; - height: 6.285390713476784%; -} + padding-bottom: 70.72487%; + background-image: url(../../images/assets/mockups/iPadAir2/landscape_white.png); } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .screen { + top: 6.56852%; + left: 9.09091%; + width: 82.01842%; + height: 86.97622%; } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .button { + top: 46.88562%; + left: 93.55226%; + width: 4.44533%; + height: 6.28539%; } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 70.72486984381257%; - background-image: url("../device-mockups/iPadAir2/landscape_gold.png"); -} -.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .screen { - top: 6.5685164212910525%; - left: 9.090909090909092%; - width: 82.01842210652784%; - height: 86.9762174405436%; -} -.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .button { - top: 46.88561721404304%; - left: 93.55226271525831%; - width: 4.445334401281538%; - height: 6.285390713476784%; -} + padding-bottom: 70.72487%; + background-image: url(../../images/assets/mockups/iPadAir2/landscape_gold.png); } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .screen { + top: 6.56852%; + left: 9.09091%; + width: 82.01842%; + height: 86.97622%; } + .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .button { + top: 46.88562%; + left: 93.55226%; + width: 4.44533%; + height: 6.28539%; } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 138.62249346120313%; - background-image: url("../device-mockups/iPadPro/portrait_black.png"); -} -.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .screen { - top: 7.044025157232705%; - left: 5.361813426329555%; - width: 89.23278116826503%; - height: 85.9119496855346%; -} -.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .button { - top: 94.937106918239%; - left: 47.60244115082825%; - width: 4.838709677419355%; - height: 3.5220125786163523%; -} + padding-bottom: 138.62249%; + background-image: url(../../images/assets/mockups/iPadPro/portrait_black.png); } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .screen { + top: 7.04403%; + left: 5.36181%; + width: 89.23278%; + height: 85.91195%; } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .button { + top: 94.93711%; + left: 47.60244%; + width: 4.83871%; + height: 3.52201%; } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 138.62249346120313%; - background-image: url("../device-mockups/iPadPro/portrait_white.png"); -} -.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .screen { - top: 7.044025157232705%; - left: 5.361813426329555%; - width: 89.23278116826503%; - height: 85.9119496855346%; -} -.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .button { - top: 94.937106918239%; - left: 47.60244115082825%; - width: 4.838709677419355%; - height: 3.5220125786163523%; -} + padding-bottom: 138.62249%; + background-image: url(../../images/assets/mockups/iPadPro/portrait_white.png); } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .screen { + top: 7.04403%; + left: 5.36181%; + width: 89.23278%; + height: 85.91195%; } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .button { + top: 94.93711%; + left: 47.60244%; + width: 4.83871%; + height: 3.52201%; } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 138.62249346120313%; - background-image: url("../device-mockups/iPadPro/portrait_gold.png"); -} -.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .screen { - top: 7.0754716981132075%; - left: 5.361813426329555%; - width: 89.23278116826503%; - height: 85.88050314465409%; -} -.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .button { - top: 94.937106918239%; - left: 47.60244115082825%; - width: 4.838709677419355%; - height: 3.5220125786163523%; -} + padding-bottom: 138.62249%; + background-image: url(../../images/assets/mockups/iPadPro/portrait_gold.png); } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .screen { + top: 7.07547%; + left: 5.36181%; + width: 89.23278%; + height: 85.8805%; } + .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .button { + top: 94.93711%; + left: 47.60244%; + width: 4.83871%; + height: 3.52201%; } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 72.13836477987421%; - background-image: url("../device-mockups/iPadPro/landscape_black.png"); -} -.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .screen { - top: 5.405405405405405%; - left: 7.044025157232705%; - width: 85.9119496855346%; - height: 89.23278116826503%; -} -.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .button { - top: 47.5588491717524%; - left: 94.937106918239%; - width: 3.5220125786163523%; - height: 4.838709677419355%; -} + padding-bottom: 72.13836%; + background-image: url(../../images/assets/mockups/iPadPro/landscape_black.png); } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .screen { + top: 5.40541%; + left: 7.04403%; + width: 85.91195%; + height: 89.23278%; } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .button { + top: 47.55885%; + left: 94.93711%; + width: 3.52201%; + height: 4.83871%; } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 72.13836477987421%; - background-image: url("../device-mockups/iPadPro/landscape_white.png"); -} -.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .screen { - top: 5.405405405405405%; - left: 7.044025157232705%; - width: 85.9119496855346%; - height: 89.23278116826503%; -} -.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .button { - top: 47.5588491717524%; - left: 94.937106918239%; - width: 3.5220125786163523%; - height: 4.838709677419355%; -} + padding-bottom: 72.13836%; + background-image: url(../../images/assets/mockups/iPadPro/landscape_white.png); } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .screen { + top: 5.40541%; + left: 7.04403%; + width: 85.91195%; + height: 89.23278%; } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .button { + top: 47.55885%; + left: 94.93711%; + width: 3.52201%; + height: 4.83871%; } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 72.1471235460547%; - background-image: url("../device-mockups/iPadPro/landscape_gold.png"); -} -.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .screen { - top: 5.403050108932462%; - left: 7.073247406475951%; - width: 85.88494184218798%; - height: 89.23747276688452%; -} -.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .button { - top: 47.53812636165578%; - left: 94.90726186733731%; - width: 3.5523420308079223%; - height: 4.880174291938998%; -} + padding-bottom: 72.14712%; + background-image: url(../../images/assets/mockups/iPadPro/landscape_gold.png); } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .screen { + top: 5.40305%; + left: 7.07325%; + width: 85.88494%; + height: 89.23747%; } + .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .button { + top: 47.53813%; + left: 94.90726%; + width: 3.55234%; + height: 4.88017%; } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 207.620164126612%; - background-image: url("../device-mockups/iPhone6/portrait_black.png"); -} -.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .screen { - top: 12.25296442687747%; - left: 6.096131301289566%; - width: 88.042203985932%; - height: 75.32467532467533%; -} -.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .button { - top: 89.32806324110672%; - left: 41.85228604923799%; - width: 16.64712778429074%; - height: 8.018068887634106%; -} + padding-bottom: 207.62016%; + background-image: url(../../images/assets/mockups/iPhone6/portrait_black.png); } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .screen { + top: 12.25296%; + left: 6.09613%; + width: 88.0422%; + height: 75.32468%; } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .button { + top: 89.32806%; + left: 41.85229%; + width: 16.64713%; + height: 8.01807%; } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 207.620164126612%; - background-image: url("../device-mockups/iPhone6/portrait_white.png"); -} -.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .screen { - top: 12.25296442687747%; - left: 6.096131301289566%; - width: 88.042203985932%; - height: 75.32467532467533%; -} -.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .button { - top: 89.32806324110672%; - left: 41.85228604923799%; - width: 16.64712778429074%; - height: 8.018068887634106%; -} + padding-bottom: 207.62016%; + background-image: url(../../images/assets/mockups/iPhone6/portrait_white.png); } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .screen { + top: 12.25296%; + left: 6.09613%; + width: 88.0422%; + height: 75.32468%; } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .button { + top: 89.32806%; + left: 41.85229%; + width: 16.64713%; + height: 8.01807%; } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 207.620164126612%; - background-image: url("../device-mockups/iPhone6/portrait_gold.png"); -} -.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .screen { - top: 12.25296442687747%; - left: 6.096131301289566%; - width: 88.042203985932%; - height: 75.32467532467533%; -} -.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .button { - top: 89.32806324110672%; - left: 41.85228604923799%; - width: 16.64712778429074%; - height: 8.018068887634106%; -} + padding-bottom: 207.62016%; + background-image: url(../../images/assets/mockups/iPhone6/portrait_gold.png); } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .screen { + top: 12.25296%; + left: 6.09613%; + width: 88.0422%; + height: 75.32468%; } + .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .button { + top: 89.32806%; + left: 41.85229%; + width: 16.64713%; + height: 8.01807%; } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 48.164878599661215%; - background-image: url("../device-mockups/iPhone6/landscape_black.png"); -} -.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .screen { - top: 5.861664712778429%; - left: 12.309429700734048%; - width: 75.26821005081875%; - height: 87.92497069167644%; -} -.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .button { - top: 41.50058616647128%; - left: 89.32806324110672%; - width: 8.018068887634106%; - height: 16.64712778429074%; -} + padding-bottom: 48.16488%; + background-image: url(../../images/assets/mockups/iPhone6/landscape_black.png); } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .screen { + top: 5.86166%; + left: 12.30943%; + width: 75.26821%; + height: 87.92497%; } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .button { + top: 41.50059%; + left: 89.32806%; + width: 8.01807%; + height: 16.64713%; } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 48.164878599661215%; - background-image: url("../device-mockups/iPhone6/landscape_white.png"); -} -.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .screen { - top: 5.861664712778429%; - left: 12.309429700734048%; - width: 75.26821005081875%; - height: 87.92497069167644%; -} -.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .button { - top: 41.50058616647128%; - left: 89.32806324110672%; - width: 8.018068887634106%; - height: 16.64712778429074%; -} + padding-bottom: 48.16488%; + background-image: url(../../images/assets/mockups/iPhone6/landscape_white.png); } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .screen { + top: 5.86166%; + left: 12.30943%; + width: 75.26821%; + height: 87.92497%; } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .button { + top: 41.50059%; + left: 89.32806%; + width: 8.01807%; + height: 16.64713%; } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 48.164878599661215%; - background-image: url("../device-mockups/iPhone6/landscape_gold.png"); -} -.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .screen { - top: 5.861664712778429%; - left: 12.309429700734048%; - width: 75.26821005081875%; - height: 87.92497069167644%; -} -.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .button { - top: 41.50058616647128%; - left: 89.32806324110672%; - width: 8.018068887634106%; - height: 16.64712778429074%; -} + padding-bottom: 48.16488%; + background-image: url(../../images/assets/mockups/iPhone6/landscape_gold.png); } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .screen { + top: 5.86166%; + left: 12.30943%; + width: 75.26821%; + height: 87.92497%; } + .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .button { + top: 41.50059%; + left: 89.32806%; + width: 8.01807%; + height: 16.64713%; } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 201.45161290322577%; - background-image: url("../device-mockups/iPhone6Plus/portrait_black.png"); -} -.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .screen { - top: 11.489191353082466%; - left: 6.532258064516129%; - width: 87.09677419354838%; - height: 76.86148919135309%; -} -.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .button { - top: 90.43234587670136%; - left: 43.306451612903224%; - width: 13.38709677419355%; - height: 6.645316253002402%; -} + padding-bottom: 201.45161%; + background-image: url(../../images/assets/mockups/iPhone6Plus/portrait_black.png); } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .screen { + top: 11.48919%; + left: 6.53226%; + width: 87.09677%; + height: 76.86149%; } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .button { + top: 90.43235%; + left: 43.30645%; + width: 13.3871%; + height: 6.64532%; } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 201.45161290322577%; - background-image: url("../device-mockups/iPhone6Plus/portrait_white.png"); -} -.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .screen { - top: 11.489191353082466%; - left: 6.532258064516129%; - width: 87.09677419354838%; - height: 76.86148919135309%; -} -.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .button { - top: 90.43234587670136%; - left: 43.306451612903224%; - width: 13.38709677419355%; - height: 6.645316253002402%; -} + padding-bottom: 201.45161%; + background-image: url(../../images/assets/mockups/iPhone6Plus/portrait_white.png); } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .screen { + top: 11.48919%; + left: 6.53226%; + width: 87.09677%; + height: 76.86149%; } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .button { + top: 90.43235%; + left: 43.30645%; + width: 13.3871%; + height: 6.64532%; } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 201.45161290322577%; - background-image: url("../device-mockups/iPhone6Plus/portrait_gold.png"); -} -.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .screen { - top: 11.489191353082466%; - left: 6.532258064516129%; - width: 87.09677419354838%; - height: 76.86148919135309%; -} -.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .button { - top: 90.43234587670136%; - left: 43.306451612903224%; - width: 13.38709677419355%; - height: 6.645316253002402%; -} + padding-bottom: 201.45161%; + background-image: url(../../images/assets/mockups/iPhone6Plus/portrait_gold.png); } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .screen { + top: 11.48919%; + left: 6.53226%; + width: 87.09677%; + height: 76.86149%; } + .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .button { + top: 90.43235%; + left: 43.30645%; + width: 13.3871%; + height: 6.64532%; } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 49.639711769415534%; - background-image: url("../device-mockups/iPhone6Plus/landscape_black.png"); -} -.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .screen { - top: 6.370967741935483%; - left: 11.489191353082466%; - width: 76.86148919135309%; - height: 87.09677419354838%; -} -.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .button { - top: 43.306451612903224%; - left: 90.43234587670136%; - width: 6.645316253002402%; - height: 13.38709677419355%; -} + padding-bottom: 49.63971%; + background-image: url(../../images/assets/mockups/iPhone6Plus/landscape_black.png); } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .screen { + top: 6.37097%; + left: 11.48919%; + width: 76.86149%; + height: 87.09677%; } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .button { + top: 43.30645%; + left: 90.43235%; + width: 6.64532%; + height: 13.3871%; } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 49.639711769415534%; - background-image: url("../device-mockups/iPhone6Plus/landscape_white.png"); -} -.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .screen { - top: 6.370967741935483%; - left: 11.489191353082466%; - width: 76.86148919135309%; - height: 87.09677419354838%; -} -.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .button { - top: 43.306451612903224%; - left: 90.43234587670136%; - width: 6.645316253002402%; - height: 13.38709677419355%; -} + padding-bottom: 49.63971%; + background-image: url(../../images/assets/mockups/iPhone6Plus/landscape_white.png); } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .screen { + top: 6.37097%; + left: 11.48919%; + width: 76.86149%; + height: 87.09677%; } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .button { + top: 43.30645%; + left: 90.43235%; + width: 6.64532%; + height: 13.3871%; } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 49.639711769415534%; - background-image: url("../device-mockups/iPhone6Plus/landscape_gold.png"); -} -.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .screen { - top: 6.370967741935483%; - left: 11.489191353082466%; - width: 76.86148919135309%; - height: 87.09677419354838%; -} -.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .button { - top: 43.306451612903224%; - left: 90.43234587670136%; - width: 6.645316253002402%; - height: 13.38709677419355%; -} + padding-bottom: 49.63971%; + background-image: url(../../images/assets/mockups/iPhone6Plus/landscape_gold.png); } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .screen { + top: 6.37097%; + left: 11.48919%; + width: 76.86149%; + height: 87.09677%; } + .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .button { + top: 43.30645%; + left: 90.43235%; + width: 6.64532%; + height: 13.3871%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 209.829619921363%; - background-image: url("../device-mockups/iPhoneSE/portrait_black.png"); -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .screen { - top: 14.803247970018738%; - left: 8.51900393184797%; - width: 83.8794233289646%; - height: 70.95565271705185%; -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .button { - top: 88.50718301061836%; - left: 41.67758846657929%; - width: 17.693315858453474%; - height: 8.432229856339788%; -} + padding-bottom: 209.82962%; + background-image: url(../../images/assets/mockups/iPhoneSE/portrait_black.png); } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .screen { + top: 14.80325%; + left: 8.519%; + width: 83.87942%; + height: 70.95565%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .button { + top: 88.50718%; + left: 41.67759%; + width: 17.69332%; + height: 8.43223%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 209.829619921363%; - background-image: url("../device-mockups/iPhoneSE/portrait_white.png"); -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .screen { - top: 14.803247970018738%; - left: 8.51900393184797%; - width: 83.8794233289646%; - height: 70.95565271705185%; -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .button { - top: 88.50718301061836%; - left: 41.67758846657929%; - width: 17.693315858453474%; - height: 8.432229856339788%; -} + padding-bottom: 209.82962%; + background-image: url(../../images/assets/mockups/iPhoneSE/portrait_white.png); } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .screen { + top: 14.80325%; + left: 8.519%; + width: 83.87942%; + height: 70.95565%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .button { + top: 88.50718%; + left: 41.67759%; + width: 17.69332%; + height: 8.43223%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 209.829619921363%; - background-image: url("../device-mockups/iPhoneSE/portrait_gold.png"); -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .screen { - top: 14.803247970018738%; - left: 8.51900393184797%; - width: 83.8794233289646%; - height: 70.95565271705185%; -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .button { - top: 88.50718301061836%; - left: 41.67758846657929%; - width: 17.693315858453474%; - height: 8.432229856339788%; -} + padding-bottom: 209.82962%; + background-image: url(../../images/assets/mockups/iPhoneSE/portrait_gold.png); } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .screen { + top: 14.80325%; + left: 8.519%; + width: 83.87942%; + height: 70.95565%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .button { + top: 88.50718%; + left: 41.67759%; + width: 17.69332%; + height: 8.43223%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] { - padding-bottom: 209.829619921363%; - background-image: url("../device-mockups/iPhoneSE/portrait_pink.png"); -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .screen { - top: 14.803247970018738%; - left: 8.51900393184797%; - width: 83.8794233289646%; - height: 70.95565271705185%; -} -.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .button { - top: 88.50718301061836%; - left: 41.67758846657929%; - width: 17.693315858453474%; - height: 8.432229856339788%; -} + padding-bottom: 209.82962%; + background-image: url(../../images/assets/mockups/iPhoneSE/portrait_pink.png); } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .screen { + top: 14.80325%; + left: 8.519%; + width: 83.87942%; + height: 70.95565%; } + .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .button { + top: 88.50718%; + left: 41.67759%; + width: 17.69332%; + height: 8.43223%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 47.65771392879451%; - background-image: url("../device-mockups/iPhoneSE/landscape_black.png"); -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .screen { - top: 7.601572739187418%; - left: 14.803247970018738%; - width: 70.95565271705185%; - height: 83.8794233289646%; -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .button { - top: 40.62909567496724%; - left: 88.50718301061836%; - width: 8.432229856339788%; - height: 17.693315858453474%; -} + padding-bottom: 47.65771%; + background-image: url(../../images/assets/mockups/iPhoneSE/landscape_black.png); } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .screen { + top: 7.60157%; + left: 14.80325%; + width: 70.95565%; + height: 83.87942%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .button { + top: 40.6291%; + left: 88.50718%; + width: 8.43223%; + height: 17.69332%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 47.65771392879451%; - background-image: url("../device-mockups/iPhoneSE/landscape_white.png"); -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .screen { - top: 7.601572739187418%; - left: 14.803247970018738%; - width: 70.95565271705185%; - height: 83.8794233289646%; -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .button { - top: 40.62909567496724%; - left: 88.50718301061836%; - width: 8.432229856339788%; - height: 17.693315858453474%; -} + padding-bottom: 47.65771%; + background-image: url(../../images/assets/mockups/iPhoneSE/landscape_white.png); } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .screen { + top: 7.60157%; + left: 14.80325%; + width: 70.95565%; + height: 83.87942%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .button { + top: 40.6291%; + left: 88.50718%; + width: 8.43223%; + height: 17.69332%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 47.65771392879451%; - background-image: url("../device-mockups/iPhoneSE/landscape_gold.png"); -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .screen { - top: 7.601572739187418%; - left: 14.803247970018738%; - width: 70.95565271705185%; - height: 83.8794233289646%; -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .button { - top: 40.62909567496724%; - left: 88.50718301061836%; - width: 8.432229856339788%; - height: 17.693315858453474%; -} + padding-bottom: 47.65771%; + background-image: url(../../images/assets/mockups/iPhoneSE/landscape_gold.png); } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .screen { + top: 7.60157%; + left: 14.80325%; + width: 70.95565%; + height: 83.87942%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .button { + top: 40.6291%; + left: 88.50718%; + width: 8.43223%; + height: 17.69332%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] { - padding-bottom: 47.65771392879451%; - background-image: url("../device-mockups/iPhoneSE/landscape_pink.png"); -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .screen { - top: 7.601572739187418%; - left: 14.803247970018738%; - width: 70.95565271705185%; - height: 83.8794233289646%; -} -.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .button { - top: 40.62909567496724%; - left: 88.50718301061836%; - width: 8.432229856339788%; - height: 17.693315858453474%; -} + padding-bottom: 47.65771%; + background-image: url(../../images/assets/mockups/iPhoneSE/landscape_pink.png); } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .screen { + top: 7.60157%; + left: 14.80325%; + width: 70.95565%; + height: 83.87942%; } + .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .button { + top: 40.6291%; + left: 88.50718%; + width: 8.43223%; + height: 17.69332%; } + .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 209.46123521681997%; - background-image: url("../device-mockups/iPhone5/portrait_black.png"); -} -.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .screen { - top: 14.805520702634881%; - left: 8.278580814717477%; - width: 84.23127463863338%; - height: 71.267252195734%; -} -.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .button { - top: 88.51944792973651%; - left: 41.52431011826544%; - width: 18.00262812089356%; - height: 8.594730238393977%; -} + padding-bottom: 209.46124%; + background-image: url(../../images/assets/mockups/iPhone5/portrait_black.png); } + .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .screen { + top: 14.80552%; + left: 8.27858%; + width: 84.23127%; + height: 71.26725%; } + .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .button { + top: 88.51945%; + left: 41.52431%; + width: 18.00263%; + height: 8.59473%; } + .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 209.46123521681997%; - background-image: url("../device-mockups/iPhone5/portrait_white.png"); -} -.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .screen { - top: 14.805520702634881%; - left: 8.278580814717477%; - width: 84.23127463863338%; - height: 71.267252195734%; -} -.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .button { - top: 88.51944792973651%; - left: 41.52431011826544%; - width: 18.00262812089356%; - height: 8.594730238393977%; -} + padding-bottom: 209.46124%; + background-image: url(../../images/assets/mockups/iPhone5/portrait_white.png); } + .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .screen { + top: 14.80552%; + left: 8.27858%; + width: 84.23127%; + height: 71.26725%; } + .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .button { + top: 88.51945%; + left: 41.52431%; + width: 18.00263%; + height: 8.59473%; } + .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 47.74153074027603%; - background-image: url("../device-mockups/iPhone5/landscape_black.png"); -} -.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .screen { - top: 7.490144546649145%; - left: 14.805520702634881%; - width: 71.267252195734%; - height: 84.23127463863338%; -} -.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .button { - top: 40.473061760841%; - left: 88.51944792973651%; - width: 8.594730238393977%; - height: 18.00262812089356%; -} + padding-bottom: 47.74153%; + background-image: url(../../images/assets/mockups/iPhone5/landscape_black.png); } + .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .screen { + top: 7.49014%; + left: 14.80552%; + width: 71.26725%; + height: 84.23127%; } + .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .button { + top: 40.47306%; + left: 88.51945%; + width: 8.59473%; + height: 18.00263%; } + .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 47.74153074027603%; - background-image: url("../device-mockups/iPhone5/landscape_white.png"); -} -.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .screen { - top: 7.490144546649145%; - left: 14.805520702634881%; - width: 71.267252195734%; - height: 84.23127463863338%; -} -.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .button { - top: 40.473061760841%; - left: 88.51944792973651%; - width: 8.594730238393977%; - height: 18.00262812089356%; -} + padding-bottom: 47.74153%; + background-image: url(../../images/assets/mockups/iPhone5/landscape_white.png); } + .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .screen { + top: 7.49014%; + left: 14.80552%; + width: 71.26725%; + height: 84.23127%; } + .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .button { + top: 40.47306%; + left: 88.51945%; + width: 8.59473%; + height: 18.00263%; } + .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 192.31287929871883%; - background-image: url("../device-mockups/Lumia930/portrait_black.png"); -} -.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .screen { - top: 7.1178120617110805%; - left: 5.529332434254889%; - width: 87.86244099797707%; - height: 81.13604488078542%; -} -.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 192.31288%; + background-image: url(../../images/assets/mockups/Lumia930/portrait_black.png); } + .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .screen { + top: 7.11781%; + left: 5.52933%; + width: 87.86244%; + height: 81.13604%; } + .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 192.31287929871883%; - background-image: url("../device-mockups/Lumia930/portrait_white.png"); -} -.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .screen { - top: 7.1178120617110805%; - left: 5.529332434254889%; - width: 87.86244099797707%; - height: 81.13604488078542%; -} -.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 192.31288%; + background-image: url(../../images/assets/mockups/Lumia930/portrait_white.png); } + .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .screen { + top: 7.11781%; + left: 5.52933%; + width: 87.86244%; + height: 81.13604%; } + .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 51.998597475455824%; - background-image: url("../device-mockups/Lumia930/landscape_black.png"); -} -.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .screen { - top: 6.608226567768037%; - left: 7.1178120617110805%; - width: 81.13604488078542%; - height: 87.86244099797707%; -} -.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 51.9986%; + background-image: url(../../images/assets/mockups/Lumia930/landscape_black.png); } + .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .screen { + top: 6.60823%; + left: 7.11781%; + width: 81.13604%; + height: 87.86244%; } + .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 51.998597475455824%; - background-image: url("../device-mockups/Lumia930/landscape_white.png"); -} -.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .screen { - top: 6.608226567768037%; - left: 7.1178120617110805%; - width: 81.13604488078542%; - height: 87.86244099797707%; -} -.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 51.9986%; + background-image: url(../../images/assets/mockups/Lumia930/landscape_white.png); } + .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .screen { + top: 6.60823%; + left: 7.11781%; + width: 81.13604%; + height: 87.86244%; } + .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 57.51565762004176%; - background-image: url("../device-mockups/Macbook/portrait_black.png"); -} -.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .screen { - top: 7.259528130671507%; - left: 12.369519832985386%; - width: 75.26096033402922%; - height: 81.85117967332124%; -} -.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 57.51566%; + background-image: url(../../images/assets/mockups/Macbook/portrait_black.png); } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .screen { + top: 7.25953%; + left: 12.36952%; + width: 75.26096%; + height: 81.85118%; } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 57.51565762004176%; - background-image: url("../device-mockups/Macbook/portrait_white.png"); -} -.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .screen { - top: 7.259528130671507%; - left: 12.369519832985386%; - width: 75.26096033402922%; - height: 81.85117967332124%; -} -.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 57.51566%; + background-image: url(../../images/assets/mockups/Macbook/portrait_white.png); } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .screen { + top: 7.25953%; + left: 12.36952%; + width: 75.26096%; + height: 81.85118%; } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 57.51565762004176%; - background-image: url("../device-mockups/Macbook/portrait_gold.png"); -} -.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .screen { - top: 7.259528130671507%; - left: 12.369519832985386%; - width: 75.26096033402922%; - height: 81.85117967332124%; -} -.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 57.51566%; + background-image: url(../../images/assets/mockups/Macbook/portrait_gold.png); } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .screen { + top: 7.25953%; + left: 12.36952%; + width: 75.26096%; + height: 81.85118%; } + .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 57.51565762004176%; - background-image: url("../device-mockups/Macbook2015/portrait_black.png"); -} -.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .screen { - top: 7.350272232304899%; - left: 12.421711899791232%; - width: 75.15657620041753%; - height: 81.76043557168784%; -} -.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 57.51566%; + background-image: url(../../images/assets/mockups/Macbook2015/portrait_black.png); } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .screen { + top: 7.35027%; + left: 12.42171%; + width: 75.15658%; + height: 81.76044%; } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 57.51565762004176%; - background-image: url("../device-mockups/Macbook2015/portrait_white.png"); -} -.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .screen { - top: 7.350272232304899%; - left: 12.421711899791232%; - width: 75.15657620041753%; - height: 81.76043557168784%; -} -.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 57.51566%; + background-image: url(../../images/assets/mockups/Macbook2015/portrait_white.png); } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .screen { + top: 7.35027%; + left: 12.42171%; + width: 75.15658%; + height: 81.76044%; } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 57.51565762004176%; - background-image: url("../device-mockups/Macbook2015/portrait_gold.png"); -} -.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .screen { - top: 7.350272232304899%; - left: 12.421711899791232%; - width: 75.15657620041753%; - height: 81.76043557168784%; -} -.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 57.51566%; + background-image: url(../../images/assets/mockups/Macbook2015/portrait_gold.png); } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .screen { + top: 7.35027%; + left: 12.42171%; + width: 75.15658%; + height: 81.76044%; } + .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 57.94701986754966%; - background-image: url("../device-mockups/MacbookPro/portrait_black.png"); -} -.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen { - top: 6.714285714285714%; - left: 11.83774834437086%; - width: 76.40728476821192%; - height: 82.42857142857143%; -} -.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 57.94702%; + background-image: url(../../images/assets/mockups/MacbookPro/portrait_black.png); } + .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen { + top: 6.71429%; + left: 11.83775%; + width: 76.40728%; + height: 82.42857%; } + .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 64.6780303030303%; - background-image: url("../device-mockups/SamsungTV/portrait_black.png"); -} -.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .screen { - top: 2.1961932650073206%; - left: 1.3257575757575757%; - width: 97.25378787878788%; - height: 85.21229868228404%; -} -.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 64.67803%; + background-image: url(../../images/assets/mockups/SamsungTV/portrait_black.png); } + .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .screen { + top: 2.19619%; + left: 1.32576%; + width: 97.25379%; + height: 85.2123%; } + .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 62.38125395820139%; - background-image: url("../device-mockups/Surface/portrait_black.png"); -} -.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .screen { - top: 11.065989847715736%; - left: 6.776440785307157%; - width: 86.38378720709309%; - height: 77.76649746192894%; -} -.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .button { - top: 92.18274111675126%; - left: 48.89170360987967%; - width: 2.3432552248258394%; - height: 3.654822335025381%; -} + padding-bottom: 62.38125%; + background-image: url(../../images/assets/mockups/Surface/portrait_black.png); } + .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .screen { + top: 11.06599%; + left: 6.77644%; + width: 86.38379%; + height: 77.7665%; } + .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .button { + top: 92.18274%; + left: 48.8917%; + width: 2.34326%; + height: 3.65482%; } + .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 89.11783644558918%; - background-image: url("../device-mockups/iPhone6Hand/portrait_black.png"); -} -.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .screen { - top: 10.83815028901734%; - left: 10.946555054732775%; - width: 33.67675466838377%; - height: 67.26878612716763%; -} -.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .button { - top: 79.6965317919075%; - left: 24.790727623953636%; - width: 5.988409529942048%; - height: 6.791907514450866%; -} + padding-bottom: 89.11784%; + background-image: url(../../images/assets/mockups/iPhone6Hand/portrait_black.png); } + .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .screen { + top: 10.83815%; + left: 10.94656%; + width: 33.67675%; + height: 67.26879%; } + .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .button { + top: 79.69653%; + left: 24.79073%; + width: 5.98841%; + height: 6.79191%; } + .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 89.11783644558918%; - background-image: url("../device-mockups/iPhone6Hand/portrait_white.png"); -} -.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .screen { - top: 10.83815028901734%; - left: 11.07533805537669%; - width: 33.54797166773986%; - height: 67.26878612716763%; -} -.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .button { - top: 79.6965317919075%; - left: 24.790727623953636%; - width: 5.988409529942048%; - height: 6.791907514450866%; -} + padding-bottom: 89.11784%; + background-image: url(../../images/assets/mockups/iPhone6Hand/portrait_white.png); } + .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .screen { + top: 10.83815%; + left: 11.07534%; + width: 33.54797%; + height: 67.26879%; } + .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .button { + top: 79.69653%; + left: 24.79073%; + width: 5.98841%; + height: 6.79191%; } + .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 158.39243498817967%; - background-image: url("../device-mockups/iPhone7Hand/portrait_black.png"); -} -.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .screen { - top: 7.835820895522389%; - left: 41.25295508274232%; - width: 42.198581560283685%; - height: 47.23880597014926%; -} -.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .button { - top: 56.19402985074626%; - left: 58.392434988179666%; - width: 7.801418439716312%; - height: 4.925373134328359%; -} + padding-bottom: 158.39243%; + background-image: url(../../images/assets/mockups/iPhone7Hand/portrait_black.png); } + .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .screen { + top: 7.83582%; + left: 41.25296%; + width: 42.19858%; + height: 47.23881%; } + .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .button { + top: 56.19403%; + left: 58.39243%; + width: 7.80142%; + height: 4.92537%; } + .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 158.39243498817967%; - background-image: url("../device-mockups/iPhone7Hand_2/portrait_black.png"); -} -.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .screen { - top: 7.835820895522389%; - left: 41.25295508274232%; - width: 42.198581560283685%; - height: 47.23880597014926%; -} -.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .button { - top: 56.19402985074626%; - left: 58.392434988179666%; - width: 7.801418439716312%; - height: 4.925373134328359%; -} + padding-bottom: 158.39243%; + background-image: url(../../images/assets/mockups/iPhone7Hand_2/portrait_black.png); } + .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .screen { + top: 7.83582%; + left: 41.25296%; + width: 42.19858%; + height: 47.23881%; } + .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .button { + top: 56.19403%; + left: 58.39243%; + width: 7.80142%; + height: 4.92537%; } + .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 58.97363993269771%; - background-image: url("../device-mockups/Chromebook/portrait_black.png"); -} -.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .screen { - top: 7.893485496909178%; - left: 12.731351654514864%; - width: 74.14469994391474%; - height: 71.2791250594389%; -} -.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 58.97364%; + background-image: url(../../images/assets/mockups/Chromebook/portrait_black.png); } + .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .screen { + top: 7.89349%; + left: 12.73135%; + width: 74.1447%; + height: 71.27913%; } + .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 209.06250000000003%; - background-image: url("../device-mockups/HtcOneM8/portrait_black.png"); -} -.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .screen { - top: 10.762331838565023%; - left: 5.3125%; - width: 89.0625%; - height: 75.63527653213752%; -} -.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 209.0625%; + background-image: url(../../images/assets/mockups/HtcOneM8/portrait_black.png); } + .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .screen { + top: 10.76233%; + left: 5.3125%; + width: 89.0625%; + height: 75.63528%; } + .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 47.832585949177876%; - background-image: url("../device-mockups/HtcOneM8/landscape_black.png"); -} -.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .screen { - top: 5.625%; - left: 10.762331838565023%; - width: 75.63527653213752%; - height: 89.0625%; -} -.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 47.83259%; + background-image: url(../../images/assets/mockups/HtcOneM8/landscape_black.png); } + .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .screen { + top: 5.625%; + left: 10.76233%; + width: 75.63528%; + height: 89.0625%; } + .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 209.7408400357462%; - background-image: url("../device-mockups/HuaweiP8/portrait_gold.png"); -} -.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .screen { - top: 9.118023008095442%; - left: 1.6979445933869526%; - width: 95.88918677390528%; - height: 81.80656156795911%; -} -.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 209.74084%; + background-image: url(../../images/assets/mockups/HuaweiP8/portrait_gold.png); } + .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .screen { + top: 9.11802%; + left: 1.69794%; + width: 95.88919%; + height: 81.80656%; } + .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 47.677886663826165%; - background-image: url("../device-mockups/HuaweiP8/landscape_gold.png"); -} -.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .screen { - top: 2.4128686327077746%; - left: 9.118023008095442%; - width: 81.80656156795911%; - height: 95.88918677390528%; -} -.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 47.67789%; + background-image: url(../../images/assets/mockups/HuaweiP8/landscape_gold.png); } + .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .screen { + top: 2.41287%; + left: 9.11802%; + width: 81.80656%; + height: 95.88919%; } + .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 68.15796741231705%; - background-image: url("../device-mockups/SurfacePro3/landscape_black.png"); -} -.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .screen { - top: 7.0907617504051865%; - left: 5.827119580226457%; - width: 88.34576083954708%; - height: 86.42625607779578%; -} -.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 68.15797%; + background-image: url(../../images/assets/mockups/SurfacePro3/landscape_black.png); } + .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .screen { + top: 7.09076%; + left: 5.82712%; + width: 88.34576%; + height: 86.42626%; } + .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 86.48036253776435%; - background-image: url("../device-mockups/SurfaceStudio/portrait_black.png"); -} -.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .screen { - top: 3.755458515283843%; - left: 3.2225579053373616%; - width: 93.52970795568983%; - height: 72.40174672489083%; -} -.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .button { - display: none; - top: 0%; - left: 0%; - width: 100%; - height: 100%; -} + padding-bottom: 86.48036%; + background-image: url(../../images/assets/mockups/SurfaceStudio/portrait_black.png); } + .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .screen { + top: 3.75546%; + left: 3.22256%; + width: 93.52971%; + height: 72.40175%; } + .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .button { + display: none; + top: 0%; + left: 0%; + width: 100%; + height: 100%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 203.10344827586212%; - background-image: url("../device-mockups/iPhone7/portrait_black.png"); -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .screen { - top: 11.997736276174306%; - left: 6.206896551724138%; - width: 87.35632183908046%; - height: 76.06112054329371%; -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .button { - top: 89.53027730616864%; - left: 42.298850574712645%; - width: 15.747126436781608%; - height: 7.753254102999434%; -} + padding-bottom: 203.10345%; + background-image: url(../../images/assets/mockups/iPhone7/portrait_black.png); } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .screen { + top: 11.99774%; + left: 6.2069%; + width: 87.35632%; + height: 76.06112%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .button { + top: 89.53028%; + left: 42.29885%; + width: 15.74713%; + height: 7.75325%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 203.10344827586212%; - background-image: url("../device-mockups/iPhone7/portrait_white.png"); -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .screen { - top: 11.997736276174306%; - left: 6.206896551724138%; - width: 87.35632183908046%; - height: 76.06112054329371%; -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .button { - top: 89.53027730616864%; - left: 42.298850574712645%; - width: 15.747126436781608%; - height: 7.753254102999434%; -} + padding-bottom: 203.10345%; + background-image: url(../../images/assets/mockups/iPhone7/portrait_white.png); } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .screen { + top: 11.99774%; + left: 6.2069%; + width: 87.35632%; + height: 76.06112%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .button { + top: 89.53028%; + left: 42.29885%; + width: 15.74713%; + height: 7.75325%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] { - padding-bottom: 203.10344827586212%; - background-image: url("../device-mockups/iPhone7/portrait_gold.png"); -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .screen { - top: 11.997736276174306%; - left: 6.206896551724138%; - width: 87.35632183908046%; - height: 76.06112054329371%; -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .button { - top: 89.53027730616864%; - left: 42.298850574712645%; - width: 15.747126436781608%; - height: 7.753254102999434%; -} + padding-bottom: 203.10345%; + background-image: url(../../images/assets/mockups/iPhone7/portrait_gold.png); } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .screen { + top: 11.99774%; + left: 6.2069%; + width: 87.35632%; + height: 76.06112%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .button { + top: 89.53028%; + left: 42.29885%; + width: 15.74713%; + height: 7.75325%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] { - padding-bottom: 203.10344827586212%; - background-image: url("../device-mockups/iPhone7/portrait_pink.png"); -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .screen { - top: 11.997736276174306%; - left: 6.206896551724138%; - width: 87.35632183908046%; - height: 76.06112054329371%; -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .button { - top: 89.53027730616864%; - left: 42.298850574712645%; - width: 15.747126436781608%; - height: 7.753254102999434%; -} + padding-bottom: 203.10345%; + background-image: url(../../images/assets/mockups/iPhone7/portrait_pink.png); } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .screen { + top: 11.99774%; + left: 6.2069%; + width: 87.35632%; + height: 76.06112%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .button { + top: 89.53028%; + left: 42.29885%; + width: 15.74713%; + height: 7.75325%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] { - padding-bottom: 201.91082802547774%; - background-image: url("../device-mockups/iPhone7/portrait_red.png"); -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .screen { - top: 11.987381703470032%; - left: 6.687898089171974%; - width: 84.71337579617835%; - height: 75.55205047318611%; -} -.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .button { - top: 89.74763406940063%; - left: 42.35668789808918%; - width: 15.605095541401273%; - height: 7.728706624605679%; -} + padding-bottom: 201.91083%; + background-image: url(../../images/assets/mockups/iPhone7/portrait_red.png); } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .screen { + top: 11.98738%; + left: 6.6879%; + width: 84.71338%; + height: 75.55205%; } + .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .button { + top: 89.74763%; + left: 42.35669%; + width: 15.6051%; + height: 7.72871%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] { - padding-bottom: 49.235993208828525%; - background-image: url("../device-mockups/iPhone7/landscape_black.png"); -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .screen { - top: 6.436781609195402%; - left: 11.997736276174306%; - width: 76.06112054329371%; - height: 87.35632183908046%; -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .button { - top: 41.95402298850575%; - left: 89.53027730616864%; - width: 7.753254102999434%; - height: 15.747126436781608%; -} + padding-bottom: 49.23599%; + background-image: url(../../images/assets/mockups/iPhone7/landscape_black.png); } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .screen { + top: 6.43678%; + left: 11.99774%; + width: 76.06112%; + height: 87.35632%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .button { + top: 41.95402%; + left: 89.53028%; + width: 7.75325%; + height: 15.74713%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] { - padding-bottom: 49.235993208828525%; - background-image: url("../device-mockups/iPhone7/landscape_white.png"); -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .screen { - top: 6.436781609195402%; - left: 11.997736276174306%; - width: 76.06112054329371%; - height: 87.35632183908046%; -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .button { - top: 41.95402298850575%; - left: 89.53027730616864%; - width: 7.753254102999434%; - height: 15.747126436781608%; -} + padding-bottom: 49.23599%; + background-image: url(../../images/assets/mockups/iPhone7/landscape_white.png); } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .screen { + top: 6.43678%; + left: 11.99774%; + width: 76.06112%; + height: 87.35632%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .button { + top: 41.95402%; + left: 89.53028%; + width: 7.75325%; + height: 15.74713%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] { - padding-bottom: 49.235993208828525%; - background-image: url("../device-mockups/iPhone7/landscape_gold.png"); -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .screen { - top: 6.436781609195402%; - left: 11.997736276174306%; - width: 76.06112054329371%; - height: 87.35632183908046%; -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .button { - top: 41.95402298850575%; - left: 89.53027730616864%; - width: 7.753254102999434%; - height: 15.747126436781608%; -} + padding-bottom: 49.23599%; + background-image: url(../../images/assets/mockups/iPhone7/landscape_gold.png); } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .screen { + top: 6.43678%; + left: 11.99774%; + width: 76.06112%; + height: 87.35632%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .button { + top: 41.95402%; + left: 89.53028%; + width: 7.75325%; + height: 15.74713%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] { - padding-bottom: 49.235993208828525%; - background-image: url("../device-mockups/iPhone7/landscape_pink.png"); -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .screen { - top: 6.436781609195402%; - left: 11.997736276174306%; - width: 76.06112054329371%; - height: 87.35632183908046%; -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .button { - top: 41.95402298850575%; - left: 89.53027730616864%; - width: 7.753254102999434%; - height: 15.747126436781608%; -} + padding-bottom: 49.23599%; + background-image: url(../../images/assets/mockups/iPhone7/landscape_pink.png); } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .screen { + top: 6.43678%; + left: 11.99774%; + width: 76.06112%; + height: 87.35632%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .button { + top: 41.95402%; + left: 89.53028%; + width: 7.75325%; + height: 15.74713%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] { - padding-bottom: 49.526813880126184%; - background-image: url("../device-mockups/iPhone7/landscape_red.png"); -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .screen { - top: 8.598726114649681%; - left: 11.987381703470032%; - width: 75.55205047318611%; - height: 84.71337579617835%; -} -.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .button { - top: 42.038216560509554%; - left: 89.74763406940063%; - width: 7.728706624605679%; - height: 15.605095541401273%; -} + padding-bottom: 49.52681%; + background-image: url(../../images/assets/mockups/iPhone7/landscape_red.png); } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .screen { + top: 8.59873%; + left: 11.98738%; + width: 75.55205%; + height: 84.71338%; } + .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .button { + top: 42.03822%; + left: 89.74763%; + width: 7.72871%; + height: 15.6051%; } + .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] { - padding-bottom: 202.62008733624458%; - background-image: url("../device-mockups/Pixel/portrait_white.png"); -} -.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .screen { - top: 9.698275862068966%; - left: 4.366812227074235%; - width: 90.39301310043668%; - height: 78.66379310344827%; -} -.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .button { - top: 90.51724137931035%; - left: 44.97816593886463%; - width: 11.353711790393014%; - height: 4.310344827586207%; -} + padding-bottom: 202.62009%; + background-image: url(../../images/assets/mockups/Pixel/portrait_white.png); } + .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .screen { + top: 9.69828%; + left: 4.36681%; + width: 90.39301%; + height: 78.66379%; } + .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .button { + top: 90.51724%; + left: 44.97817%; + width: 11.35371%; + height: 4.31034%; } + .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] { - padding-bottom: 202.62008733624458%; - background-image: url("../device-mockups/Pixel/portrait_black.png"); -} -.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .screen { - top: 9.698275862068966%; - left: 4.366812227074235%; - width: 90.39301310043668%; - height: 78.66379310344827%; -} -.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .button { - top: 90.51724137931035%; - left: 44.97816593886463%; - width: 11.353711790393014%; - height: 4.310344827586207%; -} + padding-bottom: 202.62009%; + background-image: url(../../images/assets/mockups/Pixel/portrait_black.png); } + .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .screen { + top: 9.69828%; + left: 4.36681%; + width: 90.39301%; + height: 78.66379%; } + .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .button { + top: 90.51724%; + left: 44.97817%; + width: 11.35371%; + height: 4.31034%; } diff --git a/dist/device-mockups.min.css b/dist/device-mockups.min.css index 5e4c86c..a687b51 100644 --- a/dist/device-mockups.min.css +++ b/dist/device-mockups.min.css @@ -1 +1 @@ -.device-wrapper{max-width:300px;width:100%}.device{position:relative;background-size:cover}.device .screen{position:absolute;background-size:cover}.device .button{position:absolute;cursor:pointer}.device[data-device=galaxyS3][data-orientation=landscape][data-color=black]{padding-bottom:51.41800246609125%;background-image:url(../device-mockups/galaxyS3/landscape_black.png)}.device[data-device=galaxyS3][data-orientation=landscape][data-color=black] .screen{top:7.074340527577938%;left:9.3711467324291%;width:78.91491985203453%;height:86.33093525179856%}.device[data-device=galaxyS3][data-orientation=landscape][data-color=black] .button{top:38.84892086330935%;left:93.34155363748458%;width:3.390875462392109%;height:22.54196642685851%}.device[data-device=galaxyS3][data-orientation=landscape][data-color=white]{padding-bottom:51.41800246609125%;background-image:url(../device-mockups/galaxyS3/landscape_white.png)}.device[data-device=galaxyS3][data-orientation=landscape][data-color=white] .screen{top:7.074340527577938%;left:9.3711467324291%;width:78.91491985203453%;height:86.33093525179856%}.device[data-device=galaxyS3][data-orientation=landscape][data-color=white] .button{top:38.84892086330935%;left:93.34155363748458%;width:3.390875462392109%;height:22.54196642685851%}.device[data-device=galaxyS3][data-orientation=portrait][data-color=black]{padding-bottom:194.7178871548619%;background-image:url(../device-mockups/galaxyS3/portrait_black.png)}.device[data-device=galaxyS3][data-orientation=portrait][data-color=black] .screen{top:9.67940813810111%;left:6.602641056422569%;width:86.31452581032413%;height:78.91491985203453%}.device[data-device=galaxyS3][data-orientation=portrait][data-color=black] .button{top:93.15659679408138%;left:38.655462184873954%;width:22.56902761104442%;height:3.2675709001233044%}.device[data-device=galaxyS3][data-orientation=portrait][data-color=white]{padding-bottom:194.7178871548619%;background-image:url(../device-mockups/galaxyS3/portrait_white.png)}.device[data-device=galaxyS3][data-orientation=portrait][data-color=white] .screen{top:9.3711467324291%;left:6.602641056422569%;width:86.31452581032413%;height:78.91491985203453%}.device[data-device=galaxyS3][data-orientation=portrait][data-color=white] .button{top:93.15659679408138%;left:38.655462184873954%;width:22.56902761104442%;height:3.2675709001233044%}.device[data-device=galaxyS5][data-orientation=portrait][data-color=black]{padding-bottom:193.9837398373984%;background-image:url(../device-mockups/galaxyS5/portrait_black.png)}.device[data-device=galaxyS5][data-orientation=portrait][data-color=black] .screen{top:9.80720871751886%;left:6.097560975609756%;width:87.8048780487805%;height:80.4694048616932%}.device[data-device=galaxyS5][data-orientation=portrait][data-color=black] .button{top:92.62363788767813%;left:38.943089430894304%;width:22.520325203252032%;height:3.730092204526404%}.device[data-device=galaxyS5][data-orientation=portrait][data-color=white]{padding-bottom:193.9837398373984%;background-image:url(../device-mockups/galaxyS5/portrait_white.png)}.device[data-device=galaxyS5][data-orientation=portrait][data-color=white] .screen{top:9.80720871751886%;left:6.097560975609756%;width:87.8048780487805%;height:80.4694048616932%}.device[data-device=galaxyS5][data-orientation=portrait][data-color=white] .button{top:92.62363788767813%;left:38.943089430894304%;width:22.520325203252032%;height:3.730092204526404%}.device[data-device=galaxyS5][data-orientation=portrait][data-color=gold]{padding-bottom:193.9837398373984%;background-image:url(../device-mockups/galaxyS5/portrait_gold.png)}.device[data-device=galaxyS5][data-orientation=portrait][data-color=gold] .screen{top:9.80720871751886%;left:6.097560975609756%;width:87.8048780487805%;height:80.4694048616932%}.device[data-device=galaxyS5][data-orientation=portrait][data-color=gold] .button{top:92.62363788767813%;left:38.943089430894304%;width:22.520325203252032%;height:3.730092204526404%}.device[data-device=galaxyS5][data-orientation=landscape][data-color=black]{padding-bottom:51.55071248952222%;background-image:url(../device-mockups/galaxyS5/landscape_black.png)}.device[data-device=galaxyS5][data-orientation=landscape][data-color=black] .screen{top:6.097560975609756%;left:9.80720871751886%;width:80.4694048616932%;height:87.8048780487805%}.device[data-device=galaxyS5][data-orientation=landscape][data-color=black] .button{top:38.53658536585366%;left:92.62363788767813%;width:3.730092204526404%;height:22.520325203252032%}.device[data-device=galaxyS5][data-orientation=landscape][data-color=white]{padding-bottom:51.55071248952222%;background-image:url(../device-mockups/galaxyS5/landscape_white.png)}.device[data-device=galaxyS5][data-orientation=landscape][data-color=white] .screen{top:6.097560975609756%;left:9.80720871751886%;width:80.4694048616932%;height:87.8048780487805%}.device[data-device=galaxyS5][data-orientation=landscape][data-color=white] .button{top:38.53658536585366%;left:92.62363788767813%;width:3.730092204526404%;height:22.520325203252032%}.device[data-device=galaxyS5][data-orientation=landscape][data-color=gold]{padding-bottom:51.55071248952222%;background-image:url(../device-mockups/galaxyS5/landscape_gold.png)}.device[data-device=galaxyS5][data-orientation=landscape][data-color=gold] .screen{top:6.097560975609756%;left:9.80720871751886%;width:80.4694048616932%;height:87.8048780487805%}.device[data-device=galaxyS5][data-orientation=landscape][data-color=gold] .button{top:38.53658536585366%;left:92.62363788767813%;width:3.730092204526404%;height:22.520325203252032%}.device[data-device=galaxyTab4][data-orientation=portrait][data-color=black]{padding-bottom:168.33616298811543%;background-image:url(../device-mockups/galaxyTab4/portrait_black.png)}.device[data-device=galaxyTab4][data-orientation=portrait][data-color=black] .screen{top:8.572869389813414%;left:5.68760611205433%;width:87.94567062818336%;height:83.00554715078164%}.device[data-device=galaxyTab4][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=galaxyTab4][data-orientation=portrait][data-color=white]{padding-bottom:168.33616298811543%;background-image:url(../device-mockups/galaxyTab4/portrait_white.png)}.device[data-device=galaxyTab4][data-orientation=portrait][data-color=white] .screen{top:8.522440746343923%;left:5.68760611205433%;width:87.94567062818336%;height:83.05597579425114%}.device[data-device=galaxyTab4][data-orientation=portrait][data-color=white] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=iMac][data-orientation=portrait][data-color=black]{padding-bottom:80.46663049376018%;background-image:url(../device-mockups/iMac/portrait_black.png)}.device[data-device=iMac][data-orientation=portrait][data-color=black] .screen{top:5.057316250842886%;left:4.0694519804666305%;width:91.86109603906674%;height:64.19420094403236%}.device[data-device=iMac][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=iPad][data-orientation=portrait][data-color=black]{padding-bottom:129.56989247311827%;background-image:url(../device-mockups/iPad/portrait_black.png)}.device[data-device=iPad][data-orientation=portrait][data-color=black] .screen{top:9.12863070539419%;left:10.304659498207885%;width:79.21146953405018%;height:81.3969571230982%}.device[data-device=iPad][data-orientation=portrait][data-color=black] .button{top:93.15352697095436%;left:47.132616487455195%;width:6.003584229390681%;height:4.495159059474412%}.device[data-device=iPad][data-orientation=portrait][data-color=white]{padding-bottom:129.56989247311827%;background-image:url(../device-mockups/iPad/portrait_white.png)}.device[data-device=iPad][data-orientation=portrait][data-color=white] .screen{top:9.12863070539419%;left:10.483870967741936%;width:79.3010752688172%;height:81.3969571230982%}.device[data-device=iPad][data-orientation=portrait][data-color=white] .button{top:93.15352697095436%;left:47.132616487455195%;width:6.003584229390681%;height:4.495159059474412%}.device[data-device=iPad][data-orientation=landscape][data-color=black]{padding-bottom:77.04011065006915%;background-image:url(../device-mockups/iPad/landscape_black.png)}.device[data-device=iPad][data-orientation=landscape][data-color=black] .screen{top:10.23339317773788%;left:9.266943291839558%;width:81.32780082987551%;height:79.44344703770197%}.device[data-device=iPad][data-orientation=landscape][data-color=black] .button{top:46.768402154398565%;left:93.22268326417704%;width:4.426002766251729%;height:6.014362657091562%}.device[data-device=iPad][data-orientation=landscape][data-color=white]{padding-bottom:77.04011065006915%;background-image:url(../device-mockups/iPad/landscape_white.png)}.device[data-device=iPad][data-orientation=landscape][data-color=white] .screen{top:10.23339317773788%;left:9.266943291839558%;width:81.32780082987551%;height:79.44344703770197%}.device[data-device=iPad][data-orientation=landscape][data-color=white] .button{top:46.768402154398565%;left:93.22268326417704%;width:4.426002766251729%;height:6.014362657091562%}.device[data-device=iPadAir2][data-orientation=portrait][data-color=black]{padding-bottom:141.3929784824462%;background-image:url(../device-mockups/iPadAir2/portrait_black.png)}.device[data-device=iPadAir2][data-orientation=portrait][data-color=black] .screen{top:9.090909090909092%;left:6.455266138165346%;width:86.9762174405436%;height:82.01842210652784%}.device[data-device=iPadAir2][data-orientation=portrait][data-color=black] .button{top:93.55226271525831%;left:46.82899207248018%;width:6.285390713476784%;height:4.445334401281538%}.device[data-device=iPadAir2][data-orientation=portrait][data-color=white]{padding-bottom:141.3929784824462%;background-image:url(../device-mockups/iPadAir2/portrait_white.png)}.device[data-device=iPadAir2][data-orientation=portrait][data-color=white] .screen{top:9.090909090909092%;left:6.455266138165346%;width:86.9762174405436%;height:82.01842210652784%}.device[data-device=iPadAir2][data-orientation=portrait][data-color=white] .button{top:93.55226271525831%;left:46.82899207248018%;width:6.285390713476784%;height:4.445334401281538%}.device[data-device=iPadAir2][data-orientation=portrait][data-color=gold]{padding-bottom:141.3929784824462%;background-image:url(../device-mockups/iPadAir2/portrait_gold.png)}.device[data-device=iPadAir2][data-orientation=portrait][data-color=gold] .screen{top:9.090909090909092%;left:6.455266138165346%;width:86.9762174405436%;height:82.01842210652784%}.device[data-device=iPadAir2][data-orientation=portrait][data-color=gold] .button{top:93.55226271525831%;left:46.82899207248018%;width:6.285390713476784%;height:4.445334401281538%}.device[data-device=iPadAir2][data-orientation=landscape][data-color=black]{padding-bottom:70.72486984381257%;background-image:url(../device-mockups/iPadAir2/landscape_black.png)}.device[data-device=iPadAir2][data-orientation=landscape][data-color=black] .screen{top:6.5685164212910525%;left:9.090909090909092%;width:82.01842210652784%;height:86.9762174405436%}.device[data-device=iPadAir2][data-orientation=landscape][data-color=black] .button{top:46.88561721404304%;left:93.55226271525831%;width:4.445334401281538%;height:6.285390713476784%}.device[data-device=iPadAir2][data-orientation=landscape][data-color=white]{padding-bottom:70.72486984381257%;background-image:url(../device-mockups/iPadAir2/landscape_white.png)}.device[data-device=iPadAir2][data-orientation=landscape][data-color=white] .screen{top:6.5685164212910525%;left:9.090909090909092%;width:82.01842210652784%;height:86.9762174405436%}.device[data-device=iPadAir2][data-orientation=landscape][data-color=white] .button{top:46.88561721404304%;left:93.55226271525831%;width:4.445334401281538%;height:6.285390713476784%}.device[data-device=iPadAir2][data-orientation=landscape][data-color=gold]{padding-bottom:70.72486984381257%;background-image:url(../device-mockups/iPadAir2/landscape_gold.png)}.device[data-device=iPadAir2][data-orientation=landscape][data-color=gold] .screen{top:6.5685164212910525%;left:9.090909090909092%;width:82.01842210652784%;height:86.9762174405436%}.device[data-device=iPadAir2][data-orientation=landscape][data-color=gold] .button{top:46.88561721404304%;left:93.55226271525831%;width:4.445334401281538%;height:6.285390713476784%}.device[data-device=iPadPro][data-orientation=portrait][data-color=black]{padding-bottom:138.62249346120313%;background-image:url(../device-mockups/iPadPro/portrait_black.png)}.device[data-device=iPadPro][data-orientation=portrait][data-color=black] .screen{top:7.044025157232705%;left:5.361813426329555%;width:89.23278116826503%;height:85.9119496855346%}.device[data-device=iPadPro][data-orientation=portrait][data-color=black] .button{top:94.937106918239%;left:47.60244115082825%;width:4.838709677419355%;height:3.5220125786163523%}.device[data-device=iPadPro][data-orientation=portrait][data-color=white]{padding-bottom:138.62249346120313%;background-image:url(../device-mockups/iPadPro/portrait_white.png)}.device[data-device=iPadPro][data-orientation=portrait][data-color=white] .screen{top:7.044025157232705%;left:5.361813426329555%;width:89.23278116826503%;height:85.9119496855346%}.device[data-device=iPadPro][data-orientation=portrait][data-color=white] .button{top:94.937106918239%;left:47.60244115082825%;width:4.838709677419355%;height:3.5220125786163523%}.device[data-device=iPadPro][data-orientation=portrait][data-color=gold]{padding-bottom:138.62249346120313%;background-image:url(../device-mockups/iPadPro/portrait_gold.png)}.device[data-device=iPadPro][data-orientation=portrait][data-color=gold] .screen{top:7.0754716981132075%;left:5.361813426329555%;width:89.23278116826503%;height:85.88050314465409%}.device[data-device=iPadPro][data-orientation=portrait][data-color=gold] .button{top:94.937106918239%;left:47.60244115082825%;width:4.838709677419355%;height:3.5220125786163523%}.device[data-device=iPadPro][data-orientation=landscape][data-color=black]{padding-bottom:72.13836477987421%;background-image:url(../device-mockups/iPadPro/landscape_black.png)}.device[data-device=iPadPro][data-orientation=landscape][data-color=black] .screen{top:5.405405405405405%;left:7.044025157232705%;width:85.9119496855346%;height:89.23278116826503%}.device[data-device=iPadPro][data-orientation=landscape][data-color=black] .button{top:47.5588491717524%;left:94.937106918239%;width:3.5220125786163523%;height:4.838709677419355%}.device[data-device=iPadPro][data-orientation=landscape][data-color=white]{padding-bottom:72.13836477987421%;background-image:url(../device-mockups/iPadPro/landscape_white.png)}.device[data-device=iPadPro][data-orientation=landscape][data-color=white] .screen{top:5.405405405405405%;left:7.044025157232705%;width:85.9119496855346%;height:89.23278116826503%}.device[data-device=iPadPro][data-orientation=landscape][data-color=white] .button{top:47.5588491717524%;left:94.937106918239%;width:3.5220125786163523%;height:4.838709677419355%}.device[data-device=iPadPro][data-orientation=landscape][data-color=gold]{padding-bottom:72.1471235460547%;background-image:url(../device-mockups/iPadPro/landscape_gold.png)}.device[data-device=iPadPro][data-orientation=landscape][data-color=gold] .screen{top:5.403050108932462%;left:7.073247406475951%;width:85.88494184218798%;height:89.23747276688452%}.device[data-device=iPadPro][data-orientation=landscape][data-color=gold] .button{top:47.53812636165578%;left:94.90726186733731%;width:3.5523420308079223%;height:4.880174291938998%}.device[data-device=iPhone6][data-orientation=portrait][data-color=black]{padding-bottom:207.620164126612%;background-image:url(../device-mockups/iPhone6/portrait_black.png)}.device[data-device=iPhone6][data-orientation=portrait][data-color=black] .screen{top:12.25296442687747%;left:6.096131301289566%;width:88.042203985932%;height:75.32467532467533%}.device[data-device=iPhone6][data-orientation=portrait][data-color=black] .button{top:89.32806324110672%;left:41.85228604923799%;width:16.64712778429074%;height:8.018068887634106%}.device[data-device=iPhone6][data-orientation=portrait][data-color=white]{padding-bottom:207.620164126612%;background-image:url(../device-mockups/iPhone6/portrait_white.png)}.device[data-device=iPhone6][data-orientation=portrait][data-color=white] .screen{top:12.25296442687747%;left:6.096131301289566%;width:88.042203985932%;height:75.32467532467533%}.device[data-device=iPhone6][data-orientation=portrait][data-color=white] .button{top:89.32806324110672%;left:41.85228604923799%;width:16.64712778429074%;height:8.018068887634106%}.device[data-device=iPhone6][data-orientation=portrait][data-color=gold]{padding-bottom:207.620164126612%;background-image:url(../device-mockups/iPhone6/portrait_gold.png)}.device[data-device=iPhone6][data-orientation=portrait][data-color=gold] .screen{top:12.25296442687747%;left:6.096131301289566%;width:88.042203985932%;height:75.32467532467533%}.device[data-device=iPhone6][data-orientation=portrait][data-color=gold] .button{top:89.32806324110672%;left:41.85228604923799%;width:16.64712778429074%;height:8.018068887634106%}.device[data-device=iPhone6][data-orientation=landscape][data-color=black]{padding-bottom:48.164878599661215%;background-image:url(../device-mockups/iPhone6/landscape_black.png)}.device[data-device=iPhone6][data-orientation=landscape][data-color=black] .screen{top:5.861664712778429%;left:12.309429700734048%;width:75.26821005081875%;height:87.92497069167644%}.device[data-device=iPhone6][data-orientation=landscape][data-color=black] .button{top:41.50058616647128%;left:89.32806324110672%;width:8.018068887634106%;height:16.64712778429074%}.device[data-device=iPhone6][data-orientation=landscape][data-color=white]{padding-bottom:48.164878599661215%;background-image:url(../device-mockups/iPhone6/landscape_white.png)}.device[data-device=iPhone6][data-orientation=landscape][data-color=white] .screen{top:5.861664712778429%;left:12.309429700734048%;width:75.26821005081875%;height:87.92497069167644%}.device[data-device=iPhone6][data-orientation=landscape][data-color=white] .button{top:41.50058616647128%;left:89.32806324110672%;width:8.018068887634106%;height:16.64712778429074%}.device[data-device=iPhone6][data-orientation=landscape][data-color=gold]{padding-bottom:48.164878599661215%;background-image:url(../device-mockups/iPhone6/landscape_gold.png)}.device[data-device=iPhone6][data-orientation=landscape][data-color=gold] .screen{top:5.861664712778429%;left:12.309429700734048%;width:75.26821005081875%;height:87.92497069167644%}.device[data-device=iPhone6][data-orientation=landscape][data-color=gold] .button{top:41.50058616647128%;left:89.32806324110672%;width:8.018068887634106%;height:16.64712778429074%}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=black]{padding-bottom:201.45161290322577%;background-image:url(../device-mockups/iPhone6Plus/portrait_black.png)}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=black] .screen{top:11.489191353082466%;left:6.532258064516129%;width:87.09677419354838%;height:76.86148919135309%}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=black] .button{top:90.43234587670136%;left:43.306451612903224%;width:13.38709677419355%;height:6.645316253002402%}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=white]{padding-bottom:201.45161290322577%;background-image:url(../device-mockups/iPhone6Plus/portrait_white.png)}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=white] .screen{top:11.489191353082466%;left:6.532258064516129%;width:87.09677419354838%;height:76.86148919135309%}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=white] .button{top:90.43234587670136%;left:43.306451612903224%;width:13.38709677419355%;height:6.645316253002402%}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=gold]{padding-bottom:201.45161290322577%;background-image:url(../device-mockups/iPhone6Plus/portrait_gold.png)}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=gold] .screen{top:11.489191353082466%;left:6.532258064516129%;width:87.09677419354838%;height:76.86148919135309%}.device[data-device=iPhone6Plus][data-orientation=portrait][data-color=gold] .button{top:90.43234587670136%;left:43.306451612903224%;width:13.38709677419355%;height:6.645316253002402%}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=black]{padding-bottom:49.639711769415534%;background-image:url(../device-mockups/iPhone6Plus/landscape_black.png)}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=black] .screen{top:6.370967741935483%;left:11.489191353082466%;width:76.86148919135309%;height:87.09677419354838%}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=black] .button{top:43.306451612903224%;left:90.43234587670136%;width:6.645316253002402%;height:13.38709677419355%}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=white]{padding-bottom:49.639711769415534%;background-image:url(../device-mockups/iPhone6Plus/landscape_white.png)}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=white] .screen{top:6.370967741935483%;left:11.489191353082466%;width:76.86148919135309%;height:87.09677419354838%}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=white] .button{top:43.306451612903224%;left:90.43234587670136%;width:6.645316253002402%;height:13.38709677419355%}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=gold]{padding-bottom:49.639711769415534%;background-image:url(../device-mockups/iPhone6Plus/landscape_gold.png)}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=gold] .screen{top:6.370967741935483%;left:11.489191353082466%;width:76.86148919135309%;height:87.09677419354838%}.device[data-device=iPhone6Plus][data-orientation=landscape][data-color=gold] .button{top:43.306451612903224%;left:90.43234587670136%;width:6.645316253002402%;height:13.38709677419355%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=black]{padding-bottom:209.829619921363%;background-image:url(../device-mockups/iPhoneSE/portrait_black.png)}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=black] .screen{top:14.803247970018738%;left:8.51900393184797%;width:83.8794233289646%;height:70.95565271705185%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=black] .button{top:88.50718301061836%;left:41.67758846657929%;width:17.693315858453474%;height:8.432229856339788%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=white]{padding-bottom:209.829619921363%;background-image:url(../device-mockups/iPhoneSE/portrait_white.png)}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=white] .screen{top:14.803247970018738%;left:8.51900393184797%;width:83.8794233289646%;height:70.95565271705185%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=white] .button{top:88.50718301061836%;left:41.67758846657929%;width:17.693315858453474%;height:8.432229856339788%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=gold]{padding-bottom:209.829619921363%;background-image:url(../device-mockups/iPhoneSE/portrait_gold.png)}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=gold] .screen{top:14.803247970018738%;left:8.51900393184797%;width:83.8794233289646%;height:70.95565271705185%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=gold] .button{top:88.50718301061836%;left:41.67758846657929%;width:17.693315858453474%;height:8.432229856339788%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=pink]{padding-bottom:209.829619921363%;background-image:url(../device-mockups/iPhoneSE/portrait_pink.png)}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=pink] .screen{top:14.803247970018738%;left:8.51900393184797%;width:83.8794233289646%;height:70.95565271705185%}.device[data-device=iPhoneSE][data-orientation=portrait][data-color=pink] .button{top:88.50718301061836%;left:41.67758846657929%;width:17.693315858453474%;height:8.432229856339788%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=black]{padding-bottom:47.65771392879451%;background-image:url(../device-mockups/iPhoneSE/landscape_black.png)}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=black] .screen{top:7.601572739187418%;left:14.803247970018738%;width:70.95565271705185%;height:83.8794233289646%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=black] .button{top:40.62909567496724%;left:88.50718301061836%;width:8.432229856339788%;height:17.693315858453474%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=white]{padding-bottom:47.65771392879451%;background-image:url(../device-mockups/iPhoneSE/landscape_white.png)}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=white] .screen{top:7.601572739187418%;left:14.803247970018738%;width:70.95565271705185%;height:83.8794233289646%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=white] .button{top:40.62909567496724%;left:88.50718301061836%;width:8.432229856339788%;height:17.693315858453474%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=gold]{padding-bottom:47.65771392879451%;background-image:url(../device-mockups/iPhoneSE/landscape_gold.png)}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=gold] .screen{top:7.601572739187418%;left:14.803247970018738%;width:70.95565271705185%;height:83.8794233289646%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=gold] .button{top:40.62909567496724%;left:88.50718301061836%;width:8.432229856339788%;height:17.693315858453474%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=pink]{padding-bottom:47.65771392879451%;background-image:url(../device-mockups/iPhoneSE/landscape_pink.png)}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=pink] .screen{top:7.601572739187418%;left:14.803247970018738%;width:70.95565271705185%;height:83.8794233289646%}.device[data-device=iPhoneSE][data-orientation=landscape][data-color=pink] .button{top:40.62909567496724%;left:88.50718301061836%;width:8.432229856339788%;height:17.693315858453474%}.device[data-device=iPhone5][data-orientation=portrait][data-color=black]{padding-bottom:209.46123521681997%;background-image:url(../device-mockups/iPhone5/portrait_black.png)}.device[data-device=iPhone5][data-orientation=portrait][data-color=black] .screen{top:14.805520702634881%;left:8.278580814717477%;width:84.23127463863338%;height:71.267252195734%}.device[data-device=iPhone5][data-orientation=portrait][data-color=black] .button{top:88.51944792973651%;left:41.52431011826544%;width:18.00262812089356%;height:8.594730238393977%}.device[data-device=iPhone5][data-orientation=portrait][data-color=white]{padding-bottom:209.46123521681997%;background-image:url(../device-mockups/iPhone5/portrait_white.png)}.device[data-device=iPhone5][data-orientation=portrait][data-color=white] .screen{top:14.805520702634881%;left:8.278580814717477%;width:84.23127463863338%;height:71.267252195734%}.device[data-device=iPhone5][data-orientation=portrait][data-color=white] .button{top:88.51944792973651%;left:41.52431011826544%;width:18.00262812089356%;height:8.594730238393977%}.device[data-device=iPhone5][data-orientation=landscape][data-color=black]{padding-bottom:47.74153074027603%;background-image:url(../device-mockups/iPhone5/landscape_black.png)}.device[data-device=iPhone5][data-orientation=landscape][data-color=black] .screen{top:7.490144546649145%;left:14.805520702634881%;width:71.267252195734%;height:84.23127463863338%}.device[data-device=iPhone5][data-orientation=landscape][data-color=black] .button{top:40.473061760841%;left:88.51944792973651%;width:8.594730238393977%;height:18.00262812089356%}.device[data-device=iPhone5][data-orientation=landscape][data-color=white]{padding-bottom:47.74153074027603%;background-image:url(../device-mockups/iPhone5/landscape_white.png)}.device[data-device=iPhone5][data-orientation=landscape][data-color=white] .screen{top:7.490144546649145%;left:14.805520702634881%;width:71.267252195734%;height:84.23127463863338%}.device[data-device=iPhone5][data-orientation=landscape][data-color=white] .button{top:40.473061760841%;left:88.51944792973651%;width:8.594730238393977%;height:18.00262812089356%}.device[data-device=Lumia930][data-orientation=portrait][data-color=black]{padding-bottom:192.31287929871883%;background-image:url(../device-mockups/Lumia930/portrait_black.png)}.device[data-device=Lumia930][data-orientation=portrait][data-color=black] .screen{top:7.1178120617110805%;left:5.529332434254889%;width:87.86244099797707%;height:81.13604488078542%}.device[data-device=Lumia930][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Lumia930][data-orientation=portrait][data-color=white]{padding-bottom:192.31287929871883%;background-image:url(../device-mockups/Lumia930/portrait_white.png)}.device[data-device=Lumia930][data-orientation=portrait][data-color=white] .screen{top:7.1178120617110805%;left:5.529332434254889%;width:87.86244099797707%;height:81.13604488078542%}.device[data-device=Lumia930][data-orientation=portrait][data-color=white] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Lumia930][data-orientation=landscape][data-color=black]{padding-bottom:51.998597475455824%;background-image:url(../device-mockups/Lumia930/landscape_black.png)}.device[data-device=Lumia930][data-orientation=landscape][data-color=black] .screen{top:6.608226567768037%;left:7.1178120617110805%;width:81.13604488078542%;height:87.86244099797707%}.device[data-device=Lumia930][data-orientation=landscape][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Lumia930][data-orientation=landscape][data-color=white]{padding-bottom:51.998597475455824%;background-image:url(../device-mockups/Lumia930/landscape_white.png)}.device[data-device=Lumia930][data-orientation=landscape][data-color=white] .screen{top:6.608226567768037%;left:7.1178120617110805%;width:81.13604488078542%;height:87.86244099797707%}.device[data-device=Lumia930][data-orientation=landscape][data-color=white] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Macbook][data-orientation=portrait][data-color=black]{padding-bottom:57.51565762004176%;background-image:url(../device-mockups/Macbook/portrait_black.png)}.device[data-device=Macbook][data-orientation=portrait][data-color=black] .screen{top:7.259528130671507%;left:12.369519832985386%;width:75.26096033402922%;height:81.85117967332124%}.device[data-device=Macbook][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Macbook][data-orientation=portrait][data-color=white]{padding-bottom:57.51565762004176%;background-image:url(../device-mockups/Macbook/portrait_white.png)}.device[data-device=Macbook][data-orientation=portrait][data-color=white] .screen{top:7.259528130671507%;left:12.369519832985386%;width:75.26096033402922%;height:81.85117967332124%}.device[data-device=Macbook][data-orientation=portrait][data-color=white] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Macbook][data-orientation=portrait][data-color=gold]{padding-bottom:57.51565762004176%;background-image:url(../device-mockups/Macbook/portrait_gold.png)}.device[data-device=Macbook][data-orientation=portrait][data-color=gold] .screen{top:7.259528130671507%;left:12.369519832985386%;width:75.26096033402922%;height:81.85117967332124%}.device[data-device=Macbook][data-orientation=portrait][data-color=gold] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Macbook2015][data-orientation=portrait][data-color=black]{padding-bottom:57.51565762004176%;background-image:url(../device-mockups/Macbook2015/portrait_black.png)}.device[data-device=Macbook2015][data-orientation=portrait][data-color=black] .screen{top:7.350272232304899%;left:12.421711899791232%;width:75.15657620041753%;height:81.76043557168784%}.device[data-device=Macbook2015][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Macbook2015][data-orientation=portrait][data-color=white]{padding-bottom:57.51565762004176%;background-image:url(../device-mockups/Macbook2015/portrait_white.png)}.device[data-device=Macbook2015][data-orientation=portrait][data-color=white] .screen{top:7.350272232304899%;left:12.421711899791232%;width:75.15657620041753%;height:81.76043557168784%}.device[data-device=Macbook2015][data-orientation=portrait][data-color=white] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Macbook2015][data-orientation=portrait][data-color=gold]{padding-bottom:57.51565762004176%;background-image:url(../device-mockups/Macbook2015/portrait_gold.png)}.device[data-device=Macbook2015][data-orientation=portrait][data-color=gold] .screen{top:7.350272232304899%;left:12.421711899791232%;width:75.15657620041753%;height:81.76043557168784%}.device[data-device=Macbook2015][data-orientation=portrait][data-color=gold] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=MacbookPro][data-orientation=portrait][data-color=black]{padding-bottom:57.94701986754966%;background-image:url(../device-mockups/MacbookPro/portrait_black.png)}.device[data-device=MacbookPro][data-orientation=portrait][data-color=black] .screen{top:6.714285714285714%;left:11.83774834437086%;width:76.40728476821192%;height:82.42857142857143%}.device[data-device=MacbookPro][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=SamsungTV][data-orientation=portrait][data-color=black]{padding-bottom:64.6780303030303%;background-image:url(../device-mockups/SamsungTV/portrait_black.png)}.device[data-device=SamsungTV][data-orientation=portrait][data-color=black] .screen{top:2.1961932650073206%;left:1.3257575757575757%;width:97.25378787878788%;height:85.21229868228404%}.device[data-device=SamsungTV][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=Surface][data-orientation=portrait][data-color=black]{padding-bottom:62.38125395820139%;background-image:url(../device-mockups/Surface/portrait_black.png)}.device[data-device=Surface][data-orientation=portrait][data-color=black] .screen{top:11.065989847715736%;left:6.776440785307157%;width:86.38378720709309%;height:77.76649746192894%}.device[data-device=Surface][data-orientation=portrait][data-color=black] .button{top:92.18274111675126%;left:48.89170360987967%;width:2.3432552248258394%;height:3.654822335025381%}.device[data-device=iPhone6Hand][data-orientation=portrait][data-color=black]{padding-bottom:89.11783644558918%;background-image:url(../device-mockups/iPhone6Hand/portrait_black.png)}.device[data-device=iPhone6Hand][data-orientation=portrait][data-color=black] .screen{top:10.83815028901734%;left:10.946555054732775%;width:33.67675466838377%;height:67.26878612716763%}.device[data-device=iPhone6Hand][data-orientation=portrait][data-color=black] .button{top:79.6965317919075%;left:24.790727623953636%;width:5.988409529942048%;height:6.791907514450866%}.device[data-device=iPhone6Hand][data-orientation=portrait][data-color=white]{padding-bottom:89.11783644558918%;background-image:url(../device-mockups/iPhone6Hand/portrait_white.png)}.device[data-device=iPhone6Hand][data-orientation=portrait][data-color=white] .screen{top:10.83815028901734%;left:11.07533805537669%;width:33.54797166773986%;height:67.26878612716763%}.device[data-device=iPhone6Hand][data-orientation=portrait][data-color=white] .button{top:79.6965317919075%;left:24.790727623953636%;width:5.988409529942048%;height:6.791907514450866%}.device[data-device=iPhone7Hand][data-orientation=portrait][data-color=black]{padding-bottom:158.39243498817967%;background-image:url(../device-mockups/iPhone7Hand/portrait_black.png)}.device[data-device=iPhone7Hand][data-orientation=portrait][data-color=black] .screen{top:7.835820895522389%;left:41.25295508274232%;width:42.198581560283685%;height:47.23880597014926%}.device[data-device=iPhone7Hand][data-orientation=portrait][data-color=black] .button{top:56.19402985074626%;left:58.392434988179666%;width:7.801418439716312%;height:4.925373134328359%}.device[data-device=iPhone7Hand_2][data-orientation=portrait][data-color=black]{padding-bottom:158.39243498817967%;background-image:url(../device-mockups/iPhone7Hand_2/portrait_black.png)}.device[data-device=iPhone7Hand_2][data-orientation=portrait][data-color=black] .screen{top:7.835820895522389%;left:41.25295508274232%;width:42.198581560283685%;height:47.23880597014926%}.device[data-device=iPhone7Hand_2][data-orientation=portrait][data-color=black] .button{top:56.19402985074626%;left:58.392434988179666%;width:7.801418439716312%;height:4.925373134328359%}.device[data-device=Chromebook][data-orientation=portrait][data-color=black]{padding-bottom:58.97363993269771%;background-image:url(../device-mockups/Chromebook/portrait_black.png)}.device[data-device=Chromebook][data-orientation=portrait][data-color=black] .screen{top:7.893485496909178%;left:12.731351654514864%;width:74.14469994391474%;height:71.2791250594389%}.device[data-device=Chromebook][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=HtcOneM8][data-orientation=portrait][data-color=black]{padding-bottom:209.06250000000003%;background-image:url(../device-mockups/HtcOneM8/portrait_black.png)}.device[data-device=HtcOneM8][data-orientation=portrait][data-color=black] .screen{top:10.762331838565023%;left:5.3125%;width:89.0625%;height:75.63527653213752%}.device[data-device=HtcOneM8][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=HtcOneM8][data-orientation=landscape][data-color=black]{padding-bottom:47.832585949177876%;background-image:url(../device-mockups/HtcOneM8/landscape_black.png)}.device[data-device=HtcOneM8][data-orientation=landscape][data-color=black] .screen{top:5.625%;left:10.762331838565023%;width:75.63527653213752%;height:89.0625%}.device[data-device=HtcOneM8][data-orientation=landscape][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=HuaweiP8][data-orientation=portrait][data-color=gold]{padding-bottom:209.7408400357462%;background-image:url(../device-mockups/HuaweiP8/portrait_gold.png)}.device[data-device=HuaweiP8][data-orientation=portrait][data-color=gold] .screen{top:9.118023008095442%;left:1.6979445933869526%;width:95.88918677390528%;height:81.80656156795911%}.device[data-device=HuaweiP8][data-orientation=portrait][data-color=gold] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=HuaweiP8][data-orientation=landscape][data-color=gold]{padding-bottom:47.677886663826165%;background-image:url(../device-mockups/HuaweiP8/landscape_gold.png)}.device[data-device=HuaweiP8][data-orientation=landscape][data-color=gold] .screen{top:2.4128686327077746%;left:9.118023008095442%;width:81.80656156795911%;height:95.88918677390528%}.device[data-device=HuaweiP8][data-orientation=landscape][data-color=gold] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=SurfacePro3][data-orientation=landscape][data-color=black]{padding-bottom:68.15796741231705%;background-image:url(../device-mockups/SurfacePro3/landscape_black.png)}.device[data-device=SurfacePro3][data-orientation=landscape][data-color=black] .screen{top:7.0907617504051865%;left:5.827119580226457%;width:88.34576083954708%;height:86.42625607779578%}.device[data-device=SurfacePro3][data-orientation=landscape][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=SurfaceStudio][data-orientation=portrait][data-color=black]{padding-bottom:86.48036253776435%;background-image:url(../device-mockups/SurfaceStudio/portrait_black.png)}.device[data-device=SurfaceStudio][data-orientation=portrait][data-color=black] .screen{top:3.755458515283843%;left:3.2225579053373616%;width:93.52970795568983%;height:72.40174672489083%}.device[data-device=SurfaceStudio][data-orientation=portrait][data-color=black] .button{display:none;top:0;left:0;width:100%;height:100%}.device[data-device=iPhone7][data-orientation=portrait][data-color=black]{padding-bottom:203.10344827586212%;background-image:url(../device-mockups/iPhone7/portrait_black.png)}.device[data-device=iPhone7][data-orientation=portrait][data-color=black] .screen{top:11.997736276174306%;left:6.206896551724138%;width:87.35632183908046%;height:76.06112054329371%}.device[data-device=iPhone7][data-orientation=portrait][data-color=black] .button{top:89.53027730616864%;left:42.298850574712645%;width:15.747126436781608%;height:7.753254102999434%}.device[data-device=iPhone7][data-orientation=portrait][data-color=white]{padding-bottom:203.10344827586212%;background-image:url(../device-mockups/iPhone7/portrait_white.png)}.device[data-device=iPhone7][data-orientation=portrait][data-color=white] .screen{top:11.997736276174306%;left:6.206896551724138%;width:87.35632183908046%;height:76.06112054329371%}.device[data-device=iPhone7][data-orientation=portrait][data-color=white] .button{top:89.53027730616864%;left:42.298850574712645%;width:15.747126436781608%;height:7.753254102999434%}.device[data-device=iPhone7][data-orientation=portrait][data-color=gold]{padding-bottom:203.10344827586212%;background-image:url(../device-mockups/iPhone7/portrait_gold.png)}.device[data-device=iPhone7][data-orientation=portrait][data-color=gold] .screen{top:11.997736276174306%;left:6.206896551724138%;width:87.35632183908046%;height:76.06112054329371%}.device[data-device=iPhone7][data-orientation=portrait][data-color=gold] .button{top:89.53027730616864%;left:42.298850574712645%;width:15.747126436781608%;height:7.753254102999434%}.device[data-device=iPhone7][data-orientation=portrait][data-color=pink]{padding-bottom:203.10344827586212%;background-image:url(../device-mockups/iPhone7/portrait_pink.png)}.device[data-device=iPhone7][data-orientation=portrait][data-color=pink] .screen{top:11.997736276174306%;left:6.206896551724138%;width:87.35632183908046%;height:76.06112054329371%}.device[data-device=iPhone7][data-orientation=portrait][data-color=pink] .button{top:89.53027730616864%;left:42.298850574712645%;width:15.747126436781608%;height:7.753254102999434%}.device[data-device=iPhone7][data-orientation=portrait][data-color=red]{padding-bottom:201.91082802547774%;background-image:url(../device-mockups/iPhone7/portrait_red.png)}.device[data-device=iPhone7][data-orientation=portrait][data-color=red] .screen{top:11.987381703470032%;left:6.687898089171974%;width:84.71337579617835%;height:75.55205047318611%}.device[data-device=iPhone7][data-orientation=portrait][data-color=red] .button{top:89.74763406940063%;left:42.35668789808918%;width:15.605095541401273%;height:7.728706624605679%}.device[data-device=iPhone7][data-orientation=landscape][data-color=black]{padding-bottom:49.235993208828525%;background-image:url(../device-mockups/iPhone7/landscape_black.png)}.device[data-device=iPhone7][data-orientation=landscape][data-color=black] .screen{top:6.436781609195402%;left:11.997736276174306%;width:76.06112054329371%;height:87.35632183908046%}.device[data-device=iPhone7][data-orientation=landscape][data-color=black] .button{top:41.95402298850575%;left:89.53027730616864%;width:7.753254102999434%;height:15.747126436781608%}.device[data-device=iPhone7][data-orientation=landscape][data-color=white]{padding-bottom:49.235993208828525%;background-image:url(../device-mockups/iPhone7/landscape_white.png)}.device[data-device=iPhone7][data-orientation=landscape][data-color=white] .screen{top:6.436781609195402%;left:11.997736276174306%;width:76.06112054329371%;height:87.35632183908046%}.device[data-device=iPhone7][data-orientation=landscape][data-color=white] .button{top:41.95402298850575%;left:89.53027730616864%;width:7.753254102999434%;height:15.747126436781608%}.device[data-device=iPhone7][data-orientation=landscape][data-color=gold]{padding-bottom:49.235993208828525%;background-image:url(../device-mockups/iPhone7/landscape_gold.png)}.device[data-device=iPhone7][data-orientation=landscape][data-color=gold] .screen{top:6.436781609195402%;left:11.997736276174306%;width:76.06112054329371%;height:87.35632183908046%}.device[data-device=iPhone7][data-orientation=landscape][data-color=gold] .button{top:41.95402298850575%;left:89.53027730616864%;width:7.753254102999434%;height:15.747126436781608%}.device[data-device=iPhone7][data-orientation=landscape][data-color=pink]{padding-bottom:49.235993208828525%;background-image:url(../device-mockups/iPhone7/landscape_pink.png)}.device[data-device=iPhone7][data-orientation=landscape][data-color=pink] .screen{top:6.436781609195402%;left:11.997736276174306%;width:76.06112054329371%;height:87.35632183908046%}.device[data-device=iPhone7][data-orientation=landscape][data-color=pink] .button{top:41.95402298850575%;left:89.53027730616864%;width:7.753254102999434%;height:15.747126436781608%}.device[data-device=iPhone7][data-orientation=landscape][data-color=red]{padding-bottom:49.526813880126184%;background-image:url(../device-mockups/iPhone7/landscape_red.png)}.device[data-device=iPhone7][data-orientation=landscape][data-color=red] .screen{top:8.598726114649681%;left:11.987381703470032%;width:75.55205047318611%;height:84.71337579617835%}.device[data-device=iPhone7][data-orientation=landscape][data-color=red] .button{top:42.038216560509554%;left:89.74763406940063%;width:7.728706624605679%;height:15.605095541401273%}.device[data-device=Pixel][data-orientation=portrait][data-color=white]{padding-bottom:202.62008733624458%;background-image:url(../device-mockups/Pixel/portrait_white.png)}.device[data-device=Pixel][data-orientation=portrait][data-color=white] .screen{top:9.698275862068966%;left:4.366812227074235%;width:90.39301310043668%;height:78.66379310344827%}.device[data-device=Pixel][data-orientation=portrait][data-color=white] .button{top:90.51724137931035%;left:44.97816593886463%;width:11.353711790393014%;height:4.310344827586207%}.device[data-device=Pixel][data-orientation=portrait][data-color=black]{padding-bottom:202.62008733624458%;background-image:url(../device-mockups/Pixel/portrait_black.png)}.device[data-device=Pixel][data-orientation=portrait][data-color=black] .screen{top:9.698275862068966%;left:4.366812227074235%;width:90.39301310043668%;height:78.66379310344827%}.device[data-device=Pixel][data-orientation=portrait][data-color=black] .button{top:90.51724137931035%;left:44.97816593886463%;width:11.353711790393014%;height:4.310344827586207%} \ No newline at end of file +.device-wrapper{max-width:300px;width:100%}.device{position:relative;background-size:cover}.device .screen{position:absolute;background-size:cover;pointer-events:none}.device .button{position:absolute;cursor:pointer}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"]{padding-bottom:194.71789%;background-image:url(../../images/assets/mockups/galaxyS3/portrait_black.png)}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .screen{top:9.67941%;left:6.60264%;width:86.31453%;height:78.91492%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .button{top:93.1566%;left:38.65546%;width:22.56903%;height:3.26757%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"]{padding-bottom:194.71789%;background-image:url(../../images/assets/mockups/galaxyS3/portrait_white.png)}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .screen{top:9.67941%;left:6.60264%;width:86.31453%;height:78.91492%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .button{top:93.1566%;left:38.65546%;width:22.56903%;height:3.26757%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.418%;background-image:url(../../images/assets/mockups/galaxyS3/landscape_black.png)}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .screen{top:7.07434%;left:9.37115%;width:78.91492%;height:86.33094%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .button{top:38.84892%;left:93.34155%;width:3.39088%;height:22.54197%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.418%;background-image:url(../../images/assets/mockups/galaxyS3/landscape_white.png)}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .screen{top:7.07434%;left:9.37115%;width:78.91492%;height:86.33094%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .button{top:38.84892%;left:93.34155%;width:3.39088%;height:22.54197%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"]{padding-bottom:193.98374%;background-image:url(../../images/assets/mockups/galaxyS5/portrait_black.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"]{padding-bottom:193.98374%;background-image:url(../../images/assets/mockups/galaxyS5/portrait_white.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"]{padding-bottom:193.98374%;background-image:url(../../images/assets/mockups/galaxyS5/portrait_gold.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.55071%;background-image:url(../../images/assets/mockups/galaxyS5/landscape_black.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.55071%;background-image:url(../../images/assets/mockups/galaxyS5/landscape_white.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"]{padding-bottom:51.55071%;background-image:url(../../images/assets/mockups/galaxyS5/landscape_gold.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"]{padding-bottom:168.33616%;background-image:url(../../images/assets/mockups/galaxyTab4/portrait_black.png)}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .screen{top:8.57287%;left:5.68761%;width:87.94567%;height:83.00555%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"]{padding-bottom:168.33616%;background-image:url(../../images/assets/mockups/galaxyTab4/portrait_white.png)}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .screen{top:8.52244%;left:5.68761%;width:87.94567%;height:83.05598%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"]{padding-bottom:80.46663%;background-image:url(../../images/assets/mockups/iMac/portrait_black.png)}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen{top:5.05732%;left:4.06945%;width:91.8611%;height:64.1942%}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"]{padding-bottom:129.56989%;background-image:url(../../images/assets/mockups/iPad/portrait_black.png)}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .screen{top:9.12863%;left:10.30466%;width:79.21147%;height:81.39696%}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .button{top:93.15353%;left:47.13262%;width:6.00358%;height:4.49516%}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"]{padding-bottom:129.56989%;background-image:url(../../images/assets/mockups/iPad/portrait_white.png)}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .screen{top:9.12863%;left:10.48387%;width:79.30108%;height:81.39696%}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .button{top:93.15353%;left:47.13262%;width:6.00358%;height:4.49516%}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"]{padding-bottom:77.04011%;background-image:url(../../images/assets/mockups/iPad/landscape_black.png)}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .screen{top:10.23339%;left:9.26694%;width:81.3278%;height:79.44345%}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .button{top:46.7684%;left:93.22268%;width:4.426%;height:6.01436%}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"]{padding-bottom:77.04011%;background-image:url(../../images/assets/mockups/iPad/landscape_white.png)}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .screen{top:10.23339%;left:9.26694%;width:81.3278%;height:79.44345%}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .button{top:46.7684%;left:93.22268%;width:4.426%;height:6.01436%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"]{padding-bottom:141.39298%;background-image:url(../../images/assets/mockups/iPadAir2/portrait_black.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"]{padding-bottom:141.39298%;background-image:url(../../images/assets/mockups/iPadAir2/portrait_white.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"]{padding-bottom:141.39298%;background-image:url(../../images/assets/mockups/iPadAir2/portrait_gold.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"]{padding-bottom:70.72487%;background-image:url(../../images/assets/mockups/iPadAir2/landscape_black.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"]{padding-bottom:70.72487%;background-image:url(../../images/assets/mockups/iPadAir2/landscape_white.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"]{padding-bottom:70.72487%;background-image:url(../../images/assets/mockups/iPadAir2/landscape_gold.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"]{padding-bottom:138.62249%;background-image:url(../../images/assets/mockups/iPadPro/portrait_black.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .screen{top:7.04403%;left:5.36181%;width:89.23278%;height:85.91195%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"]{padding-bottom:138.62249%;background-image:url(../../images/assets/mockups/iPadPro/portrait_white.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .screen{top:7.04403%;left:5.36181%;width:89.23278%;height:85.91195%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"]{padding-bottom:138.62249%;background-image:url(../../images/assets/mockups/iPadPro/portrait_gold.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .screen{top:7.07547%;left:5.36181%;width:89.23278%;height:85.8805%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"]{padding-bottom:72.13836%;background-image:url(../../images/assets/mockups/iPadPro/landscape_black.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .screen{top:5.40541%;left:7.04403%;width:85.91195%;height:89.23278%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .button{top:47.55885%;left:94.93711%;width:3.52201%;height:4.83871%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"]{padding-bottom:72.13836%;background-image:url(../../images/assets/mockups/iPadPro/landscape_white.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .screen{top:5.40541%;left:7.04403%;width:85.91195%;height:89.23278%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .button{top:47.55885%;left:94.93711%;width:3.52201%;height:4.83871%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"]{padding-bottom:72.14712%;background-image:url(../../images/assets/mockups/iPadPro/landscape_gold.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .screen{top:5.40305%;left:7.07325%;width:85.88494%;height:89.23747%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .button{top:47.53813%;left:94.90726%;width:3.55234%;height:4.88017%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"]{padding-bottom:207.62016%;background-image:url(../../images/assets/mockups/iPhone6/portrait_black.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"]{padding-bottom:207.62016%;background-image:url(../../images/assets/mockups/iPhone6/portrait_white.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"]{padding-bottom:207.62016%;background-image:url(../../images/assets/mockups/iPhone6/portrait_gold.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"]{padding-bottom:48.16488%;background-image:url(../../images/assets/mockups/iPhone6/landscape_black.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"]{padding-bottom:48.16488%;background-image:url(../../images/assets/mockups/iPhone6/landscape_white.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"]{padding-bottom:48.16488%;background-image:url(../../images/assets/mockups/iPhone6/landscape_gold.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"]{padding-bottom:201.45161%;background-image:url(../../images/assets/mockups/iPhone6Plus/portrait_black.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"]{padding-bottom:201.45161%;background-image:url(../../images/assets/mockups/iPhone6Plus/portrait_white.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"]{padding-bottom:201.45161%;background-image:url(../../images/assets/mockups/iPhone6Plus/portrait_gold.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"]{padding-bottom:49.63971%;background-image:url(../../images/assets/mockups/iPhone6Plus/landscape_black.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"]{padding-bottom:49.63971%;background-image:url(../../images/assets/mockups/iPhone6Plus/landscape_white.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"]{padding-bottom:49.63971%;background-image:url(../../images/assets/mockups/iPhone6Plus/landscape_gold.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_black.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_white.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_gold.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_pink.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_black.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_white.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_gold.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_pink.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.46124%;background-image:url(../../images/assets/mockups/iPhone5/portrait_black.png)}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .screen{top:14.80552%;left:8.27858%;width:84.23127%;height:71.26725%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .button{top:88.51945%;left:41.52431%;width:18.00263%;height:8.59473%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"]{padding-bottom:209.46124%;background-image:url(../../images/assets/mockups/iPhone5/portrait_white.png)}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .screen{top:14.80552%;left:8.27858%;width:84.23127%;height:71.26725%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .button{top:88.51945%;left:41.52431%;width:18.00263%;height:8.59473%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.74153%;background-image:url(../../images/assets/mockups/iPhone5/landscape_black.png)}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .screen{top:7.49014%;left:14.80552%;width:71.26725%;height:84.23127%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .button{top:40.47306%;left:88.51945%;width:8.59473%;height:18.00263%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"]{padding-bottom:47.74153%;background-image:url(../../images/assets/mockups/iPhone5/landscape_white.png)}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .screen{top:7.49014%;left:14.80552%;width:71.26725%;height:84.23127%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .button{top:40.47306%;left:88.51945%;width:8.59473%;height:18.00263%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"]{padding-bottom:192.31288%;background-image:url(../../images/assets/mockups/Lumia930/portrait_black.png)}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .screen{top:7.11781%;left:5.52933%;width:87.86244%;height:81.13604%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"]{padding-bottom:192.31288%;background-image:url(../../images/assets/mockups/Lumia930/portrait_white.png)}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .screen{top:7.11781%;left:5.52933%;width:87.86244%;height:81.13604%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.9986%;background-image:url(../../images/assets/mockups/Lumia930/landscape_black.png)}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .screen{top:6.60823%;left:7.11781%;width:81.13604%;height:87.86244%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.9986%;background-image:url(../../images/assets/mockups/Lumia930/landscape_white.png)}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .screen{top:6.60823%;left:7.11781%;width:81.13604%;height:87.86244%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook/portrait_black.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook/portrait_white.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook/portrait_gold.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook2015/portrait_black.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook2015/portrait_white.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook2015/portrait_gold.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.94702%;background-image:url(../../images/assets/mockups/MacbookPro/portrait_black.png)}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen{top:6.71429%;left:11.83775%;width:76.40728%;height:82.42857%}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"]{padding-bottom:64.67803%;background-image:url(../../images/assets/mockups/SamsungTV/portrait_black.png)}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .screen{top:2.19619%;left:1.32576%;width:97.25379%;height:85.2123%}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"]{padding-bottom:62.38125%;background-image:url(../../images/assets/mockups/Surface/portrait_black.png)}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .screen{top:11.06599%;left:6.77644%;width:86.38379%;height:77.7665%}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .button{top:92.18274%;left:48.8917%;width:2.34326%;height:3.65482%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"]{padding-bottom:89.11784%;background-image:url(../../images/assets/mockups/iPhone6Hand/portrait_black.png)}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .screen{top:10.83815%;left:10.94656%;width:33.67675%;height:67.26879%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .button{top:79.69653%;left:24.79073%;width:5.98841%;height:6.79191%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"]{padding-bottom:89.11784%;background-image:url(../../images/assets/mockups/iPhone6Hand/portrait_white.png)}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .screen{top:10.83815%;left:11.07534%;width:33.54797%;height:67.26879%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .button{top:79.69653%;left:24.79073%;width:5.98841%;height:6.79191%}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"]{padding-bottom:158.39243%;background-image:url(../../images/assets/mockups/iPhone7Hand/portrait_black.png)}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .screen{top:7.83582%;left:41.25296%;width:42.19858%;height:47.23881%}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .button{top:56.19403%;left:58.39243%;width:7.80142%;height:4.92537%}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"]{padding-bottom:158.39243%;background-image:url(../../images/assets/mockups/iPhone7Hand_2/portrait_black.png)}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .screen{top:7.83582%;left:41.25296%;width:42.19858%;height:47.23881%}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .button{top:56.19403%;left:58.39243%;width:7.80142%;height:4.92537%}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"]{padding-bottom:58.97364%;background-image:url(../../images/assets/mockups/Chromebook/portrait_black.png)}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .screen{top:7.89349%;left:12.73135%;width:74.1447%;height:71.27913%}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.0625%;background-image:url(../../images/assets/mockups/HtcOneM8/portrait_black.png)}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .screen{top:10.76233%;left:5.3125%;width:89.0625%;height:75.63528%}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.83259%;background-image:url(../../images/assets/mockups/HtcOneM8/landscape_black.png)}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .screen{top:5.625%;left:10.76233%;width:75.63528%;height:89.0625%}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"]{padding-bottom:209.74084%;background-image:url(../../images/assets/mockups/HuaweiP8/portrait_gold.png)}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .screen{top:9.11802%;left:1.69794%;width:95.88919%;height:81.80656%}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"]{padding-bottom:47.67789%;background-image:url(../../images/assets/mockups/HuaweiP8/landscape_gold.png)}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .screen{top:2.41287%;left:9.11802%;width:81.80656%;height:95.88919%}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"]{padding-bottom:68.15797%;background-image:url(../../images/assets/mockups/SurfacePro3/landscape_black.png)}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .screen{top:7.09076%;left:5.82712%;width:88.34576%;height:86.42626%}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"]{padding-bottom:86.48036%;background-image:url(../../images/assets/mockups/SurfaceStudio/portrait_black.png)}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .screen{top:3.75546%;left:3.22256%;width:93.52971%;height:72.40175%}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_black.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_white.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_gold.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_pink.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"]{padding-bottom:201.91083%;background-image:url(../../images/assets/mockups/iPhone7/portrait_red.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .screen{top:11.98738%;left:6.6879%;width:84.71338%;height:75.55205%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .button{top:89.74763%;left:42.35669%;width:15.6051%;height:7.72871%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_black.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_white.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_gold.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_pink.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"]{padding-bottom:49.52681%;background-image:url(../../images/assets/mockups/iPhone7/landscape_red.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .screen{top:8.59873%;left:11.98738%;width:75.55205%;height:84.71338%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .button{top:42.03822%;left:89.74763%;width:7.72871%;height:15.6051%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"]{padding-bottom:202.62009%;background-image:url(../../images/assets/mockups/Pixel/portrait_white.png)}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .screen{top:9.69828%;left:4.36681%;width:90.39301%;height:78.66379%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .button{top:90.51724%;left:44.97817%;width:11.35371%;height:4.31034%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"]{padding-bottom:202.62009%;background-image:url(../../images/assets/mockups/Pixel/portrait_black.png)}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .screen{top:9.69828%;left:4.36681%;width:90.39301%;height:78.66379%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .button{top:90.51724%;left:44.97817%;width:11.35371%;height:4.31034%} diff --git a/package-lock.json b/package-lock.json index c0c01c3..358a448 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,12 +15,17 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz", "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", "dev": true, - "optional": true, "requires": { "co": "4.6.0", "json-stable-stringify": "1.0.1" } }, + "amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", + "dev": true + }, "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", @@ -33,6 +38,22 @@ "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", "dev": true }, + "aproba": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "dev": true + }, + "are-we-there-yet": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz", + "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", + "dev": true, + "requires": { + "delegates": "1.0.0", + "readable-stream": "2.3.3" + } + }, "argparse": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz", @@ -59,15 +80,13 @@ "version": "0.2.3", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz", "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=", - "dev": true, - "optional": true + "dev": true }, "assert-plus": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", - "dev": true, - "optional": true + "dev": true }, "async": { "version": "1.5.2", @@ -75,12 +94,17 @@ "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", "dev": true }, + "async-foreach": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", + "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=", + "dev": true + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true, - "optional": true + "dev": true }, "autoprefixer": { "version": "6.7.7", @@ -100,15 +124,13 @@ "version": "0.6.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", - "dev": true, - "optional": true + "dev": true }, "aws4": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz", "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=", - "dev": true, - "optional": true + "dev": true }, "balanced-match": { "version": "1.0.0", @@ -126,6 +148,15 @@ "tweetnacl": "0.14.5" } }, + "block-stream": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", + "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", + "dev": true, + "requires": { + "inherits": "2.0.3" + } + }, "boom": { "version": "2.10.1", "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", @@ -187,8 +218,7 @@ "version": "0.12.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", - "dev": true, - "optional": true + "dev": true }, "chalk": { "version": "1.1.3", @@ -212,12 +242,28 @@ "source-map": "0.5.6" } }, + "cliui": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", + "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", + "dev": true, + "requires": { + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wrap-ansi": "2.1.0" + } + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", - "dev": true, - "optional": true + "dev": true + }, + "code-point-at": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "dev": true }, "coffee-script": { "version": "1.10.0", @@ -246,12 +292,33 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, + "console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "dev": true + }, + "core-util-is": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", + "dev": true + }, + "cross-spawn": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", + "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", + "dev": true, + "requires": { + "lru-cache": "4.1.1", + "which": "1.2.14" + } + }, "cryptiles": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", "dev": true, - "optional": true, "requires": { "boom": "2.10.1" } @@ -270,7 +337,6 @@ "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", "dev": true, - "optional": true, "requires": { "assert-plus": "1.0.0" }, @@ -279,8 +345,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true + "dev": true } } }, @@ -306,6 +371,12 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", + "dev": true + }, "duplexer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", @@ -375,8 +446,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz", "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=", - "dev": true, - "optional": true + "dev": true }, "extsprintf": { "version": "1.0.2", @@ -432,15 +502,13 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", - "dev": true, - "optional": true + "dev": true }, "form-data": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", "dev": true, - "optional": true, "requires": { "asynckit": "0.4.0", "combined-stream": "1.0.5", @@ -453,6 +521,49 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true }, + "fstream": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", + "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "inherits": "2.0.3", + "mkdirp": "0.5.1", + "rimraf": "2.2.8" + } + }, + "gauge": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "dev": true, + "requires": { + "aproba": "1.2.0", + "console-control-strings": "1.1.0", + "has-unicode": "2.0.1", + "object-assign": "4.1.1", + "signal-exit": "3.0.2", + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wide-align": "1.1.2" + } + }, + "gaze": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz", + "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=", + "dev": true, + "requires": { + "globule": "1.2.0" + } + }, + "get-caller-file": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz", + "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=", + "dev": true + }, "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", @@ -470,7 +581,6 @@ "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", "dev": true, - "optional": true, "requires": { "assert-plus": "1.0.0" }, @@ -479,8 +589,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true + "dev": true } } }, @@ -498,6 +607,39 @@ "path-is-absolute": "1.0.1" } }, + "globule": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz", + "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", + "dev": true, + "requires": { + "glob": "7.1.2", + "lodash": "4.17.4", + "minimatch": "3.0.4" + }, + "dependencies": { + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.4.0", + "path-is-absolute": "1.0.1" + } + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + } + } + }, "graceful-fs": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", @@ -664,15 +806,13 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz", "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=", - "dev": true, - "optional": true + "dev": true }, "har-validator": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz", "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", "dev": true, - "optional": true, "requires": { "ajv": "4.11.8", "har-schema": "1.0.5" @@ -693,12 +833,17 @@ "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", "dev": true }, + "has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", + "dev": true + }, "hawk": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", "dev": true, - "optional": true, "requires": { "boom": "2.10.1", "cryptiles": "2.0.5", @@ -729,7 +874,6 @@ "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", "dev": true, - "optional": true, "requires": { "assert-plus": "0.2.0", "jsprim": "1.4.0", @@ -749,6 +893,12 @@ "dev": true, "optional": true }, + "in-publish": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz", + "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=", + "dev": true + }, "indent-string": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", @@ -774,6 +924,12 @@ "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true }, + "invert-kv": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", + "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", + "dev": true + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -798,12 +954,20 @@ "number-is-nan": "1.0.1" } }, + "is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "dev": true, + "requires": { + "number-is-nan": "1.0.1" + } + }, "is-typedarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", - "dev": true, - "optional": true + "dev": true }, "is-utf8": { "version": "0.2.1", @@ -811,6 +975,12 @@ "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", "dev": true }, + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -821,8 +991,7 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", - "dev": true, - "optional": true + "dev": true }, "js-base64": { "version": "2.1.9", @@ -851,15 +1020,13 @@ "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=", - "dev": true, - "optional": true + "dev": true }, "json-stable-stringify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz", "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", "dev": true, - "optional": true, "requires": { "jsonify": "0.0.0" } @@ -868,22 +1035,19 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", - "dev": true, - "optional": true + "dev": true }, "jsonify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", - "dev": true, - "optional": true + "dev": true }, "jsprim": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz", "integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=", "dev": true, - "optional": true, "requires": { "assert-plus": "1.0.0", "extsprintf": "1.0.2", @@ -895,11 +1059,19 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true + "dev": true } } }, + "lcid": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", + "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", + "dev": true, + "requires": { + "invert-kv": "1.0.0" + } + }, "less": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/less/-/less-2.7.2.tgz", @@ -945,6 +1117,24 @@ "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", "dev": true }, + "lodash.assign": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", + "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=", + "dev": true + }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "dev": true + }, + "lodash.mergewith": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz", + "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=", + "dev": true + }, "loud-rejection": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", @@ -955,6 +1145,16 @@ "signal-exit": "3.0.2" } }, + "lru-cache": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", + "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==", + "dev": true, + "requires": { + "pseudomap": "1.0.2", + "yallist": "2.1.2" + } + }, "map-obj": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", @@ -1033,7 +1233,6 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" }, @@ -1042,11 +1241,71 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true } } }, + "nan": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.7.0.tgz", + "integrity": "sha1-2Vv3IeyHfgjbJ27T/G63j5CDrUY=", + "dev": true + }, + "node-gyp": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz", + "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=", + "dev": true, + "requires": { + "fstream": "1.0.11", + "glob": "7.0.6", + "graceful-fs": "4.1.11", + "minimatch": "3.0.4", + "mkdirp": "0.5.1", + "nopt": "3.0.6", + "npmlog": "4.1.2", + "osenv": "0.1.4", + "request": "2.81.0", + "rimraf": "2.2.8", + "semver": "5.3.0", + "tar": "2.2.1", + "which": "1.2.14" + }, + "dependencies": { + "semver": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", + "dev": true + } + } + }, + "node-sass": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.6.1.tgz", + "integrity": "sha512-0zQQ7tjEK5W8RfW9LiQrkzfo7uLZ0QtZGV69rdKn5cFzdweHLJ14lR6xLPvI6UimkXMO8m0qDsXwUCNdnqV3sA==", + "dev": true, + "requires": { + "async-foreach": "0.1.3", + "chalk": "1.1.3", + "cross-spawn": "3.0.1", + "gaze": "1.1.2", + "get-stdin": "4.0.1", + "glob": "7.0.6", + "in-publish": "2.0.0", + "lodash.assign": "4.2.0", + "lodash.clonedeep": "4.5.0", + "lodash.mergewith": "4.6.0", + "meow": "3.7.0", + "mkdirp": "0.5.1", + "nan": "2.7.0", + "node-gyp": "3.6.2", + "npmlog": "4.1.2", + "request": "2.81.0", + "sass-graph": "2.2.4", + "stdout-stream": "1.4.0" + } + }, "nopt": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", @@ -1074,6 +1333,18 @@ "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", "dev": true }, + "npmlog": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "dev": true, + "requires": { + "are-we-there-yet": "1.1.4", + "console-control-strings": "1.1.0", + "gauge": "2.7.4", + "set-blocking": "2.0.0" + } + }, "num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", @@ -1090,8 +1361,7 @@ "version": "0.8.2", "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz", "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=", - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -1108,6 +1378,37 @@ "wrappy": "1.0.2" } }, + "os-homedir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "dev": true + }, + "os-locale": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", + "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", + "dev": true, + "requires": { + "lcid": "1.0.0" + } + }, + "os-tmpdir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", + "dev": true + }, + "osenv": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz", + "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=", + "dev": true, + "requires": { + "os-homedir": "1.0.2", + "os-tmpdir": "1.0.2" + } + }, "parse-json": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", @@ -1147,8 +1448,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=", - "dev": true, - "optional": true + "dev": true }, "pify": { "version": "2.3.0", @@ -1209,6 +1509,12 @@ "number-is-nan": "1.0.1" } }, + "process-nextick-args": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", + "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=", + "dev": true + }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -1226,19 +1532,23 @@ "dev": true, "optional": true }, + "pseudomap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", + "dev": true + }, "punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", - "dev": true, - "optional": true + "dev": true }, "qs": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=", - "dev": true, - "optional": true + "dev": true }, "read-pkg": { "version": "1.1.0", @@ -1261,6 +1571,21 @@ "read-pkg": "1.1.0" } }, + "readable-stream": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", + "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "1.0.7", + "safe-buffer": "5.1.1", + "string_decoder": "1.0.3", + "util-deprecate": "1.0.2" + } + }, "redent": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", @@ -1285,7 +1610,6 @@ "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz", "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=", "dev": true, - "optional": true, "requires": { "aws-sign2": "0.6.0", "aws4": "1.6.0", @@ -1311,6 +1635,18 @@ "uuid": "3.1.0" } }, + "require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", + "dev": true + }, + "require-main-filename": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", + "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", + "dev": true + }, "resolve": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", @@ -1329,12 +1665,59 @@ "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true }, + "sass-graph": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz", + "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", + "dev": true, + "requires": { + "glob": "7.0.6", + "lodash": "4.17.4", + "scss-tokenizer": "0.2.3", + "yargs": "7.1.0" + }, + "dependencies": { + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + } + } + }, + "scss-tokenizer": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", + "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=", + "dev": true, + "requires": { + "js-base64": "2.1.9", + "source-map": "0.4.4" + }, + "dependencies": { + "source-map": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", + "dev": true, + "requires": { + "amdefine": "1.0.1" + } + } + } + }, "semver": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz", "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==", "dev": true }, + "set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", + "dev": true + }, "signal-exit": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", @@ -1346,7 +1729,6 @@ "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", "dev": true, - "optional": true, "requires": { "hoek": "2.16.3" } @@ -1389,7 +1771,6 @@ "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz", "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=", "dev": true, - "optional": true, "requires": { "asn1": "0.2.3", "assert-plus": "1.0.0", @@ -1405,17 +1786,44 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true, - "optional": true + "dev": true } } }, + "stdout-stream": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz", + "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=", + "dev": true, + "requires": { + "readable-stream": "2.3.3" + } + }, + "string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "dev": true, + "requires": { + "code-point-at": "1.1.0", + "is-fullwidth-code-point": "1.0.0", + "strip-ansi": "3.0.1" + } + }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=", - "dev": true, - "optional": true + "dev": true }, "strip-ansi": { "version": "3.0.1", @@ -1450,12 +1858,22 @@ "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true }, + "tar": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", + "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", + "dev": true, + "requires": { + "block-stream": "0.0.9", + "fstream": "1.0.11", + "inherits": "2.0.3" + } + }, "tough-cookie": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz", "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=", "dev": true, - "optional": true, "requires": { "punycode": "1.4.1" } @@ -1471,7 +1889,6 @@ "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", "dev": true, - "optional": true, "requires": { "safe-buffer": "5.1.1" } @@ -1489,12 +1906,17 @@ "integrity": "sha1-gGmSYzZl1eX8tNsfs6hi62jp5to=", "dev": true }, + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "dev": true + }, "uuid": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz", "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==", - "dev": true, - "optional": true + "dev": true }, "validate-npm-package-license": { "version": "3.0.1", @@ -1511,7 +1933,6 @@ "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz", "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=", "dev": true, - "optional": true, "requires": { "extsprintf": "1.0.2" } @@ -1525,11 +1946,94 @@ "isexe": "2.0.0" } }, + "which-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz", + "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=", + "dev": true + }, + "wide-align": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", + "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "dev": true, + "requires": { + "string-width": "1.0.2" + } + }, + "wrap-ansi": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", + "dev": true, + "requires": { + "string-width": "1.0.2", + "strip-ansi": "3.0.1" + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true + }, + "y18n": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", + "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", + "dev": true + }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "dev": true + }, + "yargs": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", + "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", + "dev": true, + "requires": { + "camelcase": "3.0.0", + "cliui": "3.2.0", + "decamelize": "1.2.0", + "get-caller-file": "1.0.2", + "os-locale": "1.4.0", + "read-pkg-up": "1.0.1", + "require-directory": "2.1.1", + "require-main-filename": "1.0.1", + "set-blocking": "2.0.0", + "string-width": "1.0.2", + "which-module": "1.0.0", + "y18n": "3.2.1", + "yargs-parser": "5.0.0" + }, + "dependencies": { + "camelcase": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", + "dev": true + } + } + }, + "yargs-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz", + "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", + "dev": true, + "requires": { + "camelcase": "3.0.0" + }, + "dependencies": { + "camelcase": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", + "dev": true + } + } } } } diff --git a/package.json b/package.json index 240f75c..86f03d2 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "HTML5 mockups of popular devices, to showcase your portfolio and spice up your website.", "main": "dist/device-mockups.min.css", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "scss-min": "node-sass --output-style compressed --include-path scss ./src/scss/device-mockups.scss ./dist/device-mockups.min.css", + "scss": "node-sass --include-path scss ./src/scss/device-mockups.scss ./dist/device-mockups.css" }, "author": "", "license": "ISC", @@ -13,7 +15,8 @@ "grunt-banner": "^0.6.0", "grunt-contrib-cssmin": "^2.1.0", "grunt-contrib-less": "^1.4.1", - "less-plugin-autoprefix": "^1.5.1" + "less-plugin-autoprefix": "^1.5.1", + "node-sass": "^4.6.1" }, "link": "https://github.com/pixelsign/html5-device-mockups" } diff --git a/src/device-mockups.less b/src/less/device-mockups.less similarity index 100% rename from src/device-mockups.less rename to src/less/device-mockups.less diff --git a/src/devices.less b/src/less/devices.less similarity index 100% rename from src/devices.less rename to src/less/devices.less diff --git a/src/for.less b/src/less/for.less similarity index 100% rename from src/for.less rename to src/less/for.less diff --git a/src/general.less b/src/less/general.less similarity index 100% rename from src/general.less rename to src/less/general.less diff --git a/src/scss/device-mockups.scss b/src/scss/device-mockups.scss new file mode 100644 index 0000000..e0d26d8 --- /dev/null +++ b/src/scss/device-mockups.scss @@ -0,0 +1,59 @@ +@import "general.scss"; +@import "devices.scss"; + +.device { + + @each $device, $orientation, $color, $image_width, $image_height, $screen_top, $screen_right, $screen_bottom, $screen_left, $button_top, $button_right, $button_bottom, $bottom_left in $devicesList { + + &[data-device="#{$device}"][data-orientation="#{$orientation}"][data-color="#{$color}"] { + + $paddingCalc: percentage($image_height / ($image_width / 300) / 300); + $imageURL: '#{$rel-mockup-path}/#{$device}/#{$orientation}_#{$color}.png'; + + padding-bottom: #{$paddingCalc}; + background-image: url(#{$imageURL}); + + .screen { + + $topCalc: percentage($screen_top / $image_height); + $leftCalc: percentage($screen_left / $image_width); + + $screenWidth: $image_width - $screen_right - $screen_left; + $screenHeight: $image_height - $screen_top - $screen_bottom; + + $widthCalc: percentage($screenWidth / $image_width); + $heightCalc: percentage($screenHeight / $image_height); + + top: #{$topCalc}; + left: #{$leftCalc}; + width: #{$widthCalc}; + height: #{$heightCalc}; + + } + + .button { + + @if $button_top == 0 and $button_right == 0 and $button_bottom == 0 and $bottom_left == 0 { + display: none; + } + + $topCalc: percentage($button_top / $image_height); + $leftCalc: percentage($bottom_left / $image_width); + + $buttonWidth: $image_width - $button_right - $bottom_left; + $buttonHeight: $image_height - $button_top - $button_bottom; + + $widthCalc: percentage($buttonWidth / $image_width); + $heightCalc: percentage($buttonHeight / $image_height); + + top: #{$topCalc}; + left: #{$leftCalc}; + width: #{$widthCalc}; + height: #{$heightCalc}; + + } + + } + } + +} diff --git a/src/scss/devices.scss b/src/scss/devices.scss new file mode 100644 index 0000000..2306517 --- /dev/null +++ b/src/scss/devices.scss @@ -0,0 +1,129 @@ +// name orientation color image_width image_height screen_top screen_right screen_bottom screen_left button_top button_right button_bottom bottom_left +$devicesList: ( + (galaxyS3, portrait, 'black', 833, 1622, 157, 59, 185, 55, 1511, 323, 58, 322), + (galaxyS3, portrait, 'white', 833, 1622, 157, 59, 185, 55, 1511, 323, 58, 322), + + (galaxyS3, landscape, 'black', 1622, 834, 59, 190, 55, 152, 324, 53, 322, 1514), + (galaxyS3, landscape, 'white', 1622, 834, 59, 190, 55, 152, 324, 53, 322, 1514), + + (galaxyS5, portrait, 'black', 1230, 2386, 234, 75, 232, 75, 2210, 474, 87, 479), + (galaxyS5, portrait, 'white', 1230, 2386, 234, 75, 232, 75, 2210, 474, 87, 479), + (galaxyS5, portrait, 'gold', 1230, 2386, 234, 75, 232, 75, 2210, 474, 87, 479), + + (galaxyS5, landscape, 'black', 2386, 1230, 75, 232, 75, 234, 474, 87, 479, 2210), + (galaxyS5, landscape, 'white', 2386, 1230, 75, 232, 75, 234, 474, 87, 479, 2210), + (galaxyS5, landscape, 'gold', 2386, 1230, 75, 232, 75, 234, 474, 87, 479, 2210), + + (galaxyTab4, portrait, 'black', 1178, 1983, 170, 75, 167, 67, 0, 0, 0, 0), + (galaxyTab4, portrait, 'white', 1178, 1983, 169, 75, 167, 67, 0, 0, 0, 0), + + (iMac, portrait, 'black', 1843, 1483, 75, 75, 456, 75, 0, 0, 0, 0), + + (iPad, portrait, 'black', 1116, 1446, 132, 117, 137, 115, 1347, 523, 34, 526), + (iPad, portrait, 'white', 1116, 1446, 132, 114, 137, 117, 1347, 523, 34, 526), + + (iPad, landscape, 'black', 1446, 1114, 114, 136, 115, 134, 521, 34, 526, 1348), + (iPad, landscape, 'white', 1446, 1114, 114, 136, 115, 134, 521, 34, 526, 1348), + + (iPadAir2, portrait, 'black', 1766, 2497, 227, 116, 222, 114, 2336, 828, 50, 827), + (iPadAir2, portrait, 'white', 1766, 2497, 227, 116, 222, 114, 2336, 828, 50, 827), + (iPadAir2, portrait, 'gold', 1766, 2497, 227, 116, 222, 114, 2336, 828, 50, 827), + + (iPadAir2, landscape, 'black', 2497, 1766, 116, 222, 114, 227, 828, 50, 827, 2336), + (iPadAir2, landscape, 'white', 2497, 1766, 116, 222, 114, 227, 828, 50, 827, 2336), + (iPadAir2, landscape, 'gold', 2497, 1766, 116, 222, 114, 227, 828, 50, 827, 2336), + + (iPadPro, portrait, 'black', 2294, 3180, 224, 124, 224, 123, 3019, 1091, 49, 1092), + (iPadPro, portrait, 'white', 2294, 3180, 224, 124, 224, 123, 3019, 1091, 49, 1092), + (iPadPro, portrait, 'gold', 2294, 3180, 225, 124, 224, 123, 3019, 1091, 49, 1092), + + (iPadPro, landscape, 'black', 3180, 2294, 124, 224, 123, 224, 1091, 49, 1092, 3019), + (iPadPro, landscape, 'white', 3180, 2294, 124, 224, 123, 224, 1091, 49, 1092, 3019), + (iPadPro, landscape, 'gold', 3181, 2295, 124, 224, 123, 225, 1091, 49, 1092, 3019), + + (iPhone6, portrait, 'black', 853, 1771, 217, 50, 220, 52, 1582, 354, 47, 357), + (iPhone6, portrait, 'white', 853, 1771, 217, 50, 220, 52, 1582, 354, 47, 357), + (iPhone6, portrait, 'gold', 853, 1771, 217, 50, 220, 52, 1582, 354, 47, 357), + + (iPhone6, landscape, 'black', 1771, 853, 50, 220, 53, 218, 354, 47, 357, 1582), + (iPhone6, landscape, 'white', 1771, 853, 50, 220, 53, 218, 354, 47, 357, 1582), + (iPhone6, landscape, 'gold', 1771, 853, 50, 220, 53, 218, 354, 47, 357, 1582), + + (iPhone6Plus, portrait, 'black', 1240, 2498, 287, 79, 291, 81, 2259, 537, 73, 537), + (iPhone6Plus, portrait, 'white', 1240, 2498, 287, 79, 291, 81, 2259, 537, 73, 537), + (iPhone6Plus, portrait, 'gold', 1240, 2498, 287, 79, 291, 81, 2259, 537, 73, 537), + + (iPhone6Plus, landscape, 'black', 2498, 1240, 79, 291, 81, 287, 537, 73, 537, 2259), + (iPhone6Plus, landscape, 'white', 2498, 1240, 79, 291, 81, 287, 537, 73, 537, 2259), + (iPhone6Plus, landscape, 'gold', 2498, 1240, 79, 291, 81, 287, 537, 73, 537, 2259), + + (iPhoneSE, portrait, 'black', 763, 1601, 237, 58, 228, 65, 1417, 310, 49, 318), + (iPhoneSE, portrait, 'white', 763, 1601, 237, 58, 228, 65, 1417, 310, 49, 318), + (iPhoneSE, portrait, 'gold', 763, 1601, 237, 58, 228, 65, 1417, 310, 49, 318), + (iPhoneSE, portrait, 'pink', 763, 1601, 237, 58, 228, 65, 1417, 310, 49, 318), + + (iPhoneSE, landscape, 'black', 1601, 763, 58, 228, 65, 237, 310, 49, 318, 1417), + (iPhoneSE, landscape, 'white', 1601, 763, 58, 228, 65, 237, 310, 49, 318, 1417), + (iPhoneSE, landscape, 'gold', 1601, 763, 58, 228, 65, 237, 310, 49, 318, 1417), + (iPhoneSE, landscape, 'pink', 1601, 763, 58, 228, 65, 237, 310, 49, 318, 1417), + + (iPhone5, portrait, 'black', 761, 1594, 236, 57, 222, 63, 1411, 308, 46, 316), + (iPhone5, portrait, 'white', 761, 1594, 236, 57, 222, 63, 1411, 308, 46, 316), + + (iPhone5, landscape, 'black', 1594, 761, 57, 222, 63, 236, 308, 46, 316, 1411), + (iPhone5, landscape, 'white', 1594, 761, 57, 222, 63, 236, 308, 46, 316, 1411), + + (Lumia930, portrait, 'black', 1483, 2852, 203, 98, 335, 82, 0, 0, 0, 0), + (Lumia930, portrait, 'white', 1483, 2852, 203, 98, 335, 82, 0, 0, 0, 0), + + (Lumia930, landscape, 'black', 2852, 1483, 98, 335, 82, 203, 0, 0, 0, 0), + (Lumia930, landscape, 'white', 2852, 1483, 98, 335, 82, 203, 0, 0, 0, 0), + + (Macbook, portrait, 'black', 1916, 1102, 80, 237, 120, 237, 0, 0, 0, 0), + (Macbook, portrait, 'white', 1916, 1102, 80, 237, 120, 237, 0, 0, 0, 0), + (Macbook, portrait, 'gold', 1916, 1102, 80, 237, 120, 237, 0, 0, 0, 0), + + (Macbook2015, portrait, 'black', 1916, 1102, 81, 238, 120, 238, 0, 0, 0, 0), + (Macbook2015, portrait, 'white', 1916, 1102, 81, 238, 120, 238, 0, 0, 0, 0), + (Macbook2015, portrait, 'gold', 1916, 1102, 81, 238, 120, 238, 0, 0, 0, 0), + + (MacbookPro, portrait, 'black', 1208, 700, 47, 142, 76, 143, 0, 0, 0, 0), + + (SamsungTV, portrait, 'black', 1056, 683, 15, 15, 86, 14, 0, 0, 0, 0), + + (Surface, portrait, 'black', 1579, 985, 109, 108, 110, 107, 908, 770, 41, 772), + + (iPhone6Hand, portrait, 'black', 1553, 1384, 150, 860, 303, 170, 1103, 1075, 187, 385), + (iPhone6Hand, portrait, 'white', 1553, 1384, 150, 860, 303, 172, 1103, 1075, 187, 385), + + (iPhone7Hand, portrait, 'black', 846, 1340, 105, 140, 602, 349, 753, 286, 521, 494), + + (iPhone7Hand_2, portrait, 'black', 846, 1340, 105, 140, 602, 349, 753, 286, 521, 494), + + (Chromebook, portrait, 'black', 3566, 2103, 166, 468, 438, 454, 0, 0, 0, 0), + + (HtcOneM8, portrait, 'black', 320, 669, 72, 18, 91, 17, 0, 0, 0, 0), + (HtcOneM8, landscape, 'black', 669, 320, 18, 91, 17, 72, 0, 0, 0, 0), + + (HuaweiP8, portrait, 'gold', 1119, 2347, 214, 27, 213, 19, 0, 0, 0, 0), + (HuaweiP8, landscape, 'gold', 2347, 1119, 27, 213, 19, 214, 0, 0, 0, 0), + + (SurfacePro3, landscape, 'black', 3621, 2468, 175, 211, 160, 211, 0, 0, 0, 0), + + (SurfaceStudio, portrait, 'black', 3972, 3435, 129, 129, 819, 128, 0, 0, 0, 0), + + (iPhone7, portrait, 'black', 870, 1767, 212, 56, 211, 54, 1582, 365, 48, 368), + (iPhone7, portrait, 'white', 870, 1767, 212, 56, 211, 54, 1582, 365, 48, 368), + (iPhone7, portrait, 'gold', 870, 1767, 212, 56, 211, 54, 1582, 365, 48, 368), + (iPhone7, portrait, 'pink', 870, 1767, 212, 56, 211, 54, 1582, 365, 48, 368), + (iPhone7, portrait, 'red', 314, 634, 76, 27, 79, 21, 569, 132, 16, 133), + + (iPhone7, landscape, 'black', 1767, 870, 56, 211, 54, 212, 365, 48, 368, 1582), + (iPhone7, landscape, 'white', 1767, 870, 56, 211, 54, 212, 365, 48, 368, 1582), + (iPhone7, landscape, 'gold', 1767, 870, 56, 211, 54, 212, 365, 48, 368, 1582), + (iPhone7, landscape, 'pink', 1767, 870, 56, 211, 54, 212, 365, 48, 368, 1582), + (iPhone7, landscape, 'red', 634, 314, 27, 79, 21, 76, 132, 16, 133, 569), + + (Pixel, portrait, 'white', 229, 464, 45, 12, 54, 10, 420, 100, 24, 103), + (Pixel, portrait, 'black', 229, 464, 45, 12, 54, 10, 420, 100, 24, 103), +); diff --git a/src/scss/general.scss b/src/scss/general.scss new file mode 100644 index 0000000..d05bd77 --- /dev/null +++ b/src/scss/general.scss @@ -0,0 +1,22 @@ +$rel-mockup-path: '../../images/assets/mockups' !default; + +.device-wrapper { + max-width: 300px; + width: 100%; +} + +.device { + position: relative; + background-size: cover; + + .screen { + position: absolute; + background-size: cover; + pointer-events: none; + } + + .button { + position: absolute; + cursor: pointer; + } +} From 870619516d814349e7ca7fe8680d29e996d89b5d Mon Sep 17 00:00:00 2001 From: Sam Thilmany Date: Mon, 13 Nov 2017 20:15:22 +0100 Subject: [PATCH 2/2] Changed the default path to point to the correct location --- dist/device-mockups.css | 178 ++++++++++++++++++------------------ dist/device-mockups.min.css | 2 +- src/scss/general.scss | 2 +- 3 files changed, 91 insertions(+), 91 deletions(-) diff --git a/dist/device-mockups.css b/dist/device-mockups.css index af24102..6d6e6d3 100644 --- a/dist/device-mockups.css +++ b/dist/device-mockups.css @@ -15,7 +15,7 @@ .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] { padding-bottom: 194.71789%; - background-image: url(../../images/assets/mockups/galaxyS3/portrait_black.png); } + background-image: url(../../device-mockups/galaxyS3/portrait_black.png); } .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .screen { top: 9.67941%; left: 6.60264%; @@ -29,7 +29,7 @@ .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] { padding-bottom: 194.71789%; - background-image: url(../../images/assets/mockups/galaxyS3/portrait_white.png); } + background-image: url(../../device-mockups/galaxyS3/portrait_white.png); } .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .screen { top: 9.67941%; left: 6.60264%; @@ -43,7 +43,7 @@ .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] { padding-bottom: 51.418%; - background-image: url(../../images/assets/mockups/galaxyS3/landscape_black.png); } + background-image: url(../../device-mockups/galaxyS3/landscape_black.png); } .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .screen { top: 7.07434%; left: 9.37115%; @@ -57,7 +57,7 @@ .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] { padding-bottom: 51.418%; - background-image: url(../../images/assets/mockups/galaxyS3/landscape_white.png); } + background-image: url(../../device-mockups/galaxyS3/landscape_white.png); } .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .screen { top: 7.07434%; left: 9.37115%; @@ -71,7 +71,7 @@ .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] { padding-bottom: 193.98374%; - background-image: url(../../images/assets/mockups/galaxyS5/portrait_black.png); } + background-image: url(../../device-mockups/galaxyS5/portrait_black.png); } .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .screen { top: 9.80721%; left: 6.09756%; @@ -85,7 +85,7 @@ .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] { padding-bottom: 193.98374%; - background-image: url(../../images/assets/mockups/galaxyS5/portrait_white.png); } + background-image: url(../../device-mockups/galaxyS5/portrait_white.png); } .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .screen { top: 9.80721%; left: 6.09756%; @@ -99,7 +99,7 @@ .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 193.98374%; - background-image: url(../../images/assets/mockups/galaxyS5/portrait_gold.png); } + background-image: url(../../device-mockups/galaxyS5/portrait_gold.png); } .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .screen { top: 9.80721%; left: 6.09756%; @@ -113,7 +113,7 @@ .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] { padding-bottom: 51.55071%; - background-image: url(../../images/assets/mockups/galaxyS5/landscape_black.png); } + background-image: url(../../device-mockups/galaxyS5/landscape_black.png); } .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .screen { top: 6.09756%; left: 9.80721%; @@ -127,7 +127,7 @@ .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] { padding-bottom: 51.55071%; - background-image: url(../../images/assets/mockups/galaxyS5/landscape_white.png); } + background-image: url(../../device-mockups/galaxyS5/landscape_white.png); } .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .screen { top: 6.09756%; left: 9.80721%; @@ -141,7 +141,7 @@ .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 51.55071%; - background-image: url(../../images/assets/mockups/galaxyS5/landscape_gold.png); } + background-image: url(../../device-mockups/galaxyS5/landscape_gold.png); } .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .screen { top: 6.09756%; left: 9.80721%; @@ -155,7 +155,7 @@ .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] { padding-bottom: 168.33616%; - background-image: url(../../images/assets/mockups/galaxyTab4/portrait_black.png); } + background-image: url(../../device-mockups/galaxyTab4/portrait_black.png); } .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .screen { top: 8.57287%; left: 5.68761%; @@ -170,7 +170,7 @@ .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] { padding-bottom: 168.33616%; - background-image: url(../../images/assets/mockups/galaxyTab4/portrait_white.png); } + background-image: url(../../device-mockups/galaxyTab4/portrait_white.png); } .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .screen { top: 8.52244%; left: 5.68761%; @@ -185,7 +185,7 @@ .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] { padding-bottom: 80.46663%; - background-image: url(../../images/assets/mockups/iMac/portrait_black.png); } + background-image: url(../../device-mockups/iMac/portrait_black.png); } .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen { top: 5.05732%; left: 4.06945%; @@ -200,7 +200,7 @@ .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] { padding-bottom: 129.56989%; - background-image: url(../../images/assets/mockups/iPad/portrait_black.png); } + background-image: url(../../device-mockups/iPad/portrait_black.png); } .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .screen { top: 9.12863%; left: 10.30466%; @@ -214,7 +214,7 @@ .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] { padding-bottom: 129.56989%; - background-image: url(../../images/assets/mockups/iPad/portrait_white.png); } + background-image: url(../../device-mockups/iPad/portrait_white.png); } .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .screen { top: 9.12863%; left: 10.48387%; @@ -228,7 +228,7 @@ .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] { padding-bottom: 77.04011%; - background-image: url(../../images/assets/mockups/iPad/landscape_black.png); } + background-image: url(../../device-mockups/iPad/landscape_black.png); } .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .screen { top: 10.23339%; left: 9.26694%; @@ -242,7 +242,7 @@ .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] { padding-bottom: 77.04011%; - background-image: url(../../images/assets/mockups/iPad/landscape_white.png); } + background-image: url(../../device-mockups/iPad/landscape_white.png); } .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .screen { top: 10.23339%; left: 9.26694%; @@ -256,7 +256,7 @@ .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] { padding-bottom: 141.39298%; - background-image: url(../../images/assets/mockups/iPadAir2/portrait_black.png); } + background-image: url(../../device-mockups/iPadAir2/portrait_black.png); } .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .screen { top: 9.09091%; left: 6.45527%; @@ -270,7 +270,7 @@ .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] { padding-bottom: 141.39298%; - background-image: url(../../images/assets/mockups/iPadAir2/portrait_white.png); } + background-image: url(../../device-mockups/iPadAir2/portrait_white.png); } .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .screen { top: 9.09091%; left: 6.45527%; @@ -284,7 +284,7 @@ .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 141.39298%; - background-image: url(../../images/assets/mockups/iPadAir2/portrait_gold.png); } + background-image: url(../../device-mockups/iPadAir2/portrait_gold.png); } .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .screen { top: 9.09091%; left: 6.45527%; @@ -298,7 +298,7 @@ .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] { padding-bottom: 70.72487%; - background-image: url(../../images/assets/mockups/iPadAir2/landscape_black.png); } + background-image: url(../../device-mockups/iPadAir2/landscape_black.png); } .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .screen { top: 6.56852%; left: 9.09091%; @@ -312,7 +312,7 @@ .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] { padding-bottom: 70.72487%; - background-image: url(../../images/assets/mockups/iPadAir2/landscape_white.png); } + background-image: url(../../device-mockups/iPadAir2/landscape_white.png); } .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .screen { top: 6.56852%; left: 9.09091%; @@ -326,7 +326,7 @@ .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 70.72487%; - background-image: url(../../images/assets/mockups/iPadAir2/landscape_gold.png); } + background-image: url(../../device-mockups/iPadAir2/landscape_gold.png); } .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .screen { top: 6.56852%; left: 9.09091%; @@ -340,7 +340,7 @@ .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] { padding-bottom: 138.62249%; - background-image: url(../../images/assets/mockups/iPadPro/portrait_black.png); } + background-image: url(../../device-mockups/iPadPro/portrait_black.png); } .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .screen { top: 7.04403%; left: 5.36181%; @@ -354,7 +354,7 @@ .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] { padding-bottom: 138.62249%; - background-image: url(../../images/assets/mockups/iPadPro/portrait_white.png); } + background-image: url(../../device-mockups/iPadPro/portrait_white.png); } .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .screen { top: 7.04403%; left: 5.36181%; @@ -368,7 +368,7 @@ .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 138.62249%; - background-image: url(../../images/assets/mockups/iPadPro/portrait_gold.png); } + background-image: url(../../device-mockups/iPadPro/portrait_gold.png); } .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .screen { top: 7.07547%; left: 5.36181%; @@ -382,7 +382,7 @@ .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] { padding-bottom: 72.13836%; - background-image: url(../../images/assets/mockups/iPadPro/landscape_black.png); } + background-image: url(../../device-mockups/iPadPro/landscape_black.png); } .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .screen { top: 5.40541%; left: 7.04403%; @@ -396,7 +396,7 @@ .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] { padding-bottom: 72.13836%; - background-image: url(../../images/assets/mockups/iPadPro/landscape_white.png); } + background-image: url(../../device-mockups/iPadPro/landscape_white.png); } .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .screen { top: 5.40541%; left: 7.04403%; @@ -410,7 +410,7 @@ .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 72.14712%; - background-image: url(../../images/assets/mockups/iPadPro/landscape_gold.png); } + background-image: url(../../device-mockups/iPadPro/landscape_gold.png); } .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .screen { top: 5.40305%; left: 7.07325%; @@ -424,7 +424,7 @@ .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] { padding-bottom: 207.62016%; - background-image: url(../../images/assets/mockups/iPhone6/portrait_black.png); } + background-image: url(../../device-mockups/iPhone6/portrait_black.png); } .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .screen { top: 12.25296%; left: 6.09613%; @@ -438,7 +438,7 @@ .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] { padding-bottom: 207.62016%; - background-image: url(../../images/assets/mockups/iPhone6/portrait_white.png); } + background-image: url(../../device-mockups/iPhone6/portrait_white.png); } .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .screen { top: 12.25296%; left: 6.09613%; @@ -452,7 +452,7 @@ .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 207.62016%; - background-image: url(../../images/assets/mockups/iPhone6/portrait_gold.png); } + background-image: url(../../device-mockups/iPhone6/portrait_gold.png); } .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .screen { top: 12.25296%; left: 6.09613%; @@ -466,7 +466,7 @@ .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] { padding-bottom: 48.16488%; - background-image: url(../../images/assets/mockups/iPhone6/landscape_black.png); } + background-image: url(../../device-mockups/iPhone6/landscape_black.png); } .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .screen { top: 5.86166%; left: 12.30943%; @@ -480,7 +480,7 @@ .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] { padding-bottom: 48.16488%; - background-image: url(../../images/assets/mockups/iPhone6/landscape_white.png); } + background-image: url(../../device-mockups/iPhone6/landscape_white.png); } .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .screen { top: 5.86166%; left: 12.30943%; @@ -494,7 +494,7 @@ .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 48.16488%; - background-image: url(../../images/assets/mockups/iPhone6/landscape_gold.png); } + background-image: url(../../device-mockups/iPhone6/landscape_gold.png); } .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .screen { top: 5.86166%; left: 12.30943%; @@ -508,7 +508,7 @@ .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] { padding-bottom: 201.45161%; - background-image: url(../../images/assets/mockups/iPhone6Plus/portrait_black.png); } + background-image: url(../../device-mockups/iPhone6Plus/portrait_black.png); } .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .screen { top: 11.48919%; left: 6.53226%; @@ -522,7 +522,7 @@ .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] { padding-bottom: 201.45161%; - background-image: url(../../images/assets/mockups/iPhone6Plus/portrait_white.png); } + background-image: url(../../device-mockups/iPhone6Plus/portrait_white.png); } .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .screen { top: 11.48919%; left: 6.53226%; @@ -536,7 +536,7 @@ .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 201.45161%; - background-image: url(../../images/assets/mockups/iPhone6Plus/portrait_gold.png); } + background-image: url(../../device-mockups/iPhone6Plus/portrait_gold.png); } .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .screen { top: 11.48919%; left: 6.53226%; @@ -550,7 +550,7 @@ .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] { padding-bottom: 49.63971%; - background-image: url(../../images/assets/mockups/iPhone6Plus/landscape_black.png); } + background-image: url(../../device-mockups/iPhone6Plus/landscape_black.png); } .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .screen { top: 6.37097%; left: 11.48919%; @@ -564,7 +564,7 @@ .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] { padding-bottom: 49.63971%; - background-image: url(../../images/assets/mockups/iPhone6Plus/landscape_white.png); } + background-image: url(../../device-mockups/iPhone6Plus/landscape_white.png); } .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .screen { top: 6.37097%; left: 11.48919%; @@ -578,7 +578,7 @@ .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 49.63971%; - background-image: url(../../images/assets/mockups/iPhone6Plus/landscape_gold.png); } + background-image: url(../../device-mockups/iPhone6Plus/landscape_gold.png); } .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .screen { top: 6.37097%; left: 11.48919%; @@ -592,7 +592,7 @@ .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] { padding-bottom: 209.82962%; - background-image: url(../../images/assets/mockups/iPhoneSE/portrait_black.png); } + background-image: url(../../device-mockups/iPhoneSE/portrait_black.png); } .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .screen { top: 14.80325%; left: 8.519%; @@ -606,7 +606,7 @@ .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] { padding-bottom: 209.82962%; - background-image: url(../../images/assets/mockups/iPhoneSE/portrait_white.png); } + background-image: url(../../device-mockups/iPhoneSE/portrait_white.png); } .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .screen { top: 14.80325%; left: 8.519%; @@ -620,7 +620,7 @@ .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 209.82962%; - background-image: url(../../images/assets/mockups/iPhoneSE/portrait_gold.png); } + background-image: url(../../device-mockups/iPhoneSE/portrait_gold.png); } .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .screen { top: 14.80325%; left: 8.519%; @@ -634,7 +634,7 @@ .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] { padding-bottom: 209.82962%; - background-image: url(../../images/assets/mockups/iPhoneSE/portrait_pink.png); } + background-image: url(../../device-mockups/iPhoneSE/portrait_pink.png); } .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .screen { top: 14.80325%; left: 8.519%; @@ -648,7 +648,7 @@ .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] { padding-bottom: 47.65771%; - background-image: url(../../images/assets/mockups/iPhoneSE/landscape_black.png); } + background-image: url(../../device-mockups/iPhoneSE/landscape_black.png); } .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .screen { top: 7.60157%; left: 14.80325%; @@ -662,7 +662,7 @@ .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] { padding-bottom: 47.65771%; - background-image: url(../../images/assets/mockups/iPhoneSE/landscape_white.png); } + background-image: url(../../device-mockups/iPhoneSE/landscape_white.png); } .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .screen { top: 7.60157%; left: 14.80325%; @@ -676,7 +676,7 @@ .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 47.65771%; - background-image: url(../../images/assets/mockups/iPhoneSE/landscape_gold.png); } + background-image: url(../../device-mockups/iPhoneSE/landscape_gold.png); } .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .screen { top: 7.60157%; left: 14.80325%; @@ -690,7 +690,7 @@ .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] { padding-bottom: 47.65771%; - background-image: url(../../images/assets/mockups/iPhoneSE/landscape_pink.png); } + background-image: url(../../device-mockups/iPhoneSE/landscape_pink.png); } .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .screen { top: 7.60157%; left: 14.80325%; @@ -704,7 +704,7 @@ .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] { padding-bottom: 209.46124%; - background-image: url(../../images/assets/mockups/iPhone5/portrait_black.png); } + background-image: url(../../device-mockups/iPhone5/portrait_black.png); } .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .screen { top: 14.80552%; left: 8.27858%; @@ -718,7 +718,7 @@ .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] { padding-bottom: 209.46124%; - background-image: url(../../images/assets/mockups/iPhone5/portrait_white.png); } + background-image: url(../../device-mockups/iPhone5/portrait_white.png); } .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .screen { top: 14.80552%; left: 8.27858%; @@ -732,7 +732,7 @@ .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] { padding-bottom: 47.74153%; - background-image: url(../../images/assets/mockups/iPhone5/landscape_black.png); } + background-image: url(../../device-mockups/iPhone5/landscape_black.png); } .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .screen { top: 7.49014%; left: 14.80552%; @@ -746,7 +746,7 @@ .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] { padding-bottom: 47.74153%; - background-image: url(../../images/assets/mockups/iPhone5/landscape_white.png); } + background-image: url(../../device-mockups/iPhone5/landscape_white.png); } .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .screen { top: 7.49014%; left: 14.80552%; @@ -760,7 +760,7 @@ .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] { padding-bottom: 192.31288%; - background-image: url(../../images/assets/mockups/Lumia930/portrait_black.png); } + background-image: url(../../device-mockups/Lumia930/portrait_black.png); } .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .screen { top: 7.11781%; left: 5.52933%; @@ -775,7 +775,7 @@ .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] { padding-bottom: 192.31288%; - background-image: url(../../images/assets/mockups/Lumia930/portrait_white.png); } + background-image: url(../../device-mockups/Lumia930/portrait_white.png); } .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .screen { top: 7.11781%; left: 5.52933%; @@ -790,7 +790,7 @@ .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] { padding-bottom: 51.9986%; - background-image: url(../../images/assets/mockups/Lumia930/landscape_black.png); } + background-image: url(../../device-mockups/Lumia930/landscape_black.png); } .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .screen { top: 6.60823%; left: 7.11781%; @@ -805,7 +805,7 @@ .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] { padding-bottom: 51.9986%; - background-image: url(../../images/assets/mockups/Lumia930/landscape_white.png); } + background-image: url(../../device-mockups/Lumia930/landscape_white.png); } .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .screen { top: 6.60823%; left: 7.11781%; @@ -820,7 +820,7 @@ .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] { padding-bottom: 57.51566%; - background-image: url(../../images/assets/mockups/Macbook/portrait_black.png); } + background-image: url(../../device-mockups/Macbook/portrait_black.png); } .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .screen { top: 7.25953%; left: 12.36952%; @@ -835,7 +835,7 @@ .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] { padding-bottom: 57.51566%; - background-image: url(../../images/assets/mockups/Macbook/portrait_white.png); } + background-image: url(../../device-mockups/Macbook/portrait_white.png); } .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .screen { top: 7.25953%; left: 12.36952%; @@ -850,7 +850,7 @@ .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 57.51566%; - background-image: url(../../images/assets/mockups/Macbook/portrait_gold.png); } + background-image: url(../../device-mockups/Macbook/portrait_gold.png); } .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .screen { top: 7.25953%; left: 12.36952%; @@ -865,7 +865,7 @@ .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] { padding-bottom: 57.51566%; - background-image: url(../../images/assets/mockups/Macbook2015/portrait_black.png); } + background-image: url(../../device-mockups/Macbook2015/portrait_black.png); } .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .screen { top: 7.35027%; left: 12.42171%; @@ -880,7 +880,7 @@ .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] { padding-bottom: 57.51566%; - background-image: url(../../images/assets/mockups/Macbook2015/portrait_white.png); } + background-image: url(../../device-mockups/Macbook2015/portrait_white.png); } .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .screen { top: 7.35027%; left: 12.42171%; @@ -895,7 +895,7 @@ .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 57.51566%; - background-image: url(../../images/assets/mockups/Macbook2015/portrait_gold.png); } + background-image: url(../../device-mockups/Macbook2015/portrait_gold.png); } .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .screen { top: 7.35027%; left: 12.42171%; @@ -910,7 +910,7 @@ .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] { padding-bottom: 57.94702%; - background-image: url(../../images/assets/mockups/MacbookPro/portrait_black.png); } + background-image: url(../../device-mockups/MacbookPro/portrait_black.png); } .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen { top: 6.71429%; left: 11.83775%; @@ -925,7 +925,7 @@ .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] { padding-bottom: 64.67803%; - background-image: url(../../images/assets/mockups/SamsungTV/portrait_black.png); } + background-image: url(../../device-mockups/SamsungTV/portrait_black.png); } .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .screen { top: 2.19619%; left: 1.32576%; @@ -940,7 +940,7 @@ .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] { padding-bottom: 62.38125%; - background-image: url(../../images/assets/mockups/Surface/portrait_black.png); } + background-image: url(../../device-mockups/Surface/portrait_black.png); } .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .screen { top: 11.06599%; left: 6.77644%; @@ -954,7 +954,7 @@ .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] { padding-bottom: 89.11784%; - background-image: url(../../images/assets/mockups/iPhone6Hand/portrait_black.png); } + background-image: url(../../device-mockups/iPhone6Hand/portrait_black.png); } .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .screen { top: 10.83815%; left: 10.94656%; @@ -968,7 +968,7 @@ .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] { padding-bottom: 89.11784%; - background-image: url(../../images/assets/mockups/iPhone6Hand/portrait_white.png); } + background-image: url(../../device-mockups/iPhone6Hand/portrait_white.png); } .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .screen { top: 10.83815%; left: 11.07534%; @@ -982,7 +982,7 @@ .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] { padding-bottom: 158.39243%; - background-image: url(../../images/assets/mockups/iPhone7Hand/portrait_black.png); } + background-image: url(../../device-mockups/iPhone7Hand/portrait_black.png); } .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .screen { top: 7.83582%; left: 41.25296%; @@ -996,7 +996,7 @@ .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] { padding-bottom: 158.39243%; - background-image: url(../../images/assets/mockups/iPhone7Hand_2/portrait_black.png); } + background-image: url(../../device-mockups/iPhone7Hand_2/portrait_black.png); } .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .screen { top: 7.83582%; left: 41.25296%; @@ -1010,7 +1010,7 @@ .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] { padding-bottom: 58.97364%; - background-image: url(../../images/assets/mockups/Chromebook/portrait_black.png); } + background-image: url(../../device-mockups/Chromebook/portrait_black.png); } .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .screen { top: 7.89349%; left: 12.73135%; @@ -1025,7 +1025,7 @@ .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] { padding-bottom: 209.0625%; - background-image: url(../../images/assets/mockups/HtcOneM8/portrait_black.png); } + background-image: url(../../device-mockups/HtcOneM8/portrait_black.png); } .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .screen { top: 10.76233%; left: 5.3125%; @@ -1040,7 +1040,7 @@ .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] { padding-bottom: 47.83259%; - background-image: url(../../images/assets/mockups/HtcOneM8/landscape_black.png); } + background-image: url(../../device-mockups/HtcOneM8/landscape_black.png); } .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .screen { top: 5.625%; left: 10.76233%; @@ -1055,7 +1055,7 @@ .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 209.74084%; - background-image: url(../../images/assets/mockups/HuaweiP8/portrait_gold.png); } + background-image: url(../../device-mockups/HuaweiP8/portrait_gold.png); } .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .screen { top: 9.11802%; left: 1.69794%; @@ -1070,7 +1070,7 @@ .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 47.67789%; - background-image: url(../../images/assets/mockups/HuaweiP8/landscape_gold.png); } + background-image: url(../../device-mockups/HuaweiP8/landscape_gold.png); } .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .screen { top: 2.41287%; left: 9.11802%; @@ -1085,7 +1085,7 @@ .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] { padding-bottom: 68.15797%; - background-image: url(../../images/assets/mockups/SurfacePro3/landscape_black.png); } + background-image: url(../../device-mockups/SurfacePro3/landscape_black.png); } .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .screen { top: 7.09076%; left: 5.82712%; @@ -1100,7 +1100,7 @@ .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] { padding-bottom: 86.48036%; - background-image: url(../../images/assets/mockups/SurfaceStudio/portrait_black.png); } + background-image: url(../../device-mockups/SurfaceStudio/portrait_black.png); } .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .screen { top: 3.75546%; left: 3.22256%; @@ -1115,7 +1115,7 @@ .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] { padding-bottom: 203.10345%; - background-image: url(../../images/assets/mockups/iPhone7/portrait_black.png); } + background-image: url(../../device-mockups/iPhone7/portrait_black.png); } .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .screen { top: 11.99774%; left: 6.2069%; @@ -1129,7 +1129,7 @@ .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] { padding-bottom: 203.10345%; - background-image: url(../../images/assets/mockups/iPhone7/portrait_white.png); } + background-image: url(../../device-mockups/iPhone7/portrait_white.png); } .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .screen { top: 11.99774%; left: 6.2069%; @@ -1143,7 +1143,7 @@ .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] { padding-bottom: 203.10345%; - background-image: url(../../images/assets/mockups/iPhone7/portrait_gold.png); } + background-image: url(../../device-mockups/iPhone7/portrait_gold.png); } .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .screen { top: 11.99774%; left: 6.2069%; @@ -1157,7 +1157,7 @@ .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] { padding-bottom: 203.10345%; - background-image: url(../../images/assets/mockups/iPhone7/portrait_pink.png); } + background-image: url(../../device-mockups/iPhone7/portrait_pink.png); } .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .screen { top: 11.99774%; left: 6.2069%; @@ -1171,7 +1171,7 @@ .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] { padding-bottom: 201.91083%; - background-image: url(../../images/assets/mockups/iPhone7/portrait_red.png); } + background-image: url(../../device-mockups/iPhone7/portrait_red.png); } .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .screen { top: 11.98738%; left: 6.6879%; @@ -1185,7 +1185,7 @@ .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] { padding-bottom: 49.23599%; - background-image: url(../../images/assets/mockups/iPhone7/landscape_black.png); } + background-image: url(../../device-mockups/iPhone7/landscape_black.png); } .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .screen { top: 6.43678%; left: 11.99774%; @@ -1199,7 +1199,7 @@ .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] { padding-bottom: 49.23599%; - background-image: url(../../images/assets/mockups/iPhone7/landscape_white.png); } + background-image: url(../../device-mockups/iPhone7/landscape_white.png); } .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .screen { top: 6.43678%; left: 11.99774%; @@ -1213,7 +1213,7 @@ .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] { padding-bottom: 49.23599%; - background-image: url(../../images/assets/mockups/iPhone7/landscape_gold.png); } + background-image: url(../../device-mockups/iPhone7/landscape_gold.png); } .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .screen { top: 6.43678%; left: 11.99774%; @@ -1227,7 +1227,7 @@ .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] { padding-bottom: 49.23599%; - background-image: url(../../images/assets/mockups/iPhone7/landscape_pink.png); } + background-image: url(../../device-mockups/iPhone7/landscape_pink.png); } .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .screen { top: 6.43678%; left: 11.99774%; @@ -1241,7 +1241,7 @@ .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] { padding-bottom: 49.52681%; - background-image: url(../../images/assets/mockups/iPhone7/landscape_red.png); } + background-image: url(../../device-mockups/iPhone7/landscape_red.png); } .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .screen { top: 8.59873%; left: 11.98738%; @@ -1255,7 +1255,7 @@ .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] { padding-bottom: 202.62009%; - background-image: url(../../images/assets/mockups/Pixel/portrait_white.png); } + background-image: url(../../device-mockups/Pixel/portrait_white.png); } .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .screen { top: 9.69828%; left: 4.36681%; @@ -1269,7 +1269,7 @@ .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] { padding-bottom: 202.62009%; - background-image: url(../../images/assets/mockups/Pixel/portrait_black.png); } + background-image: url(../../device-mockups/Pixel/portrait_black.png); } .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .screen { top: 9.69828%; left: 4.36681%; diff --git a/dist/device-mockups.min.css b/dist/device-mockups.min.css index a687b51..b4cf856 100644 --- a/dist/device-mockups.min.css +++ b/dist/device-mockups.min.css @@ -1 +1 @@ -.device-wrapper{max-width:300px;width:100%}.device{position:relative;background-size:cover}.device .screen{position:absolute;background-size:cover;pointer-events:none}.device .button{position:absolute;cursor:pointer}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"]{padding-bottom:194.71789%;background-image:url(../../images/assets/mockups/galaxyS3/portrait_black.png)}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .screen{top:9.67941%;left:6.60264%;width:86.31453%;height:78.91492%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .button{top:93.1566%;left:38.65546%;width:22.56903%;height:3.26757%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"]{padding-bottom:194.71789%;background-image:url(../../images/assets/mockups/galaxyS3/portrait_white.png)}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .screen{top:9.67941%;left:6.60264%;width:86.31453%;height:78.91492%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .button{top:93.1566%;left:38.65546%;width:22.56903%;height:3.26757%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.418%;background-image:url(../../images/assets/mockups/galaxyS3/landscape_black.png)}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .screen{top:7.07434%;left:9.37115%;width:78.91492%;height:86.33094%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .button{top:38.84892%;left:93.34155%;width:3.39088%;height:22.54197%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.418%;background-image:url(../../images/assets/mockups/galaxyS3/landscape_white.png)}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .screen{top:7.07434%;left:9.37115%;width:78.91492%;height:86.33094%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .button{top:38.84892%;left:93.34155%;width:3.39088%;height:22.54197%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"]{padding-bottom:193.98374%;background-image:url(../../images/assets/mockups/galaxyS5/portrait_black.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"]{padding-bottom:193.98374%;background-image:url(../../images/assets/mockups/galaxyS5/portrait_white.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"]{padding-bottom:193.98374%;background-image:url(../../images/assets/mockups/galaxyS5/portrait_gold.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.55071%;background-image:url(../../images/assets/mockups/galaxyS5/landscape_black.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.55071%;background-image:url(../../images/assets/mockups/galaxyS5/landscape_white.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"]{padding-bottom:51.55071%;background-image:url(../../images/assets/mockups/galaxyS5/landscape_gold.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"]{padding-bottom:168.33616%;background-image:url(../../images/assets/mockups/galaxyTab4/portrait_black.png)}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .screen{top:8.57287%;left:5.68761%;width:87.94567%;height:83.00555%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"]{padding-bottom:168.33616%;background-image:url(../../images/assets/mockups/galaxyTab4/portrait_white.png)}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .screen{top:8.52244%;left:5.68761%;width:87.94567%;height:83.05598%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"]{padding-bottom:80.46663%;background-image:url(../../images/assets/mockups/iMac/portrait_black.png)}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen{top:5.05732%;left:4.06945%;width:91.8611%;height:64.1942%}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"]{padding-bottom:129.56989%;background-image:url(../../images/assets/mockups/iPad/portrait_black.png)}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .screen{top:9.12863%;left:10.30466%;width:79.21147%;height:81.39696%}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .button{top:93.15353%;left:47.13262%;width:6.00358%;height:4.49516%}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"]{padding-bottom:129.56989%;background-image:url(../../images/assets/mockups/iPad/portrait_white.png)}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .screen{top:9.12863%;left:10.48387%;width:79.30108%;height:81.39696%}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .button{top:93.15353%;left:47.13262%;width:6.00358%;height:4.49516%}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"]{padding-bottom:77.04011%;background-image:url(../../images/assets/mockups/iPad/landscape_black.png)}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .screen{top:10.23339%;left:9.26694%;width:81.3278%;height:79.44345%}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .button{top:46.7684%;left:93.22268%;width:4.426%;height:6.01436%}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"]{padding-bottom:77.04011%;background-image:url(../../images/assets/mockups/iPad/landscape_white.png)}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .screen{top:10.23339%;left:9.26694%;width:81.3278%;height:79.44345%}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .button{top:46.7684%;left:93.22268%;width:4.426%;height:6.01436%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"]{padding-bottom:141.39298%;background-image:url(../../images/assets/mockups/iPadAir2/portrait_black.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"]{padding-bottom:141.39298%;background-image:url(../../images/assets/mockups/iPadAir2/portrait_white.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"]{padding-bottom:141.39298%;background-image:url(../../images/assets/mockups/iPadAir2/portrait_gold.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"]{padding-bottom:70.72487%;background-image:url(../../images/assets/mockups/iPadAir2/landscape_black.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"]{padding-bottom:70.72487%;background-image:url(../../images/assets/mockups/iPadAir2/landscape_white.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"]{padding-bottom:70.72487%;background-image:url(../../images/assets/mockups/iPadAir2/landscape_gold.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"]{padding-bottom:138.62249%;background-image:url(../../images/assets/mockups/iPadPro/portrait_black.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .screen{top:7.04403%;left:5.36181%;width:89.23278%;height:85.91195%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"]{padding-bottom:138.62249%;background-image:url(../../images/assets/mockups/iPadPro/portrait_white.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .screen{top:7.04403%;left:5.36181%;width:89.23278%;height:85.91195%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"]{padding-bottom:138.62249%;background-image:url(../../images/assets/mockups/iPadPro/portrait_gold.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .screen{top:7.07547%;left:5.36181%;width:89.23278%;height:85.8805%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"]{padding-bottom:72.13836%;background-image:url(../../images/assets/mockups/iPadPro/landscape_black.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .screen{top:5.40541%;left:7.04403%;width:85.91195%;height:89.23278%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .button{top:47.55885%;left:94.93711%;width:3.52201%;height:4.83871%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"]{padding-bottom:72.13836%;background-image:url(../../images/assets/mockups/iPadPro/landscape_white.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .screen{top:5.40541%;left:7.04403%;width:85.91195%;height:89.23278%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .button{top:47.55885%;left:94.93711%;width:3.52201%;height:4.83871%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"]{padding-bottom:72.14712%;background-image:url(../../images/assets/mockups/iPadPro/landscape_gold.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .screen{top:5.40305%;left:7.07325%;width:85.88494%;height:89.23747%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .button{top:47.53813%;left:94.90726%;width:3.55234%;height:4.88017%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"]{padding-bottom:207.62016%;background-image:url(../../images/assets/mockups/iPhone6/portrait_black.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"]{padding-bottom:207.62016%;background-image:url(../../images/assets/mockups/iPhone6/portrait_white.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"]{padding-bottom:207.62016%;background-image:url(../../images/assets/mockups/iPhone6/portrait_gold.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"]{padding-bottom:48.16488%;background-image:url(../../images/assets/mockups/iPhone6/landscape_black.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"]{padding-bottom:48.16488%;background-image:url(../../images/assets/mockups/iPhone6/landscape_white.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"]{padding-bottom:48.16488%;background-image:url(../../images/assets/mockups/iPhone6/landscape_gold.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"]{padding-bottom:201.45161%;background-image:url(../../images/assets/mockups/iPhone6Plus/portrait_black.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"]{padding-bottom:201.45161%;background-image:url(../../images/assets/mockups/iPhone6Plus/portrait_white.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"]{padding-bottom:201.45161%;background-image:url(../../images/assets/mockups/iPhone6Plus/portrait_gold.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"]{padding-bottom:49.63971%;background-image:url(../../images/assets/mockups/iPhone6Plus/landscape_black.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"]{padding-bottom:49.63971%;background-image:url(../../images/assets/mockups/iPhone6Plus/landscape_white.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"]{padding-bottom:49.63971%;background-image:url(../../images/assets/mockups/iPhone6Plus/landscape_gold.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_black.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_white.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_gold.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"]{padding-bottom:209.82962%;background-image:url(../../images/assets/mockups/iPhoneSE/portrait_pink.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_black.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_white.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_gold.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"]{padding-bottom:47.65771%;background-image:url(../../images/assets/mockups/iPhoneSE/landscape_pink.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.46124%;background-image:url(../../images/assets/mockups/iPhone5/portrait_black.png)}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .screen{top:14.80552%;left:8.27858%;width:84.23127%;height:71.26725%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .button{top:88.51945%;left:41.52431%;width:18.00263%;height:8.59473%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"]{padding-bottom:209.46124%;background-image:url(../../images/assets/mockups/iPhone5/portrait_white.png)}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .screen{top:14.80552%;left:8.27858%;width:84.23127%;height:71.26725%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .button{top:88.51945%;left:41.52431%;width:18.00263%;height:8.59473%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.74153%;background-image:url(../../images/assets/mockups/iPhone5/landscape_black.png)}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .screen{top:7.49014%;left:14.80552%;width:71.26725%;height:84.23127%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .button{top:40.47306%;left:88.51945%;width:8.59473%;height:18.00263%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"]{padding-bottom:47.74153%;background-image:url(../../images/assets/mockups/iPhone5/landscape_white.png)}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .screen{top:7.49014%;left:14.80552%;width:71.26725%;height:84.23127%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .button{top:40.47306%;left:88.51945%;width:8.59473%;height:18.00263%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"]{padding-bottom:192.31288%;background-image:url(../../images/assets/mockups/Lumia930/portrait_black.png)}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .screen{top:7.11781%;left:5.52933%;width:87.86244%;height:81.13604%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"]{padding-bottom:192.31288%;background-image:url(../../images/assets/mockups/Lumia930/portrait_white.png)}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .screen{top:7.11781%;left:5.52933%;width:87.86244%;height:81.13604%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.9986%;background-image:url(../../images/assets/mockups/Lumia930/landscape_black.png)}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .screen{top:6.60823%;left:7.11781%;width:81.13604%;height:87.86244%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.9986%;background-image:url(../../images/assets/mockups/Lumia930/landscape_white.png)}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .screen{top:6.60823%;left:7.11781%;width:81.13604%;height:87.86244%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook/portrait_black.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook/portrait_white.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook/portrait_gold.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook2015/portrait_black.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook2015/portrait_white.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"]{padding-bottom:57.51566%;background-image:url(../../images/assets/mockups/Macbook2015/portrait_gold.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.94702%;background-image:url(../../images/assets/mockups/MacbookPro/portrait_black.png)}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen{top:6.71429%;left:11.83775%;width:76.40728%;height:82.42857%}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"]{padding-bottom:64.67803%;background-image:url(../../images/assets/mockups/SamsungTV/portrait_black.png)}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .screen{top:2.19619%;left:1.32576%;width:97.25379%;height:85.2123%}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"]{padding-bottom:62.38125%;background-image:url(../../images/assets/mockups/Surface/portrait_black.png)}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .screen{top:11.06599%;left:6.77644%;width:86.38379%;height:77.7665%}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .button{top:92.18274%;left:48.8917%;width:2.34326%;height:3.65482%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"]{padding-bottom:89.11784%;background-image:url(../../images/assets/mockups/iPhone6Hand/portrait_black.png)}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .screen{top:10.83815%;left:10.94656%;width:33.67675%;height:67.26879%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .button{top:79.69653%;left:24.79073%;width:5.98841%;height:6.79191%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"]{padding-bottom:89.11784%;background-image:url(../../images/assets/mockups/iPhone6Hand/portrait_white.png)}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .screen{top:10.83815%;left:11.07534%;width:33.54797%;height:67.26879%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .button{top:79.69653%;left:24.79073%;width:5.98841%;height:6.79191%}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"]{padding-bottom:158.39243%;background-image:url(../../images/assets/mockups/iPhone7Hand/portrait_black.png)}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .screen{top:7.83582%;left:41.25296%;width:42.19858%;height:47.23881%}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .button{top:56.19403%;left:58.39243%;width:7.80142%;height:4.92537%}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"]{padding-bottom:158.39243%;background-image:url(../../images/assets/mockups/iPhone7Hand_2/portrait_black.png)}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .screen{top:7.83582%;left:41.25296%;width:42.19858%;height:47.23881%}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .button{top:56.19403%;left:58.39243%;width:7.80142%;height:4.92537%}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"]{padding-bottom:58.97364%;background-image:url(../../images/assets/mockups/Chromebook/portrait_black.png)}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .screen{top:7.89349%;left:12.73135%;width:74.1447%;height:71.27913%}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.0625%;background-image:url(../../images/assets/mockups/HtcOneM8/portrait_black.png)}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .screen{top:10.76233%;left:5.3125%;width:89.0625%;height:75.63528%}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.83259%;background-image:url(../../images/assets/mockups/HtcOneM8/landscape_black.png)}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .screen{top:5.625%;left:10.76233%;width:75.63528%;height:89.0625%}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"]{padding-bottom:209.74084%;background-image:url(../../images/assets/mockups/HuaweiP8/portrait_gold.png)}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .screen{top:9.11802%;left:1.69794%;width:95.88919%;height:81.80656%}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"]{padding-bottom:47.67789%;background-image:url(../../images/assets/mockups/HuaweiP8/landscape_gold.png)}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .screen{top:2.41287%;left:9.11802%;width:81.80656%;height:95.88919%}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"]{padding-bottom:68.15797%;background-image:url(../../images/assets/mockups/SurfacePro3/landscape_black.png)}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .screen{top:7.09076%;left:5.82712%;width:88.34576%;height:86.42626%}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"]{padding-bottom:86.48036%;background-image:url(../../images/assets/mockups/SurfaceStudio/portrait_black.png)}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .screen{top:3.75546%;left:3.22256%;width:93.52971%;height:72.40175%}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_black.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_white.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_gold.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"]{padding-bottom:203.10345%;background-image:url(../../images/assets/mockups/iPhone7/portrait_pink.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"]{padding-bottom:201.91083%;background-image:url(../../images/assets/mockups/iPhone7/portrait_red.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .screen{top:11.98738%;left:6.6879%;width:84.71338%;height:75.55205%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .button{top:89.74763%;left:42.35669%;width:15.6051%;height:7.72871%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_black.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_white.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_gold.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"]{padding-bottom:49.23599%;background-image:url(../../images/assets/mockups/iPhone7/landscape_pink.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"]{padding-bottom:49.52681%;background-image:url(../../images/assets/mockups/iPhone7/landscape_red.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .screen{top:8.59873%;left:11.98738%;width:75.55205%;height:84.71338%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .button{top:42.03822%;left:89.74763%;width:7.72871%;height:15.6051%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"]{padding-bottom:202.62009%;background-image:url(../../images/assets/mockups/Pixel/portrait_white.png)}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .screen{top:9.69828%;left:4.36681%;width:90.39301%;height:78.66379%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .button{top:90.51724%;left:44.97817%;width:11.35371%;height:4.31034%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"]{padding-bottom:202.62009%;background-image:url(../../images/assets/mockups/Pixel/portrait_black.png)}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .screen{top:9.69828%;left:4.36681%;width:90.39301%;height:78.66379%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .button{top:90.51724%;left:44.97817%;width:11.35371%;height:4.31034%} +.device-wrapper{max-width:300px;width:100%}.device{position:relative;background-size:cover}.device .screen{position:absolute;background-size:cover;pointer-events:none}.device .button{position:absolute;cursor:pointer}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"]{padding-bottom:194.71789%;background-image:url(../../device-mockups/galaxyS3/portrait_black.png)}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .screen{top:9.67941%;left:6.60264%;width:86.31453%;height:78.91492%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .button{top:93.1566%;left:38.65546%;width:22.56903%;height:3.26757%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"]{padding-bottom:194.71789%;background-image:url(../../device-mockups/galaxyS3/portrait_white.png)}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .screen{top:9.67941%;left:6.60264%;width:86.31453%;height:78.91492%}.device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .button{top:93.1566%;left:38.65546%;width:22.56903%;height:3.26757%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.418%;background-image:url(../../device-mockups/galaxyS3/landscape_black.png)}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .screen{top:7.07434%;left:9.37115%;width:78.91492%;height:86.33094%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .button{top:38.84892%;left:93.34155%;width:3.39088%;height:22.54197%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.418%;background-image:url(../../device-mockups/galaxyS3/landscape_white.png)}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .screen{top:7.07434%;left:9.37115%;width:78.91492%;height:86.33094%}.device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .button{top:38.84892%;left:93.34155%;width:3.39088%;height:22.54197%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"]{padding-bottom:193.98374%;background-image:url(../../device-mockups/galaxyS5/portrait_black.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"]{padding-bottom:193.98374%;background-image:url(../../device-mockups/galaxyS5/portrait_white.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"]{padding-bottom:193.98374%;background-image:url(../../device-mockups/galaxyS5/portrait_gold.png)}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .screen{top:9.80721%;left:6.09756%;width:87.80488%;height:80.4694%}.device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .button{top:92.62364%;left:38.94309%;width:22.52033%;height:3.73009%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.55071%;background-image:url(../../device-mockups/galaxyS5/landscape_black.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.55071%;background-image:url(../../device-mockups/galaxyS5/landscape_white.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"]{padding-bottom:51.55071%;background-image:url(../../device-mockups/galaxyS5/landscape_gold.png)}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .screen{top:6.09756%;left:9.80721%;width:80.4694%;height:87.80488%}.device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .button{top:38.53659%;left:92.62364%;width:3.73009%;height:22.52033%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"]{padding-bottom:168.33616%;background-image:url(../../device-mockups/galaxyTab4/portrait_black.png)}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .screen{top:8.57287%;left:5.68761%;width:87.94567%;height:83.00555%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"]{padding-bottom:168.33616%;background-image:url(../../device-mockups/galaxyTab4/portrait_white.png)}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .screen{top:8.52244%;left:5.68761%;width:87.94567%;height:83.05598%}.device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"]{padding-bottom:80.46663%;background-image:url(../../device-mockups/iMac/portrait_black.png)}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen{top:5.05732%;left:4.06945%;width:91.8611%;height:64.1942%}.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"]{padding-bottom:129.56989%;background-image:url(../../device-mockups/iPad/portrait_black.png)}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .screen{top:9.12863%;left:10.30466%;width:79.21147%;height:81.39696%}.device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .button{top:93.15353%;left:47.13262%;width:6.00358%;height:4.49516%}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"]{padding-bottom:129.56989%;background-image:url(../../device-mockups/iPad/portrait_white.png)}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .screen{top:9.12863%;left:10.48387%;width:79.30108%;height:81.39696%}.device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .button{top:93.15353%;left:47.13262%;width:6.00358%;height:4.49516%}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"]{padding-bottom:77.04011%;background-image:url(../../device-mockups/iPad/landscape_black.png)}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .screen{top:10.23339%;left:9.26694%;width:81.3278%;height:79.44345%}.device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .button{top:46.7684%;left:93.22268%;width:4.426%;height:6.01436%}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"]{padding-bottom:77.04011%;background-image:url(../../device-mockups/iPad/landscape_white.png)}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .screen{top:10.23339%;left:9.26694%;width:81.3278%;height:79.44345%}.device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .button{top:46.7684%;left:93.22268%;width:4.426%;height:6.01436%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"]{padding-bottom:141.39298%;background-image:url(../../device-mockups/iPadAir2/portrait_black.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"]{padding-bottom:141.39298%;background-image:url(../../device-mockups/iPadAir2/portrait_white.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"]{padding-bottom:141.39298%;background-image:url(../../device-mockups/iPadAir2/portrait_gold.png)}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .screen{top:9.09091%;left:6.45527%;width:86.97622%;height:82.01842%}.device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .button{top:93.55226%;left:46.82899%;width:6.28539%;height:4.44533%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"]{padding-bottom:70.72487%;background-image:url(../../device-mockups/iPadAir2/landscape_black.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"]{padding-bottom:70.72487%;background-image:url(../../device-mockups/iPadAir2/landscape_white.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"]{padding-bottom:70.72487%;background-image:url(../../device-mockups/iPadAir2/landscape_gold.png)}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .screen{top:6.56852%;left:9.09091%;width:82.01842%;height:86.97622%}.device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .button{top:46.88562%;left:93.55226%;width:4.44533%;height:6.28539%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"]{padding-bottom:138.62249%;background-image:url(../../device-mockups/iPadPro/portrait_black.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .screen{top:7.04403%;left:5.36181%;width:89.23278%;height:85.91195%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"]{padding-bottom:138.62249%;background-image:url(../../device-mockups/iPadPro/portrait_white.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .screen{top:7.04403%;left:5.36181%;width:89.23278%;height:85.91195%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"]{padding-bottom:138.62249%;background-image:url(../../device-mockups/iPadPro/portrait_gold.png)}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .screen{top:7.07547%;left:5.36181%;width:89.23278%;height:85.8805%}.device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .button{top:94.93711%;left:47.60244%;width:4.83871%;height:3.52201%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"]{padding-bottom:72.13836%;background-image:url(../../device-mockups/iPadPro/landscape_black.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .screen{top:5.40541%;left:7.04403%;width:85.91195%;height:89.23278%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .button{top:47.55885%;left:94.93711%;width:3.52201%;height:4.83871%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"]{padding-bottom:72.13836%;background-image:url(../../device-mockups/iPadPro/landscape_white.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .screen{top:5.40541%;left:7.04403%;width:85.91195%;height:89.23278%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .button{top:47.55885%;left:94.93711%;width:3.52201%;height:4.83871%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"]{padding-bottom:72.14712%;background-image:url(../../device-mockups/iPadPro/landscape_gold.png)}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .screen{top:5.40305%;left:7.07325%;width:85.88494%;height:89.23747%}.device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .button{top:47.53813%;left:94.90726%;width:3.55234%;height:4.88017%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"]{padding-bottom:207.62016%;background-image:url(../../device-mockups/iPhone6/portrait_black.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"]{padding-bottom:207.62016%;background-image:url(../../device-mockups/iPhone6/portrait_white.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"]{padding-bottom:207.62016%;background-image:url(../../device-mockups/iPhone6/portrait_gold.png)}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .screen{top:12.25296%;left:6.09613%;width:88.0422%;height:75.32468%}.device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .button{top:89.32806%;left:41.85229%;width:16.64713%;height:8.01807%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"]{padding-bottom:48.16488%;background-image:url(../../device-mockups/iPhone6/landscape_black.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"]{padding-bottom:48.16488%;background-image:url(../../device-mockups/iPhone6/landscape_white.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"]{padding-bottom:48.16488%;background-image:url(../../device-mockups/iPhone6/landscape_gold.png)}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .screen{top:5.86166%;left:12.30943%;width:75.26821%;height:87.92497%}.device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .button{top:41.50059%;left:89.32806%;width:8.01807%;height:16.64713%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"]{padding-bottom:201.45161%;background-image:url(../../device-mockups/iPhone6Plus/portrait_black.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"]{padding-bottom:201.45161%;background-image:url(../../device-mockups/iPhone6Plus/portrait_white.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"]{padding-bottom:201.45161%;background-image:url(../../device-mockups/iPhone6Plus/portrait_gold.png)}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .screen{top:11.48919%;left:6.53226%;width:87.09677%;height:76.86149%}.device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .button{top:90.43235%;left:43.30645%;width:13.3871%;height:6.64532%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"]{padding-bottom:49.63971%;background-image:url(../../device-mockups/iPhone6Plus/landscape_black.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"]{padding-bottom:49.63971%;background-image:url(../../device-mockups/iPhone6Plus/landscape_white.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"]{padding-bottom:49.63971%;background-image:url(../../device-mockups/iPhone6Plus/landscape_gold.png)}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .screen{top:6.37097%;left:11.48919%;width:76.86149%;height:87.09677%}.device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .button{top:43.30645%;left:90.43235%;width:6.64532%;height:13.3871%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.82962%;background-image:url(../../device-mockups/iPhoneSE/portrait_black.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"]{padding-bottom:209.82962%;background-image:url(../../device-mockups/iPhoneSE/portrait_white.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"]{padding-bottom:209.82962%;background-image:url(../../device-mockups/iPhoneSE/portrait_gold.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"]{padding-bottom:209.82962%;background-image:url(../../device-mockups/iPhoneSE/portrait_pink.png)}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .screen{top:14.80325%;left:8.519%;width:83.87942%;height:70.95565%}.device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .button{top:88.50718%;left:41.67759%;width:17.69332%;height:8.43223%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.65771%;background-image:url(../../device-mockups/iPhoneSE/landscape_black.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"]{padding-bottom:47.65771%;background-image:url(../../device-mockups/iPhoneSE/landscape_white.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"]{padding-bottom:47.65771%;background-image:url(../../device-mockups/iPhoneSE/landscape_gold.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"]{padding-bottom:47.65771%;background-image:url(../../device-mockups/iPhoneSE/landscape_pink.png)}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .screen{top:7.60157%;left:14.80325%;width:70.95565%;height:83.87942%}.device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .button{top:40.6291%;left:88.50718%;width:8.43223%;height:17.69332%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.46124%;background-image:url(../../device-mockups/iPhone5/portrait_black.png)}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .screen{top:14.80552%;left:8.27858%;width:84.23127%;height:71.26725%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .button{top:88.51945%;left:41.52431%;width:18.00263%;height:8.59473%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"]{padding-bottom:209.46124%;background-image:url(../../device-mockups/iPhone5/portrait_white.png)}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .screen{top:14.80552%;left:8.27858%;width:84.23127%;height:71.26725%}.device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .button{top:88.51945%;left:41.52431%;width:18.00263%;height:8.59473%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.74153%;background-image:url(../../device-mockups/iPhone5/landscape_black.png)}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .screen{top:7.49014%;left:14.80552%;width:71.26725%;height:84.23127%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .button{top:40.47306%;left:88.51945%;width:8.59473%;height:18.00263%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"]{padding-bottom:47.74153%;background-image:url(../../device-mockups/iPhone5/landscape_white.png)}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .screen{top:7.49014%;left:14.80552%;width:71.26725%;height:84.23127%}.device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .button{top:40.47306%;left:88.51945%;width:8.59473%;height:18.00263%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"]{padding-bottom:192.31288%;background-image:url(../../device-mockups/Lumia930/portrait_black.png)}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .screen{top:7.11781%;left:5.52933%;width:87.86244%;height:81.13604%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"]{padding-bottom:192.31288%;background-image:url(../../device-mockups/Lumia930/portrait_white.png)}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .screen{top:7.11781%;left:5.52933%;width:87.86244%;height:81.13604%}.device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"]{padding-bottom:51.9986%;background-image:url(../../device-mockups/Lumia930/landscape_black.png)}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .screen{top:6.60823%;left:7.11781%;width:81.13604%;height:87.86244%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"]{padding-bottom:51.9986%;background-image:url(../../device-mockups/Lumia930/landscape_white.png)}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .screen{top:6.60823%;left:7.11781%;width:81.13604%;height:87.86244%}.device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.51566%;background-image:url(../../device-mockups/Macbook/portrait_black.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"]{padding-bottom:57.51566%;background-image:url(../../device-mockups/Macbook/portrait_white.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"]{padding-bottom:57.51566%;background-image:url(../../device-mockups/Macbook/portrait_gold.png)}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .screen{top:7.25953%;left:12.36952%;width:75.26096%;height:81.85118%}.device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.51566%;background-image:url(../../device-mockups/Macbook2015/portrait_black.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"]{padding-bottom:57.51566%;background-image:url(../../device-mockups/Macbook2015/portrait_white.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"]{padding-bottom:57.51566%;background-image:url(../../device-mockups/Macbook2015/portrait_gold.png)}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .screen{top:7.35027%;left:12.42171%;width:75.15658%;height:81.76044%}.device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"]{padding-bottom:57.94702%;background-image:url(../../device-mockups/MacbookPro/portrait_black.png)}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen{top:6.71429%;left:11.83775%;width:76.40728%;height:82.42857%}.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"]{padding-bottom:64.67803%;background-image:url(../../device-mockups/SamsungTV/portrait_black.png)}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .screen{top:2.19619%;left:1.32576%;width:97.25379%;height:85.2123%}.device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"]{padding-bottom:62.38125%;background-image:url(../../device-mockups/Surface/portrait_black.png)}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .screen{top:11.06599%;left:6.77644%;width:86.38379%;height:77.7665%}.device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .button{top:92.18274%;left:48.8917%;width:2.34326%;height:3.65482%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"]{padding-bottom:89.11784%;background-image:url(../../device-mockups/iPhone6Hand/portrait_black.png)}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .screen{top:10.83815%;left:10.94656%;width:33.67675%;height:67.26879%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .button{top:79.69653%;left:24.79073%;width:5.98841%;height:6.79191%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"]{padding-bottom:89.11784%;background-image:url(../../device-mockups/iPhone6Hand/portrait_white.png)}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .screen{top:10.83815%;left:11.07534%;width:33.54797%;height:67.26879%}.device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .button{top:79.69653%;left:24.79073%;width:5.98841%;height:6.79191%}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"]{padding-bottom:158.39243%;background-image:url(../../device-mockups/iPhone7Hand/portrait_black.png)}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .screen{top:7.83582%;left:41.25296%;width:42.19858%;height:47.23881%}.device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .button{top:56.19403%;left:58.39243%;width:7.80142%;height:4.92537%}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"]{padding-bottom:158.39243%;background-image:url(../../device-mockups/iPhone7Hand_2/portrait_black.png)}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .screen{top:7.83582%;left:41.25296%;width:42.19858%;height:47.23881%}.device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .button{top:56.19403%;left:58.39243%;width:7.80142%;height:4.92537%}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"]{padding-bottom:58.97364%;background-image:url(../../device-mockups/Chromebook/portrait_black.png)}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .screen{top:7.89349%;left:12.73135%;width:74.1447%;height:71.27913%}.device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"]{padding-bottom:209.0625%;background-image:url(../../device-mockups/HtcOneM8/portrait_black.png)}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .screen{top:10.76233%;left:5.3125%;width:89.0625%;height:75.63528%}.device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"]{padding-bottom:47.83259%;background-image:url(../../device-mockups/HtcOneM8/landscape_black.png)}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .screen{top:5.625%;left:10.76233%;width:75.63528%;height:89.0625%}.device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"]{padding-bottom:209.74084%;background-image:url(../../device-mockups/HuaweiP8/portrait_gold.png)}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .screen{top:9.11802%;left:1.69794%;width:95.88919%;height:81.80656%}.device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"]{padding-bottom:47.67789%;background-image:url(../../device-mockups/HuaweiP8/landscape_gold.png)}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .screen{top:2.41287%;left:9.11802%;width:81.80656%;height:95.88919%}.device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"]{padding-bottom:68.15797%;background-image:url(../../device-mockups/SurfacePro3/landscape_black.png)}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .screen{top:7.09076%;left:5.82712%;width:88.34576%;height:86.42626%}.device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"]{padding-bottom:86.48036%;background-image:url(../../device-mockups/SurfaceStudio/portrait_black.png)}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .screen{top:3.75546%;left:3.22256%;width:93.52971%;height:72.40175%}.device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .button{display:none;top:0%;left:0%;width:100%;height:100%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"]{padding-bottom:203.10345%;background-image:url(../../device-mockups/iPhone7/portrait_black.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"]{padding-bottom:203.10345%;background-image:url(../../device-mockups/iPhone7/portrait_white.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"]{padding-bottom:203.10345%;background-image:url(../../device-mockups/iPhone7/portrait_gold.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"]{padding-bottom:203.10345%;background-image:url(../../device-mockups/iPhone7/portrait_pink.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .screen{top:11.99774%;left:6.2069%;width:87.35632%;height:76.06112%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .button{top:89.53028%;left:42.29885%;width:15.74713%;height:7.75325%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"]{padding-bottom:201.91083%;background-image:url(../../device-mockups/iPhone7/portrait_red.png)}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .screen{top:11.98738%;left:6.6879%;width:84.71338%;height:75.55205%}.device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .button{top:89.74763%;left:42.35669%;width:15.6051%;height:7.72871%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"]{padding-bottom:49.23599%;background-image:url(../../device-mockups/iPhone7/landscape_black.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"]{padding-bottom:49.23599%;background-image:url(../../device-mockups/iPhone7/landscape_white.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"]{padding-bottom:49.23599%;background-image:url(../../device-mockups/iPhone7/landscape_gold.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"]{padding-bottom:49.23599%;background-image:url(../../device-mockups/iPhone7/landscape_pink.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .screen{top:6.43678%;left:11.99774%;width:76.06112%;height:87.35632%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .button{top:41.95402%;left:89.53028%;width:7.75325%;height:15.74713%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"]{padding-bottom:49.52681%;background-image:url(../../device-mockups/iPhone7/landscape_red.png)}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .screen{top:8.59873%;left:11.98738%;width:75.55205%;height:84.71338%}.device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .button{top:42.03822%;left:89.74763%;width:7.72871%;height:15.6051%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"]{padding-bottom:202.62009%;background-image:url(../../device-mockups/Pixel/portrait_white.png)}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .screen{top:9.69828%;left:4.36681%;width:90.39301%;height:78.66379%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .button{top:90.51724%;left:44.97817%;width:11.35371%;height:4.31034%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"]{padding-bottom:202.62009%;background-image:url(../../device-mockups/Pixel/portrait_black.png)}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .screen{top:9.69828%;left:4.36681%;width:90.39301%;height:78.66379%}.device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .button{top:90.51724%;left:44.97817%;width:11.35371%;height:4.31034%} diff --git a/src/scss/general.scss b/src/scss/general.scss index d05bd77..13c4a7c 100644 --- a/src/scss/general.scss +++ b/src/scss/general.scss @@ -1,4 +1,4 @@ -$rel-mockup-path: '../../images/assets/mockups' !default; +$rel-mockup-path: '../../device-mockups' !default; .device-wrapper { max-width: 300px;