/*###################################################################################################################### ###################################################################################################################### ########################################################SETTINGS###################################################### ###################################################################################################################### ###################################################################################################################### */ @font-face { font-family: 'icon'; src: url("../assets/font/druckshop-premium.eot"); src: url("../assets/font/druckshop-premium.eot?#iefix") format("embedded-opentype"), url("../assets/font/druckshop-premium.woff") format("woff"), url("../assets/font/druckshop-premium.ttf") format("truetype"), url("../assets/font/druckshop-premium.svg#druckshop-premium") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'regular'; src: url("../assets/font/roboto-light-webfont.eot"); src: url("../assets/font/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/font/roboto-light-webfont.woff") format("woff2"), url("../assets/font/roboto-light-webfont.woff") format("woff"), url("../assets/font/roboto-light-webfont.ttf") format("truetype"), url("../assets/font/roboto-light-webfont.svg#robotolight") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'bold'; src: url("../assets/font/roboto-medium-webfont.eot"); src: url("../assets/font/roboto-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/font/roboto-medium-webfont.woff") format("woff2"), url("../assets/font/roboto-medium-webfont.woff") format("woff"), url("../assets/font/roboto-medium-webfont.ttf") format("truetype"), url("../assets/font/roboto-medium-webfont.svg#robotolight") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'tagged'; src: url("../assets/font/Titillium-Light-webfont.eot"); src: url("../assets/font/Titillium-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/font/Titillium-Light-webfont.woff") format("woff2"), url("../assets/font/Titillium-Light-webfont.woff") format("woff"), url("../assets/font/Titillium-Light-webfont.ttf") format("truetype"), url("../assets/font/Titillium-Light-webfont.svg#robotolight") format("svg"); font-weight: normal; font-style: normal; } /* latin */ @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 100; src: url("../assets/font/barlow/7cHtv4kjgoGqM7E_CfNY8H0JmBUhfrE.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 200; src: url("../assets/font/barlow/7cHsv4kjgoGqM7E_CfP04WouvToJdLm8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 300; src: url("../assets/font/barlow/7cHsv4kjgoGqM7E_CfOQ4mouvToJdLm8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; src: url("../assets/font/barlow/7cHrv4kjgoGqM7E_Cfs7wH8Dnzcj.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 500; src: url("../assets/font/barlow/7cHsv4kjgoGqM7E_CfPI42ouvToJdLm8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 600; src: url("../assets/font/barlow/7cHsv4kjgoGqM7E_CfPk5GouvToJdLm8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 700; src: url("../assets/font/barlow/7cHsv4kjgoGqM7E_CfOA5WouvToJdLm8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 800; src: url("../assets/font/barlow/7cHsv4kjgoGqM7E_CfOc5mouvToJdLm8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: italic; font-weight: 900; src: url("../assets/font/barlow/7cHsv4kjgoGqM7E_CfO452ouvToJdLm8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 100; src: url("../assets/font/barlow/7cHrv4kjgoGqM7E3b_s7wH8Dnzcj.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 200; src: url("../assets/font/barlow/7cHqv4kjgoGqM7E3w-os51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; src: url("../assets/font/barlow/7cHqv4kjgoGqM7E3p-ks51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; src: url("../assets/font/barlow/7cHpv4kjgoGqM7E_DMs5ynghnQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; src: url("../assets/font/barlow/7cHqv4kjgoGqM7E3_-gs51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; src: url("../assets/font/barlow/7cHqv4kjgoGqM7E30-8s51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; src: url("../assets/font/barlow/7cHqv4kjgoGqM7E3t-4s51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; src: url("../assets/font/barlow/7cHqv4kjgoGqM7E3q-0s51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 900; src: url("../assets/font/barlow/7cHqv4kjgoGqM7E3j-ws51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 100; src: url("../assets/font/barlowsemicondensed/wlpjgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbLLEEwAhraMdWo.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 200; src: url("../assets/font/barlowsemicondensed/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbJnAVsno5mkf2K4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 300; src: url("../assets/font/barlowsemicondensed/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIDAlsno5mkf2K4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 400; src: url("../assets/font/barlowsemicondensed/wlphgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbqoIE4KgZSO.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 500; src: url("../assets/font/barlowsemicondensed/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbJbA1sno5mkf2K4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; src: url("../assets/font/barlowsemicondensed/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbJ3BFsno5mkf2K4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 700; src: url("../assets/font/barlowsemicondensed/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbITBVsno5mkf2K4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 800; src: url("../assets/font/barlowsemicondensed/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIPBlsno5mkf2K4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 900; src: url("../assets/font/barlowsemicondensed/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIrB1sno5mkf2K4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 100; src: url("../assets/font/barlowsemicondensed/wlphgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRfG7qoIE4KgZSO.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 200; src: url("../assets/font/barlowsemicondensed/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRft6u_B2slqZ6GfQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 300; src: url("../assets/font/barlowsemicondensed/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRf06i_B2slqZ6GfQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; src: url("../assets/font/barlowsemicondensed/wlpvgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXeIqqKkkogw.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; src: url("../assets/font/barlowsemicondensed/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRfi6m_B2slqZ6GfQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; src: url("../assets/font/barlowsemicondensed/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRfp66_B2slqZ6GfQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; src: url("../assets/font/barlowsemicondensed/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRfw6-_B2slqZ6GfQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; src: url("../assets/font/barlowsemicondensed/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRf36y_B2slqZ6GfQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 900; src: url("../assets/font/barlowsemicondensed/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRf-62_B2slqZ6GfQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Crete Round'; font-style: italic; font-weight: 400; src: url("../assets/font/creteround/55xqey1sJNPjPiv1ZZZrxK1-4b_oLk5OlKY.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Crete Round'; font-style: normal; font-weight: 400; src: url("../assets/font/creteround/55xoey1sJNPjPiv1ZZZrxK170b3iKWxM.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { margin: 0; padding: 0; border: none; outline: 0; -webkit-tab-highlight-color: rgba(0, 0, 0, 0); font-size: 100%; line-height: 145%; font-style: normal; text-decoration: none; list-style: none; white-space: normal; font-family: 'regular', 'Helvetica', arial, sans-serif; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4d4d4d; } *:focus { outline: none; } ::-moz-focus-inner { border: 0; outline: 0; } select::-moz-focus-inner { border: 0; outline: 0; } select:-moz-focusring { outline: 0; color: transparent; text-shadow: 0 0 0 #000; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { line-height: 1; } blockquote, q { quotes: none; } q:after, q:before { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } article, aside, details, figcaption, figure, footer, header, menu, nav, section, main { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } svg:not(:root) { overflow: hidden; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } button:hover { cursor: pointer; } input[type="text"], textarea, button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; } input, select { vertical-align: middle; } textarea { -webkit-overflow-scroll: touch; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button { background: transparent; } ::-webkit-input-placeholder { color: #d1d1d1; background: transparent; } ::-moz-input-placeholder { color: #d1d1d1; background: transparent; } ::-ms-input-placeholder { color: #d1d1d1; background: transparent; } ::input-placeholder { color: #d1d1d1; background: transparent; } ::-moz-selection { background: #4d4d4d; color: #fff; } ::-webkit-selection { background: #4d4d4d; color: #fff; } ::-ms-selection { background: #4d4d4d; color: #fff; } ::-o-selection { background: #4d4d4d; color: #fff; } ::selection { background: #4d4d4d; color: #fff; } .wrp { position: relative; margin: 0 auto; } .hidden { display: none; opacity: 0; visibility: hidden; } .clr { display: block; clear: both; } .cf { zoom: 1; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } h1, h2, h3, h4, h5, h6, .headline { display: block; color: #4d4d4d; font-weight: 100; margin-bottom: 24px; } h1, h2, h3, .headline { font-size: 24px; margin-bottom: 48px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 18px; } p { color: #4d4d4d; font-size: 16px; line-height: 24px; margin-bottom: 24px; } br { line-height: 24px; } ul { margin-bottom: 24px; } ul li { list-style: none; color: #4d4d4d; font-size: 16px; line-height: 24px; margin-left: 0px; /*&:before margin-top: $line-height / 3 content: '' background: $color_font margin-right: 14px float: left width: 6px height: 6px*/ } ul.link_list li { display: block; padding: 5px 0; background: #f7f7f7; clear: both; } ul.link_list li:after { clear: both; content: ''; } ul.link_list li:before { display: none; } ul.link_list li .btn { float: right; margin: 0 !important; } ul.link_list li:nth-of-type(2n+2) { background: #fff; } ul.link_list li a { display: block; } .highlight { color: #8e004d; } .highlight.success { color: #ae6787 !important; } .highlight.error { color: #d12b0b !important; } a { color: #8e004d; } a:hover { color: #5b0031; text-decoration: underline; } a::-webkit-selection { color: #fff; background: #8e004d; } a::-moz-selection { color: #fff; background: #8e004d; } a::-ms-selection { color: #fff; background: #8e004d; } a::selection { color: #fff; background: #8e004d; } strong:not([class="headline"]), b { font-family: "Barlow Semi Condensed", sans-serif !important; font-weight: 600 !important; font-style: normal; color: #4d4d4d; font-size: 18px; } span.delete { color: #676767; border-bottom: solid 1px #cdcdcd; margin-bottom: 30px; display: inline-block; } em, i { color: #4d4d4d; font-size: 14px; color: #737373; } hr { margin: 24px 0; border-bottom: solid 1px #b3b3b3; } img { line-height: 0; vertical-align: middle; display: block; -ms-interpolation-mode: bicubic; } #offcanvas { display: none; } @-webkit-keyframes popIn { 0% { opacity: 0; -webkit-transform: scale(1, 1); } 50% { opacity: 1; -webkit-transform: scale(1.2, 1.2); } 100% { -webkit-transform: scale(1, 1); } } @-moz-keyframes popIn { 0% { opacity: 0; -moz-transform: scale(1, 1); } 50% { opacity: 1; -moz-transform: scale(1.2, 1.2); } 100% { -moz-transform: scale(1, 1); } } @keyframes popIn { 0% { opacity: 0; transform: scale(1, 1); } 50% { opacity: 1; transform: scale(1.2, 1.2); } 100% { transform: scale(1, 1); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .leadprint-brand { position: relative; z-index: 1; float: right; line-height: 50px; font-size: 12px; color: #fff; margin-right: 60px; } /*###################################################################################################################### ###################################################################################################################### #########################################################Button####################################################### ###################################################################################################################### ###################################################################################################################### */ .btn { position: relative; display: inline-block; padding: 0 10px; border: solid 1px #6a003a; background: #8e004d; border-radius: 2px; min-width: 120px; height: 40px; cursor: pointer; color: #fff; margin-bottom: 24px; box-sizing: border-box; font-size: 18px; text-align: center; line-height: 40px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn:hover, .btn.hover { color: #fff; border-color: #8e004d; background: #c10069; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn:active, .btn.active { border-color: #230013; background: #56002f; } .btn.active { -webkit-animation: ripple 0.1s 1 linear; -moz-animation: ripple 0.1s 1 linear; animation: ripple 0.1s 1 linear; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn.active .anim.loading { border-color: #230013; border-bottom-color: #c10069; } .btn.success { border-color: #9d5475; background: #ae6787; } .btn.success:hover, .btn.success.hover { color: #fff; border-color: #a6798d; background: #ae9aa3; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn.success:active, .btn.success.active { border-color: #834661; background: #934f6e; } .btn.success.active { -webkit-animation: ripple 0.1s 1 linear; -moz-animation: ripple 0.1s 1 linear; animation: ripple 0.1s 1 linear; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn.success.active .anim.loading { border-color: #6f3b52; border-bottom-color: #c088a1; } .btn.error { border-color: #a12108; background: #d12b0b; } .btn.error:hover, .btn.error.hover { color: #fff; border-color: #c63216; background: #f33f1c; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn.error:active, .btn.error.active { border-color: #6b1606; background: #af2409; } .btn.error.active { -webkit-animation: ripple 0.1s 1 linear; -moz-animation: ripple 0.1s 1 linear; animation: ripple 0.1s 1 linear; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn.error.active .anim.loading { border-color: #6b1606; border-bottom-color: #f33f1c; } .btn.delete { border-color: #a12108; background: transparent; color: #d12b0b; } .btn.delete:hover, .btn.delete.hover { color: #fff; border-color: #c63216; background: #f33f1c; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn.delete:active, .btn.delete.active { border-color: #6b1606; background: #af2409; } .btn.delete.active { -webkit-animation: ripple 0.1s 1 linear; -moz-animation: ripple 0.1s 1 linear; animation: ripple 0.1s 1 linear; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .btn.delete.active .anim.loading { border-color: #6b1606; border-bottom-color: #f33f1c; } .btn.disabled { cursor: not-allowed; border: solid 1px #d1d1d1; background: #f7f7f7; color: gray; } .btn.disabled:hover, .btn.disabled:active, .btn.disabled:focus { color: gray; border: solid 1px #d1d1d1; cursor: not-allowed; background: #f7f7f7; } .btn.disabled:hover .anim.loading, .btn.disabled:active .anim.loading, .btn.disabled:focus .anim.loading { display: none; } .btn.upload { padding-left: 30px; background: transparent; border: solid 1px #d1d1d1; color: #4d4d4d; } .btn.upload:before { position: absolute; left: 5px; font-size: 20px; content: 'U'; color: #4d4d4d; font-family: 'icon'; top: 2px; } .btn.upload.finished { background: #ae6787; color: #fff; } .btn.upload.finished:before { display: none; } .btn.upload .finished { display: block; width: 20px; height: 20px; color: #fff; position: absolute; top: 5px; font-size: 18px; right: 5px; -webkit-animation: popIn 0.5s 1 ease; -moz-animation: popIn 0.5s 1 ease; animation: popIn 0.5s 1 ease; } .btn.upload .finished:before { font-family: 'icon'; content: 'w'; color: #fff; } .btn.default { background: #c4c4c4; color: #fff; border-color: #b7b7b7; } .btn.default:hover, .btn.default.hover { background: #ababab; border-color: #9e9e9e; } .btn.edit { position: absolute; top: 23px; right: 40px; padding: 5px 10px; height: 30px; line-height: 20px; background: transparent; color: #8e004d; border-radius: 6px; width: auto !important; border: none; margin: 0 !important; min-width: 80px; font-size: 14px; } .btn.edit:hover { color: #fff; background: #8e004d; } .btn { overflow: hidden; } .btn:hover { text-decoration: none; } .btn input { position: absolute !important; text-align: left !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 10px !important; box-sizing: border-box !important; font-size: inherit !important; color: inherit !important; background: transparent !important; border: 0 !important; outline: 0 !important; } .anim.loading { display: block; font-size: 10px; position: absolute; right: 10px; top: 10px; border-radius: 100px; width: 14px; height: 14px; text-indent: -9999em; border: solid 3px #8e004d; -webkit-animation: loader 1.1s infinite linear; -moz-animation: loader 1.1s infinite linear; animation: loader 1.1s infinite linear; } @-webkit-keyframes loader { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes loader { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(1, 1); } 50% { -webkit-transform: scale(1.05, 1.05); } 100% { -webkit-transform: scale(1, 1); } } @-moz-keyframes ripple { 0% { -moz-transform: scale(1, 1); } 50% { -moz-transform: scale(1.05, 1.05); } 100% { -moz-transform: scale(1, 1); } } @keyframes ripple { 0% { transform: scale(1, 1); } 50% { transform: scale(1.05, 1.05); } 100% { transform: scale(1, 1); } } #navbar { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background: #8e004d; color: #fff; height: 50px; position: absolute; z-index: 2; top: 130px; left: 0; right: 0; box-sizing: border-box; } #navbar.sticky { position: fixed; top: 0; } #navbar li:before { display: none; margin: 0; } #navbar .wrp > ul { margin: 0; } #navbar .wrp > ul > li { position: relative; color: #fff; display: block; float: left; margin-left: 24px; box-sizing: border-box; height: 50px; line-height: 30px; font-size: 18px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #navbar .wrp > ul > li:first-child { cursor: pointer; font-size: 18px; padding: 7px 10px 10px 10px; line-height: 25px; height: 47px; margin-top: 3px; margin-left: 0; border-radius: 4px 4px 0 0; } #navbar .wrp > ul > li:first-child:after { float: right; margin-left: 5px; margin-top: 4px; font-family: 'icon'; content: 'v'; } #navbar .wrp > ul > li:first-child:hover { color: #4d4d4d; background: #f7f7f7; } #navbar .wrp > ul > li a { padding: 10px; box-sizing: border-box; height: 50px; display: block; font-size: 18px; color: #fff; -webkit-transition: background 0.25s ease-out; -moz-transition: background 0.25s ease-out; transition: background 0.25s ease-out; } #navbar .wrp > ul > li a:hover, #navbar .wrp > ul > li a .current { text-decoration: none; -webkit-transition: background 0.25s ease-out; -moz-transition: background 0.25s ease-out; transition: background 0.25s ease-out; background: #c10069; } #navbar .wrp > ul > li a em { font-size: 12px; display: block; } #navbar .wrp > ul > li ul { display: none; position: absolute; } #navbar .wrp > ul > li:hover ul { width: 250px; display: block; background: #f7f7f7; top: 47px; left: 0; box-sizing: border-box; } #navbar .wrp > ul > li:hover ul > li { margin: 0; position: static; } #navbar .wrp > ul > li:hover ul > li a { box-sizing: border-box; width: 100%; font-size: 16px; line-height: 16px; color: #4d4d4d; display: block; border: solid 1px #b3b3b3; border-top: none; padding: 10px; height: 50px; } #navbar .wrp > ul > li:hover ul > li.menu-item-more:hover a { background: #8e004d; color: #fff; border: solid 1px #5b0031; border-top: none; } #navbar .wrp > ul > li:hover ul > li:hover a { background: #fff; border-right-color: #fff; } #navbar .wrp > ul > li:hover ul > li:hover ul { min-height: 400px; box-sizing: border-box; padding: 15px; display: block; position: absolute; left: 250px; top: 0; background: #fff; width: 350px; border: solid 1px #b3b3b3; border-left: none; border-top: none; } #navbar .wrp > ul > li:hover ul > li:hover ul li a { display: block; background: #f7f7f7; border: none; height: 30px; margin-bottom: 5px; border-radius: 2px; line-height: 14px; padding: 8px 10px; } #navbar .wrp > ul > li:hover ul > li:hover ul li a:after { float: right; content: '>'; } #navbar .wrp > ul > li:hover ul > li:hover ul li a:hover { background: #ff5bb4; } #navbar .wrp > ul > li:hover ul > li ul { display: none; } #navbar .service-menu { float: right; color: #fff; } #navbar .service-menu div { cursor: pointer; padding: 0 10px; height: 47px; margin-top: 3px; font-size: 18px; border-radius: 6px 6px 0 0; display: block; line-height: 47px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; color: #fff; } #navbar .service-menu div:after { float: right; margin-left: 5px; margin-top: 4px; font-family: 'icon'; content: 'v'; } #navbar .service-menu div:hover { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; color: #4d4d4d; background: #f7f7f7; } #navbar .service-menu div:hover ul { display: block; } #navbar .service-menu ul { position: absolute; right: 0; top: 50px; background: #f7f7f7; width: 250px; display: none; box-sizing: border-box; } #navbar .service-menu ul li { margin: 0; position: static; } #navbar .service-menu ul li a { box-sizing: border-box; width: 100%; font-size: 16px; color: #4d4d4d; display: block; border: solid 1px #b3b3b3; border-top: none; padding: 10px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #navbar .service-menu ul li:hover a { text-decoration: none; background: #fff; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .modal { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: absolute; background: #fff; border: solid 1px #b3b3b3; padding: 10px; z-index: 5; display: none; } .modal.active { display: block; } .modal.login { width: 260px; min-height: 90px; margin: -300px 0 0 -45px; position: fixed; left: 50%; display: block; opacity: 0; top: -200%; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-animation: loginmessage 4.5s ease-out 1; -moz-animation: loginmessage 4.5s ease-out 1; -ms-animation: loginmessage 4.5s ease-out 1; animation: loginmessage 4.5s ease-out 1; } .modal.login h1 { margin-bottom: 10px; } .modal.login p { margin-bottom: 0; } #overlay { cursor: not-allowed; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 4; position: fixed; top: 200%; right: 0; left: 0; bottom: 0; height: 100%; background: rgba(77, 77, 77, 0.5); -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; opacity: 0; } #overlay.active { -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; opacity: 1; top: 0; } @-webkit-keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } @-moz-keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } @-ms-keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } @keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } .modal-cart { display: none; position: absolute; z-index: 5; } .modal-header { padding: 2px 16px; background-color: #5cb85c; color: white; } .modal-body { padding: 2px 16px; } .modal-footer { padding: 2px 16px; background-color: #5cb85c; color: white; } .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; max-height: 500px; overflow-y: scroll; } .modal-content #modal-text { position: relative; } .modal-content #modal-text article { padding-left: 0; } .modal-content .close { float: right; color: #aaaaaa; font-size: 28px; font-weight: bold; content: "x"; z-index: 6; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } @-webkit-keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } @keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } #actionModal.forNews { display: flex; align-items: center; justify-content: center; } #actionModal.forNews .modal.newsModal { position: relative; z-index: 100; top: inherit; right: inherit; bottom: inherit; left: inherit; } #actionModal.forNews .modal.newsModal.type1 { height: auto; background-color: #fff; width: 1150px; padding: 0 0 0 0; border: none; } #actionModal.forNews .modal.newsModal.type1 img { width: 100%; height: auto; border-radius: 5px 5px 0 0; } #actionModal.forNews .modal.newsModal.type1 .modal-title { background: none; text-align: left; border-radius: 0; padding: 10px 20px 5px 20px; box-sizing: border-box; } #actionModal.forNews .modal.newsModal.type1 .modal-title h3 { font-size: 24px; color: #8e004d; font-weight: 700; text-transform: none; margin: 0 0 0 0; } #actionModal.forNews .modal.newsModal.type1 .modal-title .subtitle { font-size: 16px; margin-bottom: 0; color: #4d4d4d; } #actionModal.forNews .modal.newsModal.type1 .modal-body { padding: 10px 20px 10px 20px; } #actionModal.forNews .modal.newsModal.type1 .linkwrapper { display: block; padding: 10px 20px 10px 20px; box-sizing: border-box; position: relative; top: inherit; right: inherit; width: auto; height: auto; text-align: left; border-radius: 0; background: none; cursor: inherit; } #actionModal.forNews .modal.newsModal.type1 .linkwrapper .btn { margin-bottom: 0; } #actionModal.forNews .modal.newsModal.type2 { height: auto; background-color: #fff; width: 1150px; padding: 0 0 0 0; border: none; display: flex; align-items: center; } #actionModal.forNews .modal.newsModal.type2 .imagewrapper, #actionModal.forNews .modal.newsModal.type2 .contentwrapper { width: 50%; } #actionModal.forNews .modal.newsModal.type2 .imagewrapper img { width: 100%; border-radius: 4px 0 0 4px; } #actionModal.forNews .modal.newsModal.type2 .contentwrapper { padding: 20px; box-sizing: border-box; } #actionModal.forNews .modal.newsModal.type2 .contentwrapper .modal-title { padding: 0 0 0 0; background: none; text-align: left; margin-bottom: 24px; } #actionModal.forNews .modal.newsModal.type2 .contentwrapper .modal-title h3 { font-size: 28px; font-weight: 100; color: #ae6787; margin: 0 0 0 0; } #actionModal.forNews .modal.newsModal.type2 .contentwrapper .modal-title .subtitle { font-size: 12px; margin-bottom: 0; color: #4d4d4d; } #actionModal.forNews .modal.newsModal.type2 .contentwrapper .modal-body { padding: 0 0 0 0; } #actionModal.forNews .modal.newsModal.type2 .contentwrapper .linkwrapper { display: block; padding: 20px 0 0 0; box-sizing: border-box; position: relative; top: inherit; right: inherit; width: auto; height: auto; text-align: left; border-radius: 0; background: none; cursor: inherit; } #actionModal.forNews .modal.newsModal.type2 .contentwrapper .linkwrapper .btn { margin-bottom: 0; } #actionModal.forNews .modal.newsModal.type3 { height: auto; background-color: #fff; width: 600px; padding: 0 0 0 0; border: none; } #actionModal.forNews .modal.newsModal.type3 img { width: 100%; height: auto; border-radius: 0 0 0 0; } #actionModal.forNews .modal.newsModal.type3 .modal-title { background: none; text-align: center; border-radius: 0; padding: 20px 20px 20px 20px; box-sizing: border-box; } #actionModal.forNews .modal.newsModal.type3 .modal-title h3 { font-size: 24px; color: #8e004d; font-weight: 700; text-transform: none; margin: 0 0 0 0; } #actionModal.forNews .modal.newsModal.type3 .modal-title .subtitle { font-size: 16px; margin-bottom: 0; color: #4d4d4d; } #actionModal.forNews .modal.newsModal.type3 .modal-body { padding: 20px 20px 20px 20px; text-align: center; } #actionModal.forNews .modal.newsModal.type3 .linkwrapper { display: block; padding: 0 20px 20px 20px; box-sizing: border-box; position: relative; top: inherit; right: inherit; width: auto; height: auto; border-radius: 0; background: none; cursor: inherit; text-align: center; } #actionModal.forNews .modal.newsModal.type3 .linkwrapper .btn { margin-bottom: 0; } #actionModal.forNews .modal.newsModal.type4 { background-color: #fff; max-width: 600px; height: auto; padding: 0 0 0 0; border: none; } #actionModal.forNews .modal.newsModal.type4 img { width: 100%; height: 100%; border-radius: 4px 4px 4px 4px; } #actionModal.forNews .modal.newsModal.type4 .contentwrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 4px 4px 4px 4px; } #actionModal.forNews .modal.newsModal.type4 .contentwrapper .modal-title { display: block; width: 100%; background: none; text-align: center; border-radius: 0; padding: 20px 20px 20px 20px; box-sizing: border-box; } #actionModal.forNews .modal.newsModal.type4 .contentwrapper .modal-title h3 { font-size: 24px; color: #8e004d; font-weight: 700; text-transform: none; margin: 0 0 0 0; } #actionModal.forNews .modal.newsModal.type4 .contentwrapper .modal-title .subtitle { font-size: 16px; margin-bottom: 0; color: #4d4d4d; } #actionModal.forNews .modal.newsModal.type4 .contentwrapper .modal-body { display: block; width: 100%; padding: 0 20px 20px 20px; text-align: center; } #actionModal.forNews .modal.newsModal.type4 .contentwrapper .linkwrapper { display: block; padding: 0 20px 20px 20px; box-sizing: border-box; position: relative; top: inherit; right: inherit; width: auto; height: auto; border-radius: 0; background: none; cursor: inherit; text-align: center; } #actionModal.forNews .modal.newsModal.type4 .contentwrapper .btn { margin-bottom: 0; } #overlay { cursor: not-allowed; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 4; position: fixed; top: 200%; right: 0; left: 0; bottom: 0; height: 100%; background: rgba(77, 77, 77, 0.5); -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; opacity: 0; } #overlay.active { -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; opacity: 1; top: 0; } @-webkit-keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } @-moz-keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } @-ms-keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } @keyframes loginmessage { 0% { top: 0; opacity: 0; } 20% { top: 50%; opacity: 1; } 60% { top: 50%; opacity: 1; } 100% { top: -200%; opacity: 0; } } .modal-cart { display: none; position: absolute; z-index: 5; } .modal-header { padding: 2px 16px; background-color: #5cb85c; color: white; } .modal-body { padding: 2px 16px; } .modal-footer { padding: 2px 16px; background-color: #5cb85c; color: white; } .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; max-height: 500px; overflow-y: scroll; } .modal-content #modal-text { position: relative; } .modal-content #modal-text article { padding-left: 0; } .modal-content .close { float: right; color: #aaaaaa; font-size: 28px; font-weight: bold; content: "x"; z-index: 6; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } @-webkit-keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } @keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } #addressBookModalAbsender, #addressBookModalLiefer { font-weight: 300; } #actionModal.addressBookModal .modal { padding: 0 0 0 0; width: 1200px; background: #fff; } #actionModal.addressBookModal .modal .modal-title { padding: 10px 20px; background: #8e004d; color: #fff; text-align: left; } #actionModal.addressBookModal .modal .modal-title h3 { font-weight: 700; } #actionModal.addressBookModal .modal .modal-body tr td { text-align: left; } #actionModal.addressBookModal .modal .modal-body tr td:hover, #actionModal.addressBookModal .modal .modal-body tr td:focus, #actionModal.addressBookModal .modal .modal-body tr td:active { cursor: pointer; } #actionModal.addressBookModal .modal .modal-body tr td .addAdressToSettings { font-size: 18px; } #actionModal.addressBookModal .modal .modal-body tr td .addAdressToSettings:hover, #actionModal.addressBookModal .modal .modal-body tr td .addAdressToSettings:focus, #actionModal.addressBookModal .modal .modal-body tr td .addAdressToSettings:active { text-decoration: none; } #actionModal.addressBookModal .modal .modal-body tr th { text-align: left; color: black; } #slider { width: auto; position: relative; z-index: 0; } #slider .slide { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #slider .slide img { position: relative; z-index: 0; width: 100%; height: auto; } #slider .slide figcaption { width: 100%; z-index: 1; position: absolute; left: 0; top: 80px; } #slider .slide figcaption strong { padding: 0 10px; font-family: 'regular'; display: inline-block; background: rgba(142, 0, 77, 0.5); margin-bottom: 10px; font-size: 36px; color: #fff; } #slider .slide figcaption p { display: block; } #slider .slide figcaption em { font-size: 18px; color: #4d4d4d; } #slider .slide.active figcaption { -webkit-animation: sliderCaption 0.35s 0s 1 ease-in; -moz-animation: sliderCaption 0.35s 0s 1 ease-in; -ms-animation: sliderCaption 0.35s 0s 1 ease-in; animation: sliderCaption 0.35s 0s 1 ease-in; } #slider .wrp { height: 100%; } #slider .side-nav { position: absolute; z-index: 2; display: block; width: 40px; height: 40px; top: 50%; margin-top: -20px; cursor: pointer; } #slider .side-nav:before { content: ''; font-family: 'icon'; width: 37px; height: 37px; display: block; line-height: 37px; text-align: center; font-size: 45px; text-indent: -4px; color: rgba(77, 77, 77, 0.5); border-radius: 40px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #slider .side-nav:hover:before { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; background: rgba(142, 0, 77, 0.5); color: #fff; } #slider .side-nav.slide-left { left: -80px; } #slider .side-nav.slide-left:before { content: 'l'; } #slider .side-nav.slide-right { right: -80px; } #slider .side-nav.slide-right:before { content: 'r'; } #slider #controlNav { margin: 0; position: absolute; z-index: 1; bottom: 20px; text-align: center; width: 100%; display: block; } #slider #controlNav a { width: 8px; height: 8px; border-radius: 6px; display: inline-block; margin: 0 5px; background: #f7f7f7; border: solid 1px #c4c4c4; } #slider #controlNav a.current { background: #ff5bb4; border: solid 1px #8e004d; } @-webkit-keyframes sliderCaption { 0% { left: -40px; } 100% { left: 0; } } @-moz-keyframes sliderCaption { 0% { left: -40px; } 100% { left: 0; } } @-ms-keyframes sliderCaption { 0% { left: -40px; } 100% { left: 0; } } @keyframes sliderCaption { 0% { left: -40px; } 100% { left: 0; } } section .sidebar { box-sizing: border-box; height: auto; overflow: hidden; float: left; background: #fff; padding: 10px 10px 0 10px; width: 280px; } section .sidebar li { display: block; } section .sidebar li a { color: #4d4d4d; font-size: 16px; border-bottom: solid 1px #cdcdcd; display: block; padding: 15px 10px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } section .sidebar li a:hover { text-decoration: none; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; background: #ff5bb4; border-bottom-color: #8e004d; color: #8e004d; } section .sidebar li.current a { background: #8e004d; color: #fff; border-bottom-color: #8e004d; } section .sidebar li:last-child a { border: none; } section .sidebar li:before { display: none; } .cat_listing .sidebar { height: auto; padding: 0; width: 250px; margin-right: 20px; } .breadcrumb { padding: 5px 0; } .breadcrumb li { float: left; display: block; margin-right: 5px; } .breadcrumb li a { font-size: 14px; display: block; padding: 5px 10px; color: #4d4d4d; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .breadcrumb li a:after { font-family: 'icon'; font-size: 14px; color: #4d4d4d; float: right; margin-left: 5px; content: 'v'; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .breadcrumb li:last-child a, .breadcrumb li:hover a { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; color: #8e004d; } .breadcrumb li:before { display: none; } .hint { background: #f5e9e7; color: #d12b0b; padding: 15px 30px; font-size: 18px; box-sizing: border-box; margin-bottom: 25px; border: solid 1px #d12b0b; } .hint.wrp, .hint .wrp { width: 100%; } .hint strong { display: inline-block; font-size: 18px; font-family: 'bold'; color: #d12b0b !important; } .hint li { color: #d12b0b; } .hint ul { margin: 0; } .hint li:before { background: #d12b0b; color: #d12b0b; } .hint.message { background: #f7f7f7; padding: 10px; color: #4d4d4d; display: block; box-sizing: border-box; border: solid 1px #dedede; font-size: 16px; } .hint.message.success { border-color: #ae6787; background: white; color: #ae6787; } .hint.message.success * { color: #ae6787; } .hint.message.success li { color: #ae6787; } .hint.message.success li:before { display: none; } .hint.message.success strong { color: #ae6787; } .hint.message * { color: #4d4d4d; } .hint.message li { color: #4d4d4d; } .hint.message li:before { display: none; } .hint.message strong { color: #4d4d4d !important; } .hint.message .btn.success#kundenholensubmit { color: #fff; margin-left: 20px; } .hint_msg { background: #f5e9e7; color: #d12b0b; padding: 15px 30px; font-size: 18px; box-sizing: border-box; margin-bottom: 25px; border: solid 1px #d12b0b; } .hint_msg.wrp, .hint_msg .wrp { width: 100%; } .hint_msg strong { display: inline-block; font-size: 18px; font-family: 'bold'; color: #d12b0b !important; } .hint_msg li { color: #d12b0b; } .hint_msg ul { margin: 0; } .hint_msg li:before { background: #d12b0b; color: #d12b0b; } .hint_msg.message { background: #f7f7f7; padding: 10px; color: #4d4d4d; display: block; box-sizing: border-box; border: solid 1px #dedede; font-size: 16px; } .hint_msg.message.success { border-color: #ae6787; background: white; color: #ae6787; } .hint_msg.message.success * { color: #ae6787; } .hint_msg.message.success li { color: #ae6787; } .hint_msg.message.success li:before { display: none; } .hint_msg.message.success strong { color: #ae6787; } .hint_msg.message * { color: #4d4d4d; } .hint_msg.message li { color: #4d4d4d; } .hint_msg.message li:before { display: none; } .hint_msg.message strong { color: #4d4d4d !important; } .hint_msg.message .btn.success#kundenholensubmit { color: #fff; margin-left: 20px; } .error_msg { color: #d12b0b; font-size: 14px; display: block; margin-bottom: 10px; } .error_msg strong { display: block; font-size: 18px; margin-bottom: 10px; font-family: 'bold'; color: #d12b0b !important; } form h1, form h2, form h3, form h4, form h5, form h6 { position: relative; display: block; width: 100%; margin-bottom: 20px; } form h1:after, form h2:after, form h3:after, form h4:after, form h5:after, form h6:after { width: 100%; } form small { font-size: 14px; display: block; color: #737373; } form h2, form h3, form h4, form h5, form h6 { line-height: 22px; position: relative; text-align: right; color: #4d4d4d; font-family: bold; font-size: 14px; width: 185px; padding-right: 17px; box-sizing: border-box; display: block; margin: 40px 0 20px; } form h2:after, form h3:after, form h4:after, form h5:after, form h6:after { top: 3px; left: 178px; position: absolute; float: right; content: ''; border-bottom: solid 1px #b3b3b3; margin: 10px; width: 350px; } form article { background: #fff; width: 610px; float: left; box-sizing: border-box; padding: 20px; margin-bottom: 30px; } form #sidebar { background: #fff; float: right; width: 500px; box-sizing: border-box; padding: 30px 50px; } form #sidebar strong, form #sidebar h1, form #sidebar h2, form #sidebar h3, form #sidebar h4, form #sidebar h5, form #sidebar h6 { text-align: left; } form #sidebar strong:after, form #sidebar h1:after, form #sidebar h2:after, form #sidebar h3:after, form #sidebar h4:after, form #sidebar h5:after, form #sidebar h6:after { display: none; } form #sidebar h4 strong { display: block; } form #sidebar input, form #sidebar button.btn, form #sidebar a.btn, form #sidebar textarea { width: 100%; margin-bottom: 5px; } form #sidebar input[type="checkbox"] { display: inline-block; margin-right: 5px; margin-top: 5px; width: auto; } form #sidebar #customerlogo_billing { position: relative; } form #sidebar #customerlogo_billing img { display: block; margin: 20px auto; } form table { width: 100%; } form table td { width: 50%; } form table tr.total { color: #ae6787; } form fieldset { line-height: 40px; color: #4d4d4d; margin-bottom: 10px; position: relative; } form label { white-space: pre; text-align: right; min-height: 1px; color: #4d4d4d; font-size: 16px; float: left; width: 185px; padding-right: 17px; box-sizing: border-box; display: block; line-height: 40px; } form label img { float: left; margin: 10px 10px 0 0; } form label small { color: gray; font-size: 12px; display: block; line-height: 15px; } form input:not(.btn), form select, form .non-input-field, form textarea { background: #f7f7f7; font-family: 'bold'; border-radius: 2px !important; border: solid 1px #9a9a9a; height: 40px; box-sizing: border-box; padding: 10px; color: #4d4d4d; font-size: 14px; width: 350px; float: left; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } form input:not(.btn).disabled, form select.disabled, form .non-input-field.disabled, form textarea.disabled { background-color: transparent; border-color: #fff; color: gray; } form input:not(.btn):focus, form select:focus, form .non-input-field:focus, form textarea:focus { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; border: solid 1px #8e004d; color: #8e004d; } form input:not(.btn):hover, form select:hover, form .non-input-field:hover, form textarea:hover { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; background-color: #f7f7f7; cursor: pointer; } form input:not(.btn):focus:hover, form select:focus:hover, form .non-input-field:focus:hover, form textarea:focus:hover { cursor: text; } form input:not(.btn).has-spare, form select.has-spare, form .non-input-field.has-spare, form textarea.has-spare { border-radius: 2px 2px 0 0 !important; } form input:not(.btn).spare, form select.spare, form .non-input-field.spare, form textarea.spare { border-top: none; border-radius: 0 0 2px 2px !important; } form .non-input-field { border: none; background: transparent; height: auto; cursor: default; } form .non-input-field:hover { cursor: default; background: #fff; } form .non-input-field input[type="checkbox"] { float: none !important; margin-top: 0 !important; } form input[type="checkbox"] + .non-input-field { width: 330px; } form input[type="file"] { background: transparent; border: none; font-family: 'regular'; width: auto; } form input[type="file"]:hover, form input[type="file"]:active { background: transparent; } form input[name="cmd_calc"], form button[name="cmd_calc"] { position: absolute; right: 35px; border-radius: 2px; float: right; width: 40px; min-width: 40px; height: 40px; text-indent: -9999px; } form input[name="cmd_calc"]:before, form button[name="cmd_calc"]:before { font-family: 'icon'; width: 20px; height: 20px; content: 'o'; color: #fff; display: block; text-indent: -4px; font-size: 28px; line-height: 22px; text-align: center; } form .measurement input { width: 110px; } form .measurement .value { display: block; height: 40px; width: 40px; line-height: 40px; float: left; text-align: center; font-size: 12px; color: #4d4d4d; } form .col-2 input { width: 170px; } form .col-2 input:nth-of-type(1) { margin-right: 10px; } form input[type="checkbox"] { cursor: pointer; line-height: 30px; width: 15px; height: 15px; margin-top: 13px; margin-right: 10px; } form select { position: relative; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background: url("../assets/elements_select.png") no-repeat 98% center #f7f7f7; background-size: 25px 25px; } form select option { cursor: pointer; } form textarea { height: 220px; -webkit-resize: none; -moz-resize: none; -ms-resize: none; resize: none; } form > .btn:not([name="cmd_calc"]), form article .btn:not([name="cmd_calc"]), form > section:not(#total_block) > .btn:not([name="cmd_calc"]) { width: 350px; margin-left: 185px; margin-bottom: 10px; } form .requirement, form .suffix { color: #4d4d4d; line-height: 40px; display: block; float: left; width: 10px; font-size: 18px; margin-left: 10px; } form .suffix { font-size: 14px; color: #737373; } form .info { cursor: help; position: relative; display: block; float: left; width: 20px; height: 40px; } form .info:before { display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 20px; font-family: 'icon'; content: '?'; color: gray; } form .info:hover:before { color: #8e004d; } form .info .tooltip { cursor: text; left: 40px; top: 0; min-width: 220px; max-width: 360px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; position: absolute; z-index: 1; padding: 7px 10px; border-radius: 2px; border: solid 1px #b3b3b3; box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); visibility: hidden; opacity: 0; background: #fff; } form .info .tooltip strong { font-size: 14px; } form .info .tooltip p { margin: 0; font-size: 12px; line-height: 18px; } form .info .tooltip ul { margin-bottom: 5px; } form .info .tooltip ul li { font-size: 12px; line-height: 18px; } form .info:hover .tooltip { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; opacity: 1; visibility: visible; } #preloader { right: 0; bottom: 0; display: none; position: fixed; width: 100%; height: 100%; padding: 0; background: rgba(0, 0, 0, 0.3); z-index: 10; } #preloader.active { display: block; } #preloader .anim.loading { right: 48%; top: 50%; width: 60px; height: 60px; border: solid 5px #8e004d; border-bottom-color: #fff; } #delivery_address, #divergent_address { clear: both; margin-top: 60px; } #cart_teillieferung { padding-top: 50px; } #cart_teillieferung .col_left { padding: 0 !important; } #cart_teillieferung .rest { margin-left: 185px; font-size: 14px; line-height: 21px; } #cart_teillieferung .rest strong { font-size: 14px; line-height: 21px; } #cart_teillieferung fieldset.saveSettings { margin: 25px 0; float: left !important; text-align: left !important; } #cart_teillieferung fieldset.saveSettings button { float: none; margin-left: 185px; } #cart_teillieferung table { font-size: 12px; } #cart_teillieferung table .deletePartialDelivery { color: darkred; transition: 100ms ease-in font-weight; } #cart_teillieferung table .deletePartialDelivery:hover { font-weight: 600; } #cart_teillieferung .inputWrapper { margin-bottom: 50px; } #cart_teillieferung.detail_page fieldset > label { width: 185px !important; text-align: right !important; } @media screen and (max-width: 1023px) { #cart_teillieferung.detail_page fieldset input { width: 241px !important; } #cart_teillieferung.detail_page fieldset button { width: 240px; } } @media screen and (max-width: 500px) { #cart_teillieferung.detail_page .rest { margin-left: 0; } #cart_teillieferung.detail_page fieldset button { float: right; margin-left: 0; } #cart_teillieferung.detail_page fieldset > label, #cart_teillieferung.detail_page fieldset > input { text-align: left !important; float: none !important; width: 100% !important; } table thead { display: none; } table tbody tr td span:before { display: inline-block; width: 90px; } table tbody tr td:nth-child(1) span:before { content: "Firma:"; } table tbody tr td:nth-child(2) span:before { content: "Nachname:"; } table tbody tr td:nth-child(3) span:before { content: "PLZ:"; } table tbody tr td:nth-child(4) span:before { content: "Auflage:"; } table tbody tr td:nth-child(5) span:before { content: "Versand:"; } table tbody tr td:nth-child(6) a:after { content: "Löschen"; display: inline-block; vertical-align: middle; } table tbody tr td:nth-child(6) a:before { vertical-align: middle; display: inline-block; } } .upload_field progress { width: 100%; display: block; } .upload_field .text_percent { color: #834661; text-align: right; display: block; margin: 5px 0 15px 0; } .upload_field .text_filename { font-size: 14px; line-height: 18px; display: block; } #popup_offer h1, #popup_recommend h1 { margin-bottom: 24px; } #popup_offer .btn.success, #popup_recommend .btn.success { margin-top: 20px; } #popup_offer section, #popup_recommend section { padding: 15px; background: #f7f7f7; } #popup_offer section .btn, #popup_recommend section .btn { margin-left: 0 !important; } #popup_offer section .btn, #popup_offer section input, #popup_recommend section .btn, #popup_recommend section input { width: 100% !important; } #popup_recommend form { width: 800px; } #popup_recommend form fieldset { width: 50%; float: left; } #ds_popup_overlay { top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 10; -webkit-animation: fadeIn 0.3s 1 ease; -moz-animation: fadeIn 0.3s 1 ease; animation: fadeIn 0.3s 1 ease; -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } #ds_popup_overlay:after { top: 50%; left: 50%; content: ''; display: block; font-size: 10px; position: absolute; border-radius: 100px; width: 14px; height: 14px; text-indent: -9999em; border: solid 3px #fff; border-bottom-color: transparent; -webkit-animation: loader 1.1s infinite linear; -moz-animation: loader 1.1s infinite linear; animation: loader 1.1s infinite linear; } #ds_popup_overlay:before { cursor: pointer; content: 'x'; position: absolute; top: 20px; font-family: 'icon'; right: 20px; color: #fff; font-size: 200%; } #ds_popup_overlay.closing { -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; opacity: 0; } #ds_popup { max-height: 70%; overflow: hidden; min-width: 350px; padding: 15px; background: #fff; position: fixed; z-index: 21; left: 50%; top: 50%; border-radius: 6px; border: solid 1px #f7f7f7; -webkit-animation: popIn 0.5s 1 ease; -moz-animation: popIn 0.5s 1 ease; animation: popIn 0.5s 1 ease; -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } #ds_popup.closing { -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; opacity: 0; top: -100%; } #ds_popup .btn { margin-bottom: 5px; } .icon:before { font-family: icon, sans-serif; text-align: center; } .icon.delivery:before { content: 'b'; } .icon.right:before { content: 'r'; } .icon.delivery_address:before { content: '@'; } .icon.payment_address:before { content: 'p'; } .icon.divergent_address:before { content: '@'; } .icon.payment:before { content: 's'; } .icon.coupon:before { content: 'i'; } .icon.next:before { content: 'r'; } .icon.previous:before { content: 'l'; } .icon.delete:before { display: inline-block; margin-right: 5px; color: #d12b0b; content: 'x'; } .picker { font-size: 16px; text-align: left; line-height: 1.2; color: #000000; position: absolute; z-index: 10000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .picker__input { cursor: default; } .picker__input.picker__input--active { border-color: #0089ec; } .picker__holder { width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .picker { width: 100%; } .picker__holder { position: absolute; background: #ffffff; border: 1px solid #aaaaaa; border-top-width: 0; border-bottom-width: 0; border-radius: 0 0 5px 5px; box-sizing: border-box; min-width: 176px; max-width: 466px; max-height: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; -webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg); transform: translateY(-1em) perspective(600px) rotateX(10deg); transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s; } .picker__frame { padding: 1px; } .picker__wrap { margin: -1px; } .picker--opened .picker__holder { max-height: 25em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; border-top-width: 1px; border-bottom-width: 1px; -webkit-transform: translateY(0) perspective(600px) rotateX(0deg); transform: translateY(0) perspective(600px) rotateX(0deg); transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s; box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12); } .picker__box { padding: 0 1em; } .picker__header { text-align: center; position: relative; margin-top: .75em; } .picker__month, .picker__year { font-weight: 500; display: inline-block; margin-left: .25em; margin-right: .25em; } .picker__year { color: #999999; font-size: .8em; font-style: italic; } .picker__select--month, .picker__select--year { border: 1px solid #b7b7b7; height: 2em; padding: .5em; margin-left: .25em; margin-right: .25em; } @media (min-width: 24.5em) { .picker__select--month, .picker__select--year { margin-top: -0.5em; } .picker__select--month { width: 35%; } .picker__select--year { width: 22.5%; } .picker__select--month:focus, .picker__select--year:focus { border-color: #0089ec; } .picker__nav--prev, .picker__nav--next { position: absolute; padding: .5em 1.25em; width: 1em; height: 1em; box-sizing: content-box; top: -0.25em; } } @media (min-width: 24.5em) { .picker__nav--prev, .picker__nav--next { top: -0.33em; } .picker__nav--prev { left: -1em; padding-right: 1.25em; } } @media (min-width: 24.5em) { .picker__nav--prev { padding-right: 1.5em; } .picker__nav--next { right: -1em; padding-left: 1.25em; } } @media (min-width: 24.5em) { .picker__nav--next { padding-left: 1.5em; } .picker__nav--prev:before, .picker__nav--next:before { content: " "; border-top: .5em solid transparent; border-bottom: .5em solid transparent; border-right: 0.75em solid #000000; width: 0; height: 0; display: block; margin: 0 auto; } .picker__nav--next:before { border-right: 0; border-left: 0.75em solid #000000; } .picker__nav--prev:hover, .picker__nav--next:hover { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__nav--disabled, .picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover { cursor: default; background: none; border-right-color: #f5f5f5; border-left-color: #f5f5f5; } .picker__table { text-align: center; border-collapse: collapse; border-spacing: 0; table-layout: fixed; font-size: inherit; width: 100%; margin-top: .75em; margin-bottom: .5em; } } @media (min-height: 33.875em) { .picker__table { margin-bottom: .75em; } .picker__table td { margin: 0; padding: 0; } .picker__weekday { width: 14.285714286%; font-size: .75em; padding-bottom: .25em; color: #999999; font-weight: 500; } } @media (min-height: 33.875em) { .picker__weekday { padding-bottom: .5em; } .picker__day { padding: .3125em 0; font-weight: 200; border: 1px solid transparent; } .picker__day--today { position: relative; } .picker__day--today:before { content: " "; position: absolute; top: 2px; right: 2px; width: 0; height: 0; border-top: 0.5em solid #0059bc; border-left: .5em solid transparent; } .picker__day--disabled:before { border-top-color: #aaaaaa; } .picker__day--outfocus { color: #dddddd; } .picker__day--infocus:hover, .picker__day--outfocus:hover { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__day--highlighted { border-color: #0089ec; } .picker__day--highlighted:hover, .picker--focused .picker__day--highlighted { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { background: #0089ec; color: #ffffff; } .picker__day--disabled, .picker__day--disabled:hover, .picker--focused .picker__day--disabled { background: #f5f5f5; border-color: #f5f5f5; color: #dddddd; cursor: default; } .picker__day--highlighted.picker__day--disabled, .picker__day--highlighted.picker__day--disabled:hover { background: #bbbbbb; } .picker__footer { text-align: center; } .picker__button--today, .picker__button--clear, .picker__button--close { border: 1px solid #ffffff; background: #ffffff; font-size: .8em; padding: .66em 0; font-weight: bold; width: 33%; display: inline-block; vertical-align: bottom; } .picker__button--today:hover, .picker__button--clear:hover, .picker__button--close:hover { cursor: pointer; color: #000000; background: #b1dcfb; border-bottom-color: #b1dcfb; } .picker__button--today:focus, .picker__button--clear:focus, .picker__button--close:focus { background: #b1dcfb; border-color: #0089ec; outline: none; } .picker__button--today:before, .picker__button--clear:before, .picker__button--close:before { position: relative; display: inline-block; height: 0; } .picker__button--today:before, .picker__button--clear:before { content: " "; margin-right: .45em; } .picker__button--today:before { top: -0.05em; width: 0; border-top: 0.66em solid #0059bc; border-left: .66em solid transparent; } .picker__button--clear:before { top: -0.25em; width: .66em; border-top: 3px solid #ee2200; } .picker__button--close:before { content: "\D7"; top: -0.1em; vertical-align: top; font-size: 1.1em; margin-right: .35em; color: #777777; } .picker__button--today[disabled], .picker__button--today[disabled]:hover { background: #f5f5f5; border-color: #f5f5f5; color: #dddddd; cursor: default; } .picker__button--today[disabled]:before { border-top-color: #aaaaaa; } } .rte_container strong { font-family: bold; } .rte_container em { font-style: italic; } .rte_container img { max-width: 1130px; margin-bottom: 2em; } .rte_container a { color: #8e004d !important; } .rte_container s { text-decoration: line-through; } .rte_container u { text-decoration: underline; } .rte_container li { list-style: none; color: #4d4d4d; font-size: 14px; line-height: 24px; position: relative; padding-left: 20px; } .rte_container li:before { content: ''; background: #4d4d4d; margin-right: 14px; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; } .rte_container:before, .rte_container:after { content: ""; display: table; } .rte_container:after { clear: both; } .pagination { height: 40px; } .pagination a, .pagination .current { color: #fff; margin-right: 3px; border-radius: 3px; padding: 5px 0; text-align: center; width: 27px; height: 30px; box-sizing: border-box; background: #8e004d; display: block; float: left; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .pagination a:hover, .pagination .current:hover { text-decoration: none; background: #5b0031; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .pagination .current { font-size: 14px; background: #4d4d4d; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .pagination .current:hover { background: #343434; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .pagination .previous, .pagination .next { position: relative; padding: 0; } .pagination .previous i, .pagination .next i { display: block; width: 100%; height: 100%; } .pagination .previous:before, .pagination .next:before { left: 2px; top: 4px; position: absolute; font-size: 24px; line-height: 22px; text-align: center; color: #fff; } .parallax { margin-top: 50px; height: 200px; overflow: hidden; position: relative; } .parallax img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: absolute; width: 100%; height: auto; } #product_filter form { position: relative; z-index: 3; float: right; } #product_filter h1 { display: none; } #product_filter fieldset { width: 250px; float: left; } #product_filter fieldset label { width: 100px; line-height: 2; height: 30px; } #product_filter fieldset select { width: 150px; padding: 5px 10px; height: 30px; } #product_filter .btn { line-height: 1; float: left; margin-left: 20px; width: 120px; height: 30px; } #related { background: #fff; } #related .item { width: 25%; float: left; box-sizing: border-box; padding: 10px; } #related .item a { padding: 0 0 5px 0; display: block; background: #8e004d; color: #fff; } #related .item a span { display: block; padding: 0 10px; color: #fff; } #related .item img { border-bottom: solid 1px #f7f7f7; margin-bottom: 10px; width: 100%; height: auto; } #path { display: none; } .wrp { width: 1150px; } header.main { height: 130px; margin-bottom: 50px; } header.main .wrp { box-sizing: border-box; padding: 0 10px; } header.main #service-bar { background: #f7f7f7; height: 30px; } header.main #service-bar a { font-size: 12px; } header.main #service-bar span { font-size: 12px; line-height: 30px; float: left; margin-right: 15px; } header.main #service-bar span.label_tel, header.main #service-bar span.label_mail { font-family: 'bold'; color: #8e004d; } header.main #service-bar span.label_tel:before, header.main #service-bar span.label_mail:before { float: left; font-family: 'icon'; color: #4d4d4d; font-size: 15px; content: 'y'; margin-right: 8px; } header.main #service-bar span.label_mail:before { content: 'h'; } header.main #service-bar ul { float: right; margin: 0; } header.main #service-bar ul li { margin-left: 5px; display: inline-block; float: left; line-height: 30px; } header.main #service-bar ul li:before { display: none; } header.main #service-bar ul li a { line-height: 30px; color: #4d4d4d; font-size: 12px; } header.main #brand-logo { margin-top: 15px; clear: both; width: 320px; margin-right: 20px; display: block; float: left; } header.main #brand-logo img { min-width: 80px; max-width: 320px; height: auto; } header.main #customer-menu { position: relative; float: right; height: 65px; margin-top: 15px; } header.main #customer-menu a, header.main #customer-menu > button { background: #f7f7f7; display: block; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 65px; height: 65px; float: left; position: relative; margin-left: 16px; } header.main #customer-menu a.menu-item-login:before, header.main #customer-menu a.menu-item-cart:before, header.main #customer-menu a.menu-item-search:before, header.main #customer-menu > button.menu-item-login:before, header.main #customer-menu > button.menu-item-cart:before, header.main #customer-menu > button.menu-item-search:before { display: block; width: 65px; height: 65px; line-height: 60px; text-align: center; content: 'u'; font-family: 'icon'; color: #4d4d4d; font-size: 30px; } header.main #customer-menu a.menu-item-cart:before, header.main #customer-menu > button.menu-item-cart:before { content: 'c'; } header.main #customer-menu a.menu-item-search:before, header.main #customer-menu > button.menu-item-search:before { content: '+'; } header.main #customer-menu a:hover, header.main #customer-menu > button:hover { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; text-decoration: none; background: #dedede; } header.main #customer-menu a.active, header.main #customer-menu > button.active { background: #ae6787; } header.main #customer-menu a.active:before, header.main #customer-menu > button.active:before { color: #fff; } header.main #customer-menu a.active .count, header.main #customer-menu > button.active .count { color: #ae6787; background: #fff; } header.main #customer-menu a .count, header.main #customer-menu > button .count { position: absolute; top: 5px; right: 5px; background: #8e004d; color: #fff; height: 16px; width: 16px; border-radius: 8px; font-size: 12px; line-height: 16px; text-align: center; display: block; } header.main #customer-menu #search.modal { top: 65px; right: 0px !important; width: 320px; font-size: 12px; } header.main #customer-menu #login.modal, header.main #customer-menu #search.modal { top: 65px; right: 81px; width: 320px; font-size: 12px; } header.main #customer-menu #login.modal a, header.main #customer-menu #login.modal button, header.main #customer-menu #search.modal a, header.main #customer-menu #search.modal button { float: none; text-align: left; background: #f7f7f7; display: block; height: 30px; font-size: 16px; width: 100%; box-sizing: border-box; padding: 3px 10px; border-radius: 2px; color: #4d4d4d; margin: 5px 0 0 0 !important; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } header.main #customer-menu #login.modal a:hover, header.main #customer-menu #login.modal button:hover, header.main #customer-menu #search.modal a:hover, header.main #customer-menu #search.modal button:hover { text-decoration: none; background: #8e004d; color: #fff; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } header.main #customer-menu #login.modal .btn, header.main #customer-menu #search.modal .btn { padding: 10px; width: 100%; margin: 5px 0 0 0; background: #8e004d; color: #fff; height: 40px; line-height: 20px; } header.main #customer-menu #login.modal fieldset, header.main #customer-menu #search.modal fieldset { background: #f7f7f7; } header.main #customer-menu #login.modal fieldset input, header.main #customer-menu #search.modal fieldset input { border: solid 1px #b3b3b3; width: 180px; background: #fff; height: 30px; float: right; margin-right: 10px; margin-top: 5px; padding: 5px 10px; box-sizing: border-box; color: #4d4d4d; font-size: 12px; } header.main #customer-menu #login.modal fieldset label, header.main #customer-menu #search.modal fieldset label { width: 110px; margin-right: 5px; display: inline-block; font-family: 'bold'; font-size: 14px; } header.headline h1 { padding-top: 30px; color: #4d4d4d; font-size: 48px; margin-bottom: 0; } header.headline img { width: 100%; height: auto; } footer.main { background: #f7f7f7; } footer.main a { text-decoration: none; } footer.main .distancer { display: inline-block; width: 80px; color: #4d4d4d; font-size: 14px; } footer.main > .wrp { padding: 30px 0; } footer.main > .wrp > nav { float: right; width: 300px; margin-left: 85px; } footer.main > .wrp > nav h3 { color: #8e004d; } footer.main > .wrp > nav li { display: block; } footer.main > .wrp > nav li:before { display: none; } footer.main > .wrp > nav li a { display: block; background: transparent; font-size: 14px; color: #4d4d4d; border-bottom: solid 1px gray; padding: 5px 0; position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } footer.main > .wrp > nav li a:hover { text-decoration: none; text-indent: 5px; color: #8e004d; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } footer.main > .wrp > nav li a:after { position: absolute; top: 5px; right: 0; content: '>'; float: right; } footer.main > .wrp > nav li:last-child a { border: none; } footer.main address { float: left; color: #4d4d4d; font-size: 14px; width: 380px; } footer.main address .col_left, footer.main address .col_right { width: 50%; float: left; color: #4d4d4d; font-size: 14px; margin-bottom: 80px; } footer.main i { display: block; font-family: 'bold'; color: #8e004d; font-size: 22px; margin-bottom: 20px; } footer.main i a { font-family: 'bold'; color: #8e004d; font-size: 22px; } footer.main i a:hover { text-decoration: none; } footer.main i:before { float: left; content: 'y'; font-family: 'icon'; color: rgba(77, 77, 77, 0.5); font-size: 40px; width: 40px; height: 40px; display: block; margin-right: 10px; } footer.main i.mail:before { content: 'h'; } #footer-bar { background: #8e004d; height: 50px; } #footer-bar .wrp { font-size: 12px; color: #fff; line-height: 50px; } #footer-product-nav { max-height: 245px; overflow: hidden; position: relative; margin-bottom: 10px; } #footer-product-nav.active { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; max-height: 2000px; height: auto; } #footer-product-nav_toggle { display: block; height: 30px; line-height: 20px; font-size: 14px; border-radius: 4px; background: #eaeaea; padding: 5px 20px; color: #8e004d; } #totop { right: 0; left: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: bottom; height: 50px; position: fixed; bottom: -50px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #totop.active { will-change: bottom; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; bottom: 0; } #totop a { float: right; display: block; height: 50px; width: 50px; } #totop a:before { display: block; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; font-family: 'icon'; content: 't'; color: #fff; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; background: #ff0f91; } #totop a:hover { text-decoration: none; } #totop a:hover:before { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; background: #5b0031; } #account_tracking td { color: #4d4d4d; font-size: 14px; } .trade-groups, .product-listing { padding: 30px 0 30px 0; } .trade-groups .content, .product-listing .content { float: left; width: 870px; } .trade-groups .card, .product-listing .card { box-sizing: border-box; border: solid 2px rgba(255, 255, 255, 0); position: relative; float: left; width: 270px; margin: 0 0 20px 20px; overflow: hidden; height: auto; } .trade-groups .card img, .product-listing .card img { width: 100%; height: auto; } .trade-groups .card figcaption, .product-listing .card figcaption { position: relative; padding: 15px 10px 10px 10px; background: rgba(105, 105, 105, 0.05); height: 40px; transition: all 0.25s ease-out; left: 0; right: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .trade-groups .card:hover, .product-listing .card:hover { border: solid 2px white; box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .trade-groups .card:hover figcaption, .product-listing .card:hover figcaption { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; bottom: 0; background: rgba(142, 0, 77, 0.65); } .trade-groups .card:hover figcaption strong, .trade-groups .card:hover figcaption h2, .trade-groups .card:hover figcaption .link, .product-listing .card:hover figcaption strong, .product-listing .card:hover figcaption h2, .product-listing .card:hover figcaption .link { color: #fff; } .trade-groups .card strong, .trade-groups .card h2, .product-listing .card strong, .product-listing .card h2 { font-size: 16px; text-align: center; font-family: 'regular'; color: #8e004d; display: block; margin-bottom: 48px; } .trade-groups .card .link, .product-listing .card .link { font-size: 16px; color: #8e004d; text-align: center; display: block; margin-top: 30px; text-decoration: underline; } .trade-groups .card .preview-btn, .product-listing .card .preview-btn { z-index: 2; position: absolute; width: 40px; height: 40px; top: 0; right: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; border-radius: 0 0 0 20px; background: rgba(255, 255, 255, 0.2); border: solid 1px rgba(255, 255, 255, 0.2); border-right: 0; border-top: 0; } .trade-groups .card .preview-btn:before, .product-listing .card .preview-btn:before { display: block; width: 40px; line-height: 40px; text-align: center; font-size: 30px; color: #fff; font-family: icon; content: '+'; } .trade-groups .card .preview-btn:hover, .product-listing .card .preview-btn:hover { text-decoration: none; border-color: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; background: rgba(255, 255, 255, 0.5); } .trade-groups .card .preview-btn:hover:before, .product-listing .card .preview-btn:hover:before { border: none; } .trade-groups .card a:not(.fresco), .product-listing .card a:not(.fresco) { z-index: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; } .trade-groups .card a:not(.fresco):hover, .product-listing .card a:not(.fresco):hover { text-decoration: none; } .trade-groups.full .content, .product-listing.full .content { width: 100%; } .trade-groups.full .card, .product-listing.full .card { width: 23.5%; margin-left: 2%; } .trade-groups.full .card:nth-child(4n + 1), .product-listing.full .card:nth-child(4n + 1) { margin-left: 0; } #trade-blocks { padding: 30px 0 30px 0; background: #fff; } #trade-blocks .card { overflow: hidden; float: left; width: 370px; margin: 0 20px 20px 0; box-sizing: border-box; height: 255px; color: #fff; background: #8e004d; position: relative; z-index: 0; } #trade-blocks .card.last-item { margin-right: 0; } #trade-blocks .card img { z-index: 0; top: 0; left: 0; position: absolute; width: 100%; height: auto; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #trade-blocks .card figcaption { padding: 30px; box-sizing: border-box; position: absolute; z-index: 1; left: 0; right: 0; height: 150px; bottom: -150px; background: rgba(77, 77, 77, 0.65); -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #trade-blocks .card:hover img { right: -5%; top: -5%; bottom: -5%; left: -5%; width: 110%; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #trade-blocks .card:hover figcaption { bottom: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #trade-blocks .card h3 { z-index: 2; color: #4d4d4d; position: absolute; top: 0; left: 0; padding: 20px 30px; display: block; font-size: 24px; text-transform: uppercase; } #trade-blocks .card p { font-size: 18px; color: #fff; } #trade-blocks .card a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; display: block; } #trade-blocks .card a:hover { text-decoration: none; } #trade-blocks .card:nth-child(1) h3 { color: #fff; } #trade-blocks .card:nth-child(1) figcaption { bottom: 0; background: transparent; } #trade-blocks .card.double { width: 760px; } #opc_image { border: solid 1px #f7f7f7; max-width: 100%; height: auto; margin-bottom: 30px; } #configurator { min-height: 625px; position: relative; padding-top: 90px; } #configurator h1 { height: 70px; background: #fafafa; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); border-bottom: solid 1px #f7f7f7; position: absolute; box-sizing: border-box; padding: 20px; top: 0; left: 0; right: 0; } #configurator h1 small { font-size: 12px; display: inline-block; margin-left: 20px; } #product-detail { background: #f7f7f7; padding: 30px 0; } #product-detail .template-download, #product-detail .template-upload { clear: both; height: 100px; } #product-detail .template-download > div, #product-detail .template-upload > div { float: left; } #product-detail .template-download .file_info, #product-detail .template-upload .file_info { margin-left: 10px; } #product-detail .template-download .buttons, #product-detail .template-upload .buttons { float: right; } #product-detail .template-download .buttons a.btn, #product-detail .template-upload .buttons a.btn { float: left; margin-right: 5px; } #product-detail .template-download .buttons .btn.delete.cancel, #product-detail .template-upload .buttons .btn.delete.cancel { width: auto; } #product-detail .template-download .error, #product-detail .template-upload .error { width: 700px; margin-left: 10px; color: #d12b0b; } #product-detail .template-upload .btn.start { position: absolute; left: 10000px; } #product-detail .template-download { display: none; } #product-detail #detail_infobar { min-height: 20px; float: left; width: 250px; margin-right: 20px; } #product-detail #detail_infobar #detail_infobar_text, #product-detail #detail_infobar #detail_infobar_gallery, #product-detail #detail_infobar #detail_infobar_sheets, #product-detail #detail_infobar #detail_bookinfo { margin-bottom: 20px; padding: 15px; background: #fff; } #product-detail #detail_infobar h3 { margin: 0 0 20px 0; text-align: left; font-size: 14px; } #product-detail #detail_infobar h3:after { display: none; } #product-detail #detail_infobar li { padding: 0; } #product-detail #detail_infobar li:before { display: none; } #product-detail #detail_infobar input[type="checkbox"] { margin-top: 5px; } #product-detail #detail_infobar a.pdf, #product-detail #detail_infobar a.indd, #product-detail #detail_infobar a.ai { line-height: 38px; height: 40px; display: block; position: relative; padding-left: 35px; } #product-detail #detail_infobar a.pdf:before, #product-detail #detail_infobar a.indd:before, #product-detail #detail_infobar a.ai:before { position: absolute; color: #737373; font-size: 36px; font-family: icon; content: 'P'; left: 0; top: 3px; } #product-detail #detail_infobar a.indd:before { content: 'I'; } #product-detail #detail_infobar a.ai:before { content: 'A'; } #product-detail #detail_infobar #detail_infobar_gallery { padding: 0; } #product-detail #detail_infobar #detail_infobar_gallery .gallery_preview { width: 100%; height: auto; } #product-detail #detail_infobar #detail_infobar_gallery li { width: 25%; float: left; padding: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #product-detail #detail_infobar #detail_infobar_gallery li img { width: 100%; height: auto; cursor: pointer; } #product-detail #detail_infobar #detail_infobar_gallery li:hover { opacity: 0.5; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #product-detail #detail_infobar-opc { min-height: 20px; width: 100%; margin-right: 20px; } #product-detail #detail_infobar-opc #detail_infobar_gallery { padding: 0; } #product-detail #detail_infobar-opc #detail_infobar_gallery .gallery_preview { width: 870px; height: auto; } #product-detail #detail_infobar-opc #detail_infobar_gallery li { height: 60px; padding-right: 10px; float: left; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #product-detail #detail_infobar-opc #detail_infobar_gallery li:before { background: none; margin-top: 3px; } #product-detail #detail_infobar-opc #detail_infobar_gallery li img { width: 100%; height: auto; cursor: pointer; } #product-detail #detail_infobar-opc #detail_infobar_gallery li:hover { opacity: 0.5; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #product-detail #total_block, #product-detail #delivery { background: #fff; float: right; width: 250px; padding: 80px 15px 15px 15px; box-sizing: border-box; position: relative; margin-bottom: 15px; } #product-detail #total_block .upload_field input, #product-detail #total_block .upload_field label, #product-detail #delivery .upload_field input, #product-detail #delivery .upload_field label { width: 100%; margin: 0; box-sizing: border-box; display: block; float: none; } #product-detail #total_block .upload_field label, #product-detail #delivery .upload_field label { text-align: left; } #product-detail #total_block li { font-size: 13px; } #product-detail #total_block input, #product-detail #total_block input:not(.btn), #product-detail #total_block .non-input-field, #product-detail #total_block select { width: 100%; } #product-detail #total_block h1, #product-detail #total_block h2, #product-detail #total_block h3 { width: auto; text-align: left; margin: 0 0 15px 0; top: 0; left: 0; right: 0; font-family: 'regular'; font-size: 18px; position: absolute; background: #8e004d; background: -moz-linear-gradient(top, #8e004d 0%, #75003f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8e004d), color-stop(100%, #75003f)); background: -webkit-linear-gradient(top, #8e004d 0%, #75003f 100%); background: -o-linear-gradient(top, #8e004d 0%, #75003f 100%); background: -ms-linear-gradient(top, #8e004d 0%, #75003f 100%); background: linear-gradient(to bottom, #8e004d 0%, #75003f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17afc1', endColorstr='#149bad',GradientType=0 ); height: 70px; line-height: 40px; padding: 15px; color: #fff; } #product-detail #total_block h1:after, #product-detail #total_block h2:after, #product-detail #total_block h3:after { display: none; } #product-detail #total_block hr { margin: 15px 0; } #product-detail #total_block li { color: #333; display: block; text-align: right; } #product-detail #total_block li:before { display: none; } #product-detail #total_block li.discount * { color: #723d55; } #product-detail #total_block li.total.gross { color: #ae6787; font-size: 18px; } #product-detail #total_block li.total.gross .vat { margin-top: 5px; font-size: 14px; } #product-detail #total_block li strong { text-align: left; display: block; border-bottom: solid 1px #f7f7f7; margin-bottom: 5px; padding-bottom: 5px; } #product-detail #total_block li .label { display: inline-block; width: 50%; float: left; text-align: left; } #product-detail #total_block li .label small { display: inline-block; color: #4d4d4d; font-size: 12px; } #product-detail #total_block .btn { display: block; width: 100%; font-size: 18px; line-height: 12px; text-align: center; } #product-detail #delivery { padding-top: 20px; } #product-detail #delivery strong { margin-bottom: 10px; display: block; } #product-detail #delivery .icon:before { font-size: 22px; margin: 5px 10px 0 0; color: #8e004d; float: left; } #product-detail #delivery span, #product-detail #delivery time { font-size: 14px; } #product-detail #delivery:hover .tooltip { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; opacity: 1; visibility: visible; } #product-detail #bulk { position: absolute; top: 70px; left: 0; right: 0; display: block; background: #fafafa; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); border-bottom: solid 1px #eaeaea; height: 40px; padding: 0 15px; line-height: 30px; } #product-detail #bulk .info { display: inline-block; float: none; } #product-detail #bulk .info .tooltip { left: auto; right: 40px; width: 580px; max-width: 620px; display: block; } #product-detail #bulk .info .tooltip > strong:first-child { display: block; margin-bottom: 10px; font-family: 'bold'; font-size: 18px; } #product-detail #bulk .info .col { float: left; width: 33.333333%; display: block; } #product-detail #bulk .info strong { font-size: 14px; display: block; } #product-detail #bulk .info li { text-align: left; font-size: 12px; } #product-detail #bulk_height { height: 40px; } #product_informations { margin-top: 30px; } #product_informations .tab { position: relative; z-index: 1; cursor: pointer; box-sizing: border-box; float: left; display: block; padding: 10px 15px; font-size: 16px; border: solid 1px #dedede; background: #eaeaea; color: #4d4d4d; margin-bottom: -1px; border-bottom: none; } #product_informations .tab.current { background: #fff; } #product_informations .content { position: relative; z-index: 0; background: #fff; padding: 30px 15px; border: solid 1px #dedede; } #product_informations .tab_content { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #product_informations .tab_content h1 small, #product_informations .tab_content h2 small, #product_informations .tab_content h3 small, #product_informations .tab_content h4 small, #product_informations .tab_content h5 small, #product_informations .tab_content h6 small { display: block; font-size: 12px; } #form_individual .col_left img, #form_individual .col_right img { width: 100%; height: auto; margin-bottom: 30px; } #form_individual .col_left .btn.success, #form_individual .col_right .btn.success { min-width: 300px; float: right; margin-right: 23px; } #fotolia .wrp { background: #fff; padding: 30px; } #fotolia figure { float: left; width: 20%; min-height: 300px; outline: solid 1px #f7f7f7; border-radius: 4px; box-sizing: border-box; padding: 20px; position: relative; } #fotolia figure a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #fotolia figure img { display: block; margin: 20px auto; } #fotolia figure figcaption { position: absolute; top: 55%; left: 20px; right: 20px; } #fotolia figure strong { position: relative; display: block; left: 0; box-sizing: border-box; right: 0; padding: 5px; border-radius: 2px; background: #f7f7f7; text-align: center; } #fotolia figure ul { margin: 0; } #fotolia figure ul li { font-size: 14px; padding-left: 10px; } #fotolia figure:hover strong { background: #8e004d; color: #fff; } #fotolia h1 { float: left; margin-bottom: 0; } #fotolia #fotolia_search { float: right; } #fotolia #fotolia_search fieldset { margin: 0; } #fotolia #fotolia_search .btn { margin-bottom: 0; min-width: 20px; padding: 0; margin-left: 10px; width: 40px; } #fotolia #fotolia_search .btn:before { font-size: 34px; content: 'r'; color: #fff; font-family: icon; } #fotolia #fotolia_nav { float: right; margin-bottom: 30px; } #fotolia #fotolia_nav .btn { float: left; margin: 0 0 0 10px; } #finish { margin-bottom: 80px; } #finish .item { width: 49%; background: #fff; padding: 10px; line-height: 40px; border-radius: 2px; color: #4d4d4d; float: left; margin-right: 2%; box-sizing: border-box; } #finish .item:nth-of-type(2n+2) { margin-right: 0; } #finish .item .label { line-height: 40px; float: left; display: block; margin: 0 20px 0 0; height: 40px; } #finish .item .btn { width: 240px; float: left; margin: 0; } #usp-bar { padding: 38px 0; background: #f7f7f7; } #usp-bar i { width: 25%; box-sizing: border-box; padding: 10px 45px 0 45px; float: left; color: #4d4d4d; font-size: 18px; line-height: 24px; } #usp-bar i:before { font-family: 'icon'; content: 'b'; text-align: center; line-height: 55px; border-radius: 35px; border: solid 10px rgba(255, 255, 255, 0.5); box-sizing: border-box; font-size: 30px; color: #fff; background: rgba(77, 77, 77, 0.25); width: 70px; height: 70px; float: left; margin-right: 10px; margin-top: -10px; } #usp-bar i.usp-quality:before { content: 'z'; } #usp-bar i.usp-delivery:before { content: 'b'; } #usp-bar i.usp-payment:before { content: 'k'; } #usp-bar i.usp-ecological:before { content: 'n'; } #header_usp { float: left; padding-top: 25px; } #header_usp img { float: left; margin-right: 10px; } #payment-bar { background: #fff; padding: 30px 0; } #payment-bar h3 { margin: 0; color: #8e004d; float: left; width: 20%; } #payment-bar img { float: left; width: 10%; margin: 0 1.666666%; } .cat_listing { padding-top: 30px; } .cat_listing .listing { margin-bottom: 30px; width: 880px; float: left; } .cat_listing article header { background: #f7f7f7; padding: 0 40px; color: #4d4d4d; font-size: 18px; margin-bottom: 3px; line-height: 30px; } .cat_listing article header h3 { margin: 0; float: left; padding: 20px 0; font-weight: bold; display: inline-block; line-height: 30px; max-width: 300px; overflow: hidden; white-space: nowrap; color: #4d4d4d; font-size: 18px; } .cat_listing article header table { height: 30px; border-collapse: separate; float: right; width: 440px; } .cat_listing article header table td { color: #4d4d4d; height: 30px; padding: 20px 10px; font-size: 18px; border-right: solid 6px #fff; } .cat_listing article header table td:first-child { width: 180px; } .cat_listing article header table td:nth-child(2), .cat_listing article header table td:nth-child(3) { width: 84px; } .cat_listing article .content figure { float: left; width: 400px; margin-bottom: 30px; } .cat_listing article .content figure img { margin: 3px 0 30px 0; max-width: 270px; height: auto; } .cat_listing article .content table { cursor: pointer; float: left; width: 480px; border-collapse: separate; } .cat_listing article .content table td { height: 20px; border: solid 3px #fff; font-size: 14px; background: #f7f7f7; color: #4d4d4d; padding: 10px; width: 90px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .cat_listing article .content table td:first-child { width: 190px; } .cat_listing article .content table td:last-child { border-right: none; width: 20px; background: #d7d7d7; } .cat_listing article .content table td:last-child:before { display: block; height: 20px; width: 20px; text-indent: -7px; line-height: 22px; color: #fff; font-family: 'icon'; content: 'r'; font-size: 35px; } .cat_listing article .content table tr { position: relative; display: block; } .cat_listing article .content table tr:nth-child(odd) td { background: #dedede; } .cat_listing article .content table tr:nth-child(odd) td:last-child { background: #d7d7d7; } .cat_listing article .content table tr:hover td { color: #fff; background: #a4a4a4; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .cat_listing article .content table tr:hover td:last-child { color: #fff; background: #a4a4a4; } .cat_listing article .content table a { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .cat_listing article .content table a:hover { text-decoration: none; } .description { padding: 30px 0 0 0; } .product-listing .card:hover figcaption { background: rgba(174, 103, 135, 0.65); } #page article { margin-bottom: 30px; } #page .cmsHeadImg { width: 100%; height: auto; margin-bottom: 25px; } #pw_lost { padding: 30px 0; } #pw_lost form { margin-bottom: 30px; } #pw_lost form label { width: 220px; } #pw_lost form label .btn { margin-left: 220px; } #orders, #orders_canceled { margin-bottom: 30px; } #orders a, #orders_canceled a { padding: 5px; border: solid 1px #f2f2f2; background: #fff; margin-bottom: 20px; display: block; border-radius: 4px; } #orders a:hover, #orders_canceled a:hover { text-decoration: none; } #orders a strong, #orders_canceled a strong { line-height: 40px; margin: 0 10px; float: left; display: block; } #orders a em, #orders_canceled a em { line-height: 40px; } #orders a .btn, #orders_canceled a .btn { margin-bottom: 0; float: right; } #orders a:hover .btn, #orders_canceled a:hover .btn { border-color: #8e004d; background: #c10069; } #account_tracking .col_left section, #account_tracking .col_right section { margin-bottom: 20px; } #account_tracking .col_left section:last-of-type, #account_tracking .col_right section:last-of-type { margin-bottom: 0; } #upload .upload_option, #upload #upload_info { padding: 20px 25px; background: #fff; margin-bottom: 20px; position: relative; box-sizing: border-box; } #upload .upload_option h1, #upload .upload_option h2, #upload .upload_option h3, #upload #upload_info h1, #upload #upload_info h2, #upload #upload_info h3 { font-size: 18px; margin-bottom: 0; color: #4d4d4d; } #upload #upload_section { background: transparent; float: left; width: 730px; margin-right: 20px; } #upload #upload_section .template-download, #upload #upload_section .template-upload { clear: both; height: 100px; } #upload #upload_section .template-download > div, #upload #upload_section .template-upload > div { float: left; } #upload #upload_section .template-download .file_info, #upload #upload_section .template-upload .file_info { margin-left: 10px; } #upload #upload_section .template-download .buttons, #upload #upload_section .template-upload .buttons { float: right; } #upload #upload_section .template-download .buttons a.btn, #upload #upload_section .template-upload .buttons a.btn { float: left; margin-right: 5px; } #upload #upload_section .template-download .error, #upload #upload_section .template-upload .error { width: 700px; margin-left: 10px; color: #d12b0b; } #upload #upload_section .btn.continue { float: right; width: 200px; margin-bottom: 30px; } #upload #upload_info { float: right; width: 400px; } #upload .upload_field .btn { float: right; width: 48%; margin-left: 0; background: #ae6787; color: #fff; border-color: #a4577a; } #upload .upload_field .btn:before { color: #fff; } #upload .upload_option { position: relative; padding: 15px 20px 15px 50px; } #upload .upload_option h3 { font-family: regular; padding: 0; margin: 0; width: 100%; text-align: left; } #upload .upload_option h3:after { display: none; } #upload .upload_option:before { font-family: 'icon'; color: #4d4d4d; font-size: 32px; top: 15px; left: 10px; content: 'p'; position: absolute; } #upload .upload_option#upload_browser:before { content: 'a'; } #upload .upload_option#upload_ftp:before { content: 'a'; } #upload .upload_option#upload_cd:before { content: 'e'; } #upload .upload_option#upload_email:before { content: 'f'; } #upload .upload_option#upload_fotolia:before { content: 'm'; } #upload .upload_option .btn.default { float: right; width: 48%; box-sizing: border-box; margin: 0; } #upload .upload_option p { float: left; width: 48%; } #uploadcheck #upload_data { position: relative; background: #fff; padding: 20px 20px 20px 50px; } #uploadcheck #upload_data h3 { position: static; font-family: regular; padding: 0; margin: 0; font-size: 24px; width: 100%; text-align: left; } #uploadcheck #upload_data h3:after { display: none; } #uploadcheck #upload_data h3:before { font-family: icon; color: #4d4d4d; font-size: 32px; top: 20px; left: 10px; content: 'a'; position: absolute; } #uploadcheck #upload_data figure { clear: both; margin-bottom: 10px; } #uploadcheck #upload_data figure img { border: solid 1px #f7f7f7; float: left; width: 120px; height: auto; margin-right: 20px; } #uploadcheck #upload_data figure figcaption { font-size: 14px; float: left; } #uploadcheck #upload_data figure:last-of-type() { margin-bottom: 0; } #uploadcheck #upload_data .btn.delete { min-width: 220px; margin-top: 20px; } #uploadcheck #upload_actions { text-align: right; margin: 20px 0 50px 0; } #uploadcheck #upload_actions .btn { margin: 0 0 0 20px; } .browser_upload .btn.upload { float: left; margin-right: 10px; } #impressum address { background: #fff; float: right; width: 400px; box-sizing: border-box; padding: 30px 0; } #impressum article { background: #fff; width: 700px; float: left; box-sizing: border-box; padding: 30px 0; margin-bottom: 30px; } #impressum article.fullwidth { float: none; width: 100%; } #upload, #uploadcheck, #contact, #address, #summary, #order_sample, #cart_first, #register, #calculator, #verify_address, #cart_second, #detail_free, #form_individual, #cart_third, #account_tracking, #newsletter, #finish, #fotolia, #crop { padding: 30px 0; background: #f7f7f7; } main .col_left, main .col_right { background: #fff; float: left; width: 49%; box-sizing: border-box; padding: 25px 50px; margin-bottom: 20px; } main .col_left label, main .col_right label { width: 140px; } main .col_left input, main .col_left select, main .col_left textarea, main .col_left .non-input-field, main .col_left .btn:not([name=cmd_calc]), main .col_right input, main .col_right select, main .col_right textarea, main .col_right .non-input-field, main .col_right .btn:not([name=cmd_calc]) { width: 300px; } main .col_left input[type="checkbox"], main .col_right input[type="checkbox"] { width: 60px; width: auto; margin-right: 0; float: right; } main .col_left .col-2 input, main .col_right .col-2 input { width: 115px; } main .col_right { float: right; } main .col_right .col_left, main .col_right .col_right { padding: 0; } main .col_left { margin-right: 2%; } main .col_left .col_left, main .col_left .col_right { padding: 0; } .actionbar { height: 60px; margin-bottom: 80px; } .actionbar .btn { padding: 0; line-height: 40px; width: 250px; float: left; margin: 0; text-align: center; font-size: 18px; } .actionbar .btn.success { float: right; } .actionbar p { float: left; } .align_right { float: right; } .align_right.btn { margin-right: 20px; } .align_left { float: left; } .align_center { margin-right: auto; margin-left: auto; } .text_right { text-align: right; } .text_left { text-align: left; } .text_center { text-align: justify; } .ta_center { text-align: center; } #page { padding: 30px 0; } #cart_second form article, #contact form article, #detail_free form article, #account_tracking form article, #finish form article, #register form article, #crop form article { float: none; width: 100%; } #cart_second form fieldset, #contact form fieldset, #detail_free form fieldset, #account_tracking form fieldset, #finish form fieldset, #register form fieldset, #crop form fieldset { float: left; width: 50%; } #cart_second form .col-full, #contact form .col-full, #detail_free form .col-full, #account_tracking form .col-full, #finish form .col-full, #register form .col-full, #crop form .col-full { width: 100%; } #cart_second form .col_left fieldset, #cart_second form .col_right fieldset, #contact form .col_left fieldset, #contact form .col_right fieldset, #detail_free form .col_left fieldset, #detail_free form .col_right fieldset, #account_tracking form .col_left fieldset, #account_tracking form .col_right fieldset, #finish form .col_left fieldset, #finish form .col_right fieldset, #register form .col_left fieldset, #register form .col_right fieldset, #crop form .col_left fieldset, #crop form .col_right fieldset { float: none; box-sizing: border-box; width: 100%; } .color-error { color: #d12b0b; } .color-hint { color: #f3631c; } .color-success { color: #ae6787; } .cart_breadcrumb { margin-bottom: 30px; } .cart_breadcrumb ul { display: block; width: 100%; } .cart_breadcrumb li { font-size: 18px; box-sizing: border-box; background: url("../assets/cart_breadcrumb_default.png") no-repeat right center #dadada; color: #fff; float: left; padding: 15px 30px; height: 50px; position: relative; width: 33.333333%; } .cart_breadcrumb li:before { display: none; } .cart_breadcrumb li.active { background: url("../assets/cart_breadcrumb_active.png") no-repeat right center #ae6787; } .cart_breadcrumb li:last-child { background-image: none; } .cart_breadcrumb li.disabled { background: #a99fa4; } .cart_breadcrumb li.preactive { background: url("../assets/cart_breadcrumb_preactive.png") no-repeat right center #a99fa4; } .cart_breadcrumb li.unactive { background: url("../assets/cart_breadcrumb_unactive.png") no-repeat right center #a99fa4; } #cart { padding: 0; } #cart strong, #cart h3, #cart h4, #cart h5, #cart h6 { margin: 0; padding: 0; font-weight: 300; font-family: regular; text-align: left; color: #8e004d; } #cart strong:after, #cart h3:after, #cart h4:after, #cart h5:after, #cart h6:after { display: none; } #cart strong { font-size: 14px; } #cart td select { display: inline-block; width: 55px; height: 25px; padding: 3px; margin-right: 10px; } #cart td select option { line-height: 25px; height: 25px; } #cart .product_calculation td { background: #f7f7f7; padding: 5px 10px; } #cart .product_calculation td strong { text-align: right; margin: 0; font-size: 18px; display: inline-block; } #cart .product_calculation td h3 { font-size: 18px; width: 100%; } #cart .product_options strong { margin-top: 20px; } #cart #total_netto td, #cart #total_netto td strong, #cart #total_coupon td, #cart #total_coupon td strong, #cart #total_shipping td, #cart #total_shipping td strong, #cart #total_vat td, #cart #total_vat td strong, #cart #total_options td, #cart #total_options td strong, #cart #total_price td, #cart #total_price td strong { text-align: right; } #cart #total_shipping td { padding-top: 20px; } #cart tr:nth-last-child(2) td { padding-bottom: 20px; } #cart #total_price { background: #f7f7f7; padding: 5px 10px; font-size: 18px; color: #8e004d; text-align: right; } #cart #total_price strong { color: #ae6787; font-family: bold; display: inline-block; font-size: 18px; text-align: right; } #cart #total_netto td { background: #f7f7f7; padding: 5px 10px; } #cart #sidebar { width: 250px; float: right; } #cart #sidebar section { background: #fff; padding: 10px; margin-bottom: 20px; } #cart #sidebar section strong, #cart #sidebar section h3 { font-weight: bold; font-size: 14px; color: #4d4d4d; display: block; margin-bottom: 20px; } #cart #sidebar section img { width: 50%; float: left; margin-bottom: 20px; } #cart #sidebar section:first-child { background: url("../assets/cart_secure_bg.png") no-repeat bottom right #fff; } #cart form { box-sizing: border-box; width: 880px; float: left; } #cart table { box-sizing: border-box; width: 100%; display: block; background: #fff; padding: 10px; margin-bottom: 20px; } #cart tbody tr > td, #cart > tr > td { text-align: left; color: #4d4d4d; line-height: 25px; box-sizing: border-box; padding: 2px 10px; font-size: 87.5%; } #cart tbody tr > th, #cart > tr > th { font-family: bold; font-weight: 300; font-size: 18px; text-align: left; padding: 10px; color: #4d4d4d; } #cart tbody tr th, #cart tbody tr td, #cart > tr th, #cart > tr td { box-sizing: border-box; vertical-align: top; } #cart tbody tr th:first-child, #cart tbody tr > td:first-child { width: 370px; border-right: solid 6px #fff; padding-right: 4px; } #cart tbody tr th:nth-child(2), #cart tbody tr > td:nth-child(2) { width: 240px; border-right: solid 6px #fff; padding-right: 4px; } #cart tbody tr th:nth-child(3), #cart tbody tr > td:nth-child(3) { width: 140px; border-right: solid 6px #fff; padding-right: 4px; } #cart tbody tr th:nth-child(4), #cart tbody tr > td:nth-child(4) { width: 100px; text-align: right; } #cart #checkout_last form > table { margin-bottom: 20px; } #cart_options { background: #fff; padding: 10px; margin-bottom: 80px; } #cart_options .col_left { float: left; width: 40%; margin-right: 1%; } #cart_options .hint { margin-top: 20px; } #cart_options .col_right { float: right; width: 49%; margin-left: 1%; } #cart_options textarea { float: none; display: block; width: 100%; height: 150px; } #cart_options .btn.success { width: 100%; float: right; text-align: center; margin-top: 40px; } #cart #coupon td { padding-top: 10px; } #cart #coupon button { margin: 0 0 0 15px; } #cart #coupon input { width: 200px; } #cart_second #formular { margin-bottom: 40px; } #cart_second #formular .btn { width: 100%; margin-bottom: 0; } #cart_second #formular h3 { font-family: regular; padding: 0; margin: 0; text-align: left; } #cart_second #formular h3:after { display: none; } #cart_second #formular fieldset { width: 100%; } #cart_second #formular input { width: 300px; float: right; } #cart_second #formular label { text-align: left; width: 160px; } #cart_second #formular .col_right .btn { width: 300px; float: right; } #cart_second #formular .lost_pw { margin-top: 10px; display: block; text-align: right; } #cart_third article { width: 100%; } #cart_third #cart { background: #fff; } #cart_third table tbody tr th:first-child, #cart_third table tbody tr > td:first-child { width: 480px; } #cart_third table tbody tr th:nth-child(2), #cart_third table tbody tr > td:nth-child(2) { width: 250px; } #cart_third table tbody tr th:nth-child(3), #cart_third table tbody tr > td:nth-child(3) { width: 180px; } #cart_third table tbody tr th:nth-child(4), #cart_third table tbody tr > td:nth-child(4) { width: 200px; text-align: right; } #cart_third .col_left, #cart_third .col_right { min-height: 180px; position: relative; } #cart_third .col_left .icon, #cart_third .col_right .icon { display: block; position: absolute; top: 30px; left: 15px; } #cart_third .col_left .icon:before, #cart_third .col_right .icon:before { font-size: 28px; } #cart #special input, #cart_second #special input, #cart_third #special input { width: 400px; } #cart #special button, #cart_second #special button, #cart_third #special button { float: right; margin-bottom: 0; width: 40px; box-sizing: border-box; min-width: 40px; padding: 0; } #cart #special button .icon, #cart_second #special button .icon, #cart_third #special button .icon { top: 10px; left: 5px; } #cart #special button .icon:before, #cart_second #special button .icon:before, #cart_third #special button .icon:before { color: #fff; } #cart_third_buy label { width: 60px; } #cart_third_buy .btn.success { float: right; margin-right: 10px; } #cart_third_payment .col_right label, #cart_third_payment .col_left label { width: 140px; } #cart_third_payment .col_right .col-2 input, #cart_third_payment .col_left .col-2 input { width: 115px; } #cart_third_payment .col_left input, #cart_third_payment .col_left select { width: 100%; } #cart_third_payment .col_right select.auto-calculate { width: 400px; } #cart_third_agb { margin-bottom: 50px; } #cart_third_agb label { width: 60px; } #cart_third_agb span { cursor: pointer; color: #8e004d; } #cart_third_agb fieldset { margin: 0; } #crop .crop_image { float: left; } #crop .crop_image img { border: solid 1px #f7f7f7; } #crop table tr.description td { padding-top: 20px; } #crop button[name="cmd_calc"] { right: 23px; } #crop input[type="radio"] { float: left; width: 20px; margin-right: 10px; } #crop #total { color: #ae6787; font-family: bold; } #crop label { font-size: 14px; width: 160px; } #calculator_preloader { text-align: center; } #calculator_preloader:before { content: ''; display: block; font-size: 10px; margin: 20px auto; border-radius: 100px; width: 14px; height: 14px; text-indent: -9999em; border: solid 3px #8e004d; border-bottom-color: #fff; -webkit-animation: loader 1.1s infinite linear; -moz-animation: loader 1.1s infinite linear; animation: loader 1.1s infinite linear; } #calculator_searchresults label { width: 355px; } #contact .col_right { padding: 0; width: 50%; } #contact .col_left { width: 48%; } #contact .upload_field progress, #contact .upload_field .progressBar { width: 350px; margin: 0 20px 0 185px; } #contact .upload_field input { float: right; margin-right: 80px; } #contact .upload_field .btn.upload { clear: both; margin-top: 20px; } #contact .preview, #contact .file_info { margin-left: 185px; } .cnt_prn .default { float: left !important; margin-left: 0 !important; } .cnt_prn .no_margin { margin: 0; } .cnt_prn-table th, .cnt_prn-table td:before { color: #8e004d; } .cnt_prn-table { margin: 1em 0; min-width: 300px; width: 100%; background: #fff; color: #fff; overflow: hidden; } .cnt_prn-table tr { border-top: 1px solid #f7f7f7; border-bottom: 1px solid #f7f7f7; border-color: #f7f7f7; } .cnt_prn-table th { display: none; text-align: left; } .cnt_prn-table td { display: block; padding: 0.25em; } .cnt_prn-table td:first-child { padding-top: .5em; } .cnt_prn-table td:last-child { padding-bottom: .5em; } .cnt_prn-table td:last-child:before { content: attr(data-th) " "; } .cnt_prn-table td:before { content: attr(data-th) ": "; font-weight: bold; width: 6.5em; display: inline-block; } .cnt_prn-table .btn { margin-bottom: 0; } @media (min-width: 767px) { .cnt_prn-table td:before { display: none; } .cnt_prn-table th, .cnt_prn-table td { padding: 1em !important; } .cnt_prn-table th:first-child, .cnt_prn-table td:first-child { padding-left: 0; } .cnt_prn-table th:last-child, .cnt_prn-table td:last-child { padding-right: 0; } .cnt_prn-table th, .cnt_prn-table td { display: table-cell; } } #pageLogin { z-index: 3; width: 400px; margin-left: -200px; left: 50%; top: 200px; position: relative; border-radius: 5px; background: #fff; -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25); box-sizing: border-box; padding: 20px; border: 1px solid #ccc; } #pageLogin label { text-align: left; } #pageLogin h1 { margin-bottom: 24px; text-align: center; } #pageLogin input { width: 100%; } #pageLogin .logo { display: block; text-align: center; } #pageLogin .logo img { margin: 0 auto 20px auto; } #pageLogin input[type="submit"] { margin-top: 20px; background: #ae6787; border: 1px solid #934f6e; color: #fff; } #pageLogin .error_msg { padding: 10px; background: #feefec; border: 1px solid #f77c65; border-radius: 3px; } #pageLoginBg { background: url("../assets/loginbg.jpg") top center no-repeat; background-size: cover; left: 0; top: 0; right: 0; bottom: 0; position: fixed; } #modulesPrinttemplate { margin-bottom: 20px; padding: 15px; background: #fff; } #modulesPrinttemplate h3 { margin: 0 0 20px 0; text-align: left; font-size: 14px; } #modulesPrinttemplate h3:after { display: none; } #modulesPrinttemplate li { border-bottom: 1px solid #cdcdcd; padding-bottom: 2px !important; margin-bottom: 2px; height: 42px; } #modulesPrinttemplate li .icon { float: left; width: 32px; margin: 4px 5px 0 1px; } #modulesPrinttemplate li .icon img { width: 100%; height: auto; } #modulesPrinttemplate li a { display: block; height: 42px; line-height: 42px; text-decoration: none; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #modulesPrinttemplate li a:hover { background: #cdcdcd; color: #fff; text-decoration: none; } #modulesPrinttemplate li:last-child { border-bottom: none; } .climate { margin: 0 0 40px 0; } .climate .climateItem { background: #f7f7f7; margin-bottom: 20px; } .climate .climateItem .accContent { display: none; margin: 20px; padding-top: 20px; border-top: 1px solid #ccc; } .climate .climateItem .accContent li { margin-left: 20px; list-style-type: disc; } .climate .climateItem .accContent img { width: 100%; height: auto; } .climate .climateItem .accHead { display: block; cursor: pointer; padding: 10px; min-height: 110px; box-sizing: border-box; } .climate .climateItem .accHead .openBtn { float: left; margin: 25px 10px 0 5px; background: #fff; position: relative; color: #ccc; display: block; border-radius: 50%; height: 40px; width: 40px; } .climate .climateItem .accHead .openBtn:before { content: '+'; position: absolute; color: #ccc; display: block; height: 40px; width: 40px; font-size: 30px; line-height: 40px; text-align: center; top: 0; left: 0; } .climate .climateItem .accHead h3 { color: #8e004d; padding: 10px; margin-bottom: 0; float: left; } .climate .climateItem .accHead .climateInfobox { background: #fff; width: 350px; float: right; padding: 5px 10px; margin: 5px; border-radius: 5px; box-sizing: border-box; } .climate .climateItem .accHead .climateInfobox span { width: 180px; display: inline-block; } .climate .climateItem .accHead.current .openBtn { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .climate .climateItem .accHead.current .openBtn:before { content: '-'; } @media screen and (max-width: 800px) { .climate .climateItem .accHead .climateInfobox { float: none; width: calc(100% - 10px); } .climate .climateItem .accHead h3 { float: none; } } .climatePartnerAccount span { display: inline-block; width: 150px; font-weight: bold; } @media screen and (max-width: 480px) { .climatePartnerAccount span { display: block; width: 100%; } } @-moz-document url-prefix() { select option { padding: 5px 15px; } .btn.upload { padding: 0 10px 0 0; } input[type="file"] { height: auto !important; } } select::-ms-expand { display: none; } #delivery_countdown { font-size: 12px; display: block; margin-top: 5px; padding: 5px; background: #f7f7f7; border: solid 1px #c4c4c4; } /* box-sizing */ .fr-window, .fr-window [class^="fr-"], .fr-overlay, .fr-overlay [class^="fr-"], .fr-spinner, .fr-spinner [class^="fr-"] { box-sizing: border-box; } .fr-window { position: fixed; width: 100%; height: 100%; top: 0; left: 0; font: 13px/20px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif; /* Chrome hack, this fixes a visual glitch when quickly toggling a video */ transform: translateZ(0px); } /* z-index */ .fr-overlay { z-index: 99998; } .fr-window { z-index: 99999; } .fr-spinner { z-index: 100000; } /* overlay */ .fr-overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; } .fr-overlay-background { float: left; width: 100%; height: 100%; background: #000; opacity: .9; filter: alpha(opacity=90); } .fr-overlay-ui-fullclick .fr-overlay-background { background: #292929; opacity: 1; filter: alpha(opacity=100); } /* mobile touch has position:absolute to allow zooming */ .fr-window.fr-mobile-touch, .fr-overlay.fr-mobile-touch { position: absolute; overflow: visible; } /* some properties on the window are used to toggle things like margin and the fullclick mode, we reset those properties after measuring them */ .fr-measured { margin: 0 !important; min-width: 0 !important; min-height: 0 !important; } .fr-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fr-pages { position: absolute; width: 100%; height: 100%; overflow: hidden; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fr-page { position: absolute; width: 100%; height: 100%; } .fr-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; text-align: center; } .fr-hovering-clickable .fr-container { cursor: pointer; } /* padding: youtube & vimeo always have buttons on the outside side button = 72 = 54 + (2 * 9 margin) close button = 48 */ /* padding ui:inside */ .fr-ui-inside .fr-container { padding: 20px 20px; } .fr-ui-inside.fr-no-sides .fr-container { padding: 20px; } /* padding ui:outside */ .fr-ui-outside .fr-container { padding: 20px 82px; } .fr-ui-outside.fr-no-sides .fr-container { padding: 20px 48px; } /* reduce padding on smaller screens */ @media all and (max-width: 700px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 700px) { /* padding ui:inside */ .fr-ui-inside .fr-container { padding: 12px 12px; } .fr-ui-inside.fr-no-sides .fr-container { padding: 12px; } /* padding ui:outside */ .fr-ui-outside .fr-container { padding: 12px 72px; } .fr-ui-outside.fr-no-sides .fr-container { padding: 12px 48px; } } @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 500px) { /* padding ui:inside */ .fr-ui-inside .fr-container { padding: 0px 0px; } .fr-ui-inside.fr-no-sides .fr-container { padding: 0px; } /* padding ui:outside */ .fr-ui-outside .fr-container { padding: 0px 72px; } .fr-ui-outside.fr-no-sides .fr-container { padding: 0px 48px; } } /* padding ui:fullclick */ .fr-ui-fullclick .fr-container { padding: 0; } .fr-ui-fullclick.fr-no-sides .fr-container { padding: 0; } /* video fullclick */ .fr-ui-fullclick.fr-type-video .fr-container { padding: 0px 62px; } .fr-ui-fullclick.fr-no-sides.fr-type-video .fr-container { padding: 48px 0px; } /* overflow-y should always have 0 padding top and bottom */ .fr-overflow-y .fr-container { padding-top: 0 !important; padding-bottom: 0 !important; } .fr-content, .fr-content-background { position: absolute; top: 50%; left: 50%; /* IE11 has a 1px blur bug on the edges of the caption (ui:inside) during animation with overflow:hidden */ overflow: visible; } /* img/iframe/error */ .fr-content-element { float: left; width: 100%; height: 100%; } .fr-content-background { background: #101010; } .fr-info { position: absolute; top: 0; left: 0; width: 100%; color: #efefef; font-size: 13px; line-height: 20px; text-align: left; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .fr-info-background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000; line-height: 1%; filter: none; opacity: 1; } .fr-ui-inside .fr-info-background { filter: alpha(opacity=80); opacity: .8; zoom: 1; } /* ui:outside has a slightly lighter info background to break up from black page backgrounds */ .fr-ui-outside .fr-info-background { background: #0d0d0d; } /* info at the bottom for ui:inside */ .fr-content .fr-info { top: auto; bottom: 0; } .fr-info-padder { display: block; overflow: hidden; padding: 12px; position: relative; width: auto; } .fr-caption { width: auto; display: inline; white-space: wrap; color: #fff; } .fr-position { color: #b3b3b3; float: right; line-height: 21px; opacity: 0.99; position: relative; text-align: right; margin-left: 15px; white-space: nowrap; } /* positions not within the info bar for ui:outside/inside */ .fr-position-outside, .fr-position-inside { position: absolute; bottom: 0; right: 0; margin: 12px; width: auto; padding: 2px 8px; border-radius: 10px; font-size: 11px; line-height: 20px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); display: none; overflow: hidden; white-space: nowrap; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .fr-position-inside { border: 0; } .fr-position-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0d0d0d; filter: alpha(opacity=80); opacity: .8; zoom: 1; /* oldIE */ } .fr-position-text { color: #b3b3b3; } .fr-position-outside .fr-position-text, .fr-position-inside .fr-position-text { float: left; position: relative; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); opacity: 1; } /* display it for the outside ui, hide the caption inside */ .fr-ui-outside .fr-position-outside { display: block; } .fr-ui-outside .fr-info .fr-position { display: none; } .fr-ui-inside.fr-no-caption .fr-position-inside { display: block; } /* links */ .fr-info a, .fr-info a:hover { color: #ccc; border: 0; background: none; text-decoration: underline; } .fr-info a:hover { color: #eee; } /* no-caption */ .fr-ui-outside.fr-no-caption .fr-info { display: none; } .fr-ui-inside.fr-no-caption .fr-caption { display: none; } /* --- stroke */ .fr-stroke { position: absolute; top: 0; left: 0; width: 100%; height: 1px; } .fr-stroke-vertical { width: 1px; height: 100%; } .fr-stroke-horizontal { padding: 0 1px; } .fr-stroke-right { left: auto; right: 0; } .fr-stroke-bottom { top: auto; bottom: 0; } .fr-stroke-color { float: left; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.08); } /* the stroke is brighter inside the info box */ .fr-info .fr-stroke-color { background: rgba(80, 80, 80, 0.3); } /* remove the stroke when outside ui has a caption */ .fr-ui-outside.fr-has-caption .fr-content .fr-stroke-bottom { display: none; } /* remove stroke and shadow when ui:fullclick */ .fr-ui-fullclick .fr-stroke { display: none; } .fr-ui-fullclick .fr-content-background { box-shadow: none; } /* the info box never bas a top stroke */ .fr-info .fr-stroke-top { display: none; } /* < > */ .fr-side { position: absolute; top: 50%; width: 54px; height: 72px; margin: 0 9px; margin-top: -36px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; zoom: 1; } .fr-side-previous { left: 0; } .fr-side-next { right: 0; left: auto; } .fr-side-disabled { cursor: default; } .fr-side-hidden { display: none !important; } .fr-side-button { float: left; width: 100%; height: 100%; margin: 0; padding: 0; } .fr-side-button-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #101010; background-color: #ccc; } .fr-side-button-icon { float: left; position: relative; height: 100%; width: 100%; zoom: 1; background-position: 50% 50%; background-repeat: no-repeat; } /* smaller side buttons */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-side { width: 54px; height: 60px; margin: 0; margin-top: -30px; } .fr-side-button { width: 48px; height: 60px; margin: 0 3px; } } /* X */ .fr-close { position: absolute; width: 48px; height: 48px; top: 0; right: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .fr-close-background, .fr-close-icon { position: absolute; top: 12px; left: 12px; height: 26px; width: 26px; background-position: 50% 50%; background-repeat: no-repeat; } .fr-close-background { background-color: #000; } /* Thumbnails */ .fr-thumbnails { position: absolute; overflow: hidden; } .fr-thumbnails-disabled .fr-thumbnails { display: none !important; } .fr-thumbnails-horizontal .fr-thumbnails { width: 100%; height: 12%; min-height: 74px; max-height: 160px; bottom: 0; } .fr-thumbnails-vertical .fr-thumbnails { height: 100%; width: 10%; min-width: 74px; max-width: 160px; left: 0; } .fr-thumbnails, .fr-thumbnails * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fr-thumbnails-wrapper { position: absolute; top: 0; left: 50%; height: 100%; } .fr-thumbnails-vertical .fr-thumbnails-wrapper { top: 50%; left: 0; } .fr-thumbnails-slider { position: relative; width: 100%; height: 100%; float: left; zoom: 1; } .fr-thumbnails-slider-slide { position: absolute; top: 0; left: 0; height: 100%; } .fr-thumbnails-thumbs { float: left; height: 100%; overflow: hidden; position: relative; top: 0; left: 0; } .fr-thumbnails-slide { position: absolute; top: 0; height: 100%; width: 100%; } .fr-thumbnail-frame { position: absolute; zoom: 1; overflow: hidden; } .fr-thumbnail { position: absolute; width: 30px; height: 100%; left: 50%; top: 50%; zoom: 1; cursor: pointer; margin: 0 10px; } .fr-ltIE9 .fr-thumbnail * { overflow: hidden; /* IE6(7) */ z-index: 1; zoom: 1; } .fr-thumbnail-wrapper { position: relative; background: #161616; width: 100%; height: 100%; float: left; overflow: hidden; display: inline; /* IE6(7) */ z-index: 0; /* IE8 */ } .fr-thumbnail-overlay { cursor: pointer; } .fr-thumbnail-active .fr-thumbnail-overlay { cursor: default; } .fr-thumbnail-overlay, .fr-thumbnail-overlay-background, .fr-thumbnail-overlay-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-width: 0; overflow: hidden; border-style: solid; border-color: transparent; } .fr-ltIE9 .fr-thumbnail-overlay-border { border-width: 0 !important; } .fr-thumbnail .fr-thumbnail-image { position: absolute; filter: alpha(opacity=85); opacity: .85; max-width: none; } .fr-thumbnail:hover .fr-thumbnail-image, .fr-thumbnail-active:hover .fr-thumbnail-image { filter: alpha(opacity=99); opacity: .99; } .fr-thumbnail-active .fr-thumbnail-image, .fr-thumbnail-active:hover .fr-thumbnail-image { filter: alpha(opacity=35); opacity: .35; } .fr-thumbnail-active { cursor: default; } /* Thumbnails loading */ .fr-thumbnail-loading, .fr-thumbnail-loading-background, .fr-thumbnail-loading-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fr-thumbnail-loading-background { background-color: #161616; background-position: 50% 50%; background-repeat: no-repeat; opacity: .8; position: relative; float: left; } /* this element is there as an alternative to putting the loading image on the background */ .fr-thumbnail-loading-icon { display: none; } /* error on thumbnail */ .fr-thumbnail-error .fr-thumbnail-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #202020; } /* Thumbnail < > */ .fr-thumbnails-side { float: left; height: 100%; width: 28px; margin: 0 5px; position: relative; overflow: hidden; } .fr-thumbnails-side-previous { margin-left: 12px; } .fr-thumbnails-side-next { margin-right: 12px; } .fr-thumbnails-vertical .fr-thumbnails-side { height: 28px; width: 100%; margin: 10px 0; } .fr-thumbnails-vertical .fr-thumbnails-side-previous { margin-top: 20px; } .fr-thumbnails-vertical .fr-thumbnails-side-next { margin-bottom: 20px; } .fr-thumbnails-side-button { position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -14px; width: 28px; height: 28px; cursor: pointer; } .fr-thumbnails-side-button-background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; filter: alpha(opacity=80); opacity: .8; -moz-transition: background-color .2s ease-in; -webkit-transition: background-color .2s ease-in; transition: background-color .2s ease-in; background-color: #333; cursor: pointer; border-radius: 4px; } .fr-thumbnails-side-button:hover .fr-thumbnails-side-button-background { background-color: #3b3b3b; } .fr-thumbnails-side-button-disabled * { cursor: default; } .fr-thumbnails-side-button-disabled:hover .fr-thumbnails-side-button-background { background-color: #333; } .fr-thumbnails-side-button-icon { height: 42px; width: 42px; position: absolute; /*top: -7px; left: -7px;*/ top: 0; left: 0; width: 100%; height: 100%; } /* vertical thumbnails */ .fr-thumbnails-vertical .fr-thumbnails-side, .fr-thumbnails-vertical .fr-thumbnails-thumbs, .fr-thumbnails-vertical .fr-thumbnail-frame { clear: both; } /* ui:fullclick has a dark thumbnail background */ .fr-window-ui-fullclick .fr-thumbnails { background: #090909; } /* put a stroke on the connecting caption*/ .fr-window-ui-fullclick.fr-thumbnails-enabled.fr-thumbnails-horizontal .fr-info .fr-stroke-bottom { display: block !important; } /*({ box-shadow: inset 0 -1px 0 rgba(255,255,255,.1); } */ .fr-window-ui-fullclick.fr-thumbnails-enabled.fr-thumbnails-vertical .fr-info .fr-stroke-left { display: block !important; } /* thumbnail spacing */ .fr-thumbnails-horizontal .fr-thumbnails-thumbs { padding: 12px 5px; } .fr-thumbnails-vertical .fr-thumbnails-thumbs { padding: 5px 12px; } .fr-thumbnails-measured .fr-thumbnails-thumbs { padding: 0 !important; } /* horizontal */ @media all and (min-height: 700px) { .fr-thumbnails-horizontal .fr-thumbnails-thumbs { padding: 16px 8px; } .fr-thumbnails-horizontal .fr-thumbnails-side { margin: 0 8px; } .fr-thumbnails-horizontal .fr-thumbnails-side-previous { margin-left: 16px; } .fr-thumbnails-horizontal .fr-thumbnails-side-next { margin-right: 16px; } } @media all and (min-height: 980px) { .fr-thumbnails-horizontal .fr-thumbnails-thumbs { padding: 20px 10px; } .fr-thumbnails-horizontal .fr-thumbnails-side { margin: 0 10px; } .fr-thumbnails-horizontal .fr-thumbnails-side-previous { margin-left: 20px; } .fr-thumbnails-horizontal .fr-thumbnails-side-next { margin-right: 20px; } } /* vertical */ @media all and (min-width: 1200px) { .fr-thumbnails-vertical .fr-thumbnails-thumbs { padding: 8px 16px; } .fr-thumbnails-vertical .fr-thumbnails-side { margin: 0 8px; } .fr-thumbnails-vertical .fr-thumbnails-side-previous { margin-top: 16px; } .fr-thumbnails-vertical .fr-thumbnails-side-next { margin-bottom: 16px; } } @media all and (min-width: 1800px) { .fr-thumbnails-vertical .fr-thumbnails-thumbs { padding: 10px 20px; } .fr-thumbnails-vertical .fr-thumbnails-side { margin: 10px 0; } .fr-thumbnails-vertical .fr-thumbnails-side-previous { margin-top: 20px; } .fr-thumbnails-vertical .fr-thumbnails-side-next { margin-bottom: 20px; } } /* hide thumbnails on smaller screens the js always hides them on touch based devices */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 500px) { .fr-thumbnails-horizontal .fr-thumbnails { display: none !important; } } @media all and (max-width: 700px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-thumbnails-vertical .fr-thumbnails { display: none !important; } } /* force fullClick: true and force overflow: false */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-page { min-width: 100%; } /* fullclick */ .fr-page { min-height: 100%; } /* overflow: false */ } /* switch between ui modes we force everything not in the current UI mode to hide */ .fr-window-ui-fullclick .fr-side-next-outside, .fr-window-ui-fullclick .fr-side-previous-outside, .fr-window-ui-fullclick .fr-close-outside, .fr-window-ui-fullclick .fr-content .fr-side-next, .fr-window-ui-fullclick .fr-content .fr-side-previous, .fr-window-ui-fullclick .fr-content .fr-close, .fr-window-ui-fullclick .fr-content .fr-info, .fr-window-ui-outside .fr-side-next-fullclick, .fr-window-ui-outside .fr-side-previous-fullclick, .fr-window-ui-outside .fr-close-fullclick, .fr-window-ui-outside .fr-content .fr-side-next, .fr-window-ui-outside .fr-content .fr-side-previous, .fr-window-ui-outside .fr-content .fr-close, .fr-window-ui-outside .fr-content .fr-info, .fr-window-ui-inside .fr-page > .fr-info, .fr-window-ui-inside .fr-side-next-fullclick, .fr-window-ui-inside .fr-side-previous-fullclick, .fr-window-ui-inside .fr-close-fullclick, .fr-window-ui-inside .fr-side-next-outside, .fr-window-ui-inside .fr-side-previous-outside, .fr-window-ui-inside .fr-close-outside { display: none !important; } /* some ui elements can be toggled on mousemove. filter:alpha(opacity) is bugged so we use display in oldIE */ .fr-toggle-ui { opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; } .fr-visible-fullclick-ui .fr-box > .fr-toggle-ui, .fr-visible-inside-ui .fr-ui-inside .fr-toggle-ui { opacity: 1; } .fr-hidden-fullclick-ui .fr-box > .fr-toggle-ui, .fr-hidden-inside-ui .fr-ui-inside .fr-toggle-ui { -webkit-transition: opacity .3s; transition: opacity .3s; } .fr-ltIE9.fr-hidden-fullclick-ui .fr-box > .fr-toggle-ui, .fr-ltIE9.fr-hidden-inside-ui .fr-ui-inside .fr-toggle-ui { display: none; } /* Spinner */ .fr-spinner { position: fixed; width: 52px; height: 52px; background: #101010; background: rgba(16, 16, 16, 0.85); border-radius: 5px; } .fr-spinner div { position: absolute; top: 0; left: 0; height: 64%; width: 64%; margin-left: 18%; margin-top: 18%; opacity: 1; -webkit-animation: fresco-12 1.2s infinite ease-in-out; animation: fresco-12 1.2s infinite ease-in-out; } .fr-spinner div:after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 8px; margin-left: -1px; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* fixes rendering in Firefox */ } .fr-spinner div.fr-spin-1 { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .fr-spinner div.fr-spin-2 { -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .fr-spinner div.fr-spin-3 { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .fr-spinner div.fr-spin-4 { -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg); -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .fr-spinner div.fr-spin-5 { -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .fr-spinner div.fr-spin-6 { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .fr-spinner div.fr-spin-6 { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .fr-spinner div.fr-spin-7 { -ms-transform: rotate(210deg); -webkit-transform: rotate(210deg); transform: rotate(210deg); -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .fr-spinner div.fr-spin-8 { -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); transform: rotate(240deg); -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .fr-spinner div.fr-spin-9 { -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .fr-spinner div.fr-spin-10 { -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); transform: rotate(300deg); -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .fr-spinner div.fr-spin-11 { -ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg); -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .fr-spinner div.fr-spin-12 { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes fresco-12 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fresco-12 { 0% { opacity: 1; } 100% { opacity: 0; } } /* Thumbnail spinner */ .fr-thumbnail-spinner { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; } .fr-thumbnail-spinner-spin { position: relative; float: left; margin: 8px 0 0 8px; text-indent: -9999em; border-top: 2px solid rgba(255, 255, 255, 0.2); border-right: 2px solid rgba(255, 255, 255, 0.2); border-bottom: 2px solid rgba(255, 255, 255, 0.2); border-left: 2px solid #fff; -webkit-animation: fr-thumbnail-spin 1.1s infinite linear; animation: fr-thumbnail-spin 1.1s infinite linear; } .fr-thumbnail-spinner-spin, .fr-thumbnail-spinner-spin:after { border-radius: 50%; width: 24px; height: 24px; } @-webkit-keyframes fr-thumbnail-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fr-thumbnail-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Error */ .fr-error { float: left; position: relative; background-color: #ca3434; width: 160px; height: 160px; } .fr-error-icon { position: absolute; width: 42px; height: 42px; top: 50%; left: 50%; margin-left: -21px; margin-top: -21px; } /* skin: 'fresco' */ /* Sprite */ .fr-window-skin-fresco .fr-side-button-icon, .fr-window-skin-fresco .fr-close-icon, .fr-window-skin-fresco .fr-thumbnails-side-button-icon, .fr-window-skin-fresco .fr-error-icon { background-image: url("../assets/fresco/sprite.svg"); } /* fallback png sprite */ .fr-window-skin-fresco.fr-no-svg .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-close-icon, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-button-icon, .fr-window-skin-fresco .fr-error-icon { background-image: url("../assets/fresco/sprite.png"); } .fr-window-skin-fresco .fr-error-icon { background-position: -160px -126px; } .fr-window-skin-fresco .fr-content-background { background: #101010; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); } .fr-window-skin-fresco.fr-window-ui-fullclick .fr-content-background { box-shadow: none; } /* thumbnail shadow */ .fr-window-skin-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); } /* < > */ .fr-window-skin-fresco .fr-side-button-background { background-color: transparent; } .fr-window-skin-fresco .fr-side-previous .fr-side-button-icon { background-position: -13px -14px; } .fr-window-skin-fresco .fr-side-next .fr-side-button-icon { background-position: -93px -14px; } .fr-window-skin-fresco .fr-side-previous:hover .fr-side-button-icon { background-position: -13px -114px; } .fr-window-skin-fresco .fr-side-next:hover .fr-side-button-icon { background-position: -93px -114px; } /* transition (png) */ .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-previous .fr-side-button-icon { background-position: -13px -114px; } .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-next .fr-side-button-icon { background-position: -93px -114px; } /* disabled state (png) */ .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled:hover .fr-side-button-icon { background-position: -13px -214px; } .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled:hover .fr-side-button-icon { background-position: -93px -214px; } /* transition (svg) */ .fr-window-skin-fresco.fr-svg .fr-side-previous .fr-side-button-icon { background-position: -13px -114px; } .fr-window-skin-fresco.fr-svg .fr-side-next .fr-side-button-icon { background-position: -93px -114px; } .fr-window-skin-fresco.fr-svg .fr-side-button-icon { opacity: .5; } .fr-window-skin-fresco.fr-svg .fr-side:hover .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-previous .fr-side-previous .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-next .fr-side-next .fr-side-button-icon { opacity: 1; } .fr-window-skin-fresco.fr-svg.fr-mobile-touch .fr-side .fr-side-button-icon { opacity: .8; } /* touch always active but at lower opacity */ /* disabled (svg) */ .fr-window-skin-fresco.fr-svg .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-previous .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-next .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-side-disabled:hover .fr-side-button-icon, .fr-window-skin-fresco.fr-svg.fr-mobile-touch .fr-side-disabled .fr-side-button-icon { opacity: .2; } /* TODO: make sure this works */ /* hide for ui:inside/fullclick, only for the image type */ .fr-window-skin-fresco.fr-window-ui-inside .fr-type-image .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-window-ui-fullclick.fr-showing-type-image .fr-side-disabled .fr-side-button-icon { background-image: none; } /* < > responsive */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-window-skin-fresco .fr-side-previous .fr-side-button-icon { background-position: 0px -300px; } .fr-window-skin-fresco .fr-side-next .fr-side-button-icon { background-position: -48px -300px; } .fr-window-skin-fresco .fr-side-previous:hover .fr-side-button-icon { background-position: 0px -360px; } .fr-window-skin-fresco .fr-side-next:hover .fr-side-button-icon { background-position: -48px -360px; } /* transition (png) */ .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-previous .fr-side-button-icon { background-position: 0px -360px; } .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-next .fr-side-button-icon { background-position: -48px -360px; } /* transition (svg) */ .fr-window-skin-fresco.fr-svg .fr-side-previous .fr-side-button-icon { background-position: 0px -360px; } .fr-window-skin-fresco.fr-svg .fr-side-next .fr-side-button-icon { background-position: -48px -360px; } /* disabled state (png) */ .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled:hover .fr-side-button-icon { background-position: 0px -420px; } .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled:hover .fr-side-button-icon { background-position: -48px -420px; } } /* X */ /* colors */ .fr-window-skin-fresco.fr-window-ui-outside .fr-close-background { background-color: #363636; } .fr-window-skin-fresco.fr-window-ui-outside .fr-close:hover .fr-close-background { background-color: #434343; } .fr-window-skin-fresco.fr-window-ui-inside .fr-close-background, .fr-window-skin-fresco.fr-window-ui-fullclick .fr-close-background { background-color: #131313; filter: alpha(opacity=80); opacity: .8; } .fr-window-skin-fresco.fr-window-ui-inside .fr-close:hover .fr-close-background, .fr-window-skin-fresco.fr-window-ui-fullclick .fr-close:hover .fr-close-background { background-color: #191919; } /* - image */ .fr-window-skin-fresco .fr-close .fr-close-icon { background-position: -168px -8px; } .fr-window-skin-fresco .fr-close:hover .fr-close-icon { background-position: -210px -8px; } /* - transition */ .fr-window-skin-fresco.fr-svg .fr-close .fr-close-icon { background-position: -210px -8px; opacity: .8; } .fr-window-skin-fresco .fr-close:hover .fr-close-icon { opacity: 1; } /* Thumbnails */ .fr-window-skin-fresco .fr-thumbnail-wrapper { border-color: transparent; border-style: solid; border-width: 0; } .fr-window-skin-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); } .fr-window-skin-fresco .fr-thumbnail-wrapper { box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3); } .fr-window-skin-fresco .fr-thumbnail-overlay-border { border-width: 1px; border-color: rgba(255, 255, 255, 0.08); /* should remain rgba */ } /* no inner border on active thumbnail */ .fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-overlay-border, .fr-window-skin-fresco .fr-thumbnail-active:hover .fr-thumbnail-overlay-border { border: 0px; } /* Thumbnails < > */ .fr-window-skin-fresco .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -167px -49px; } .fr-window-skin-fresco .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -209px -49px; } .fr-window-skin-fresco .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -167px -91px; } .fr-window-skin-fresco .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -209px -91px; } /* vertical ^ (up/down) adjustments */ .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -293px -49px; } .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -335px -49px; } .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -293px -91px; } .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -335px -91px; } /* Thumbnails < > transition */ .fr-window-skin-fresco.fr-svg .fr-thumbnails-side .fr-thumbnails-side-button-icon { -moz-transition: opacity .2s ease-in; -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; opacity: .8; } .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -167px -49px; } .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-next .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -209px -91px; } .fr-window-skin-fresco.fr-svg .fr-thumbnails-side:hover .fr-thumbnails-side-button-icon { opacity: 1; } /* vertical ^ (up/down) adjustments */ .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -293px -49px; } .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -335px -91px; } /* lower opacity on disabled states */ .fr-window-skin-fresco.fr-svg .fr-thumbnails-side .fr-thumbnails-side-button-disabled, .fr-window-skin-fresco.fr-svg .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled { opacity: .5; } /* lower opacity IE < 9 using images */ .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -251px -49px; } .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -251px -91px; } .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background { filter: alpha(opacity=50); } /* vertical ^ (up/down) adjustments */ .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -377px -49px; } .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -377px -91px; }