/*! ScreenshotFrames

    v1.5.4 - 2016-09-12
   
    https://github.com/olets/ScreenshotFrames
    Copyright (c) 2016 Henry Bley-Vroman (@olets)
    MIT License

 */.screenshot-ipad,.screenshot-ipad-landscape,.screenshot-iphone,.screenshot-safari {
    position: relative;
    padding: 0;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0
}

.screenshot-ipad img,.screenshot-ipad-landscape img, .screenshot-iphone img,.screenshot-safari img {
    width: 100%;
    display: block
}

.screenshot-ipad:after, .screenshot-ipad-landscape:after, .screenshot-iphone:after,.screenshot-safari:after {
    background-repeat: no-repeat
}

.screenshot-ipad, .screenshot-iphone {
    height: 0
}

.screenshot-ipad img, .screenshot-ipad-landscape img, .screenshot-iphone img {
    position: absolute;
    outline: #000 solid 2px
}

.screenshot-ipad:after, .screenshot-ipad-landscape:after, .screenshot-iphone:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-background-size: cover;
    background-size: cover
}

.screenshot-safari {
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    padding-top: 40px;
    background: #e5e5e5;
    background: -moz-linear-gradient(top,#e5e5e5 0,#e5e5e5 39px,#979797 39px,#979797 40px,transparent 40px,transparent 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(#e5e5e5 0),color-stop(#e5e5e5 39px),color-stop(#979797 39px),color-stop(#979797 40px),color-stop(transparent 40px),color-stop(transparent 100%));
    background: -webkit-linear-gradient(top,#e5e5e5 0,#e5e5e5 39px,#979797 39px,#979797 40px,transparent 40px,transparent 100%);
    background: -o-linear-gradient(top,#e5e5e5 0,#e5e5e5 39px,#979797 39px,#979797 40px,transparent 40px,transparent 100%);
    background: -ms-linear-gradient(top,#e5e5e5 0,#e5e5e5 39px,#979797 39px,#979797 40px,transparent 40px,transparent 100%);
    background: linear-gradient(to bottom,#e5e5e5 0,#e5e5e5 39px,#979797 39px,#979797 40px,transparent 40px,transparent 100%)
}

.screenshot-safari:after,.screenshot-safari:before {
    content: '';
    position: absolute;
    top: 8px;
    background: no-repeat;
    -webkit-background-size: contain;
    background-size: contain
}

.screenshot-safari:before {
    height: 26px;
    width: 167px;
    left: 14px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU4AAAA0CAMAAADSQyFIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABgUExURUxpcf+RRf9hWSjPQfv7+8KwYuXl5fLy8v///8DAwP///7m5uf+9Lv+9LijOQSjPQbm5uf+9LirRQf9iWf9hWv///87Ozv////+9LijOQf9hWZeXl7i4uOjo6MjIyPPz8ztzuU8AAAAXdFJOUwBg6n/+Glz2xDqQzcjz88iUm062m7Xh3pmNQgAAAydJREFUeNrtnGeT4yAMhl3AvaWXxeH//8v1ZeeyuVgIRHBCbng/ZTKiPUiAATuKfFFW7QoD7aqMW6XSFF9WBTtYixVVGXmksiDUvbrBzM1T5SjQ6vC0Kn9oZjTP2FkxQNpbHByo8MY3mY0nZNT2Zgv6pk/+SXeOiQwnj3WMK3rz4Eh+jJ8ZveI7K5eqFnVOX9zTojnMarxTjG65K5z5h8b6n7hiVp0AibnCybzAmVvhtGkvXP7BmT4WZxZwWuKU0hQnaBlw/stoHE1xjqP0AyePN8mkTcz1redx07Rt0xjZpn3fdX2fclucE01mipPpeFJwjl+IRix/vj3ftNVA4qvjTSudbXq6CQGa02kqxk4dTwrOL1RI/nFyvlMSY4Ti9ninFrVdd6c7dWsLnCqaqqlIw5OGc/5L/c9v/vH5QQij+PggxDY9PSgl41TSVM7sOM8X4JzRRHjOaCI816eZ1kScaprqhRLKk4rzJ6wpOHkyx5koxjneznG2KttujrPjJJwITWTdifFcHuf2DGgLl7s6AloZhro63HM6TWwZj/BcPNj5GRToRvwICrY9geLmOFGa6FORmufiOGMYZ2w4cipHzxTGmRrjxGniD5lKnosH+wbGuYGKbWCcDWTbwzh7U5wamppndhXPxXEmMM7kzTh1NHVbIAqeiwc7BWcL42wh2w7G2ZnhzHU0tTtKE8884PQMZwh2p8EepiKnU1FYKDldKIVl/HuX8eEh0y3OsAUSNuhetUEXto/fvX0cDjcc4wxHb06P3sLBsNuD4XBtIVyqCZdqwpWvgDPgJDb3P7suO1rUvIwkPZGEy5eucEovcO4tKl7adMLorjsp+b9YNT3aRm7TCXtn3QnH+t4LnBnZPVgdRQM51TjA5Q+O3FOV/4vFBXUyukwVLwXRqZlQvEZVitwFzVx48prrIEj+wS71dYwQpDlEitpR+QrfFH4455XMxbhBchQ/bsCnVMZA5UXUHC1fPvMCthwv6t56h38KcTHSZPg3qCaehFQ115T/pIbII5W1abXr4ZdLZp5K832AcqifYVkPXn0e4NoiIz34GLdKFfQR+gY6zpZX94PvsAAAAABJRU5ErkJggg==)
}

.screenshot-safari:after {
    height: 32px;
    width: 119px;
    right: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAABABAMAAADv1laPAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUxpcejo6NnZ2dra2v///8LCwpeXl7m5uZCWBLcAAAAEdFJOUwD2miy7rGeLAAABeklEQVRYw+3Yu07DMBQGYCuPgExYQSCxV0jMBgdmJJrdEj3MBUReH4tL40tOfWyTuAifoVl+/V9teUjMGFtxuW/EObMmMo5OI0NzmhHH5yJYJDLiGcu1VhAZx+eKUHSbHM/ZZilvkuP4cEKRSI7jIymTHI9xhzJuB49F3B42JdwOwF/wAm6voN0s73bAQXgLnt/tlQTpLRh3W/galefq5WrXWzDuws/kuXf6f+uK9onsOk/XBWScIsE/KwRf2PUqqOcKddfTcxiuPp3PuuLdOZ+YaxzmPBd2LlBc4zBnuvZP0B2f1a1uda2ioZArE1yguDCDq8q46HtOdf+yO/VSt4A7+RKb5ML0EtLf22luu2PVou7vf3d/W8ZGFnZnvt9A9/mNUHQ/9kTGcfeMUHQ09kTGcfc6vHPideyJjONusw0WnZj3hHFx3GWXD4Ge4xfzuzUyjrvNEBr7HjgujrtsFehx772j4nvcWec/u+vqVre61T1kF7sXLeR+AI2lhXaas5XzAAAAAElFTkSuQmCC)
}

.screenshot-ipad {
    padding-top: 141.73493976%
}

.screenshot-ipad img {
    left: 6.5060241%;
    width: 86.98795181%;
    top: 9.11254675%;
    height: 81.84291057%;
    outline-color: #1D1D1D;
}

.screenshot-ipad:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2075 2941"> <defs> <linearGradient id="a" x1="0%" y1="50%" y2="50%"> <stop stop-color="#929497" offset="0%" /> <stop stop-color="#F1F1F2" offset="49.4%" /> <stop stop-color="#929497" offset="100%" /> </linearGradient> <linearGradient id="b" x1="0%" y1="49.9%" y2="49.9%"> <stop stop-color="#FFF" stop-opacity="0" offset="0%" /> <stop stop-color="#FFF" offset="100%" /> </linearGradient> <linearGradient id="c" x1="50%" x2="50%" y1="100.1%" y2="0%"> <stop stop-color="#FFF" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </linearGradient> <linearGradient id="d" x1="50%" x2="50%" y1="100%" y2="0%"> <stop stop-color="#FFF" stop-opacity="0" offset="0%" /> <stop stop-color="#FFF" offset="100%" /> </linearGradient> <linearGradient id="e" x1=".1%" y1="50%" y2="50%"> <stop stop-color="#FFF" stop-opacity="0" offset="0%" /> <stop stop-color="#FFF" offset="100%" /> </linearGradient> <linearGradient id="f" x1="50%" x2="50%" y1="2.2%" y2="100.6%"> <stop stop-color="#D1D2D3" offset="0%" /> <stop stop-color="#F1F1F2" offset="100%" /> </linearGradient> <linearGradient id="g" x1="50%" x2="50%" y1="116.1%" y2="36.5%"> <stop stop-color="#FFF" stop-opacity="0" offset="0%" /> <stop stop-color="#FFF" offset="100%" /> </linearGradient> <linearGradient id="h" x1="50.1%" x2="50.1%" y1="6.1%" y2="100.3%"> <stop stop-color="#010101" offset="0%" /> <stop stop-color="#424143" offset="100%" /> </linearGradient> </defs> <g fill="none" fill-rule="evenodd"> <path fill="url(#a)" d="M1958.5 0H112C51 0 0 51 0 114v2712.6c0 63 55.5 114 123.7 114h1827.5c67 0 123.6-49 123.6-119.6V114c0-63-51-114-116.3-114zm-18.8 267.3v2406.2H135V267.3h1804.7z" /> <path fill="url(#b)" d="M2030 2899c-20.6 19.5-48.5 30-78.6 30h-9.6v11.8h9.6c37.8 0 72.2-15.6 95-41.8l-9-7.5c-2.3 2.6-4.7 5-7.3 7.6z" /> <path fill="url(#c)" d="M11.8 2826.4v-17.8H0v17.8c0 28.2 11 54 29.3 73.8l8.3-8.4c-16-17.6-25.8-40.5-25.8-65.4z" /> <path fill="url(#d)" d="M12 114c0-27.3 10.6-53 30-72.6 1.3-1.3 2.5-2.5 4-3.7l-8.5-8.4C14.5 50.3 0 80.5 0 114v23.4h12V114z" /> <path fill="url(#e)" d="M2033 41.7c9 9 16.4 19.6 21.5 31l8.8-8.7c-17.8-36-54-61.3-97.6-64v11.8c25.6 1.8 49.2 12.2 67.2 30z" /> <path fill="#F5F6F8" d="M1958.5 14H112c-26 0-50.3 10.6-69 29.4-18.8 19-29 44.2-29 70.8v2712.6c0 55.2 49 100 109.5 100H1951c29.5 0 57-10.5 77.3-29.6 20.7-19.5 32.2-46.5 32.2-76V114c0-26.7-10.5-51.8-29.5-70.6-19.2-19-45-29.3-72.7-29.3zm-18.8 253.3v2406.2H135V267.3h1804.7z" /> <path fill="url(#f)" d="M142 71c0 39-31.7 70.5-70.6 70.5C32.4 141.5 1 110 1 71S32.4.5 71.3.5C110.3.5 142 32 142 71z" transform="translate(966 2725)" /> <path fill="url(#g)" d="M142 71c0 39-31.7 70.5-70.6 70.5C32.4 141.5 1 110 1 71c47.8 24.4 98.7 18 141 0z" opacity=".5" transform="translate(966 2725)" /> <path fill="#FFF" d="M1037.4 2727.8c39 0 70.5 29.2 70.5 68.2 0-39-32-70.5-71-70.5s-71 31.5-71 70.5c0-39 31-68.2 70-68.2z" opacity=".1" /> <path fill="#010101" d="M1051.3 2826h-27.8c-7 0-12.5-5.6-12.5-12.5v-27.8c0-7 5.6-12.5 12.5-12.5h27.8c7 0 12.5 5.6 12.5 12.5v27.8c0 6.8-5.6 12.5-12.5 12.5zm-27.8-51.7c-6.3 0-11.3 5-11.3 11.3v27.8c0 6.3 5 11.3 11.3 11.3h27.8c6.3 0 11.3-5 11.3-11.3v-27.8c0-6.3-5-11.3-11.3-11.3h-27.8zm27.8 47h-27.8c-4.3 0-7.8-3.5-7.8-7.8v-27.8c0-4.3 3.5-7.8 7.8-7.8h27.8c4.3 0 7.8 3 7.8 7v28c1 4-3 8-7 8zm-27.8-42.3c-3.7 0-6.6 3-6.6 6.6v27.8c0 3.7 3 6.6 6 6.6h28c3 0 6-3 6-6.6v-27.8c0-3.7-3-6.6-7-6.6h-27z" opacity=".1" /> <path fill="#FFF" d="M1051.3 2778.4c4 0 7.2 3.2 7.2 7.2v27.8c0 4-3.2 7.2-7.2 7.2h-27.8c-4 0-7.2-3.2-7.2-7.2v-27.8c0-4 3.2-7.2 7.2-7.2h27.8zm0-4.7h-27.8c-6.6 0-12 5.3-12 12v27.7c0 6.6 5.4 12 12 12h27.8c6.6 0 12-5.4 12-12v-27.8c0-6.6-5.4-12-12-12z" /> <path fill="url(#h)" d="M16.4.6C25.4.6 32.8 8 32.8 17c0 9-7.4 16.4-16.4 16.4C7.4 33.4 0 26 0 17 0 8 7.3.6 16.4.6z" transform="translate(1021 120)" /> <path fill="#1D1D1D" d="M1939.7 267.3v2406.2H135V267.3h1804.7zm0-10.6H135c-5.7 0-10.5 4.7-10.5 10.6v2406.2c0 5.8 4.7 10.6 10.6 10.6h1805c6 0 11-4 11-10V268c0-5.8-4-10.6-10-10.6z" /> </g></svg>')
}


.screenshot-ipad-landscape img {
    top: 6.5060241%;
    height: 86.98795181%;
    left: 9.11254675%;
    width: 81.84291057%;
    outline-color: #1D1D1D;  
}

.screenshot-ipad-landscape:after {
    background-image: url('data:image/svg+xml;utf8,<svg id="e314a83c-984d-489a-869e-5d79c8cc9a6c" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2940.8 2074.8"><defs><linearGradient id="98aaa846-6cc5-4f26-aae5-dfa42d9a42be" x1="510.96" y1="1577.82" x2="511.96" y2="1577.82" gradientTransform="matrix(0, -2074.8, -2940.6, 0, 4641197.95, 1062219.63)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#929497"/><stop offset="0.49" stop-color="#f1f1f2"/><stop offset="1" stop-color="#929497"/></linearGradient><linearGradient id="da0822f4-74a6-4605-865e-30531d18427b" x1="510.25" y1="1596.38" x2="511.25" y2="1596.38" gradientTransform="matrix(0, -104.6, -49.3, 0, 81617.98, 53505.59)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="07436e64-b6ec-4dbb-b517-daa0af50c2ba" x1="509.43" y1="1587.16" x2="509.43" y2="1588.16" gradientTransform="matrix(0, -37.6, -91.6, 0, 148284.55, 21210.4)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="188dac76-fadf-4a93-8ede-cd7f83a607b6" x1="509.8" y1="1585.61" x2="509.8" y2="1586.61" gradientTransform="matrix(0, -46, -108.1, 0, 171542.09, 25502.8)" xlink:href="#da0822f4-74a6-4605-865e-30531d18427b"/><linearGradient id="9f7444a9-ff10-483b-9cbe-bbd60171627d" x1="510.2" y1="1590.31" x2="511.2" y2="1590.31" gradientTransform="matrix(0, -97.6, -72.7, 0, 115651.6, 49904.69)" xlink:href="#da0822f4-74a6-4605-865e-30531d18427b"/><linearGradient id="006d35d7-4004-49e3-a595-62989f1624a6" x1="510.95" y1="1584.58" x2="510.95" y2="1583.6" gradientTransform="matrix(0, -141, -141, 0, 226154.5, 73080.8)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d1d2d3"/><stop offset="1" stop-color="#f1f1f2"/></linearGradient><linearGradient id="0ab29966-8a60-4d4c-81cf-0fa0de1076e8" x1="510.95" y1="1590.04" x2="510.95" y2="1590.84" gradientTransform="matrix(0, -141, -70.5, 0, 114976, 73080.8)" xlink:href="#da0822f4-74a6-4605-865e-30531d18427b"/><linearGradient id="9eafa589-5212-4e1d-9027-59b62f141a76" x1="509.12" y1="1606.32" x2="509.12" y2="1605.38" gradientTransform="matrix(0, -32.8, -32.8, 0, 52810, 17736.6)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#010101"/><stop offset="1" stop-color="#424143"/></linearGradient></defs><title>ipad-landscape</title><path d="M0,116.3V1962.8c0,61,51,112,114,112H2826.6c63,0,114-55.5,114-123.7V123.6c0-67-49-123.6-119.6-123.6H114C51,0,0,51,0,116.3Zm267.3,18.8H2673.5V1939.8H267.3Z" transform="translate(0 0)" style="fill:url(#98aaa846-6cc5-4f26-aae5-dfa42d9a42be)"/><path d="M2899,44.8c19.5,20.6,30,48.5,30,78.6V133h11.8v-9.6c0-37.8-15.6-72.2-41.8-95l-7.5,9c2.6,2.3,5,4.7,7.6,7.3Z" transform="translate(0 0)" style="fill:url(#da0822f4-74a6-4605-865e-30531d18427b)"/><path d="M2826.4,2063h-17.8v11.8h17.8c28.2,0,54-11,73.8-29.3l-8.4-8.3c-17.6,16-40.5,25.8-65.4,25.8Z" transform="translate(0 0)" style="fill:url(#07436e64-b6ec-4dbb-b517-daa0af50c2ba)"/><path d="M114,2062.8a102.47,102.47,0,0,1-72.6-30,47.34,47.34,0,0,1-3.7-4l-8.4,8.5a114.48,114.48,0,0,0,84.7,37.5h23.4v-12Z" transform="translate(0 0)" style="fill:url(#188dac76-fadf-4a93-8ede-cd7f83a607b6)"/><path d="M41.7,41.8a104.61,104.61,0,0,1,31-21.5L64,11.5C28,29.3,2.7,65.5,0,109.1H11.8a105.26,105.26,0,0,1,30-67.2Z" transform="translate(0 0)" style="fill:url(#9f7444a9-ff10-483b-9cbe-bbd60171627d)"/><path d="M14,116.3V1962.8c0,26,10.6,50.3,29.4,69a100,100,0,0,0,70.8,29H2826.8c55.2,0,100-49,100-109.5V123.8c0-29.5-10.5-57-29.6-77.3-19.5-20.7-46.5-32.2-76-32.2H114A98.7,98.7,0,0,0,43.4,43.8c-19,19.2-29.3,45-29.3,72.7Zm253.3,18.8H2673.5V1939.8H267.3Z" transform="translate(0 0)" style="fill:#f5f6f8"/><path d="M2796,966.8a70.5,70.5,0,1,1-70.5,70.7A70.57,70.57,0,0,1,2796,966.8Z" transform="translate(0 0)" style="fill:url(#006d35d7-4004-49e3-a595-62989f1624a6)"/><path d="M2796,966.8a70.5,70.5,0,1,1,0,141C2820.4,1060,2814,1009.1,2796,966.8Z" transform="translate(0 0)" style="opacity:0.5;isolation:isolate;fill:url(#0ab29966-8a60-4d4c-81cf-0fa0de1076e8)"/><path d="M2727.8,1037.4c0-39,29.2-70.5,68.2-70.5-39,0-70.5,32-70.5,71s31.5,71,70.5,71c-39,0-68.2-31-68.2-70Z" transform="translate(0 0)" style="fill:#fff;opacity:0.10000000149011612;isolation:isolate"/><path d="M2826,1023.5v27.8a12.44,12.44,0,0,1-12.5,12.5h-27.8a12.44,12.44,0,0,1-12.5-12.5v-27.8a12.44,12.44,0,0,1,12.5-12.5h27.8A12.57,12.57,0,0,1,2826,1023.5Zm-51.7,27.8a11.23,11.23,0,0,0,11.3,11.3h27.8a11.23,11.23,0,0,0,11.3-11.3v-27.8a11.23,11.23,0,0,0-11.3-11.3h-27.8a11.23,11.23,0,0,0-11.3,11.3Zm47-27.8v27.8a7.81,7.81,0,0,1-7.8,7.8h-27.8a7.81,7.81,0,0,1-7.8-7.8v-27.8c0-4.3,3-7.8,7-7.8h28c4-1,8,3,8,7Zm-42.3,27.8a6.59,6.59,0,0,0,6.6,6.6h27.8c3.7,0,6.6-3,6.6-6v-28c0-3-3-6-6.6-6h-27.8a6.69,6.69,0,0,0-6.6,7v26.4Z" transform="translate(0 0)" style="fill:#010101;opacity:0.10000000149011612;isolation:isolate"/><path d="M2778.4,1023.5a7.17,7.17,0,0,1,7.2-7.2h27.8a7.17,7.17,0,0,1,7.2,7.2v27.8a7.17,7.17,0,0,1-7.2,7.2h-27.8a7.17,7.17,0,0,1-7.2-7.2Zm-4.7,0v27.8a12,12,0,0,0,12,12h27.7a12,12,0,0,0,12-12v-27.8a12,12,0,0,0-12-12h-27.8a12,12,0,0,0-12,12Z" transform="translate(0 0)" style="fill:#fff"/><path d="M120.6,1037.4a16.4,16.4,0,1,1,16.4,16.4A16.47,16.47,0,0,1,120.6,1037.4Z" transform="translate(0 0)" style="fill:url(#9eafa589-5212-4e1d-9027-59b62f141a76)"/><path d="M267.3,135.1H2673.5V1939.8H267.3Zm-10.6,0V1939.8a10.58,10.58,0,0,0,10.6,10.5H2673.5a10.61,10.61,0,0,0,10.6-10.6V134.7c0-6-4-11-10-11H268c-5.8,0-10.6,4-10.6,10Z" transform="translate(0 0)" style="fill:#1d1d1d"/></svg>');

}


.screenshot-iphone {
    padding-top: 194.14316703%
}

.screenshot-iphone img {
    left: 9.32754881%;
    width: 81.34490239%;
    top: 12.17877095%;
    height: 74.52513966%;
    outline-color: #979797
}

.screenshot-iphone:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 461 895" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#EEE" offset="0%" /> <stop stop-color="#DDD" offset="100%" /> </linearGradient> <rect id="c" width="9" height="37" x="6" y="111" rx="3" /> <filter id="d" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowInnerInner1" /> </filter> <rect id="e" width="9" height="64" x="7" y="268" rx="3" /> <filter id="f" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowInnerInner1" /> </filter> <rect id="g" width="9" height="64" x="7" y="189" rx="3" /> <filter id="h" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowInnerInner1" /> </filter> <rect id="i" width="9" height="64" x="431" y="188" rx="3" /> <filter id="j" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowInnerInner1" /> </filter> <linearGradient id="k" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#E7E7E7" offset="0%" /> <stop stop-color="#EEE" offset="66%" /> <stop stop-color="#DDD" offset="100%" /> </linearGradient> <linearGradient id="l" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#E2E2E2" offset="0%" /> <stop stop-color="#F3F3F3" offset="49.8%" /> <stop stop-color="#F9F9F9" offset="100%" /> </linearGradient> <linearGradient id="m" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#DCDCDC" offset="0%" /> <stop stop-color="#FFF" offset="100%" /> </linearGradient> <ellipse id="a" cx="225" cy="826" rx="34" ry="34" /> <mask id="n" width="68" height="68" x="0" y="0" fill="#fff"> <use xlink:href="#a" /> </mask> </defs> <g fill="none" fill-rule="evenodd" transform="translate(7)"> <use fill="url(#b)" xlink:href="#c" /> <use fill="#000" filter="url(#d)" xlink:href="#c" /> <use fill="url(#b)" xlink:href="#e" /> <use fill="#000" filter="url(#f)" xlink:href="#e" /> <use fill="url(#b)" xlink:href="#g" /> <use fill="#000" filter="url(#h)" xlink:href="#g" /> <use fill="url(#b)" xlink:href="#i" /> <use fill="#000" filter="url(#j)" xlink:href="#i" /> <path fill="url(#k)" d="M10 334c0-1.3 2-2.6 2-4V191c0-1.4-2-2.8-2-4.2V64C10 28.7 38.7 0 74 0h299c35.3 0 64 28.7 64 64v123.2c0 1.3-2 2.6-2 3.8v58c0 1.4 2 2.7 2 4v566c0 35.3-28.7 64-64 64H74c-35.3 0-64-28.6-64-64V334zm26-225v667h375V109H36z" /> <path fill="#959697" d="M10 69h23v16H10zm404 0h23v16h-23zM10 796h23v16H10zm404 0h23v16h-23z" /> <path fill="#F6F8FA" d="M16 66C16 33 43 6 76 6h295c33 0 60 27 60 60v751c0 33-27 60-60 60H76c-33 0-60-27-60-60V66zm20 43v667h375V109H36z" /> <path fill="#979797" d="M36 105c-2.2 0-4 1.8-4 4v667c0 2.2 1.8 4 4 4h375c2.2 0 4-1.8 4-4V109c0-2.2-1.8-4-4-4H36zm0 4v667h375V109H36z" /> <ellipse cx="157" cy="55" fill="#222" rx="5" ry="5" /> <rect width="68" height="6" x="190" y="52" fill="#222" rx="3" /> <ellipse cx="224" cy="26" fill="#222" rx="4" ry="4" /> <use fill="url(#l)" stroke="url(#m)" stroke-width="4" mask="url(#n)" xlink:href="#a" /> </g></svg>')
}

.screenshot-chrome,.screenshot-mac,.screenshot-macbook,.screenshot-pc {
    position: relative;
    padding: 0;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0
}

.screenshot-chrome img,.screenshot-mac img,.screenshot-macbook img,.screenshot-pc img {
    width: 100%;
    display: block
}

.screenshot-chrome:after,.screenshot-mac:after,.screenshot-macbook:after,.screenshot-pc:after {
    background-repeat: no-repeat
}

.screenshot-mac,.screenshot-macbook,.screenshot-pc {
    height: 0
}

.screenshot-mac img,.screenshot-macbook img,.screenshot-pc img {
    position: absolute;
    outline: #000 solid 2px
}

.screenshot-mac:after,.screenshot-macbook:after,.screenshot-pc:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-background-size: cover;
    background-size: cover
}

.screenshot-chrome {
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    padding-top: 66px;
    background: #EAEAEA;
    background: -moz-linear-gradient(top,#EAEAEA 0,#EAEAEA 33px,#FEFEFE 33px,#EAEAEA 65px,#7A7A7A 65px,#7A7A7A 66px,transparent 67px,transparent 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0,#EAEAEA),color-stop(33px,#EAEAEA),color-stop(33px,#FEFEFE),color-stop(65px,#EAEAEA),color-stop(65px,#7A7A7A),color-stop(66px,#7A7A7A),color-stop(67px,transparent),color-stop(100%,transparent));
    background: -webkit-linear-gradient(top,#EAEAEA 0,#EAEAEA 33px,#FEFEFE 33px,#EAEAEA 65px,#7A7A7A 65px,#7A7A7A 66px,transparent 67px,transparent 100%);
    background: -o-linear-gradient(top,#EAEAEA 0,#EAEAEA 33px,#FEFEFE 33px,#EAEAEA 65px,#7A7A7A 65px,#7A7A7A 66px,transparent 67px,transparent 100%);
    background: -ms-linear-gradient(top,#EAEAEA 0,#EAEAEA 33px,#FEFEFE 33px,#EAEAEA 65px,#7A7A7A 65px,#7A7A7A 66px,transparent 67px,transparent 100%);
    background: linear-gradient(to bottom,#EAEAEA 0,#EAEAEA 33px,#FEFEFE 33px,#EAEAEA 65px,#7A7A7A 65px,#7A7A7A 66px,transparent 67px,transparent 100%)
}

.screenshot-chrome:after,.screenshot-chrome:before {
    content: '';
    position: absolute
}

.screenshot-chrome:before {
    left: 115px;
    top: 38px;
    right: 60px;
    height: 22px;
    min-width: 76px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #eaeaea;
    color: grey;
    font-family: sans-serif;
    line-height: 22px;
    padding-left: 24px;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-screenshoturl)
}

.screenshot-chrome:after {
    left: 10px;
    top: 10px;
    width: 100%;
    height: 46px;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="110" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#FFF" offset="0%" /> <stop stop-color="#FEFEFE" offset="100%" /> </linearGradient> <path id="a" d="M.4 5C.2 4.3.4 4 1 4h3c.5 0 1 .5 1 1 0 .6-.5 1-1 1H1L0 4.6l.2.4z" /> <mask id="j" width="4.8" height="2" x="0" y="0" fill="#fff"> <use xlink:href="#a" /> </mask> <path id="b" d="M.4 2.8c-.2-.5 0-1 .5-1h3s1 .5 1 1c0 .6-1 1-1 1H1L0 2.4l.2.5z" /> <mask id="k" width="4.8" height="2" x="0" y="0" fill="#fff"> <use xlink:href="#b" /> </mask> <rect id="c" width="7" height="2" x="1" y="3" rx="1" /> <mask id="l" width="7" height="2" x="0" y="0" fill="#fff"> <use xlink:href="#c" /> </mask> <path id="d" d="M.6 4.5L.4 4V3l2 2H1l-.4-.5z" /> <mask id="m" width="2" height="2.1" x="0" y="0" fill="#fff"> <use xlink:href="#d" /> </mask> <path id="e" d="M.4 5C.2 4.3.4 4 1 4h3c.5 0 1 .5 1 1 0 .6-.5 1-1 1H1L0 4.6l.2.4z" /> <mask id="n" width="4.8" height="2" x="0" y="0" fill="#fff"> <use xlink:href="#e" /> </mask> <path id="f" d="M.4 2.8c-.2-.5 0-1 .5-1h3s1 .5 1 1c0 .6-1 1-1 1H1L0 2.4l.2.5z" /> <mask id="o" width="4.8" height="2" x="0" y="0" fill="#fff"> <use xlink:href="#f" /> </mask> <rect id="g" width="7" height="2" x="1" y="3" rx="1" /> <mask id="p" width="7" height="2" x="0" y="0" fill="#fff"> <use xlink:href="#g" /> </mask> <path id="h" d="M.6 4.5L.4 4V3l2 2H1l-.4-.5z" /> <mask id="q" width="2" height="2.1" x="0" y="0" fill="#fff"> <use xlink:href="#h" /> </mask> <circle id="r" cx="3" cy="3" r="3" /> <filter id="s" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0.878431373 0 0 0 0 0.266666667 0 0 0 0 0.243137255 0 0 0 1 0" in="shadowInnerInner1" /> </filter> <circle id="t" cx="13" cy="3" r="3" /> <filter id="u" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0.874509804 0 0 0 0 0.623529412 0 0 0 0 0.133333333 0 0 0 1 0" in="shadowInnerInner1" /> </filter> <circle id="v" cx="23" cy="3" r="3" /> <filter id="w" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0.101960784 0 0 0 0 0.670588235 0 0 0 0 0.168627451 0 0 0 1 0" in="shadowInnerInner1" /> </filter> </defs> <g fill="none" fill-rule="evenodd"> <path fill="url(#i)" d="M0 12c1 0 1.8-1 2-2l2.6-8C5 1 6 0 7.2 0h65.6c1 0 2.2 1 2.6 2l2.5 8c0 1 1 2 2 2H0z" transform="translate(-45.000000, -46.000000) translate(40.000000, 40.000000) translate(5.000000, 6.000000) translate(30.000000, 0.000000)" /> <path stroke="#4C4C4B" d="M98.8 5.8l1.2-1.3-1.3 1.3-1.2-1.3 1.3 1.3zm0 0L97.5 7l1.3-1.3L100 7l-1-1z" stroke-linecap="square" /> <g transform="translate(-45.000000, -46.000000) translate(40.000000, 40.000000) translate(5.000000, 6.000000) translate(59.000000, 18.000000)"> <circle cx="2" cy="2" r="2" stroke="#828282" /> <rect width="1" height="3" x="4.3" y="3.3" fill="#828282" transform="translate(4.814215, 4.814215) rotate(-45.000000) translate(-4.814215, -4.814215)" rx=".5" /> </g> <path fill="#6E6D6E" d="M46.5 18l3 3h-6m.5 0h5v3h-5v-3zm2 .5c0-.3.2-.5.5-.5s.5.2.5.5V24h-1v-2.5zm1.5-3.5h1v1.5l-1-1" /> <g fill="#6E6D6E"> <path d="M33 22c-.5.3-1 .5-1.5.5-1 0-2-1-2-2s1-2 2-2 2 1 2 2H35c0-2-1.6-3.5-3.5-3.5-2 0-3.5 1.6-3.5 3.5 0 2 1.6 3.5 3.5 3.5 1 0 2-.4 2.5-1l.2-.6c0-.4-.3-.7-.7-.7H33v.3z" /> <path d="M35 17.5v3h-3" /> </g> <g fill="#D1D2CF" stroke="#D0CFD1" stroke-width="2" transform="translate(-45.000000, -46.000000) translate(40.000000, 40.000000) translate(5.000000, 6.000000) translate(18.000000, 21.000000) scale(-1, 1) translate(-18.000000, -21.000000) translate(14.000000, 17.000000)"> <use mask="url(#j)" transform="translate(2.553975, 5.053975) rotate(-315.000000) translate(-2.553975, -5.053975)" xlink:href="#a" /> <use mask="url(#k)" transform="translate(2.553975, 2.895772) scale(1, -1) rotate(-315.000000) translate(-2.553975, -2.895772)" xlink:href="#b" /> <use mask="url(#l)" xlink:href="#c" /> <use mask="url(#m)" transform="translate(1.469263, 3.985017) rotate(-315.000000) translate(-1.469263, -3.985017)" xlink:href="#d" /> </g> <g fill="#D1D2CF" stroke="#D0CFD1" stroke-width="2" transform="translate(-45.000000, -46.000000) translate(40.000000, 40.000000) translate(5.000000, 6.000000) translate(0.000000, 17.000000)"> <use mask="url(#n)" transform="translate(2.553975, 5.053975) rotate(-315.000000) translate(-2.553975, -5.053975)" xlink:href="#e" /> <use mask="url(#o)" transform="translate(2.553975, 2.895772) scale(1, -1) rotate(-315.000000) translate(-2.553975, -2.895772)" xlink:href="#f" /> <use mask="url(#p)" xlink:href="#g" /> <use mask="url(#q)" transform="translate(1.469263, 3.985017) rotate(-315.000000) translate(-1.469263, -3.985017)" xlink:href="#h" /> </g> <g transform="translate(-45.000000, -46.000000) translate(40.000000, 40.000000) translate(5.000000, 6.000000) translate(1.000000, 0.000000)"> <use fill="#FF6059" xlink:href="#r" /> <use fill="#000" filter="url(#s)" xlink:href="#r" /> </g> <g transform="translate(-45.000000, -46.000000) translate(40.000000, 40.000000) translate(5.000000, 6.000000) translate(1.000000, 0.000000)"> <use fill="#FFC02F" xlink:href="#t" /> <use fill="#000" filter="url(#u)" xlink:href="#t" /> </g> <g transform="translate(-45.000000, -46.000000) translate(40.000000, 40.000000) translate(5.000000, 6.000000) translate(1.000000, 0.000000)"> <use fill="#28CA42" xlink:href="#v" /> <use fill="#000" filter="url(#w)" xlink:href="#v" /> </g> </g></svg>')
}

.screenshot-macbook {
    padding-top: 57.47572816%
}

.screenshot-macbook img {
    left: 11.84466019%;
    width: 76.31067961%;
    top: 5.40540541%;
    height: 82.77027027%;
    outline-color: #010000
}

.screenshot-macbook:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515 296"> <defs> <radialGradient id="a" cx="0%" cy="26.2%" r="40.7%" fx="0%" fy="26.2%"> <stop stop-color="#0E0036" offset="0%" /> <stop stop-color="#26006E" offset="100%" /> </radialGradient> <linearGradient id="b" x1="50%" x2="50%" y1="100%" y2="0%"> <stop stop-color="#404040" offset="0%" /> <stop stop-color="#222" offset="100%" /> </linearGradient> <linearGradient id="c" x1="50%" x2="50%" y1="-5.6%" y2="130.5%"> <stop stop-color="#9B9DA3" offset="0%" /> <stop stop-color="#2E2F31" offset="100%" /> </linearGradient> <linearGradient id="d" x1="-.8%" y1="50%" y2="50%"> <stop stop-color="#7D7E80" offset="0%" /> <stop stop-color="#F2F3F3" offset="1.9%" /> <stop stop-color="#888A91" offset="5.4%" /> <stop stop-color="#D6D6D7" offset="13.2%" /> <stop stop-color="#E9EAEB" offset="24.6%" /> <stop stop-color="#F1F2F2" offset="100%" /> </linearGradient> <radialGradient id="e" cx="0%" cy="-10.6%" r="52.1%" fx="0%" fy="-10.6%"> <stop stop-color="#FCFCFC" offset="0%" /> <stop stop-color="#D7D8DB" offset="88.5%" /> <stop stop-color="#A8A8A8" offset="100%" /> </radialGradient> </defs> <g fill="none" fill-rule="evenodd"> <g transform="translate(47)"> <path fill="#010000" d="M13 0C5.8 0 0 5.8 0 13v264c0 2.8 2.2 5 5 5h410c2.8 0 5-2.2 5-5V13c0-7.2-5.8-13-13-13H13zm1 16v245h393V16H14z" /> <circle cx="211.5" cy="7.5" r="2.5" fill="url(#a)" stroke="url(#b)" /> </g> <path fill="url(#c)" d="M14.7 15.4C8.3 15.4 0 11.7 0 10h515c0 1.7-8.3 5.4-14.7 5.4H14.7z" transform="translate(0 280)" /> <path fill="url(#d)" d="M0 0h260v10H0" transform="translate(0 280)" /> <path fill="url(#d)" d="M255 0h260v10H255" transform="rotate(180 385 145)" /> <path fill="url(#e)" d="M228.7 6h59c3.8 0 7-2.6 7.8-6H221c1 3.5 4 6 7.7 6z" transform="translate(0 280)" /> </g></svg>')
}

.screenshot-mac {
    padding-top: 76.32902299%
}

.screenshot-mac img {
    left: 4.09482759%;
    width: 91.95402299%;
    top: 5.36470588%;
    height: 67.76470588%
}

.screenshot-mac:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2784 2124" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#818185" offset="0%" /> <stop stop-color="#8D8E92" offset="8.5%" /> <stop stop-color="#97989C" offset="19.1%" /> <stop stop-color="#B0B1B5" offset="39.9%" /> <stop stop-color="#DEE0E1" offset="55%" /> <stop stop-color="#A3A4A9" offset="59.7%" /> <stop stop-color="#78797D" offset="63.3%" /> <stop stop-color="#78797D" offset="74.4%" /> <stop stop-color="#8A8B8F" offset="77.6%" /> <stop stop-color="#909094" offset="95.2%" /> <stop stop-color="#939399" offset="98.1%" /> <stop stop-color="#B8B8BE" offset="98.8%" /> <stop stop-color="#D2D3D5" offset="100%" /> <stop stop-color="#999AA0" offset="100%" /> </linearGradient> <linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#FFF" stop-opacity="0" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="46.2%" /> <stop stop-color="#FFF" offset="56.5%" /> <stop stop-color="#FFF" stop-opacity="0" offset="65.5%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </linearGradient> <radialGradient id="d" cx="9.4%" cy="91.8%" r="14.8%" fx="9.4%" fy="91.8%"> <stop stop-color="#E9EAEC" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </radialGradient> <radialGradient id="e" cx="92.6%" cy="90.5%" r="30.2%" fx="92.6%" fy="90.5%"> <stop stop-color="#E9EAEC" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </radialGradient> <radialGradient id="f" cx="14.9%" cy="93.5%" r="22.8%" fx="14.9%" fy="93.5%"> <stop stop-color="#FFF" stop-opacity=".8" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </radialGradient> <radialGradient id="g" cx="84.9%" cy="96.5%" r="20.2%" fx="84.9%" fy="96.5%"> <stop stop-color="#FFF" stop-opacity=".8" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </radialGradient> <radialGradient id="h" cx="97.7%" cy="92.1%" r="19.2%" fx="97.7%" fy="92.1%"> <stop stop-color="#FFF" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </radialGradient> <radialGradient id="i" cx="1%" cy="92.5%" r="20.1%" fx="1%" fy="92.5%"> <stop stop-color="#FFF" offset="0%" /> <stop stop-color="#FFF" stop-opacity="0" offset="100%" /> </radialGradient> <path id="b" d="M148 0s-19.6 275.6-43 306.2c-12.3 16-97.4 94.3-102 99-4.6 5-.5 7.4-.5 7.4s12.5 11.8 43 13.8c19.5 1.2 72.2.7 86.8.7h483.2s106.5 1 151 0c14.6 0 42.5 1 55.2 0 30.3-3 55.8-14 55.8-14s4-2-.5-7-89.7-83-102-99C751.6 276 730.2 1 732 0H148z" /> <pattern id="j" width="512" height="512" x="-511.2" y="-512" patternUnits="userSpaceOnUse"> <use xlink:href="#a" /> </pattern> <linearGradient id="m" x1="0%" y1="69.8%" y2="71%"> <stop stop-color="#8B8C8E" offset="0%" /> <stop stop-color="#8B8B8F" offset="5.6%" /> <stop stop-color="#E4E6E8" offset="11.7%" /> <stop stop-color="#DBDBDD" offset="50.5%" /> <stop stop-color="#D4D4D8" offset="76.1%" /> <stop stop-color="#B4B5B9" offset="94%" /> <stop stop-color="#818286" offset="100%" /> </linearGradient> <path id="l" d="M789 12.6c77 0 90-12.5 89.8-12.3 0 0 .4 0 .4.2v4c0 1.3-1 2-1.8 3 0 0-8.4 12-91.6 12H65.5c-54.5-2-63-12-63-12C2 6.5 1 5.8 1 4.5v-4c0-.3.2-.4.4-.3 0 0 12.7 11.3 60.2 12.4H789z" /> <filter id="k" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feOffset dy="-1" in="SourceAlpha" result="shadowOffsetOuter1" /> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0" in="shadowOffsetOuter1" /> </filter> <linearGradient id="n" x1="50%" x2="50%" y1="0%" y2="100%"> <stop stop-color="#A4A4A4" offset="0%" /> <stop stop-color="#B1B5B8" offset="100%" /> </linearGradient> <radialGradient id="o" cx="-15.5%" cy="141.7%" r="92.1%" fx="-15.5%" fy="141.7%"> <stop stop-color="#FFF" offset="0%" /> <stop stop-color="#CECECE" stop-opacity=".8" offset="2.8%" /> <stop stop-color="#252525" offset="100%" /> </radialGradient> <radialGradient id="r" cy="0%" r="100%" fx="50%" fy="0%"> <stop stop-color="#2F2E32" offset="0%" /> <stop stop-color="#101518" offset="100%" /> </radialGradient> <circle id="p" cx="10.5" cy="10.5" r="5.4" /> <filter id="q" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feMorphology radius=".5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1" /> <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1" /> <feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter1" result="shadowBlurOuter1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" in="shadowBlurOuter1" /> </filter> <filter id="s" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceGraphic" /> </filter> <filter id="u" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceGraphic" /> </filter> <filter id="v" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceGraphic" /> </filter> <radialGradient id="w" cx="34.8%" cy="15.6%" r="79%" fx="34.8%" fy="15.6%"> <stop stop-color="#101722" offset="0%" /> <stop stop-color="#525669" offset="100%" /> </radialGradient> <filter id="x" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceGraphic" /> </filter> <filter id="y" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceGraphic" /> </filter> </defs> <g fill="none" fill-rule="evenodd"> <g transform="translate(953 1695)"> <use fill="url(#a)" xlink:href="#b" /> <use fill="url(#c)" fill-opacity=".9" style="mix-blend-mode:soft-light" xlink:href="#b" /> <use fill="url(#d)" style="mix-blend-mode:soft-light" xlink:href="#b" /> <use fill="url(#e)" style="mix-blend-mode:soft-light" xlink:href="#b" /> <use fill="url(#f)" fill-opacity=".7" style="mix-blend-mode:soft-light" xlink:href="#b" /> <use fill="url(#g)" fill-opacity=".7" style="mix-blend-mode:soft-light" xlink:href="#b" /> <use fill="url(#h)" fill-opacity=".8" style="mix-blend-mode:luminosity" xlink:href="#b" /> <use fill="url(#i)" fill-opacity=".8" style="mix-blend-mode:luminosity" xlink:href="#b" /> <use fill="url(#j)" fill-opacity="0" xlink:href="#b" /> </g> <g transform="translate(953 2104.5)"> <use fill="#000" filter="url(#k)" xlink:href="#l" /> <use fill="url(#m)" xlink:href="#l" /> </g> <path fill="#000" d="M0 64C0 28.6 28.7 0 64 0h2656c35.3 0 64 28.7 64 64v1567c0 35.4-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm114 50h2560v1440H114V114z" /> <path fill="url(#n)" d="M23 16c2 0 5.4-2.7 10-2.7 7.8 0 11 5.6 11 5.6s-6.2 3-6.2 10c0 8 7.5 11 7.5 11S40 55 33 55c-3.2 0-5.7-2.2-9.2-2.2-3.5 0-7 2.5-9.2 2.5-6.4 0-14.6-14-14.6-25s7-17 13.4-17c4.2 0 7.5 2.5 9.7 2.5zm2-11.2C28.7 0 33.8 0 33.8 0s.7 4.5-3 9c-3.8 4.5-8.2 3.8-8.2 3.8s-.8-3.7 2.4-8z" transform="translate(1369.5 1592.7)" /> <g transform="translate(1382 23)"> <circle cx="10.5" cy="10.5" r="10.5" fill="url(#o)" /> <mask id="t" fill="#fff"> <use xlink:href="#p" /> </mask> <use fill="#000" filter="url(#q)" xlink:href="#p" /> <use fill="url(#r)" xlink:href="#p" /> <circle cx="15.6" cy="7.6" r="1.1" fill="#2F3046" filter="url(#s)" mask="url(#t)" /> <circle cx="15.6" cy="7.6" r="1.1" fill="#21271B" filter="url(#u)" mask="url(#t)" /> <ellipse cx="9.1" cy="7.6" fill="#323137" filter="url(#v)" mask="url(#t)" transform="rotate(-29 9.052 7.603)" rx="2.5" ry="1.1" /> <circle cx="11.2" cy="10.5" r="2.5" fill="url(#w)" filter="url(#x)" mask="url(#t)" transform="rotate(-16 11.224 10.5)" /> <circle cx="10.7" cy="11.8" r=".7" fill="#505760" filter="url(#y)" mask="url(#t)" /> </g> </g></svg>')
}

.screenshot-pc {
    padding-top: 78.14166032%
}

.screenshot-pc img {
    left: 1.25666413%;
    width: 97.48667174%;
    top: 1.60818713%;
    height: 70.1754386%
}

.screenshot-pc:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2626 2051" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="b" x1="2.8%" y1="50%" y2="50%"> <stop stop-color="#2A2A2A" offset="0%" /> <stop stop-color="#393939" offset="49.9%" /> <stop stop-color="#2C2C2C" offset="100%" /> </linearGradient> <linearGradient id="d" x1="50%" x2="50%" y1="50%" y2="100%"> <stop stop-opacity="0" offset="0%" /> <stop stop-opacity=".4" offset="100%" /> </linearGradient> <path id="c" d="M14 85.4c-3.7-2-12.5-11-12.5-12.8 0-2 1077-2 1077 0 0 1.8-8 10-12.4 12.5-4 3-28 11-29 11H44c-1 0-25.8-8-29.4-10z" /> <filter id="e" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset dx="5" in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.502292799 0" in="shadowInnerInner1" result="shadowMatrixInner1" /> <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner2" /> <feOffset dx="-5" in="shadowBlurInner2" result="shadowOffsetInner2" /> <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.502292799 0" in="shadowInnerInner2" result="shadowMatrixInner2" /> <feMerge> <feMergeNode in="shadowMatrixInner1" /> <feMergeNode in="shadowMatrixInner2" /> </feMerge> </filter> <linearGradient id="f" x1="100%" x2="0%" y1="61.7%" y2="61.7%"> <stop stop-color="#494949" offset="0%" /> <stop stop-color="#E4E4E4" offset=".5%" /> <stop stop-color="#FFF" offset="1.5%" /> <stop stop-color="#ECECEC" offset="2.6%" /> <stop stop-color="#9C9C9C" offset="3.5%" /> <stop stop-color="#6C6B6B" offset="4.3%" /> <stop stop-color="#6E6E6E" offset="5%" /> <stop stop-color="#868686" offset="6.1%" /> <stop stop-color="#E2E2E2" offset="9.6%" /> <stop stop-color="#E2E2E2" offset="90.8%" /> <stop stop-color="#868686" offset="94.1%" /> <stop stop-color="#777" offset="95.9%" /> <stop stop-color="#CBCBCB" offset="97.2%" /> <stop stop-color="#FFF" offset="98.4%" /> <stop stop-color="#E5E5E5" offset="99.3%" /> <stop stop-color="#1C1C1C" offset="100%" /> </linearGradient> <linearGradient id="i" x1="100%" x2="0%" y1="57.9%" y2="50%"> <stop stop-color="#D1D1D1" offset="0%" /> <stop stop-color="#F5F5F5" offset="26%" /> <stop stop-color="#F4F4F4" offset="70.7%" /> <stop stop-color="#D2D2D2" offset="100%" /> </linearGradient> <path id="h" d="M1.4 62.4c-4.3 8 27.5 8 46.6 8h984c19 0 51.4 0 46-8l-28-48c-4.2-5.8-26-5.7-30-6 .2.2-311.4-8-480-8-168.6 0-480.2 8.2-480 8-4 .3-25.5.2-30 6-14 24.2-28.6 48-28.6 48z" /> <filter id="g" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" /> <feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter1" result="shadowBlurOuter1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" /> </filter> <linearGradient id="j" x1="0%" y1="50%" y2="50%"> <stop stop-color="#868686" offset="0%" /> <stop stop-color="#ECECEC" offset="9.9%" /> <stop stop-color="#EBEBEB" offset="89.9%" /> <stop stop-color="#858585" offset="100%" /> </linearGradient> <linearGradient id="k" x1="50%" x2="50%" y1="1.3%" y2="100%"> <stop stop-color="#878686" offset="0%" /> <stop stop-color="#9A9A9A" offset="8%" /> <stop stop-color="#BDBDBD" offset="32.9%" /> <stop stop-color="#C9C9C9" offset="59.2%" /> <stop stop-color="#DEDEDE" offset="100%" /> </linearGradient> <linearGradient id="l" x1="89%" x2="74.3%" y1="-5.6%" y2="53.4%"> <stop stop-color="#737373" offset="0%" /> <stop stop-color="#48484B" offset="100%" /> </linearGradient> <path id="m" d="M0 14C0 6.3 6.3 0 14 0h2598c7.7 0 14 6.3 14 14v1525c0 7.7-6.3 14-14 14H14c-7.7 0-14-6.3-14-14V14zm33 19h2560v1440H33V33z" /> <filter id="n" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.195255888 0" in="shadowInnerInner1" /> </filter> <linearGradient id="o" x1="89%" x2="74.3%" y1="-5.6%" y2="53.4%"> <stop stop-color="#2C2C2C" offset="0%" /> <stop stop-color="#1A1A1A" offset="100%" /> </linearGradient> <path id="a" d="M8 14c0-3.3 2.7-6 6-6h2598c3.3 0 6 2.7 6 6v1525c0 3.3-2.7 6-6 6H14c-3.3 0-6-2.7-6-6V14zm25 19h2560v1440H33V33z" /> <filter id="p" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation=".5" in="SourceAlpha" result="shadowBlurInner1" /> <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1" /> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" /> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.252943841 0" in="shadowInnerInner1" /> </filter> <mask id="q" width="2616" height="1543" x="-3" y="-3"> <path fill="#fff" d="M5 5h2616v1543H5z" /> <use xlink:href="#a" /> </mask> </defs> <g fill="none" fill-rule="evenodd"> <g transform="translate(773 1955)"> <use fill="url(#b)" xlink:href="#c" /> <use fill="url(#d)" xlink:href="#c" /> <use fill="#000" filter="url(#e)" xlink:href="#c" /> </g> <path fill="url(#f)" d="M1 64.4v7c0 7 29 7 47 7h984c17.8 0 47.3 0 47-7v-7c-9.4-16-29-41-29-41-4.2-5.8-26-5.7-30-6 .2.2-311.4-8-480-8-168.6 0-480.2 8.2-480 8-4 .3-25.5.2-30 6-9 16-23.6 31.7-29 41z" transform="translate(773 1955)" /> <g transform="translate(773 1955)"> <use fill="#000" filter="url(#g)" xlink:href="#h" /> <use fill="url(#i)" xlink:href="#h" /> </g> <path fill="url(#j)" d="M540 457c100.5 0 182-3.8 182-8 0-5.2-81.5-9-182-9s-182 3.8-182 9c0 4.2 81.5 8 182 8zm0-1c98.3 0 178-3.4 178-7.5 0-4-79.7-7.5-178-7.5s-178 3.4-178 7.5c0 4 79.7 7.5 178 7.5z" transform="translate(773 1520)" /> <path fill="url(#k)" d="M498 27H395v421c0 .6.4 1 1 1h288c.6 0 1-.4 1-1V27H582V0h-84v27z" transform="translate(773 1520)" /> <use fill="url(#l)" xlink:href="#m" /> <use fill="#000" filter="url(#n)" xlink:href="#m" /> <use fill="url(#o)" xlink:href="#a" /> <use fill="#000" filter="url(#p)" xlink:href="#a" /> <use stroke="#000" stroke-width="6" mask="url(#q)" xlink:href="#a" /> <g fill="#6C6D72" transform="translate(2228 1507)"> <g transform="translate(314)"> <path d="M5 2.6c-3 1-5 4-5 7.4 0 4.4 3.6 8 8 8s8-3.6 8-8c0-3.4-2-6.3-5-7.4v2.2c1.8 1 3 3 3 5.2 0 3.3-2.7 6-6 6s-6-2.7-6-6c0-2.2 1.2-4.2 3-5.2V2.6z" /> <rect width="2" height="10" x="7" rx="1" /> </g> <circle cx="236.5" cy="8.5" r="2.5" /> <circle cx="158.5" cy="8.5" r="2.5" /> <circle cx="80.5" cy="8.5" r="2.5" /> <circle cx="2.5" cy="8.5" r="2.5" /> </g> </g></svg>')
}