{"version":3,"sources":["checkout.scss","_mixins.scss","_fonts_uk.scss","_variables.scss"],"names":[],"mappings":"AAUA,2FAAY;ACwFZ;EACC,QAAQ,EAGR;EAJD;IAEoB,YAAW;IAAE,eAAc,EAAI;EAFnD;IAGU,YAAY,EAAI;;ACrG1B;EACC,0BAA0B;EAC1B,6RAG6D;EAC7D,kBAAkB;EAClB,mBAAmB;EACnB,2BAAyB,EAAA;;AAE1B;EACC,0BAA0B;EAC1B,kTAGsE;EACtE,oBAAoB;EACpB,iBAAiB,EAAA;;AAElB;EACC,4BAA4B;EAC5B,8UAG6E;EAC7E,oBAAoB;EACpB,mBAAmB,EAAA;;AFdpB;EAAI,UAAU;EAAE,WAAW;EAAE,uBAAuB,EAAI;;AAExD;EAAO,0CAA0C;EAAE,eAAe,EAAI;;AACtE;EAAS,iBAAiB,EAAI;;AAC9B;EAAU,mBAAmB,EAAI;;AACjC;EAAmB,YAAY;EAAE,eAAe;EAAE,YAAY,EAAI;;AAElE;EAAe,aAAa,EAAI;;AAEhC;EAEE,gBAAgB,EAUhB;EAZF;IAGQ,aAAa,EAAI;EAHzB;IAKG,kBAAkB,EAKlB;IAVH;MAMO,iBAAiB,EAAI;IACzB;MAPH;QAQI,mBAAmB;QAAE,UAAU;QAAE,SAAS,EAE3C,EAAA;EAVH;IAWM,eAAe,EAAI;;AAXzB;EAcE,iBAAiB;EAAE,eAAe;EAAE,aAAa;EAAE,kBAAkB;EAAE,kBAAkB;EAAE,0BAA0B;EAAE,gBAAgB,EAOvI;EArBF;IAeS,eAAe,EAErB;IAjBH;MAgBO,gBAAgB,EAAI;EAEzB;IAAiB,kBAAkB,EAAI;EACvC;IAAa,sBAAsB;IAAE,gBAAgB,EAAI;EACzD;IAAI,sBAAsB;IAAE,eAAe;IAAE,sBAAsB,EAAI;;AAIzE;EAAU,iBAAiB;EAAE,oBAAoB;EAAE,mBAAmB;EAAE,mBAAmB;EAAE,eAAe,EAE3G;EAFD;IACK,oBAAoB;IAAE,aAAa,EAAI;;AAG5C;EAAQ,8BAA8B;EAAE,WAAW;EAAE,eAAe,EAQnE;EARD;IACQ,gBAAgB;IAAE,qBAAc;IAAd,cAAc,EAAI;EAD5C;IAES,qBAAa;QAAb,aAAa,EAAI;EAF1B;IAGS,qBAAa;QAAb,aAAa,EAAI;EAH1B;IAIc,qBAAqB;IAAE,gBAAgB,EAGnD;IAFA;MAAS,0BAA0B,EAAI;IACvC;MAAO,eGvCW;MHuCS,oBAAoB;MAAE,eAAe,EAAI;;AAItE;EAAc,kBAAkB,EAAI;;AAEpC;EACC,eAAe;EAAE,yBAAW,EAiC5B;EAlCD;IAGO,0BAA0B;IAAE,iBAAiB;IAAE,iBAAiB;IAAE,kBAAkB,EAAI;EAG7F;IAAkB,gBAAgB;IAAE,qBAAc;IAAd,cAAc,EAAI;EACtD;IAA2B,mBAAmB;IAAE,kBAAkB;IAAE,oBAAoB,EAyBvF;IAxBA;MAAK,0BAA0B;MAAE,iBAAiB;MAAE,iBAAiB,EAAI;IACzE;MAAmB,uBAAuB;MAAE,cAAc;MAAE,yBAAW;MAAe,kBAAkB;MAAE,iBAAiB,EAmB1H;MA5BJ;QAWK,aAAa;QAAE,0BAAW,EAY1B;QAvBL;UAYc,iBAAiB,EAAI;QAZnC;UAac,eG1DM;UH0Dc,0BAA0B;UAAE,mBAAmB;UAAE,kBAAkB,EAAI;QAbzG;UAcc,iBAAiB,EAEzB;UAhBN;YAekB,eAAe;YAAE,eAAe;YAAE,8BAA8B;YAAE,mBAAmB,EAAI;QAEtG;UAAY,eG9DG;UH8DiB,0BAA0B;UAAE,WAAW;UAAE,mBAAmB,EAAI;QAjBrG;UAkBe,iBAAiB,EAI1B;UAtBN;YAmBU,oBAAoB,EAAI;UAnBlC;YAoBc,aAAa,EAAI;UApB/B;YAqBgB,eAAe,EAAI;MArBnC;QAyBK,YAAY;QAAE,eAAe,EAE7B;QADA;UAAM,gBAAgB;UAAE,aAAa,EAAI;IAG3C;MA7BH;QA8BI,mBAAmB,EAEpB,EAAA;;AAIH;EACE,gBAAgB;EAAE,WAAW;EAAE,eAAe;EAAE,iBAAiB;EAAE,eAAe;EAAE,+BAA+B,EAIpH;EALD;IAEU,eAAe;IAAE,YAAY;IAAE,qBAAc;IAAd,cAAc,EAAI;EACxD;IAAQ,qBAAa;QAAb,aAAa,EAAI;EACzB;IAAQ,qBAAa;QAAb,aAAa,EAAI;;AAG5B;EACC,mBAAmB,EAMnB;EALA;IAAM,eAAe;IAAE,aAAa;IAAE,mBAAmB,EAIxD;IAHA;MAHF;QAIG,YAAY;QAAE,cAAc,EAE7B,EAAA;;AAGF;EAAqB,aAAa;EAAE,sBAAsB,EAAI;;AAE9D;EACE,WAAW;EAAE,mBAAmB;EAAE,iBAAiB;EAAE,eAAe,EAOrE;EARD;IAEW,gBAAgB;IAAE,gBAAgB;IAAE,iBAAiB,EAAI;EAFpE;IAGY,kBAAkB;IAAE,aAAa;IAAE,cAAc;IAAE,mBAAmB,EAAI;EAHtF;IAIM,sBAAsB,EAAI;EAC9B;IAAI,iBAAiB;IAAE,mBAAmB,EAAI;EALhD;IAMc,oBAAoB,EAAI;EANtC;IAOY,oBAAoB,EAAI;;AAGpC;EACC,0BAA0B;EAAE,eAAe,EAwD3C;EAzDD;IAGE,oBAAoB;IAAE,iBAAiB;IAAE,kBAAkB;IAAE,iBAAiB,EAK9E;IAJA;MAAU,kBAAkB;MAAE,mBAAmB;MAAE,kBAAkB,EAGpE;MAPH;QAKa,mBAAoB;QAAE,OAAO;QAAE,YAAY;QAAE,mBAAmB,EAAI;MAC9E;QAAI,aAAa;QAAE,eAAe,EAAI;EAGtC;IACE,WAAW;IAAE,eAAe,EA8C5B;IAxDL;MAWc,WAAW,EAAI;IAX7B;MAYO,0BAA0B;MAAE,kBAAkB;MAAE,iBAAiB,EAErE;MAFD;QACe,gBAAgB,EAAI;IAbrC;MAeY,gBAAgB;MAAE,uBAAuB,EAAI;IACtC;MAAmE,mBAAmB;MAAE,cAAc;MAAE,WAAW;MAAE,0BAA0B;MAAE,eAAe;MAAE,wBAAwB;MAAE,qBAAqB;MAAE,aAAa,EAAI;IAhBvP;MAiBwC,0BAA0B,EAAI;IAjBtE;MAkBU,mBAAmB;MAAE,mBAAmB;MAAE,eAAe;MAAE,eAAe,EAEjF;MApBH;QAmBe,aAAa;QAAE,eGhIV;QHgI8B,kBAAkB;QAAE,mBAAmB,EAAI;IAE3F;MACC,eG7IU;MH6IG,qBAAc;MAAd,cAAc;MAAE,uBAAoB;UAApB,oBAAoB;MAAE,iBAAiB;MAAE,mBAAmB,EAEzF;MAxBH;QAuBO,mBAAmB,EAAI;IAEzB;MAAe,mBAAmB;MAAE,YAAY,EAIlD;MA7BH;QA0BY,iBAAiB;QAAE,kBAAkB,EAAI;MA1BrD;QA2BuB,mBAAmB;QAAE,aAAa;QAAE,YAAY;QAAE,cAAc,EAAI;MA3B3F;QA4Be,0BAA0B;QAAE,aAAa;QAAE,eAAe;QAAE,YAAY;QAAE,mBAAmB;QAAE,SAAS;QAAE,aAAa,EAAI;IAErI;MAAc,gBAAgB,EAAI;IACd;MAAI,iBAAiB;MAAE,YAAY;MAAE,iBAAiB;MAAE,mBAAmB;MAAE,mBAAmB;MAAE,mBAAmB;MAAE,0BAA0B;MAAE,aAAa;MAAE,cAAc,EAAI;IA/B7M;MAgCc,sBAAsB;MAAE,mBAAmB;MAAE,mBAAmB,EAO3E;MAvCH;QAiCY,mBAAmB;QAAE,uBAxJrB;QAwJ+C,yBAAyB;QAAE,uBAzJlE;QAyJoG,iBAAiB;QAAE,eAAe;QAAE,6BAA6B;QAAE,aAAa;QAAE,YAAY,EAAK;MAjC3N;QAmCI,sBAAsB;QAAE,UAAU,EAGlC;QAJD;UAEa,mCAAmC;UAAE,oCAAoC;UAAE,4BAA4B;UAAE,YAAY;UAAE,WAAW;UAAE,mBAAmB;UAAE,qBAAqB;UAAE,YAAY;UAAE,SAAS;UAAE,4BAAqB,EAAU;QApCxP;UAqCe,YAAY;UAAE,mBAAmB;UAAE,SAAS;UAAE,YAAY;UAAE,OAAO;UAAE,qBAAqB;UAAE,aAAa;UAAE,oBAAoB,EAAI;IArClJ;MAyCoC,0BAA0B;MAAE,cAAc,EAAI;IADhF;MAEqE,wBAAwB,EAAI;IA1CnG;MA2CkD,sBAAsB,EAAI;IA3C5E;MA4CmE,cAAc,EAAI;IACjD;MAAU,sBAAsB,EAAI;IA7CxE;MA8CiB,cAAc,EAAI;IA9CnC;MAiDa,0BGzKC;MHyKwB,iBAAiB;MAAE,mBAAmB;MACzE,mBAAmB,EAInB;MAtDH;QAmDW,aAAa;QAAE,eAAe;QAAE,YAAY;QAAE,kBAAkB,EAAG;MAC3D;QAAI,kBAAkB;QAAE,mBAAmB;QAAE,SAAS;QAAE,UAAU;QAAE,WAAW;QAAE,4BAAqB,EAAU;MApDnI;QAqDuC,0BG7KzB,EH6KqD;IArDnE;MAuDkB,mBAAmB,EAAI;;AAIzC;EACC,kBAAkB;EAAE,YAAY;EAAE,kBAAkB;EAAE,mBAAmB;EAAE,YAAY,EAQvF;EATD;IAEK,kBAAkB;IAAE,eAAe;IAAE,qBAAqB;IAAE,sBAAsB,EAAI;EAC1F;IAAI,YAAY;IAAE,UAAU;IAAE,uBAAuB;IAAE,YAAY;IAAE,sBAAsB,EAAI;EAHhG;IAIe,mBAAmB;IAAE,eAAe,EAAI;EAJvD;IAKiB,oBAAoB;IAAE,0BAA0B,EAAI;EALrE;IAMmB,oBAAoB;IAAE,0BAA0B,EAAI;EANvE;IAOmB,oBAAoB;IAAE,0BAA0B,EAAI;EAPvE;IAQgB,oBAAoB;IAAE,0BAA0B,EAAI;;AAKpE;EAAyB,WAAW;EAAE,YAAY;EAAE,aAAa;EAAE,eAAe;EAAE,mBAAmB;EAAE,iBAAiB;EAAE,0BAA0B;EAAE,yBAAyB,EAAI;;AACrL;EAAiC,iBAAiB,EAAI;;AAEtD;EAAQ,YAAY,EAoBnB;EApBD;IACO,qBAAqB;IAAE,gBAAgB;IAAE,oBAAoB,EAAI;EACrE;IAAK,YAAY,EAAI;EAFxB;IAGO,sBAAsB;IAAE,aAAa;IAAE,eAAe;IAAE,mBAAmB,EAEhF;IALF;MAIY,cAAc,EAAI;EAJ9B;IAMY,WAAW;IAAE,eAAe;IAAE,eAAe;IAAE,WAAW;IAAE,aAAa,EAAI;EACtF;IAAmB,oBAAoB,EAAI;EAP9C;IAQ8C,iBAAiB;IAAE,aAAa,EAAI;EARlF;IASM,sBAAsB;IAAE,0BAA0B,EAEtD;IAFD;MACW,cAAc,EAAI;EAE1B;IACK,eAAe;IAAE,aAAa,EAEpC;IADA;MAAI,sBAAsB;MAAE,WAAW,EAAI;EAd9C;IAgBa,eAAe;IAAE,kBAAkB,EAE7C;IAlBH;MAiBO,sBAAsB;MAAE,WAAW,EAAI;;AAM9C;EAAc,uBAAuB;EAAE,YAAY;EAAE,UAAU;EAAE,eAAe;EAAE,mBAAmB,EAQpG;EARD;IACQ,iBAAiB;IAAE,cAAc,EAMvC;IAPF;MAEU,gBAAgB;MAAE,iBAAiB;MAAE,oBAAoB;MAAE,sBAAsB;MAAE,oBAAoB;MAAE,mBAAmB,EAIjI;MANL;QAGO,YAAY,EAAI;MAHvB;QAIa,gCAAgC;QAAE,mBAAmB;QAAE,eAAe;QAAE,aAAa;QAAE,WAAW;QAAE,YAAY;QAAE,UAAU;QAAE,yBAAiB;QAAS,aAAa,EAAI;MAFjL;QAGmB,UAAU,EAAI;;AAKtC;EACU,UAAU;EAAE,eAAe,EAAI;;AACxC;EAAkB,eAAe,EAAI;;AAFtC;EAGoB,qBAAqB,EAMvC;EATF;IAIc,mBAAmB,EAAI;EACnC;IACC,sBAAsB;IAAE,mBAAmB;IAAE,0BAA0B;IAAE,gBAAgB;IAAE,mBAAmB,EAE9G;IARH;MAOuB,aAAa,EAAK;;AAPzC;EAWO,iBAAiB;EAAE,0BAA0B,EAAI;;AAEvD;EAbD;IAce,qBAAc;IAAd,cAAc;IAAE,sBAAwB;QAAxB,wBAAwB;IAAE,kBAAkB;IAAE,YAAY;IAAE,mBAAmB,EAAI;EAdlH;IAeY,WAAW;IAAE,iBAAiB,EAEvC;IAjBH;MAgBY,YAAY;MAAE,UAAU,EAAI;EAhBxC;IAkBqB,WAAW,EAAM,EAAA;;AAKtC;EACC,eAAe,EAQf;EATD;IAEM,qBAAqB,EAAI;EAC9B;IAAI,mBAAmB;IAAE,mBAAmB;IAAE,eAAe,EAAI;EAHlE;ICjIC,qBAAc;IAAd,cAAc;IAAE,uBAAoB;QAApB,oBAAoB;IAAE,sBAAwB;QAAxB,wBAAwB;IAAE,WAAW;IAAE,eAAe;IDsIjE,UAAU;IAAE,iBAAiB;IAAE,YAAY,EAGrE;ICxIc;MAAsC,0BAAW,EAAkB;IACnE;MACd,aAAa;MAAE,kBAAkB;MAAE,iBAAiB;MAAE,qBAAqB;MAAE,cAAc;MAAE,wBAAwB;MAAE,sBAAsB;MAAE,oBAAoB,EACnK;ID6HF;MC5HW,eAAe;MAAE,aAAa;MAAE,kBAAkB,EAAI;ID4HjE;MC3Ha,mBAAmB,EAAI;ID2HpC;MAMqB,mBAAmB,EAAI;IAN5C;MAOU,kBAAkB,EAAI","file":"checkout.css","sourcesContent":["@import 'variables';\n@import \"include-media\";\n@import 'mixins';\n@import 'fonts_uk';\n$checkoutgrey:#f4f4f4;\n$checkoutblack: #000;\n$white: #fff;\n$checkoutred: #ee3424;\n$checkoutblue: #009CDE;\n\n@import url(\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\");\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody { font-family: Helvetica, Arial, sans-serif; font-size: 1em; }\nstrong { font-weight: 700; }\n.center { text-align: center; }\n.container:after { content: \"\"; display: table; clear: both; }\n\n.float-right { float: right; }\n\n.header {\n\t.middle { \n\t\tpadding: 15px 0; \n\t\timg { width: 200px; }\t\n\t\t.status-checkout {\n\t\t\tfont-size: .875em;\n\t\t\ti { font-size: 1.2em; }\n\t\t\t@media only screen and (min-width: 768px){\n\t\t\t\tposition: absolute; left: 2em; top: 2em;\t\n\t\t\t} \n\t\t}\n\t\ta { display: block; }\n\t}\n\t.top { \n\t\tfont-weight: 100; color: #f3f3f3; height: 30px; line-height: 30px; background: black; text-transform: uppercase; font-size: .9em;\n\t\t.row { margin: 0 10px; \n\t\t\t* { padding: 0 20px; }\n\t\t}\n\t\t.icons-support { text-align: right; }\n\t\t.myaccount { display: inline-block; cursor: default; }\n\t\ta { display: inline-block; color: #f3f3f3; text-decoration: none; }\n\t}\n}\n\n.footer { min-height: 40px; background: #f3f3f3; position: relative; text-align: center; padding: 2em 0;\n\tp { font-size: 0.8125em; padding: 1em; }\n} \n\n.info { border-top: 4px solid #f3f3f3; width: 90%; margin: 0 auto; \n\t.row { padding: 10px 0; display: flex; }\n\t.gr-9 { flex-grow: 9; }\n\t.gr-3 { flex-grow: 3; }\n\t.info-text { text-transform: none; font-size: .9em;\n\t\tstrong { text-transform: uppercase; }\n\t\tspan { color: $middlegrey; font-size: 0.8125em; display: block; }\n\t}\n}\n\n.text-right { text-align: right; }\n\n.container { \n\tmargin: 0 auto; width: calc(100% - 20px); \n\t.top { \n\t\th1 { text-transform: uppercase; font-weight: 900; font-size: 3.2em; padding: 0 0 25px; }\n\t}\n\t.middle { \n\t\t.single-product { padding: 20px 0; display: flex; } \n\t\t.checkout__order-summary { padding: 20px 10px; min-height: 400px; background: #f3f3f3; \n\t\t\th2 { text-transform: uppercase; font-weight: 900; font-size: 1.4em; }\n\t\t\t.product-summary { box-sizing: border-box; padding: 10px; width: calc(100% - 20px); margin: 12px auto; background: #fff; \n\t\t\t\t.product-info { \n\t\t\t\t\tpadding: 5px; width: calc(100% - 100px);\n\t\t\t\t\t.title { font-weight: 700; }\n\t\t\t\t\t.model { color: $middlegrey; text-transform: uppercase; padding: 0 0 8px 0; font-size: .875em; }\n\t\t\t\t\t.price { font-weight: 700; \n\t\t\t\t\t\t.oldprice { font-size: 300; color: #ee3124; text-decoration: line-through; padding: 0 8px 0 0; }\n\t\t\t\t\t}\n\t\t\t\t\t.quantity { color: $middlegrey; text-transform: uppercase; padding: 0; font-size: 0.875em; }\n\t\t\t\t\t.action { margin-top: 10px;\n\t\t\t\t\t\ta { padding: 0 10px 0 0; }\n\t\t\t\t\t\t.edit { color: black; }\n\t\t\t\t\t\t.remove { color: #ee3124; }\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t.product-img { \n\t\t\t\t\twidth: 80px; margin: 0 10px;\n\t\t\t\t\timg { max-width: 100%; height: auto; } \n\t\t\t\t}\n\t\t\t}\n\t\t\t@media only screen and (min-width: 768px){\n\t\t\t\tpadding: 20px 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.total {\n\t padding: 20px 0; width: 85%; margin: 0 auto; font-weight: 900; color: #ee3124; border-bottom: 2px solid black; \n\t  .row { margin: 0 auto; width: 100%; display: flex; }\n\t  .gr-8 { flex-grow: 8; }\n\t  .gr-4 { flex-grow: 4; }\n}\n\n.cards {\n\tpadding: 20px 10px;\n\timg { margin: 0 15px; width: 100px; border-radius: 3px; \n\t\t@media screen and (max-width: 480px) {\n\t\t\twidth: 80px; margin: 0 2px; \n\t\t}\n\t} \n}\n\n.svg-spectrum-logo { width: 100px; display: inline-block; }\n\n.shop-action {\n  width: 90%; text-align: center; font-weight: 700; margin: 0 auto; \n  .extra { padding: 10px 0; font-size: .8em; font-weight: 100; }\n  .button { padding: 12px 5px; color: white; margin: 0px 0; position: relative; }\n  a { text-decoration: none; }\n  i { font-size: 1.6em; padding-left: 20px; }\n  .checkout { background: #ee3124; } \n  .paypal { background: #009cdd; }\n}\n\n.form-start {\n\tborder: 2px solid #f3f3f3; margin: 0 auto; \n \t.form-head {\n\t\tbackground: #f3f3f3; font-weight: 700; font-size: 1.15em; padding: 18px 5%;  \n\t\t.status { font-size: .875em; position: relative; margin-right: 2em; \n        \ti { font-size:  1.125em; top: 0; right: -2em; position: absolute; }\n\t\t\ta { color: black; font-size: 300; } \n\t\t}\n\t}\n  \t.form-container {\n    \twidth: 90%; margin: 0 auto; \n    \t.alert { width: 70%; }\n\t\th2 { text-transform: uppercase; font-size: 1.15em; padding: 0 0 1em; \n\t\t\t&.extra-pad { padding: 20px 0; }\n\t\t}\n    \tform { padding: 15px 0; box-sizing: border-box; }\n\t\tinput[type='text'], input[type='email'], input[type=password], input[type=number] { font-size: 0.875em; padding: 10px; width: 70%; text-transform: uppercase; font-size: 300; border: 1px solid black; text-transform: none; height: 40px; }\n      \tinput[type='email'].has-errors { border: 2px solid #ee3124; }\n\t\tlabel { position: relative; font-size: .8125em; display: block; padding: 1em 0; \n\t\t\t.optional { float: right; color: $middlegrey; margin-right: 30%; font-style: italic; }\n\t\t}\n\t\t.empty-field {\n\t\t\tcolor: $red; display: flex; align-items: center; padding: 0.5em 0; font-size: 0.875em;\n\t\t\tp { margin-left: 0.5em; }\n\t\t}\n    \t.input-field { position: relative; width: 100%; \n      \t\ti { font-size: 1.5em; text-align: right; }\n\t\t\t.correct, .errors { position: absolute; bottom: 10px; right: 10px; display: none; }\n\t\t  \t.errors { background-color: #ee3124; color: white; display: block; width: 25px; text-align: center; top: 50%; height: 25px; }\n\t\t}\n    \t.btn-submit { padding: 30px 0; }\n    \tbutton[type='submit'] { background: #000; color: #fff; font-weight: 100; font-size: 1.125em; padding: 15px 40px; text-align: center; text-transform: uppercase; border: none; outline: none; }\n\t\t.dropdown { display: inline-block; margin-bottom: 1em; position: relative;\n\t\t\tselect { font-size: 0.875em; background-color: $white; -webkit-appearance: none; border: 1px solid $checkoutblack; border-radius: 0; display: block; padding: 10px 60px 10px 10px; height: 40px; width: 100%;  }\n\t\t\tfieldset {\n\t\t\t\tpadding: 0 !important; border: 0;\n\t\t\t\t&::before { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid white; content: ''; z-index: 9; position: absolute; pointer-events: none; right: 12px; top: 50%; transform: translateY(-50%); }\n\t\t\t\t&::after { content: ''; position: absolute; right: 0; width: 40px; top: 0; pointer-events: none; height: 40px; background: #292929; }\n\t\t\t}\n\t\t}\n\t\tinput {\n\t\t\t&.has-errors:placeholder-shown { border: 2px solid #ee3124; outline: none; }\n\t\t\t&.has-errors:valid, &.has-errors:focus:valid, &:placeholder-shown { border: 1px solid black; }\n\t\t\t&:valid ~ .correct, &:focus:valid ~ .correct { display: inline-block; }\n\t\t\t&:placeholder-shown ~ .errors, &:placeholder-shown ~ .correct { display: none; }\n\t\t\t&.has-errors:placeholder-shown ~ .errors { display: inline-block; }\n\t\t\t&[readonly] { opacity: 0.35; }\n\t\t}\n\n\t\t.address { border: 1px solid $pale; overflow: hidden; margin-bottom: 1em; \n\t\t\tposition: relative;\n\t\t\tlabel { padding: 1em; display: block; width: 100%; padding-left: 3em;}\n\t\t\tinput[type=radio] { margin-right: 1em; position: absolute; top: 50%; left: 1em; z-index: 1; transform: translateY(-50%); }\n\t\t\tinput[type=radio]:checked + label { background-color: $pale;  }\n\t\t}\n\t\t.address-form { margin-bottom: 2em; }\n    }\n}\n\n.alert { \n\tfont-size: 0.95em; width: 100%; padding: 7px 10px; position: relative; color: #fff; \n\tp { margin-left: 10px; font-size: 300; text-transform: none; display: inline-block; }\n\ti { color: #fff; bottom: 0; vertical-align: middle; width: 15px; display: inline-block; }\n\t&.alert-big { padding: 17px 10px; margin: 10px 0; }\n\t&.alert-error { background: #ee3124; border: 1px solid #f4746b; }\n\t&.alert-success { background: #47B765; border: 1px solid #7ecd93; }\n\t&.alert-warning { background: #EFAE12; border: 1px solid #f4c65a; }\n\t&.alert-info { background: #35A5CF; border: 1px solid #73c1de; }\n}\n\n\n\ninput[type=\"checkbox\"] { padding: 0; width: 15px; height: 15px; line-height: 0; margin-bottom: 0px; background: #fff; border: 1px solid #c2c2c2; -webkit-appearance: none; }\ninput[type=\"checkbox\"]:checked { background: #000; }\n\n#tabs { width: 100%; \n  \tp { text-transform: none; padding: 15px 0; line-height: 1.35em; }\n  \tul { width: 100%; }\n  \ta { text-decoration: none; color: black; display: block; padding: 20px 15px; \n\t\t&:focus { outline: none; }\n\t}\n  \tbutton { padding: 0; margin: 0 auto; font-size: 300; width: 90%; border: none; }\n  \t.ui-state-active { background: #f3f3f3; }\n    .ui-state-active input[type=\"checkbox\"] { background: #000; padding: 2px; }\n\tli { display: inline-block; border: 2px solid #f3f3f3; \n\t\t&:focus { outline: none; }\n\t}\n    .checkboxes- {\n\t\t&agb { display: block; margin: 10px; \n\t\t\ta { display: inline-block; padding: 0; }\n\t\t}\n\t\t&privacy { display: block; margin: 20px 10px; \n\t\t\ta { display: inline-block; padding: 0; }\n\t\t}\n\t}\n}\n\n\n.breadcrumb { background-color: #000; color: #fff; margin: 0; padding: 5px 0; text-align: center;\n  \tul { list-style: none; margin: 5px 0; \n    \tli { padding: 0 10px; margin-top: 10px; margin-bottom: 10px; display: inline-block; vertical-align: top; position: relative;\n\t\t\ta { color: #fff; }\n\t\t\t&:after { border-right: 2px solid #6a6d70; position: absolute; display: block; height: 25px; width: 5px; right: -5px; top: -5px; transform: rotate(18deg); content: ' '; }\n\t\t\t&:last-child:after { border: 0; }\n\t  \t}\n\t}\n}\n\n.checkout {\n\tiframe { border: 0; overflow: auto; }\n\t.form-container { padding: 2em 0; }\n\t&__basic-details { text-transform: none; \n\t\t&-content { margin-bottom: 1em; }\n\t\ta  {\n\t\t\tdisplay: inline-block; font-size: 0.875em; text-transform: uppercase; padding: 12px 0; text-align: center;\n\t\t\t&:link, &:visited { color: black;  }\n\t\t}\n\t}\n\t.addresses {\n\t\th2 { font-weight: 900; font-family: 'Bodoni-900'; }\n\t}\n\t@media only screen and (min-width: 768px){\n\t\t&__content { display: flex; align-items: flex-start; max-width: 1040px; width: 100%; margin: 0 auto 1em; }\n\t\t&__body { width: 58%; margin-right: 2%; \n\t\t\t&-full { width: 100%; margin: 0; }\n\t\t}\n\t\t&__order-summary { width: 40%;   }\n\t}\n\n}\n\n.signup__box {\n\tpadding: 2em 0;\n\th3 { margin-bottom: 0.5em; }\n\tp { font-size: 0.875em; line-height: 1.6em; max-width: 70%; }\n\t.password__reveal {\n\t\t@include password-reveal; margin: 0; max-width: 400px; width: 100%;\n\t\tinput[type=text] { font-size: 0.875em; }\n\t\tlabel { padding-left: 1em; }\n\t}\n}","// Functions\n@function helper-gradient-angle ($direction) {\n\n\t$old-direction: $direction;\n\t$veryold-direction: $direction;\n\n\t// New Syntax has to be evaluated to old one\n\t@if $direction == 'to bottom' {\n\t\t$old-direction: 'top';\n\t} @else if $direction == 'to right' {\n\t\t$old-direction: 'left';\n\t} @else if $direction == 'to top' {\n\t\t$old-direction: 'bottom';\n\t} @else if $direction == 'to left' {\n\t\t$old-direction: 'right';\n\t} @else {\n\t\t$old-direction: angle($direction);\n\t}\n\n\t// And also for very old syntax\n\t@if $direction == 'to bottom' {\n\t\t$veryold-direction: 'left top, left bottom';\n\t} @else if $direction == 'to right' {\n\t\t$veryold-direction: 'top left, bottom right';\n\t} @else if $direction == 'to top' {\n\t\t$veryold-direction: 'left bottom, left top';\n\t} @else if $direction == 'to left' {\n\t\t$veryold-direction: 'top right, bottom left';\n\t} @else {\n\t\t$veryold-direction: angle($direction);\n\t}\n\n\n\t@return $old-direction, $veryold-direction;\n}\n\n// Mixins\n// Iterates over multiple objects\n@mixin iteration($count:infinite) {\n\t-webkit-animation-iteration-count: $count;\n\tanimation-iteration-count: $count;\n}\n\n// Adds text shadow\n@mixin text-shadow ($string: 0 1px 3px rgba(0, 0, 0, 0.25)) {\n\ttext-shadow: $string;\n}\n\n// Adds drop shadow\n@mixin drop-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25, $inset:\"\") {\n\t-webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha) unquote($inset);\n\t-moz-box-shadow:    $x $y $blur $spread rgba(0, 0, 0, $alpha) unquote($inset);\n\tbox-shadow:         $x $y $blur $spread rgba(0, 0, 0, $alpha) unquote($inset);\n}\n\n// Adds animation keyframes\n@mixin keyframes($animation-name) {\n\t@-webkit-keyframes #{$animation-name} {\n\t\t@content;\n\t}\n\t@-moz-keyframes #{$animation-name} {\n\t\t@content;\n\t}\n\t@-ms-keyframes #{$animation-name} {\n\t\t@content;\n\t}\n\t@-o-keyframes #{$animation-name} {\n\t\t@content;\n\t}\n\t@keyframes #{$animation-name} {\n\t\t@content;\n\t}\n}\n\n// Adds animation (must be declared with '@include keyframes(animation)' earlier)\n@mixin animation($str) {\n\t-webkit-animation: #{$str};\n\t-moz-animation: #{$str};\n\t-ms-animation: #{$str};\n\t-o-animation: #{$str};\n\tanimation: #{$str};\n}\n\n// Absolute position on object\n@mixin absolute-pos($top, $left, $bottom, $right) {\n\tposition: absolute;\n\ttop:$top;\n\tleft:$left;\n\tbottom:$bottom;\n\tright:$right;\n}\n\n// Clearfix\n@mixin clearfix{\n\tzoom:1;\n\t&:before, &:after{ content:\"\"; display:table; }\n\t&:after{ clear: both; }\n}\n.clearfix{\n\tzoom: 1;\n\t&:before, &:after{ content:\"\"; display:table; }\n\t&:after{ clear: both; }\n}\n\n// Adds radial gradient\n@mixin radial-gradient($col1, $col2){\n\tbackground: $col1;\n\tbackground: -moz-radial-gradient(center, ellipse cover, $col1 0%, $col2 100%);\n\tbackground: -webkit-radial-gradient(center, ellipse cover, $col1 0%,$col2 100%);\n\tbackground: radial-gradient(center, ellipse cover, $col1 0%,$col2 100%);\n}\n\n// Adds linear-gradient\n@mixin linear-gradient ($direction: 'to bottom', $fallback: #ccc, $from: #ccc, $to: #aaa) {\n\n\t$directions: helper-gradient-angle($direction);\n\n\t// Provide a fallback-color\n\tbackground-color: $fallback;\n\n\t// Cross-browser linear-gradients\n\tbackground-image: -webkit-gradient(linear, unquote(nth($directions, 2)), from($from), to($to)); // Android 2.1-3.0\n\tbackground-image: -webkit-linear-gradient(unquote(nth($directions, 1)), $from, $to);\n\tbackground-image:         linear-gradient(unquote($direction), $from, $to);\n}\n\n@mixin password-reveal(){\n\tdisplay: flex; align-items: center; justify-content: center; width: 90%; margin: 0 auto;\n\tinput[type=text], input[type=password], &-password { width: calc(100% - 100px); }\n\tinput[type=text] {\n\t\theight: 40px; line-height: 40px; font-size: 1.2em; text-transform: none; outline: none; border: 1px solid black; letter-spacing: 0.5px; padding-left: 7.5px;\n\t}\n\t&-label { display: block; width: 100px; font-size: 0.75em; }\n\t&-trigger { margin-right: 10px; } \n}\n\n$grapple_breakpoints: (\n  'phone':        400px,\n  'phone-wide':   480px,\n  'phablet':      560px,\n  'tablet-small': 640px,\n  'tablet':       768px,\n  'tablet-wide':  1024px,\n  'desktop':      1248px,\n  'desktop-wide': 1441px,\n  'beyond-desktop': 1441px\n);\n\n@mixin mq($width, $type: min) {\n  @if map-has-key($grapple_breakpoints, $width) {\n    $width: map-get($grapple_breakpoints, $width);\n    @if $type == max {\n      $width: $width - 1px;\n    }\n    @media only screen and (#{$type}-width: $width) {\n      @content;\n    }\n  }\n}\n","@font-face {\n\tfont-family: 'Bodoni-600';\n\tsrc: url('../fonts/Bodoni/Bodoni-xt/BodoniXT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\n\turl('../fonts/Bodoni/Bodoni-xt/BodoniXT.woff') format('woff'), /* Modern Browsers */\n\turl('../fonts/Bodoni/Bodoni-xt/BodoniXT.ttf') format('truetype'), /* Safari, Android, iOS */\n\turl('../fonts/Bodoni/Bodoni-xt/BodoniXT.svg#BodoniXT') format('svg');\n\tfont-weight: bold;\n\tfont-style: normal;\n\tfont-size: 19px!important;\n}\n@font-face {\n\tfont-family: 'Bodoni-900';\n\tsrc: url('../fonts/Bodoni/Bodoni-b/BodoniBT-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\n\turl('../fonts/Bodoni/Bodoni-b/BodoniBT-Bold.woff') format('woff'), /* Modern Browsers */\n\turl('../fonts/Bodoni/Bodoni-b/BodoniBT-Bold.ttf') format('truetype'), /* Safari, Android, iOS */\n\turl('../fonts/Bodoni/Bodoni-b/BodoniBT-Bold.svg#BodoniBT-Bold') format('svg');\n\tfont-weight: normal;\n\tfont-size: 1.1em;\n}\n@font-face {\n\tfont-family: 'Bodoni-900-i';\n\tsrc: url('../fonts/Bodoni/Bodoni-bi/BodoniBT-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\n\turl('../fonts/Bodoni/Bodoni-bi/BodoniBT-BoldItalic.woff') format('woff'), /* Modern Browsers */\n\turl('../fonts/Bodoni/Bodoni-bi/BodoniBT-BoldItalic.ttf') format('truetype'), /* Safari, Android, iOS */\n\turl('../fonts/Bodoni/Bodoni-bi/BodoniBT-BoldItalic.svg#BodoniBT-Bold') format('svg');\n\tfont-weight: normal;\n\tfont-style: italic;\n}","$top-bar: 30px;\n$menu: 85px;\n$shipping-bar: 30px;\n$promo-bar: 25px;\n$totale: $top-bar + $menu + $shipping-bar + $promo-bar;\n$pale: #f4f4f4;\n$red: #ee3124;\n$grey: #c6c6c6;\n$gold: #c39762;\n$hair-care: #9e4d98;\n$grooming: #6d5d58;\n$shaving: #788da0;\n$hair-removal: #d0adb1;\n$beauty: #49ad83;\n$flag-sprite: '/images/flag-sprite-small.png';\n$darkgrey: #39353b;\n$middlegrey: #666666;\n$lightgrey: #f4f4f4;\n$lightergrey: #fbfbfb;\n$instock: #49ad83;\n$outstock: #ee3124;\n//$m100: 'Museo100', Arial, Helvetica, sans-serif;\n//$m300: 'Museo300', Arial, Helvetica, sans-serif;\n//$m500: 'Museo300', Arial, Helvetica, sans-serif;\n//$m700: 'Museo700', Arial, Helvetica, sans-serif;\n//$m900: 'Museo900', Arial, Helvetica, sans-serif;\n$mH: Helvetica, Arial, sans-serif;\n$m100: $mH;\n$m300: $mH;\n$m500: $mH;\n$m600: 'Bodoni-600';\n$m700: 'Bodoni-900';\n$m900: 'Bodoni-900';\n$m900i: 'Bodoni-900-i';\n"]}