device-mockups.css (52396B)
1 /*! 2 * html5-device-mockups (https://github.com/pixelsign/html5-device-mockups) 3 * Copyright 2013 - 2017 pixelsign 4 * Licensed under MIT (https://github.com/pixelsign/html5-device-mockups/blob/master/LICENSE.txt) 5 * Last Build: Thu Sep 21 2017 21:24:45 6 */ 7 .device-wrapper { 8 max-width: 300px; 9 width: 100%; 10 } 11 .device { 12 position: relative; 13 background-size: cover; 14 } 15 .device .screen { 16 position: absolute; 17 background-size: cover; 18 } 19 .device .button { 20 position: absolute; 21 cursor: pointer; 22 } 23 .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] { 24 padding-bottom: 51.41800246609125%; 25 background-image: url("galaxyS3/landscape_black.png"); 26 } 27 .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .screen { 28 top: 7.074340527577938%; 29 left: 9.3711467324291%; 30 width: 78.91491985203453%; 31 height: 86.33093525179856%; 32 } 33 .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="black"] .button { 34 top: 38.84892086330935%; 35 left: 93.34155363748458%; 36 width: 3.390875462392109%; 37 height: 22.54196642685851%; 38 } 39 .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] { 40 padding-bottom: 51.41800246609125%; 41 background-image: url("galaxyS3/landscape_white.png"); 42 } 43 .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .screen { 44 top: 7.074340527577938%; 45 left: 9.3711467324291%; 46 width: 78.91491985203453%; 47 height: 86.33093525179856%; 48 } 49 .device[data-device="galaxyS3"][data-orientation="landscape"][data-color="white"] .button { 50 top: 38.84892086330935%; 51 left: 93.34155363748458%; 52 width: 3.390875462392109%; 53 height: 22.54196642685851%; 54 } 55 .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] { 56 padding-bottom: 194.7178871548619%; 57 background-image: url("galaxyS3/portrait_black.png"); 58 } 59 .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .screen { 60 top: 9.67940813810111%; 61 left: 6.602641056422569%; 62 width: 86.31452581032413%; 63 height: 78.91491985203453%; 64 } 65 .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="black"] .button { 66 top: 93.15659679408138%; 67 left: 38.655462184873954%; 68 width: 22.56902761104442%; 69 height: 3.2675709001233044%; 70 } 71 .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] { 72 padding-bottom: 194.7178871548619%; 73 background-image: url("galaxyS3/portrait_white.png"); 74 } 75 .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .screen { 76 top: 9.3711467324291%; 77 left: 6.602641056422569%; 78 width: 86.31452581032413%; 79 height: 78.91491985203453%; 80 } 81 .device[data-device="galaxyS3"][data-orientation="portrait"][data-color="white"] .button { 82 top: 93.15659679408138%; 83 left: 38.655462184873954%; 84 width: 22.56902761104442%; 85 height: 3.2675709001233044%; 86 } 87 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] { 88 padding-bottom: 193.9837398373984%; 89 background-image: url("galaxyS5/portrait_black.png"); 90 } 91 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .screen { 92 top: 9.80720871751886%; 93 left: 6.097560975609756%; 94 width: 87.8048780487805%; 95 height: 80.4694048616932%; 96 } 97 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="black"] .button { 98 top: 92.62363788767813%; 99 left: 38.943089430894304%; 100 width: 22.520325203252032%; 101 height: 3.730092204526404%; 102 } 103 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] { 104 padding-bottom: 193.9837398373984%; 105 background-image: url("galaxyS5/portrait_white.png"); 106 } 107 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .screen { 108 top: 9.80720871751886%; 109 left: 6.097560975609756%; 110 width: 87.8048780487805%; 111 height: 80.4694048616932%; 112 } 113 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="white"] .button { 114 top: 92.62363788767813%; 115 left: 38.943089430894304%; 116 width: 22.520325203252032%; 117 height: 3.730092204526404%; 118 } 119 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] { 120 padding-bottom: 193.9837398373984%; 121 background-image: url("galaxyS5/portrait_gold.png"); 122 } 123 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .screen { 124 top: 9.80720871751886%; 125 left: 6.097560975609756%; 126 width: 87.8048780487805%; 127 height: 80.4694048616932%; 128 } 129 .device[data-device="galaxyS5"][data-orientation="portrait"][data-color="gold"] .button { 130 top: 92.62363788767813%; 131 left: 38.943089430894304%; 132 width: 22.520325203252032%; 133 height: 3.730092204526404%; 134 } 135 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] { 136 padding-bottom: 51.55071248952222%; 137 background-image: url("galaxyS5/landscape_black.png"); 138 } 139 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .screen { 140 top: 6.097560975609756%; 141 left: 9.80720871751886%; 142 width: 80.4694048616932%; 143 height: 87.8048780487805%; 144 } 145 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="black"] .button { 146 top: 38.53658536585366%; 147 left: 92.62363788767813%; 148 width: 3.730092204526404%; 149 height: 22.520325203252032%; 150 } 151 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] { 152 padding-bottom: 51.55071248952222%; 153 background-image: url("galaxyS5/landscape_white.png"); 154 } 155 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .screen { 156 top: 6.097560975609756%; 157 left: 9.80720871751886%; 158 width: 80.4694048616932%; 159 height: 87.8048780487805%; 160 } 161 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="white"] .button { 162 top: 38.53658536585366%; 163 left: 92.62363788767813%; 164 width: 3.730092204526404%; 165 height: 22.520325203252032%; 166 } 167 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] { 168 padding-bottom: 51.55071248952222%; 169 background-image: url("galaxyS5/landscape_gold.png"); 170 } 171 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .screen { 172 top: 6.097560975609756%; 173 left: 9.80720871751886%; 174 width: 80.4694048616932%; 175 height: 87.8048780487805%; 176 } 177 .device[data-device="galaxyS5"][data-orientation="landscape"][data-color="gold"] .button { 178 top: 38.53658536585366%; 179 left: 92.62363788767813%; 180 width: 3.730092204526404%; 181 height: 22.520325203252032%; 182 } 183 .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] { 184 padding-bottom: 168.33616298811543%; 185 background-image: url("galaxyTab4/portrait_black.png"); 186 } 187 .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .screen { 188 top: 8.572869389813414%; 189 left: 5.68760611205433%; 190 width: 87.94567062818336%; 191 height: 83.00554715078164%; 192 } 193 .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="black"] .button { 194 display: none; 195 top: 0%; 196 left: 0%; 197 width: 100%; 198 height: 100%; 199 } 200 .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] { 201 padding-bottom: 168.33616298811543%; 202 background-image: url("galaxyTab4/portrait_white.png"); 203 } 204 .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .screen { 205 top: 8.522440746343923%; 206 left: 5.68760611205433%; 207 width: 87.94567062818336%; 208 height: 83.05597579425114%; 209 } 210 .device[data-device="galaxyTab4"][data-orientation="portrait"][data-color="white"] .button { 211 display: none; 212 top: 0%; 213 left: 0%; 214 width: 100%; 215 height: 100%; 216 } 217 .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] { 218 padding-bottom: 80.46663049376018%; 219 background-image: url("iMac/portrait_black.png"); 220 } 221 .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen { 222 top: 5.057316250842886%; 223 left: 4.0694519804666305%; 224 width: 91.86109603906674%; 225 height: 64.19420094403236%; 226 } 227 .device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .button { 228 display: none; 229 top: 0%; 230 left: 0%; 231 width: 100%; 232 height: 100%; 233 } 234 .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] { 235 padding-bottom: 129.56989247311827%; 236 background-image: url("iPad/portrait_black.png"); 237 } 238 .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .screen { 239 top: 9.12863070539419%; 240 left: 10.304659498207885%; 241 width: 79.21146953405018%; 242 height: 81.3969571230982%; 243 } 244 .device[data-device="iPad"][data-orientation="portrait"][data-color="black"] .button { 245 top: 93.15352697095436%; 246 left: 47.132616487455195%; 247 width: 6.003584229390681%; 248 height: 4.495159059474412%; 249 } 250 .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] { 251 padding-bottom: 129.56989247311827%; 252 background-image: url("iPad/portrait_white.png"); 253 } 254 .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .screen { 255 top: 9.12863070539419%; 256 left: 10.483870967741936%; 257 width: 79.3010752688172%; 258 height: 81.3969571230982%; 259 } 260 .device[data-device="iPad"][data-orientation="portrait"][data-color="white"] .button { 261 top: 93.15352697095436%; 262 left: 47.132616487455195%; 263 width: 6.003584229390681%; 264 height: 4.495159059474412%; 265 } 266 .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] { 267 padding-bottom: 77.04011065006915%; 268 background-image: url("iPad/landscape_black.png"); 269 } 270 .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .screen { 271 top: 10.23339317773788%; 272 left: 9.266943291839558%; 273 width: 81.32780082987551%; 274 height: 79.44344703770197%; 275 } 276 .device[data-device="iPad"][data-orientation="landscape"][data-color="black"] .button { 277 top: 46.768402154398565%; 278 left: 93.22268326417704%; 279 width: 4.426002766251729%; 280 height: 6.014362657091562%; 281 } 282 .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] { 283 padding-bottom: 77.04011065006915%; 284 background-image: url("iPad/landscape_white.png"); 285 } 286 .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .screen { 287 top: 10.23339317773788%; 288 left: 9.266943291839558%; 289 width: 81.32780082987551%; 290 height: 79.44344703770197%; 291 } 292 .device[data-device="iPad"][data-orientation="landscape"][data-color="white"] .button { 293 top: 46.768402154398565%; 294 left: 93.22268326417704%; 295 width: 4.426002766251729%; 296 height: 6.014362657091562%; 297 } 298 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] { 299 padding-bottom: 141.3929784824462%; 300 background-image: url("iPadAir2/portrait_black.png"); 301 } 302 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .screen { 303 top: 9.090909090909092%; 304 left: 6.455266138165346%; 305 width: 86.9762174405436%; 306 height: 82.01842210652784%; 307 } 308 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="black"] .button { 309 top: 93.55226271525831%; 310 left: 46.82899207248018%; 311 width: 6.285390713476784%; 312 height: 4.445334401281538%; 313 } 314 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] { 315 padding-bottom: 141.3929784824462%; 316 background-image: url("iPadAir2/portrait_white.png"); 317 } 318 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .screen { 319 top: 9.090909090909092%; 320 left: 6.455266138165346%; 321 width: 86.9762174405436%; 322 height: 82.01842210652784%; 323 } 324 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="white"] .button { 325 top: 93.55226271525831%; 326 left: 46.82899207248018%; 327 width: 6.285390713476784%; 328 height: 4.445334401281538%; 329 } 330 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] { 331 padding-bottom: 141.3929784824462%; 332 background-image: url("iPadAir2/portrait_gold.png"); 333 } 334 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .screen { 335 top: 9.090909090909092%; 336 left: 6.455266138165346%; 337 width: 86.9762174405436%; 338 height: 82.01842210652784%; 339 } 340 .device[data-device="iPadAir2"][data-orientation="portrait"][data-color="gold"] .button { 341 top: 93.55226271525831%; 342 left: 46.82899207248018%; 343 width: 6.285390713476784%; 344 height: 4.445334401281538%; 345 } 346 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] { 347 padding-bottom: 70.72486984381257%; 348 background-image: url("iPadAir2/landscape_black.png"); 349 } 350 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .screen { 351 top: 6.5685164212910525%; 352 left: 9.090909090909092%; 353 width: 82.01842210652784%; 354 height: 86.9762174405436%; 355 } 356 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="black"] .button { 357 top: 46.88561721404304%; 358 left: 93.55226271525831%; 359 width: 4.445334401281538%; 360 height: 6.285390713476784%; 361 } 362 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] { 363 padding-bottom: 70.72486984381257%; 364 background-image: url("iPadAir2/landscape_white.png"); 365 } 366 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .screen { 367 top: 6.5685164212910525%; 368 left: 9.090909090909092%; 369 width: 82.01842210652784%; 370 height: 86.9762174405436%; 371 } 372 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="white"] .button { 373 top: 46.88561721404304%; 374 left: 93.55226271525831%; 375 width: 4.445334401281538%; 376 height: 6.285390713476784%; 377 } 378 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] { 379 padding-bottom: 70.72486984381257%; 380 background-image: url("iPadAir2/landscape_gold.png"); 381 } 382 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .screen { 383 top: 6.5685164212910525%; 384 left: 9.090909090909092%; 385 width: 82.01842210652784%; 386 height: 86.9762174405436%; 387 } 388 .device[data-device="iPadAir2"][data-orientation="landscape"][data-color="gold"] .button { 389 top: 46.88561721404304%; 390 left: 93.55226271525831%; 391 width: 4.445334401281538%; 392 height: 6.285390713476784%; 393 } 394 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] { 395 padding-bottom: 138.62249346120313%; 396 background-image: url("iPadPro/portrait_black.png"); 397 } 398 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .screen { 399 top: 7.044025157232705%; 400 left: 5.361813426329555%; 401 width: 89.23278116826503%; 402 height: 85.9119496855346%; 403 } 404 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="black"] .button { 405 top: 94.937106918239%; 406 left: 47.60244115082825%; 407 width: 4.838709677419355%; 408 height: 3.5220125786163523%; 409 } 410 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] { 411 padding-bottom: 138.62249346120313%; 412 background-image: url("iPadPro/portrait_white.png"); 413 } 414 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .screen { 415 top: 7.044025157232705%; 416 left: 5.361813426329555%; 417 width: 89.23278116826503%; 418 height: 85.9119496855346%; 419 } 420 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="white"] .button { 421 top: 94.937106918239%; 422 left: 47.60244115082825%; 423 width: 4.838709677419355%; 424 height: 3.5220125786163523%; 425 } 426 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] { 427 padding-bottom: 138.62249346120313%; 428 background-image: url("iPadPro/portrait_gold.png"); 429 } 430 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .screen { 431 top: 7.0754716981132075%; 432 left: 5.361813426329555%; 433 width: 89.23278116826503%; 434 height: 85.88050314465409%; 435 } 436 .device[data-device="iPadPro"][data-orientation="portrait"][data-color="gold"] .button { 437 top: 94.937106918239%; 438 left: 47.60244115082825%; 439 width: 4.838709677419355%; 440 height: 3.5220125786163523%; 441 } 442 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] { 443 padding-bottom: 72.13836477987421%; 444 background-image: url("iPadPro/landscape_black.png"); 445 } 446 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .screen { 447 top: 5.405405405405405%; 448 left: 7.044025157232705%; 449 width: 85.9119496855346%; 450 height: 89.23278116826503%; 451 } 452 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="black"] .button { 453 top: 47.5588491717524%; 454 left: 94.937106918239%; 455 width: 3.5220125786163523%; 456 height: 4.838709677419355%; 457 } 458 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] { 459 padding-bottom: 72.13836477987421%; 460 background-image: url("iPadPro/landscape_white.png"); 461 } 462 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .screen { 463 top: 5.405405405405405%; 464 left: 7.044025157232705%; 465 width: 85.9119496855346%; 466 height: 89.23278116826503%; 467 } 468 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="white"] .button { 469 top: 47.5588491717524%; 470 left: 94.937106918239%; 471 width: 3.5220125786163523%; 472 height: 4.838709677419355%; 473 } 474 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] { 475 padding-bottom: 72.1471235460547%; 476 background-image: url("iPadPro/landscape_gold.png"); 477 } 478 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .screen { 479 top: 5.403050108932462%; 480 left: 7.073247406475951%; 481 width: 85.88494184218798%; 482 height: 89.23747276688452%; 483 } 484 .device[data-device="iPadPro"][data-orientation="landscape"][data-color="gold"] .button { 485 top: 47.53812636165578%; 486 left: 94.90726186733731%; 487 width: 3.5523420308079223%; 488 height: 4.880174291938998%; 489 } 490 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] { 491 padding-bottom: 207.620164126612%; 492 background-image: url("iPhone6/portrait_black.png"); 493 } 494 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .screen { 495 top: 12.25296442687747%; 496 left: 6.096131301289566%; 497 width: 88.042203985932%; 498 height: 75.32467532467533%; 499 } 500 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="black"] .button { 501 top: 89.32806324110672%; 502 left: 41.85228604923799%; 503 width: 16.64712778429074%; 504 height: 8.018068887634106%; 505 } 506 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] { 507 padding-bottom: 207.620164126612%; 508 background-image: url("iPhone6/portrait_white.png"); 509 } 510 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .screen { 511 top: 12.25296442687747%; 512 left: 6.096131301289566%; 513 width: 88.042203985932%; 514 height: 75.32467532467533%; 515 } 516 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="white"] .button { 517 top: 89.32806324110672%; 518 left: 41.85228604923799%; 519 width: 16.64712778429074%; 520 height: 8.018068887634106%; 521 } 522 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] { 523 padding-bottom: 207.620164126612%; 524 background-image: url("iPhone6/portrait_gold.png"); 525 } 526 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .screen { 527 top: 12.25296442687747%; 528 left: 6.096131301289566%; 529 width: 88.042203985932%; 530 height: 75.32467532467533%; 531 } 532 .device[data-device="iPhone6"][data-orientation="portrait"][data-color="gold"] .button { 533 top: 89.32806324110672%; 534 left: 41.85228604923799%; 535 width: 16.64712778429074%; 536 height: 8.018068887634106%; 537 } 538 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] { 539 padding-bottom: 48.164878599661215%; 540 background-image: url("iPhone6/landscape_black.png"); 541 } 542 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .screen { 543 top: 5.861664712778429%; 544 left: 12.309429700734048%; 545 width: 75.26821005081875%; 546 height: 87.92497069167644%; 547 } 548 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="black"] .button { 549 top: 41.50058616647128%; 550 left: 89.32806324110672%; 551 width: 8.018068887634106%; 552 height: 16.64712778429074%; 553 } 554 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] { 555 padding-bottom: 48.164878599661215%; 556 background-image: url("iPhone6/landscape_white.png"); 557 } 558 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .screen { 559 top: 5.861664712778429%; 560 left: 12.309429700734048%; 561 width: 75.26821005081875%; 562 height: 87.92497069167644%; 563 } 564 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="white"] .button { 565 top: 41.50058616647128%; 566 left: 89.32806324110672%; 567 width: 8.018068887634106%; 568 height: 16.64712778429074%; 569 } 570 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] { 571 padding-bottom: 48.164878599661215%; 572 background-image: url("iPhone6/landscape_gold.png"); 573 } 574 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .screen { 575 top: 5.861664712778429%; 576 left: 12.309429700734048%; 577 width: 75.26821005081875%; 578 height: 87.92497069167644%; 579 } 580 .device[data-device="iPhone6"][data-orientation="landscape"][data-color="gold"] .button { 581 top: 41.50058616647128%; 582 left: 89.32806324110672%; 583 width: 8.018068887634106%; 584 height: 16.64712778429074%; 585 } 586 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] { 587 padding-bottom: 201.45161290322577%; 588 background-image: url("iPhone6Plus/portrait_black.png"); 589 } 590 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .screen { 591 top: 11.489191353082466%; 592 left: 6.532258064516129%; 593 width: 87.09677419354838%; 594 height: 76.86148919135309%; 595 } 596 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="black"] .button { 597 top: 90.43234587670136%; 598 left: 43.306451612903224%; 599 width: 13.38709677419355%; 600 height: 6.645316253002402%; 601 } 602 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] { 603 padding-bottom: 201.45161290322577%; 604 background-image: url("iPhone6Plus/portrait_white.png"); 605 } 606 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .screen { 607 top: 11.489191353082466%; 608 left: 6.532258064516129%; 609 width: 87.09677419354838%; 610 height: 76.86148919135309%; 611 } 612 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="white"] .button { 613 top: 90.43234587670136%; 614 left: 43.306451612903224%; 615 width: 13.38709677419355%; 616 height: 6.645316253002402%; 617 } 618 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] { 619 padding-bottom: 201.45161290322577%; 620 background-image: url("iPhone6Plus/portrait_gold.png"); 621 } 622 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .screen { 623 top: 11.489191353082466%; 624 left: 6.532258064516129%; 625 width: 87.09677419354838%; 626 height: 76.86148919135309%; 627 } 628 .device[data-device="iPhone6Plus"][data-orientation="portrait"][data-color="gold"] .button { 629 top: 90.43234587670136%; 630 left: 43.306451612903224%; 631 width: 13.38709677419355%; 632 height: 6.645316253002402%; 633 } 634 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] { 635 padding-bottom: 49.639711769415534%; 636 background-image: url("iPhone6Plus/landscape_black.png"); 637 } 638 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .screen { 639 top: 6.370967741935483%; 640 left: 11.489191353082466%; 641 width: 76.86148919135309%; 642 height: 87.09677419354838%; 643 } 644 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="black"] .button { 645 top: 43.306451612903224%; 646 left: 90.43234587670136%; 647 width: 6.645316253002402%; 648 height: 13.38709677419355%; 649 } 650 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] { 651 padding-bottom: 49.639711769415534%; 652 background-image: url("iPhone6Plus/landscape_white.png"); 653 } 654 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .screen { 655 top: 6.370967741935483%; 656 left: 11.489191353082466%; 657 width: 76.86148919135309%; 658 height: 87.09677419354838%; 659 } 660 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="white"] .button { 661 top: 43.306451612903224%; 662 left: 90.43234587670136%; 663 width: 6.645316253002402%; 664 height: 13.38709677419355%; 665 } 666 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] { 667 padding-bottom: 49.639711769415534%; 668 background-image: url("iPhone6Plus/landscape_gold.png"); 669 } 670 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .screen { 671 top: 6.370967741935483%; 672 left: 11.489191353082466%; 673 width: 76.86148919135309%; 674 height: 87.09677419354838%; 675 } 676 .device[data-device="iPhone6Plus"][data-orientation="landscape"][data-color="gold"] .button { 677 top: 43.306451612903224%; 678 left: 90.43234587670136%; 679 width: 6.645316253002402%; 680 height: 13.38709677419355%; 681 } 682 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] { 683 padding-bottom: 209.829619921363%; 684 background-image: url("iPhoneSE/portrait_black.png"); 685 } 686 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .screen { 687 top: 14.803247970018738%; 688 left: 8.51900393184797%; 689 width: 83.8794233289646%; 690 height: 70.95565271705185%; 691 } 692 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="black"] .button { 693 top: 88.50718301061836%; 694 left: 41.67758846657929%; 695 width: 17.693315858453474%; 696 height: 8.432229856339788%; 697 } 698 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] { 699 padding-bottom: 209.829619921363%; 700 background-image: url("iPhoneSE/portrait_white.png"); 701 } 702 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .screen { 703 top: 14.803247970018738%; 704 left: 8.51900393184797%; 705 width: 83.8794233289646%; 706 height: 70.95565271705185%; 707 } 708 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="white"] .button { 709 top: 88.50718301061836%; 710 left: 41.67758846657929%; 711 width: 17.693315858453474%; 712 height: 8.432229856339788%; 713 } 714 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] { 715 padding-bottom: 209.829619921363%; 716 background-image: url("iPhoneSE/portrait_gold.png"); 717 } 718 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .screen { 719 top: 14.803247970018738%; 720 left: 8.51900393184797%; 721 width: 83.8794233289646%; 722 height: 70.95565271705185%; 723 } 724 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="gold"] .button { 725 top: 88.50718301061836%; 726 left: 41.67758846657929%; 727 width: 17.693315858453474%; 728 height: 8.432229856339788%; 729 } 730 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] { 731 padding-bottom: 209.829619921363%; 732 background-image: url("iPhoneSE/portrait_pink.png"); 733 } 734 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .screen { 735 top: 14.803247970018738%; 736 left: 8.51900393184797%; 737 width: 83.8794233289646%; 738 height: 70.95565271705185%; 739 } 740 .device[data-device="iPhoneSE"][data-orientation="portrait"][data-color="pink"] .button { 741 top: 88.50718301061836%; 742 left: 41.67758846657929%; 743 width: 17.693315858453474%; 744 height: 8.432229856339788%; 745 } 746 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] { 747 padding-bottom: 47.65771392879451%; 748 background-image: url("iPhoneSE/landscape_black.png"); 749 } 750 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .screen { 751 top: 7.601572739187418%; 752 left: 14.803247970018738%; 753 width: 70.95565271705185%; 754 height: 83.8794233289646%; 755 } 756 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="black"] .button { 757 top: 40.62909567496724%; 758 left: 88.50718301061836%; 759 width: 8.432229856339788%; 760 height: 17.693315858453474%; 761 } 762 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] { 763 padding-bottom: 47.65771392879451%; 764 background-image: url("iPhoneSE/landscape_white.png"); 765 } 766 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .screen { 767 top: 7.601572739187418%; 768 left: 14.803247970018738%; 769 width: 70.95565271705185%; 770 height: 83.8794233289646%; 771 } 772 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="white"] .button { 773 top: 40.62909567496724%; 774 left: 88.50718301061836%; 775 width: 8.432229856339788%; 776 height: 17.693315858453474%; 777 } 778 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] { 779 padding-bottom: 47.65771392879451%; 780 background-image: url("iPhoneSE/landscape_gold.png"); 781 } 782 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .screen { 783 top: 7.601572739187418%; 784 left: 14.803247970018738%; 785 width: 70.95565271705185%; 786 height: 83.8794233289646%; 787 } 788 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="gold"] .button { 789 top: 40.62909567496724%; 790 left: 88.50718301061836%; 791 width: 8.432229856339788%; 792 height: 17.693315858453474%; 793 } 794 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] { 795 padding-bottom: 47.65771392879451%; 796 background-image: url("iPhoneSE/landscape_pink.png"); 797 } 798 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .screen { 799 top: 7.601572739187418%; 800 left: 14.803247970018738%; 801 width: 70.95565271705185%; 802 height: 83.8794233289646%; 803 } 804 .device[data-device="iPhoneSE"][data-orientation="landscape"][data-color="pink"] .button { 805 top: 40.62909567496724%; 806 left: 88.50718301061836%; 807 width: 8.432229856339788%; 808 height: 17.693315858453474%; 809 } 810 .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] { 811 padding-bottom: 209.46123521681997%; 812 background-image: url("iPhone5/portrait_black.png"); 813 } 814 .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .screen { 815 top: 14.805520702634881%; 816 left: 8.278580814717477%; 817 width: 84.23127463863338%; 818 height: 71.267252195734%; 819 } 820 .device[data-device="iPhone5"][data-orientation="portrait"][data-color="black"] .button { 821 top: 88.51944792973651%; 822 left: 41.52431011826544%; 823 width: 18.00262812089356%; 824 height: 8.594730238393977%; 825 } 826 .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] { 827 padding-bottom: 209.46123521681997%; 828 background-image: url("iPhone5/portrait_white.png"); 829 } 830 .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .screen { 831 top: 14.805520702634881%; 832 left: 8.278580814717477%; 833 width: 84.23127463863338%; 834 height: 71.267252195734%; 835 } 836 .device[data-device="iPhone5"][data-orientation="portrait"][data-color="white"] .button { 837 top: 88.51944792973651%; 838 left: 41.52431011826544%; 839 width: 18.00262812089356%; 840 height: 8.594730238393977%; 841 } 842 .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] { 843 padding-bottom: 47.74153074027603%; 844 background-image: url("iPhone5/landscape_black.png"); 845 } 846 .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .screen { 847 top: 7.490144546649145%; 848 left: 14.805520702634881%; 849 width: 71.267252195734%; 850 height: 84.23127463863338%; 851 } 852 .device[data-device="iPhone5"][data-orientation="landscape"][data-color="black"] .button { 853 top: 40.473061760841%; 854 left: 88.51944792973651%; 855 width: 8.594730238393977%; 856 height: 18.00262812089356%; 857 } 858 .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] { 859 padding-bottom: 47.74153074027603%; 860 background-image: url("iPhone5/landscape_white.png"); 861 } 862 .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .screen { 863 top: 7.490144546649145%; 864 left: 14.805520702634881%; 865 width: 71.267252195734%; 866 height: 84.23127463863338%; 867 } 868 .device[data-device="iPhone5"][data-orientation="landscape"][data-color="white"] .button { 869 top: 40.473061760841%; 870 left: 88.51944792973651%; 871 width: 8.594730238393977%; 872 height: 18.00262812089356%; 873 } 874 .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] { 875 padding-bottom: 192.31287929871883%; 876 background-image: url("Lumia930/portrait_black.png"); 877 } 878 .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .screen { 879 top: 7.1178120617110805%; 880 left: 5.529332434254889%; 881 width: 87.86244099797707%; 882 height: 81.13604488078542%; 883 } 884 .device[data-device="Lumia930"][data-orientation="portrait"][data-color="black"] .button { 885 display: none; 886 top: 0%; 887 left: 0%; 888 width: 100%; 889 height: 100%; 890 } 891 .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] { 892 padding-bottom: 192.31287929871883%; 893 background-image: url("Lumia930/portrait_white.png"); 894 } 895 .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .screen { 896 top: 7.1178120617110805%; 897 left: 5.529332434254889%; 898 width: 87.86244099797707%; 899 height: 81.13604488078542%; 900 } 901 .device[data-device="Lumia930"][data-orientation="portrait"][data-color="white"] .button { 902 display: none; 903 top: 0%; 904 left: 0%; 905 width: 100%; 906 height: 100%; 907 } 908 .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] { 909 padding-bottom: 51.998597475455824%; 910 background-image: url("Lumia930/landscape_black.png"); 911 } 912 .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .screen { 913 top: 6.608226567768037%; 914 left: 7.1178120617110805%; 915 width: 81.13604488078542%; 916 height: 87.86244099797707%; 917 } 918 .device[data-device="Lumia930"][data-orientation="landscape"][data-color="black"] .button { 919 display: none; 920 top: 0%; 921 left: 0%; 922 width: 100%; 923 height: 100%; 924 } 925 .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] { 926 padding-bottom: 51.998597475455824%; 927 background-image: url("Lumia930/landscape_white.png"); 928 } 929 .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .screen { 930 top: 6.608226567768037%; 931 left: 7.1178120617110805%; 932 width: 81.13604488078542%; 933 height: 87.86244099797707%; 934 } 935 .device[data-device="Lumia930"][data-orientation="landscape"][data-color="white"] .button { 936 display: none; 937 top: 0%; 938 left: 0%; 939 width: 100%; 940 height: 100%; 941 } 942 .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] { 943 padding-bottom: 57.51565762004176%; 944 background-image: url("Macbook/portrait_black.png"); 945 } 946 .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .screen { 947 top: 7.259528130671507%; 948 left: 12.369519832985386%; 949 width: 75.26096033402922%; 950 height: 81.85117967332124%; 951 } 952 .device[data-device="Macbook"][data-orientation="portrait"][data-color="black"] .button { 953 display: none; 954 top: 0%; 955 left: 0%; 956 width: 100%; 957 height: 100%; 958 } 959 .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] { 960 padding-bottom: 57.51565762004176%; 961 background-image: url("Macbook/portrait_white.png"); 962 } 963 .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .screen { 964 top: 7.259528130671507%; 965 left: 12.369519832985386%; 966 width: 75.26096033402922%; 967 height: 81.85117967332124%; 968 } 969 .device[data-device="Macbook"][data-orientation="portrait"][data-color="white"] .button { 970 display: none; 971 top: 0%; 972 left: 0%; 973 width: 100%; 974 height: 100%; 975 } 976 .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] { 977 padding-bottom: 57.51565762004176%; 978 background-image: url("Macbook/portrait_gold.png"); 979 } 980 .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .screen { 981 top: 7.259528130671507%; 982 left: 12.369519832985386%; 983 width: 75.26096033402922%; 984 height: 81.85117967332124%; 985 } 986 .device[data-device="Macbook"][data-orientation="portrait"][data-color="gold"] .button { 987 display: none; 988 top: 0%; 989 left: 0%; 990 width: 100%; 991 height: 100%; 992 } 993 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] { 994 padding-bottom: 57.51565762004176%; 995 background-image: url("Macbook2015/portrait_black.png"); 996 } 997 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .screen { 998 top: 7.350272232304899%; 999 left: 12.421711899791232%; 1000 width: 75.15657620041753%; 1001 height: 81.76043557168784%; 1002 } 1003 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="black"] .button { 1004 display: none; 1005 top: 0%; 1006 left: 0%; 1007 width: 100%; 1008 height: 100%; 1009 } 1010 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] { 1011 padding-bottom: 57.51565762004176%; 1012 background-image: url("Macbook2015/portrait_white.png"); 1013 } 1014 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .screen { 1015 top: 7.350272232304899%; 1016 left: 12.421711899791232%; 1017 width: 75.15657620041753%; 1018 height: 81.76043557168784%; 1019 } 1020 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="white"] .button { 1021 display: none; 1022 top: 0%; 1023 left: 0%; 1024 width: 100%; 1025 height: 100%; 1026 } 1027 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] { 1028 padding-bottom: 57.51565762004176%; 1029 background-image: url("Macbook2015/portrait_gold.png"); 1030 } 1031 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .screen { 1032 top: 7.350272232304899%; 1033 left: 12.421711899791232%; 1034 width: 75.15657620041753%; 1035 height: 81.76043557168784%; 1036 } 1037 .device[data-device="Macbook2015"][data-orientation="portrait"][data-color="gold"] .button { 1038 display: none; 1039 top: 0%; 1040 left: 0%; 1041 width: 100%; 1042 height: 100%; 1043 } 1044 .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] { 1045 padding-bottom: 57.94701986754966%; 1046 background-image: url("MacbookPro/portrait_black.png"); 1047 } 1048 .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen { 1049 top: 6.714285714285714%; 1050 left: 11.83774834437086%; 1051 width: 76.40728476821192%; 1052 height: 82.42857142857143%; 1053 } 1054 .device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .button { 1055 display: none; 1056 top: 0%; 1057 left: 0%; 1058 width: 100%; 1059 height: 100%; 1060 } 1061 .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] { 1062 padding-bottom: 64.6780303030303%; 1063 background-image: url("SamsungTV/portrait_black.png"); 1064 } 1065 .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .screen { 1066 top: 2.1961932650073206%; 1067 left: 1.3257575757575757%; 1068 width: 97.25378787878788%; 1069 height: 85.21229868228404%; 1070 } 1071 .device[data-device="SamsungTV"][data-orientation="portrait"][data-color="black"] .button { 1072 display: none; 1073 top: 0%; 1074 left: 0%; 1075 width: 100%; 1076 height: 100%; 1077 } 1078 .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] { 1079 padding-bottom: 62.38125395820139%; 1080 background-image: url("Surface/portrait_black.png"); 1081 } 1082 .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .screen { 1083 top: 11.065989847715736%; 1084 left: 6.776440785307157%; 1085 width: 86.38378720709309%; 1086 height: 77.76649746192894%; 1087 } 1088 .device[data-device="Surface"][data-orientation="portrait"][data-color="black"] .button { 1089 top: 92.18274111675126%; 1090 left: 48.89170360987967%; 1091 width: 2.3432552248258394%; 1092 height: 3.654822335025381%; 1093 } 1094 .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] { 1095 padding-bottom: 89.11783644558918%; 1096 background-image: url("iPhone6Hand/portrait_black.png"); 1097 } 1098 .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .screen { 1099 top: 10.83815028901734%; 1100 left: 10.946555054732775%; 1101 width: 33.67675466838377%; 1102 height: 67.26878612716763%; 1103 } 1104 .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="black"] .button { 1105 top: 79.6965317919075%; 1106 left: 24.790727623953636%; 1107 width: 5.988409529942048%; 1108 height: 6.791907514450866%; 1109 } 1110 .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] { 1111 padding-bottom: 89.11783644558918%; 1112 background-image: url("iPhone6Hand/portrait_white.png"); 1113 } 1114 .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .screen { 1115 top: 10.83815028901734%; 1116 left: 11.07533805537669%; 1117 width: 33.54797166773986%; 1118 height: 67.26878612716763%; 1119 } 1120 .device[data-device="iPhone6Hand"][data-orientation="portrait"][data-color="white"] .button { 1121 top: 79.6965317919075%; 1122 left: 24.790727623953636%; 1123 width: 5.988409529942048%; 1124 height: 6.791907514450866%; 1125 } 1126 .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] { 1127 padding-bottom: 158.39243498817967%; 1128 background-image: url("iPhone7Hand/portrait_black.png"); 1129 } 1130 .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .screen { 1131 top: 7.835820895522389%; 1132 left: 41.25295508274232%; 1133 width: 42.198581560283685%; 1134 height: 47.23880597014926%; 1135 } 1136 .device[data-device="iPhone7Hand"][data-orientation="portrait"][data-color="black"] .button { 1137 top: 56.19402985074626%; 1138 left: 58.392434988179666%; 1139 width: 7.801418439716312%; 1140 height: 4.925373134328359%; 1141 } 1142 .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] { 1143 padding-bottom: 158.39243498817967%; 1144 background-image: url("iPhone7Hand_2/portrait_black.png"); 1145 } 1146 .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .screen { 1147 top: 7.835820895522389%; 1148 left: 41.25295508274232%; 1149 width: 42.198581560283685%; 1150 height: 47.23880597014926%; 1151 } 1152 .device[data-device="iPhone7Hand_2"][data-orientation="portrait"][data-color="black"] .button { 1153 top: 56.19402985074626%; 1154 left: 58.392434988179666%; 1155 width: 7.801418439716312%; 1156 height: 4.925373134328359%; 1157 } 1158 .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] { 1159 padding-bottom: 58.97363993269771%; 1160 background-image: url("Chromebook/portrait_black.png"); 1161 } 1162 .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .screen { 1163 top: 7.893485496909178%; 1164 left: 12.731351654514864%; 1165 width: 74.14469994391474%; 1166 height: 71.2791250594389%; 1167 } 1168 .device[data-device="Chromebook"][data-orientation="portrait"][data-color="black"] .button { 1169 display: none; 1170 top: 0%; 1171 left: 0%; 1172 width: 100%; 1173 height: 100%; 1174 } 1175 .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] { 1176 padding-bottom: 209.06250000000003%; 1177 background-image: url("HtcOneM8/portrait_black.png"); 1178 } 1179 .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .screen { 1180 top: 10.762331838565023%; 1181 left: 5.3125%; 1182 width: 89.0625%; 1183 height: 75.63527653213752%; 1184 } 1185 .device[data-device="HtcOneM8"][data-orientation="portrait"][data-color="black"] .button { 1186 display: none; 1187 top: 0%; 1188 left: 0%; 1189 width: 100%; 1190 height: 100%; 1191 } 1192 .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] { 1193 padding-bottom: 47.832585949177876%; 1194 background-image: url("HtcOneM8/landscape_black.png"); 1195 } 1196 .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .screen { 1197 top: 5.625%; 1198 left: 10.762331838565023%; 1199 width: 75.63527653213752%; 1200 height: 89.0625%; 1201 } 1202 .device[data-device="HtcOneM8"][data-orientation="landscape"][data-color="black"] .button { 1203 display: none; 1204 top: 0%; 1205 left: 0%; 1206 width: 100%; 1207 height: 100%; 1208 } 1209 .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] { 1210 padding-bottom: 209.7408400357462%; 1211 background-image: url("HuaweiP8/portrait_gold.png"); 1212 } 1213 .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .screen { 1214 top: 9.118023008095442%; 1215 left: 1.6979445933869526%; 1216 width: 95.88918677390528%; 1217 height: 81.80656156795911%; 1218 } 1219 .device[data-device="HuaweiP8"][data-orientation="portrait"][data-color="gold"] .button { 1220 display: none; 1221 top: 0%; 1222 left: 0%; 1223 width: 100%; 1224 height: 100%; 1225 } 1226 .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] { 1227 padding-bottom: 47.677886663826165%; 1228 background-image: url("HuaweiP8/landscape_gold.png"); 1229 } 1230 .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .screen { 1231 top: 2.4128686327077746%; 1232 left: 9.118023008095442%; 1233 width: 81.80656156795911%; 1234 height: 95.88918677390528%; 1235 } 1236 .device[data-device="HuaweiP8"][data-orientation="landscape"][data-color="gold"] .button { 1237 display: none; 1238 top: 0%; 1239 left: 0%; 1240 width: 100%; 1241 height: 100%; 1242 } 1243 .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] { 1244 padding-bottom: 68.15796741231705%; 1245 background-image: url("SurfacePro3/landscape_black.png"); 1246 } 1247 .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .screen { 1248 top: 7.0907617504051865%; 1249 left: 5.827119580226457%; 1250 width: 88.34576083954708%; 1251 height: 86.42625607779578%; 1252 } 1253 .device[data-device="SurfacePro3"][data-orientation="landscape"][data-color="black"] .button { 1254 display: none; 1255 top: 0%; 1256 left: 0%; 1257 width: 100%; 1258 height: 100%; 1259 } 1260 .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] { 1261 padding-bottom: 86.48036253776435%; 1262 background-image: url("SurfaceStudio/portrait_black.png"); 1263 } 1264 .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .screen { 1265 top: 3.755458515283843%; 1266 left: 3.2225579053373616%; 1267 width: 93.52970795568983%; 1268 height: 72.40174672489083%; 1269 } 1270 .device[data-device="SurfaceStudio"][data-orientation="portrait"][data-color="black"] .button { 1271 display: none; 1272 top: 0%; 1273 left: 0%; 1274 width: 100%; 1275 height: 100%; 1276 } 1277 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] { 1278 padding-bottom: 203.10344827586212%; 1279 background-image: url("iPhone7/portrait_black.png"); 1280 } 1281 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .screen { 1282 top: 11.997736276174306%; 1283 left: 6.206896551724138%; 1284 width: 87.35632183908046%; 1285 height: 76.06112054329371%; 1286 } 1287 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="black"] .button { 1288 top: 89.53027730616864%; 1289 left: 42.298850574712645%; 1290 width: 15.747126436781608%; 1291 height: 7.753254102999434%; 1292 } 1293 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] { 1294 padding-bottom: 203.10344827586212%; 1295 background-image: url("iPhone7/portrait_white.png"); 1296 } 1297 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .screen { 1298 top: 11.997736276174306%; 1299 left: 6.206896551724138%; 1300 width: 87.35632183908046%; 1301 height: 76.06112054329371%; 1302 } 1303 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="white"] .button { 1304 top: 89.53027730616864%; 1305 left: 42.298850574712645%; 1306 width: 15.747126436781608%; 1307 height: 7.753254102999434%; 1308 } 1309 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] { 1310 padding-bottom: 203.10344827586212%; 1311 background-image: url("iPhone7/portrait_gold.png"); 1312 } 1313 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .screen { 1314 top: 11.997736276174306%; 1315 left: 6.206896551724138%; 1316 width: 87.35632183908046%; 1317 height: 76.06112054329371%; 1318 } 1319 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="gold"] .button { 1320 top: 89.53027730616864%; 1321 left: 42.298850574712645%; 1322 width: 15.747126436781608%; 1323 height: 7.753254102999434%; 1324 } 1325 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] { 1326 padding-bottom: 203.10344827586212%; 1327 background-image: url("iPhone7/portrait_pink.png"); 1328 } 1329 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .screen { 1330 top: 11.997736276174306%; 1331 left: 6.206896551724138%; 1332 width: 87.35632183908046%; 1333 height: 76.06112054329371%; 1334 } 1335 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="pink"] .button { 1336 top: 89.53027730616864%; 1337 left: 42.298850574712645%; 1338 width: 15.747126436781608%; 1339 height: 7.753254102999434%; 1340 } 1341 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] { 1342 padding-bottom: 201.91082802547774%; 1343 background-image: url("iPhone7/portrait_red.png"); 1344 } 1345 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .screen { 1346 top: 11.987381703470032%; 1347 left: 6.687898089171974%; 1348 width: 84.71337579617835%; 1349 height: 75.55205047318611%; 1350 } 1351 .device[data-device="iPhone7"][data-orientation="portrait"][data-color="red"] .button { 1352 top: 89.74763406940063%; 1353 left: 42.35668789808918%; 1354 width: 15.605095541401273%; 1355 height: 7.728706624605679%; 1356 } 1357 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] { 1358 padding-bottom: 49.235993208828525%; 1359 background-image: url("iPhone7/landscape_black.png"); 1360 } 1361 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .screen { 1362 top: 6.436781609195402%; 1363 left: 11.997736276174306%; 1364 width: 76.06112054329371%; 1365 height: 87.35632183908046%; 1366 } 1367 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="black"] .button { 1368 top: 41.95402298850575%; 1369 left: 89.53027730616864%; 1370 width: 7.753254102999434%; 1371 height: 15.747126436781608%; 1372 } 1373 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] { 1374 padding-bottom: 49.235993208828525%; 1375 background-image: url("iPhone7/landscape_white.png"); 1376 } 1377 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .screen { 1378 top: 6.436781609195402%; 1379 left: 11.997736276174306%; 1380 width: 76.06112054329371%; 1381 height: 87.35632183908046%; 1382 } 1383 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="white"] .button { 1384 top: 41.95402298850575%; 1385 left: 89.53027730616864%; 1386 width: 7.753254102999434%; 1387 height: 15.747126436781608%; 1388 } 1389 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] { 1390 padding-bottom: 49.235993208828525%; 1391 background-image: url("iPhone7/landscape_gold.png"); 1392 } 1393 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .screen { 1394 top: 6.436781609195402%; 1395 left: 11.997736276174306%; 1396 width: 76.06112054329371%; 1397 height: 87.35632183908046%; 1398 } 1399 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="gold"] .button { 1400 top: 41.95402298850575%; 1401 left: 89.53027730616864%; 1402 width: 7.753254102999434%; 1403 height: 15.747126436781608%; 1404 } 1405 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] { 1406 padding-bottom: 49.235993208828525%; 1407 background-image: url("iPhone7/landscape_pink.png"); 1408 } 1409 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .screen { 1410 top: 6.436781609195402%; 1411 left: 11.997736276174306%; 1412 width: 76.06112054329371%; 1413 height: 87.35632183908046%; 1414 } 1415 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="pink"] .button { 1416 top: 41.95402298850575%; 1417 left: 89.53027730616864%; 1418 width: 7.753254102999434%; 1419 height: 15.747126436781608%; 1420 } 1421 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] { 1422 padding-bottom: 49.526813880126184%; 1423 background-image: url("iPhone7/landscape_red.png"); 1424 } 1425 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .screen { 1426 top: 8.598726114649681%; 1427 left: 11.987381703470032%; 1428 width: 75.55205047318611%; 1429 height: 84.71337579617835%; 1430 } 1431 .device[data-device="iPhone7"][data-orientation="landscape"][data-color="red"] .button { 1432 top: 42.038216560509554%; 1433 left: 89.74763406940063%; 1434 width: 7.728706624605679%; 1435 height: 15.605095541401273%; 1436 } 1437 .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] { 1438 padding-bottom: 202.62008733624458%; 1439 background-image: url("Pixel/portrait_white.png"); 1440 } 1441 .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .screen { 1442 top: 9.698275862068966%; 1443 left: 4.366812227074235%; 1444 width: 90.39301310043668%; 1445 height: 78.66379310344827%; 1446 } 1447 .device[data-device="Pixel"][data-orientation="portrait"][data-color="white"] .button { 1448 top: 90.51724137931035%; 1449 left: 44.97816593886463%; 1450 width: 11.353711790393014%; 1451 height: 4.310344827586207%; 1452 } 1453 .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] { 1454 padding-bottom: 202.62008733624458%; 1455 background-image: url("Pixel/portrait_black.png"); 1456 } 1457 .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .screen { 1458 top: 9.698275862068966%; 1459 left: 4.366812227074235%; 1460 width: 90.39301310043668%; 1461 height: 78.66379310344827%; 1462 } 1463 .device[data-device="Pixel"][data-orientation="portrait"][data-color="black"] .button { 1464 top: 90.51724137931035%; 1465 left: 44.97816593886463%; 1466 width: 11.353711790393014%; 1467 height: 4.310344827586207%; 1468 }