/* Minification failed. Returning unminified contents.
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(23,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(73,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(74,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(106,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(107,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(190,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(191,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(233,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(234,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(256,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(257,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(276,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(277,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(296,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(399,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(400,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(408,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(409,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Josefin+Sans:wght@300;400;700&display=swap');

:root {

    --primary-color: #7B9F8B;
    --secondary-color: #fff;

}

/**************************************
App 1 Styles
**************************************/

.app-1 {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 110px;
    grid-template-rows: 1fr 110px;
    background: url(./img/background.png) top center no-repeat;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 40px;
    height: 812px;
    width: 375px;
    position: relative;
}

.app-1 .app-1__account {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
}

.app-1 .app-1__logo {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.app-1 .app-1__logo img {
    width: 240px;
}

.app-1 .app-1__button-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 0 40px 40px 40px;
}

.app-1 .app-1__button {
    width: 100%;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-family: 'Josefin Sans', Arial, sans-serif;
    text-align: center;
    height: 70px;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-weight: bold;
    text-transform: uppercase;
    max-width: 500px;
}

/**************************************
App 2 Styles
**************************************/

.app-2 {
    border-radius: 40px;
    height: 812px;
    width: 375px;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 90px;
    grid-template-rows: 1fr 90px;
    position: relative;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.app-2 .app-2__account {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
}

.app-2 .app-2__logo {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.app-2 .app-2__logo img {
    width: 240px;
}

.app-2 .app-2__button-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.app-2 .app-2__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.app-2 .app-2__button img {
    height: 30px;
    margin-right: 10px;
}

.app-2 .app-2__button span {
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
}

/**************************************
App 3 Styles
**************************************/

.app-3 {
    border-radius: 40px;
    height: 812px;
    width: 375px;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 190px;
    grid-template-rows: 1fr 190px;
    position: relative;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.app-3 .app-3__logo {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.app-3 .app-3__logo img {
    width: 240px;
}

.app-3 .app-3__button-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 40px 40px 40px;
}

.app-3 .app-3__button {
    width: 100%;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-family: 'Josefin Sans', Arial, sans-serif;
    text-align: center;
    height: 70px;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-weight: bold;
    text-transform: uppercase;
    max-width: 500px;
    margin-bottom: 10px;
}

.app-3 .app-3__button--inverted {
    margin: 0;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/********************************************
Menu Page Styling
********************************************/

.menu-page {
    color: #232323;
    background-color: #F9FAFB;
    border-radius: 40px;
    height: 812px;
    width: 375px;
    position: relative;
    overflow: hidden;
}

.menu-page__header {
    width: 100%;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 20px;
}

.menu-page__logo {
    max-height: 40px;
}

.menu-page__navigation {
    width: 100%;
    background-color: var(--primary-color);
    position: relative;
    z-index: 10;
}

.menu-page__navigation::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: -1;
}

.menu-page__navigation ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow-x: hidden;
}

.menu-page__navigation li {
    list-style-type: none;
    padding: 15px 20px;
    white-space: nowrap;
    color: #fff;
    font-weight: 300;
    font-size: 1.4rem;
}

.menu-page__active-link {
    background-color: rgba(0, 0, 0, 0.1);
}

.menu-page__menu {
    padding-bottom: 54px;
}

.menu-page__heading {
    padding: 20px;
    font-weight: normal;
    font-size: 1.6rem;
    border-bottom: 1px solid #eee;
}

.menu-page__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.menu-page__image {
    margin-right: 15px;
}

.menu-page__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.menu-page__name {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.menu-page__description {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.menu-page__add {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.menu-page__price,
.menu-page__button {
    font-size: 1.3rem
}

.menu-page__button {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 3px;
    display: inline-block;
    padding: 5px 10px;
    margin-left: 5px;
}

.menu-page__basket {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.menu-page__order {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.menu-page__view {
    margin-left: 10px;
}
/*! Devices.css v0.1.16 | MIT License | github.com/picturepan2/devices.css */.device,.device ::after,.device ::before,.device::after,.device::before{box-sizing:border-box;display:block}.device{position:relative;transform:scale(1);z-index:1}.device .device-frame{z-index:1}.device .device-content{background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;position:relative}.device-iphone-x{height:868px;width:428px}.device-iphone-x .device-frame{background:#222;border-radius:68px;box-shadow:inset 0 0 2px 2px #c8cacb,inset 0 0 0 7px #e2e3e4;height:868px;padding:28px;width:428px}.device-iphone-x .device-content{border-radius:40px;height:812px;width:375px}.device-iphone-x .device-stripe::after,.device-iphone-x .device-stripe::before{border:solid rgba(51,51,51,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-x .device-stripe::after{top:85px}.device-iphone-x .device-stripe::before{bottom:85px}.device-iphone-x .device-header{background:#222;border-bottom-left-radius:20px;border-bottom-right-radius:20px;height:30px;left:50%;margin-left:-102px;position:absolute;top:28px;width:204px}.device-iphone-x .device-header::after,.device-iphone-x .device-header::before{content:"";height:10px;position:absolute;top:0;width:10px}.device-iphone-x .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#222 75%,#222 100%);left:-10px}.device-iphone-x .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#222 75%,#222 100%);right:-10px}.device-iphone-x .device-sensors::after,.device-iphone-x .device-sensors::before{content:"";position:absolute}.device-iphone-x .device-sensors::after{background:#444;border-radius:3px;height:6px;left:50%;margin-left:-25px;top:32px;width:50px}.device-iphone-x .device-sensors::before{background:#444;border-radius:50%;height:14px;left:50%;margin-left:40px;top:28px;width:14px}.device-iphone-x .device-btns{background:#c8cacb;height:32px;left:-3px;position:absolute;top:115px;width:3px}.device-iphone-x .device-btns::after,.device-iphone-x .device-btns::before{background:#c8cacb;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-x .device-btns::after{top:60px}.device-iphone-x .device-btns::before{top:140px}.device-iphone-x .device-power{background:#c8cacb;height:100px;position:absolute;right:-3px;top:200px;width:3px}.device-iphone-8{height:871px;width:419px}.device-iphone-8 .device-frame{background:#fff;border-radius:68px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 7px #e2e3e4;height:871px;padding:102px 22px;width:419px}.device-iphone-8 .device-content{border:2px solid #222;border-radius:4px;height:667px;width:375px}.device-iphone-8 .device-stripe::after,.device-iphone-8 .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:0 7px;content:"";height:6px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-8 .device-stripe::after{top:68px}.device-iphone-8 .device-stripe::before{bottom:68px}.device-iphone-8 .device-header{border:2px solid #c8cacb;border-radius:50%;bottom:25px;height:58px;left:50%;margin-left:-29px;position:absolute;width:58px}.device-iphone-8 .device-sensors{background:#666;border-radius:3px;height:6px;left:50%;margin-left:-38px;position:absolute;top:52px;width:76px}.device-iphone-8 .device-sensors::after,.device-iphone-8 .device-sensors::before{background:#666;border-radius:50%;content:"";position:absolute}.device-iphone-8 .device-sensors::after{height:10px;left:50%;margin-left:-5px;top:-25px;width:10px}.device-iphone-8 .device-sensors::before{height:12px;left:-42px;margin-top:-6px;top:50%;width:12px}.device-iphone-8 .device-btns{background:#c8cacb;height:30px;left:-3px;position:absolute;top:102px;width:3px}.device-iphone-8 .device-btns::after,.device-iphone-8 .device-btns::before{background:#c8cacb;content:"";height:56px;left:0;position:absolute;width:3px}.device-iphone-8 .device-btns::after{top:62px}.device-iphone-8 .device-btns::before{top:132px}.device-iphone-8 .device-power{background:#c8cacb;height:80px;position:absolute;right:-2px;top:160px;width:3px}.device-iphone-8.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 7px #f7e8dd}.device-iphone-8.device-gold .device-header{border-color:#e4b08a}.device-iphone-8.device-gold .device-btns,.device-iphone-8.device-gold .device-btns::after,.device-iphone-8.device-gold .device-btns::before{background:#e4b08a}.device-iphone-8.device-gold .device-power{background:#e4b08a}.device-iphone-8.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #74747a,inset 0 0 0 7px #9b9ba0}.device-iphone-8.device-spacegray .device-stripe::after,.device-iphone-8.device-spacegray .device-stripe::before{border-color:rgba(204,204,204,.35)}.device-iphone-8.device-spacegray .device-btns,.device-iphone-8.device-spacegray .device-btns::after,.device-iphone-8.device-spacegray .device-btns::before{background:#74747a}.device-google-pixel-2-xl{height:832px;width:404px}.device-google-pixel-2-xl .device-frame{background:#121212;border-radius:36px;box-shadow:inset 0 0 0 2px #cfcfcf,inset 0 0 0 7px #9c9c9c;height:832px;padding:56px 22px;width:404px}.device-google-pixel-2-xl .device-content{border-radius:27px;height:720px;width:360px}.device-google-pixel-2-xl .device-header{height:832px;left:50%;margin-left:-150px;position:absolute;top:0;width:300px}.device-google-pixel-2-xl .device-header::after,.device-google-pixel-2-xl .device-header::before{background:#333;border-radius:3px;content:"";height:6px;left:50%;margin-left:-73px;margin-top:-3px;position:absolute;width:146px}.device-google-pixel-2-xl .device-header::after{top:24px}.device-google-pixel-2-xl .device-header::before{bottom:28px}.device-google-pixel-2-xl .device-sensors{background:#333;border-radius:7px;height:14px;left:54px;margin-top:-7px;position:absolute;top:36px;width:14px}.device-google-pixel-2-xl .device-btns{background:#cfcfcf;height:102px;position:absolute;right:-3px;top:306px;width:3px}.device-google-pixel-2-xl .device-power{background:#cfcfcf;height:58px;position:absolute;right:-3px;top:194px;width:3px}.device-google-pixel{height:744px;width:360px}.device-google-pixel .device-frame{background:#f7f7f8;border-radius:54px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4,inset 0 0 0 10px #fff;height:744px;padding:82px 18px 86px 18px;width:360px}.device-google-pixel .device-content{border:2px solid #222;border-radius:2px;height:576px;width:324px}.device-google-pixel .device-stripe{border-top:6px solid rgba(51,51,51,.15);bottom:0;left:254px;position:absolute;top:0;width:8px}.device-google-pixel .device-stripe::after,.device-google-pixel .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:0 6px;content:"";height:10px;left:-254px;position:absolute;width:360px;z-index:9}.device-google-pixel .device-stripe::after{top:60px}.device-google-pixel .device-stripe::before{bottom:46px}.device-google-pixel .device-sensors{background:#ddd;border-radius:2.5px;height:5px;left:50%;margin-left:-39px;margin-top:-2.5px;position:absolute;top:41px;width:78px}.device-google-pixel .device-sensors::after,.device-google-pixel .device-sensors::before{background:#333;border-radius:6px;content:"";position:absolute}.device-google-pixel .device-sensors::after{height:12px;left:50%;margin-left:-14px;top:21.5px;width:28px}.device-google-pixel .device-sensors::before{height:10px;left:-81px;margin-top:-5px;top:50%;width:10px}.device-google-pixel .device-btns{background:#c8cacb;height:102px;position:absolute;right:-2px;top:298px;width:3px}.device-google-pixel .device-power{background:#c8cacb;height:50px;position:absolute;right:-2px;top:184px;width:3px}.device-google-pixel.device-black .device-frame{background:#211d1c;box-shadow:inset 0 0 0 2px #363635,inset 0 0 0 6px #6a6967,inset 0 0 0 10px #3d3533}.device-google-pixel.device-black .device-stripe,.device-google-pixel.device-black .device-stripe::after,.device-google-pixel.device-black .device-stripe::before{border-color:rgba(13,13,13,.35)}.device-google-pixel.device-black .device-sensors{background:#444}.device-google-pixel.device-black .device-sensors::after{background:#0d0d0d}.device-google-pixel.device-black .device-btns,.device-google-pixel.device-black .device-btns::after,.device-google-pixel.device-black .device-btns::before{background:#363635}.device-google-pixel.device-black .device-power{background:#363635}.device-google-pixel.device-blue .device-frame{box-shadow:inset 0 0 0 2px #2a5aff,inset 0 0 0 6px #7695ff,inset 0 0 0 10px #fff}.device-google-pixel.device-blue .device-btns,.device-google-pixel.device-blue .device-btns::after,.device-google-pixel.device-blue .device-btns::before{background:#2a5aff}.device-google-pixel.device-blue .device-power{background:#2a5aff}.device-galaxy-s8{height:828px;width:380px}.device-galaxy-s8 .device-frame{background:#222;border:solid #cfcfcf;border-radius:55px;border-width:5px 0;box-shadow:inset 0 0 0 2px #9c9c9c;height:828px;padding:48px 10px 40px 10px;width:380px}.device-galaxy-s8 .device-content{border:2px solid #222;border-radius:34px;height:740px;width:360px}.device-galaxy-s8 .device-stripe::after,.device-galaxy-s8 .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:5px 0;content:"";height:828px;position:absolute;top:0;width:6px;z-index:9}.device-galaxy-s8 .device-stripe::after{left:48px}.device-galaxy-s8 .device-stripe::before{right:48px}.device-galaxy-s8 .device-sensors{background:#666;border-radius:3px;height:6px;left:50%;margin-left:-24px;margin-top:-3px;position:absolute;top:32px;width:48px}.device-galaxy-s8 .device-sensors::after,.device-galaxy-s8 .device-sensors::before{background:#666;border-radius:50%;content:"";position:absolute;top:50%}.device-galaxy-s8 .device-sensors::after{box-shadow:-192px 0 #333,-174px 0 #333,-240px 0 #333;height:8px;margin-top:-4px;right:-90px;width:8px}.device-galaxy-s8 .device-sensors::before{box-shadow:186px 0 #666;height:12px;left:-90px;margin-top:-6px;width:12px}.device-galaxy-s8 .device-btns{background:#9c9c9c;border-radius:3px 0 0 3px;height:116px;left:-3px;position:absolute;top:144px;width:3px}.device-galaxy-s8 .device-btns::after{background:#9c9c9c;border-radius:3px 0 0 3px;content:"";height:54px;left:0;position:absolute;top:164px;width:3px}.device-galaxy-s8 .device-power{background:#9c9c9c;border-radius:0 3px 3px 0;height:54px;position:absolute;right:-3px;top:260px;width:3px}.device-galaxy-s8.device-blue .device-frame{border-color:#a3c5e8;box-shadow:inset 0 0 0 2px #5192d4}.device-galaxy-s8.device-blue .device-stripe::after,.device-galaxy-s8.device-blue .device-stripe::before{border-color:rgba(255,255,255,.35)}.device-galaxy-s8.device-blue .device-btns,.device-galaxy-s8.device-blue .device-btns::after{background:#5192d4}.device-galaxy-s8.device-blue .device-power{background:#5192d4}.device-ipad-pro{height:804px;width:560px}.device-ipad-pro .device-frame{background:#fff;border-radius:38px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:804px;padding:62px 25px;width:560px}.device-ipad-pro .device-content{border:2px solid #222;border-radius:2px;height:680px;width:510px}.device-ipad-pro .device-header{border:2px solid #c8cacb;border-radius:50%;bottom:17px;height:34px;left:50%;margin-left:-17px;position:absolute;width:34px}.device-ipad-pro .device-sensors{background:#666;border-radius:50%;height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:34px;width:10px}.device-ipad-pro.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 6px #f7e8dd}.device-ipad-pro.device-gold .device-header{border-color:#e4b08a}.device-ipad-pro.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a,inset 0 0 0 6px #facfc9}.device-ipad-pro.device-rosegold .device-header{border-color:#f6a69a}.device-ipad-pro.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #818187,inset 0 0 0 6px #9b9ba0}.device-ipad-pro.device-spacegray .device-header{border-color:#818187}.device-surface-pro{height:394px;width:561px}.device-surface-pro .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #c8c8c8;height:394px;margin:0 auto;padding:26px 24px;width:561px}.device-surface-pro .device-content{border:2px solid #121212;border-radius:2px;height:342px;width:513px}.device-surface-pro .device-btns::after,.device-surface-pro .device-btns::before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-pro .device-btns::after{left:48px;width:26px}.device-surface-pro .device-btns::before{left:94px;width:48px}.device-surface-pro .device-sensors{background:#333;border-radius:50%;height:6px;left:50%;margin-left:-3px;margin-top:-3px;position:absolute;top:14px;width:6px}.device-surface-book{height:424px;width:728px}.device-surface-book .device-frame{background:#0d0d0d;border-radius:12px;box-shadow:inset 0 0 0 2px #c8c8c8;height:408px;margin:0 auto;padding:24px 22px;position:relative;width:584px}.device-surface-book .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:540px}.device-surface-book .device-btns::after,.device-surface-book .device-btns::before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-book .device-btns::after{left:122px;width:20px}.device-surface-book .device-btns::before{left:168px;width:44px}.device-surface-book .device-power{background:linear-gradient(to bottom,#eee,#c8c8c8);border:solid #c8c8c8;border-radius:2px;border-width:0 2px;height:12px;margin-top:4px;position:relative;width:728px}.device-surface-book .device-power::after,.device-surface-book .device-power::before{content:"";position:absolute}.device-surface-book .device-power::after{background:radial-gradient(circle at center,#eee 0,#eee 95%,#a2a1a1 100%);border-radius:0 0 6px 6px;height:8px;left:50%;margin-left:-125px;top:0;width:250px;z-index:1}.device-surface-book .device-power::before{background:linear-gradient(to bottom,#eee,#c8c8c8);border-radius:2px 2px 0 0;bottom:12px;height:8px;left:50%;margin-left:-292px;width:584px}.device-macbook-pro{height:444px;width:740px}.device-macbook-pro .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px 19px;position:relative;width:614px}.device-macbook-pro .device-frame::after{background:#272626;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook-pro .device-frame::before{bottom:10px;color:#c8cacb;content:"MacBook Pro";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook-pro .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook-pro .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:2px 4px 0 4px;height:14px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook-pro .device-power::after,.device-macbook-pro .device-power::before{content:"";position:absolute}.device-macbook-pro .device-power::after{background:#d5d6d8;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;height:10px;left:50%;margin-left:-60px;top:-2px;width:120px}.device-macbook-pro .device-power::before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 12px 12px;box-shadow:inset 0 -2px 6px 0 #474a4d;height:12px;left:-4px;margin:0 auto;top:10px;width:740px}.device-macbook-pro.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook-pro.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook-pro.device-spacegray .device-power::after{background:#83878a;box-shadow:inset 0 0 4px 2px #6a6d70}.device-macbook-pro.device-spacegray .device-power::before{background:#515456;box-shadow:inset 0 -2px 6px 0 #000}.device-macbook{height:432px;width:740px}.device-macbook .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px 19px;position:relative;width:614px}.device-macbook .device-frame::after{background:#272626;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook .device-frame::before{bottom:10px;color:#c8cacb;content:"MacBook";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:0 4px;height:4px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook .device-power::after,.device-macbook .device-power::before{content:"";position:absolute}.device-macbook .device-power::after{background:radial-gradient(circle at center,#e2e3e4 0,#e2e3e4 85%,#a0a3a7 100%);border:solid #adb0b3;border-width:0 2px;height:4px;left:50%;margin-left:-60px;width:120px}.device-macbook .device-power::before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 10px 10px;box-shadow:inset 0 -2px 6px 0 #474a4d;height:10px;left:-4px;margin:0 auto;top:4px;width:740px}.device-macbook.device-gold .device-frame{box-shadow:inset 0 0 0 2px #edccb4}.device-macbook.device-gold .device-power{background:#f7e8dd;border-color:#edccb4}.device-macbook.device-gold .device-power::after{background:radial-gradient(circle at center,#f7e8dd 0,#f7e8dd 85%,#dfa276 100%);border-color:#e4b08a}.device-macbook.device-gold .device-power::before{background:#edccb4;box-shadow:inset 0 -2px 6px 0 #83491f}.device-macbook.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a}.device-macbook.device-rosegold .device-power{background:#facfc9;border-color:#f6a69a}.device-macbook.device-rosegold .device-power::after{background:radial-gradient(circle at center,#facfc9 0,#facfc9 85%,#ef6754 100%);border-color:#f6a69a}.device-macbook.device-rosegold .device-power::before{background:#f6a69a;box-shadow:inset 0 -2px 6px 0 #851b0c}.device-macbook.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook.device-spacegray .device-power::after{background:radial-gradient(circle at center,#909496 0,#909496 85%,#515456 100%);border-color:#5d6163}.device-macbook.device-spacegray .device-power::before{background:#515456;box-shadow:inset 0 -2px 6px 0 #000}.device-surface-studio{height:506px;width:640px}.device-surface-studio .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #000;height:440px;padding:20px;width:640px}.device-surface-studio .device-content{border:2px solid #121212;border-radius:2px;height:400px;width:600px}.device-surface-studio .device-stripe{background:#444;border-radius:0 0 2px 2px;bottom:0;height:4px;left:50%;margin-left:-117px;position:absolute;width:234px}.device-surface-studio .device-stripe::after,.device-surface-studio .device-stripe::before{content:"";left:50%;position:absolute;top:-75px}.device-surface-studio .device-stripe::after{border:6px solid #d5d6d8;border-radius:0 0 18px 18px;border-top:0;box-shadow:inset 0 0 0 4px #c8cacb;height:60px;margin-left:-140px;width:280px;z-index:-1}.device-surface-studio .device-stripe::before{border:15px solid #e2e3e4;border-radius:0 0 4px 4px;border-top:0;height:70px;margin-left:-150px;width:300px;z-index:-2}.device-surface-studio .device-power{background:#eff0f0;border:solid #e2e3e4;border-radius:0 0 2px 2px;border-width:0 4px 2px 4px;height:32px;margin:30px auto 0 auto;position:relative;width:250px}.device-surface-studio .device-power::after{background:#adb0b3;content:"";height:2px;left:-4px;position:absolute;top:4px;width:250px}.device-imac-pro{height:484px;width:624px}.device-imac-pro .device-frame{background:#0d0d0d;border-radius:18px;box-shadow:inset 0 0 0 2px #080808;height:428px;padding:24px 24px 80px 24px;position:relative;width:624px}.device-imac-pro .device-frame::after{background:#2f2e33;border-radius:0 0 18px 18px;bottom:2px;content:"";height:54px;left:2px;position:absolute;width:620px}.device-imac-pro .device-frame::before{bottom:15px;color:#0d0d0d;content:"";font-size:24px;height:24px;left:50%;line-height:24px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:9}.device-imac-pro .device-content{border:2px solid #121212;border-radius:2px;height:324px;width:576px}.device-imac-pro .device-power::after,.device-imac-pro .device-power::before{content:""}.device-imac-pro .device-power::after{background:#222225;border-radius:2px;height:6px;margin:0 auto;position:relative;width:180px}.device-imac-pro .device-power::before{border:solid transparent;border-bottom-color:#333;border-width:0 8px 50px 8px;height:50px;margin:0 auto;position:relative;width:130px}.device-apple-watch{height:234px;width:200px}.device-apple-watch .device-frame{background:#0d0d0d;border-radius:40px;box-shadow:inset 0 0 2px 2px #adb0b3,inset 0 0 0 6px #e2e3e4,inset 0 0 0 8px #e2e3e4;height:234px;padding:32px;position:relative;width:200px}.device-apple-watch .device-frame::after{border-radius:30px;box-shadow:inset 0 0 25px 0 rgba(255,255,255,.75);content:"";height:216px;left:9px;position:absolute;top:9px;width:182px}.device-apple-watch .device-content{border:2px solid #121212;border-radius:2px;height:170px;width:136px}.device-apple-watch .device-btns{background:#e2e3e4;border-left:2px solid #adb0b3;border-radius:8px 4px 4px 8px/20px 4px 4px 20px;box-shadow:inset 0 0 2px 2px #adb0b3;height:44px;position:absolute;right:-10px;top:52px;width:16px;z-index:9}.device-apple-watch .device-btns::after{background:#e2e3e4;border-radius:4px 2px 2px 4px/10px 2px 2px 10px;box-shadow:inset 0 0 1px 2px #adb0b3;content:"";height:66px;position:absolute;right:6px;top:68px;width:8px}.device-apple-watch .device-btns::before{background:#adb0b3;box-shadow:0 -16px #adb0b3,0 -12px #adb0b3,0 -8px #adb0b3,0 -4px #adb0b3,0 4px #adb0b3,0 8px #adb0b3,0 12px #adb0b3,0 16px #adb0b3;content:"";height:2px;margin-top:-1px;position:absolute;right:0;top:50%;width:6px}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.MainHeader {

    width: 100%;
    padding: 5rem 0rem;
    height: 16rem;
    -webkit-transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    background-color: #ED1C24;
    color: #fff
}
.InnerHeader {
    margin: 0 auto;
    padding-left: 5rem;
    padding-right: 5rem;
    display: flex;
    -webkit-box-align: center;
    height:64px;
    align-items: center;
    max-width: 1440px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.HeaderTitle {
    font-family: 'Raleway', Sans-serif;
    font-size: 1em;
    font-weight: 800;
}
.HeadButton {
    background: white;
    padding: 15px 30px;
    display: inline-block;
    border-radius: 10px;
    cursor:pointer;
}
.HeadButtonText {
    color: #ED1C24;
    font-family: 'Raleway', Sans-serif;
    font-size: 1em;
    font-weight: 600;
}
.logo {
    width: 22rem;
}

@-webkit-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-moz-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;background:#fff}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center}.dropzone .dz-details{display:none}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{background:#999;background:linear-gradient(to bottom,#eee,#ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#E5E7EB}.dropzone .dz-preview.dz-image-preview .dz-details{-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-ms-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,.8);background-color:rgba(255,255,255,.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:rgba(255,255,255,.4);padding:0 .4em;border-radius:3px}.dropzone .dz-preview .dz-image{overflow:hidden;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{-webkit-animation:passing-through 3s cubic-bezier(.77,0,.175,1);-moz-animation:passing-through 3s cubic-bezier(.77,0,.175,1);-ms-animation:passing-through 3s cubic-bezier(.77,0,.175,1);-o-animation:passing-through 3s cubic-bezier(.77,0,.175,1);animation:passing-through 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;-webkit-animation:slide-in 3s cubic-bezier(.77,0,.175,1);-moz-animation:slide-in 3s cubic-bezier(.77,0,.175,1);-ms-animation:slide-in 3s cubic-bezier(.77,0,.175,1);-o-animation:slide-in 3s cubic-bezier(.77,0,.175,1);animation:slide-in 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{-webkit-animation:pulse 6s ease infinite;-moz-animation:pulse 6s ease infinite;-ms-animation:pulse 6s ease infinite;-o-animation:pulse 6s ease infinite;animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:16px;left:50%;top:50%;margin-top:-8px;width:80px;margin-left:-40px;background:rgba(255,255,255,.9);-webkit-transform:scale(1);border-radius:8px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#333;background:linear-gradient(to bottom,#666,#444);position:absolute;top:0;left:0;bottom:0;width:0;-webkit-transition:width 300ms ease-in-out;-moz-transition:width 300ms ease-in-out;-ms-transition:width 300ms ease-in-out;-o-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;-ms-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#be2626;background:linear-gradient(to bottom,#be2626,#a92222);padding:.5em 1.2em;color:#fff}.dropzone .dz-preview .dz-error-message:after{content:'';position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #be2626}
* {
  padding: 0;
  margin: 0;
  border: 0;
  text-decoration: none;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 10px;
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
  color: #232323;
  background-color: #F9FAFB;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

#app {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 50px;
}

.filepond--credits {
  display: none;
}

.container {
  width: 100%;
  max-width: 1280px;
}

.steps {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 30px;
}

.step {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 30px;
  color: #ccc;
  -webkit-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.step--active {
  color: #ED1C24;
  cursor: unset;
  pointer-events: none;
}

.step:not(:last-of-type) {
    border-right: 1px solid #ccc;
}

.step__count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 44px;
  height: 44px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 15px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}

.step--active .step__count {
  background-color: #ED1C24;
  border-color: #ED1C24;
  color: #fff;
}

.form {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
  padding: 40px;
}

.form-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.form-sidebar {
  width: 40%;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
}

.form-content {
  width: 60%;
}

.form-heading {
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: 10px;
}

.form-label {
  margin-bottom: 10px;
  display: block;
}

.field-validation-error {
    color: red;
}

.validation-summary-errors {
    color: red;
}

.form-content .form-section:not(:last-of-type) {
    border-bottom: 1px solid #ccc;
    padding-bottom: 40px;
}

.form-content .form-section:not(:first-of-type) {
    padding-top: 40px;
}

.form-content .form-section.branding {
  padding-bottom: 20px;
}

.form-fieldset {
  margin-bottom: 20px;
}

.form-fields,
.form-colours {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.form-colours input[type="color"] {
  width: 180px;
  height: 46px;
  background-color: transparent;
  outline: none;
  margin-right: 10px;
  cursor: pointer;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  -o-transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.form-colours input[type="color"]:hover,
.form-colours input[type="color"]:focus {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.button {
  min-width: 150px;
  padding: 12px 15px;
  border-radius: 4px;
  border: 1px solid #ED1C24;
  color: #ED1C24;
  background-color: transparent;
  display: inline-block;
  -webkit-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
}

.button:hover {
  background-color: #ED1C24;
  color: #fff;
}

.previews {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.devices {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  height: 347px;
  width: 370px;
}

.device {
  -webkit-transform: scale(.4) translate(-75%, -75%);
      -ms-transform: scale(.4) translate(-75%, -75%);
          transform: scale(.4) translate(-75%, -75%);
}

.menu-preview {
  -webkit-transform: scale(.4) translate(-210%, -75%);
      -ms-transform: scale(.4) translate(-210%, -75%);
          transform: scale(.4) translate(-210%, -75%);
}

.devices-summary {
  padding: 10px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 347px;
}

.hide {
  display: none;
}

.dropzone {
    border: 2px dashed #E5E5E5;
    padding: 20px;
    text-align: center;
}

.form-input {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

    .form-input::placeholder {
        font-family: 'Inter', Arial, Helvetica, sans-serif;
        font-style: italic;
    }

.pagination {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media only screen and (max-width: 1280px) {

  .form-heading {
      font-size: 2.1rem;
  }

  .form-summary,
  .button {
      font-size: 1.4rem;
  }

}

@media only screen and (max-width: 1080px) {

  .form-panel {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
  }

  .form-sidebar {
      width: 100%;
      padding-bottom: 30px;
      border-bottom: 1px solid #ccc;
      position: static;
  }

  .form-content {
      padding-top: 30px;
      width: 100%;
  }

  .step {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
  }

  .step__count {
      margin-right: 0px;
      margin-bottom: 10px;
  }

}

@media only screen and (max-width: 768px) {

  .previews {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
  }

  .devices {
      width: 100%;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
  }
  
  .devices-summary {
      display: none;
  }

  .device {
      -webkit-transform: scale(.4) translate(65%, -75%);
          -ms-transform: scale(.4) translate(65%, -75%);
              transform: scale(.4) translate(65%, -75%);
  }

  .menu-preview {
      -webkit-transform: scale(.4) translate(-65%, -75%);
          -ms-transform: scale(.4) translate(-65%, -75%);
              transform: scale(.4) translate(-65%, -75%);
  }

  .hide {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
  }

  .button.hide {
      margin-top: 30px;
  }

  .form-fields {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
  }

  .form-colours {
      margin-bottom: 20px;
  }

  .step__count {
      margin: 0;
  }

  .step__heading {
      display: none;
  }

}

@media only screen and (max-width: 500px) {

    #app {
        padding: 25px;
    }

    .device {
        -webkit-transform: scale(.5) translate(0%, -50%);
        -ms-transform: scale(.5) translate(0%, -50%);
        transform: scale(.5) translate(0%, -50%);
    }

    .menu-preview {
        display: none;
    }

    .button.hide {
        margin-top: 120px;
    }

    .form-colours {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .step {
        padding: 20px;
    }

    .step__count {
        width: 34px;
        height: 34px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

    .fileUpload__icons {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #919191;
        margin-bottom: 20px;
    }

.fileUpload__label, .fileUpload label {
    color: #919191;
}

.dropzone .dz-preview .dz-remove {
    background: transparent;
    border: solid 1px #E83D44;
    color: #E83D44;
    padding: 6px 24px;
    text-decoration: none;
    font-weight: 400;
    border-radius: 6px;
}