/* @import url(https://fonts.googleapis.com/css?family=Raleway); @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap'); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap'); */ /*@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');*/ /* barlow-condensed-200 - latin */ /* barlow-200 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 200; src: url('/Essentials/font/barlow-v12-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 400; src: url('/Essentials/font/barlow-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 600; src: url('/Essentials/font/barlow-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 800; src: url('/Essentials/font/barlow-v12-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 200; src: url('/Essentials/font/barlow-condensed-v12-latin-200.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-200.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-200.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-200italic - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 200; src: url('/Essentials/font/barlow-condensed-v12-latin-200italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-200italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-200italic.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-300 - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; src: url('/Essentials/font/barlow-condensed-v12-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-300.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-300.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-300italic - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 300; src: url('/Essentials/font/barlow-condensed-v12-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-300italic.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-regular - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; src: url('/Essentials/font/barlow-condensed-v12-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-regular.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-500 - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; src: url('/Essentials/font/barlow-condensed-v12-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-500.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-500.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-italic - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 400; src: url('/Essentials/font/barlow-condensed-v12-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-italic.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-500italic - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 500; src: url('/Essentials/font/barlow-condensed-v12-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-500italic.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-600 - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; src: url('/Essentials/font/barlow-condensed-v12-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-600.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-600.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-600italic - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 600; src: url('/Essentials/font/barlow-condensed-v12-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-600italic.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-700 - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; src: url('/Essentials/font/barlow-condensed-v12-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-700.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-700.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-700italic - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; src: url('/Essentials/font/barlow-condensed-v12-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/barlow-condensed-v12-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/barlow-condensed-v12-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/barlow-condensed-v12-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/barlow-condensed-v12-latin-700italic.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* eb-garamond-regular - latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url('/Essentials/font/eb-garamond-v26-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-regular.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /* eb-garamond-600 - latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; src: url('/Essentials/font/eb-garamond-v26-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-600.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-600.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /* eb-garamond-700 - latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 700; src: url('/Essentials/font/eb-garamond-v26-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-700.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-700.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /* eb-garamond-800 - latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 800; src: url('/Essentials/font/eb-garamond-v26-latin-800.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-800.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-800.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /* eb-garamond-italic - latin */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url('/Essentials/font/eb-garamond-v26-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-italic.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /* eb-garamond-500italic - latin */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 500; src: url('/Essentials/font/eb-garamond-v26-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-500italic.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /* eb-garamond-600italic - latin */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 600; src: url('/Essentials/font/eb-garamond-v26-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-600italic.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /* eb-garamond-700italic - latin */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 700; src: url('/Essentials/font/eb-garamond-v26-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/eb-garamond-v26-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/eb-garamond-v26-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/eb-garamond-v26-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/eb-garamond-v26-latin-700italic.svg#EBGaramond') format('svg'); /* Legacy iOS */ } /*Breathing*/ @font-face { font-family: 'Breathing'; font-style: normal; font-weight: 400; src: url('/Essentials/font/Breathing.woff2'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/Breathing.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/Breathing.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/Breathing.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/Breathing.otf') format('otf'); } /*Breathing*/ @font-face { font-family: 'Breathing_Swash'; font-style: normal; font-weight: 400; src: url('/Essentials/font/Breathing_Swash.woff2'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/Breathing_Swash.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/Breathing_Swash.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/Breathing_Swash.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/Breathing_Swash.otf') format('otf'); } /* prata-regular - latin */ @font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; src: url('/Essentials/font/prata-v18-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/prata-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/prata-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/prata-v18-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/prata-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/prata-v18-latin-regular.svg#Prata') format('svg'); /* Legacy iOS */ } /* noto-sans-200italic - latin */ @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 200; src: url('/Essentials/font/noto-sans-v27-latin-200italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-200italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-200italic.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-300 - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 300; src: url('/Essentials/font/noto-sans-v27-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-300.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-300.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-300italic - latin */ @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 300; src: url('/Essentials/font/noto-sans-v27-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-300italic.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-regular - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: url('/Essentials/font/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-italic - latin */ @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 400; src: url('/Essentials/font/noto-sans-v27-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-italic.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-500 - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 500; src: url('/Essentials/font/noto-sans-v27-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-500.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-500.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-500italic - latin */ @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 500; src: url('/Essentials/font/noto-sans-v27-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-500italic.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-600 - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; src: url('/Essentials/font/noto-sans-v27-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-600.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-600.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-600italic - latin */ @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 600; src: url('/Essentials/font/noto-sans-v27-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/noto-sans-v27-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/noto-sans-v27-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/noto-sans-v27-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/noto-sans-v27-latin-600italic.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* comforter-brush-regular - latin */ @font-face { font-family: 'Comforter Brush'; font-style: normal; font-weight: 400; src: url('/Essentials/font/comforter-brush-v5-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/comforter-brush-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/comforter-brush-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/comforter-brush-v5-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/comforter-brush-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/comforter-brush-v5-latin-regular.svg#ComforterBrush') format('svg'); /* Legacy iOS */ } /* ubuntu-300 - latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* ubuntu-300italic - latin */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 300; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-300italic.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* ubuntu-regular - latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* ubuntu-italic - latin */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 400; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-italic.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* ubuntu-500 - latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* ubuntu-500italic - latin */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 500; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-500italic.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* ubuntu-700 - latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* ubuntu-700italic - latin */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 700; src: url('/Essentials/font/ubuntu/ubuntu-v20-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/Essentials/font/ubuntu/ubuntu-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/Essentials/font/ubuntu/ubuntu-v20-latin-700italic.svg#Ubuntu') format('svg'); /* Legacy iOS */ } /* @font-face { font-family: 'Aero Matics Regular'; font-style: normal; font-weight: normal; src: url('/Essentials/font/Aero_Matics/Aero_Matics_Regular.woff') format('woff'); } @font-face { font-family: 'Aero Matics Italic'; font-style: normal; font-weight: normal; src: url('/Essentials/font/Aero_Matics/Aero_Matics_Italic.woff') format('woff'); } @font-face { font-family: 'Aero_Matics_Bold'; font-style: normal; font-weight: normal; src: url('/Essentials/font/Aero_Matics/Aero_Matics_Bold.woff') format('woff'); } @font-face { font-family: 'Aero Matics Bold Italic'; font-style: normal; font-weight: normal; src: url('/Essentials/font/Aero_Matics/Aero_Matics_Bold_Italic.woff') format('woff'); } @font-face { font-family: 'Klavika-Bold'; src: url('/Essentials/font/Klavika/Klavika-Bold.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-Bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavika-BoldItalic'; src: url('/Essentials/font/Klavika/Klavika-Boldtalic.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-Boldtalic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavika-Light'; src: url('/Essentials/font/Klavika/Klavika-Light.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-Light.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavika-LightItalic'; src: url('/Essentials/font/Klavika/Klavika-LightItalic.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-LightItalic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavika-Medium'; src: url('/Essentials/font/Klavika/Klavika-Medium.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-Medium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavika-MediumItalic'; src: url('/Essentials/font/Klavika/Klavika-MediumItalic.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-MediumItalic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavika-Regular'; src: url('/Essentials/font/Klavika/Klavika-Regular.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavika-RegularItalic'; src: url('/Essentials/font/Klavika/Klavika-RegularItalic.woff2') format('woff2'), url('/Essentials/font/Klavika/Klavika-RegularItalic.woff') format('woff'); font-weight: normal; font-style: normal; } */ /* Preload */ #page{ } #overlay{ display: none; position:fixed; z-index:99999; top:0; left:0; bottom:0; right:0; background:rgba(255,255,255,.95); } #progress{ display: none; height:1px; background:#fff; position:absolute; width:0; top:50%; } #progstat{ display: none; font-size:0.7em; letter-spacing: 3px; position:absolute; top:50%; margin-top:-40px; width:100%; text-align:center; color:#fff; } #scrollArrow{ /*display: none;*/ } .arrowTop{ position: fixed; bottom: 3vh; right: 1vw; /*1vw;*/ padding-right:0vw; transition: 0.25s ease-in; width: 5vh; height: 5vh; background-color:var(--hovercolor); border-radius: 50%; opacity:0; z-index: 1000; } .arrowTop.open{ opacity:1; } .arrowTop .arrow-wrapper{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; cursor: pointer; transition: 0.25s ease-in; } .arrowTop .arrow-wrapper:hover i{ color: var(--maincolor); } .arrowTop .arrow-wrapper i{ color:var(--menutextcolor); font-size:150%; transition: 0.25s ease-in; } /*DSGVO*/ /*----------------------------toggle Switch----------------------*/ .dsgvo-wrapper .switch-wrapper{ width:5vw; height:2.5vw; } .dsgvo-wrapper .switch { position: relative; display: inline-block; width: 2rem; height: calc(1rem + 2px); margin:2.5px 0; } .dsgvo-wrapper .switch input { opacity: 0; width: 0; height: 0; } .dsgvo-wrapper .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .dsgvo-content{ display: flex; flex-direction:row; width:70%; left:15%; position:relative; justify-content: space-evenly; } .dsgvo-wrapper .slider:before { position: absolute; content: ""; height: calc(1rem - 2px); width: calc(1rem - 2px); left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; } .dsgvo-wrapper input:checked + .slider { background-color: var(--linkcolor); } .dsgvo-wrapper input:focus + .slider { box-shadow: 0 0 1px var(--linkcolor); } .dsgvo-wrapper input:checked + .slider:before { -webkit-transform: translateX(calc(1rem - 2px)); -ms-transform: translateX(calc(1rem - 2px)); transform: translateX(calc(1rem - 2px)); } /* Rounded sliders */ .dsgvo-wrapper .slider.round { border-radius: calc(1rem + 2px); } .dsgvo-wrapper .slider.round:before { border-radius: 50%; } .dsgvo-wrapper h3{ font-size: 1.5em; line-height: 188%; } /*-------------------------------*/ .dsgvo-wrapper .dsgvo-option{ width: auto; left:40%; position: relative; display: flex; flex-direction: row; justify-content: space-between; } .dsgvo-wrapper .dsgvo-content .dsgvo-option{ left: initial; justify-content:right; } .dsgvo-wrapper .dsgvo-consent{ margin:1% 0%; width:35%; left:30%; } .dsgvo-wrapper .dsgvo-option .caption{ margin: 0 2%; display: flex; flex-direction: column; justify-content: center; } .dsgvo-wrapper .dsgvo-option .dsgvo-toggle{ } .dsgvo-wrapper .btn-wrapper{ border: 2px solid var(--linkcolor); transition: 0.25s ease-in; } .dsgvo-wrapper .btn-wrapper a{ color: var(--linkcolor); text-decoration: none; } .dsgvo-wrapper .btn-wrapper:hover{ background-color: var(--linkcolor); border: 2px solid rgb(80, 80, 80); } .dsgvo-wrapper .btn-wrapper:hover a{ color: white; } /* .dsgvo-wrapper .btn-wrapper a, .dsgvo-wrapper .btn-wrapper p.dsgvo-button::before, .dsgvo-wrapper .btn-wrapper p.dsgvo-button::after{ text-decoration: none; transition: 0.25s ease-in; } .dsgvo-wrapper .btn-wrapper:nth-child(1) a{ color: green; } .dsgvo-wrapper .btn-wrapper:nth-child(1) p.dsgvo-button::before{ border: 2px solid green; border-width: 2px 0 0 2px; } .dsgvo-wrapper .btn-wrapper:nth-child(1) p.dsgvo-button::after{ border: 2px solid green; border-width: 0 2px 2px 0; } .dsgvo-wrapper .btn-wrapper:nth-child(2) a{ color: grey; } .dsgvo-wrapper .btn-wrapper:nth-child(2) p.dsgvo-button::before{ border: 2px solid grey; border-width: 2px 0 0 2px; } .dsgvo-wrapper .btn-wrapper:nth-child(2) p.dsgvo-button::after{ border: 2px solid grey; border-width: 0 2px 2px 0; } .dsgvo-wrapper .btn-wrapper:nth-child(3) a{ color: red; } .dsgvo-wrapper .btn-wrapper:nth-child(3) p.dsgvo-button::before{ border: 2px solid red; border-width: 2px 0 0 2px; } .dsgvo-wrapper .btn-wrapper:nth-child(3) p.dsgvo-button::after{ border: 2px solid red; border-width: 0 2px 2px 0; } .dsgvo-wrapper .btn-wrapper a:hover{ color:rgb(48,48,48); } .dsgvo-wrapper .btn-wrapper a:hover p.dsgvo-button::before{ border: 2px solid rgb(48,48,48); border-width: 2px 0 0 2px; } .dsgvo-wrapper .btn-wrapper a:hover p.dsgvo-button::after{ border: 2px solid rgb(48,48,48); border-width: 0 2px 2px 0; } */ /*---------------------------------*/ .dsgvo-wrapper p{ margin: 0 2px; font: 400 16px/24px var(--fonttext), sans-serif; font-size: 16px; line-height: 24px; font-size: 100%; line-height: 110%; } .dsgvo-wrapper { font-size: 60%; position: fixed; bottom: 0%; left: 0%; width: 99.9%; height: auto; background: var(--bgcolorglobal); background: white; border: 1px solid var(--textcolor); z-index: 999999999999; color: var(--textcolor); display: none; box-shadow: 0px 0px 6px black; } .dsgvo-active{ display: initial; } .dsgvo-wrapper .dsgvo-grid{ display:grid; grid-template-columns: 10% 50% 40%; grid-auto-rows: auto; height: 50%; } .dsgvo-wrapper .dsgvo-grid .dsgvo-element{ width:100%; overflow:hidden; display:flex; align-items: center; justify-content: center; text-align:center; } .dsgvo-wrapper .dsgvo-headline{ color: var(--textcolor); text-align:center; width: 100%; max-height:40%; margin-bottom: 1%; } .dsgvo-wrapper .dsgvo-headline a{ color: var(--linkcolor); text-decoration: none; transition: 0.25s ease-in; } .dsgvo-wrapper .dsgvo-headline a:hover{ color: var(--hovercolor); } .dsgvo-wrapper .dsgvo-headline .h3{ color: rgb(0, 79, 158); } p.dsgvo-button{ padding: 5px; position: relative; text-align: center; } .dsgvo-element a{ transition: 0.25s ease-in; font-weight: bold; color:var(--linkcolor); text-decoration:none; } .dsgvo-element a:hover{ color:var(--hovercolor); } /* p.dsgvo-button::before, p.dsgvo-button::after { border: 2px solid rgb(0, 79, 158); width: 15px; height: 15px; content: ""; display: block; position: absolute; z-index: 10; transition: 0.25s ease-in; } p.dsgvo-button::after { right:0; border-width: 0 2px 2px 0; bottom:-5%; } p.dsgvo-button::before { left:0; border-width: 2px 0 0 2px; top:-5%; } */ .dsgvo-grid .dsgvo-element:nth-child(6) a, .dsgvo-grid .dsgvo-element:nth-child(4){ color: grey !important; } /* .dsgvo-grid .dsgvo-element:nth-child(6) p.dsgvo-button::before{ border: 2px solid grey; border-width: 2px 0 0 2px; } .dsgvo-grid .dsgvo-element:nth-child(6) p.dsgvo-button::after{ border: 2px solid grey; border-width: 0 2px 2px 0; } */ .dsgvo-grid .dsgvo-element:nth-child(3) a, .dsgvo-grid .dsgvo-element:nth-child(1){ color: green !important; } /* .dsgvo-grid .dsgvo-element:nth-child(3) p.dsgvo-button::before{ border: 2px solid green; border-width: 2px 0 0 2px; } .dsgvo-grid .dsgvo-element:nth-child(3) p.dsgvo-button::after{ border: 2px solid green; border-width: 0 2px 2px 0; } */ .dsgvo-grid .dsgvo-element:nth-child(9) a, .dsgvo-grid .dsgvo-element:nth-child(7){ color: red !important; } /* .dsgvo-grid .dsgvo-element:nth-child(9) p.dsgvo-button::before{ border: 2px solid red; border-width: 2px 0 0 2px; } .dsgvo-grid .dsgvo-element:nth-child(9) p.dsgvo-button::after{ border: 2px solid red; border-width: 0 2px 2px 0; } */ .dsgvo-grid .dsgvo-element:nth-child(3) a:hover, .dsgvo-grid .dsgvo-element:nth-child(6) a:hover, .dsgvo-grid .dsgvo-element:nth-child(9) a:hover{ color:rgb(48,48,48) !important; } /* .dsgvo-grid .dsgvo-element:nth-child(3) a:hover p.dsgvo-button::before, .dsgvo-grid .dsgvo-element:nth-child(6) a:hover p.dsgvo-button::before, .dsgvo-grid .dsgvo-element:nth-child(9) a:hover p.dsgvo-button::before{ border: 2px solid rgb(48,48,48); border-width: 2px 0 0 2px; } .dsgvo-grid .dsgvo-element:nth-child(3) a:hover p.dsgvo-button::after, .dsgvo-grid .dsgvo-element:nth-child(6) a:hover p.dsgvo-button::after, .dsgvo-grid .dsgvo-element:nth-child(9) a:hover p.dsgvo-button::after{ border: 2px solid rgb(48,48,48); border-width: 0 2px 2px 0; } */ @media (max-width: 768px){ .dsgvo-wrapper h3{ font-size: 3.5vw; } .dsgvo-content{ flex-direction: column; margin: 5% 0%; width: 90%; left: 5%; } .dsgvo-wrapper.dsgvo-active{ display:flex; } .dsgvo-wrapper{ flex-direction: column; left: 50%; width: 95%; top: 50%; height:75%; transform: translate(-50%, -50%); font-size: 90%; } .dsgvo-wrapper .dsgvo-grid { height:60; } .dsgvo-wrapper .dsgvo-option{ width: 90%; left:5%; } .dsgvo-wrapper .dsgvo-consent{ margin: 0; } .dsgvo-wrapper .dsgvo-headline{ margin: 0; } .dsgvo-wrapper .dsgvo-whitespace{ height: 10%; } } /*Gallery*/ .Gallery{ display: none; opacity: 0; position: fixed; width: 100%; height: 100%; transition: 0.25s ease-in; top: 0%; left: 0%; z-index: 99999; background: rgba(0,0,0,.90); cursor: pointer; } .Gallery .Gallery-wrapper{ width:100%; height: 100%; } .Gallery img{ object-fit: contain; object-position: center; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .Gallery .xMark{ position: absolute; right: 2vw; top: 1vw; color: white; font-size: 300%; z-index: 100; } .GalleryActive{ display: initial; } .GalleryVisible{ opacity:1; } .arrowTop{ right:2vw; } /*3dmenu*/ #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #menu-button { display: none; height: 100%; } #cssmenu { width: auto; font-family: Raleway, sans-serif; line-height: 1; } #cssmenu > ul { } #cssmenu > ul > li { float: left; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > a { padding: 16px 20px; font-size: 14px; color: #ffffff; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } #cssmenu > ul > li.active > a { color: #dff2fa; } @media (min-width: 500px) { #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #dff2fa; -webkit-transform: rotateX(90deg) translateY(-23px); -moz-transform: rotateX(90deg) translateY(-23px); transform: rotateX(90deg) translateY(-23px); -ms-transform: none; } } @media (min-width: 500px) { #cssmenu > ul > li > a::before { position: absolute; top: 100%; left: 0; z-index: -1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 16px 20px; color: #dff2fa; background: #19799f; content: attr(data-title); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -ms-transform: translateY(-18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before { } } #cssmenu.small-screen { width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul { width: 100%; text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center { float: none; display: block; /*border-top: 1px solid rgba(100, 100, 100, 0.1);*/ } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover { color: var(--hovercolor); -webkit-transform: none; -moz-transform: none; transform: none; -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before { display: none; } #cssmenu.small-screen #menu-button { display: block; padding: 16px 20px; cursor: pointer; font-size: 14px; text-decoration: none; color: var(--menutextcolor); text-transform: uppercase; letter-spacing: 1px; } #cssmenu.small-screen #menu-button:after { content: ""; position: absolute; right: 20px; top: 17px; top: calc(17px + 18%); /*top:43%;*/ display: block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-top: 2px solid var(--menutextcolor); border-bottom: 2px solid var(--menutextcolor); width: 22px; height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after { border-top: 2px solid rgba(0, 79, 158, 0.8); border-bottom: 2px solid rgba(0, 79, 158, 0.8); } #cssmenu.small-screen #menu-button:before { content: ""; position: absolute; right: 20px; top: 27px; top: calc(27px + 18%); /*top:58%;*/ display: block; width: 22px; height: 2px; background: var(--menutextcolor); } #cssmenu.small-screen #menu-button.menu-opened::before { background:rgba(0, 79, 158, 0.8); } #mainMenu.menu.scrolled #menu-button::before { top: 27px; } #mainMenu.menu.scrolled #menu-button::after { top: 17px; } #mainMenu.menu.scrolled #menu-button.menu-opened::before, #mainMenu.menu.scrolled #menu-button.menu-opened::after { top: 21px; } .contactNav a.link { } /*user Management*/ .menuWrapper .userManagement{ width: 10%; } .userManagement{ height: 100%; flex-grow: 1; z-index: 1000; display: none; } .userManagement a.white { color: var(--menutextcolor); } .userManagement a { position: relative; height: 100%; width: 100%; display: inline-block; } .userManagement a { font-size: 110%; padding: 0; color: #212121; text-decoration: none; cursor: pointer; text-align: center; transition: all 0.32s ease; } .userManagement a.link i { transform: translate(-50%, -50%); transition: all 0.32s ease; left: 50%; top: 50%; position: absolute; } .userManagement a.link i.hidden { opacity: 0; pointer-events: none; } .userManagement a.link:hover i { opacity: 0; pointer-events: none; } .userManagement a.link:hover i.hidden { opacity: 1; pointer-events: auto; } .loginField{ width:20%; font-size: 80%; display: flex; flex-direction: column; padding:10px; } .loginBox{ /*border-radius: 15px 0px 0px 15px;*/ width:30%; font-size: 80%; position: fixed; top: 20vh; right: -40%; background: var(--bgcolor); /*border: 2px solid var(--maincolor);*/ border-right: none; box-shadow: 2px 2px 10px rgb(20 20 20); padding:10px; display: flex; flex-direction: column; transition: 0.25s ease-in; transform: skew(-8deg); z-index:10000; } .loginBox .loginWrapper{ transform: skew(8deg); } .loginBoxActive{ right: -10%; } .loginBox .loginBtn, .loginField .loginBtn{ background: none; border: 1px solid var(--maincolor); font-family: 'Ubuntu'; border-radius: 7px 7px 7px 7px; transition:0.2s ease-in; cursor: pointer; } .loginBox .loginBtn:hover, .loginField .loginBtn:hover{ border: 1px solid var(--hovercolor); } .loginBox a, .loginField a{ text-decoration:none; color: var(--linkcolor); transition: 0.2s ease-in; } .loginBox a:hover, .loginField a:hover{ color: var(--hovercolor); } .loginBox form, .loginField form{ width: 100%;; } .loginBox div, .loginField div{ display: flex; flex-direction: row; width: 85%; justify-content: space-between; margin: 2%; } .loginBox .loginLinks{ display: none; } /* contact */ .contact{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; position: fixed; z-index: 2000; overflow: hidden; transition: all 0.5s ease; top: 0; } .contact .container { width: 100%; height: 100%; margin: 0; padding: 0; transition: all 0.3s ease; } .contactHidden{ transform: translateX(100%); } body.contact.menu-active .container { transform: scale(0.9); } .contact .container .inner { width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } .contactNav a { font-size: 110%; padding: 0; color: #212121; text-decoration: none; cursor: pointer; text-align: center; transition: all 0.32s ease; } body:not(.menu-active) .nav a.menu-activator:hover { transform: rotate(90deg); } body.menu-active .nav a.menu-activator { transform: rotate(90deg); } .contactNav a.white { color: var(--menutextcolor);/*#FAFAFA;*/ } body.menu-active .nav a.white { color: #212121; transition: all 0.15s ease; } .contactNav a.link { } .contactNav a.link i { transform: translate(-50%, -50%); transition: all 0.32s ease; left: 50%; top: 50%; position: absolute; } .contactNav a.link i.hidden { opacity: 0; pointer-events: none; } .contactNav a.link:hover i { opacity: 0; pointer-events: none; } .contactNav a.link:hover i.hidden { opacity: 1; pointer-events: auto; } .contactNav i.ion-cube { display: inline-block; position: absolute; height: 75px; line-height: 75px; font-size: 35px; left: 50%; transform: translateX(-50%); } .contact .container .inner .panel { position: relative; box-sizing: border-box; height: 100%; width: 60%; float: left; transform: skew(-8deg); } .contact .container .inner .panel.panel-left { cursor:pointer; opacity:0; margin-left: -10%; } .contact .container .inner .panel .panel-content { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) skew(8deg); } .contact .container .inner .panel.panel-left .panel-content .image-background { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; opacity: 0.95; transform: translateX(-50%) translateY(-50%); } .contact .container .inner .panel.panel-right { margin-right: -10%; background: var(--bgcolor); box-shadow: 2px 2px 10px rgb(20 20 20); } .contact .container .inner .panel.panel-right .panel-content .form { display: block; position: absolute; margin: 0 auto; width: 300px; min-height: 400px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-40%); } .contact .container .inner .panel.panel-right .panel-content .form strong { display: block; margin: 0 0 45px 0; color: var(--textcolor); font-weight: 200; font-size: 18px; font-family: var(--fonttext); } .contact .group { position: relative; margin-bottom: 25px; } .contact input, .contact textarea{ font-size: 13px; height: 25px; padding: 10px 10px 10px 5px; display: block; width: 300px; border: none; outline: none; border-bottom: 1px solid var(--textcolor); color: var(--textcolor); background: rgba(0,0,0,0); opacity: 0.5; transition: 0.2s ease; } .contact textarea{ height: 200px; } .contact input:focus, .contact textarea:focus { outline: none; opacity: 1; } .contact label { color: var(--textcolor); font-size: 13px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 15px; opacity: 0.5; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } /* active state */ .contact input:focus ~ label,.contact input:valid ~ label, .contact textarea:focus ~ label, .contact textarea:valid ~ label{ top: -10px; font-size: 12px; color: var(--textcolor); opacity: 1; } .contact .highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; } /* active state */ .contact input:focus ~ .highlight, .contact textarea:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } /* ANIMATIONS ================ */ @-webkit-keyframes inputHighlighter { from { background:var(--bgcolor); } to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter { from { background:var(--bgcolor); } to { width:0; background:transparent; } } @keyframes inputHighlighter { from { background:var(--bgcolor); } to { width:0; background:transparent; } } .contact .send-btn { float: right; color: var(--textcolor); transition: 0.2s ease; } .contact .send-btn:hover { color: #FAFAFA; cursor: pointer; } .contact .menu { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; transition: all 0.33s ease; } .contact .menu::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(240,240,240,0.0); transition: all 0.45s ease; } body.menu-active .menu { left: 0; } body.menu-active .menu::before { background: rgba(240,240,240,0.9); } @media (max-width: 768px){ .contact .container .inner .panel { transform: initial; } .contact .container .inner .panel.panel-left { width:20%; margin:0; } .contact .container .inner .panel.panel-right { width:90%; } .contact .container .inner .panel .panel-content { transform: initial; top:initial; left: initial; } .contact .container .inner .panel.panel-right .panel-content .form { display: block; position: absolute; margin: 0 auto; width: 80%; min-height: 400px; top: 10%; left: 5%; transform: initial; } .contact input, .contact textarea { width:90%; } } /* ----------------------------- Basic Layout ------------------------------------ */ .desktop{ display: initial; } .mobile{ display: none; } body, div, p, h1, h2, h3, h4{ margin:0; } body{ font-family: var(--fonttext); font-size: 1.1vw; overflow-x: hidden; background: var(--bgcolor); } html, body{ scroll-behavior: smooth; } div, p{ /*font-size: 0.95em;*/ font-weight: normal; } h1, h2, h3, h4{ color: var(--maincolor); font-size: calc(170% * var(--headlinesize)); margin: 1% 0; font-family: var(--fontlead); font-weight: var(--headlineweight); line-height: initial; text-transform: var(--headlinetransform); letter-spacing: var(--headlinespacing); } h1{ font-size: calc(150% * var(--headlinesize)); } h2{ font-size: calc(100% * var(--headlinesize)); } h3, h4{ font-size: calc(90% * var(--headlinesize)); } .blur{ transition: 0.2s ease-in; filter: blur(5px); } .gray-scale{ transition:0.25s ease-in; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } .gray-scale:hover{ -webkit-filter: grayscale(0%); filter: grayscale(0%); } .content a, .Rezept a, .content-wrapper a, .contentbg a{ color: var(--linkcolor); text-decoration: none; } .content a:hover, .Rezept a:hover, .content-wrapper a:hover, .contentbg a:hover{ color: var(--hovercolor); } /*---------------------------- Grid layout -------------------------------------------*/ .grid-container { min-height:100vh; width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 10% 10% 60% 10% 10%; grid-template-columns: 10% 10% 60% 10% 10%; /*grid-template-rows: [start-row1] 7vh [row1-row2] 13% [row2-row3] 20% [row3-row4] 20% [row4-row5] 20% [row5-end] 20%;*/ grid-auto-rows: min-content; } .grid-element{ overflow: hidden; overflow-y: auto; } .size-2-3-2-4{ -ms-grid-column-start: 2; -ms-grid-column-end: 3; -ms-grid-row-start: 3; -ms-grid-row-end: 5; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 5; } .content{ min-height:100vh; background: var(--bgcolorglobal); } .content-wrapper{ margin-top:70px; opacity: 0; color: var(--textcolor); width:100%; display:flex; align-items: center; position: relative; align-content: center; flex-direction: column; padding:0;/*padding: 10px 0;*/ transition: 0.25s ease-in; } .content div, .content p, .Rezept div, .Rezept p{ line-height:var(--lineheight); font-size:var(--fontsizetext); } .content ul{ list-style-position: inside; } .content a{ text-decoration: none; transition: ease-in 0.25s; color: var(--linkcolor); } .content a:hover{ color: var(--hovercolor); } .content img, .content-wrapper img{ max-width:100%; max-height: 100%; position: relative; } .content-element img:not(.noGallery_Image), .content-wrapper img:not(.noGallery_Image){ cursor: pointer; } .content .flexElement{ text-align: center; } /*------------------------------------------Backend Redakteur classes -------------------------*/ .listCenter{ text-align: center; list-style: inside; padding: 0; } .roundImage{ border-radius: 50%; } .roundCorner{ border-radius: 15%; } .shadow{ box-shadow: 5px 5px 5px 1px #ccc; } /*----------------------------------------- Menu --------------------------------------- */ /* landing page slider */ .introContainer{ width: 100%; height: 100vh; /*overflow: hidden;*/ position: relative; } @-moz-document url-prefix() { .introContainer{ overflow: hidden; } } .slogan{ position: absolute; top: 0%; left: -66%; width:66%; overflow:hidden; z-index: 70; transition: ease-in 0.5s; height:85vh; } .sloganDisplay{ left:-35%; } .hideElement{ opacity:0; } .sloganBox{ background:var(--maincolor); transform: skewx(-8deg); height:85vh; left: -19%; position: relative; box-shadow: 5px 5px 10px rgba(20,20,20,1); } .sloganWrapper{ transform: skewx(8deg); top: 20vh; position:relative; left:75%; width:45%; } .sloganElement{ margin: 5% 0%; font-size:150%; transition: 0.2s ease-in; } .sloganElement div{ padding:1% 0%; text-align:left; } .slogan a{ text-decoration:none; color: var(--textcolor); transition: 0.15s ease-in; } .slogan a:hover{ color: var(--hovercolor); } .landingImage{ top:0; left:0; width:100vw; height:100vh; overflow:hidden; } .landingImage .landingImageWrapper{ width:110%; height:110%; background-size:cover; background-position: center; left:50%; top:50%; transform: translate(-50%, -50%); position:relative; transition: 1s ease-in; } .menu{ position: fixed; top: -20vh; left: 0; width: 100%; /*height: 7vh; /*bg-color 2 */ height: 20vh; transition: ease-in 0.25s; z-index: 10000; /*background: linear-gradient(rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 70%) 60%, transparent 100%);*/ background: var(--menucolor); box-shadow: var(--menushadow); } .menu.scrolled{ transition: ease-in 0.25s; /*box-shadow: 2px 2px 10px rgba(20,20,20,1);*/ } .menu::before{ position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background-image: var(--menucolorscrolled); border-bottom: var(--menuborder); z-index: -1; transition: opacity 0.5s linear; opacity: 0; } .menu.scrolled::before{ opacity:1; } .menu.open::before{ opacity:0; } .menu .safariMenuBugfix{ height:100vh; position:absolute; left:-1px; width:1px; } .backLinkContainer{ position: relative; display: flex; } .backLink{ transition: ease-in 0.25s; z-index: 30; position: absolute; display: flex; border-bottom: 1px solid var(--textcolor); background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255,255,255,0) 80%); transform: translateX(-100%); } .backLink .backLinkWrapper{ transition: ease-in 0.25s; display: initial; opacity: 0; } .backLink .backLinkWrapper a{ transition: ease-in 0.25s; text-decoration:none; color: black; display: initial; } .backLink .backLinkWrapper a i{ } .backLink .backLinkWrapper a:hover{ color: var(--textcolor); } #cssmenu { font-family: var(--fonttext); } .menuSpace{ width: 100%; height:11vh; } .menuWrapper{ display:flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: center; padding: 0 3%; transition: 0.25s ease-in, border-bottom 0.5s ease-in;; } .menu.scrolled .menuWrapper{ border-bottom: 1px solid var(--textcolor); border-bottom: none; } .menu .menuWrapper, .menu .menuWrapper .ddMenu, .menu .menuWrapper .ddMenu #cssmenu, .menu .menuWrapper .ddMenu #cssmenu .lvl1menu{ height:100%; z-index: 100; } #cssmenu::after, #cssmenu > ul::after{ content: none; } .ddMenu #cssmenu .lvl1menu{ display:flex; justify-content: space-between; } .ddMenu{ flex-grow:4; } #cssmenu > ul > li { position: relative; height: 106%; width: 15%; } #cssmenu > ul { background: none; } #cssmenu > ul > li > a { /*font-weight: bold;*/ background: var(--buttoncolor); color: var(--maincolor); font-size: 0.8vw; height: 90%; white-space: nowrap; display: flex; align-items: center; justify-content: center; z-index:12000; padding:0; transform: rotateX(1deg) translatey(0px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before { background: rgb(220, 220, 220); color: var(--textcolor); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a::before { background: var(--buttoncolor); color: var(--maincolor); display:flex; align-items: center; justify-content: center; } #cssmenu > ul > li:hover .submenu{ transition: ease-in 0.25s; opacity:1; pointer-events: initial; } #cssmenu .submenu{ transition: 0.5s ease-in; background: rgba(0,0,0,0.8); opacity:0; z-index:10000; display: flex; flex-direction: column; pointer-events: none; top:5%; } #cssmenu .submenu li a{ color: white; text-decoration: none; display: flex; justify-content: center; align-items: center; font-size: 0.7vw; width: 100%; height: 100%; transition: ease-in 0.25s; text-align: center; text-transform: uppercase; } #cssmenu .submenu li a:hover{ background-color: var(--textcolor); color: white; } #cssmenu .submenu li{ height: 5vh; border-bottom: 1px solid white; } #cssmenu .submenu li:last-child{ border-bottom: none; } .language{ height: 100%; flex-grow:1; z-index:1000; display: flex; justify-content: center; display: none; } .language div{ height: 100%; } .language div a:hover{ color: var(--hovercolor); } .language div a{ top: 50%; position: relative; transform: translateY(-60%); color: var(--menutextcolor); text-decoration: none; transition: ease-in 0.25s; } .language div:last-child a{ float:left; } .language div a{ border-right: 1px solid var(--menutextcolor); display: inline-block; padding: 0 5px; } .language div:last-child a{ border-right:none; } .menu .logo .logoSchrift{ left: 0; position: relative; } .menu .logo .logoSchrift img{ object-fit: contain; max-height: 90%; width: auto; bottom: 0 !important; position: relative; max-width: 100%; } .menu .logo{ height:100%; z-index: 1000; flex-grow:1; max-width: 50%; opacity:1; transition:0.5s ease-in; } #mainMenu.menu.scrolled .logo{ opacity:1; } .menu .logo img { width: 20%; position: absolute; height: auto; bottom: -60%; transition: ease-in 0.25s; } .menu .logo div{ position: absolute; left: 20%; display: flex; height: 100%; align-items: center; justify-content: left; color: white; text-decoration: none; } .contactNav { height:100%; flex-grow:1; z-index:1000; display: none; } .contactNav a{ position: relative; height: 100%; width:100%; display: inline-block; } /*----------------------------------------Menu Lvl3 -----------------------------------*/ .menuWrapperlvl3{ height: 9vh; opacity: 0; transition: ease-in 0.25s; position: relative; float: right; z-index:20; } .menLvl3Fader{ background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255,255,255,0) 80%); position: absolute; width: 100%; height: 6vh; transition: ease-in 0.25s; pointer-events: none; z-index:10; } .menuWrapperlvl3 a{ float: left; color: black; text-decoration: none; margin-top: 0.2%; transition: ease-in 0.25s; white-space: nowrap; } .menuWrapperlvl3 a:hover{ color: var(--textcolor); } .menLvl3Element{ opacity: 0; transition:ease-in 0.25s; padding: 0 0.2vw; border-left: 1px solid black; font-size: 0.8vw; font-weight: bold; } #menLvl3Container a:first-child .menLvl3Element{ border-left: none; } #menLvl3Container{ border-bottom: 1px solid var(--textcolor); display: inline-flex; padding: 0.2%; margin-top: 0.5%; position: relative; transition: ease-in 0.5s; right: 0; float: right; transform: translateX(0); } .imgDiamond img{ position: absolute; bottom: 0; } #menLvl3Container .imgDiamond img{ transform: translate(-100%, 50%); left: 0; } .backLink .imgDiamond img{ transform: translate(100%, 50%); right:0; } .backLink .imgDiamond{ display: initial; position: relative; } #menLvl3Container img:hover{ cursor: pointer; } /*-----------------------Snippets-----------------------*/ /*----------------------HoverImage-----------------------*/ .hoverImage{ position:relative; min-width:10vw; min-height:10vh; } .hoverImage:hover div:first-child{ opacity:0; } .hoverImage:hover div:last-child{ opacity:1; } .hoverImage div{ display:flex; align-items:center; height:100%; transition: 0.25s ease-in; } .hoverImage div:first-child{ position:relative; } .hoverImage div:last-child{ opacity:0; position:absolute; top:0; } .hoverImage img{ width:100%; height:auto; } /* -------------------- Flexbox -----------------------*/ /*Flex Box*/ .flexContainer{ width:98%; display: flex !important; flex-direction: row; position: relative !important; height: auto !important; left: initial !important; top: initial !important; float: left !important; padding-left: 1%; padding-right: 1%; line-height: 1.5; } .flexElement{ box-sizing: border-box; width: 100%; position: relative !important; height: auto !important; left: initial !important; top: initial !important; float: left !important; padding: 1%; overflow: hidden; overflow-y: auto; } /*------------------------ShadowBox---------------------*/ .shadowBox img, .boxPlaceholder img{ max-width: 100%; } .shadowBox{ margin: 1% 1%; box-shadow: 5px 5px 5px 1px #ccc; } .boxPlaceholder{ margin: 1% 1%; box-shadow: none; } /*------------------------info-Box---------------------*/ .info-box{ border-radius: 10px; background-color: var(--maincolor); } /*---------------------HoverBox------------------------------*/ .flexElement.hoverBox{ transition: 0.25s ease-in; } .flexElement.hoverBox .hoverContent{ background-color:rgba(255,255,255,0.7); opacity:0; transition: 0.25s ease-in; position:absolute; height:100%; width:100%; top:0; left:0; flex-direction: column; justify-content: flex-end; overflow: hidden; } .flexElement.hoverBox .hoverContent div{ padding: 1% 6%; font-size:0.7em; float: left; text-align: left; color: var(--linkcolor); } .flexElement.hoverBox:hover .hoverContent, .flexElement.hoverBox .hoverContent:hover{ opacity:1; } /*------------------------------------HeroBox----------------------------------------*/ .FC_Hero{ gap:1%; } .FE_Hero{ padding: 2% !important; } .FE_Hero, .FE_Hero div, .FE_Hero p, .FE_Hero h2, .FE_Hero h3, .FE_Hero h4, .FE_Hero h5, .FE_Hero h6{ color:white; } .FE_HeroImg{ width:90%; position:relative; height:auto; } .FE_Hero .FE_Content{ text-align: left; margin-top:15%; } .FE_Hero .FE_HeroBTN .btn{ margin-top:15%; float: left; font: 600 1.2rem 'Roboto Slab', sans-serif; padding: 0.5em 1em; font-size:100%; } .FE_Hero .FE_HeroBTN .draw-white{ box-shadow: inset 0 0 0 2px white; } .FE_Hero .FE_HeroBTN .draw-white::after { border-top-width: 2px; border-right-width: 2px; } .FE_Hero .FE_HeroBTN .draw-white::before { border-bottom-width: 2px; border-left-width: 2px; } /*-------------------------------------- miniButton ---------------------------------*/ .miniButton{ transition: 0.2s ease-in; position: relative; float: left; border: 2px solid var(--maincolor); } .miniButton::before{ content: ""; width: 0%; height: 100%; left: 0; transition: 0.25s ease-in; background: var(--menucolor); position: absolute; } .miniButton a{ transition: 0.2s ease-in; padding: 10px 20px; position: relative; float: left; } .miniButton:hover::before{ width:100%; } .miniButton:hover{ border: 2px solid black; } .miniButton:hover a{ color: var(--maincolor); } /*--------------------------------------- footer --------------------------------------*/ .footer{ border-top: 1px solid var(--maincolor); } .footerContainer{ overflow: hidden; } .footerGrid div { position: relative; display: flex; align-items: center; } .footer div, .footer p{ font-size: 1em; } .footer .socialLinks{ font-size:200%; } .footer .socialLinks a { margin-right:2%; } #footerMap{ border: 0; width: 90%; height: 100%; } #footerWrapper{ background: var(--footerimage), var(--footerbackgroundcolor); color: var(--footercolor); font-size: 0.9vw; background-position: center; background-repeat: no-repeat; background-size: cover; } .footerGrid{ width: 100%; height:100%; display: -ms-grid; display: grid; -ms-grid-columns: 10% 90%; grid-template-columns: 10% 90%; grid-auto-rows: auto; align-content: baseline; } .footerGrid div{ position: relative; } .footerGrid div:nth-child(odd) i{ position:absolute; top:50%; left:50%; transform :translate(-50%, -50%); } .footer a{ color: var(--footercolor); text-decoration: none; transition: ease-in 0.25s; } .footer a:hover{ color: var(--hovercolor); } .footer img{ width: 80%; height: auto; margin-bottom: 1%; } .footerLogo div{ display: flex; /*justify-content: center;*/ align-items: center; } .footer .socialMedia img{ width:5%; margin-top:1%; } /*------------------------ Youtube embedded ----------------*/ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*-------------------------------------------------Tablet View Landscape---------------------------------------------------*/ @media (max-width: 1260px) { .desktop{ display: none; } .mobile{ display: initial; } #cssmenu > ul > li > a { background: transparent; } #cssmenu.small-screen #menu-button:hover{ color: var(--hovercolor); } #cssmenu.small-screen #menu-button:hover::before{ background-color: var(--textcolor); } #cssmenu.small-screen #menu-button:hover::after{ border-top: 2px solid var(--textcolor); border-bottom: 2px solid var(--textcolor); } #cssmenu.small-screen #menu-button{ color: var(--textcolor); transition: 0.25s ease-in; } #cssmenu.small-screen #menu-button::before{ background-color: var(--textcolor); transition: 0.25s ease-in; } #cssmenu.small-screen #menu-button::after{ border-top: 2px solid var(--textcolor); border-bottom: 2px solid var(--textcolor); transition: 0.25s ease-in; } #cssmenu.small-screen #menu-button.menu-opened::after { border-top: 2px solid var(--textcolor); border-bottom: none; transform: rotate(-45deg); right: 19px; top: 21px; } #cssmenu.small-screen #menu-button.menu-opened::before { background: var(--textcolor); transform: rotate(45deg); top:21px; } #cssmenu.small-screen #menu-button { transform: translateY(-50%); top: 50%; } #cssmenu.small-screen #menu-button { background: transparent; } #cssmenu > ul > li { width:50%; margin:0; height:auto; } #cssmenu > ul > li > a { font-size: initial; width:90%; } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a::before { display: none; } #cssmenu > ul > li > a:hover { /*color: rgb(100,100,100) !important;*/ } #cssmenu .submenu { position: absolute; width: 100%; left: 200%; top:0; transform: translateY(0); } .ddMenu #cssmenu .lvl1menu{ display: block; left: 0px; position: fixed; justify-content: inherit; flex-direction: column; } #cssmenu .menuArrow{ cursor: pointer; width: 10%; height: 95%; position: absolute; right: 0; float: right; top: 0; background: var(--textColor); } #cssmenu .menuArrow i{ transform: translate(-50%, -50%); top: 50%; left:50%; position: absolute; } #cssmenu .submenuOpen .submenu{ left:100%; } #cssmenu .submenu li a { font-size: initial; } .FE_Hero .FE_HeroBTN .btn{ font-size: 100%; box-shadow: inset 0 0 0 1px; } .FE_Hero .FE_HeroBTN .draw-white{ box-shadow: inset 0 0 0 1px white; } .FE_Hero .FE_HeroBTN .draw-white::after { border-top-width: 1px; border-right-width: 1px; } .FE_Hero .FE_HeroBTN .draw-white::before { border-bottom-width: 1px; border-left-width: 1px; } } @media only screen and (max-width: 1260px), (hover: none) { .desktop{ display: none; } .mobile{ display: initial; } .content div, .content p, .Rezept div, .Rezept p{ font-size: calc(var(--fontsizetext) * 1.1); } /*---------------------HoverBox------------------------------*/ #cssmenu.small-screen #menu-button { transform: translateY(-50%); top: 50%; } #cssmenu.small-screen #menu-button { background: transparent; z-index:200; } #cssmenu > ul > li { width:50%; margin:0; left:5%; background: var(--buttoncolor); transition: ease-in 0.5s; } #cssmenu > ul > li > a { font-size: 5vw; width:90%; line-height: 150%; } #cssmenu .submenu { position: absolute; width: 100%; left: 200%; top:0; transform: translateY(0); pointer-events: none; } #cssmenu .lvl1SubOpen .lvl1MenuItem.submenuOpen .submenu { pointer-events:auto; } .ddMenu #cssmenu .lvl1menu{ transition: 0.2s ease-in; opacity:0; background: var(--menucolor); display: block; left: 0px; top:0; padding-top:10vh; position: fixed; justify-content: inherit; flex-direction: column; } .ddMenu #cssmenu .lvl1menu.lvl1SubOpen .subMenuLvl2 li { left:0; width:100%; } .ddMenu #cssmenu .lvl1menu.open{ opacity:1; } .ddMenu #cssmenu .lvl1menu.lvl1SubOpen li{ left: -60%; } .ddMenu #cssmenu .lvl1menu li{ height:auto; } .ddMenu #cssmenu .lvl1menu .showValidSub .menuArrow{ display: initial; } .ddMenu #cssmenu .lvl1menu .showValidSub .submenu{ display: flex; opacity: 1; /*pointer-events:initial;*/ } #cssmenu .menuArrow{ display:none; width: 10%; height: 100%; position: absolute; right: 0; float: right; top: 0; background: transparent; font-size: 3vw; color: var(--textcolor); } #cssmenu .menuArrow i{ transition: 0.2s ease-in; transform: translate(-50%, -50%) scalex(1); top: 50%; left:50%; position: absolute; } #cssmenu .menuArrow.open i{ transform: translate(-50%, -50%) scalex(-1); } #cssmenu .submenuOpen .submenu{ left:100%; display: none; } #cssmenu .submenu{ background-color: transparent; } #cssmenu .submenu li a { font-size: 5vw; line-height: 150%; color: var(--textcolor); } #cssmenu .submenu li a:hover { color: var(--hovercolor); background-color: transparent; } } /*---------------------------------------------------------Mobile View------------------------------------------------------------------*/ /*------------------------FlexBox---------------------*/ @media (max-width: 768px) and (orientation: portrait){ .menu .logo { max-width:35%; } .dsgvo-wrapper div, .dsgvo-wrapper p { font-size: 1em; } .content,.content h1,.content h2,.content h3, .content p, .content ul, .content ul li{ text-align: center; } .content img, .content-wrapper img{ max-width:100%; max-height: 100%; top: initial; position: relative; transform: none; } .dsgvo-wrapper .dsgvo-content .dsgvo-option { justify-content: space-between; margin: 2% 0; } .dsgvo-wrapper .btn-wrapper { margin: 0 2%; } .ddMenu{ flex-grow:1; } .contactNav a{ font-size:4vw; } .content-element{ width:100% !important; } .sloganElement{ margin: 15% 0%; font-size:100%; transition: 0.2s ease-in; } .sloganDisplay{ left:-8%; } .sloganBox{ left: -30%; } .sloganWrapper { left: 43%; } .loginField{ width:70%; } .loginBox{ right: -90%; width: 70%; } .loginBoxActive{ right: -10%; } .loginBox div, .loginField div { width:90%; } .ddMenu { left: 7%; } .language { left: 10%; } body{ font-size: 3.2vw; } div, p{ font-size: 1em; } .footer div, .footer p { font-size: 1.7em; } .backLink .imgDiamond img { height:50%; width: auto; } .backLink a{ font-size: 0.8em; } .backLink{ background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 90%, rgba(255,255,255,0) 100%); } .flexContainer{ flex-direction: column; } .menLvl3Fader, .menuWrapperlvl3{ display: none; } h1{ font-size: calc(150% * var(--headlinesize)); } h2{ font-size: calc(120% * var(--headlinesize)); } h3, h4{ font-size: calc(120% * var(--headlinesize)); } .footerLogo div { justify-content: center; } .footer a, .footerContainer, .footerGrid div{ text-align: center; } .shadowBox{ margin-bottom: 3%; width: 96%; } .grid-container{ -ms-grid-columns: 5% 5% 80% 5% 5%; grid-template-columns: 5% 5% 80% 5% 5%; } .footerGrid{ padding: 1% 10% !important; width:auto !important; } .footerGrid div{ text-align: center; } .footer .socialLinks{ font-size:400%; } } @media (max-width: 1260px) and (orientation:landscape) { .dsgvo-wrapper div, .dsgvo-wrapper p { font-size: 1em; } h1{ font-size: calc(150% * var(--headlinesize)); } h2{ font-size: calc(120% * var(--headlinesize)); } h3, h4{ font-size: calc(120% * var(--headlinesize)); } #cssmenu > ul > li > a, #cssmenu .submenu li a{ font-size:3vw; } #cssmenu .menuArrow { font-size: 2vw; } }