/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; }

/** Add the correct display in IE 9-. */
audio, canvas, progress, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Add the correct display in IE 10-. 1. Add the correct display in IE. */
template, [hidden] { display: none; }

/* Links ========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active, a:hover { outline-width: 0; }

/* Text-level semantics ========================================================================== */
/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/* Forms ========================================================================== */
/** 1. Change font properties to `inherit` in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ }

/** Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold; }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Change the border, margin, and padding in all browsers (opinionated). */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Correct the text style of placeholders in Chrome, Edge, and Safari. */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

@font-face { font-family: 'SackersGothic'; src: url("fonts/Sackers/Monotype  - SackersGothicStd-Medium.otf"); font-weight: 400; font-style: normal; }

@font-face { font-family: 'SackersGothic'; src: url("fonts/Sackers/Monotype  - SackersGothicStd-Heavy.otf"); font-weight: 600; font-style: normal; }

@font-face { font-family: 'GothamBook'; src: url("fonts/gotham/Gotham-Book.otf"); font-weight: 400; font-style: normal; }

@font-face { font-family: 'GothamBook'; src: url("fonts/gotham/Gotham-Bold.otf"); font-weight: 600; font-style: normal; }

.outer { display: table; position: absolute; height: 100%; width: 100%; }

.middle { display: table-cell; }

#quiz { max-width: 980px; margin: 0 auto; }

#quiz * { box-sizing: border-box; }

#quiz p { font-family: 'Gotham A', 'Gotham B',sans-serif; font-weight: 400; font-size: 16px; }

#quiz a.btn { background-color: #ff4612; border: 1px solid #ff4612; color: #ffffff; cursor: pointer; display: inline-block; font-family: 'SackersGothic',sans-serif; font-weight: 600; letter-spacing: 2px; margin: 5px !important; min-width: 250px; padding: 9px 0; font-size: 10px !important; }

@media screen and (min-width: 670px) { #quiz a.btn { font-size: 14px !important; padding: 18px 0 12px 0; letter-spacing: 1px; line-height: 16px; display: block; width: 325px; margin: 8px auto !important; } }

@media screen and (min-width: 962px) { #quiz a.btn { font-size: 11px !important; letter-spacing: 1px; width: 250px; padding: 12px 0 9px 0; } }

#quiz a.btn:hover { background-color: #e54012; }

#quiz a.btn.btn-secondary { background-color: #ffffff; border-color: #000000; color: #000000; }

#quiz a.btn.btn-secondary:hover { background-color: #000000; color: #ffffff; }

@media screen and (min-width: 962px) { #quiz .hide-large { display: none !important; } }

#quiz .show-large { display: none !important; }

@media screen and (min-width: 962px) { #quiz .show-large { display: block !important; } }

#quiz section { background: linear-gradient(180deg, #ffeeea 355px, #FFFFFF 355px); width: 100%; min-height: 515px; padding: 65px 15px 0 15px; display: none; }

#quiz section.time { display: inherit; }

#quiz section .question { width: 100%; text-align: center; }

#quiz section .question .q-number { font-family: 'SackersGothic',sans-serif; font-weight: 600; }

#quiz section .answer { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; margin-top: 110px; }

#quiz section .answer .answer-container { width: 45%; margin: 5px 0; }

@media screen and (min-width: 670px) { #quiz section .answer .answer-container { width: 25%; } }

@media screen and (min-width: 962px) { #quiz section .answer .answer-container { width: 33%; display: flex; justify-content: center; align-items: center; height: 300px; margin-top: -15px; } }

#quiz section .answer a { display: block; box-shadow: 0 0 20px -5px #000; border-radius: 50%; width: 100%; height: 140px; background-size: 110%; background-position: center center; }

@media screen and (min-width: 670px) { #quiz section .answer a { height: auto; } }

@media screen and (min-width: 962px) { #quiz section .answer a { /*background-size: 260px;*/ width: 235px !important; height: 235px !important; -webkit-transition: width 200ms, height 200ms; transition: width 200ms, height 200ms; }
  #quiz section .answer a:hover { width: 255px !important; height: 255px !important; } }

#quiz section .answer a#q1a { background-image: url(../style_quiz_img/q1-a-hover.png); }

#quiz section .answer a#q1b { background-image: url(../style_quiz_img/q1-b-hover.png); }

#quiz section .answer a#q1c { background-image: url(../style_quiz_img/q1-c-hover.png); }

#quiz section .answer a#q2a { background-image: url(../style_quiz_img/q2-a-hover.png); }

#quiz section .answer a#q2b { background-image: url(../style_quiz_img/q2-b-hover.png); }

#quiz section .answer a#q2c { background-image: url(../style_quiz_img/q2-c-hover.png); }

#quiz section .answer a#q3a { background-image: url(../style_quiz_img/q3-a-hover.png); }

#quiz section .answer a#q3b { background-image: url(../style_quiz_img/q3-b-hover.png); }

#quiz section .answer a#q3c { background-image: url(../style_quiz_img/q3-c-hover.png); }

#quiz section .answer a#q4a { background-image: url(../style_quiz_img/q4-a-hover.png); }

#quiz section .answer a#q4b { background-image: url(../style_quiz_img/q4-b-hover.png); }

#quiz section .answer a#q4c { background-image: url(../style_quiz_img/q4-c-hover.png); }

#quiz section .answer a img { max-width: 100%; display: block; }

#quiz section.result { background: none; padding: 0; }

@media screen and (min-width: 962px) { #quiz section.result { min-height: 0; } }

#quiz section.result.classic .sole-style { background-image: url(../style_quiz_img/answer3.png); background-position-x: 15%; }

#quiz section.result.classic .sole-style .info { top: 15%; left: 9%; }

@media screen and (min-width: 374px) { #quiz section.result.classic .sole-style .info { top: 16%; left: 8%; } }

@media screen and (min-width: 420px) { #quiz section.result.classic .sole-style .info { top: 17%; left: 12%; } }

@media screen and (min-width: 670px) { #quiz section.result.classic .sole-style .info { top: 17%; left: 10%; } }

#quiz section.result.active .sole-style { background-image: url(../style_quiz_img/answer2.png); background-repeat: no-repeat;}

#quiz section.result.chic .sole-style { background-image: url(../style_quiz_img/answer1.png); background-repeat: no-repeat;}

#quiz section.result h2 { margin: 0; font-family: 'Gotham A', 'Gotham B',sans-serif; font-weight: 400; font-size: 23px; padding: 6px 0 10px 0; text-transform: uppercase; letter-spacing: 1px; }

@media screen and (min-width: 420px) { #quiz section.result h2 { padding: 3px 0 5px 0; } }

@media screen and (min-width: 670px) { #quiz section.result h2 { font-size: 28px; padding: 10px 0 14px 0; } }

@media screen and (min-width: 962px) { #quiz section.result h2 { font-size: 23px; padding: 6px 0 10px 0; } }

#quiz section.result p, #quiz section.result a { font-size: 10px; margin: 0; }

@media screen and (min-width: 374px) { #quiz section.result p, #quiz section.result a { font-size: 11px; } }

@media screen and (min-width: 670px) { #quiz section.result p, #quiz section.result a { font-size: 16px; line-height: 1.4; } }

@media screen and (min-width: 962px) { #quiz section.result p, #quiz section.result a { font-size: 14px; } }

#quiz section.result a { text-decoration: none; }

#quiz section.result .sole-style { background-size: 129% auto; padding-top: 98.344%; position: relative; background-position-x: 30%; }

@media screen and (min-width: 374px) { #quiz section.result .sole-style { background-size: 114% auto; padding-top: 86.344%; } }

@media screen and (min-width: 420px) { #quiz section.result .sole-style { background-size: 100% auto; padding-top: 76.344%; background-position-x: 0%; } }

@media screen and (min-width: 962px) { #quiz section.result .sole-style { width: 60%; padding-top: 45.344%; } }

#quiz section.result .sole-style .info { position: absolute; top: 17%; left: 11%; width: 62%; text-align: center; }

@media screen and (min-width: 374px) { #quiz section.result .sole-style .info { top: 16%; left: 10%; width: 60%; } }

@media screen and (min-width: 420px) { #quiz section.result .sole-style .info { top: 17%; left: 12%; width: 52%; } }

@media screen and (min-width: 670px) { #quiz section.result .sole-style .info { top: 18%; left: 14%; width: 50%; } }

#quiz section.result .sole-style .info p, #quiz section.result .sole-style .info a { text-shadow: 1px 1px 1px #ffffff; }

#quiz section.result .sole-style .info p { font-family: 'Gotham A', 'Gotham B',sans-serif; font-weight: 400; }

#quiz section.result .sole-style .info p strong { font-weight: 600; }

#quiz section.result .sole-style .info p:first-of-type { font-family: 'SackersGothic',sans-serif; font-weight: 600; text-transform: lowercase; }

#quiz section.result .sole-style .info h2 { text-decoration: none; }

#quiz section.result .sole-style .info a { font-family: "mrs-eaves",serif; font-weight: 400; color: #ff4612; text-decoration: none; font-style: italic; display: inline-block; margin: 5px 10px; font-size: 13px; cursor: pointer; }

@media screen and (min-width: 670px) { #quiz section.result .sole-style .info a { font-size: 18px; } }

#quiz section.result .shoe { text-align: center; background: linear-gradient(180deg, #ffeeea 50%, #FFFFFF 50%); }

@media screen and (min-width: 962px) { #quiz section.result .shoe { background: linear-gradient(180deg, #FFFFFF 51%, #ffeeea 51%, #ffeeea 73%, #FFFFFF 73%); width: 40%; flex-wrap: wrap; align-items: center; justify-content: center; display: flex; padding: 15px 0; } }

#quiz section.result .shoe h2 { font-size: 18px; padding: 15px 0 8px 0; }

@media screen and (min-width: 670px) { #quiz section.result .shoe h2 { font-size: 23px; } }

@media screen and (min-width: 962px) { #quiz section.result .shoe h2 { width: 100%; order: 1; padding: 0; } }

#quiz section.result .shoe p:first-of-type { font-family: 'SackersGothic',sans-serif; font-weight: 600; text-transform: lowercase; }

@media screen and (min-width: 962px) { #quiz section.result .shoe p:first-of-type { order: 2; } }

#quiz section.result .shoe img { width: 46%; margin: 0px auto; padding: 10px 0; display: block; }

@media screen and (min-width: 962px) { #quiz section.result .shoe img { max-width: 51%; width: 100%; order: 4; } }

@media screen and (min-width: 962px) { #quiz section.result .shoe .btn { order: 3; } }

@media screen and (min-width: 962px) { #quiz section.result .shoe .btn.btn-secondary { order: 5; } }

@media screen and (min-width: 420px) { #quiz section.result.chic .shoe { background: linear-gradient(90deg, #ffffff 75%, #ffeeea 25%); display: flex; justify-content: space-around; align-items: center; padding: 15px 0; }
  #quiz section.result.chic .shoe img { width: 95%; } }

@media screen and (min-width: 962px) { #quiz section.result.chic .chic-shoe-container { width: 40%; }
  #quiz section.result.chic .chic-shoe-container > div { width: 100%; }
  #quiz section.result.chic .chic-shoe-container .shoe { background: linear-gradient(180deg, #FFFFFF 48%, #ffeeea 48%, #ffeeea 75%, #FFFFFF 75%); display: block; } }

@media screen and (min-width: 962px) { #quiz section.result .chic-shoe-container { width: 40%; }
  #quiz section.result .chic-shoe-container > div { width: 100%; }
  #quiz section.result .chic-shoe-container .shoe { /*background: linear-gradient(180deg, #FFFFFF 48%, #ffeeea 48%, #ffeeea 75%, #FFFFFF 75%);*/ background: white; display: block; } 
  #quiz section.result .chic-shoe-container .shoe h2 { margin-top: 20px; } 
  #quiz section.result .chic-shoe-container .shoe p { margin: 15px auto; } 
  #quiz section.result .chic-shoe-container .shoe .btn { margin: 15px auto;}
  #quiz section.result .chic-shoe-container .shoe .show-large { margin-top: 10px; margin-bottom: 10px; } 
}

#quiz section.result .chic-wide-width { padding: 15px 0; display: flex; align-items: center; justify-content: space-around; }

#quiz section.result .chic-wide-width div, #quiz section.result .chic-wide-width img { display: inline-block; }

#quiz section.result .chic-wide-width div { text-align: center; }

#quiz section.result .chic-wide-width div p { font-family: 'SackersGothic',sans-serif; font-weight: 600; text-transform: lowercase; }

#quiz section.result .chic-wide-width div h3 { font-family: 'Gotham A', 'Gotham B',sans-serif; font-weight: 400; margin: 5px 0; font-size: 16px; }

@media screen and (min-width: 670px) { #quiz section.result .chic-wide-width div h3 { font-size: 22px; } }

#quiz section.result .chic-wide-width div a { font-family: "mrs-eaves",serif; font-weight: 400; color: #ff4612; text-decoration: none; font-style: italic; display: inline-block; padding: 10px 0; font-size: 16px; }

@media screen and (min-width: 670px) { #quiz section.result .chic-wide-width div a { font-size: 18px; } }

@media screen and (min-width: 962px) { /* #quiz section.result .chic-wide-width { background: linear-gradient(90deg, #FFFFFF 15%, #f9f8f8 15%, #f9f8f8 40%, #FFFFFF 40%); }*/
  #quiz section.result .chic-wide-width img { order: -1; } }

#quiz .share-container { position: absolute; top: 0; left: 0; background-color: rgba(1, 1, 1, 0.5); width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; }

#quiz .share-container .circle { background-color: #ffffff; width: 90%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px; }

@media screen and (min-width: 670px) { #quiz .share-container .circle { border-radius: 50%; width: 600px; height: 600px; padding: 130px 40px; } }

#quiz .share-container .circle .close { text-decoration: none; color: #ffffff; position: absolute; top: 2%; right: 2%; font-size: 30px; }

#quiz .share-container .circle header h2, #quiz .share-container .circle button, #quiz .share-container .circle .btn-share, #quiz .share-container .circle .close { font-family: 'SackersGothic',sans-serif; font-weight: 300; text-transform: lowercase; }

#quiz .share-container .circle header h2 { font-family: 'SackersGothic',sans-serif; font-weight: 600; text-transform: lowercase; text-align: center; margin: 0; line-height: 1.5; }

@media screen and (min-width: 670px) { #quiz .share-container .circle header h2 { font-size: 30px; } }

#quiz .share-container .circle .share-form { font-size: 16px; margin: 0 0 10px; width: 100%; }

@media screen and (min-width: 670px) { #quiz .share-container .circle .share-form { font-size: 16px; margin: 0 0 15px; } }

@media screen and (min-width: 962px) { #quiz .share-container .circle .share-form { font-size: 25px; margin: 0 0 30px; } }

#quiz .share-container .circle .share-form input[type="text"], #quiz .share-container .circle .share-form button { height: 50px; border: none; outline: none; }

@media screen and (min-width: 670px) { #quiz .share-container .circle .share-form input[type="text"], #quiz .share-container .circle .share-form button { height: 50px; } }

@media screen and (min-width: 962px) { #quiz .share-container .circle .share-form input[type="text"], #quiz .share-container .circle .share-form button { height: 50px; } }

#quiz .share-container .circle .share-form input[type="text"] { width: 100%; padding: 5px; background-color: #f6f5f5; }

@media screen and (min-width: 670px) { #quiz .share-container .circle .share-form input[type="text"] { width: 68%; padding: 10px 10px 10px 16px; float: left; } }

@media screen and (min-width: 962px) { #quiz .share-container .circle .share-form input[type="text"] { width: 70%; float: left; } }

#quiz .share-container .circle .share-form button { font-weight: 700; text-transform: uppercase; color: #ffffff; background: #ff4612; transition: background .27s ease-out; width: 100%; padding: 5px; }

@media screen and (min-width: 670px) { #quiz .share-container .circle .share-form button { width: 29%; padding: 14px 0px 10px 0; font-size: 17px; float: left; } }

#quiz .share-container .circle .share-form button:hover { background: #de3100; }

#quiz .share-container .circle .share-btn-holder { display: flex; justify-content: space-around; width: 100%; flex-wrap: wrap; }

#quiz .share-container .circle .share-btn-holder .btn-share { width: 100%; height: 52px; font-size: 16px; font-weight: 700; text-transform: uppercase; text-decoration: none; text-align: center; padding: 20px 15px; color: #ffffff; background: #3b5998; margin: 5px 0; position: relative; }

@media screen and (min-width: 670px) { #quiz .share-container .circle .share-btn-holder .btn-share { height: 50px; font-size: 17px; width: 30%; padding-top: 18px; } }

#quiz .share-container .circle .share-btn-holder .btn-share.twitter { background: #00aced; }

#quiz .share-container .circle .share-btn-holder .btn-share.twitter:hover { opacity: .7; color: #ffffff; }

#quiz .share-container .circle .share-btn-holder .btn-share i { padding-right: 10px; position: absolute; left: 10%; }