/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* /CSS RESET */
/* FONTS */

.inter-serif {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.ubuntu-light {
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.ubuntu-regular {
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.ubuntu-medium {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.ubuntu-bold {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.ubuntu-light-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.ubuntu-regular-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.ubuntu-medium-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.ubuntu-bold-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: italic;
}

/* /FONTS */

html {
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
}

html.loading {
    visibility: hidden;
}

body {
    background: #edeef7;
}

#nav-main {
    height: 90px;
    width: 100%;
    background: white;
    display: block;
}

#nav-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

#nav-secondary {
    height: 60px;
    padding: 14px 0;
    border-bottom: 0.25rem solid white;
}

#logo {
    display: block;
}

#heading {
    display: block;
    margin-left: auto;
    text-transform: uppercase;
    font-family: "Ubuntu", sans-serif;
    font-size: 24px;
}

.clearfix {
    clear: both;
}

#inputForm {
    line-height: 1.2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-size: 12px;
}

#inputForm input[type=file] {
    cursor: pointer;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 140px;
    height: 8px;
    vertical-align: middle;
    border: 1px solid #1C538B;
    border-radius: 6px;
    background: linear-gradient(to right, #1C538B 50%, #fff 50%);
    outline: none;
    transition: background 150ms ease-in-out;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: #1C538B;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -1px;
}

input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    background: #1C538B;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-track {
    height: 8px;
    background: transparent;
}

#fileInput, #reloadButton {
    display: none;
}

.button {
    margin: 0;
    padding: 9px 18px;
    border-radius: 6px;
    border: none;
    height: 30px;
    display: inline-block;
    line-height: 1;
    text-align: left;
    background-color: #1C538B;
    color: #fff;
    vertical-align: middle;
    text-transform: uppercase;
    cursor: pointer;
}

.button:hover {
    background-color: #035EBB;
}

.buton:active, .button:focus {
    background-color: #03396F;
}

.button::after {
    content: "";
    position: relative;
    width: 16px;
    height: 16px;
    top: -2px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    vertical-align: middle;
    margin-left: 8px;
}

label[for="fileInput"] .button::after {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20viewBox%3D%220%200%2016%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M14.7038%202.00521V3.5H1.14084V0.838542C1.14084%200.595485%201.22325%200.394966%201.38808%200.236979C1.55291%200.0789921%201.76483%200%202.02384%200H5.41457C5.65004%200%205.85018%200.0850687%206.01501%200.255208L6.82737%201.09375C6.87447%201.14236%206.94511%201.16667%207.03929%201.16667H13.8914C14.1269%201.16667%2014.3211%201.24566%2014.4742%201.40365C14.6272%201.56163%2014.7038%201.76215%2014.7038%202.00521ZM1.14084%204.52083H14.7038H14.9863C15.5985%204.52083%2015.8811%204.88541%2015.834%205.61458L14.9863%2013.0885C14.9157%2013.6962%2014.6449%2014%2014.1739%2014H1.74128C1.2468%2014%200.952466%2013.6962%200.858278%2013.0885C0.340248%208.42185%200.0576899%205.85764%200.0105961%205.39583C-0.0600441%204.8125%200.222514%204.52083%200.858278%204.52083H1.14084Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
}

label[for="reloadButton"] .button::after {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M8.00937%205.99331H5.10539C5.18345%205.64994%205.28493%205.32999%205.40984%205.03344C5.53474%204.7369%205.69087%204.45597%205.87822%204.19064L5.8548%204.21405C6.13583%203.80825%206.45979%203.45318%206.8267%203.14883C7.1936%202.84448%207.59563%202.59866%208.03279%202.41137L8.05621%202.38796C8.21233%202.32553%208.36846%202.2709%208.52459%202.22408C8.68072%202.17726%208.83685%202.13824%208.99297%202.10702C9.1491%202.07581%209.31304%202.0524%209.48478%202.03679C9.65652%202.02118%209.82826%202.01338%2010%202.01338C10.1717%202.01338%2010.3474%202.02118%2010.5269%202.03679C10.7065%202.0524%2010.8821%202.07581%2011.0539%202.10702H11.007C11.5066%202.21628%2011.9672%202.38796%2012.3888%202.62207C12.8103%202.85619%2013.1928%203.13712%2013.5363%203.46488L14.9415%202.0602C14.6292%201.74805%2014.2896%201.46711%2013.9227%201.21739C13.5558%200.967669%2013.1694%200.756969%2012.7635%200.585284L12.7166%200.561873C12.5293%200.483835%2012.3302%200.409699%2012.1194%200.339465C11.9087%200.269231%2011.6862%200.210702%2011.452%200.16388L11.4052%200.140468C11.2022%200.109253%2010.9797%200.0780381%2010.7377%200.0468227C10.4957%200.0156073%2010.2498%200%2010%200C9.75019%200%209.50429%200.0156073%209.26229%200.0468227C9.0203%200.0780381%208.7822%200.117057%208.54801%200.16388L8.59485%200.140468C8.34504%200.202899%208.10695%200.269231%207.88056%200.339465C7.65417%200.409699%207.4395%200.491638%207.23653%200.585284L7.28337%200.561873C6.64324%200.827203%206.06558%201.17447%205.55035%201.60368C5.03513%202.03289%204.59017%202.52062%204.21546%203.06689L4.19204%203.0903C3.95784%203.44928%203.75098%203.83556%203.57143%204.24916C3.39188%204.66277%203.25527%205.09587%203.16159%205.54849L3.13817%205.59532C3.13817%205.65775%203.13037%205.72408%203.11475%205.79431C3.09914%205.86455%203.09133%205.93088%203.09133%205.99331H0L4.00468%209.99666L8.00937%205.99331ZM11.9906%208.00669H14.8946C14.7541%208.66221%2014.5043%209.25919%2014.1452%209.79766C13.7861%2010.3361%2013.3411%2010.777%2012.8103%2011.1204L12.7869%2011.1438C12.5371%2011.3155%2012.2639%2011.4638%2011.9672%2011.5886C11.6706%2011.7135%2011.3583%2011.8149%2011.0304%2011.893H11.007C10.8509%2011.9242%2010.687%2011.9476%2010.5152%2011.9632C10.3435%2011.9788%2010.1717%2011.9866%2010%2011.9866C9.82826%2011.9866%209.65262%2011.9788%209.47307%2011.9632C9.29352%2011.9476%209.12568%2011.9242%208.96955%2011.893H8.99297C8.64949%2011.8149%208.32943%2011.7135%208.03279%2011.5886C7.73614%2011.4638%207.45511%2011.3077%207.1897%2011.1204L7.21311%2011.1438C7.0726%2011.0502%206.93989%2010.9526%206.81499%2010.8512C6.69008%2010.7497%206.57299%2010.6444%206.4637%2010.5351L5.05855%2011.9398C5.37081%2012.252%205.71038%2012.5329%206.07728%2012.7826C6.44419%2013.0323%206.8306%2013.243%207.23653%2013.4147L7.28337%2013.4381C7.48634%2013.5318%207.70101%2013.6137%207.9274%2013.6839C8.15379%2013.7542%208.37627%2013.8127%208.59485%2013.8595C8.79782%2013.8907%209.0203%2013.922%209.26229%2013.9532C9.50429%2013.9844%209.75019%2014%2010%2014C10.2498%2014%2010.4957%2013.9844%2010.7377%2013.9532C10.9797%2013.922%2011.2178%2013.8829%2011.452%2013.8361L11.4052%2013.8595C12.3263%2013.6566%2013.1616%2013.3016%2013.911%2012.7943C14.6604%2012.2871%2015.2849%2011.6667%2015.7845%2010.9331L15.808%2010.9097C16.0422%2010.5507%2016.249%2010.1644%2016.4286%209.75084C16.6081%209.33723%2016.7447%208.90413%2016.8384%208.4515L16.8618%208.40468C16.8618%208.34225%2016.8696%208.27592%2016.8852%208.20569C16.9009%208.13545%2016.9087%208.06912%2016.9087%208.00669H20L15.9953%204.00334L11.9906%208.00669Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
}

label[for="opacityInput"] {
    color: #1C538B;
    height: 30px;
    padding: 9px 18px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.file-name {
    color: #1C538B;
    height: 30px;
    padding: 9px 18px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 32px;
    border: none;
}

#previewDimensions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1em 0;
    line-height: 1.2;
    text-align: left;
    border-top: 0.25rem solid white;
}

#previewDimensions:empty {
    display: none;
}

#previewDimensions em {
    font-style: normal;
    font-weight: bold;
    color: #1C538B;
}

.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;;
    text-align: center;
}

.text-left {
    text-align: left;
}

.bg-white {
    background: white;
}

#previewWrapper {
    display: inline-block;
    padding: 1rem;
    position: relative;
    line-height: 0;
    transform-origin: top left;
}

#imagePreview {
    height: 100%;
    max-height: 70vh;
    width: auto;
    max-width: 100%;
}

#safeZoneMask {
    display: none;
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0.5;
    overflow: hidden;
}

#safeZoneMask.mobile {
    display: block;
    background-position: center center;
    background-image: url("img/safeZoneMobile.png");
}

#safeZoneMask.mobile::before, #safeZoneMask.mobile::after {
    content: "";
    background-color: #D61116;
    position: absolute;
    width: 100%;
    height: 10%;
    left: 0;
}

#safeZoneMask.mobile::before {
    top: 0;
}

#safeZoneMask.mobile::after {
    bottom: 0;
}

#safeZoneMask.desktop {
    display: block;
    background-image: url("img/safeZoneDesktop.png");
}

#safeZoneMask.desktop::after {
    content: "";
    background-image: url("img/safeZoneDesktopRepeat.png");
    position: absolute;
    width: 100%;
    height: 15%;
    bottom: 0;
    left: 0;
    background-size: contain;
}

#safeZoneMask.desktop::before {
    content: "";
    background-image: url("img/mockupDesktop.png");
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    z-index: 100;
}

#safeZoneMask.desktop.noMockup::before {
    display: none;
}

#errorMessage {
    font-size: 1.2rem;
    line-height: 1.2;
}

#mainContent {
    width: 100%;
    height: calc(100vh - 150px);
}

#dropZone {
    display: none;
    background-color: #edeef7;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#dropZoneInner, #dropZoneText {
    display: flex;
    justify-content: center;
    align-items: center;
}

#dropZoneInner {
    height: 100%;
    width: 100%;
}

#dropZoneText {
    position: relative;
    width: 70%;
    height: 70%;
    border: 4px #1C538B dashed;
    color: #1C538B;
    border-radius: 32px;
    font-size: 1.5rem;
    font-weight: bold;
    overflow:hidden;
    pointer-events: none;
}