.oneByOneAspectRatio::after { padding-top: 100%; display: block; content: ''; } .widthOne { width: 6.57%; } .widthTwo { width: 15%; } .widthFour { width: 32%; } .widthFive { width: 38.5%; } .widthThree { width: 23.8%; } .heightOne { height: 13.3%; } .heightTwo { height: 30.5%; } .heightFour { height: 65%; } .hasColorImg { background-size: cover; } .hasColorImg .title { width: 100%; background: linear-gradient(to right, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0.25) 40%, rgba(25, 25, 25, 0.1) 50%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; padding: 20px; color: white; } @media (max-width: 1399px) { .hasColorImg .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { .hasColorImg .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { .hasColorImg .title { padding: 5px; } } #startGridWrapper .startGrid .cell .title { padding: 0 15px; } #startGridWrapper .startGrid > .cell { background-size: 33%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#emptyA { top: 0; left: 8.5%; width: 6.57%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#emptyA::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#emptyB { top: 17%; left: 0; width: 15%; height: 13.3%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#lernfelderAusbildung { top: 0; left: 17%; width: 15%; background-image: url('../graphX/startGrid/Lernfelder Ausbildung.png'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#lernfelderAusbildung::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#rosi { top: 34%; left: 0; width: 15%; background-image: url('../graphX/startGrid/Rosi.png'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#rosi::after { padding-top: 100%; display: block; content: ''; } @media (max-width: 1399px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#rosi { background-size: 55%; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#rosi { background-size: 45%; } } #startGridWrapper .startGrid#öpnvStartGridA > .cell#fahrzeugtypen { top: 34%; left: 17%; width: 15%; background-image: url('../graphX/startGrid/Fahrzeugtypen.png'); background-size: 66%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#fahrzeugtypen::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#mitarbeiterunterweisung { bottom: 0; left: 0; width: 32%; height: 30.5%; background-image: url('../graphX/startGrid/Mitarbeiterunterweisung.png'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#mainImage { top: 0; left: 34%; width: 32%; background-size: cover; background-image: url('../graphX/startGrid/mainPic.jpg'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#mainImage::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#mainImage .title { width: 100%; background: linear-gradient(to right, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0.25) 40%, rgba(25, 25, 25, 0.1) 50%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; padding: 20px; color: white; } @media (max-width: 1399px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#mainImage .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#mainImage .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#mainImage .title { padding: 5px; } } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date { bottom: 0; left: 34%; width: 15%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div { position: absolute; width: 100%; text-align: center; font-family: "OpenSansLight", Arial, sans-serif; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfWeek { top: 10%; font-size: 21px; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfMonth { top: 20%; font-size: 100px; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.monthYear { bottom: 10%; font-size: 21px; } @media (max-width: 1399px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.monthYear { font-size: 18px; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfMonth { top: 25%; font-size: 60px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.monthYear { font-size: 15px; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfMonth { top: 25%; font-size: 50px; } } @media (max-width: 1399px) and (max-width: 768px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.monthYear { font-size: 12px; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#date div.dayOfMonth { font-size: 35px; } } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather { display: block; bottom: 0; left: 51%; width: 15%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 { margin: 20px; width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; text-align: center; font-size: 18px; } @media (max-width: 1399px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 { margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 { margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px); } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 { margin: 5px; width: calc(100% - 10px); height: calc(100% - 10px); } } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div { position: absolute; left: 0; width: 100%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName { top: 0; height: 15%; } @media (max-width: 1399px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName { font-size: 16px; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName div:first-of-type { display: none; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName { font-size: 14px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName { font-size: 12px; } } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div { top: 20%; height: 80%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div { height: 100%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div:last-of-type { display: none; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div { position: absolute !important; width: 100%; left: 0; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:first-of-type { height: 80%; top: -13%; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:first-of-type img { max-height: 100%; max-width: 100%; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25)); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { bottom: 0; font-size: 14px; } @media (max-width: 1399px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 12px; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type div:first-of-type { display: none; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#öpnvStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 8px; } } #startGridWrapper .startGrid#öpnvStartGridA > .cell#schulungBetriebsanlagen { top: 0; right: 17%; width: 15%; background-image: url('../graphX/startGrid/Schulung Betriebsanlagen.png'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#schulungBetriebsanlagen::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#mail { top: 0; right: 0; width: 15%; background-image: url('../graphX/startGrid/E-Mail.png'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#mail::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#stadtwerkeCampus { top: 34%; right: 0; width: 15%; background-image: url('../graphX/startGrid/Stadtwerke-Campus.png'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#stadtwerkeCampus::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#schulungDaGleis { top: 34%; right: 17%; width: 15%; background-image: url('../graphX/startGrid/Schulung DA-Gleis.png'); } #startGridWrapper .startGrid#öpnvStartGridA > .cell#schulungDaGleis::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridA > .cell#dienstschulungen { bottom: 0; right: 0; width: 32%; height: 30.5%; background-image: url('../graphX/startGrid/Dienstschulungen.png'); background-size: 30%; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#emptyA { top: 0; left: 8.5%; width: 6.57%; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#emptyA::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#emptyB { top: 17%; left: 0; width: 15%; height: 13.3%; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#infoErstbetreuer { top: 34%; left: 0; width: 15%; background-image: url('../graphX/startGrid/Info Erstbetreuer.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#infoErstbetreuer::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#infoArbeitsschutz { bottom: 0; left: 0; width: 15%; background-image: url('../graphX/startGrid/Info Arbeitsschutz.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#infoArbeitsschutz::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#bgm { top: 0; left: 17%; width: 32%; background-size: cover; background-image: url('../graphX/startGrid/bgm.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#bgm::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#bgm .title { width: 100%; background: linear-gradient(to right, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0.25) 40%, rgba(25, 25, 25, 0.1) 50%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; padding: 20px; color: white; } @media (max-width: 1399px) { #startGridWrapper .startGrid#öpnvStartGridB > .cell#bgm .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#öpnvStartGridB > .cell#bgm .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#öpnvStartGridB > .cell#bgm .title { padding: 5px; } } #startGridWrapper .startGrid#öpnvStartGridB > .cell#internet { left: 17%; bottom: 0; width: 32%; height: 30.5%; background-image: url('../graphX/startGrid/Internet.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#vbgUnfallmeldung { top: 0; right: 17%; height: 30.5%; width: 32%; background-image: url('../graphX/startGrid/VBG-Unfallmeldung.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#wichtigeLinks { top: 0; right: 0; width: 15%; background-image: url('../graphX/startGrid/Wichtige Links.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#wichtigeLinks::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#downloads { top: 34%; right: 34%; width: 15%; background-image: url('../graphX/startGrid/Downloads.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#downloads::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#dAerzteNachWegeUndArbeitsunfaellen { top: 34%; right: 0; width: 32%; height: 30.5%; background-image: url('../graphX/startGrid/DärzteNachWegeUndArbeitsunfällen.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#ivuPad { right: 17%; bottom: 0; width: 32%; height: 30.5%; background-image: url('../graphX/startGrid/IVU-Pad.png'); } #startGridWrapper .startGrid#öpnvStartGridB > .cell#emptyC { right: 0; bottom: 0; width: 15%; } #startGridWrapper .startGrid#öpnvStartGridB > .cell#emptyC::after { padding-top: 100%;display: block; content: ''; }