.tptpl .header { position: fixed; z-index: 3; top: 0; width: 100%; height: 60px; background: #fff; } .tptpl .header .mobile-main-nav a { font-size: 0; line-height: 0; display: block; width: 22px; height: 22px; background: 0 0; position: absolute; top: 22px; left: 19px; } .tptpl .header .mobile-main-nav a span { display: block; width: 100%; border-top: 1px solid #000; position: absolute; top: 0; left: 0; } .tptpl .header .mobile-main-nav a span:after, .tptpl .header .mobile-main-nav a span:before { content: ""; display: block; width: 100%; border-top: 1px solid #000; position: absolute; top: 7.5px; left: 0; } .tptpl .header .mobile-main-nav a span:after { top: 16px; } .tptpl .header .logo { display: none; } .tptpl .header .logo-off-top { font-size: 0; line-height: 0; position: absolute; display: block; top: 18px; left: 62px; background: transparent 0 -124px no-repeat; background-size: 145px; width: 150px; height: 30px; transition: none; } .tptpl .desktop-header-country-menu-button a, .tptpl .mobile-header-country-menu-button a { color: #000; position: absolute; right: 0; background: 0 0; width: 70px; top: 17px; } .tptpl .desktop-header-country-menu-button a { position: relative; color: #000; right: 0; top: -4px; width: inherit; padding: 0 !important; } .tptpl .desktop-header-country-menu-button .menu-label { display: none; text-transform: uppercase; font-weight: 500; font-size: 13px; float: left; padding: 7px 10px 4px 0; max-width: 135px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .tptpl .mobile-header-country-menu-button a span.country { border: 1px solid; padding: 3px 5px 4px; font-size: 13px; margin: 0 9px 0 0; float: left; font-weight: 500; } .tptpl .desktop-header-country-menu-button a { display: table !important; margin: -3px 0 -4px !important; } .tptpl .desktop-header-country-menu-button a span.country { border: 1px solid; padding: 6px 4px 7px; font-size: 13px; margin: 0 9px 0 0; float: left; font-weight: 500; } .tptpl .mobile-header-country-menu-button span.select-symbol { width: 10px; display: inline-block; margin-top: 3px; } .tptpl .desktop-header-country-menu-button span.select-symbol { width: 15px; float: left; margin-top: 3px; } .tptpl .desktop-header-country-menu-button span.select-symbol svg.svg-select, .tptpl .mobile-header-country-menu-button span.select-symbol svg.svg-select {} .tptpl .mega-dropdown { display: none; } .tptpl .desktop-search { display: none; } .tptpl .desktop-header-country-menu-button .menu { padding: 30px 0 15px; font-size: 13px; } .tptpl .desktop-header-country-menu-button .menu a { background: 0 0; padding: 7px 20px !important; color: #000; } .tptpl .desktop-header-country-menu-button .menu a span { position: relative; } .tptpl .desktop-header-country-menu-button .menu a span:after { content: ""; border-bottom: 1px solid transparent; position: absolute; width: 100%; bottom: -2px; left: 0; transition: all 0.25s ease-in-out; } .tptpl .desktop-header-country-menu-button .menu a:hover span:after { border-color: #000; } .tptpl .search-and-country-container .is-dropdown-submenu { border: none; } .tptpl #skip-container { display: none; } .tptpl nav/**/#main li a.kbc-more-link { display: none; } @media screen and (min-width: 1120px) { .tptpl #skip-container { display: block; position: absolute; top: 0; transition: transform 0.25s ease-in-out; width: 100%; color: #000; background: #ffeed9; font-size: 0; line-height: 0; z-index: 1; min-height: 40px; transform: translateY(-40px); } .tptpl .keyboard-control #skip-container { transform: translateY(0); } .tptpl #skip-container a { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025rem; text-decoration: none; color: #000; background: #ffeed9; margin: 10px; display: inline-block; padding: 10px; } .tptpl .header { height: 95px; transition: background 0.25s ease-in-out, transform 0.25s ease-in-out; } .tptpl .keyboard-control .header { position: absolute; transform: translateY(40px); } .tptpl .header .logo { top: 41px; left: 41px; background-size: 200px; width: 200px; height: 125px; } .tptpl .header .logo-off-top { top: 32px; left: 40px; background-position: 0 -175px; background-size: 200px; width: 200px; height: 35px; } .tptpl .header .mega-dropdown { display: block; font-size: 0; text-align: center; margin: 0 auto; width: 100%; } .tptpl .header .mega-dropdown .mega-dropdown-heading { display: inline-block; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025rem; padding: 37px 15px 39px; } .tptpl .header .mega-dropdown .mega-dropdown-heading a { color: #000; } .tptpl .keyboard-control .header .mega-dropdown .mega-dropdown-heading.has-sub-menu a { padding-right: 17px; } .tptpl .header .mega-dropdown .mega-dropdown-heading a span { position: relative; } .tptpl .header .mega-dropdown .mega-dropdown-heading a span::after, .tptpl .header .mega-dropdown .mega-dropdown-heading.active > a span:after { content: ""; border-top: 1px solid transparent; display: block; position: absolute; bottom: -8px; left: 0; right: 0; transition: all 0.25s ease-in-out; } .tptpl .keyboard-control .header .mega-dropdown .mega-dropdown-heading a:focus span::after, .tptpl .keyboard-control .header .mega-dropdown .mega-dropdown-heading.active > a:focus span:after { display: none; } .tptpl .header .mega-dropdown .mega-dropdown-heading a.selected span::after, .tptpl .header .mega-dropdown .mega-dropdown-heading a:hover span::after, .tptpl .header .mega-dropdown .mega-dropdown-heading.active > a span:after { border-top: 1px solid; } .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel { position: absolute; top: 95px; left: 0; background: #fff; width: 100%; overflow: hidden; height: 0; z-index: 1; display: none; } .tptpl .header .mega-dropdown .mega-dropdown-heading.active .mega-dropdown-panel, .tptpl .header .mega-dropdown .mega-dropdown-heading.kbc-active .mega-dropdown-panel { height: auto; display: block; } .tptpl .header .mega-dropdown-panel ul { list-style: none; margin: 0; } .tptpl .header .mega-dropdown-panel .container { width: 100%; max-width: 1100px; margin: 0 auto; display: table; text-align: left; text-transform: none; font-weight: 400; padding: 15px 40px 46px; } .tptpl .header .mega-dropdown-panel .container .columns { float: left; } .tptpl .header .mega-dropdown-panel .container .large-4.special { width: 39.999996%; } .tptpl .header .mega-dropdown-panel .container .large-2.special { width: 20.000004%; } .tptpl .header .mega-dropdown-panel .container .list-heading { font-weight: 500; padding: 7px 14px 18px 0; display: inline-block; color: #000; } .tptpl .header .mega-dropdown-panel .container a.list-heading span:after { bottom: -4px; } .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel .container li, .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel .container li a { padding: 7px 14px 7px 0; color: #000; font-weight: 400; } .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel .container li a span { border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; padding: 0 0 1px 0; } .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel .container li a.selected span, .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel .container li a:hover span { border-color: #000; } .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel .container li a span:after, .tptpl .header .mega-dropdown .mega-dropdown-heading .mega-dropdown-panel .container li a.list-heading span:after { display: none !important; } .tptpl .desktop-dimmer { position: fixed; background: rgba(0, 0, 0, 0.5); width: 100%; height: 0; top: 100%; bottom: -1px; opacity: 0; z-index: 1; } .tptpl .desktop-dim .desktop-dimmer { height: 100%; top: 95px; opacity: 1; transition: opacity 0.25s ease-out; } .tptpl .desktop-dim.top .desktop-dimmer { top: 0; } .tptpl .keyboard-control .desktop-dimmer { display: none; } .tptpl .header-over .header, .tptpl .keyboard-control .header { background: #fff; } .tptpl .mobile-main-nav:before { content: ""; border-top: 1px solid transparent; display: block; height: 1px; width: 1px; } .tptpl .header-over .header .mobile-main-nav a span, .tptpl .header-over .mobile-main-nav a span:after, .tptpl .header-over .mobile-main-nav a span:before, .tptpl .keyboard-control .header .mobile-main-nav a span, .tptpl .keyboard-control .mobile-main-nav a span:after, .tptpl .keyboard-control .mobile-main-nav a span:before { border-color: #000; } .tptpl .header-over .header .logo, .tptpl .keyboard-control .header .logo { transform: translate(0, -20px); display: none; } .tptpl .header-over .header .logo-off-top, .tptpl .keyboard-control .header .logo-off-top { display: block; transform: translate(0, 0); } .tptpl .header-over .desktop-header-country-menu-button a, .tptpl .header-over .mobile-header-country-menu-button a, .tptpl .keyboard-control .desktop-header-country-menu-button a, .tptpl .keyboard-control .mobile-header-country-menu-button a { color: #000; } .tptpl .header-over .desktop-header-country-menu-button span.select-symbol svg.svg-select, .tptpl .header-over .mobile-header-country-menu-button span.select-symbol svg.svg-select, .tptpl .keyboard-control .desktop-header-country-menu-button span.select-symbol svg.svg-select, .tptpl .keyboard-control .mobile-header-country-menu-button span.select-symbol svg.svg-select {} .tptpl .header-over .header .mega-dropdown .mega-dropdown-heading a { color: #000; } .tptpl .keyboard-control .header .mega-dropdown .mega-dropdown-heading a { color: #000; } .tptpl .search-and-country-container { position: absolute; top: 37px; right: 30px; } .tptpl .desktop-search { display: block; position: relative; float: left; width: 80px; } .tptpl .desktop-search svg.svg-mag-glass { position: absolute; width: 16px; top: 2px; left: -26px; } .tptpl .header-over .desktop-search svg.svg-mag-glass, .tptpl .keyboard-control .desktop-search svg.svg-mag-glass {} .tptpl .desktop-search label { font-size: 0; line-height: 0; } .tptpl .desktop-search input { font-size: 16px; color: #000; background: 0 0; border: none; border-bottom: 1px solid #000; border-radius: 0; box-shadow: none; font-size: 13px; line-height: 1; padding: 0; margin: 0; height: 16px; } .tptpl .desktop-search input[type="submit"] { position: absolute; font-size: 0; width: 27px; height: 27px; left: -32px; top: -4px; border: none !important; } .tptpl .desktop-search input:focus, .tptpl .header-over .desktop-search input, .tptpl .header-over .desktop-search input:focus, .tptpl .keyboard-control .desktop-search input, .tptpl .keyboard-control .desktop-search input:focus, .tptpl .desktop-search input:focus { color: #000; border-color: #000; } .tptpl nav/**/#main a.kbc-more-link { display: none; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; transform: translate(-14px, -8px) rotate(-45deg); width: 6px; height: 6px; background-size: contain; border-left: 1px solid #000; border-bottom: 1px solid #000; } .tptpl .keyboard-control a.kbc-more-link { display: inline-block !important; } } @media screen and (min-width: 1280px) { .tptpl .desktop-header-country-menu-button .menu-label { display: block; } } .tptpl footer { color: #fff; background: #262323; text-align: center; padding: 30px 30px 1px; } .tptpl footer ul { margin: 0 0 25px; list-style: none; font-size: 13px; line-height: 1; text-transform: uppercase; font-weight: 500; } .tptpl footer li { padding: 3px 0 4px; } .tptpl footer a { position: relative; color: #fff; border-bottom: 1px solid transparent; transition: 0.25s ease-in-out; } .tptpl footer a:active, .tptpl footer a:focus, .tptpl footer a:hover { color: #fff; border-color: #fff; } .tptpl footer ul.soc-med { text-transform: none; font-weight: 400; } .tptpl footer ul.soc-med li { padding: 8px 0 9px 20px; } .tptpl footer ul.soc-med a::before { content: ""; position: absolute; width: 22px; height: 15px; background-repeat: no-repeat; background-position: center; background-size: contain; left: -25px; top: 0; } .tptpl footer ul.soc-med a.linkedin:before { background-image: url("https://apply.superdry.com/app/tpl/asset/fe37754aa8b46e4acd9b33af05010240169586b8e7175248767166f030fdd1a2"); } .tptpl footer ul.soc-med a.twitter:before { background-image: url("https://apply.superdry.com/app/tpl/asset/9ea3a2dc5363359a528a212dbfb22d7e2534eeadd4727c4595f553fd85af8ae4"); background-size: 16px; } .tptpl footer ul.soc-med a.facebook:before { background-image: url("https://apply.superdry.com/app/tpl/asset/b322146f2346aba96ac1521247e31ce0b15f32f9ca43ed6fd5bcbaf46ee183c2"); } .tptpl footer ul.soc-med a.instagram:before { background-image: url("https://apply.superdry.com/app/tpl/asset/712f25b19b316031d80c491a97660b0bb55cb6aeb3c4fc8676e2e5d5c5abba49"); } .tptpl footer ul.soc-med a.tiktok:before { background-image: url("https://apply.superdry.com/app/tpl/asset/2696f3ab91040bebe00b9342eb510bbd07c1fca9c01c4ee5831a9b945a8b5f30"); } .tptpl footer ul.soc-med a.pinterest:before { background-image: url("https://apply.superdry.com/app/tpl/asset/11a473186a4eb990ec01c9ba5ebf5e9be61375f2c090f5b0d85ce58ea4311298"); } .tptpl footer ul.soc-med a.youtube:before { background-image: url("https://apply.superdry.com/app/tpl/asset/2de42c10f63c5cf5585d776b255f733294b91209ff4823d9f618b06e03e29756"); background-size: 18px; left: -27px; } .tptpl footer ul.soc-med a.glassdoor:before { background-image: url("https://apply.superdry.com/app/tpl/asset/3bb1ec3d88248d4c49afc820a25df2198567b61f6e97cee3b22de27ce1cbdb73"); background-size: 22px; } @media screen and (min-width: 1024px) { .tptpl footer { float: left; width: 100%; background: #000; padding: 30px 30px 0; margin: 0 0 60px; } .tptpl footer li { display: inline-block; padding-left: 10px; padding-right: 10px; } .tptpl footer ul.soc-med li { padding-right: 30px; } } @media screen and (min-width: 1120px) { .tptpl footer { margin: 0 0 95px; } .tptpl .keyboard-control footer { margin: 0; } .tptpl .footer-container { margin: 0 auto; max-width: 1360px; } } @media screen and (min-width: 1440px) { .tptpl footer { padding: 38px 40px 8px; } .tptpl footer li { display: inline-block; padding-left: 0; padding-right: 15px; } .tptpl footer ul.soc-med li { padding: 3px 0 9px 35px; } } .tptpl html { font-family: sans-serif; line-height: 1.15; } .tptpl body { margin: 0; } .tptpl article, .tptpl aside, .tptpl footer, .tptpl header, .tptpl nav, .tptpl section { display: block; } .tptpl figcaption, .tptpl figure { display: block; } .tptpl figure { margin: 1em 40px; } .tptpl hr { box-sizing: content-box; height: 0; overflow: visible; } .tptpl main { display: block; } .tptpl pre { font-family: monospace, monospace; font-size: 1em; } .tptpl a { background-color: transparent; } .tptpl a:active, .tptpl a:hover {} .tptpl *:focus{ outline-style: solid; outline-width: 2px; outline-color: #000; transition: none !important; } .tptpl .top-banner *:focus, .tptpl footer *:focus { outline-color: #fff; } .tptpl abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } .tptpl b, .tptpl strong { font-weight: inherit; } .tptpl b, .tptpl strong { font-weight: bolder; } .tptpl code, .tptpl kbd, .tptpl samp { font-family: monospace, monospace; font-size: 1em; } .tptpl dfn { font-style: italic; } .tptpl mark { background-color: #ff0; color: #000; } .tptpl small { font-size: 80%; } .tptpl sub, .tptpl sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .tptpl sub { bottom: -0.25em; } .tptpl sup { top: -0.5em; } .tptpl audio, .tptpl video { display: inline-block; } .tptpl audio:not([controls]) { display: none; height: 0; } .tptpl img { border-style: none; } .tptpl svg:not(:root) { overflow: hidden; } .tptpl button, .tptpl input, .tptpl optgroup, .tptpl select, .tptpl textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } .tptpl button { overflow: visible; } .tptpl button, .tptpl select { text-transform: none; } .tptpl [type="reset"], .tptpl [type="submit"], .tptpl button, .tptpl html [type="button"] {} .tptpl input { overflow: visible; } .tptpl [type="checkbox"], .tptpl [type="radio"] { box-sizing: border-box; padding: 0; } .tptpl [type="search"] { outline-offset: 2px; } .tptpl fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } .tptpl legend { box-sizing: border-box; display: table; max-width: 100%; padding: 0; color: inherit; white-space: normal; } .tptpl progress { display: inline-block; vertical-align: baseline; } .tptpl textarea { overflow: auto; } .tptpl details { display: block; } .tptpl summary { display: list-item; } .tptpl menu { display: block; } .tptpl canvas { display: inline-block; } .tptpl template { display: none; } .tptpl [hidden] { display: none; } .tptpl .foundation-mq { font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; } .tptpl html { box-sizing: border-box; font-size: 100%; } .tptpl *, .tptpl ::after, .tptpl ::before { box-sizing: inherit; } .tptpl body { margin: 0; padding: 0; background: #fff; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 400; line-height: 1.5; color: #000; } .tptpl img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; } .tptpl textarea { height: auto; min-height: 50px; border-radius: 3px; } .tptpl select { box-sizing: border-box; width: 100%; border-radius: 3px; } .tptpl .map_canvas embed, .tptpl .map_canvas img, .tptpl .map_canvas object, .tptpl .mqa-display embed, .tptpl .mqa-display img, .tptpl .mqa-display object { max-width: none !important; } .tptpl button { padding: 0; appearance: none; border: 0; border-radius: 3px; background: 0 0; line-height: 1; } .tptpl [data-whatinput="mouse"] button {} .tptpl pre { overflow: auto; } .tptpl .is-visible { display: block !important; } .tptpl .is-hidden { display: none !important; } .tptpl blockquote, .tptpl dd, .tptpl div, .tptpl dl, .tptpl dt, .tptpl form, .tptpl li, .tptpl ol, .tptpl p, .tptpl pre, .tptpl td, .tptpl th, .tptpl ul { margin: 0; padding: 0; } .tptpl p { margin-bottom: 1rem; font-size: inherit; line-height: 1.6; } .tptpl em, .tptpl i { font-style: italic; line-height: inherit; } .tptpl b, .tptpl strong { font-weight: 700; line-height: inherit; } .tptpl small { font-size: 80%; line-height: inherit; } .tptpl a { line-height: inherit; color: #000; text-decoration: none; cursor: pointer; } .tptpl a:focus, .tptpl a:hover { color: #000; } .tptpl a img { border: 0; } .tptpl hr { clear: both; max-width: 75rem; height: 0; margin: 30px auto; border-top: 0; border-right: 0; border-bottom: 1px solid #adadad; border-left: 0; } .tptpl dl, .tptpl ol, .tptpl ul { margin-bottom: 1rem; list-style-position: outside; line-height: 1.6; } .tptpl li { font-size: inherit; } .tptpl ul { margin-left: 1.25rem; list-style-type: disc; } .tptpl ol { margin-left: 1.25rem; } .tptpl ol ol, .tptpl ol ul, .tptpl ul ol, .tptpl ul ul { margin-left: 1.25rem; margin-bottom: 0; } .tptpl dl { margin-bottom: 1rem; } .tptpl dl dt { margin-bottom: 0.3rem; font-weight: 700; } .tptpl blockquote { margin: 0 0 1rem; padding: 0.5625rem 1.25rem 0 1.1875rem; border-left: 1px solid #cacaca; } .tptpl blockquote, .tptpl blockquote p { line-height: 1.6; color: #8a8a8a; } .tptpl cite { display: block; font-size: 0.8125rem; color: #8a8a8a; } .tptpl cite:before { content: "— "; } .tptpl abbr { border-bottom: 1px dotted #000; color: #000; cursor: help; } .tptpl figure { margin: 0; } .tptpl code { padding: 0.125rem 0.3125rem 0.0625rem; border: 1px solid #cacaca; background-color: #e6e6e6; font-family: Consolas, "Liberation Mono", Courier, monospace; font-weight: 400; color: #000; } .tptpl kbd { margin: 0; padding: 0.125rem 0.25rem 0; background-color: #e6e6e6; font-family: Consolas, "Liberation Mono", Courier, monospace; color: #000; border-radius: 3px; } .tptpl .subheader { margin-top: 0.2rem; margin-bottom: 0.5rem; font-weight: 400; line-height: 1.4; color: #8a8a8a; } .tptpl .lead { font-size: 125%; line-height: 1.6; } .tptpl .stat { font-size: 2.5rem; line-height: 1; } .tptpl p + .stat { margin-top: -1rem; } .tptpl .no-bullet { margin-left: 0; list-style: none; } .tptpl .text-left { text-align: left; } .tptpl .text-right { text-align: right; } .tptpl .text-center { text-align: center; } .tptpl .text-justify { text-align: justify; } @media print, screen and (min-width: 40em) { .tptpl .medium-text-left { text-align: left; } .tptpl .medium-text-right { text-align: right; } .tptpl .medium-text-center { text-align: center; } .tptpl .medium-text-justify { text-align: justify; } } @media print, screen and (min-width: 64em) { .tptpl .large-text-left { text-align: left; } .tptpl .large-text-right { text-align: right; } .tptpl .large-text-center { text-align: center; } .tptpl .large-text-justify { text-align: justify; } } .tptpl .show-for-print { display: none !important; } @media print { .tptpl * { background: 0 0 !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; } .tptpl .show-for-print { display: block !important; } .tptpl .hide-for-print { display: none !important; } .tptpl table.show-for-print { display: table !important; } .tptpl thead.show-for-print { display: table-header-group !important; } .tptpl tbody.show-for-print { display: table-row-group !important; } .tptpl tr.show-for-print { display: table-row !important; } .tptpl td.show-for-print { display: table-cell !important; } .tptpl th.show-for-print { display: table-cell !important; } .tptpl a, .tptpl a:visited { text-decoration: underline; } .tptpl a[href]:after { content: " (" attr(href) ")"; } .tptpl .ir a:after, .tptpl a[href^="#"]:after, .tptpl a[href^="javascript:"]:after { content: ""; } .tptpl abbr[title]:after { content: " (" attr(title) ")"; } .tptpl blockquote, .tptpl pre { border: 1px solid #8a8a8a; page-break-inside: avoid; } .tptpl thead { display: table-header-group; } .tptpl img, .tptpl tr { page-break-inside: avoid; } .tptpl img { max-width: 100% !important; } @page { margin: 0.5cm; } .tptpl h2, .tptpl h3, .tptpl p { orphans: 3; widows: 3; } .tptpl h2, .tptpl h3 { page-break-after: avoid; } } .tptpl [type="color"], .tptpl [type="date"], .tptpl [type="datetime-local"], .tptpl [type="datetime"], .tptpl [type="email"], .tptpl [type="month"], .tptpl [type="number"], .tptpl [type="password"], .tptpl [type="search"], .tptpl [type="tel"], .tptpl [type="text"], .tptpl [type="time"], .tptpl [type="url"], .tptpl [type="week"], .tptpl textarea { display: block; border: none; border-bottom: 1px solid #000; border-radius: 0; width: 100%; height: 45px; margin: 0 0 1rem; padding: 0; background-color: #fff; box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 400; color: #000; transition: none; appearance: none; } .tptpl textarea { max-width: 100%; } .tptpl textarea[rows] { height: auto; } .tptpl input::placeholder, .tptpl textarea::placeholder { color: #cacaca; } .tptpl input:disabled, .tptpl input[readonly], .tptpl textarea:disabled, .tptpl textarea[readonly] { cursor: not-allowed; } .tptpl [type="button"], .tptpl [type="submit"] { appearance: none; border-radius: 3px; } .tptpl input[type="search"] { box-sizing: border-box; } .tptpl [type="checkbox"], .tptpl [type="file"], .tptpl [type="radio"] { margin: 0 0 1rem; } .tptpl [type="checkbox"] + label, .tptpl [type="radio"] + label { display: inline-block; vertical-align: baseline; margin-left: 0.5rem; margin-right: 1rem; margin-bottom: 0; } .tptpl [type="checkbox"] + label[for], .tptpl [type="radio"] + label[for] { cursor: pointer; } .tptpl label > [type="checkbox"], .tptpl label > [type="radio"] { margin-right: 0.5rem; } .tptpl [type="file"] { width: 100%; } .tptpl label { display: block; margin: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.8; color: #000; } .tptpl label.middle { margin: 0 0 1rem; padding: 0.5625rem 0; } .tptpl .help-text { margin-top: -0.5rem; font-size: 0.8125rem; font-style: italic; color: #000; } .tptpl .input-group { display: table; width: 100%; margin-bottom: 1rem; } .tptpl .input-group > :first-child { border-radius: 3px 0 0 3px; } .tptpl .input-group > :last-child > * { border-radius: 0 3px 3px 0; } .tptpl .input-group-button, .tptpl .input-group-button a, .tptpl .input-group-button button, .tptpl .input-group-button input, .tptpl .input-group-button label, .tptpl .input-group-field, .tptpl .input-group-label { margin: 0; white-space: nowrap; display: table-cell; vertical-align: middle; } .tptpl .input-group-label { padding: 0 1rem; border: 1px solid #cacaca; background: #e6e6e6; color: #000; text-align: center; white-space: nowrap; width: 1%; height: 100%; } .tptpl .input-group-label:first-child { border-right: 0; } .tptpl .input-group-label:last-child { border-left: 0; } .tptpl .input-group-field { border-radius: 0; height: 2.5rem; } .tptpl .input-group-button { padding-top: 0; padding-bottom: 0; text-align: center; width: 1%; height: 100%; } .tptpl .input-group-button a, .tptpl .input-group-button button, .tptpl .input-group-button input, .tptpl .input-group-button label { height: 2.5rem; padding-top: 0; padding-bottom: 0; font-size: 1rem; } .tptpl .input-group .input-group-button { display: table-cell; } .tptpl fieldset { margin: 0; padding: 0; border: 0; } .tptpl legend { max-width: 100%; margin-bottom: 0.5rem; } .tptpl .fieldset { margin: 1.125rem 0; padding: 1.25rem; border: 1px solid #cacaca; } .tptpl .fieldset legend { margin: 0; margin-left: -0.1875rem; padding: 0 0.1875rem; background: #fff; } .tptpl select { height: 2.4375rem; margin: 0 0 1rem; padding: 0.5rem; appearance: none; border: 1px solid #cacaca; border-radius: 3px; background-color: #fff; font-family: inherit; font-size: 1rem; line-height: normal; color: #000; background-image: url("data:image/svg+xml;utf8,\3c svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'\3e \3c polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'\3e \3c /polygon\3e \3c /svg\3e "); background-origin: content-box; background-position: right -1rem center; background-repeat: no-repeat; background-size: 9px 6px; padding-right: 1.5rem; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } @media screen and (min-width: 0�) { .tptpl select { background-image: url("https://apply.superdry.com/app/tpl/asset/e8ce01b6bcb0b7e41cf0a3cfedc5551291e99334b20680b73a9d86bf9437ebf1"); } } .tptpl select[multiple] { height: auto; background-image: none; } .tptpl .is-invalid-input:not(:focus) { border-color: #262637; background-color: #e8e8ea; } .tptpl .is-invalid-input:not(:focus)::placeholder { color: #262637; } .tptpl .is-invalid-label { color: #262637; } .tptpl .form-error { display: none; margin-top: -0.5rem; margin-bottom: 1rem; font-size: 0.75rem; font-weight: 700; color: #262637; } .tptpl .form-error.is-visible { display: block; } .tptpl .float-left { float: left !important; } .tptpl .float-right { float: right !important; } .tptpl .float-center { display: block; margin-right: auto; margin-left: auto; } .tptpl .clearfix::after, .tptpl .clearfix::before { display: table; content: " "; } .tptpl .clearfix::after { clear: both; } .tptpl .hide { display: none !important; } .tptpl .invisible { visibility: hidden; } @media screen and (max-width: 39.9375em) { .tptpl .hide-for-small-only { display: none !important; } } @media screen and (max-width: 0em), screen and (min-width: 40em) { .tptpl .show-for-small-only { display: none !important; } } @media print, screen and (min-width: 40em) { .tptpl .hide-for-medium { display: none !important; } } @media screen and (max-width: 39.9375em) { .tptpl .show-for-medium { display: none !important; } } @media screen and (min-width: 40em) and (max-width: 63.9375em) { .tptpl .hide-for-medium-only { display: none !important; } } @media screen and (max-width: 39.9375em), screen and (min-width: 64em) { .tptpl .show-for-medium-only { display: none !important; } } @media print, screen and (min-width: 64em) { .tptpl .hide-for-large { display: none !important; } } @media screen and (max-width: 63.9375em) { .tptpl .show-for-large { display: none !important; } } @media screen and (min-width: 64em) and (max-width: 74.9375em) { .tptpl .hide-for-large-only { display: none !important; } } @media screen and (max-width: 63.9375em), screen and (min-width: 75em) { .tptpl .show-for-large-only { display: none !important; } } .tptpl .show-for-sr, .tptpl .show-on-focus { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .tptpl .show-on-focus:active, .tptpl .show-on-focus:focus { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; } .tptpl .hide-for-portrait, .tptpl .show-for-landscape { display: block !important; } @media screen and (orientation: landscape) { .tptpl .hide-for-portrait, .tptpl .show-for-landscape { display: block !important; } } @media screen and (orientation: portrait) { .tptpl .hide-for-portrait, .tptpl .show-for-landscape { display: none !important; } } .tptpl .hide-for-landscape, .tptpl .show-for-portrait { display: none !important; } @media screen and (orientation: landscape) { .tptpl .hide-for-landscape, .tptpl .show-for-portrait { display: none !important; } } @media screen and (orientation: portrait) { .tptpl .hide-for-landscape, .tptpl .show-for-portrait { display: block !important; } } .tptpl .button { display: inline-block; margin: 0 0 25px; padding: 0 60px 0 0; border: none; border-radius: 0; transition: none; font-size: 20px; font-weight: 400 !important; line-height: 1.25; text-align: left; cursor: pointer; background-color: transparent; color: #000; position: relative; width: max-content; max-width: 100%; } .tptpl .button.white { color: #fff; } .tptpl .button::after { content: ""; position: absolute; top: 2px; right: 16px; left: auto; width: 44px; height: 22px; background: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456") right center no-repeat; background-size: contain; transition: transform 0.25s ease-in-out !important; border: none !important; } .tptpl .button.white:after { background-image: url("https://apply.superdry.com/app/tpl/asset/e3a040bfb59d7daaedd9ef016ae0988433041e0a4783480b9969966332831a50"); } .tptpl .button.back { padding: 0 0 0 55px; } .tptpl .button.back:after { display: none; } .tptpl .button.back:before { content: ""; position: absolute; top: 2px; left: 0; width: 44px; height: 22px; background: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456") right center no-repeat; background-size: contain; transition: transform 0.25s ease-in-out !important; transform: rotate(180deg); } .tptpl .button.white.back:before { background-image: url("https://apply.superdry.com/app/tpl/asset/e3a040bfb59d7daaedd9ef016ae0988433041e0a4783480b9969966332831a50"); } .tptpl .button:hover:after { transform: translateX(10px); } .tptpl .button.back:hover:before { transform: translateX(-10px) rotate(180deg); } .tptpl .button.large { width: 100%; padding: 10px 65px 10px 20px; background: #ffeed9; margin: 20px 0 !important; max-width: 375px; min-height: 65px; display: flex; align-items: center; line-height: 25px; } .tptpl .main-content .button.large { margin: 40px 0 !important; } .tptpl .button.large::after { display: none; } .tptpl .button.large svg { position: absolute; height: 22px; top: calc(50% - 11px); right: 30px; transition: all 0.25s ease-in-out; } @media screen and (min-width: 1024px) { .tptpl .button.large { transition: background 0.25s ease-in-out; } .tptpl .button.large:hover { color: #fff; background: #000; } .tptpl .button.large:hover svg { transform: translateX(10px); } .tptpl .main-content .button.large { margin: 50px 0 !important; } } .tptpl .input-arrow { position: relative; display: inline-block; } .tptpl .input-arrow .button { padding-right: 50px; } .tptpl .input-arrow::after { content: ""; background: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456") center no-repeat; width: 35px; display: inline-block; height: 25px; position: absolute; top: -1px; right: 5px; transition: transform 0.25s ease-in-out; } @media screen and (min-width: 1024px) { .tptpl .input-arrow:hover:after { transform: translateX(10px); } } .tptpl [data-whatinput="mouse"] .button {} .tptpl .button.disabled, .tptpl .button[disabled] { opacity: 0.25; cursor: not-allowed; } .tptpl .button.disabled, .tptpl .button.disabled:focus, .tptpl .button.disabled:hover, .tptpl .button[disabled], .tptpl .button[disabled]:focus, .tptpl .button[disabled]:hover { background-color: #000; color: #fff; } .tptpl .button.dropdown::after { display: block; width: 0; height: 0; border: inset 0.4em; content: ""; border-bottom-width: 0; border-top-style: solid; border-color: #fff transparent transparent; position: relative; top: 0.4em; display: inline-block; float: right; margin-left: 1em; } .tptpl .button.arrow-only::after { top: -0.1em; float: none; margin-left: 0; } .tptpl .close-button { position: absolute; color: #8a8a8a; cursor: pointer; } .tptpl [data-whatinput="mouse"] .close-button {} .tptpl .close-button:focus, .tptpl .close-button:hover { color: #000; } .tptpl .close-button.small { right: 0.66rem; top: 0.33em; font-size: 1.5em; line-height: 1; } .tptpl .close-button, .tptpl .close-button.medium { right: 1rem; top: 0.5rem; font-size: 2em; line-height: 1; } .tptpl .button-group { margin-bottom: 1rem; font-size: 0; } .tptpl .button-group::after, .tptpl .button-group::before { display: table; content: " "; } .tptpl .button-group::after { clear: both; } .tptpl .button-group .button { margin: 0; margin-right: 1px; margin-bottom: 1px; font-size: 0.9rem; } .tptpl .button-group .button:last-child { margin-right: 0; } .tptpl .button-group.tiny .button { font-size: 0.6rem; } .tptpl .button-group.small .button { font-size: 0.75rem; } .tptpl .button-group.large .button { font-size: 1.25rem; } .tptpl .button-group.expanded { margin-right: -1px; } .tptpl .button-group.expanded::after, .tptpl .button-group.expanded::before { display: none; } .tptpl .button-group.expanded .button:first-child:last-child { width: 100%; } .tptpl .button-group.expanded .button:first-child:nth-last-child(2), .tptpl .button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2) ~ .button { display: inline-block; width: calc(50% - 1px); margin-right: 1px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2) ~ .button:last-child, .tptpl .button-group.expanded .button:first-child:nth-last-child(2):last-child { margin-right: -6px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(3), .tptpl .button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3) ~ .button { display: inline-block; width: calc(33.33333% - 1px); margin-right: 1px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3) ~ .button:last-child, .tptpl .button-group.expanded .button:first-child:nth-last-child(3):last-child { margin-right: -6px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(4), .tptpl .button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4) ~ .button { display: inline-block; width: calc(25% - 1px); margin-right: 1px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4) ~ .button:last-child, .tptpl .button-group.expanded .button:first-child:nth-last-child(4):last-child { margin-right: -6px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(5), .tptpl .button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5) ~ .button { display: inline-block; width: calc(20% - 1px); margin-right: 1px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5) ~ .button:last-child, .tptpl .button-group.expanded .button:first-child:nth-last-child(5):last-child { margin-right: -6px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(6), .tptpl .button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6) ~ .button { display: inline-block; width: calc(16.66667% - 1px); margin-right: 1px; } .tptpl .button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6) ~ .button:last-child, .tptpl .button-group.expanded .button:first-child:nth-last-child(6):last-child { margin-right: -6px; } .tptpl .button-group.primary .button { background-color: #000; color: #000; } .tptpl .button-group.primary .button:focus, .tptpl .button-group.primary .button:hover { background-color: #00a36d; color: #000; } .tptpl .button-group.secondary .button { background-color: #70727b; color: #fff; } .tptpl .button-group.secondary .button:focus, .tptpl .button-group.secondary .button:hover { background-color: #5a5b62; color: #fff; } .tptpl .button-group.alert .button { background-color: #262637; color: #fff; } .tptpl .button-group.alert .button:focus, .tptpl .button-group.alert .button:hover { background-color: #1e1e2c; color: #fff; } .tptpl .button-group.success .button { background-color: #000; color: #000; } .tptpl .button-group.success .button:focus, .tptpl .button-group.success .button:hover { background-color: #00a36d; color: #000; } .tptpl .button-group.warning .button { background-color: #c03; color: #fff; } .tptpl .button-group.warning .button:focus, .tptpl .button-group.warning .button:hover { background-color: #a30029; color: #fff; } .tptpl .button-group.body-font .button { background-color: #262637; color: #fff; } .tptpl .button-group.body-font .button:focus, .tptpl .button-group.body-font .button:hover { background-color: #1e1e2c; color: #fff; } .tptpl .button-group.header .button { background-color: #262637; color: #fff; } .tptpl .button-group.header .button:focus, .tptpl .button-group.header .button:hover { background-color: #1e1e2c; color: #fff; } .tptpl .button-group.stacked .button, .tptpl .button-group.stacked-for-medium .button, .tptpl .button-group.stacked-for-small .button { width: 100%; } .tptpl .button-group.stacked .button:last-child, .tptpl .button-group.stacked-for-medium .button:last-child, .tptpl .button-group.stacked-for-small .button:last-child { margin-bottom: 0; } @media print, screen and (min-width: 40em) { .tptpl .button-group.stacked-for-small .button { width: auto; margin-bottom: 0; } } @media print, screen and (min-width: 64em) { .tptpl .button-group.stacked-for-medium .button { width: auto; margin-bottom: 0; } } @media screen and (max-width: 39.9375em) { .tptpl .button-group.stacked-for-small.expanded { display: block; } .tptpl .button-group.stacked-for-small.expanded .button { display: block; margin-right: 0; } } .tptpl .switch { height: 2rem; position: relative; margin-bottom: 1rem; font-size: 0.875rem; font-weight: 700; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tptpl .switch-input { position: absolute; margin-bottom: 0; opacity: 0; } .tptpl .switch-paddle { position: relative; display: block; width: 4rem; height: 2rem; border-radius: 3px; background: #cacaca; transition: all 0.25s ease-out; font-weight: inherit; color: inherit; cursor: pointer; } .tptpl input + .switch-paddle { margin: 0; } .tptpl .switch-paddle::after { position: absolute; top: 0.25rem; left: 0.25rem; display: block; width: 1.5rem; height: 1.5rem; transform: translate3d(0, 0, 0); border-radius: 3px; background: #fff; transition: all 0.25s ease-out; content: ""; } .tptpl input:checked ~ .switch-paddle { background: #000; } .tptpl input:checked ~ .switch-paddle::after { left: 2.25rem; } .tptpl [data-whatinput="mouse"] input:focus ~ .switch-paddle {} .tptpl .switch-active, .tptpl .switch-inactive { position: absolute; top: 50%; transform: translateY(-50%); } .tptpl .switch-active { left: 8%; display: none; } .tptpl input:checked + label > .switch-active { display: block; } .tptpl .switch-inactive { right: 15%; } .tptpl input:checked + label > .switch-inactive { display: none; } .tptpl .switch.tiny { height: 1.5rem; } .tptpl .switch.tiny .switch-paddle { width: 3rem; height: 1.5rem; font-size: 0.625rem; } .tptpl .switch.tiny .switch-paddle::after { top: 0.25rem; left: 0.25rem; width: 1rem; height: 1rem; } .tptpl .switch.tiny input:checked ~ .switch-paddle::after { left: 1.75rem; } .tptpl .switch.small { height: 1.75rem; } .tptpl .switch.small .switch-paddle { width: 3.5rem; height: 1.75rem; font-size: 0.75rem; } .tptpl .switch.small .switch-paddle::after { top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 1.25rem; } .tptpl .switch.small input:checked ~ .switch-paddle::after { left: 2rem; } .tptpl .switch.large { height: 2.5rem; } .tptpl .switch.large .switch-paddle { width: 5rem; height: 2.5rem; font-size: 1rem; } .tptpl .switch.large .switch-paddle::after { top: 0.25rem; left: 0.25rem; width: 2rem; height: 2rem; } .tptpl .switch.large input:checked ~ .switch-paddle::after { left: 2.75rem; } .tptpl .menu { margin: 0; list-style-type: none; } .tptpl .menu > li { display: table-cell; vertical-align: middle; } .tptpl [data-whatinput="mouse"] .menu > li {} .tptpl .menu > li > a { display: block; padding: 0.7rem 1rem; line-height: 1; } .tptpl .menu a, .tptpl .menu button, .tptpl .menu input, .tptpl .menu select { margin-bottom: 0; } .tptpl .menu > li > a i, .tptpl .menu > li > a img, .tptpl .menu > li > a svg { vertical-align: middle; } .tptpl .menu > li > a i + span, .tptpl .menu > li > a img + span, .tptpl .menu > li > a svg + span { vertical-align: middle; } .tptpl .menu > li > a i, .tptpl .menu > li > a img, .tptpl .menu > li > a svg { margin-right: 0.25rem; display: inline-block; } .tptpl .menu.horizontal > li, .tptpl .menu > li { display: table-cell; } .tptpl .menu.expanded { display: table; width: 100%; table-layout: fixed; } .tptpl .menu.expanded > li:first-child:last-child { width: 100%; } .tptpl .menu.vertical > li { display: block; } @media print, screen and (min-width: 40em) { .tptpl .menu.medium-horizontal > li { display: table-cell; } .tptpl .menu.medium-expanded { display: table; width: 100%; table-layout: fixed; } .tptpl .menu.medium-expanded > li:first-child:last-child { width: 100%; } .tptpl .menu.medium-vertical > li { display: block; } } @media print, screen and (min-width: 64em) { .tptpl .menu.large-horizontal > li { display: table-cell; } .tptpl .menu.large-expanded { display: table; width: 100%; table-layout: fixed; } .tptpl .menu.large-expanded > li:first-child:last-child { width: 100%; } .tptpl .menu.large-vertical > li { display: block; } } .tptpl .menu.simple li { display: inline-block; vertical-align: top; line-height: 1; } .tptpl .menu.simple a { padding: 0; } .tptpl .menu.simple li { margin-left: 0; margin-right: 1rem; } .tptpl .menu.simple.align-right li { margin-right: 0; margin-left: 1rem; } .tptpl .menu.align-right::after, .tptpl .menu.align-right::before { display: table; content: " "; } .tptpl .menu.align-right::after { clear: both; } .tptpl .menu.align-right > li { float: right; } .tptpl .menu.icon-top > li > a { text-align: center; } .tptpl .menu.icon-top > li > a i, .tptpl .menu.icon-top > li > a img, .tptpl .menu.icon-top > li > a svg { display: block; margin: 0 auto 0.25rem; } .tptpl .menu.icon-top.vertical a > span { margin: auto; } .tptpl .menu.nested { margin-left: 1rem; } .tptpl .menu .active > a { background: #000; color: #fff; } .tptpl .menu.menu-bordered li { border: 1px solid #e6e6e6; } .tptpl .menu.menu-bordered li:not(:first-child) { border-top: 0; } .tptpl .menu.menu-hover li:hover { background-color: #e6e6e6; } .tptpl .menu-text { padding-top: 0; padding-bottom: 0; padding: 0.7rem 1rem; font-weight: 700; line-height: 1; color: inherit; } .tptpl .menu-centered { text-align: center; } .tptpl .menu-centered > .menu { display: inline-block; vertical-align: top; } .tptpl .no-js [data-responsive-menu] ul { display: none; } .tptpl .is-drilldown { position: relative; overflow: hidden; } .tptpl .is-drilldown li { display: block; } .tptpl .is-drilldown.animate-height { transition: height 0.5s; } .tptpl .is-drilldown-submenu { position: absolute; top: 0; left: 100%; z-index: -1; width: 100%; background: #fff; transition: transform 0.25s ease-in-out; } .tptpl .is-drilldown-submenu.is-active { z-index: 1; display: block; transform: translateX(-100%); } .tptpl .is-drilldown-submenu.is-closing { transform: translateX(100%); } .tptpl .drilldown-submenu-cover-previous { min-height: 100%; } .tptpl .is-drilldown-submenu-parent > a { position: relative; } .tptpl .is-drilldown-submenu-parent > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent #000; position: absolute; top: 50%; margin-top: -6px; right: 1rem; } .tptpl .js-drilldown-back > a::before { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-left-width: 0; border-right-style: solid; border-color: transparent #000 transparent transparent; border-left-width: 0; display: inline-block; vertical-align: middle; margin-right: 0.75rem; border-left-width: 0; } .tptpl .is-accordion-submenu-parent > a { position: relative; } .tptpl .is-accordion-submenu-parent > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-bottom-width: 0; border-top-style: solid; border-color: #000 transparent transparent; position: absolute; top: 50%; margin-top: -3px; right: 1rem; } .tptpl .is-accordion-submenu-parent[aria-expanded="true"] > a::after { transform: rotate(180deg); transform-origin: 50% 50%; } .tptpl .dropdown.menu > li.opens-left > .is-dropdown-submenu { top: 100%; right: 0; left: auto; } .tptpl .dropdown.menu > li.opens-right > .is-dropdown-submenu { top: 100%; right: auto; left: 0; } .tptpl [data-whatinput="mouse"] .dropdown.menu a {} .tptpl .no-js .dropdown.menu ul { display: none; } .tptpl .dropdown.menu.vertical > li .is-dropdown-submenu { top: 0; } .tptpl .dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu { right: 100%; left: auto; } .tptpl .dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu { right: auto; left: 100%; } .tptpl .dropdown.menu.vertical > li > a::after { right: 14px; } .tptpl .dropdown.menu.vertical > li.opens-left > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-left-width: 0; border-right-style: solid; border-color: transparent #000 transparent transparent; } .tptpl .dropdown.menu.vertical > li.opens-right > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent #000; } @media print, screen and (min-width: 40em) { .tptpl .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu { top: 100%; right: 0; left: auto; } .tptpl .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu { top: 100%; right: auto; left: 0; } .tptpl .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a { position: relative; padding-right: 1.5rem; } .tptpl .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-bottom-width: 0; border-top-style: solid; border-color: #000 transparent transparent; right: 5px; margin-top: -3px; } .tptpl .dropdown.menu.medium-vertical > li .is-dropdown-submenu { top: 0; } .tptpl .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu { right: 100%; left: auto; } .tptpl .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu { right: auto; left: 100%; } .tptpl .dropdown.menu.medium-vertical > li > a::after { right: 14px; } .tptpl .dropdown.menu.medium-vertical > li.opens-left > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-left-width: 0; border-right-style: solid; border-color: transparent #000 transparent transparent; } .tptpl .dropdown.menu.medium-vertical > li.opens-right > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent #000; } } @media print, screen and (min-width: 64em) { .tptpl .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu { top: 100%; right: 0; left: auto; } .tptpl .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu { top: 100%; right: auto; left: 0; } .tptpl .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a { position: relative; padding-right: 1.5rem; } .tptpl .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-bottom-width: 0; border-top-style: solid; border-color: #000 transparent transparent; right: 5px; margin-top: -3px; } .tptpl .dropdown.menu.large-vertical > li .is-dropdown-submenu { top: 0; } .tptpl .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu { right: 100%; left: auto; } .tptpl .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu { right: auto; left: 100%; } .tptpl .dropdown.menu.large-vertical > li > a::after { right: 14px; } .tptpl .dropdown.menu.large-vertical > li.opens-left > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-left-width: 0; border-right-style: solid; border-color: transparent #000 transparent transparent; } .tptpl .dropdown.menu.large-vertical > li.opens-right > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent #000; } } .tptpl .dropdown.menu.align-right .is-dropdown-submenu.first-sub { top: 100%; right: 0; left: auto; } .tptpl .is-dropdown-menu.vertical { width: 100px; } .tptpl .is-dropdown-menu.vertical.align-right { float: right; } .tptpl .is-dropdown-submenu-parent { position: relative; } .tptpl .is-dropdown-submenu-parent a::after { position: absolute; top: 50%; right: 5px; margin-top: -6px; } .tptpl .is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu { top: 100%; left: auto; } .tptpl .is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu { right: 100%; left: auto; } .tptpl .is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu { right: auto; left: 100%; } .tptpl .is-dropdown-submenu { position: absolute; top: 0; left: 100%; z-index: 1; display: none; min-width: 200px; border: 1px solid #cacaca; background: #fff; } .tptpl .is-dropdown-submenu .is-dropdown-submenu-parent > a::after { right: 14px; } .tptpl .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-left-width: 0; border-right-style: solid; border-color: transparent #000 transparent transparent; } .tptpl .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ""; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent #000; } .tptpl .is-dropdown-submenu .is-dropdown-submenu { margin-top: -1px; } .tptpl .is-dropdown-submenu > li { width: 100%; } .tptpl .is-dropdown-submenu.js-dropdown-active { display: block; } .tptpl .title-bar { padding: 0.5rem; background: #000; color: #fff; } .tptpl .title-bar::after, .tptpl .title-bar::before { display: table; content: " "; } .tptpl .title-bar::after { clear: both; } .tptpl .title-bar .menu-icon { margin-left: 0.25rem; margin-right: 0.25rem; } .tptpl .title-bar-left { float: left; } .tptpl .title-bar-right { float: right; text-align: right; } .tptpl .title-bar-title { display: inline-block; vertical-align: middle; font-weight: 700; } .tptpl .top-bar { padding: 0.5rem; } .tptpl .top-bar::after, .tptpl .top-bar::before { display: table; content: " "; } .tptpl .top-bar::after { clear: both; } .tptpl .top-bar, .tptpl .top-bar ul { background-color: #e6e6e6; } .tptpl .top-bar input { max-width: 200px; margin-right: 1rem; } .tptpl .top-bar .input-group-field { width: 100%; margin-right: 0; } .tptpl .top-bar input.button { width: auto; } .tptpl .top-bar .top-bar-left, .tptpl .top-bar .top-bar-right { width: 100%; } @media print, screen and (min-width: 40em) { .tptpl .top-bar .top-bar-left, .tptpl .top-bar .top-bar-right { width: auto; } } @media screen and (max-width: 63.9375em) { .tptpl .top-bar.stacked-for-medium .top-bar-left, .tptpl .top-bar.stacked-for-medium .top-bar-right { width: 100%; } } @media screen and (max-width: 74.9375em) { .tptpl .top-bar.stacked-for-large .top-bar-left, .tptpl .top-bar.stacked-for-large .top-bar-right { width: 100%; } } .tptpl .top-bar-title { display: inline-block; float: left; padding: 0.5rem 1rem 0.5rem 0; } .tptpl .top-bar-title .menu-icon { bottom: 2px; } .tptpl .top-bar-left { float: left; } .tptpl .top-bar-right { float: right; } .tptpl .breadcrumbs { margin: 0 0 1rem 0; list-style: none; } .tptpl .breadcrumbs::after, .tptpl .breadcrumbs::before { display: table; content: " "; } .tptpl .breadcrumbs::after { clear: both; } .tptpl .breadcrumbs li { float: left; font-size: 0.6875rem; color: #000; cursor: default; text-transform: uppercase; } .tptpl .breadcrumbs li:not(:last-child)::after { position: relative; top: 1px; margin: 0 0.75rem; opacity: 1; content: "/"; color: #cacaca; } .tptpl .breadcrumbs a { color: #000; } .tptpl .breadcrumbs a:hover { text-decoration: underline; } .tptpl .breadcrumbs .disabled { color: #cacaca; cursor: not-allowed; } .tptpl .pagination { margin-left: 0; margin-bottom: 1rem; } .tptpl .pagination::after, .tptpl .pagination::before { display: table; content: " "; } .tptpl .pagination::after { clear: both; } .tptpl .pagination li { margin-right: 0.0625rem; border-radius: 3px; font-size: 0.875rem; display: none; } .tptpl .pagination li:first-child, .tptpl .pagination li:last-child { display: inline-block; } @media print, screen and (min-width: 40em) { .tptpl .pagination li { display: inline-block; } } .tptpl .pagination a, .tptpl .pagination button { display: block; padding: 0.1875rem 0.625rem; border-radius: 3px; color: #000; } .tptpl .pagination a:hover, .tptpl .pagination button:hover { background: #e6e6e6; } .tptpl .pagination .current { padding: 0.1875rem 0.625rem; background: #000; color: #fff; cursor: default; } .tptpl .pagination .disabled { padding: 0.1875rem 0.625rem; color: #cacaca; cursor: not-allowed; } .tptpl .pagination .disabled:hover { background: 0 0; } .tptpl .pagination .ellipsis::after { padding: 0.1875rem 0.625rem; content: "…"; color: #000; } .tptpl .pagination-previous a::before, .tptpl .pagination-previous.disabled::before { display: inline-block; margin-right: 0.5rem; content: "«"; } .tptpl .pagination-next a::after, .tptpl .pagination-next.disabled::after { display: inline-block; margin-left: 0.5rem; content: "»"; } .tptpl .accordion { margin: 0 0 5px !important; list-style-type: none !important; } .tptpl .accordion-title { position: relative; display: block; border: none; color: #000; font-size: 13px; line-height: 20px; font-weight: 500; text-transform: uppercase; padding: 0 0 19px 25px; } .tptpl .accordion-title::before { position: absolute; top: 2.5px; left: 0; content: ""; background: url("https://apply.superdry.com/app/tpl/asset/59a470bcacd02fbc4d4dd68b554880d2d6897e834c5156429285e5b7367a1a8b") center no-repeat; background-size: 16px; width: 16px; height: 16px; } .tptpl .is-active > .accordion-title::before { background-image: url("https://apply.superdry.com/app/tpl/asset/5ff9330bb2d04f6fce13e5d1325720de4635fc5bf52381a9ef63d6e6320cf172"); } .tptpl .accordion-title:after { display: none; } .tptpl .accordion-content { display: none; padding: 0 0 1px; border: none; border-bottom: 0; color: #000; } .tptpl .accordion-item, .tptpl .main-content .accordion-item { padding-left: 0; } .tptpl .dropdown-pane { position: absolute; z-index: 10; display: block; width: 300px; padding: 1rem; visibility: hidden; border: 1px solid #cacaca; border-radius: 3px; background-color: #fff; font-size: 1rem; } .tptpl .dropdown-pane.is-open { visibility: visible; } .tptpl .dropdown-pane.tiny { width: 100px; } .tptpl .dropdown-pane.small { width: 200px; } .tptpl .dropdown-pane.large { width: 400px; } .tptpl .is-off-canvas-open { overflow: hidden; } .tptpl .js-off-canvas-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.5s ease, visibility 0.5s ease; background: rgba(254, 254, 254, 0.25); opacity: 0; visibility: hidden; overflow: hidden; } .tptpl .js-off-canvas-overlay.is-visible { opacity: 1; visibility: visible; } .tptpl .js-off-canvas-overlay.is-closable { cursor: pointer; } .tptpl .js-off-canvas-overlay.is-overlay-absolute { position: absolute; } .tptpl .js-off-canvas-overlay.is-overlay-fixed { position: fixed; } .tptpl .off-canvas-wrapper { position: relative; overflow: hidden; } .tptpl .off-canvas { position: fixed; z-index: 1; transition: transform 0.5s ease; backface-visibility: hidden; background: #e6e6e6; } .tptpl [data-whatinput="mouse"] .off-canvas {} .tptpl .off-canvas.is-transition-overlap { z-index: 10; } .tptpl .off-canvas.is-transition-overlap.is-open { box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); } .tptpl .off-canvas.is-open { transform: translate(0, 0); } .tptpl .off-canvas-absolute { position: absolute; z-index: 1; transition: transform 0.5s ease; backface-visibility: hidden; background: #e6e6e6; } .tptpl [data-whatinput="mouse"] .off-canvas-absolute {} .tptpl .off-canvas-absolute.is-transition-overlap { z-index: 10; } .tptpl .off-canvas-absolute.is-transition-overlap.is-open { box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); } .tptpl .off-canvas-absolute.is-open { transform: translate(0, 0); } .tptpl .position-left { top: 0; left: 0; width: 250px; height: 100%; transform: translateX(-250px); overflow-y: auto; } .tptpl .position-left.is-open ~ .off-canvas-content { transform: translateX(250px); } .tptpl .position-left.is-transition-push::after { position: absolute; top: 0; right: 0; height: 100%; width: 1px; box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); content: " "; } .tptpl .position-left.is-transition-overlap.is-open ~ .off-canvas-content { transform: none; } .tptpl .position-right { top: 0; right: 0; width: 250px; height: 100%; transform: translateX(250px); overflow-y: auto; } .tptpl .position-right.is-open ~ .off-canvas-content { transform: translateX(-250px); } .tptpl .position-right.is-transition-push::after { position: absolute; top: 0; left: 0; height: 100%; width: 1px; box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); content: " "; } .tptpl .position-right.is-transition-overlap.is-open ~ .off-canvas-content { transform: none; } .tptpl .position-top { top: 0; left: 0; width: 100%; height: 250px; transform: translateY(-250px); overflow-x: auto; } .tptpl .position-top.is-open ~ .off-canvas-content { transform: translateY(250px); } .tptpl .position-top.is-transition-push::after { position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); content: " "; } .tptpl .position-top.is-transition-overlap.is-open ~ .off-canvas-content { transform: none; } .tptpl .position-bottom { bottom: 0; left: 0; width: 100%; height: 250px; transform: translateY(250px); overflow-x: auto; } .tptpl .position-bottom.is-open ~ .off-canvas-content { transform: translateY(-250px); } .tptpl .position-bottom.is-transition-push::after { position: absolute; top: 0; left: 0; height: 1px; width: 100%; box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); content: " "; } .tptpl .position-bottom.is-transition-overlap.is-open ~ .off-canvas-content { transform: none; } .tptpl .off-canvas-content { transition: transform 0.5s ease; backface-visibility: hidden; } @media print, screen and (min-width: 40em) { .tptpl .position-left.reveal-for-medium { transform: none; z-index: 1; } .tptpl .position-left.reveal-for-medium ~ .off-canvas-content { margin-left: 250px; } .tptpl .position-right.reveal-for-medium { transform: none; z-index: 1; } .tptpl .position-right.reveal-for-medium ~ .off-canvas-content { margin-right: 250px; } .tptpl .position-top.reveal-for-medium { transform: none; z-index: 1; } .tptpl .position-top.reveal-for-medium ~ .off-canvas-content { margin-top: 250px; } .tptpl .position-bottom.reveal-for-medium { transform: none; z-index: 1; } .tptpl .position-bottom.reveal-for-medium ~ .off-canvas-content { margin-bottom: 250px; } } @media print, screen and (min-width: 64em) { .tptpl .position-left.reveal-for-large { transform: none; z-index: 1; } .tptpl .position-left.reveal-for-large ~ .off-canvas-content { margin-left: 250px; } .tptpl .position-right.reveal-for-large { transform: none; z-index: 1; } .tptpl .position-right.reveal-for-large ~ .off-canvas-content { margin-right: 250px; } .tptpl .position-top.reveal-for-large { transform: none; z-index: 1; } .tptpl .position-top.reveal-for-large ~ .off-canvas-content { margin-top: 250px; } .tptpl .position-bottom.reveal-for-large { transform: none; z-index: 1; } .tptpl .position-bottom.reveal-for-large ~ .off-canvas-content { margin-bottom: 250px; } } .tptpl .tabs { margin: 0; border: 1px solid #e6e6e6; background: #fff; list-style-type: none; } .tptpl .tabs::after, .tptpl .tabs::before { display: table; content: " "; } .tptpl .tabs::after { clear: both; } .tptpl .tabs.vertical > li { display: block; float: none; width: auto; } .tptpl .tabs.simple > li > a { padding: 0; } .tptpl .tabs.simple > li > a:hover { background: 0 0; } .tptpl .tabs.primary { background: #000; } .tptpl .tabs.primary > li > a { color: #000; } .tptpl .tabs.primary > li > a:focus, .tptpl .tabs.primary > li > a:hover { background: #00db92; } .tptpl .tabs-title { float: left; } .tptpl .tabs-title > a { display: block; padding: 1.25rem 1.5rem; font-size: 0.75rem; line-height: 1; color: #000; } .tptpl .tabs-title > a:hover { background: #fff; color: #00af75; } .tptpl .tabs-title > a:focus, .tptpl .tabs-title > a[aria-selected="true"] { background: #e6e6e6; color: #000; } .tptpl .tabs-content { border: 1px solid #e6e6e6; border-top: 0; background: #fff; color: #000; transition: all 0.5s ease; } .tptpl .tabs-content.vertical { border: 1px solid #e6e6e6; border-left: 0; } .tptpl .tabs-panel { display: none; padding: 1rem; } .tptpl .tabs-panel[aria-hidden="false"] { display: block; } .tptpl .callout { position: relative; margin: 0 0 1rem 0; padding: 1rem; border: 1px solid rgba(10, 10, 10, 0.25); border-radius: 3px; background-color: #fff; } .tptpl .callout > :first-child { margin-top: 0; } .tptpl .callout > :last-child { margin-bottom: 0; } .tptpl .callout.primary { background-color: #d1fff0; color: #000; } .tptpl .callout.secondary { background-color: #e9eaeb; color: #000; } .tptpl .callout.alert { background-color: #dadae5; color: #000; } .tptpl .callout.success { background-color: #d1fff0; color: #000; } .tptpl .callout.warning { background-color: #ffd1dd; color: #000; } .tptpl .callout.body-font { background-color: #dadae5; color: #000; } .tptpl .callout.header { background-color: #dadae5; color: #000; } .tptpl .callout.small { padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.5rem; } .tptpl .callout.large { padding-top: 3rem; padding-right: 3rem; padding-bottom: 3rem; padding-left: 3rem; } .tptpl .card { margin-bottom: 1rem; border: 1px solid #e6e6e6; border-radius: 3px; background: #fff; box-shadow: none; overflow: hidden; color: #000; } .tptpl .card > :last-child { margin-bottom: 0; } .tptpl .card-divider { padding: 1rem; background: #e6e6e6; } .tptpl .card-divider > :last-child { margin-bottom: 0; } .tptpl .card-section { padding: 1rem; } .tptpl .card-section > :last-child { margin-bottom: 0; } .tptpl .media-object { display: block; margin-bottom: 1rem; } .tptpl .media-object img { max-width: none; } @media screen and (max-width: 39.9375em) { .tptpl .media-object.stack-for-small .media-object-section { padding: 0; padding-bottom: 1rem; display: block; } .tptpl .media-object.stack-for-small .media-object-section img { width: 100%; } } .tptpl .media-object-section { display: table-cell; vertical-align: top; } .tptpl .media-object-section:first-child { padding-right: 1rem; } .tptpl .media-object-section:last-child:not(:nth-child(2)) { padding-left: 1rem; } .tptpl .media-object-section > :last-child { margin-bottom: 0; } .tptpl .media-object-section.middle { vertical-align: middle; } .tptpl .media-object-section.bottom { vertical-align: bottom; } .tptpl body.is-reveal-open { overflow: hidden; } .tptpl html.is-reveal-open, .tptpl html.is-reveal-open body { min-height: 100%; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tptpl .reveal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1005; display: none; background-color: rgba(10, 10, 10, 0.45); overflow-y: scroll; } .tptpl .reveal { z-index: 1006; backface-visibility: hidden; display: none; padding: 1rem; border: 1px solid #cacaca; border-radius: 3px; background-color: #fff; position: relative; top: 100px; margin-right: auto; margin-left: auto; overflow-y: auto; } .tptpl [data-whatinput="mouse"] .reveal {} @media print, screen and (min-width: 40em) { .tptpl .reveal { min-height: 0; } } .tptpl .reveal .column, .tptpl .reveal .columns { min-width: 0; } .tptpl .reveal > :last-child { margin-bottom: 0; } @media print, screen and (min-width: 40em) { .tptpl .reveal { width: 600px; max-width: 75rem; } } @media print, screen and (min-width: 40em) { .tptpl .reveal .reveal { right: auto; left: auto; margin: 0 auto; } } .tptpl .reveal.collapse { padding: 0; } @media print, screen and (min-width: 40em) { .tptpl .reveal.tiny { width: 30%; max-width: 75rem; } } @media print, screen and (min-width: 40em) { .tptpl .reveal.small { width: 50%; max-width: 75rem; } } @media print, screen and (min-width: 40em) { .tptpl .reveal.large { width: 90%; max-width: 75rem; } } .tptpl .reveal.full { top: 0; left: 0; width: 100%; max-width: none; height: 100%; height: 100vh; min-height: 100vh; margin-left: 0; border: 0; border-radius: 0; } @media screen and (max-width: 39.9375em) { .tptpl .reveal { top: 0; left: 0; width: 100%; max-width: none; height: 100%; height: 100vh; min-height: 100vh; margin-left: 0; border: 0; border-radius: 0; } } .tptpl .reveal.without-overlay { position: fixed; } .tptpl table { width: 100%; margin-bottom: 1rem; border-radius: 3px; } .tptpl table tbody, .tptpl table tfoot, .tptpl table thead { border: 1px solid #f1f1f1; background-color: #fff; } .tptpl table caption { padding: 0.5rem 0.625rem 0.625rem; font-weight: 700; } .tptpl table thead { background: #f8f8f8; color: #000; } .tptpl table tfoot { background: #f1f1f1; color: #000; } .tptpl table tfoot tr, .tptpl table thead tr { background: 0 0; } .tptpl table tfoot td, .tptpl table tfoot th, .tptpl table thead td, .tptpl table thead th { padding: 0.5rem 0.625rem 0.625rem; font-weight: 700; text-align: left; } .tptpl table tbody td, .tptpl table tbody th { padding: 0.5rem 0.625rem 0.625rem; } .tptpl table tbody tr:nth-child(even) { border-bottom: 0; background-color: #f1f1f1; } .tptpl table.unstriped tbody { background-color: #fff; } .tptpl table.unstriped tbody tr { border-bottom: 0; border-bottom: 1px solid #f1f1f1; background-color: #fff; } @media screen and (max-width: 63.9375em) { .tptpl table.stack thead { display: none; } .tptpl table.stack tfoot { display: none; } .tptpl table.stack td, .tptpl table.stack th, .tptpl table.stack tr { display: block; } .tptpl table.stack td { border-top: 0; } } .tptpl table.scroll { display: block; width: 100%; overflow-x: auto; } .tptpl table.hover thead tr:hover { background-color: #f3f3f3; } .tptpl table.hover tfoot tr:hover { background-color: #ececec; } .tptpl table.hover tbody tr:hover { background-color: #ffeed9; } .tptpl table.hover:not(.unstriped) tr:nth-of-type(even):hover { background-color: #ececec; } .tptpl .table-scroll { overflow-x: auto; } .tptpl .table-scroll table { width: auto; } .tptpl .badge { display: inline-block; min-width: 2.1em; padding: 0.3em; border-radius: 50%; font-size: 0.6rem; text-align: center; background: #000; color: #fff; } .tptpl .badge.primary { background: #000; color: #000; } .tptpl .badge.secondary { background: #70727b; color: #fff; } .tptpl .badge.alert { background: #262637; color: #fff; } .tptpl .badge.success { background: #000; color: #000; } .tptpl .badge.warning { background: #c03; color: #fff; } .tptpl .badge.body-font { background: #262637; color: #fff; } .tptpl .badge.header { background: #262637; color: #fff; } .tptpl .label { display: inline-block; padding: 0.33333rem 0.5rem; border-radius: 3px; font-size: 0.8rem; line-height: 1; white-space: nowrap; cursor: default; background: #000; color: #fff; } .tptpl .label.primary { background: #000; color: #000; } .tptpl .label.secondary { background: #70727b; color: #fff; } .tptpl .label.alert { background: #262637; color: #fff; } .tptpl .label.success { background: #000; color: #000; } .tptpl .label.warning { background: #c03; color: #fff; } .tptpl .label.body-font { background: #262637; color: #fff; } .tptpl .label.header { background: #262637; color: #fff; } .tptpl .progress { height: 1rem; margin-bottom: 1rem; border-radius: 3px; background-color: #cacaca; } .tptpl .progress.primary .progress-meter { background-color: #000; } .tptpl .progress.secondary .progress-meter { background-color: #70727b; } .tptpl .progress.alert .progress-meter { background-color: #262637; } .tptpl .progress.success .progress-meter { background-color: #000; } .tptpl .progress.warning .progress-meter { background-color: #c03; } .tptpl .progress.body-font .progress-meter { background-color: #262637; } .tptpl .progress.header .progress-meter { background-color: #262637; } .tptpl .progress-meter { position: relative; display: block; width: 0%; height: 100%; background-color: #000; border-radius: 3px; } .tptpl .progress-meter-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; margin: 0; font-size: 0.75rem; font-weight: 700; color: #fff; white-space: nowrap; border-radius: 3px; } .tptpl .has-tip { position: relative; display: inline-block; border-bottom: dotted 1px #8a8a8a; font-weight: 700; cursor: help; } .tptpl .tooltip { position: absolute; top: calc(100% + 0.6495rem); z-index: 1200; max-width: 10rem; padding: 0.75rem; border-radius: 3px; background-color: #000; font-size: 80%; color: #fff; } .tptpl .tooltip::before { display: block; width: 0; height: 0; border: inset 0.75rem; content: ""; border-top-width: 0; border-bottom-style: solid; border-color: transparent transparent #000; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); } .tptpl .tooltip.top::before { display: block; width: 0; height: 0; border: inset 0.75rem; content: ""; border-bottom-width: 0; border-top-style: solid; border-color: #000 transparent transparent; top: 100%; bottom: auto; } .tptpl .tooltip.left::before { display: block; width: 0; height: 0; border: inset 0.75rem; content: ""; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent #000; top: 50%; bottom: auto; left: 100%; transform: translateY(-50%); } .tptpl .tooltip.right::before { display: block; width: 0; height: 0; border: inset 0.75rem; content: ""; border-left-width: 0; border-right-style: solid; border-color: transparent #000 transparent transparent; top: 50%; right: 100%; bottom: auto; left: auto; transform: translateY(-50%); } .tptpl .flex-video, .tptpl .responsive-embed { position: relative; height: 0; margin-bottom: 1rem; padding-bottom: 75%; overflow: hidden; } .tptpl .flex-video embed, .tptpl .flex-video iframe, .tptpl .flex-video object, .tptpl .flex-video video, .tptpl .responsive-embed embed, .tptpl .responsive-embed iframe, .tptpl .responsive-embed object, .tptpl .responsive-embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tptpl .flex-video.widescreen, .tptpl .responsive-embed.widescreen { padding-bottom: 56.25%; } .tptpl .orbit { position: relative; } .tptpl .orbit-container { position: relative; height: 0; margin: 0; list-style: none; overflow: hidden; } .tptpl .orbit-slide { width: 100%; } .tptpl .orbit-slide.no-motionui.is-active { top: 0; left: 0; } .tptpl .orbit-figure { margin: 0; } .tptpl .orbit-image { width: 100%; max-width: 100%; margin: 0; } .tptpl .orbit-caption { position: absolute; bottom: 0; width: 100%; margin-bottom: 0; padding: 1rem; background-color: rgba(10, 10, 10, 0.5); color: #fff; } .tptpl .orbit-next, .tptpl .orbit-previous { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; padding: 1rem; color: #fff; } .tptpl [data-whatinput="mouse"] .orbit-next, .tptpl [data-whatinput="mouse"] .orbit-previous {} .tptpl .orbit-next:active, .tptpl .orbit-next:focus, .tptpl .orbit-next:hover, .tptpl .orbit-previous:active, .tptpl .orbit-previous:focus, .tptpl .orbit-previous:hover { background-color: rgba(10, 10, 10, 0.5); } .tptpl .orbit-previous { left: 0; } .tptpl .orbit-next { left: auto; right: 0; } .tptpl .orbit-bullets { position: relative; margin-top: 0.8rem; margin-bottom: 0.8rem; text-align: center; } .tptpl [data-whatinput="mouse"] .orbit-bullets {} .tptpl .orbit-bullets button { width: 1.2rem; height: 1.2rem; margin: 0.1rem; border-radius: 50%; background-color: #cacaca; } .tptpl .orbit-bullets button:hover { background-color: #8a8a8a; } .tptpl .orbit-bullets button.is-active { background-color: #8a8a8a; } .tptpl .thumbnail { display: inline-block; max-width: 100%; margin-bottom: 1rem; border: solid 4px #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); line-height: 0; } .tptpl a.thumbnail { transition: box-shadow 0.2s ease-out; } .tptpl a.thumbnail:focus, .tptpl a.thumbnail:hover { box-shadow: 0 0 6px 1px rgba(0, 204, 136, 0.5); } .tptpl a.thumbnail image { box-shadow: none; } .tptpl .sticky-container { position: relative; } .tptpl .sticky { position: relative; z-index: 0; transform: translate3d(0, 0, 0); } .tptpl .sticky.is-stuck { position: fixed; z-index: 5; } .tptpl .sticky.is-stuck.is-at-top { top: 0; } .tptpl .sticky.is-stuck.is-at-bottom { bottom: 0; } .tptpl .sticky.is-anchored { position: relative; right: auto; left: auto; } .tptpl .sticky.is-anchored.is-at-bottom { bottom: 0; } .tptpl .row { max-width: 1440px; margin-right: auto; margin-left: auto; } .tptpl .row::after, .tptpl .row::before { display: table; content: " "; } .tptpl .row::after { clear: both; } .tptpl .row.collapse > .column, .tptpl .row.collapse > .columns { padding-right: 0; padding-left: 0; } .tptpl .row .row { margin-right: 0; margin-left: 0; } @media print, screen and (min-width: 40em) { .tptpl .row .row { margin-right: 0; margin-left: 0; } } @media print, screen and (min-width: 64em) { .tptpl .row .row { margin-right: 0; margin-left: 0; } } .tptpl .row .row.collapse { margin-right: 0; margin-left: 0; } .tptpl .row.expanded { max-width: none; } .tptpl .row.expanded .row { margin-right: auto; margin-left: auto; } .tptpl .row:not(.expanded) .row { max-width: none; } .tptpl .column, .tptpl .columns { width: 100%; float: left; padding-right: 0; padding-left: 0; } .tptpl .column:last-child:not(:first-child), .tptpl .columns:last-child:not(:first-child) { float: right; } .tptpl .column.end:last-child:last-child, .tptpl .end.columns:last-child:last-child { float: left; } .tptpl .column.row.row, .tptpl .row.row.columns { float: none; } .tptpl .row .column.row.row, .tptpl .row .row.row.columns { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; } .tptpl .small-1 { width: 8.33333%; } .tptpl .small-push-1 { position: relative; left: 8.33333%; } .tptpl .small-pull-1 { position: relative; left: -8.33333%; } .tptpl .small-offset-0 { margin-left: 0; } .tptpl .small-2 { width: 16.66667%; } .tptpl .small-push-2 { position: relative; left: 16.66667%; } .tptpl .small-pull-2 { position: relative; left: -16.66667%; } .tptpl .small-offset-1 { margin-left: 8.33333%; } .tptpl .small-3 { width: 25%; } .tptpl .small-push-3 { position: relative; left: 25%; } .tptpl .small-pull-3 { position: relative; left: -25%; } .tptpl .small-offset-2 { margin-left: 16.66667%; } .tptpl .small-4 { width: 33.33333%; } .tptpl .small-push-4 { position: relative; left: 33.33333%; } .tptpl .small-pull-4 { position: relative; left: -33.33333%; } .tptpl .small-offset-3 { margin-left: 25%; } .tptpl .small-5 { width: 41.66667%; } .tptpl .small-push-5 { position: relative; left: 41.66667%; } .tptpl .small-pull-5 { position: relative; left: -41.66667%; } .tptpl .small-offset-4 { margin-left: 33.33333%; } .tptpl .small-6 { width: 50%; } .tptpl .small-push-6 { position: relative; left: 50%; } .tptpl .small-pull-6 { position: relative; left: -50%; } .tptpl .small-offset-5 { margin-left: 41.66667%; } .tptpl .small-7 { width: 58.33333%; } .tptpl .small-push-7 { position: relative; left: 58.33333%; } .tptpl .small-pull-7 { position: relative; left: -58.33333%; } .tptpl .small-offset-6 { margin-left: 50%; } .tptpl .small-8 { width: 66.66667%; } .tptpl .small-push-8 { position: relative; left: 66.66667%; } .tptpl .small-pull-8 { position: relative; left: -66.66667%; } .tptpl .small-offset-7 { margin-left: 58.33333%; } .tptpl .small-9 { width: 75%; } .tptpl .small-push-9 { position: relative; left: 75%; } .tptpl .small-pull-9 { position: relative; left: -75%; } .tptpl .small-offset-8 { margin-left: 66.66667%; } .tptpl .small-10 { width: 83.33333%; } .tptpl .small-push-10 { position: relative; left: 83.33333%; } .tptpl .small-pull-10 { position: relative; left: -83.33333%; } .tptpl .small-offset-9 { margin-left: 75%; } .tptpl .small-11 { width: 91.66667%; } .tptpl .small-push-11 { position: relative; left: 91.66667%; } .tptpl .small-pull-11 { position: relative; left: -91.66667%; } .tptpl .small-offset-10 { margin-left: 83.33333%; } .tptpl .small-12 { width: 100%; } .tptpl .small-offset-11 { margin-left: 91.66667%; } .tptpl .small-up-1 > .column, .tptpl .small-up-1 > .columns { float: left; width: 100%; } .tptpl .small-up-1 > .column:nth-of-type(1n), .tptpl .small-up-1 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-1 > .column:nth-of-type(1n + 1), .tptpl .small-up-1 > .columns:nth-of-type(1n + 1) { clear: both; } .tptpl .small-up-1 > .column:last-child, .tptpl .small-up-1 > .columns:last-child { float: left; } .tptpl .small-up-2 > .column, .tptpl .small-up-2 > .columns { float: left; width: 50%; } .tptpl .small-up-2 > .column:nth-of-type(1n), .tptpl .small-up-2 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-2 > .column:nth-of-type(2n + 1), .tptpl .small-up-2 > .columns:nth-of-type(2n + 1) { clear: both; } .tptpl .small-up-2 > .column:last-child, .tptpl .small-up-2 > .columns:last-child { float: left; } .tptpl .small-up-3 > .column, .tptpl .small-up-3 > .columns { float: left; width: 33.33333%; } .tptpl .small-up-3 > .column:nth-of-type(1n), .tptpl .small-up-3 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-3 > .column:nth-of-type(3n + 1), .tptpl .small-up-3 > .columns:nth-of-type(3n + 1) { clear: both; } .tptpl .small-up-3 > .column:last-child, .tptpl .small-up-3 > .columns:last-child { float: left; } .tptpl .small-up-4 > .column, .tptpl .small-up-4 > .columns { float: left; width: 25%; } .tptpl .small-up-4 > .column:nth-of-type(1n), .tptpl .small-up-4 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-4 > .column:nth-of-type(4n + 1), .tptpl .small-up-4 > .columns:nth-of-type(4n + 1) { clear: both; } .tptpl .small-up-4 > .column:last-child, .tptpl .small-up-4 > .columns:last-child { float: left; } .tptpl .small-up-5 > .column, .tptpl .small-up-5 > .columns { float: left; width: 20%; } .tptpl .small-up-5 > .column:nth-of-type(1n), .tptpl .small-up-5 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-5 > .column:nth-of-type(5n + 1), .tptpl .small-up-5 > .columns:nth-of-type(5n + 1) { clear: both; } .tptpl .small-up-5 > .column:last-child, .tptpl .small-up-5 > .columns:last-child { float: left; } .tptpl .small-up-6 > .column, .tptpl .small-up-6 > .columns { float: left; width: 16.66667%; } .tptpl .small-up-6 > .column:nth-of-type(1n), .tptpl .small-up-6 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-6 > .column:nth-of-type(6n + 1), .tptpl .small-up-6 > .columns:nth-of-type(6n + 1) { clear: both; } .tptpl .small-up-6 > .column:last-child, .tptpl .small-up-6 > .columns:last-child { float: left; } .tptpl .small-up-7 > .column, .tptpl .small-up-7 > .columns { float: left; width: 14.28571%; } .tptpl .small-up-7 > .column:nth-of-type(1n), .tptpl .small-up-7 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-7 > .column:nth-of-type(7n + 1), .tptpl .small-up-7 > .columns:nth-of-type(7n + 1) { clear: both; } .tptpl .small-up-7 > .column:last-child, .tptpl .small-up-7 > .columns:last-child { float: left; } .tptpl .small-up-8 > .column, .tptpl .small-up-8 > .columns { float: left; width: 12.5%; } .tptpl .small-up-8 > .column:nth-of-type(1n), .tptpl .small-up-8 > .columns:nth-of-type(1n) { clear: none; } .tptpl .small-up-8 > .column:nth-of-type(8n + 1), .tptpl .small-up-8 > .columns:nth-of-type(8n + 1) { clear: both; } .tptpl .small-up-8 > .column:last-child, .tptpl .small-up-8 > .columns:last-child { float: left; } .tptpl .small-collapse > .column, .tptpl .small-collapse > .columns { padding-right: 0; padding-left: 0; } .tptpl .small-collapse .row { margin-right: 0; margin-left: 0; } .tptpl .expanded.row .small-collapse.row { margin-right: 0; margin-left: 0; } .tptpl .small-uncollapse > .column, .tptpl .small-uncollapse > .columns { padding-right: 0; padding-left: 0; } .tptpl .small-centered { margin-right: auto; margin-left: auto; } .tptpl .small-centered, .tptpl .small-centered:last-child:not(:first-child) { float: none; clear: both; } .tptpl .small-pull-0, .tptpl .small-push-0, .tptpl .small-uncentered { position: static; float: left; margin-right: 0; margin-left: 0; } @media print, screen and (min-width: 40em) { .tptpl .medium-1 { width: 8.33333%; } .tptpl .medium-push-1 { position: relative; left: 8.33333%; } .tptpl .medium-pull-1 { position: relative; left: -8.33333%; } .tptpl .medium-offset-0 { margin-left: 0; } .tptpl .medium-2 { width: 16.66667%; } .tptpl .medium-push-2 { position: relative; left: 16.66667%; } .tptpl .medium-pull-2 { position: relative; left: -16.66667%; } .tptpl .medium-offset-1 { margin-left: 8.33333%; } .tptpl .medium-3 { width: 25%; } .tptpl .medium-push-3 { position: relative; left: 25%; } .tptpl .medium-pull-3 { position: relative; left: -25%; } .tptpl .medium-offset-2 { margin-left: 16.66667%; } .tptpl .medium-4 { width: 33.33333%; } .tptpl .medium-push-4 { position: relative; left: 33.33333%; } .tptpl .medium-pull-4 { position: relative; left: -33.33333%; } .tptpl .medium-offset-3 { margin-left: 25%; } .tptpl .medium-5 { width: 41.66667%; } .tptpl .medium-push-5 { position: relative; left: 41.66667%; } .tptpl .medium-pull-5 { position: relative; left: -41.66667%; } .tptpl .medium-offset-4 { margin-left: 33.33333%; } .tptpl .medium-6 { width: 50%; } .tptpl .medium-push-6 { position: relative; left: 50%; } .tptpl .medium-pull-6 { position: relative; left: -50%; } .tptpl .medium-offset-5 { margin-left: 41.66667%; } .tptpl .medium-7 { width: 58.33333%; } .tptpl .medium-push-7 { position: relative; left: 58.33333%; } .tptpl .medium-pull-7 { position: relative; left: -58.33333%; } .tptpl .medium-offset-6 { margin-left: 50%; } .tptpl .medium-8 { width: 66.66667%; } .tptpl .medium-push-8 { position: relative; left: 66.66667%; } .tptpl .medium-pull-8 { position: relative; left: -66.66667%; } .tptpl .medium-offset-7 { margin-left: 58.33333%; } .tptpl .medium-9 { width: 75%; } .tptpl .medium-push-9 { position: relative; left: 75%; } .tptpl .medium-pull-9 { position: relative; left: -75%; } .tptpl .medium-offset-8 { margin-left: 66.66667%; } .tptpl .medium-10 { width: 83.33333%; } .tptpl .medium-push-10 { position: relative; left: 83.33333%; } .tptpl .medium-pull-10 { position: relative; left: -83.33333%; } .tptpl .medium-offset-9 { margin-left: 75%; } .tptpl .medium-11 { width: 91.66667%; } .tptpl .medium-push-11 { position: relative; left: 91.66667%; } .tptpl .medium-pull-11 { position: relative; left: -91.66667%; } .tptpl .medium-offset-10 { margin-left: 83.33333%; } .tptpl .medium-12 { width: 100%; } .tptpl .medium-offset-11 { margin-left: 91.66667%; } .tptpl .medium-up-1 > .column, .tptpl .medium-up-1 > .columns { float: left; width: 100%; } .tptpl .medium-up-1 > .column:nth-of-type(1n), .tptpl .medium-up-1 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-1 > .column:nth-of-type(1n + 1), .tptpl .medium-up-1 > .columns:nth-of-type(1n + 1) { clear: both; } .tptpl .medium-up-1 > .column:last-child, .tptpl .medium-up-1 > .columns:last-child { float: left; } .tptpl .medium-up-2 > .column, .tptpl .medium-up-2 > .columns { float: left; width: 50%; } .tptpl .medium-up-2 > .column:nth-of-type(1n), .tptpl .medium-up-2 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-2 > .column:nth-of-type(2n + 1), .tptpl .medium-up-2 > .columns:nth-of-type(2n + 1) { clear: both; } .tptpl .medium-up-2 > .column:last-child, .tptpl .medium-up-2 > .columns:last-child { float: left; } .tptpl .medium-up-3 > .column, .tptpl .medium-up-3 > .columns { float: left; width: 33.33333%; } .tptpl .medium-up-3 > .column:nth-of-type(1n), .tptpl .medium-up-3 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-3 > .column:nth-of-type(3n + 1), .tptpl .medium-up-3 > .columns:nth-of-type(3n + 1) { clear: both; } .tptpl .medium-up-3 > .column:last-child, .tptpl .medium-up-3 > .columns:last-child { float: left; } .tptpl .medium-up-4 > .column, .tptpl .medium-up-4 > .columns { float: left; width: 25%; } .tptpl .medium-up-4 > .column:nth-of-type(1n), .tptpl .medium-up-4 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-4 > .column:nth-of-type(4n + 1), .tptpl .medium-up-4 > .columns:nth-of-type(4n + 1) { clear: both; } .tptpl .medium-up-4 > .column:last-child, .tptpl .medium-up-4 > .columns:last-child { float: left; } .tptpl .medium-up-5 > .column, .tptpl .medium-up-5 > .columns { float: left; width: 20%; } .tptpl .medium-up-5 > .column:nth-of-type(1n), .tptpl .medium-up-5 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-5 > .column:nth-of-type(5n + 1), .tptpl .medium-up-5 > .columns:nth-of-type(5n + 1) { clear: both; } .tptpl .medium-up-5 > .column:last-child, .tptpl .medium-up-5 > .columns:last-child { float: left; } .tptpl .medium-up-6 > .column, .tptpl .medium-up-6 > .columns { float: left; width: 16.66667%; } .tptpl .medium-up-6 > .column:nth-of-type(1n), .tptpl .medium-up-6 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-6 > .column:nth-of-type(6n + 1), .tptpl .medium-up-6 > .columns:nth-of-type(6n + 1) { clear: both; } .tptpl .medium-up-6 > .column:last-child, .tptpl .medium-up-6 > .columns:last-child { float: left; } .tptpl .medium-up-7 > .column, .tptpl .medium-up-7 > .columns { float: left; width: 14.28571%; } .tptpl .medium-up-7 > .column:nth-of-type(1n), .tptpl .medium-up-7 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-7 > .column:nth-of-type(7n + 1), .tptpl .medium-up-7 > .columns:nth-of-type(7n + 1) { clear: both; } .tptpl .medium-up-7 > .column:last-child, .tptpl .medium-up-7 > .columns:last-child { float: left; } .tptpl .medium-up-8 > .column, .tptpl .medium-up-8 > .columns { float: left; width: 12.5%; } .tptpl .medium-up-8 > .column:nth-of-type(1n), .tptpl .medium-up-8 > .columns:nth-of-type(1n) { clear: none; } .tptpl .medium-up-8 > .column:nth-of-type(8n + 1), .tptpl .medium-up-8 > .columns:nth-of-type(8n + 1) { clear: both; } .tptpl .medium-up-8 > .column:last-child, .tptpl .medium-up-8 > .columns:last-child { float: left; } .tptpl .medium-collapse > .column, .tptpl .medium-collapse > .columns { padding-right: 0; padding-left: 0; } .tptpl .medium-collapse .row { margin-right: 0; margin-left: 0; } .tptpl .expanded.row .medium-collapse.row { margin-right: 0; margin-left: 0; } .tptpl .medium-uncollapse > .column, .tptpl .medium-uncollapse > .columns { padding-right: 0; padding-left: 0; } .tptpl .medium-centered { margin-right: auto; margin-left: auto; } .tptpl .medium-centered, .tptpl .medium-centered:last-child:not(:first-child) { float: none; clear: both; } .tptpl .medium-pull-0, .tptpl .medium-push-0, .tptpl .medium-uncentered { position: static; float: left; margin-right: 0; margin-left: 0; } } @media print, screen and (min-width: 64em) { .tptpl .large-1 { width: 8.33333%; } .tptpl .large-push-1 { position: relative; left: 8.33333%; } .tptpl .large-pull-1 { position: relative; left: -8.33333%; } .tptpl .large-offset-0 { margin-left: 0; } .tptpl .large-2 { width: 16.66667%; } .tptpl .large-push-2 { position: relative; left: 16.66667%; } .tptpl .large-pull-2 { position: relative; left: -16.66667%; } .tptpl .large-offset-1 { margin-left: 8.33333%; } .tptpl .large-3 { width: 25%; } .tptpl .large-push-3 { position: relative; left: 25%; } .tptpl .large-pull-3 { position: relative; left: -25%; } .tptpl .large-offset-2 { margin-left: 16.66667%; } .tptpl .large-4 { width: 33.33333%; } .tptpl .large-push-4 { position: relative; left: 33.33333%; } .tptpl .large-pull-4 { position: relative; left: -33.33333%; } .tptpl .large-offset-3 { margin-left: 25%; } .tptpl .large-5 { width: 41.66667%; } .tptpl .large-push-5 { position: relative; left: 41.66667%; } .tptpl .large-pull-5 { position: relative; left: -41.66667%; } .tptpl .large-offset-4 { margin-left: 33.33333%; } .tptpl .large-6 { width: 50%; } .tptpl .large-push-6 { position: relative; left: 50%; } .tptpl .large-pull-6 { position: relative; left: -50%; } .tptpl .large-offset-5 { margin-left: 41.66667%; } .tptpl .large-7 { width: 58.33333%; } .tptpl .large-push-7 { position: relative; left: 58.33333%; } .tptpl .large-pull-7 { position: relative; left: -58.33333%; } .tptpl .large-offset-6 { margin-left: 50%; } .tptpl .large-8 { width: 66.66667%; } .tptpl .large-push-8 { position: relative; left: 66.66667%; } .tptpl .large-pull-8 { position: relative; left: -66.66667%; } .tptpl .large-offset-7 { margin-left: 58.33333%; } .tptpl .large-9 { width: 75%; } .tptpl .large-push-9 { position: relative; left: 75%; } .tptpl .large-pull-9 { position: relative; left: -75%; } .tptpl .large-offset-8 { margin-left: 66.66667%; } .tptpl .large-10 { width: 83.33333%; } .tptpl .large-push-10 { position: relative; left: 83.33333%; } .tptpl .large-pull-10 { position: relative; left: -83.33333%; } .tptpl .large-offset-9 { margin-left: 75%; } .tptpl .large-11 { width: 91.66667%; } .tptpl .large-push-11 { position: relative; left: 91.66667%; } .tptpl .large-pull-11 { position: relative; left: -91.66667%; } .tptpl .large-offset-10 { margin-left: 83.33333%; } .tptpl .large-12 { width: 100%; } .tptpl .large-offset-11 { margin-left: 91.66667%; } .tptpl .large-up-1 > .column, .tptpl .large-up-1 > .columns { float: left; width: 100%; } .tptpl .large-up-1 > .column:nth-of-type(1n), .tptpl .large-up-1 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-1 > .column:nth-of-type(1n + 1), .tptpl .large-up-1 > .columns:nth-of-type(1n + 1) { clear: both; } .tptpl .large-up-1 > .column:last-child, .tptpl .large-up-1 > .columns:last-child { float: left; } .tptpl .large-up-2 > .column, .tptpl .large-up-2 > .columns { float: left; width: 50%; } .tptpl .large-up-2 > .column:nth-of-type(1n), .tptpl .large-up-2 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-2 > .column:nth-of-type(2n + 1), .tptpl .large-up-2 > .columns:nth-of-type(2n + 1) { clear: both; } .tptpl .large-up-2 > .column:last-child, .tptpl .large-up-2 > .columns:last-child { float: left; } .tptpl .large-up-3 > .column, .tptpl .large-up-3 > .columns { float: left; width: 33.33333%; } .tptpl .large-up-3 > .column:nth-of-type(1n), .tptpl .large-up-3 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-3 > .column:nth-of-type(3n + 1), .tptpl .large-up-3 > .columns:nth-of-type(3n + 1) { clear: both; } .tptpl .large-up-3 > .column:last-child, .tptpl .large-up-3 > .columns:last-child { float: left; } .tptpl .large-up-4 > .column, .tptpl .large-up-4 > .columns { float: left; width: 25%; } .tptpl .large-up-4 > .column:nth-of-type(1n), .tptpl .large-up-4 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-4 > .column:nth-of-type(4n + 1), .tptpl .large-up-4 > .columns:nth-of-type(4n + 1) { clear: both; } .tptpl .large-up-4 > .column:last-child, .tptpl .large-up-4 > .columns:last-child { float: left; } .tptpl .large-up-5 > .column, .tptpl .large-up-5 > .columns { float: left; width: 20%; } .tptpl .large-up-5 > .column:nth-of-type(1n), .tptpl .large-up-5 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-5 > .column:nth-of-type(5n + 1), .tptpl .large-up-5 > .columns:nth-of-type(5n + 1) { clear: both; } .tptpl .large-up-5 > .column:last-child, .tptpl .large-up-5 > .columns:last-child { float: left; } .tptpl .large-up-6 > .column, .tptpl .large-up-6 > .columns { float: left; width: 16.66667%; } .tptpl .large-up-6 > .column:nth-of-type(1n), .tptpl .large-up-6 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-6 > .column:nth-of-type(6n + 1), .tptpl .large-up-6 > .columns:nth-of-type(6n + 1) { clear: both; } .tptpl .large-up-6 > .column:last-child, .tptpl .large-up-6 > .columns:last-child { float: left; } .tptpl .large-up-7 > .column, .tptpl .large-up-7 > .columns { float: left; width: 14.28571%; } .tptpl .large-up-7 > .column:nth-of-type(1n), .tptpl .large-up-7 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-7 > .column:nth-of-type(7n + 1), .tptpl .large-up-7 > .columns:nth-of-type(7n + 1) { clear: both; } .tptpl .large-up-7 > .column:last-child, .tptpl .large-up-7 > .columns:last-child { float: left; } .tptpl .large-up-8 > .column, .tptpl .large-up-8 > .columns { float: left; width: 12.5%; } .tptpl .large-up-8 > .column:nth-of-type(1n), .tptpl .large-up-8 > .columns:nth-of-type(1n) { clear: none; } .tptpl .large-up-8 > .column:nth-of-type(8n + 1), .tptpl .large-up-8 > .columns:nth-of-type(8n + 1) { clear: both; } .tptpl .large-up-8 > .column:last-child, .tptpl .large-up-8 > .columns:last-child { float: left; } .tptpl .large-collapse > .column, .tptpl .large-collapse > .columns { padding-right: 0; padding-left: 0; } .tptpl .large-collapse .row { margin-right: 0; margin-left: 0; } .tptpl .expanded.row .large-collapse.row { margin-right: 0; margin-left: 0; } .tptpl .large-uncollapse > .column, .tptpl .large-uncollapse > .columns { padding-right: 0; padding-left: 0; } .tptpl .large-centered { margin-right: auto; margin-left: auto; } .tptpl .large-centered, .tptpl .large-centered:last-child:not(:first-child) { float: none; clear: both; } .tptpl .large-pull-0, .tptpl .large-push-0, .tptpl .large-uncentered { position: static; float: left; margin-right: 0; margin-left: 0; } } .tptpl .column-block { margin-bottom: 0; } .tptpl .column-block > :last-child { margin-bottom: 0; } .tptpl .menu-icon { position: relative; display: inline-block; vertical-align: middle; width: 20px; height: 16px; cursor: pointer; } .tptpl .menu-icon::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; background: #fff; box-shadow: 0 7px 0 #fff, 0 14px 0 #fff; content: ""; } .tptpl .menu-icon:hover::after { background: #cacaca; box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; } .tptpl .menu-icon.dark { position: relative; display: inline-block; vertical-align: middle; width: 20px; height: 16px; cursor: pointer; } .tptpl .menu-icon.dark::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; background: #000; box-shadow: 0 7px 0 #000, 0 14px 0 #000; content: ""; } .tptpl .menu-icon.dark:hover::after { background: #8a8a8a; box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; } .tptpl .slide-in-down.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: translateY(-100%); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-in-down.mui-enter.mui-enter-active { transform: translateY(0); } .tptpl .slide-in-left.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: translateX(-100%); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-in-left.mui-enter.mui-enter-active { transform: translateX(0); } .tptpl .slide-in-up.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: translateY(100%); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-in-up.mui-enter.mui-enter-active { transform: translateY(0); } .tptpl .slide-in-right.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: translateX(100%); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-in-right.mui-enter.mui-enter-active { transform: translateX(0); } .tptpl .slide-out-down.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: translateY(0); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-out-down.mui-leave.mui-leave-active { transform: translateY(100%); } .tptpl .slide-out-right.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: translateX(0); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-out-right.mui-leave.mui-leave-active { transform: translateX(100%); } .tptpl .slide-out-up.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: translateY(0); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-out-up.mui-leave.mui-leave-active { transform: translateY(-100%); } .tptpl .slide-out-left.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: translateX(0); transition-property: transform, opacity; backface-visibility: hidden; } .tptpl .slide-out-left.mui-leave.mui-leave-active { transform: translateX(-100%); } .tptpl .fade-in.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; opacity: 0; transition-property: opacity; } .tptpl .fade-in.mui-enter.mui-enter-active { opacity: 1; } .tptpl .fade-out.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; opacity: 1; transition-property: opacity; } .tptpl .fade-out.mui-leave.mui-leave-active { opacity: 0; } .tptpl .hinge-in-from-top.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: top; transition-property: transform, opacity; opacity: 0; } .tptpl .hinge-in-from-top.mui-enter.mui-enter-active { opacity: 1; } .tptpl .hinge-in-from-right.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: right; transition-property: transform, opacity; opacity: 0; } .tptpl .hinge-in-from-right.mui-enter.mui-enter-active { opacity: 1; } .tptpl .hinge-in-from-bottom.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: bottom; transition-property: transform, opacity; opacity: 0; } .tptpl .hinge-in-from-bottom.mui-enter.mui-enter-active { opacity: 1; } .tptpl .hinge-in-from-left.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: left; transition-property: transform, opacity; opacity: 0; } .tptpl .hinge-in-from-left.mui-enter.mui-enter-active { opacity: 1; } .tptpl .hinge-in-from-middle-x.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: center; transition-property: transform, opacity; opacity: 0; } .tptpl .hinge-in-from-middle-x.mui-enter.mui-enter-active { opacity: 1; } .tptpl .hinge-in-from-middle-y.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: center; transition-property: transform, opacity; opacity: 0; } .tptpl .hinge-in-from-middle-y.mui-enter.mui-enter-active { opacity: 1; } .tptpl .hinge-out-from-top.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: top; transition-property: transform, opacity; opacity: 1; } .tptpl .hinge-out-from-top.mui-leave.mui-leave-active { opacity: 0; } .tptpl .hinge-out-from-right.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: right; transition-property: transform, opacity; opacity: 1; } .tptpl .hinge-out-from-right.mui-leave.mui-leave-active { opacity: 0; } .tptpl .hinge-out-from-bottom.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: bottom; transition-property: transform, opacity; opacity: 1; } .tptpl .hinge-out-from-bottom.mui-leave.mui-leave-active { opacity: 0; } .tptpl .hinge-out-from-left.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: left; transition-property: transform, opacity; opacity: 1; } .tptpl .hinge-out-from-left.mui-leave.mui-leave-active { opacity: 0; } .tptpl .hinge-out-from-middle-x.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: center; transition-property: transform, opacity; opacity: 1; } .tptpl .hinge-out-from-middle-x.mui-leave.mui-leave-active { opacity: 0; } .tptpl .hinge-out-from-middle-y.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform-origin: center; transition-property: transform, opacity; opacity: 1; } .tptpl .hinge-out-from-middle-y.mui-leave.mui-leave-active { opacity: 0; } .tptpl .scale-in-up.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: scale(0.5); transition-property: transform, opacity; opacity: 0; } .tptpl .scale-in-up.mui-enter.mui-enter-active { transform: scale(1); opacity: 1; } .tptpl .scale-in-down.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: scale(1.5); transition-property: transform, opacity; opacity: 0; } .tptpl .scale-in-down.mui-enter.mui-enter-active { transform: scale(1); opacity: 1; } .tptpl .scale-out-up.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: scale(1); transition-property: transform, opacity; opacity: 1; } .tptpl .scale-out-up.mui-leave.mui-leave-active { transform: scale(1.5); opacity: 0; } .tptpl .scale-out-down.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: scale(1); transition-property: transform, opacity; opacity: 1; } .tptpl .scale-out-down.mui-leave.mui-leave-active { transform: scale(0.5); opacity: 0; } .tptpl .spin-in.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: rotate(-0.75turn); transition-property: transform, opacity; opacity: 0; } .tptpl .spin-in.mui-enter.mui-enter-active { transform: rotate(0); opacity: 1; } .tptpl .spin-out.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: rotate(0); transition-property: transform, opacity; opacity: 1; } .tptpl .spin-out.mui-leave.mui-leave-active { transform: rotate(0.75turn); opacity: 0; } .tptpl .spin-in-ccw.mui-enter { transition-duration: 0.5s; transition-timing-function: linear; transform: rotate(0.75turn); transition-property: transform, opacity; opacity: 0; } .tptpl .spin-in-ccw.mui-enter.mui-enter-active { transform: rotate(0); opacity: 1; } .tptpl .spin-out-ccw.mui-leave { transition-duration: 0.5s; transition-timing-function: linear; transform: rotate(0); transition-property: transform, opacity; opacity: 1; } .tptpl .spin-out-ccw.mui-leave.mui-leave-active { transform: rotate(-0.75turn); opacity: 0; } .tptpl .slow { transition-duration: 750ms !important; } .tptpl .fast { transition-duration: 250ms !important; } .tptpl .linear { transition-timing-function: linear !important; } .tptpl .ease { transition-timing-function: ease !important; } .tptpl .ease-in { transition-timing-function: ease-in !important; } .tptpl .ease-out { transition-timing-function: ease-out !important; } .tptpl .ease-in-out { transition-timing-function: ease-in-out !important; } .tptpl .bounce-in { transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } .tptpl .bounce-out { transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } .tptpl .bounce-in-out { transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } .tptpl .short-delay { transition-delay: 0.3s !important; } .tptpl .long-delay { transition-delay: 0.7s !important; } .tptpl .shake { animation-name: shake-7; } @keyframes shake-7 { 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { transform: translateX(7%); } 15%, 25%, 35%, 45%, 5%, 55%, 65%, 75%, 85%, 95% { transform: translateX(-7%); } } .tptpl .spin-cw { animation-name: spin-cw-1turn; } @keyframes spin-cw-1turn { 0% { transform: rotate(-1turn); } 100% { transform: rotate(0); } } .tptpl .spin-ccw { animation-name: spin-cw-1turn; } @keyframes spin-cw-1turn { 0% { transform: rotate(0); } 100% { transform: rotate(1turn); } } .tptpl .wiggle { animation-name: wiggle-7deg; } @keyframes wiggle-7deg { 40%, 50%, 60% { transform: rotate(7deg); } 35%, 45%, 55%, 65% { transform: rotate(-7deg); } 0%, 100%, 30%, 70% { transform: rotate(0); } } .tptpl .shake, .tptpl .spin-ccw, .tptpl .spin-cw, .tptpl .wiggle { animation-duration: 0.5s; } .tptpl .infinite { animation-iteration-count: infinite; } .tptpl .slow { animation-duration: 750ms !important; } .tptpl .fast { animation-duration: 250ms !important; } .tptpl .linear { animation-timing-function: linear !important; } .tptpl .ease { animation-timing-function: ease !important; } .tptpl .ease-in { animation-timing-function: ease-in !important; } .tptpl .ease-out { animation-timing-function: ease-out !important; } .tptpl .ease-in-out { animation-timing-function: ease-in-out !important; } .tptpl .bounce-in { animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } .tptpl .bounce-out { animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } .tptpl .bounce-in-out { animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } .tptpl .short-delay { animation-delay: 0.3s !important; } .tptpl .long-delay { animation-delay: 0.7s !important; } .tptpl body { padding: 60px 0; } .tptpl body.home { padding-top: 0; } .tptpl body.no-job-bar { padding-bottom: 0; } .tptpl body.no-job-bar footer { margin-bottom: 0; } @media screen and (min-width: 1120px) { .tptpl body { padding: 95px 0; } } .tptpl ::placeholder { color: #adadad; opacity: 1; } .tptpl svg.svg-select {} .tptpl svg.svg-mag-glass {} .tptpl .text-centre { text-align: center !important; } .tptpl body.mobile-faqs-filters-on, .tptpl body.mobile-job-search-filters-on, .tptpl body.mobile-main-nav-on, .tptpl body.mobile-map-filters-on, .tptpl body.mobile-post-filters-on, .tptpl body.mobile-story-filters-on { overflow: hidden; } .tptpl .is-drilldown { position: fixed; z-index: 5; overflow: hidden; background: #fff; top: 0; width: 0; max-width: calc(100% - 58px) !important; height: 100% !important; min-height: 100% !important; transform: translateX(-100%); transition: transform 0.25s ease-in-out, width 0.25s ease-in-out; } .tptpl .is-drilldown a, .tptpl .is-drilldown a:active, .tptpl .is-drilldown a:focus {} .tptpl .mobile-main-nav-on .is-drilldown { transform: translateX(0); width: calc(100% - 58px); } .tptpl .is-drilldown-submenu { height: 100%; background: #fff; overflow-x: hidden; overflow-y: scroll; } .tptpl .is-drilldown .menu > li > a { font-size: 16px; line-height: 1; text-transform: uppercase; font-weight: 500; padding: 16px 38px 17px 19px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tptpl .is-drilldown .menu > li > a.selected span { border-bottom: 1px solid #000; } .tptpl .is-drilldown .menu > li.is-submenu-parent-item > a span, .tptpl .is-drilldown .menu > li.is-submenu-parent-item > a span:after { border: none !important; } .tptpl .is-drilldown .menu > li.is-drilldown-submenu-item:last-of-type > a { margin-bottom: 50px; } .tptpl .is-drilldown .menu > li.mobile-logo, .tptpl .mobile-country-menu-on .is-drilldown .menu > li.mobile-logo, .tptpl .mobile-country-menu-on.mobile-main-nav-on .is-drilldown .menu > li.mobile-logo { font-size: 0; line-height: 0; background: url("https://apply.superdry.com/app/tpl/asset/85ec1f42644b23644f647d7a22e1fb8667d8d40b781c48c90014d447b11ce4e4") 0 -124px no-repeat; background-size: auto; margin: 18px 20px 13px; background-size: 145px; width: calc(100% - 40px); height: 30px; opacity: 0; transition: opacity 0.25s ease-in-out 0.15s; } .tptpl .mobile-main-nav-on .is-drilldown .menu > li.mobile-logo { opacity: 1; } .tptpl .is-drilldown .menu > li.mobile-logo > a { font-size: 0; line-height: 0; width: 100%; height: 22px; margin: 0; padding: 0; } .tptpl .is-drilldown-submenu-parent > a::after { border: none; background: url("https://apply.superdry.com/app/tpl/asset/59a470bcacd02fbc4d4dd68b554880d2d6897e834c5156429285e5b7367a1a8b") center no-repeat; width: 16px; height: 16px; border-radius: 20px; margin: 0; top: calc(50% - 8px); right: 20px; background-size: 16px; } .tptpl .is-drilldown .mobile-search { position: absolute; bottom: 85px; left: 20px; right: 20px; } .tptpl .is-drilldown .mobile-search label { font-size: 0; line-height: 0; } .tptpl .is-drilldown .mobile-search input { font-size: 16px; border: none; border-bottom: 1px solid #000; border-radius: 0; box-shadow: none; padding: 10px 28px; height: 50px; background: url("https://apply.superdry.com/app/tpl/asset/561ccf23bcf2883feef9cee9f4e664044b327c33b2d43ccf8a7587205d52da31") no-repeat left center; } .tptpl .is-drilldown .menu > li.is-submenu-item > a { text-transform: none; font-weight: 300; font-size: 13px; line-height: 1.1; padding: 10px 19px; overflow: visible; white-space: normal; } .tptpl .is-drilldown .menu > li.is-submenu-item > a.selected span { position: relative; border: none !important; } .tptpl .is-drilldown .menu > li.is-submenu-item > a.selected span::after { content: ""; display: block; border-bottom: 1px solid #000; position: absolute; bottom: -3px; width: 100%; left: 0; } .tptpl .is-drilldown .menu > li.is-submenu-item > a.list-heading { font-weight: 500; padding: 20px; } .tptpl .is-drilldown .menu > li.is-submenu-parent-item { position: absolute; top: 0; left: 50px; font-size: 16px; line-height: 1; text-transform: uppercase; font-weight: 500; width: calc(100% - 100px); text-align: center; padding: 0; } .tptpl .is-drilldown .menu > li.is-submenu-parent-item > a { padding: 24px 0 25px; font-size: 16px; line-height: 1; text-transform: uppercase; font-weight: 500; } .tptpl .js-drilldown-back > a { padding: 22px !important; } .tptpl .js-drilldown-back > a::before { border: none; background: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456") left center no-repeat; width: 33px; height: 22px; transform: rotate(180deg); margin: 0; } .tptpl .dimmer { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 5; width: 100%; height: 0; opacity: 0; top: 0; overflow: hidden; transition: opacity 0.25s ease-in-out, height 0s linear 0.25s; } .tptpl .mobile-faqs-filters-on .dimmer, .tptpl .mobile-job-search-filters-on .dimmer, .tptpl .mobile-main-nav-on .dimmer, .tptpl .mobile-map-filters-on .dimmer, .tptpl .mobile-post-filters-on .dimmer, .tptpl .mobile-story-filters-on .dimmer { height: 100%; opacity: 1; transition: opacity 0.25s ease-in-out; } .tptpl .mobile-main-nav-close { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; background: 0 0; } .tptpl .mobile-main-nav-close::after, .tptpl .mobile-main-nav-close::before { content: ""; border-top: 1px solid #fff; top: 10px; position: absolute; transform: rotate(-45deg); height: 2px; left: -4px; width: 28px; } .tptpl .mobile-main-nav-close::after { transform: rotate(45deg); left: -5px; } .tptpl .is-drilldown .mobile-country-menu-button { position: absolute; width: 100%; bottom: 12px; } .tptpl .is-drilldown .mobile-country-menu-button span.country { border: 1px solid #000; padding: 6px 5px; font-size: 13px; margin: -5px 9px 0 0; float: left; } .tptpl .is-drilldown .mobile-country-menu-button a::after { content: ""; position: absolute; display: block; border: none; background: url("https://apply.superdry.com/app/tpl/asset/59a470bcacd02fbc4d4dd68b554880d2d6897e834c5156429285e5b7367a1a8b") center no-repeat; width: 16px; height: 16px; border-radius: 20px; margin: 0; top: calc(50% - 11px); right: 20px; background-size: 16px; transition: transform 0.25s ease-in-out; } .tptpl .mobile-country-menu-on .is-drilldown .mobile-country-menu-button a::after { transform: rotate(45deg); } .tptpl .mobile-country-menu { position: fixed; z-index: 5; background: #fff; width: calc(100% - 58px); bottom: 86px; height: 0; overflow-y: scroll; left: calc(-100% + 58px); transition: all 0.25s ease-in-out; } .tptpl .mobile-main-nav-on .mobile-country-menu { left: 0; } .tptpl .mobile-country-menu-on .mobile-country-menu { height: calc(100% - 85px); } .tptpl .mobile-country-menu ul { margin: 0; list-style: none; padding: 12px 19px 19px; } .tptpl .mobile-country-menu li { padding: 10px 0; } .tptpl .mobile-country-menu a { position: relative; text-transform: uppercase; font-weight: 500; display: block; } .tptpl .mobile-country-menu a.selected { font-weight: 700; } .tptpl .mobile-country-menu a.selected::after { content: ""; background: transparent url("https://apply.superdry.com/app/tpl/asset/92c88cf594228603328a2b640ea262fc266dc7a901cc5f2a9472b1452bf97b3c") 0 0 no-repeat; width: 20px; height: 20px; display: block; position: absolute; top: 0; right: 0; } .tptpl .desktop-header-country-menu-button { display: none; } @media screen and (min-width: 1120px) { .tptpl .mobile-country-menu { display: none; } .tptpl .header .mobile-main-nav a, .tptpl .is-drilldown, .tptpl .menu.mobile-only, .tptpl .mobile-header-country-menu-button { display: none !important; } .tptpl .desktop-header-country-menu-button { display: block; position: relative; float: right; margin: 4px 10px 4px 40px; } } .tptpl .mobile-job-search-bar { position: fixed; z-index: 4; left: 0; bottom: 0; width: 100%; height: 60px; background: #fff; } .tptpl .mobile-job-search-bar a { font-size: 24px; line-height: 1; display: block; padding: 18px 20px; position: relative; } .tptpl .mobile-job-search-bar a::after { content: ""; background: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456") center no-repeat; right: 16px; position: absolute; width: 40px; height: 22px; top: calc(50% - 11px); } .tptpl .mobile-faqs-filters, .tptpl .mobile-job-search-filters, .tptpl .mobile-map-filters, .tptpl .mobile-post-filters, .tptpl .mobile-story-filters { position: fixed; z-index: 10; top: 0; right: 0; width: 0; height: 100%; background: #fff; padding: 20px 0; transform: translateX(100%); transition: transform 0.25s ease-in-out, width 0.25s ease-in-out, padding 0.25s ease-in-out; max-height: calc(100vh); overflow-x: hidden; overflow-y: scroll; } .tptpl .mobile-faqs-filters-on .mobile-faqs-filters, .tptpl .mobile-job-search-filters-on .mobile-job-search-filters, .tptpl .mobile-map-filters-on .mobile-map-filters, .tptpl .mobile-post-filters-on .mobile-post-filters, .tptpl .mobile-story-filters-on .mobile-story-filters { transform: translateX(0); width: calc(100% - 58px); padding: 20px; } .tptpl .mobile-faqs-filters-on .mobile-main-nav-close, .tptpl .mobile-job-search-filters-on .mobile-main-nav-close, .tptpl .mobile-map-filters-on .mobile-main-nav-close, .tptpl .mobile-post-filters-on .mobile-main-nav-close, .tptpl .mobile-story-filters-on .mobile-main-nav-close { right: 0; left: 20px; } .tptpl .mobile-faqs-filters form, .tptpl .mobile-job-search-filters form, .tptpl .mobile-map-filters form, .tptpl .mobile-post-filters form, .tptpl .mobile-story-filters form { margin: 25px 0; } .tptpl .mobile-faqs-filters h2, .tptpl .mobile-job-search-filters h2, .tptpl .mobile-map-filters h2, .tptpl .mobile-post-filters h2, .tptpl .mobile-story-filters h2 { font-size: 16px; font-weight: 500; line-height: 1.5; text-transform: uppercase; text-align: center; } .tptpl .mobile-faqs-filters ul, .tptpl .mobile-job-search-filters ul, .tptpl .mobile-map-filters ul, .tptpl .mobile-post-filters ul, .tptpl .mobile-story-filters ul { margin: 0 0 10px; } .tptpl .mobile-faqs-filters .accordion-title, .tptpl .mobile-job-search-filters .accordion-title, .tptpl .mobile-map-filters .accordion-title, .tptpl .mobile-post-filters .accordion-title, .tptpl .mobile-story-filters .accordion-title { font-size: 16px; font-weight: 500; text-transform: uppercase; line-height: 1; padding: 16px 0; border: none; } .tptpl .accordion-title.only-item { display: none; } .tptpl .mobile-faqs-filters :last-child:not(.is-active) > .accordion-title, .tptpl .mobile-faqs-filters :last-child > .accordion-content:last-child, .tptpl .mobile-job-search-filters :last-child:not(.is-active) > .accordion-title, .tptpl .mobile-job-search-filters :last-child > .accordion-content:last-child, .tptpl .mobile-map-filters :last-child:not(.is-active) > .accordion-title, .tptpl .mobile-map-filters :last-child > .accordion-content:last-child, .tptpl .mobile-post-filters :last-child:not(.is-active) > .accordion-title, .tptpl .mobile-post-filters :last-child > .accordion-content:last-child, .tptpl .mobile-story-filters :last-child:not(.is-active) > .accordion-title, .tptpl .mobile-story-filters :last-child > .accordion-content:last-child { border: none; } .tptpl .mobile-job-search-filters .accordion-title::before { content: ""; background: #fff url("https://apply.superdry.com/app/tpl/asset/59a470bcacd02fbc4d4dd68b554880d2d6897e834c5156429285e5b7367a1a8b") center no-repeat; background-size: 15px; border: 1px solid #000; border-radius: 20px; width: 15px; height: 15px; text-align: center; margin: 0; font-size: 15px; line-height: 0.7; top: calc(50% - 8px); left: auto; right: 0; transition: all 0s ease-out; } .tptpl .mobile-job-search-filters .is-active > .accordion-title::before { background-image: url("https://apply.superdry.com/app/tpl/asset/5ff9330bb2d04f6fce13e5d1325720de4635fc5bf52381a9ef63d6e6320cf172"); } .tptpl .mobile-faqs-filters .accordion-title::before, .tptpl .mobile-map-filters .accordion-title::before, .tptpl .mobile-post-filters .accordion-title::before, .tptpl .mobile-story-filters .accordion-title::before { content: ""; background: #fff center no-repeat; background-size: 15px; width: 15px; height: 15px; text-align: center; margin: 0; font-size: 15px; line-height: 0.7; top: calc(50% - 8px); left: auto; right: 0; transition: all 0.25s ease-out; } .tptpl .mobile-faqs-filters .is-active > .accordion-title::before, .tptpl .mobile-map-filters .is-active > .accordion-title::before, .tptpl .mobile-post-filters .is-active > .accordion-title::before, .tptpl .mobile-story-filters .is-active > .accordion-title::before { background-image: url("https://apply.superdry.com/app/tpl/asset/92c88cf594228603328a2b640ea262fc266dc7a901cc5f2a9472b1452bf97b3c"); } .tptpl .mobile-faqs-filters .accordion-title:focus, .tptpl .mobile-faqs-filters .accordion-title:hover, .tptpl .mobile-job-search-filters .accordion-title:focus, .tptpl .mobile-job-search-filters .accordion-title:hover, .tptpl .mobile-map-filters .accordion-title:focus, .tptpl .mobile-map-filters .accordion-title:hover, .tptpl .mobile-post-filters .accordion-title:focus, .tptpl .mobile-post-filters .accordion-title:hover, .tptpl .mobile-story-filters .accordion-title:focus, .tptpl .mobile-story-filters .accordion-title:hover { background: #fff; } .tptpl .mobile-faqs-filters .accordion-content, .tptpl .mobile-job-search-filters .accordion-content, .tptpl .mobile-map-filters .accordion-content, .tptpl .mobile-post-filters .accordion-content, .tptpl .mobile-story-filters .accordion-content { border: none; padding: 0 20px 10px; } .tptpl .accordion-content.empty { padding: 0 !important; height: 0 !important; } .tptpl .mobile-faqs-filters .accordion-content .cc, .tptpl .mobile-job-search-filters .accordion-content .cc, .tptpl .mobile-map-filters .accordion-content .cc, .tptpl .mobile-post-filters .accordion-content .cc, .tptpl .mobile-story-filters .accordion-content .cc { padding: 11px 20px 11px 0; } .tptpl .mobile-faqs-filters .accordion-content .cc .checkmark, .tptpl .mobile-job-search-filters .accordion-content .cc .checkmark, .tptpl .mobile-map-filters .accordion-content .cc .checkmark, .tptpl .mobile-post-filters .accordion-content .cc .checkmark, .tptpl .mobile-story-filters .accordion-content .cc .checkmark { top: 10px; right: 0; height: 16px; width: 16px; border: none; } .tptpl .mobile-faqs-filters .accordion-content .cc input:checked + span, .tptpl .mobile-job-search-filters .accordion-content .cc input:checked + span, .tptpl .mobile-map-filters .accordion-content .cc input:checked + span, .tptpl .mobile-post-filters .accordion-content .cc input:checked + span, .tptpl .mobile-story-filters .accordion-content .cc input:checked + span { font-weight: 500; } .tptpl .mobile-faqs-filters .accordion-content .cc input:checked ~ .checkmark, .tptpl .mobile-job-search-filters .accordion-content .cc input:checked ~ .checkmark, .tptpl .mobile-map-filters .accordion-content .cc input:checked ~ .checkmark, .tptpl .mobile-post-filters .accordion-content .cc input:checked ~ .checkmark, .tptpl .mobile-story-filters .accordion-content .cc input:checked ~ .checkmark { background: url("https://apply.superdry.com/app/tpl/asset/92c88cf594228603328a2b640ea262fc266dc7a901cc5f2a9472b1452bf97b3c") center -3px no-repeat; background-size: 16px; } .tptpl .mobile-job-search-filters input[type="search"] { margin: 0 0 40px; } .tptpl .mobile-faqs-filters-button, .tptpl .mobile-job-search-button-in-page, .tptpl .mobile-map-filters-button, .tptpl .mobile-post-filters-button, .tptpl .mobile-story-filters-button { border-top: 1px solid #000; border-bottom: 1px solid #000; display: block; text-align: center; margin: -9px 20px 40px; text-transform: uppercase; font-weight: 500; font-size: 13px; padding: 14px 20px; } .tptpl .main-content .mobile-faqs-filters-button, .tptpl .main-content .mobile-job-search-button-in-page, .tptpl .main-content .mobile-map-filters-button, .tptpl .main-content .mobile-post-filters-button, .tptpl .main-content .mobile-story-filters-button { margin: 30px 0; } .tptpl .mobile-faqs-filters-button span, .tptpl .mobile-job-search-button-in-page span, .tptpl .mobile-map-filters-button span, .tptpl .mobile-post-filters-button span, .tptpl .mobile-story-filters-button span { position: relative; padding: 0 0 0 25px; } .tptpl .mobile-faqs-filters-button span::before, .tptpl .mobile-job-search-button-in-page span::before, .tptpl .mobile-map-filters-button span::before, .tptpl .mobile-post-filters-button span::before, .tptpl .mobile-story-filters-button span::before { content: ""; position: absolute; display: block; border: none; background: url("https://apply.superdry.com/app/tpl/asset/59a470bcacd02fbc4d4dd68b554880d2d6897e834c5156429285e5b7367a1a8b") center no-repeat; background-size: 16px; width: 16px; height: 16px; border-radius: 20px; margin: 0; top: calc(50% - 8px); left: 0; transition: transform 0.25s ease-in-out; } @media screen and (min-width: 1024px) { .tptpl .mobile-faqs-filters-button, .tptpl .mobile-job-search-button-in-page, .tptpl .mobile-map-filters-button, .tptpl .mobile-post-filters-button, .tptpl .mobile-story-filters-button { display: none; } } @media screen and (min-width: 1120px) { .tptpl .mobile-faqs-filters, .tptpl .mobile-job-search-bar, .tptpl .mobile-job-search-filters, .tptpl .mobile-map-filters, .tptpl .mobile-post-filters, .tptpl .mobile-story-filters { display: none; } } .tptpl .desktop-job-search-bar { display: none; position: fixed; bottom: 0; width: 100%; height: 96px; background: #fff; z-index: 3; } @media screen and (min-width: 1120px) { .tptpl .desktop-job-search-bar { display: block; } .tptpl .keyboard-control .desktop-job-search-bar { position: relative; } } .tptpl .desktop-job-search-bar .container { margin: 0 auto; width: 100%; max-width: 1400px; } .tptpl .desktop-job-search-bar .title { float: left; width: 180px; padding: 36px 0 36px 20px; } .tptpl .desktop-job-search-bar .title p { font-size: 24px; line-height: 1; margin: 0; } .tptpl .desktop-job-search-bar form { float: left; width: calc(100% - 180px); height: 96px; text-align: center; } .tptpl .desktop-job-search-bar input[type="submit"] { float: right; font-size: 0; width: 74px; height: 96px; background: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456") 20px center no-repeat; background-size: 34px; transition: background-position 0.25s ease-in-out; } .tptpl .desktop-job-search-bar input[type="submit"]:hover { background-position: 30px center; } .tptpl .desktop-job-search-bar .select-container { width: calc(100% - 74px); height: 96px; display: inline-block; margin: 0 auto; text-align: left; } .tptpl .desktop-job-search-bar .columns { width: calc(20% - 5px); float: none !important; display: inline-block; vertical-align: top; } .tptpl .desktop-job-search-bar input[type="search"], .tptpl .desktop-job-search-bar input[type="text"] { margin: 10px 20px 0; width: calc(100% - 40px); height: 53px; } .tptpl .desktop-job-search-bar ::placeholder, .tptpl .job-search-container ::placeholder { color: #000; opacity: 1; } .tptpl .desktop-job-search-bar :disabled::placeholder, .tptpl .job-search-container :disabled::placeholder { color: #adadad; opacity: 1; } .tptpl .custom-select, .tptpl .custom-select-no-dim { position: relative; display: inline-block; vertical-align: top; width: 100%; margin: 0 0 24px; } .tptpl .custom-select label, .tptpl .custom-select-no-dim label, .tptpl .custom-select select, .tptpl .custom-select-no-dim select { display: none; } @media screen and (min-width: 1120px) { .tptpl .keyboard-control .custom-select label, .tptpl .keyboard-control .custom-select-no-dim label, .tptpl .keyboard-control .custom-select select, .tptpl .keyboard-control .custom-select-no-dim select { display: block; width: calc(100% - 5px); } .tptpl .keyboard-control .select-selected { display: none; } .tptpl .keyboard-control .custom-select label, .tptpl .keyboard-control .custom-select-no-dim label { font-size: 0; } .tptpl .keyboard-control .custom-select select, .tptpl .keyboard-control .custom-select-no-dim select { width: calc(100% - 35px); font-size: 13px; text-transform: uppercase; margin: 11px 20px; padding: 2px 0 0; height: 52px; background: url("https://apply.superdry.com/app/tpl/asset/799a72eda4f52e54fa89c4c17e5fe668fb019f0b94354987c75ca8c17321c8f1") 0 0 no-repeat; background-position: right center; border: none; border-bottom: 1px solid #000; border-radius: 0; } .tptpl .keyboard-control .custom-select select:disabled, .tptpl .keyboard-control .custom-select-no-dim select:disabled { color: #aaa; } } .tptpl .select-selected { display: block; margin: 11px 20px; padding: 20px 15px 18px 0; cursor: pointer; user-select: none; font-size: 13px; font-weight: 400; line-height: 1; text-align: left; background: #fff; text-transform: uppercase; border-bottom: 1px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tptpl .select-selected::after { position: absolute; content: ""; top: 34px; right: 20px; width: 11px; height: 10px; background: url("https://apply.superdry.com/app/tpl/asset/799a72eda4f52e54fa89c4c17e5fe668fb019f0b94354987c75ca8c17321c8f1") 0 0 no-repeat; transition: all 0s ease-out; } .tptpl .select-selected.select-arrow-active::after { transform: rotate(180deg); top: 30px; } .tptpl .select-items { position: absolute; color: #000; background-color: #fff; bottom: 100%; left: 0; right: 0; z-index: 2; text-align: left; padding: 20px 0 5px; } .tptpl .desktop-job-search-bar .select-items { background-color: rgba(255, 255, 255, 0.95); max-height: calc(100vh - 96px); overflow-y: scroll; } .tptpl .wide-01 .select-items { right: -160px; } .tptpl .select-items div { display: block; color: #000; padding: 0 40px 0 20px; cursor: pointer; user-select: none; margin: 0 0 15px; font-size: 13px; font-weight: 400; line-height: 1.3; text-transform: none; position: relative; } .tptpl .fancy-select-disabled { cursor: not-allowed; color: #aaa; } .tptpl .select-selected.fancy-select-disabled::after { cursor: not-allowed; } .tptpl .select-items { top: 100%; bottom: auto; } .tptpl .desktop-job-search-bar .select-items { top: auto; bottom: 100%; } .tptpl .select-hide { display: none; } .tptpl .same-as-selected, .tptpl .select-items div:hover { color: #000; background-color: transparent; } .tptpl .select-items div.same-as-selected { font-weight: 700; } .tptpl .select-items div.same-as-selected::after { content: ""; position: absolute; right: 13px; width: 20px; height: 16px; background: url("https://apply.superdry.com/app/tpl/asset/92c88cf594228603328a2b640ea262fc266dc7a901cc5f2a9472b1452bf97b3c") 0 0 no-repeat; top: -4px; } .tptpl .desktop-job-search-bar .select-selected::before { content: ""; position: fixed; background: rgba(0, 0, 0, 0.5); top: calc(100% - 96px); left: 0; right: 0; bottom: 96px; z-index: -1; cursor: default; opacity: 0; transition: opacity 0.25s ease-in-out, top 0s ease-in-out 0.25s; } .tptpl .desktop-job-search-bar .select-selected.select-arrow-active::before { top: 0; opacity: 1; transition: opacity 0.25s ease-in-out; } .tptpl .desktop-job-search-bar .select-items:focus {} .tptpl .cc { display: block; position: relative; padding: 4px 18px 7px 28px; margin: 0; cursor: pointer; font-size: 13px; line-height: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: top; } .tptpl .cc input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; margin: 0; } .tptpl .cc .checkmark { position: absolute; top: 3px; right: 0; height: 16px; width: 16px; background: #fff; border: 1px solid #132c3f; } .tptpl .cc input:checked ~ .checkmark { background: #dc358b url("https://apply.superdry.com/app/tpl/asset/92c88cf594228603328a2b640ea262fc266dc7a901cc5f2a9472b1452bf97b3c") center 2px no-repeat; background-size: 12px; } .tptpl .cc .checkmark:after { content: ""; position: absolute; display: none; } .tptpl .cc input:checked ~ .checkmark:after { display: block; } .tptpl h1 { font-family: "itc-fenice", serif; font-size: 40px; font-weight: 400; line-height: 1; margin: 0 0 17px; } .tptpl h2 { font-family: "itc-fenice", serif; font-size: 30px; line-height: 1; font-weight: 400; margin: 0 0 19px; } .tptpl h3 { font-family: "itc-fenice", serif; font-size: 24px; line-height: 1; font-weight: 400; margin: 0 0 19px; } .tptpl h4 { font-family: "itc-fenice", serif; font-size: 18px; line-height: 1; font-weight: 400; margin: 0 0 19px; } .tptpl h5 { font-family: "itc-fenice", serif; font-size: 13px; line-height: 1; font-weight: 500; text-transform: uppercase; margin: 0 0 18px; } .tptpl h1 br, .tptpl h2 br, .tptpl h3 br, .tptpl h4 br, .tptpl h5 br { display: none; } .tptpl p { font-size: 13px; line-height: 20px; font-weight: 300; margin: 0 0 21px; } .tptpl #jobIndexNoJobsMessage p a, .tptpl .main-content ol a, .tptpl .main-content ol b, .tptpl .main-content ol strong, .tptpl .main-content p a, .tptpl .main-content p b, .tptpl .main-content p strong, .tptpl .main-content ul a, .tptpl .main-content ul b, .tptpl .main-content ul strong { position: relative; font-weight: 600; } .tptpl #jobIndexNoJobsMessage p a:after, .tptpl .main-content ol a:after, .tptpl .main-content p a:after, .tptpl .main-content ul a:after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl #jobIndexNoJobsMessage p a:hover:after, .tptpl .main-content ol a:hover:after, .tptpl .main-content p a:hover:after, .tptpl .main-content ul a:hover:after { border-color: #000; } .tptpl .job-details { font-size: 24px; line-height: 30px; font-weight: 300; margin: 0 0 40px; } .tptpl .job-details span { font-weight: 400; } .tptpl .main-content dl, .tptpl .main-content ol, .tptpl .main-content ul { list-style-type: disc; margin: 0 0 30px 25px; font-size: 13px; line-height: 21px; font-weight: 300; } .tptpl .main-content li { padding-left: 12px; } .tptpl ul.colour-bullets { color: #adadad; } .tptpl ul.colour-bullets span { color: #000; } .tptpl a.underline { border-bottom: 1px solid #000; transition: border-color 0.25s ease-in-out; } .tptpl a.underline:after { display: none; } .tptpl a.underline:hover { border-color: transparent; } .tptpl a.cta, .tptpl span.cta { font-size: 13px; line-height: 1; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid transparent; transition: all 0.25s ease-in-out; } .tptpl a.cta:hover, .tptpl a:hover span.cta { border-color: #000; } .tptpl .main-content { padding: 0 38px 30px; } .tptpl .main-content.top { padding-top: 30px; } .tptpl .main-content .button { margin-top: 20px; } @media screen and (min-width: 1024px) { .tptpl .main-content { max-width: 860px; margin: 0 auto; padding: 0 38px 75px; } .tptpl .main-content.top { padding-top: 75px; min-height: calc(100vh - 250px); } .tptpl .main-content .button { margin-top: 28px; } .tptpl h1 br, .tptpl h2 br, .tptpl h3 br, .tptpl h4 br, .tptpl h5 br { display: block; } } @media screen and (min-width: 1440px) { .tptpl .main-content.top { min-height: calc(100vh - 286px); } } .tptpl .top-banner { display: table; table-layout: fixed; width: 100%; margin: 0 0 50px; padding: 0 0 40px; background-image: none !important; background-color: #060d29; background-repeat: no-repeat; background-position: center; background-size: cover; } .tptpl body.home .top-banner { padding-top: 50px; } @media screen and (min-width: 1120px) { .tptpl body.keyboard-control .top-banner { margin-top: 40px; transition: margin 0.25s ease-in-out; } .tptpl body.home.keyboard-control .top-banner { margin-top: 135px; } } .tptpl .top-banner .image-container { width: 100%; margin: 0 0 30px; max-height: 494px; overflow: hidden; } .tptpl .top-banner .image-container img { width: 100%; max-width: inherit; object-position: center; object-fit: cover; max-height: 494px; } .tptpl .top-banner.sustainability .image-container { width: calc(100% - 78px); margin: 0; } .tptpl .top-banner .text-container { margin: 0; width: 100%; padding: 0 38px; overflow: hidden; } .tptpl body.home .top-banner .text-container {} .tptpl .top-banner .text-container br { display: none; } .tptpl .top-banner .text-container h1 { color: #f0f0f0; } .tptpl .top-banner .text-container p.subtitle { font-size: 21px; line-height: 1.3; color: #fff; margin: 0; font-weight: 400; } .tptpl .top-banner .text-container p.subtitle a { transition: all 0.25s ease-in-out; color: #fff; text-decoration: underline; } .tptpl .top-banner .text-container p.subtitle a:hover { text-decoration-color: transparent; } .tptpl .top-banner .call-to-action-container { padding: 28px 20px 0; } @media screen and (min-width: 1025px) { .tptpl .top-banner { margin: 0 0 100px; padding: 0 25px; } .tptpl body.home .top-banner { padding-top: 0; } .tptpl .top-banner .outer-container { position: relative; display: table; width: 100%; max-width: 1200px; margin: 0 auto; } .tptpl .top-banner .text-container { display: flex; align-items: center; margin: 0; padding: 0; position: absolute; top: 0; height: 100%; } .tptpl body.home .top-banner .text-container { margin: 0; } .tptpl .top-banner .text-container br { display: block; } .tptpl .top-banner .text-container-2 { width: 43%; padding: 12px 0 0; } .tptpl .top-banner .image-container, .tptpl .top-banner.sustainability .image-container { display: table; width: 100%; min-height: 500px; max-height: inherit; margin: 40px auto; } .tptpl body.home .top-banner .image-container { margin: 145px auto 85px; } .tptpl .top-banner.sustainability { background-image: url("https://apply.superdry.com/app/tpl/asset/8475ded972984056eb9032a9213312e948c303cac4e1a2a608d016ee3bf0c4b0"); } .tptpl .top-banner .image-container img.large { display: block; float: right; width: 57%; max-width: 684px; } .tptpl body.home .top-banner .image-container img.large { max-width: 787px; } .tptpl .top-banner .text-container h1 { font-size: 50px; line-height: 1; margin: 0 15px 35px 10px; } .tptpl .top-banner .text-container p.subtitle { max-width: 450px; } .tptpl .top-banner .call-to-action-container { padding: 0 15px 61px; position: absolute; bottom: 0; } } @media screen and (min-width: 1280px) { .tptpl .top-banner .text-container h1 { font-size: 60px; } } @media screen and (min-width: 1440px) { .tptpl .top-banner .text-container h1 { font-size: 65px; } } .tptpl .video-container { display: table; width: 100%; margin: 0 0 50px; } .tptpl .slideshow-container h2, .tptpl .video-container h2 { padding: 0 38px 20px; } .tptpl .videoWrapper { position: relative; width: 100%; height: 0; background-color: #000; } .tptpl .videoWrapper43 { padding-top: 75%; } .tptpl .videoWrapper169 { padding-top: 56%; } .tptpl .videoIframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: transparent; } .tptpl .videoPoster { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; border: 0; background-image: url("https://apply.superdry.com/app/tpl/asset/2bef2cb9cbd5a1805a1de1d38d001d53abc33afb15e590690d74fb7aa8007fe5"); background-position: 50% 50%; background-size: 100% 100%; background-size: cover; text-indent: -999em; overflow: hidden; opacity: 1; transition: opacity 0.8s, height 0s; transition-delay: 0s, 0s; } .tptpl .videoPoster::before { content: ""; position: absolute; top: calc(50% - 30px); left: calc(50% - 25px); width: 50px; height: 60px; background: transparent url("https://apply.superdry.com/app/tpl/asset/61b06bd0d6b35ca1b9a3fc0ba851248dd38a9d9a2ae1376a750257ef90dce274") center no-repeat; background-size: contain; } .tptpl .videoWrapperActive .videoPoster { opacity: 0; height: 0; transition-delay: 0s, 0.8s; } @media screen and (min-width: 1024px) { .tptpl .slideshow-container h2, .tptpl .video-container h2 { padding: 0 38px 20px; margin: 0 auto 30px; max-width: 860px; } .tptpl .video-container { margin: 0 auto 100px; max-width: 1024px; } .tptpl .videoPoster::before { top: calc(50% - 80px); left: calc(50% - 75px); width: 150px; height: 160px; } } @media screen and (min-width: 1120px) { .tptpl .video-container { max-width: 994px; } } .tptpl .location-panel { height: 0; overflow: hidden; opacity: 0; transition: opacity 0.25s ease-in-out 0s, height 0s linear 0.25s; } .tptpl .location-panel.unhide { height: 100%; overflow: auto; opacity: 1; transition: opacity 0.25s ease-in-out 0.25s, height 0s linear 0s; } .tptpl .map-container { margin: 0 auto; max-width: 1200px; } .tptpl .map-container-2 { position: relative; } .tptpl #map { width: 100%; height: 600px; } .tptpl .map-container .reset-map { width: 100%; display: block; padding: 36px 38px 25px; } .tptpl .map-container .overlay { display: flex; position: absolute; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.15); z-index: 1; height: 0; overflow: hidden; opacity: 0; transition: opacity 0.25s ease-in-out 0s, height 0s linear 0.25s; } .tptpl .map-container .overlay.unhide { height: 100%; opacity: 1; transition: opacity 0.25s ease-in-out 0.25s, height 0s linear 0s; } .tptpl .map-container .overlay .overlay-panel { display: inline-flex; flex-direction: column; align-self: center; background: #fff; max-height: 600px; overflow-y: scroll; position: relative; padding: 36px 38px 25px; width: 100%; max-width: 338px; transform: translateX(-100%); transition: transform 0.25s ease-in-out 0s; } .tptpl .map-container .overlay.unhide .overlay-panel { transform: translateX(0); transition: transform 0.25s ease-in-out 0.25s; } .tptpl .map-container .overlay .overlay-panel address { font-size: 13px; line-height: 20px; font-style: normal; margin: 0 0 40px; } .tptpl .map-container .overlay .overlay-panel h3 + address { margin-top: -10px; } .tptpl .map-container .overlay .overlay-panel ul { margin: 0 0 10px; list-style: none; } .tptpl .map-container .overlay .overlay-panel .button { margin: 0 0 21px; line-height: 1.2; } .tptpl .map-container .overlay .overlay-panel ul.extra-links { margin: 0; } .tptpl .map-container .overlay .overlay-panel ul.extra-links li { font-size: 13px; line-height: 1.2; margin: 0 0 25px; } .tptpl .map-container .close { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; background: 0 0; } .tptpl .map-container .close::after, .tptpl .map-container .close::before { content: ""; border-top: 1px solid #000; top: 10px; position: absolute; transform: rotate(-45deg); height: 2px; left: -4px; width: 28px; } .tptpl .map-container .close::after { transform: rotate(45deg); left: -5px; } @media screen and (min-width: 1024px) { .tptpl .map-container { padding-top: 12px; } .tptpl .map-container .overlay .overlay-panel { max-width: 375px; padding: 36px 15px 25px 22px; overflow-y: auto; } .tptpl .map-container .reset-map { padding-top: 50px; padding-bottom: 77px; } } @media screen and (min-width: 1280px) { .tptpl .map-container .reset-map { padding-left: 0; padding-right: 0; } } .tptpl .slideshow-container { width: 100%; margin: 0 0 50px; } .tptpl .featured-jobs-slider-container { width: 100%; margin: 0; background: #ffeed9; } .tptpl .featured-jobs-slider-container h2 { padding: 40px 38px 21px; } .tptpl .employee-stories-slider-container { width: 100%; margin: 0 0 25px; } .tptpl .employee-stories-slider-container h2 { padding: 0 38px 20px; text-align: center; } .tptpl .employee-stories-slider-container h2.mbm { margin: 0 0 30px; } .tptpl .nbm { margin-bottom: 0 !important; } @media screen and (max-width: 1023px) { .tptpl .nbm .employee-stories-slider-container { margin-bottom: 0 !important; } } @media screen and (min-width: 1024px) { .tptpl .employee-stories-slider-container h2.mbm { margin: 0 0 80px; } .tptpl .featured-jobs-slider-container h2 { padding: 80px 38px 21px; margin: 0 auto 30px; max-width: 1070px; } } @media screen and (max-width: 1023px) { .tptpl .featured-jobs-slider-container.nbm-m { margin-bottom: 0; } } .tptpl .slider.slick-initialized { visibility: visible !important; } .tptpl .slider { width: auto; margin: 0; } .tptpl .slider.employee-stories, .tptpl .slider.featured-jobs, .tptpl .slider.slideshow { clear: both; } .tptpl .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: pan-y; } .tptpl .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .tptpl .slick-list:focus {} .tptpl .slick-list.dragging { cursor: pointer; } .tptpl .slick-slider .slick-list, .tptpl .slick-slider .slick-track { transform: translate3d(0, 0, 0); } .tptpl .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .tptpl .slick-track:after, .tptpl .slick-track:before { display: table; content: ""; } .tptpl .slick-track:after { clear: both; } .tptpl .slick-loading .slick-track { visibility: hidden; } .tptpl .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } .tptpl .slick-slide img { display: block; } .tptpl .slick-slide.slick-loading img { display: none; } .tptpl .slick-slide.dragging img {} .tptpl .slick-initialized .slick-slide { display: block; } .tptpl .slick-loading .slick-slide { visibility: hidden; } .tptpl .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .tptpl .slick-arrow.slick-hidden { display: none; } .tptpl .slick-loading .slick-list { background: #fff center center no-repeat; } .tptpl .slick-next, .tptpl .slick-prev { font-size: 0; line-height: 0; position: absolute; top: 0; display: block; width: 40px; height: 73vw; padding: 0; cursor: pointer; color: transparent; border: none; z-index: 1; transition: transform 0.25s ease-in-out; } .tptpl .slick-next:focus, .tptpl .slick-next:hover, .tptpl .slick-prev:focus, .tptpl .slick-prev:hover { color: transparent; background: 0 0; } .tptpl .slick-prev:hover { transform: translate(-10px); } .tptpl .slick-next:hover { transform: translate(10px); } .tptpl .slick-next.slick-disabled:before, .tptpl .slick-prev.slick-disabled:before { opacity: 0.25; } .tptpl .slick-prev { left: 16px; } .tptpl .slick-next { right: 16px; } .tptpl .slick-next:before, .tptpl .slick-prev:before { content: ""; display: block; width: 40px; height: 22px; background: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456") 7px 0 no-repeat; background-size: 32px; transform: rotate(180deg); } .tptpl .employee-stories .slick-next:before, .tptpl .employee-stories .slick-prev:before, .tptpl .slideshow .slick-next:before, .tptpl .slideshow .slick-prev:before { background-image: url("https://apply.superdry.com/app/tpl/asset/e3a040bfb59d7daaedd9ef016ae0988433041e0a4783480b9969966332831a50"); } .tptpl .slick-next:before { transform: rotate(0); } .tptpl .slick-dots { position: absolute; left: calc(50% - 120px); top: calc(73vw - 42px); display: table; width: 240px; padding: 0; margin: 0; list-style: none; text-align: center; } .tptpl .slick-dots li { position: relative; display: table-cell; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .tptpl .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 100%; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; } .tptpl .slick-dots li button:focus, .tptpl .slick-dots li button:hover {} .tptpl .slick-dots li button::before { position: absolute; top: 10px; left: 4px; right: 4px; width: calc(100% - 8px); height: 1px; content: ""; background: rgba(0, 0, 0, 0.75); transition: all 0.2s ease-out; } .tptpl .slick-dots li.slick-active button:before { background: #000; height: 3px; top: 9px; } .tptpl .slideshow .slick-dots li button::before { background: rgba(255, 255, 255, 0.75); } .tptpl .slideshow .slick-dots li.slick-active button:before { background: #fff; } .tptpl .slideshow .text-container { padding: 30px 38px 0; } .tptpl .slideshow .text-container p:last-of-type { margin-bottom: 0; } .tptpl .featured-jobs .slick-slide { padding: 0 38px; } .tptpl .featured-jobs .slick-slide h3 { margin: 0 0 9px; } .tptpl .featured-jobs .slick-slide h3 span { border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl .featured-jobs .slick-slide p { margin: 0 0 17px; } .tptpl .featured-jobs .slick-slide .job, .tptpl .featured-jobs .slick-slide .no-job { display: block; margin: 0 0 30px; } .tptpl .featured-jobs .slick-slide .job:hover h3 span, .tptpl .featured-jobs .slick-slide .job:hover span.cta { border-bottom: 1px solid #000; } .tptpl .featured-jobs .slick-slide .no-job p a { border-bottom: 1px solid #000; transition: border 0.25s ease-in-out; } .tptpl .featured-jobs .slick-slide .no-job p a:hover { border-color: transparent; } .tptpl .featured-jobs-slider-container .button-container { padding: 13px 38px 27px; } .tptpl .employee-stories .text-container { padding: 22px 38px 0; } .tptpl .employee-stories .text-container h3 { margin: 0 0 11px; } .tptpl .employee-stories .text-container p { padding-bottom: 20px; margin: 0; } .tptpl .employee-stories .text-container p.title { font-family: "itc-fenice", serif; font-size: 40px; font-weight: 400; line-height: 28px; text-transform: uppercase; margin: 0 0 31px; padding: 0; } .tptpl .employee-stories.more-text .text-container h3 { margin: 0 0 24px; } .tptpl .employee-stories.more-text .text-container p.title { font-size: 70px; line-height: 48px; margin: 13px 0 28px; padding: 0; } .tptpl .employee-stories.non-slick.more-text .text-container p.title br { display: none; } .tptpl .employee-stories.non-slick.more-text .text-container ul { list-style: none; font-size: 24px; line-height: 30px; margin: 0 0 48px; } .tptpl .employee-stories.more-text .text-container .button { margin: 10px 0 25px; } .tptpl .employee-stories.more-text .text-container p:last-of-type { padding-bottom: 0; } .tptpl .wrapper.grey .employee-stories.more-text .text-container p .button { margin-bottom: 0; } .tptpl .load-more-container { padding: 5px 36px 28px; } @media screen and (min-width: 1024px) { .tptpl .featured-jobs { margin: 0 auto; } .tptpl .featured-jobs .slick-next, .tptpl .featured-jobs .slick-prev { height: 22px; top: calc(50% - 35px); } .tptpl .featured-jobs .slick-prev { left: 16px; } .tptpl .featured-jobs .slick-next { right: 16px; } .tptpl .featured-jobs .slick-slide > div { margin: 0 auto; max-width: 1040px; } .tptpl .featured-jobs .slick-slide .job { display: inline-block; width: 49%; vertical-align: top; padding: 0 50px; margin: 2px 0 50px; } .tptpl .featured-jobs .slick-slide .no-job { display: inline-block; width: 100%; vertical-align: top; padding: 0 50px; margin: 11px 0 50px; } .tptpl .featured-jobs-slider-container { margin-bottom: 0; } .tptpl .featured-jobs-slider-container .button-container { padding: 2px 38px 77px; margin: 0 auto; max-width: 1070px; } .tptpl .featured-jobs-slider-container .button-container .button { margin-right: 12px; } .tptpl .employee-stories-slider-container { margin: 0 0 65px; } .tptpl .employee-stories .slick-next::before, .tptpl .employee-stories .slick-prev::before { background-image: url("https://apply.superdry.com/app/tpl/asset/08a0dcb621c5e559af0a54366e314b53960e95555a8c6d1682e3a754fdd55456"); } .tptpl .employee-stories .slick-slide > div { position: relative; margin: 10px auto; max-width: 1200px; } .tptpl .employee-stories .image-container { position: absolute; bottom: 25px; top: 0; width: 100%; } .tptpl .employee-stories .image-container img { float: right; height: 100%; } .tptpl .employee-stories .slick-prev { height: 22px; left: 85px; top: 60px; } .tptpl .employee-stories .slick-next { height: 22px; left: 127px; top: 61px; } .tptpl .employee-stories .text-container { position: relative; z-index: 1; padding: 114px 38px 50px 85px; width: 700px; } .tptpl .employee-stories .text-container h3 { margin: 0 0 22px; } .tptpl .employee-stories .text-container p.title { font-size: 70px; line-height: 49px; min-height: 212px; } .tptpl .employee-stories.non-slick { margin-top: 90px; } .tptpl .employee-stories.non-slick.ntm { margin-top: 0; } .tptpl .employee-stories.non-slick > div { display: flex; position: relative; margin: 0 auto 100px; max-width: 1200px; } .tptpl .employee-stories.non-slick .image-container { position: relative; display: flex; margin: auto; width: inherit; max-width: 685px; } .tptpl .employee-stories.non-slick .image-container img { float: none; width: 100%; } .tptpl .employee-stories.non-slick .text-container { padding: 20px 38px 20px 20px; display: flex; flex-direction: column; justify-content: center; width: 520px; } .tptpl .employee-stories.non-slick .text-container h3 { margin-top: 28px; } .tptpl .employee-stories.non-slick .text-container p.title { min-height: inherit; margin: 0 0 40px; } .tptpl .employee-stories .text-container p { margin: 0 70px 40px 0; } .tptpl .employee-stories.non-slick .text-container .button, .tptpl .employee-stories.non-slick .text-container h3, .tptpl .employee-stories.non-slick .text-container p.title { margin-left: -190px; max-width: calc(100% + 190px); } .tptpl .employee-stories.non-slick.reverse > div, .tptpl .employee-stories.non-slick > div:nth-of-type(even) { flex-direction: row-reverse; } .tptpl .employee-stories.non-slick.reverse > div:nth-of-type(even) { flex-direction: row; } .tptpl .employee-stories.non-slick.reverse > div .text-container .button, .tptpl .employee-stories.non-slick.reverse > div .text-container h3, .tptpl .employee-stories.non-slick.reverse > div .text-container p.title, .tptpl .employee-stories.non-slick > div:nth-of-type(even) .text-container .button, .tptpl .employee-stories.non-slick > div:nth-of-type(even) .text-container h3, .tptpl .employee-stories.non-slick > div:nth-of-type(even) .text-container p.title { margin-left: 80px; margin-right: -190px; } .tptpl .employee-stories.non-slick.more-text .text-container { padding-top: 0; padding-bottom: 0; padding-left: 35px; } .tptpl .employee-stories.non-slick.more-text .text-container p.title, .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container p.title { margin-bottom: 48px; } .tptpl .employee-stories.non-slick.more-text .text-container .button, .tptpl .employee-stories.non-slick.more-text .text-container h3, .tptpl .employee-stories.non-slick.more-text .text-container p, .tptpl .employee-stories.non-slick.more-text .text-container p.title { margin-left: 0; margin-right: 0; max-width: 100%; } .tptpl .employee-stories.non-slick.more-text .text-container p.title { margin-right: 35px; } .tptpl .employee-stories.non-slick.more-text .text-container p.title br { display: block; } .tptpl .employee-stories.non-slick.more-text .text-container p { max-width: 365px; margin: 0; } .tptpl .employee-stories.non-slick.more-text .text-container ul { margin: 0; } .tptpl .employee-stories.non-slick.more-text .text-container .button { margin-bottom: 50px; } .tptpl .employee-stories.non-slick.more-text.reverse > div .text-container .button, .tptpl .employee-stories.non-slick.more-text.reverse > div .text-container h3, .tptpl .employee-stories.non-slick.more-text.reverse > div .text-container p, .tptpl .employee-stories.non-slick.more-text.reverse > div .text-container p.title, .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container .button, .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container h3, .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container p, .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container p.title { margin-left: 0; } .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container p { margin-top: 0; margin-right: 0; margin-bottom: 0; } .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container p.title { margin-right: 30px; } .tptpl .employee-stories.non-slick.more-text > div:nth-of-type(even) .text-container .button { margin-top: 10px; margin-right: 0; margin-bottom: 20px; } @media screen and (min-width: 1120px) { .tptpl .employee-stories.non-slick.more-text div:nth-of-type(even) .text-container, .tptpl .employee-stories.non-slick.more-text.reverse .text-container { padding-left: 105px; } } .tptpl .load-more-container { padding: 5px 38px 75px; margin: 0 auto; max-width: 1076px; } .tptpl .load-more-container.wide { max-width: 1274px; } } @media screen and (min-width: 1120px) { .tptpl .slideshow-container { width: 100%; margin: 0 0 100px; } .tptpl .slideshow .slick-slide > div { margin: 0 18px 0 19px; } .tptpl .slideshow .slick-slide img { max-width: inherit; width: 100%; } .tptpl .slideshow .text-container { padding: 30px 0 0; } .tptpl .slideshow .slick-next, .tptpl .slideshow .slick-prev { height: calc(75vw - 544px); } .tptpl .slideshow .slick-prev { left: 100px; } .tptpl .slideshow .slick-next { right: 100px; } .tptpl .slideshow .text-container { opacity: 0; transition: opacity 0.25s ease-in-out; } .tptpl .slideshow .slick-current .text-container { opacity: 1; transition: opacity 0.25s ease-in-out 0.75s; } .tptpl .slideshow .slick-dots { top: calc(73vw - 565px); } .tptpl .featured-jobs .slick-slide .job { padding: 0 15px 0 23px; } .tptpl .featured-jobs .slick-slide .no-job { padding: 9px 15px 0 23px; } .tptpl .featured-jobs .slick-slide .no-job p { max-width: 640px; } } @media screen and (min-width: 1200px) { .tptpl .employee-stories .text-container { position: relative; z-index: 1; padding: 114px 38px 50px 105px; width: 700px; } .tptpl .employee-stories .slick-prev { height: 22px; left: calc(50% - 498px); top: 60px; } .tptpl .employee-stories .slick-next { height: 22px; left: calc(50% - 456px); top: 61px; } } @media screen and (min-width: 1360px) { .tptpl .featured-jobs .slick-prev { left: 100px; } .tptpl .featured-jobs .slick-next { right: 100px; } } @media screen and (min-width: 1800px) { .tptpl .slideshow .slick-next, .tptpl .slideshow .slick-prev { height: calc(74vw - 997px); } .tptpl .slideshow .slick-dots { top: calc(73vw - 990px); } } .tptpl .slider-dropdowns { display: table; width: 100%; padding: 0 32px; margin: -47px 0 6px; } .tptpl .slider-dropdowns .select-selected { margin: 11px 7px; background: #ffeed9; } .tptpl .slider-dropdowns .select-selected::after { right: 10px; } .tptpl .slider-dropdowns .select-items { margin: -11px 7px 0; } @media screen and (min-width: 1024px) { .tptpl .slider-dropdown-container { position: relative; max-width: 1070px; margin: 0 auto; } .tptpl .slider-dropdowns { margin-top: 0; max-width: 440px; position: absolute; top: 53px; right: 0; } .tptpl .slider-dropdowns .select-selected { margin-left: 32px; } .tptpl .slider-dropdowns .select-items { margin-left: 32px; } } .tptpl .wrapper { padding: 50px 0 0; margin: 0 0 50px; } .tptpl .wrapper.grey { background-color: #ffeed9; } @media screen and (min-width: 1024px) { .tptpl .wrapper { padding: 100px 0 1px; margin: 0 0 100px; } } .tptpl .signpost-container { width: 100%; margin: 0; padding: 20px 20px 10px; background: #fff; } .tptpl .signpost-container.grey { background-color: #ffeed9; } .tptpl .signpost-container.nbm { margin-bottom: 0; } .tptpl .signpost-container h2 { padding: 22px 38px 21px; text-align: center; } .tptpl .signpost { text-align: left; } .tptpl .signpost img { width: 100%; } .tptpl .signpost .text-container { padding: 36px 21px 40px; } .tptpl .signpost h3 { margin: 0 0 9px; } .tptpl .signpost h3 span { border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl .signpost:hover h3 span { border-color: #000; } .tptpl .signpost p { margin: 0 0 17px; } @media screen and (min-width: 1024px) { .tptpl .signpost-container { margin: 0; padding: 60px 20px; text-align: center; } .tptpl .signpost-container h2 { padding: 22px 38px 31px; } .tptpl .signpost { display: inline-block; width: 33%; padding: 0 17px; max-width: 409px; vertical-align: top; } .tptpl .signpost:nth-of-type(3n + 1) { clear: both; } } .tptpl .key-signpost-container { display: table; width: 100%; margin: 0 auto; padding: 0; } .tptpl .key-signpost { position: relative; display: block; width: 100%; margin: 0 0 50px; padding: 0; overflow: hidden; } .tptpl .key-signpost br { display: none; } .tptpl .key-signpost .image-container { display: block; position: relative; } .tptpl .key-signpost .image-container img { width: 100%; } .tptpl .key-signpost .image-container img.large { display: none; } .tptpl .key-signpost .text-container { position: absolute; display: block; background: #fff; bottom: 0; width: calc(100% - 37px); padding: 36px 25px 0 37px; } .tptpl .wrapper.grey .key-signpost .text-container { background: #ffeed9; } .tptpl .key-signpost .text-container span.title { display: block; font-size: 24px; line-height: 30px; margin: 0 0 7px; padding: 0 5px 0 0; } .tptpl .key-signpost .text-container span.title span { display: inline; border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl .key-signpost:hover .text-container span.title span { border-color: #000; } .tptpl .key-signpost .text-container span.excerpt { display: block; font-size: 13px; line-height: 20px; font-weight: 300; margin: 0 0 30px; } .tptpl .key-signpost .button { margin: 0 0 2px; } .tptpl .key-signpost:hover .button:after { transform: translateX(10px); } .tptpl .wrapper .key-signpost-container .col.smaller { padding: 0 20px; } @media screen and (min-width: 1024px) { .tptpl .key-signpost-container { max-width: 1232px; margin-bottom: 50px; } .tptpl .key-signpost-container .col { float: left; } .tptpl .key-signpost-container .col.smaller { width: 41.5%; } .tptpl .wrapper .key-signpost-container .col.smaller { padding: 0; } .tptpl .key-signpost-container .col.larger { width: 58.5%; } .tptpl .key-signpost { padding: 0 18px; } .tptpl .key-signpost br { display: block; } .tptpl .key-signpost .image-container img.small { display: none; } .tptpl .key-signpost .image-container img.large { display: block; } .tptpl .key-signpost .text-container { width: calc(100% - 66px); min-height: 220px; padding: 37px 30px 0 18px; } .tptpl .key-signpost .text-container.nmh { min-height: 1px; } .tptpl .key-signpost .text-container span.title { margin-bottom: 9px; } .tptpl .key-signpost .text-container span.excerpt { margin: 0 0 21px; } } @media screen and (min-width: 1120px) { .tptpl .key-signpost .text-container { width: 375px; } } .tptpl .brand-box-container { display: table; width: 100%; margin: 0 auto 50px; padding: 0; } .tptpl .brand-box { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; } .tptpl .brand-box br { display: none; } .tptpl .brand-box .image-container { display: block; position: relative; } .tptpl .brand-box .image-container img { width: 100%; } .tptpl .brand-box .image-container img.large { display: none; } .tptpl .brand-box .text-container { display: block; background: #fff; width: 100%; padding: 31px 37px 30px; } .tptpl .brand-box .text-container span.title { display: block; font-size: 30px; line-height: 38px; margin: 0 0 20px; padding: 0 5px 0 0; } .tptpl .brand-box .text-container span.title span { display: inline; border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl .brand-box:hover .text-container span.title span { border-color: #000; } .tptpl .brand-box .text-container span.excerpt { display: block; font-size: 13px; line-height: 20px; font-weight: 300; margin: 0 0 20px; } .tptpl .brand-box .button { margin: 0 0 2px; } .tptpl .brand-box:hover .button:after { transform: translateX(10px); } .tptpl .logo-boxes { float: left; width: 100%; padding: 0 30px 35px; } .tptpl .logo-boxes .logo-box { position: relative; float: left; width: calc(50% - 16px); margin: 0 8px 16px; } .tptpl .mission-box img { width: 100%; } .tptpl .mission-box img.large { display: none; } .tptpl .mission-box .text-container { position: relative; display: block; background: #fff; width: calc(100% - 37px); margin: -50px 0 0; padding: 36px 25px 28px 37px; } .tptpl .mission-box .text-container p { color: #3d4009; font-family: "itc-fenice", serif; font-size: 40px; line-height: 28px; font-weight: 400; text-transform: uppercase; margin-top: 21px; } @media screen and (min-width: 1024px) { .tptpl .brand-box-container { max-width: 1232px; margin-top: 100px; } .tptpl .brand-box-container .col { float: left; width: 50%; } .tptpl .brand-box { padding: 0 18px; } .tptpl .brand-box br { display: block; } .tptpl .brand-box .image-container img.small { display: none; } .tptpl .brand-box .image-container img.large { display: block; } .tptpl .brand-box .text-container { position: absolute; display: block; bottom: 0; width: calc(100% - 66px); min-height: 220px; padding: 37px 30px 0 18px; } .tptpl .brand-box .text-container span.excerpt { margin: 0 0 21px; } .tptpl .logo-boxes { padding: 0; } .tptpl .logo-boxes .logo-box { width: calc(50% - 32px); margin: 0 16px 21px; } .tptpl .mission-box { position: relative; margin: 0 auto 100px; max-width: 1280px; } .tptpl .mission-box .image-container { padding: 0 40px 0 140px; } .tptpl .mission-box img.small { display: none; } .tptpl .mission-box img.large { display: block; } .tptpl .mission-box .text-container { position: absolute; bottom: -30px; background: #fff; width: calc(100% - 100px); padding-right: 50px; margin: 0; } .tptpl .mission-box .text-container p { font-size: 70px; line-height: 49px; margin-bottom: 0; } } @media screen and (min-width: 1120px) { .tptpl .brand-box .text-container { width: 375px; } .tptpl .mission-box .text-container { max-width: 620px; } } .tptpl .logo-box-type-2-container { font-size: 0; text-align: center; padding: 0 30px 25px; } .tptpl .logo-box-type-2-container .row { margin-bottom: 42px; } .tptpl .logo-box-type-2-container .row:last-of-type { margin-bottom: 15px; } .tptpl .logo-box-type-2 { display: inline-block; width: 50%; padding: 7px; } .tptpl .logo-box-type-2-container h2 { text-align: center; margin: 0 0 34px; } @media screen and (min-width: 1024px) { .tptpl .logo-box-type-2-container { padding: 0 30px 25px; margin: 0 auto; max-width: 1294px; } .tptpl .logo-box-type-2-container .row { margin-bottom: 80px; } .tptpl .logo-box-type-2-container .row:last-of-type { margin-bottom: 55px; } .tptpl .logo-box-type-2 { width: 25%; padding: 18px; } } .tptpl .story-filters { display: none; } @media screen and (min-width: 1024px) { .tptpl .story-filters-container { font-size: 0; margin-bottom: 30px; } .tptpl .story-filters-container.faqs { margin-bottom: 90px; } .tptpl .main-content .story-filters-container.faqs { margin: 60px 0 30px; } .tptpl .story-filters { display: block; margin: -10px auto 10px; margin-bottom: 40px; max-width: 1360px; text-align: center; } .tptpl .main-content .story-filters { margin: 0 -120px; } .tptpl .story-filters a { position: relative; font-size: 13px; line-height: 1; text-transform: uppercase; font-weight: 500; background: #f0f0f0; border-radius: 25px; padding: 11px 19px; display: inline-block; margin: 0 4px 10px; transition: all 0.25s ease-in-out; } .tptpl .story-filters a:hover { color: #fff; background: #000; } .tptpl .story-filters a.active { color: #fff; background: #000; } .tptpl .story-filters a span { display: none; } } @media screen and (min-width: 1200px) { .tptpl .main-content .story-filters { margin-left: -200px; margin-right: -200px; } } @media screen and (min-width: 1360px) { .tptpl .main-content .story-filters { margin-left: -290px; margin-right: -290px; } } .tptpl .button-grid-container { display: table; width: 100%; padding: 0 38px; } .tptpl .button-grid { margin: 30px 0 40px; display: flex; width: 100%; flex-wrap: wrap; } .tptpl .button-grid .button.large { max-width: inherit; margin: 10px 0 !important; } .tptpl .button-grid .button.large.has-icon { position: relative; padding-left: 60px; } .tptpl .button-grid .button.large.has-icon .icon { position: absolute; width: 25px; height: 25px; background-position: center; background-repeat: no-repeat; background-size: contain; left: 20px; filter: brightness(0); transition: filter 0.25s ease-in-out; } .tptpl .button-grid .button.large.has-icon .icon.instagram { background-image: url("https://apply.superdry.com/app/tpl/asset/712f25b19b316031d80c491a97660b0bb55cb6aeb3c4fc8676e2e5d5c5abba49"); } .tptpl .button-grid .button.large.has-icon .icon.facebook { background-image: url("https://apply.superdry.com/app/tpl/asset/b322146f2346aba96ac1521247e31ce0b15f32f9ca43ed6fd5bcbaf46ee183c2"); } .tptpl .button-grid .button.large.has-icon .icon.linkedin { background-image: url("https://apply.superdry.com/app/tpl/asset/fe37754aa8b46e4acd9b33af05010240169586b8e7175248767166f030fdd1a2"); } .tptpl .button-grid .button.large.has-icon .icon.tiktok { background-image: url("https://apply.superdry.com/app/tpl/asset/2696f3ab91040bebe00b9342eb510bbd07c1fca9c01c4ee5831a9b945a8b5f30"); } @media screen and (min-width: 1024px) { .tptpl .button-grid-container { padding: 0 38px 50px; } .tptpl .button-grid { max-width: 1240px; margin: 40px auto; } .tptpl .button-grid.centred { justify-content: center; } .tptpl .button-grid .button.large { width: calc(33.333% - 38px); float: left; margin: 10px 19px !important; } .tptpl .button-grid .button.large.has-icon:hover .icon { filter: brightness(100); } } .tptpl .community-posts-container { display: table; width: 100%; margin: 0 auto; font-size: 0; } .tptpl .community-posts-container h2 { padding: 0 38px 21px; text-align: center; } .tptpl .post { position: relative; display: inline-block; width: 100%; margin: 0 0 40px; padding: 0 38px; overflow: hidden; vertical-align: top; } .tptpl .community-posts-container .post { padding: 0 18px; } .tptpl .post.large-post { padding: 0; } .tptpl .post .image-container { display: block; position: relative; } .tptpl .post.video .image-container:after { content: ""; position: absolute; top: calc(50% - 30px); left: calc(50% - 25px); width: 50px; height: 60px; background: transparent url("https://apply.superdry.com/app/tpl/asset/61b06bd0d6b35ca1b9a3fc0ba851248dd38a9d9a2ae1376a750257ef90dce274") center no-repeat; background-size: contain; } .tptpl .post img { width: 100%; } .tptpl .post .text-container { display: block; background: #fff; padding: 32px 0 0 0; } .tptpl .post .text-container { padding: 37px 18px 0; } .tptpl .post.large-post .text-container { position: absolute; bottom: 0; width: 75%; padding: 32px 25px 0 38px; } .tptpl .post .text-container span { display: inline-block; } .tptpl .post .text-container span.cta { margin: 17px 0 0; } .tptpl .post .text-container span.channel { font-size: 13px; line-height: 1; text-transform: uppercase; font-weight: 500; margin: 0 0 13px; border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl .post .text-container span.fake-link, .tptpl .post .text-container span.fake-tag { display: inline; border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl .post .text-container span.fake-link { word-break: break-all; } .tptpl .post .text-container span.title { display: block; font-size: 24px; line-height: 30px; margin: 0 0 9px; } .tptpl .post .text-container span.title span { display: inline; border-bottom: 1px solid transparent; transition: border 0.25s ease-in-out; } .tptpl .post .text-container span.excerpt { display: block; font-size: 13px; line-height: 20px; font-weight: 300; margin: 0; } .tptpl .post:hover .text-container span.channel, .tptpl .post:hover .text-container span.fake-link, .tptpl .post:hover .text-container span.fake-tag, .tptpl .post:hover .text-container span.title span { border-color: #000; } .tptpl .post.large-post:hover .text-container span.channel { border-color: transparent; } @media screen and (min-width: 768px) { .tptpl .post img.large { display: block; } } @media screen and (min-width: 1024px) { .tptpl .community-posts-container { max-width: 1232px; } .tptpl .community-posts-container h2 { padding: 0 38px 31px; } .tptpl .community-posts-container .story-filters-container { margin-bottom: 40px; } .tptpl .post { width: 25%; margin: 0 0 50px; padding: 0 18px; } .tptpl .post.large-post { width: 50%; margin: 0 0 44px; padding: 0 18px; } .tptpl .community-posts-container .col, .tptpl .community-posts-container .col .col { float: left; width: 50%; } .tptpl .post.large-post .text-container { width: 60.666%; padding: 32px 18px 0; } .tptpl .community-posts-container .col.larger, .tptpl .community-posts-container .col.smaller + .col { float: left; width: 58.5%; } .tptpl .community-posts-container .col.larger + .col, .tptpl .community-posts-container .col.smaller { float: left; width: 41.5%; } .tptpl .post.large-post .text-container { width: 375px; padding: 38px 35px 0 20px; } .tptpl .post .text-container span.cta { margin: 23px 0 0; } } .tptpl .job-search-filters { display: none; } .tptpl .job-button-container { padding: 0 20px; } .tptpl .job-button { display: block; position: relative; background: #ffeed9; transition: all 0.25s ease-in-out; padding: 22px 65px 18px 18px; margin: 0 0 20px; } .tptpl .job-button:hover { color: #fff; background: #000; } .tptpl .job-button span { display: block; } .tptpl .job-button span.title { font-size: 24px; line-height: 30px; margin: 0 0 6px; } .tptpl .job-button span.details, .tptpl .job-button span.reference { font-size: 13px; line-height: 19px; font-weight: 300; } .tptpl .job-button span.cta { margin-top: 22px; } .tptpl .job-button:hover span.cta { border-color: transparent; } .tptpl .job-button svg { position: absolute; height: 22px; top: calc(50% - 10px); right: 20px; transition: all 0.25s ease-in-out; } .tptpl .job-button:hover svg { transform: translateX(10px); } .tptpl .job-button-container .load-more-container { padding: 25px 0; } @media screen and (min-width: 1024px) { .tptpl .job-search-container { margin: -45px auto 0; max-width: 1000px; } .tptpl .job-search-filters { position: relative; display: block; float: left; width: 310px; padding: 0 0 0 7px; } .tptpl #jobSearchIndexFiltersDesktop { display: block; position: absolute; top: -120px; } .tptpl .job-search-filters form { padding: 15px 35px 0 0; } .tptpl .job-search-filters .custom-select, .tptpl .job-search-filters .custom-select-no-dim { margin: 0 0 14px; } .tptpl .job-search-filters .select-selected { margin: 0; } .tptpl .job-search-filters .select-selected::after { top: 23px; right: 0; } .tptpl .job-search-filters input[type="search"] { height: 52px; margin: 0 0 45px; } .tptpl .job-search-filters .select-items { background-color: #ffeed9; } .tptpl .job-button-container { padding: 0; float: right; width: 684px; } .tptpl .job-button { padding: 32px 35px; } .tptpl .job-button span.content { width: 100%; max-width: 500px; } .tptpl .job-button span.title { margin: 0 0 9px; } .tptpl .job-button span.details, .tptpl .job-button span.reference { line-height: 20px; } .tptpl .job-button span.cta { margin-top: 23px; } .tptpl .job-button svg { top: calc(50% - 11px); right: 40px; } .tptpl .job-button-container .load-more-container { padding: 35px 0 75px; } } .tptpl .main-content.login label { font-size: 0; line-height: 0; margin: 0; padding: 0; } .tptpl .main-content.login h1 { margin: 0 0 10px; } .tptpl .main-content.login legend {} .tptpl .grecaptcha-badge { z-index: 100000; } .tptpl .main-content.login .message { color: #3d4009; line-height: 1.3; margin: 20px 0 18px; } .tptpl .main-content.login .message.error { color: #962a00; } .tptpl .short .top-banner { margin-bottom: 0; } .tptpl .short .main-content { padding-bottom: 0; } @media screen and (min-width: 1024px) { .tptpl .short .main-content { min-height: calc(100vh - 900px); } } @media screen and (min-width: 1440px) { .tptpl .short .main-content { min-height: calc(100vh - 867px); } } .tptpl :lang(es) .desktop-header-country-menu-button .menu-label { max-width: 150px; } @media screen and (min-width: 1120px) { .tptpl :lang(es) .header .mega-dropdown .mega-dropdown-heading { font-size: 12px; padding-left: 10px; padding-right: 10px; } .tptpl :lang(es) .desktop-header-country-menu-button { margin-left: 25px; } } @media screen and (min-width: 1280px) { .tptpl :lang(es) .header .mega-dropdown { padding-right: 60px; } } @media screen and (min-width: 1440px) { .tptpl :lang(es) .header .mega-dropdown .mega-dropdown-heading { font-size: 13px; padding-left: 15px; padding-right: 15px; } .tptpl :lang(es) .desktop-header-country-menu-button { margin-left: 40px; } } .tptpl :lang(nl) .mobile-header-country-menu-button a { width: 96px; } @media screen and (min-width: 1120px) { .tptpl :lang(nl) .header .mega-dropdown .mega-dropdown-heading { font-size: 12px; padding-left: 10px; padding-right: 10px; } .tptpl :lang(nl) .desktop-header-country-menu-button { margin-left: 25px; } } @media screen and (min-width: 1280px) { .tptpl :lang(nl) .header .mega-dropdown { padding-right: 60px; } } @media screen and (min-width: 1400px) { .tptpl :lang(nl) .header .mega-dropdown .mega-dropdown-heading { font-size: 13px; padding-left: 15px; padding-right: 15px; } .tptpl :lang(nl) .desktop-header-country-menu-button { margin-left: 40px; } } .tptpl { display: block !important; }