/** * RSCSS - Really S[imple|hort] Cascading Style Sheet * Copyright (c) 2015-2022 Philipp Kolbeck * Parsed: 31.03.2022 12:27:42 - Rendertime: 0,0231sec. */ @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url(../fnt/poppins/poppins.italic.100.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url(../fnt/poppins/poppins.italic.100.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url(../fnt/poppins/poppins.italic.100.latin.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: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url(../fnt/poppins/poppins.italic.200.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url(../fnt/poppins/poppins.italic.200.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url(../fnt/poppins/poppins.italic.200.latin.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: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fnt/poppins/poppins.italic.300.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fnt/poppins/poppins.italic.300.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fnt/poppins/poppins.italic.300.latin.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: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fnt/poppins/poppins.italic.400.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fnt/poppins/poppins.italic.400.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fnt/poppins/poppins.italic.400.latin.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: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fnt/poppins/poppins.italic.500.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fnt/poppins/poppins.italic.500.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fnt/poppins/poppins.italic.500.latin.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: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fnt/poppins/poppins.italic.600.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fnt/poppins/poppins.italic.600.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fnt/poppins/poppins.italic.600.latin.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: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fnt/poppins/poppins.italic.700.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fnt/poppins/poppins.italic.700.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fnt/poppins/poppins.italic.700.latin.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: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url(../fnt/poppins/poppins.italic.800.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url(../fnt/poppins/poppins.italic.800.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url(../fnt/poppins/poppins.italic.800.latin.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: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url(../fnt/poppins/poppins.italic.900.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url(../fnt/poppins/poppins.italic.900.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url(../fnt/poppins/poppins.italic.900.latin.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: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url(../fnt/poppins/poppins.normal.100.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url(../fnt/poppins/poppins.normal.100.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url(../fnt/poppins/poppins.normal.100.latin.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: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url(../fnt/poppins/poppins.normal.200.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url(../fnt/poppins/poppins.normal.200.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url(../fnt/poppins/poppins.normal.200.latin.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: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fnt/poppins/poppins.normal.300.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fnt/poppins/poppins.normal.300.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fnt/poppins/poppins.normal.300.latin.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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fnt/poppins/poppins.normal.400.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fnt/poppins/poppins.normal.400.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fnt/poppins/poppins.normal.400.latin.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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fnt/poppins/poppins.normal.500.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fnt/poppins/poppins.normal.500.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fnt/poppins/poppins.normal.500.latin.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fnt/poppins/poppins.normal.600.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fnt/poppins/poppins.normal.600.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fnt/poppins/poppins.normal.600.latin.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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fnt/poppins/poppins.normal.700.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fnt/poppins/poppins.normal.700.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fnt/poppins/poppins.normal.700.latin.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: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fnt/poppins/poppins.normal.800.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fnt/poppins/poppins.normal.800.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fnt/poppins/poppins.normal.800.latin.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: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fnt/poppins/poppins.normal.900.devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fnt/poppins/poppins.normal.900.latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fnt/poppins/poppins.normal.900.latin.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; } body { overflow-y: scroll; } * { font-family: Poppins; } .scrollto-anchor { position: absolute; margin-top: -150px; } .btn { border: 0; border-radius: 0; text-transform: uppercase; font-weight: bold; } .bg-gradient-1 { background: #19c1c9; background: -moz-linear-gradient(left, #19c1c9 0%, #1d71a8 100%); background: -webkit-linear-gradient(left, #19c1c9 0%,#1d71a8 100%); background: linear-gradient(to right, #19c1c9 0%,#1d71a8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19c1c9', endColorstr='#1d71a8',GradientType=1 ); position: relative; } .btn.bg-gradient-1:hover { box-shadow: 0 1px 1px rgba(0,0,0,05), 0 0 0 5px rgba(0,0,0,.15); text-shadow: 0 1px 1px #000; } .bg-gradient-2 { background: #1d71a8; background: -moz-linear-gradient(left, #1d71a8 0%, #000000 100%); background: -webkit-linear-gradient(left, #1d71a8 0%,#000000 100%); background: linear-gradient(to right, #1d71a8 0%,#000000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d71a8', endColorstr='#000000',GradientType=1 ); } .bg-gradient-3 { background: #1d71a8; background: -moz-linear-gradient(left, #1d71a8 0%, #19c1c9 100%); background: -webkit-linear-gradient(left, #1d71a8 0%,#19c1c9 100%); background: linear-gradient(to right, #1d71a8 0%,#19c1c9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d71a8', endColorstr='#19c1c9',GradientType=1 ); } .btn.bg-gradient-1:hover, .btn.bg-gradient-2:hover, .btn.bg-gradient-3:hover { box-shadow: 0 1px 1px rgba(0,0,0,05), 0 0 0 5px rgba(0,0,0,.15); text-shadow: 0 1px 1px #000; } .blockname { position: absolute; background-color: #FF0; padding: 10px; font-weight: bold; text-transform: uppercase; left: 10px; } .navbar_backdrop { position: fixed; top: 0; left: 0; right: 0; content: ""; background-color: #1D71A8; background-color: rgba(29,113,168,.15); background-color: rgba(34,52,65,.5); background-color: rgba(23,234,217,.1); background-color: rgba(0,0,0,.5); background-color: rgba(29,113,168,.75); background-color: rgba(25,193,201,.75); background: -moz-linear-gradient(top, rgba(29,113,168,0.75) 0%, rgba(25,193,201,0.75) 100%); background: -webkit-linear-gradient(top, rgba(29,113,168,0.75) 0%,rgba(25,193,201,0.75) 100%); background: linear-gradient(to bottom, rgba(29,113,168,0.75) 0%,rgba(25,193,201,0.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf1d71a8', endColorstr='#bf19c1c9',GradientType=0 ); height: 0; transition: 250ms; z-index: 1000; } body.navbar-backdrop-show .navbar_backdrop { height: 100vh; } .navbar-basic { z-index: 10001; transition: background-color 200ms; pointer-events: none; } .navbar-basic>.container>.collapse>* { pointer-events: all; } .navbar-basic .navbar-brand img { height: 26px; } .navbar-basic .nav-link { color: #23292f !important; font-size: 14px; font-weight: normal; } .navbar-basic.navbar-scrolled { background-color: #FFF; } .navbar-main { height: 100px; align-items: flex-start; padding-top: 30px; transition: background-color 200ms; pointer-events: none; } .navbar-main .navbar-brand, .navbar-main .navbar-toggler, .navbar-main>.container>.collapse>* { pointer-events: all; } @media (max-width: 575.98px) { .navbar-main { height: 60px; padding-top: 9px; } } @media (min-width: 576px) and (max-width: 991.98px) { .navbar-main { height: 75px; padding-top: 11px; } } .navbar-main .navbar-brand img { height: 45px; position: relative; margin-top: -2px; margin-bottom: -2px; height: 55px; margin-top: -13px; margin-bottom: -13px; } @media (min-width: 992px) and (max-width: 1199.98px) { .navbar-main .navbar-brand img { height: 26px; height: 36px; margin-top: -3px; margin-bottom: -3px; } } @media (min-width: 576px) and (max-width: 991.98px) { .navbar-main .navbar-brand img { height: 45px; margin-top: -2px; margin-bottom: -2px; } } @media (max-width: 575.98px) { .navbar-main .navbar-brand img { height: 32px; } } #navbar_main_content ul.dropdown-menu { border: none; } #navbar_main_content ul.dropdown-menu { border: none; } #navbar_main:hover, nav.navbar:hover { background-color: #FFF; } #navbar_main_content ul.dropdown-menu li a:hover { color: #19C1C9; } @media (min-width: 992px) { #navbar_main_content ul.dropdown-menu { margin-top: 23px; box-shadow: 0 10px 10px rgba(0,0,0,.25); } #navbar_main_content ul.dropdown-menu li { margin: 18px 0px; } } @media (max-width: 991.98px) { .navbar-main.fixed-top .navbar-collapse, .navbar-main.sticky-top .navbar-collapse { overflow-y: auto; max-height: 90vh; margin-top: 10px; } } .navbar-main .nav-link { color: #23292f !important; font-size: 16px; font-weight: bold; } .navbar-main .nav-link span { color: #17EAD9; color: #12c2b3; color: #19C1C9; } .navbar-main .nav-link.dropdown-toggle:after { } @media (max-width: 991.98px) { .navbar-main .navbar-collapse { background-color: #FFF; box-shadow: -30vw 0 0 #FFF, 30vw 0 0 #FFF; padding-bottom: 20px; } .navbar-main { background-color: #FFF; } } .dropdown-item:hover { background-color: rgba(25,193,201,.1); background-color: #19C1C9; color: #FFF !important; } body.navbar-backdrop-show #navbar_main { background-color: #FFF; } .navbar-main.navbar-scrolled { background-color: #FFF; } body.navbar-backdrop-show .navbar-main { box-shadow: 0 10px 10px rgba(0,0,0,.25); } @media (min-width: 1400px) { .menu-col-1 { width: 250px; } .menu-col-2 { width: 290px; } .menu-col-3 { width: 250px; } .menu-col-4 { width: 150px; } .menu-col-5 { width: 50px; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .menu-col-1 { width: 210px; } .menu-col-2 { width: 240px; } .menu-col-3 { width: 220px; } .menu-col-4 { width: 130px; } .menu-col-5 { width: 50px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .menu-col-1 { width: 190px; } .menu-col-2 { width: 230px; } .menu-col-3 { width: 200px; } .menu-col-4 { width: 100px; } .menu-col-5 { width: 50px; } } .menu-col-5 { width: 50px; background-color: #F00; overflow: hidden; display: none !important; } main { margin-top: 75px; margin-bottom: 75px; } header.blank { min-height: 300px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 150px; } @media (min-width: 992px) { header.blank { position: relative; margin-top: -145px; } } header.particles { min-height: 300px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 150px; } header.particles { position: relative; margin-top: -145px; } header.particles #particles { position: absolute; left: 0; right: 0; bottom: 0; } header.particles h1 { font-size: 72px; font-weight: 900; text-transform: uppercase; position: relative; z-index: 100; pointer-events: none; letter-spacing: 3px; } @media (min-width: 768px) and (max-width: 991.98px) { header.particles h1 { font-size: 52px; } } @media (min-width: 576px) and (max-width: 767.98px) { header.particles h1 { font-size: 36px; } } @media (max-width: 575.98px) { header.particles h1 { font-size: 26px; } } div.cards { min-height: 300px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 150px; } @media (min-width: 992px) { div.cards { position: relative; margin-top: -145px; } } @media (max-width: 991.98px) { header.cards { padding-bottom: 75px; } } header.cards .card { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 0; border: 0; height: 320px; position: relative; overflow: hidden; } header.cards .card .score { height: 70%; opacity: 1; transition: 500ms; transition-delay: 300ms; } header.cards .card.active .score { opacity: 0; transition: 250ms; } header.cards .card .descr { position: absolute; left: 0; right: 0; top: 70%; height: 100%; background-color: rgba(35,41,47,.75); transition: top 200ms; bgi; } header.cards .card.active .descr { top: 0; cursor: pointer; } header.cards .card .descr>div:first-child { height: 30%; padding: 15px; font-size: 17px; line-height: 19px; font-weight: 900; text-transform: uppercase; color: #FFF; } header.cards .card .descr .title { background-image: url('../img/line.svg'); background-repeat: no-repeat; background-position: bottom 25% left 15px; } header.cards .card .descr .text { padding: 0 15px; color: #FFF; font-size: 14px; font-size: 12px; line-height: 16px; } header.cards .card .descr { } header.cards .card .descr .arrow { display: block; position: absolute; bottom: 15px; right: 50px; width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; background-image: url('../img/arr.blue.svg'); background-position: right bottom; opacity: 0; } header.cards .card.active .descr .arrow { transition-delay: 150ms; transition-duration: 250ms; right: 15px; opacity: 1; } @media (min-width: 1200px) and (max-width: 1399.98px) { header.cards .card { height: 280px; } header.cards .card .descr>div:first-child { font-size: 14px; line-height: 19px; } header.cards .card .descr .text { font-size: 12px; line-height: 14px; } } @media (min-width: 992px) and (max-width: 1199.98px) { header.cards.cards .card { height: 280px; } header.cards.cards .card .descr>div:first-child { font-size: 14px; line-height: 19px; } } @media (min-width: 768px) and (max-width: 991.98px) { header.cards.cards .card { height: 420px; } header.cards.cards .card .descr>div:first-child { font-size: 22px; line-height: 26px; } header.cards .card .descr .text { font-size: 18px; line-height: 22px; } } @media (max-width: 575.98px) { header.cards .card { height: 100vw; } header.cards .card .descr>div:first-child { font-size: 4vw; line-height: 4.5vw; } header.cards .card .descr .text { font-size: 3.5vw; line-height: 4vw; } } header.cards #particles { border-bottom: 150px #FFF solid; } @media (max-width: 991.98px) { header.cards #particles { display: none; } } header.cards>.container { } header.static h1 { font-size: 72px; font-weight: 900; text-transform: uppercase; position: relative; z-index: 100; pointer-events: none; letter-spacing: 3px; } header.static h1>span { color: #19c1c9; } @media (min-width: 768px) and (max-width: 991.98px) { header.static h1 { font-size: 52px; } } @media (min-width: 576px) and (max-width: 767.98px) { header.static h1 { font-size: 36px; } } @media (max-width: 575.98px) { header.static h1 { font-size: 26px; } } header.static>div>.row>div>*:last-child { margin-bottom: 0 !important; } header.static { padding-bottom: 0; } header.static .bread { padding: 0; list-style-type: none; display: flex; justify-content: center; } header.static .bread li { display: inline-block; } header.static .bread li:not(:last-child):after { margin-left: 10px; margin-right: 10px; color: #19c1c9; content: 'I'; top: 1px; bottom: -1px; position: relative; } header.static .bread a { color: #19c1c9; text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; } header.static .btn { margin: 0 !important; } @keyframes block1_background { 0%,50% { background-size: auto 90%; background-position: center left 20%; } 100% { background-size: auto 40%; background-position: center left 30%; } } .block1 { padding-top: 75px; padding-bottom: 75px; background-image: url('../img/x-gray.svg'); background-repeat: no-repeat; background-size: auto 90%; background-position: center left 20%; } .body:not(.ismobile) .block1 { animation: block1_background 20s ease-in-out infinite alternate; } .block1 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; } .block1 h2>span { color: #17EAD9; color: #19c1c9; } @media (max-width: 767.98px) { .block1 h2 { font-size: 24px; letter-spacing: 1px; } } .block1 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block1 p>span { color: #17EAD9; color: #19c1c9; } @keyframes block2_background { 0%,25% { background-size: auto 60%; background-position: center right 20%; } 75%,100% { background-size: auto 30%; background-position: center right 70%; } } .block2 { padding-top: 75px; padding-bottom: 75px; background-image: url('../img/x-gray.svg'); background-repeat: no-repeat; background-size: auto 60%; background-position: center right 20%; } .body:not(.ismobile) .block2 { animation: block2_background 20s ease-in-out infinite alternate; } .block2 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; } .block2 h2>span { color: #17EAD9; color: #19c1c9; } @media (max-width: 767.98px) { .block2 h2 { font-size: 24px; letter-spacing: 1px; } } .block2 h3 { font-family: Poppins; font-size: 24px; font-weight: 700; color: #17EAD9; color: #19c1c9; } .block2 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block2 p>span { color: #17EAD9; color: #19c1c9; } .block2 .icon { width: 40px; height: 40px; background-repeat: no-repeat; background-size: cover; margin: 25px 0; } .block2 .icon.icon-expertise { background-image: url('../img/icon.expertise.svg'); } .block2 .icon.icon-loyal { background-image: url('../img/icon.loyal.svg'); } .block2 .icon.icon-flexibel { background-image: url('../img/icon.flexibel.svg'); } .block2 .icon.icon-service { background-image: url('../img/icon.service.svg'); } @media (max-width: 767.98px) { .block2 .icon { position: absolute; } .block2 h3 { margin: 30px 0 20px 60px; } } @keyframes block3_background { 0%,25% { background-size: auto 60%; background-position: center right 20%; } 75%,100% { background-size: auto 30%; background-position: center right 70%; } } .block3 { padding-top: 75px; padding-bottom: 75px; } .body:not(.ismobile) .block3 { } .block3 .video { position: relative; } .block3 .video .cover { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden; } .block3 .video .cover>.row { } .block3 .video .cover img { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; object-fit: cover; max-width: 100%; } .block3 .video .cover .play { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-image: url('../img/icon.play.svg'); background-repeat: no-repeat; background-position: center; background-size: 60px; transition: background-size 200ms; cursor: pointer; } .block3 .video .play:hover { background-size: 80px; } .block3 .video video { position: relative; } .block3 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; color: #FFF; text-transform: uppercase; } .block3 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block3 h2 { font-size: 24px; letter-spacing: 1px; } } .block3 h3 { font-family: Poppins; font-size: 20px; font-weight: 900; color: #FFF; text-transform: uppercase; } .block3 p { font-family: Poppins; font-size: 14px; line-height: 28px; color: #FFF; } .block3 p>span { color: #19c1c9; } .block4 { padding-top: 75px; padding-bottom: 75px; } .block4 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; color: #FFF; text-transform: uppercase; } .block4 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block4 h2 { font-size: 24px; letter-spacing: 1px; } } .block4 h3 { font-family: Poppins; font-size: 20px; font-weight: 900; color: #FFF; text-transform: uppercase; } .block4 p { font-family: Poppins; font-size: 14px; line-height: 28px; color: #FFF; } .block4 p>span { color: #19c1c9; } .block4 .result tr.hide { display: none; } .block4 .result tr>td { color: #FFF; font-size: 20px; padding-top: 15px; padding-bottom: 15px; } .block4 .result tr>td:last-child { text-transform: uppercase; } .block4 .result tr>td a { color: #FFF; font-weight: bold; text-decoration: none; } @media (max-width: 991.98px) { .block4 .result tr { display: flex; flex-direction: column; } .block4 .result tr>td:not(:first-of-type) { padding-top: 0; padding-left: 30px; } .block4 .result tr>td:not(:last-of-type) { border-bottom: none; padding-bottom: 0; } .block4 .result tr>td:first-of-type { font-weight: bold; padding-bottom: 10px; } .block4 .result tr>td:last-of-type { padding-top: 15px; padding-right: 30px; } } @keyframes block4_urgent { 0% { background-position: top left -129px; opacity: 1; } 5% { background-position: top left; opacity: 1; } 50% { background-position: top left; opacity: 1; } 79% { background-position: top left; opacity: 0; } 80%,100% { background-position: top left -129px; opacity: 0; } } .block4 .result .urgent:before { display: block; position: absolute; margin-left: -145px; margin-top: 1px; content: ""; background-image: url('../img/dringend.png'); background-repeat: no-repeat; background-position: top left -129px; width: 129px; height: 25px; } .body:not(.ismobile) .block4 .result .urgent:before { animation: block4_urgent 5s ease-in-out infinite; } .block4 .result tr>td:last-child { text-align: right; } .block4 form { background-color: #FFF; } .block4 form input, .block4 form button { min-height: 50px; } .block4 form input[type="text"] { background-color: #FFF; font-size: 16px; font-weight: 500; color: #A2A2A2; outline: 0; border: 0; max-width: 100%; } .block4 form .input-wrapper, .block4 form .select-wrapper { height: 100%; display: flex; ca: center; } @media (max-width: 767.98px) { .block4 form .input-wrapper, .block4 form .select-wrapper { height: 100%; display: flex; ca: center; border-bottom: 1px #19c1c9 solid; min-height: 50px; } } .block4 form .input-wrapper-search, .block4 form .select-wrapper-location { background-repeat: no-repeat; background-position: 0 center; padding-left: 40px; } .block4 form .input-wrapper-search { background-image: url('../img/icon.pen.svg'); } .block4 form .select-wrapper-location { background-image: url('../img/icon.location.svg'); } .block4 form select { justify-content: center; ca: center; outline: 0; border: 0; border-radius: 0; font-size: 16px; color: #A2A2A2; font-weight: 500; width: 100%; cursor: pointer; } .block4 form select>option { border-radius: 0; } .block4 .show_more { color: #FFF; border: 2px #FFF solid; height: 50px; } .block5 .carousel-item .card { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 0; border: 0; height: 320px; position: relative; overflow: hidden; margin-right: 1em; } @media (max-width: 767.98px) { .block5 .carousel-item .card { height: 500px; } } .block5 .carousel-item .card .score { height: 70%; opacity: 1; transition: 500ms; transition-delay: 300ms; } .block5 .carousel-item .card.active .score { opacity: 0; transition: 250ms; } .block5 .carousel-item .card .descr { position: absolute; left: 0; right: 0; top: 70%; height: 100%; background-color: rgba(35,41,47,.75); transition: top 200ms; } .block5 .carousel-item .card.active .descr { top: 0; cursor: pointer; } .block5 .carousel-item .card .descr>div:first-child { height: 30%; padding: 15px; font-size: 17px; line-height: 19px; font-weight: 900; text-transform: uppercase; color: #FFF; } .block5 .carousel-item .card .descr .title { background-image: url('../img/line.svg'); background-repeat: no-repeat; background-position: bottom 25% left 15px; } .block5 .carousel-item .card .descr .text { padding: 0 15px; color: #FFF; font-size: 14px; font-size: 12px; line-height: 16px; } .block5 .carousel-item .card .descr { } .block5 .carousel-item .card .descr .arrow { display: block; position: absolute; bottom: 15px; right: 50px; width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; background-image: url('../img/arr.blue.svg'); background-position: right bottom; opacity: 0; } .block5 .carousel-item .card.active .descr .arrow { transition-delay: 150ms; transition-duration: 250ms; right: 15px; opacity: 1; } @media (min-width: 1200px) and (max-width: 1399.98px) { .block5 .carousel-item .card { height: 280px; } .block5 .carousel-item .card .descr>div:first-child { font-size: 14px; line-height: 19px; } .block5 .carousel-item .card .descr .text { font-size: 12px; line-height: 14px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .block5 .carousel-item .card { height: 280px; } .block5 .carousel-item .card .descr>div:first-child { font-size: 14px; line-height: 19px; } } @media (min-width: 768px) and (max-width: 991.98px) { .block5 .carousel-item .card { height: 420px; } .block5 .carousel-item .card .descr>div:first-child { font-size: 22px; line-height: 26px; } .block5 .carousel-item .card .descr .text { font-size: 18px; line-height: 22px; } } @media (max-width: 575.98px) { .block5 .carousel-item .card { height: 100vw; } .block5 .carousel-item .card .descr>div:first-child { font-size: 4vw; line-height: 4.5vw; } .block5 .carousel-item .card .descr .text { font-size: 3.5vw; line-height: 4vw; } } .block5 .carousel-item >.container { } .block5 div.title-line:after { content: " "; display: block; background-image: url(/img/title-line.svg); background-repeat: no-repeat; width: 100%; height: 5px; margin-left: 1em; } .block5 div.title-line { display: flex; flex-direction: row; font-weight: nowrap; align-items: center; white-space: nowrap; color: #17ead9; font-size: 12px; font-family: Poppins; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1em; } .block5 .label-block { margin: 1em 0; } .block5 h2 { font-family: Poppins; font-size: 32px; line-height: 38px; font-weight: 900; color: #23292F; } .block5 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block5 h2 { font-size: 24px; letter-spacing: 1px; } } .block5 .button-group { margin: 1em; text-align: end; } .block5 .block5 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block5 ul.color-bullets { list-style-image: url('../img/bullet_point.svg'); } .block5 .xx-bg { background-image: url(/img/xx-bg.svg); background-position: 100% center; background-repeat: no-repeat; padding-right: 8em; } .block5 #projectCarousel .titel-img { height: 120px; background-size: cover; color: white; text-align: center; display: flex; align-items: center; justify-content: center; padding: 1em; text-transform: uppercase; font-weight: bold; } .block5 #projectCarousel .card-body { text-align: center; } .block5 #projectCarousel .carousel-item .card { height: 380px; background-color: #f0f0f0; } .block5 .explanation { padding-right: 5vw; } @media (max-width: 767px) { .block5 .carousel-inner .carousel-item > div { display: none; } .block5 .carousel-inner .carousel-item > div:first-child { display: block; } } .block5 .carousel-inner .carousel-item.active, .block5 .carousel-inner .carousel-item-next, .block5 .carousel-inner .carousel-item-prev { display: flex; } @media (min-width: 768px) { .block5 .carousel-inner .carousel-item-end.active, .block5 .carousel-inner .carousel-item-next { transform: translateX(25%); } .block5 .carousel-inner .carousel-item-start.active, .block5 .carousel-inner .carousel-item-prev { transform: translateX(-25%); } } .block5 .carousel-inner .carousel-item-end, .block5 .carousel-inner .carousel-item-start { transform: translateX(0); } .block5 div.title-line:after { content: " "; display: block; background-image: url('../img/title-line.svg'); background-repeat: no-repeat; width: 100%; height: 5px; margin-left: 1em; } .block5 div.title-line { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; white-space: nowrap; color: #17ead9; font-size: 12px; font-family: Poppins; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1em; } .block5 .label-block { margin: 1em 0; } .block5 .label-block h2 { font-family: Poppins; font-size: 32px; line-height: 38px; font-weight: 900; color: #23292F; } .block5 .button-group { margin: 1em; text-align: end; } .block5 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block6 .carousel-item .card { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 0; border: 0; height: 320px; position: relative; overflow: hidden; margin-right: 1em; } .block6 .carousel-item .card .score { height: 70%; opacity: 1; transition: 500ms; transition-delay: 300ms; } .block6 .carousel-item .card:hover .score { opacity: 0; transition: 250ms; } .block6 .carousel-item .card .descr { position: absolute; left: 0; right: 0; top: 70%; height: 100%; background-color: rgba(35,41,47,.75); transition: top 200ms; bgi; } .block6 .carousel-item .card:hover .descr { top: 0; } .block6 .carousel-item .card .descr>div:first-child { height: 30%; padding: 15px; font-size: 17px; line-height: 19px; font-weight: 900; text-transform: uppercase; color: #FFF; } .block6 .carousel-item .card .descr .title { background-image: url('../img/line.svg'); background-repeat: no-repeat; background-position: bottom 25% left 15px; } .block6 .carousel-item .card .descr .text { padding: 0 15px; color: #FFF; font-size: 14px; line-height: 16px; } .block6 .carousel-item .card .descr { background-repeat: no-repeat; background-image: url('../img/arr.blue.svg'); background-position: bottom 15px right 15px; } @media (min-width: 1200px) and (max-width: 1399.98px) { .block6 .carousel-item .card { height: 280px; } .block6 .carousel-item .card .descr>div:first-child { font-size: 14px; line-height: 19px; } .block6 .carousel-item .card .descr .text { font-size: 12px; line-height: 14px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .block6 .carousel-item .card { height: 280px; } .block6 .carousel-item .card .descr>div:first-child { font-size: 14px; line-height: 19px; } } @media (min-width: 768px) and (max-width: 991.98px) { .block6 .carousel-item .card { height: 420px; } .block6 .carousel-item .card .descr>div:first-child { font-size: 22px; line-height: 26px; } .block6 .carousel-item .card .descr .text { font-size: 18px; line-height: 22px; } } @media (max-width: 575.98px) { .block6 .carousel-item .card { height: 100vw; } .block6 .carousel-item .card .descr>div:first-child { font-size: 4vw; line-height: 4.5vw; } .block6 .carousel-item .card .descr .text { font-size: 3.5vw; line-height: 4vw; } } .block6 .carousel-item >.container { } .block6 div.title-line:after { content: " "; display: block; background-image: url(/img/title-line.svg); background-repeat: no-repeat; width: 100%; height: 5px; margin-left: 1em; } .block6 div.title-line { display: flex; flex-direction: row; font-weight: nowrap; align-items: center; white-space: nowrap; color: #17ead9; font-size: 12px; font-family: Poppins; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1em; } .block6 .label-block { margin: 1em 0; } .block6 h2 { font-family: Poppins; font-size: 32px; line-height: 38px; font-weight: 900; color: #23292F; } .block6 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block6 h2 { font-size: 24px; letter-spacing: 1px; } } .block6 .button-group { margin: 1em; text-align: end; } .block6 .block6 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block6 ul.color-bullets { list-style-image: url('../img/bullet_point.svg'); } .block6 .xx-bg { background-image: url('../img/xx-bg.svg'); background-position: 100% center; background-repeat: no-repeat; padding-right: 8em; } .block6 #projectCarousel .titel-img { height: 120px; background-size: cover; color: white; text-align: center; display: flex; align-items: center; justify-content: center; padding: 1em; text-transform: uppercase; font-weight: bold; } .block6 #projectCarousel .card-body { text-align: center; } .block6 #projectCarousel .carousel-item .card { height: 380px; background-color: #f0f0f0; } .block6 .explanation { padding-right: 5vw; } @media (max-width: 767px) { .block6 .carousel-inner .carousel-item > div { display: none; } .block6 .carousel-inner .carousel-item > div:first-child { display: block; } } .block6 .carousel-inner .carousel-item.active, .block6 .carousel-inner .carousel-item-next, .block6 .carousel-inner .carousel-item-prev { display: flex; } @media (min-width: 768px) { .block6 .carousel-inner .carousel-item-end.active, .block6 .carousel-inner .carousel-item-next { transform: translateX(25%); } .block6 .carousel-inner .carousel-item-start.active, .block6 .carousel-inner .carousel-item-prev { transform: translateX(-25%); } } .block6 .carousel-inner .carousel-item-end, .block6 .carousel-inner .carousel-item-start { transform: translateX(0); } .block6 div.title-line:after { content: " "; display: block; background-image: url('../img/title-line.svg'); background-repeat: no-repeat; width: 100%; height: 5px; margin-left: 1em; } .block6 div.title-line { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; white-space: nowrap; color: #17ead9; font-size: 12px; font-family: Poppins; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1em; } .block6 .label-block { margin: 1em 0; } .block6 .label-block h2 { font-family: Poppins; font-size: 32px; line-height: 38px; font-weight: 900; color: #23292F; } .block6 .button-group { margin: 1em; text-align: end; } .block6 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block7 { padding-top: 75px; margin-bottom: -75px; } .block7 .person-back { background-repeat: no-repeat; background-size: contain; background-position: right bottom; } @media (min-width: 1200px) and (max-width: 1399.98px) { .block7 .person-back { background-size: 50%; } } @media (min-width: 992px) and (max-width: 1199.98px) { .block7 .person-back { background-size: 45%; } } @media (max-width: 991.98px) { .block7 .person-back { background-size: 0; } } .block7 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; } @media (max-width: 767.98px) { .block7 h2 { font-size: 24px; letter-spacing: 1px; } } .block7 h2>span { color: #19c1c9; } .block7 h5 { font-family: Poppins; font-size: 20px; font-weight: bold; margin-bottom: 0; } .block7 p>span { color: #19c1c9; } .block7 .nav-item { box-shadow: inset 0 -3px 0 0 #DBDBDB; } .block7 .nav button { font-size: 14px; padding: 0; color: #A2A2A2; } .block7 .nav button.active { font-size: 14px; border-radius: 0; padding: 0; color: #1D71A8; padding-bottom: 10px; background-color: transparent; position: relative; } .block7 .nav button.active:after { display: block; position: absolute; left: 0; bottom: 0; right: 0; height: 3px; content: ""; background: #17ead9; background: -moz-linear-gradient(left, #17ead9 0%, #1d71a8 100%); background: -webkit-linear-gradient(left, #17ead9 0%,#1d71a8 100%); background: linear-gradient(to right, #17ead9 0%,#1d71a8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17ead9', endColorstr='#1d71a8',GradientType=1 ); } .block7 .nav .nav-item:not(:last-child) { padding-right: 75px; } .block7 .email a, .block7 .phone a { height: 32px; display: inline-block; background-repeat: no-repeat; padding-left: 50px; line-height: 30px; color: #19c1c9; text-decoration: none; } .block7 .phone a:hover { text-decoration: underline; } .block7 .email a { background-image: url('../img/icon.email.svg'); background-position: 0 -5px; } .block7 .phone a { background-image: url('../img/icon.phone.svg'); background-position: 7px 0; } .block7 .socials { list-style-type: none; padding-left: 50px; display: flex; } .block7 .socials li:not(:last-child) { padding-right: 10px; } .block7 .socials img { width: 32px; height: 32px; } @media (max-width: 575.98px) { .block7 .nav-pills { display: none; } .block7 .tab-content { margin-left: 10vw; margin-right: 10vw; } .block7 .tab-content .tab-pane { margin-top: 30px; display: block; opacity: 1; } } .block8 { padding-top: 75px; padding-bottom: 75px; } main>.block8:first-of-type { } .block8 .video { position: relative; } .block8 .video .cover { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden; } .block8 .video .cover>.row { } .block8 .video .cover img { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; object-fit: cover; max-width: 100%; height: 100%; } .block8 .video .cover .play { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-image: url('../img/icon.play.svg'); background-repeat: no-repeat; background-position: center; background-size: 60px; transition: background-size 200ms; cursor: pointer; } .block8 .video .play:hover { background-size: 80px; } .block8 .video video { position: relative; } .block8 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; color: #FFF; text-transform: uppercase; } .block8 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block8 h2 { font-size: 24px; letter-spacing: 1px; } } .block8 h3 { font-family: Poppins; font-size: 20px; font-weight: 900; color: #FFF; text-transform: uppercase; } .block8 p { font-family: Poppins; font-size: 14px; line-height: 28px; color: #FFF; } .block8 p>span { color: #19c1c9; } .block9 { padding-top: 75px; padding-bottom: 75px; } .block9 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; text-transform: uppercase; } .block9 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block9 h2 { font-size: 24px; letter-spacing: 1px; } } .block9 p { font-family: Poppins; font-size: 14px; line-height: 28px; } .block9 p span { color: #19c1c9; } .block10 { padding-top: 75px; padding-bottom: 75px; } .block10 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; color: #FFF; text-transform: uppercase; } @media (max-width: 767.98px) { .block10 h2 { font-size: 24px; letter-spacing: 1px; } } .block10 p { font-family: Poppins; font-size: 14px; line-height: 28px; color: #FFF; } .block10 .box { background-color: #FAFAFA; } .block10 .box h3 { font-family: Poppins; font-size: 24px; font-weight: 700; color: #19c1c9; text-transform: uppercase; } .block10 .box p { color: #23292F; } .block10 .row>div:last-child>.box:last-child { margin-bottom: 0 !important; } @media (min-width: 1200px) { .block10 .row>div>.box:last-child { margin-bottom: 0 !important; } } .block11 { padding-top: 75px; padding-bottom: 75px; } .block11 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; text-transform: uppercase; } .block11 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block11 h2 { font-size: 24px; letter-spacing: 1px; } } .block10 p { font-family: Poppins; font-size: 14px; line-height: 28px; color: #FFF; } .block10 .box { background-color: #FAFAFA; } .block10 .box h3 { font-family: Poppins; font-size: 24px; font-weight: 700; color: #19c1c9; text-transform: uppercase; } .block10 .box p { color: #23292F; } .block10 .row>div:last-child>.box:last-child { margin-bottom: 0 !important; } @media (min-width: 1200px) { .block10 .row>div>.box:last-child { margin-bottom: 0 !important; } } .block12 { padding-top: 75px; padding-bottom: 75px; } .block12 .img1 { height: 70vw; } .block12 .img2 { height: 40vw; } @media (max-width: 767.98px) { .block12 .img2 { height: 50vw; } } @media (min-width: 768px) and (max-width: 1199.98px) { .block12 .img1, .block12 .img2 { height: 35vw; } } @media (min-width: 1200px) { .block12 .img1, .block12 .img2 { height: 30vw; } } .block13 { padding-top: 75px; padding-bottom: 75px; } .block13 h2 { font-size: 72px; font-size: 56px; font-weight: 700; letter-spacing: 1px; text-align: center; color: #FFF; margin: 0; } @media (min-width: 768px) and (max-width: 991.98px) { .block13 h2 { font-size: 52px; } } @media (min-width: 576px) and (max-width: 767.98px) { .block13 h2 { font-size: 36px; } } @media (max-width: 575.98px) { .block13 h2 { font-size: 26px; } } .block13 h2 span { } .block14 { padding-top: 75px; padding-bottom: 75px; } .block14 h2 { font-size: 32px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; } @media (min-width: 768px) and (max-width: 991.98px) { .block14 h2 { font-size: 28px; } } @media (min-width: 576px) and (max-width: 767.98px) { .block14 h2 { font-size: 24px; } } @media (max-width: 575.98px) { .block14 h2 { font-size: 22px; } } .block14 h2 span { color: #19c1c9; } .block15 { padding-top: 75px; padding-bottom: 75px; } .block15 .nav.nav-tabs { border: 0; } .block15 button { display: block !important; } .block15 button h2 { font-size: 24px; font-weight: bold; color: #A8A8A8; } .block15 .nav-link { background-image: url('../img/tabline.dot.svg'); background-repeat: no-repeat; background-position: center bottom 2px; } .block15 .nav-link.active { background-image: url('../img/tabline.dot.active.svg'); } @media (min-width: 992px) and (max-width: 1399.98px) { .block15 .nav-link { background-position: center bottom 10px; } } .block15 .nav-link, .block15 .nav-link.active, .block15 .nav-link:focus, .block15 .nav-link:active { background-color: transparent; border: 0 !important; } .block15 button.active h2 { color: #19c1c9; } .block15 button h3 { font-size: 14px; font-weight: bold; color: #A8A8A8; } .block15 button.active h3 { color: #23292F; } .block15 .tab-content { position: relative; } .block15 .tab-content .tabline { position: absolute; height: 5px; width: 100%; margin-top: -40px; z-index: -1; } @media (min-width: 992px) and (max-width: 1399.98px) { .block15 .tab-content .tabline { margin-top: -40px; } } @media (max-width: 991.98px) { .block15 .tab-content .tabline { display: none; } } .block15 .tab-content h2, .block15 .tab-content h3 { display: none; } @media (min-width: 992px) and (max-width: 1399.98px) { .block15 button h3 { display: none; } .block15 .tab-content h3 { display: block; } } @media (max-width: 991.98px) { .block15 .nav.nav-tabs { display: none; } .block15 .tab-content h2, .block15 .tab-content h3 { display: block; } .block15 .tab-content .tab-pane { display: block; opacity: 1; margin-bottom: 70px; } } .block15 .tab-content h2 { font-size: 24px; font-weight: bold; } .block15 .tab-content h3 { font-size: 16px; font-weight: bold; color: #19c1c9; } .block16 { padding-top: 75px; padding-bottom: 75px; background-color: #FAFAFA; } .block16 .datasheet>.row>div { display: flex; margin-bottom: 15px; } .block16 .datasheet>.row>div>div:first-child { color: #19c1c9; font-weight: bold; min-width: 130px; font-size: 14px; } .block16 .datasheet>.row>div>div:last-child { padding-right: 30px; } @media (max-width: 767.98px) { .block16 .datasheet>.row>div { flex-direction: column; } } .block17 { padding-top: 75px; padding-bottom: 75px; } .block17 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; text-transform: uppercase; } @media (max-width: 767.98px) { .block17 h2 { font-size: 24px; letter-spacing: 1px; } } .block17 h2:not(:first-of-type) { margin-top: 50px; } .block17 ul { list-style-image: url('../img/bullet_point.svg'); } .block18 { padding-top: 75px; padding-bottom: 75px; background-color: #23292F; } .block18 .row>div { display: flex; flex-direction: column; } @media (min-width: 1400px) { .block18 .row>div { flex-direction: row; } } .block18 .row>div>div:first-child { font-family: Poppins; font-size: 144px; font-size: 100px; font-weight: 900; color: #19c1c9; } .block18 .row>div>div:not(:first-child) { text-transform: uppercase; color: #FAFAFA; font-size: 24px; font-weight: bold; } .block18 .row>div>div:not(:first-child)>span { color: #19c1c9; } .block19 { padding-top: 75px; padding-bottom: 75px; } .block19 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; } .block19 h2>span { color: #19c1c9; } @media (max-width: 767.98px) { .block19 h2 { font-size: 24px; letter-spacing: 1px; } } .block19 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block19 p>span { color: #19c1c9; } @keyframes block20_background { 0%,50% { background-size: auto 10vw, auto 15vw, auto 25vw, auto 10vw; background-position: top 13vw left 23vw, top 16vw left 27vw, top 36vw left 57vw, top 44vw left 57vw; } 100% { background-size: auto 15vw, auto 12vw, auto 12vw, auto 25vw; background-position: top 13vw left 24vw, top 19vw left 24vw, top 46vw left 63vw, top 35vw left 50vw; } } .block20 { padding-top: 75px; padding-bottom: 75px; background-image: url(../img/bg.x.grau.svg), url(../img/bg.x.blau.svg), url(../img/bg.x.grau.svg), url(../img/bg.x.blau.svg); background-repeat: no-repeat; } body:not(.ismobile) .block20 { animation: block20_background 10s ease-in-out infinite alternate; } .block20 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; } .block20 h2>span { color: #17EAD9; color: #19c1c9; } @media (max-width: 767.98px) { .block20 h2 { font-size: 24px; letter-spacing: 1px; } } .block20 p { font-size: 14px; line-height: 28px; font-weight: 500; } .block20 p>span { color: #17EAD9; color: #19c1c9; } .block20 h3 { font-family: Poppins; font-size: 16px; font-weight: 900; margin: 0; } .block20 h4 { font-family: Poppins; font-size: 16px; margin: 0; } .block20 .employe { position: relative; padding-bottom: 70px; } .block20 .employe .img { background-size: contain; background-repeat: no-repeat; background-position: bottom center; height: 20vw; display: block; } @media (min-width: 768px) and (max-width: 1199.98px) { .block20 .employe .img { height: 30vw; } } @media (min-width: 576px) and (max-width: 767.98px) { .block20 .employe .img { height: 50vw; } } @media (max-width: 575.98px) { .block20 .employe .img { height: 80vw; } } .block20 .employe .info { display: flex; flex-direction: column; position: relative; transition: margin-top 200ms; position: absolute; left: 0; right: 0; } .block20 .employe.active .info, body:not(.ismobile) .block20 .employe:hover .info { background-color: #FFF; box-shadow: 0 10px 10px rgba(0,0,0,.25); z-index: 1; margin-top: -100px; } @media (max-width: 575.98px) { .block20 .employe.active .info, body:not(.ismobile) .block20 .employe:hover .info { margin-left: 20px; margin-right: 20px; } } .block20 .employe .name { padding: 15px 20px 20px 20px; text-align: center; } .block20 .employe .info .full { display: none; max-height: 30vh; overflow: auto; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } .block20 .employe.active .info .name, body:not(.ismobile) .block20 .employe:hover .info .name { text-align: left; padding-top: 20px; } .block20 .employe.active .info .full, body:not(.ismobile) .block20 .employe:hover .info .full { display: block !important; } .block20 .employe.active .info .full p, body:not(.ismobile) .block20 .employe:hover .info .full p { line-height: inherit; } .block20 .employe.active .info .full .socials, body:not(.ismobile) .block20 .employe:hover .info .full .socials { list-style-type: none; padding-left: 0; margin: 5px 0 20px 0 !important; display: flex; } .block20 .employe.active .info .full .socials li:not(:last-child), body:not(.ismobile) .block20 .employe:hover .info .full .socials li:not(:last-child) { padding-right: 10px; } .block20 .employe.active .info .full .socials img, body:not(.ismobile) .block20 .employe:hover .info .full .socials img { width: 32px; height: 32px; } .block21 { padding-top: 75px; padding-bottom: 75px; } .block21 h2 { font-family: Poppins; font-size: 32px; font-weight: 900; } @media (max-width: 767.98px) { .block21 h2 { font-size: 24px; letter-spacing: 1px; } } .block21 h3 { font-family: Poppins; font-size: 24px; font-weight: 700; } .block21 h4 { font-family: Poppins; font-size: 20px; font-weight: 700; margin: 0; } .block21 p, .block21 li { font-size: 14px; line-height: 28px; font-weight: 500; } .block21 a { color: #19c1c9; } .block22 { padding-top: 75px; padding-bottom: 75px; } .block22 h2 { font-family: Poppins; font-size: 72px; font-weight: 900; color: #19c1c9; } @media (max-width: 767.98px) { .block22 h2 { } } .block22 h3 { font-family: Poppins; font-size: 24px; font-weight: 600; color: #19c1c9; } .alphabet { background-color: #19C1C9; display: flex; flex-direction: column; align-items: center; } @media (max-width: 767.98px) { .alphabet { } } .alphabet>a { color: #FFF; font-family: Poppins; font-size: 32px; font-weight: 900; text-decoration: none; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; margin: 0px; } .alphabet>a:hover { background-color: #FFF; color: #19C1C9; } footer { background-color: #23292F; } footer .logo { height: 60px; } footer .logo img { width: 198px; } @media (min-width: 992px) and (max-width: 1199.98px) { footer .logo img { width: 114px; } } @media (max-width: 575.98px) { footer .logo img { width: 140px; } } footer .times { margin-top: 30px; font: bold 12px Poppins; color: #17EAD9; text-transform: uppercase; letter-spacing: 2px; } footer .phone { font-weight: 900; font-size: 32px; color: #FFF; white-space: nowrap; text-decoration: none; } footer .phone:hover { color: #17EAD9; } @media (min-width: 992px) and (max-width: 1199.98px) { footer .phone { font-size: 22px; } } footer p { font-size: 14px; color: #FFF; } footer p.small { color: #A2A2A2; } footer ul { list-style-type: none; margin: 0; padding-left: 0; padding-right: 25px; } footer ul li { min-height: 40px; } @media (max-width: 575.98px) { footer ul { margin-top: 50px; } footer ul li { display: inline-block; min-height: 30px; } footer ul li:not(:last-child) { margin-right: 20px; } } footer ul li a { font: normal 14px Poppins; text-decoration: none; color: #A2A2A2; } footer ul li a:hover { color: #2FEAD9; } @media (max-width: 575.98px) { .container-fluid>.container { padding-left: 0; padding-right: 0; } } @media (max-width: 991.98px) { main { margin-top: 50px; margin-bottom: 50px; } .block1, .block2, .block3, .block4, .block5, .block6, .block7, .block8, .block9, .block10, .block11, .block12, .block13, .block14, .block15, .block16, .block17, .block18, .block19, .block20, .block21 { padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 767.98px) { main>section { position: relative; } main>section:not(:first-child):after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 200px; z-index: -1; background: -moz-linear-gradient(top, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.02) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.02) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05000000', endColorstr='#00000000',GradientType=0 ); } } main>section:nth-child(2n) { } main>section:nth-child(2n+1) { } @keyframes no_api_yet { 0%,20% { opacity: 1; } 30% { opacity: 0; } 31% { opacity: 1; } 32% { opacity: 0; } 33% { opacity: 1; } 34% { opacity: 0; } 40%,100% { opacity: 1; } } .no-api-yet { animation: no_api_yet 5s ease-in-out infinite; } a[type=submit], input[type=submit], button[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } @keyframes matching_words_pulse { 0%,100% { background-color: rgba(255,255,0,0.3); box-shadow: 3px 0 0 0px rgba(255,255,0,0.3), -3px 0 0 0px rgba(255,255,0,0.3); } 50% { background-color: rgba(255,255,0,0.7); box-shadow: 3px 0 0 0px rgba(255,255,0,0.7), -3px 0 0 0px rgba(255,255,0,0.7); } } .highlight { animation: matching_words_pulse 3s infinite; } a[href='javascript:']:not([onclick]):not([data-toggle]):not(.dropdown-toggle) { cursor: not-allowed; } #gridoverlay { position: fixed; z-index: 999999; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; } #gridoverlay .col { height: 100vh; position: relative; } #gridoverlay .col:nth-child(1n) { } #gridoverlay .col:nth-child(2n) { } #gridoverlay .col:before, #gridoverlay .col:after { position: absolute; left: 0; top: 0; bottom: 0; content: ""; display: block; width: 1px; background-color: #FFF; } #gridoverlay .col:after { left: auto; right: 0; } #gridoverlay .col:first-child:before { left: -1px; width: 2px; } #gridoverlay .col:last-child:after { left: auto; width: 2px; right: -1px; } #gridoverlay .col:before, #gridoverlay .col:after { background: linear-gradient(to bottom, transparent, rgba(255,255,255,.5) 20%, rgba(0,0,0,.5) 30%, transparent 40%); animation: go 3s linear infinite; } @keyframes go { 0% { background-position: 0; } 100% { background-position: 0 100vh; } } #responsiveinfo { display: block; position: fixed; left: 10px; bottom: 10px; margin-right: 10px; padding: 5px 10px; color: #000; font-size: 11px; font-weight: bold; font-family: 'Segoe UI'; text-shadow: 0 0 2px #FFF; letter-spacing: .25px; z-index: 999999; } @media (max-width: 319.98px) { body { overflow: hidden; } #responsiveinfo { background: rgba(127,127,127,1); } #responsiveinfo:before { content: "0-319px (xxs)"; } #responsiveinfo::after { display: flex; justify-content: center; align-items: center; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: rgba(191,0,0,.85); color: #FFF; font-size: 20vw; font-family: Arial; text-shadow: 0 0 5px #000; letter-spacing: -2.5px; content: "Narrooow!"; z-index: -100; } } @media (min-width: 320px) and (max-width: 575.98px) { #responsiveinfo { background: rgba(226,0,122,.75); } #responsiveinfo:before { content: "320-575px (xs)"; } } @media (min-width: 576px) and (max-width: 767.98px) { #responsiveinfo { background: rgba(192,192,0,.75); } #responsiveinfo:before { content: "576-767px (sm)"; } } @media (min-width: 768px) and (max-width: 991.98px) { #responsiveinfo { background: rgba(0,255,0,.75); } #responsiveinfo:before { content: "768-991px (md)"; } } @media (min-width: 992px) and (max-width: 1199.98px) { #responsiveinfo { background: rgba(255,102,0,.75); } #responsiveinfo:before { content: "992-1199px (lg)"; } } @media (min-width: 1200px) and (max-width: 1399.98px) { #responsiveinfo { background: rgba(0,158,224,.75); } #responsiveinfo:before { content: "1200px (xl)"; } } @media (min-width: 1400px) { #responsiveinfo { background: rgba(154, 51, 223, 0.75); } #responsiveinfo:before { content: "1400px (xxl)"; } }