.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#sozialStartGridA > .cell#emptyA { top: 0; left: 8.5%; width: 6.57%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#emptyA::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#emptyB { top: 17%; left: 0; width: 15%; height: 13.3%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#unfallformular { top: 0; left: 17%; width: 15%; background-image: url('../graphX/startGrid/unfallformular.png'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#unfallformular::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#arbeitsschutz { top: 34%; left: 0; width: 15%; background-image: url('../graphX/startGrid/arbeitsschutz.png'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#arbeitsschutz::after { padding-top: 100%; display: block; content: ''; } @media (max-width: 1399px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#arbeitsschutz { background-size: 75%; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#arbeitsschutz { background-size: 66%; } } #startGridWrapper .startGrid#sozialStartGridA > .cell#dutyRoster { top: 34%; left: 17%; width: 15%; background-image: url('../graphX/startGrid/dutyRoster.png'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#dutyRoster::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#kindertagesstätten { bottom: 0; left: 0; width: 32%; height: 30.5%; background-size: cover; background-image: url('../graphX/startGrid/kindertagesstätten.jpg'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#kindertagesstätten .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#sozialStartGridA > .cell#kindertagesstätten .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#kindertagesstätten .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#kindertagesstätten .title { padding: 5px; } } #startGridWrapper .startGrid#sozialStartGridA > .cell#ambulanterPflegedienst { top: 0; left: 34%; width: 32%; background-size: cover; background-image: url('../graphX/startGrid/ambulanterPflegedienst.jpg'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#ambulanterPflegedienst::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#ambulanterPflegedienst .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#sozialStartGridA > .cell#ambulanterPflegedienst .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#ambulanterPflegedienst .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#ambulanterPflegedienst .title { padding: 5px; } } #startGridWrapper .startGrid#sozialStartGridA > .cell#date { bottom: 0; left: 34%; width: 15%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date div { position: absolute; width: 100%; text-align: center; font-family: "OpenSansLight", Arial, sans-serif; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfWeek { top: 10%; font-size: 21px; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfMonth { top: 20%; font-size: 100px; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.monthYear { bottom: 10%; font-size: 21px; } @media (max-width: 1399px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.monthYear { font-size: 18px; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfMonth { top: 25%; font-size: 60px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.monthYear { font-size: 15px; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfMonth { top: 25%; font-size: 50px; } } @media (max-width: 1399px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.monthYear { font-size: 12px; } #startGridWrapper .startGrid#sozialStartGridA > .cell#date div.dayOfMonth { font-size: 35px; } } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather { bottom: 0; left: 51%; width: 15%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .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#sozialStartGridA > .cell#weather .padding15 { margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridA > .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#sozialStartGridA > .cell#weather .padding15 { margin: 5px; width: calc(100% - 10px); height: calc(100% - 10px); } } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div { position: absolute; left: 0; width: 100%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName { top: 0; height: 15%; } @media (max-width: 1399px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName { font-size: 16px; } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName div:first-of-type { display: none; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName { font-size: 14px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName { font-size: 12px; } } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName + div { top: 20%; height: 80%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName + div > div { height: 100%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName + div > div:last-of-type { display: none; } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName + div > div > div { position: absolute !important; width: 100%; left: 0; } #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:first-of-type { height: 80%; top: -13%; } #startGridWrapper .startGrid#sozialStartGridA > .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#sozialStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { bottom: 0; font-size: 14px; } @media (max-width: 1399px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 12px; } #startGridWrapper .startGrid#sozialStartGridA > .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#sozialStartGridA > .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#sozialStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 8px; } } #startGridWrapper .startGrid#sozialStartGridA > .cell#emptyC { top: 0; right: 17%; width: 15%; height: 13.3%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#emptyD { top: 17%; right: 25.5%; width: 6.57%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#emptyD::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#emptyE { top: 17%; right: 17%; width: 6.57%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#emptyE::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#mail, #startGridWrapper .startGrid#sozialStartGridA > .cell#links { top: 0; right: 0; width: 15%; } #startGridWrapper .startGrid#sozialStartGridA > .cell#mail::after, #startGridWrapper .startGrid#sozialStartGridA > .cell#links::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#mail#mail, #startGridWrapper .startGrid#sozialStartGridA > .cell#links#mail { background-image: url('../graphX/startGrid/mail.png'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#mail#links, #startGridWrapper .startGrid#sozialStartGridA > .cell#links#links { background-image: url('../graphX/startGrid/links.png'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#seniorenheime { bottom: 0; right: 0; width: 32%; background-size: cover; background-image: url('../graphX/startGrid/seniorenheime.jpg'); } #startGridWrapper .startGrid#sozialStartGridA > .cell#seniorenheime::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridA > .cell#seniorenheime .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#sozialStartGridA > .cell#seniorenheime .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#seniorenheime .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridA > .cell#seniorenheime .title { padding: 5px; } } #startGridWrapper .startGrid#sozialStartGridB > .cell#emptyA { top: 0; left: 8.5%; width: 6.57%; } #startGridWrapper .startGrid#sozialStartGridB > .cell#emptyA::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#emptyB { top: 17%; left: 0; width: 15%; height: 13.3%; } #startGridWrapper .startGrid#sozialStartGridB > .cell#internet { top: 34%; left: 0; width: 15%; background-image: url('../graphX/startGrid/internet.png'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#internet::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#messages { bottom: 0; left: 0; width: 15%; background-image: url('../graphX/startGrid/messages.png'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#messages::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#ehrenamt { top: 0; left: 17%; width: 32%; background-size: cover; background-image: url('../graphX/startGrid/ehrenamt.jpg'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#ehrenamt::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#ehrenamt .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#sozialStartGridB > .cell#ehrenamt .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridB > .cell#ehrenamt .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridB > .cell#ehrenamt .title { padding: 5px; } } #startGridWrapper .startGrid#sozialStartGridB > .cell#eLearning { left: 17%; bottom: 0; width: 15%; background-image: url('../graphX/startGrid/eLearning.png'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#eLearning::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#emptyC { left: 34%; bottom: 0; width: 15%; } #startGridWrapper .startGrid#sozialStartGridB > .cell#emptyC::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#bgm { right: 17%; top: 0; width: 32%; height: 30.5%; background-size: cover; background-image: url('../graphX/startGrid/bgmSenioren.jpg'); } #startGridWrapper .startGrid#sozialStartGridB > .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#sozialStartGridB > .cell#bgm .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridB > .cell#bgm .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridB > .cell#bgm .title { padding: 5px; } } #startGridWrapper .startGrid#sozialStartGridB > .cell#links { top: 0; right: 0; width: 15%; background-image: url('../graphX/startGrid/links.png'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#links::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#downloads { top: 34%; right: 34%; width: 15%; background-image: url('../graphX/startGrid/download.png'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#downloads::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#sozialStartGridB > .cell#intranet { top: 34%; right: 0; width: 32%; height: 30.5%; background-image: url('../graphX/startGrid/intranet.png'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#betreutesWohnen { bottom: 0; right: 17%; width: 32%; height: 30.5%; background-size: cover; background-image: url('../graphX/startGrid/betreutesWohnen.jpg'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#betreutesWohnen .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#sozialStartGridB > .cell#betreutesWohnen .title { padding: 15px; } } @media (max-width: 1399px) and (max-width: 992px) { #startGridWrapper .startGrid#sozialStartGridB > .cell#betreutesWohnen .title { padding: 10px; } } @media (max-width: 1399px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#sozialStartGridB > .cell#betreutesWohnen .title { padding: 5px; } } #startGridWrapper .startGrid#sozialStartGridB > .cell#unfallformular { right: 0; bottom: 0; width: 15%; background-image: url('../graphX/startGrid/unfallformular.png'); } #startGridWrapper .startGrid#sozialStartGridB > .cell#unfallformular::after { padding-top: 100%;display: block; content: ''; }