body, html { margin: 0; padding: 0; font-size: 19px; } body > p { max-width: 1024px; margin: 30px auto; } .ngparapaternoster > ul.ngparapaternoster-desktop { display: flex; width: 100%; margin: 0; padding: 0; } .ngparapaternoster > ul.ngparapaternoster-desktop > li { width: 50%; list-style: none; display: block; margin: 0; padding: 0; } .ngparapaternoster > ul.ngparapaternoster-desktop > li.ngparapaternoster-inverse { height: 100vh; position: sticky; top: 0; overflow: hidden; } .ngparapaternoster > ul.ngparapaternoster-desktop > li > ul { display: block; margin: 0; padding: 0; } .ngparapaternoster > ul.ngparapaternoster-desktop > li > ul > li { width: 100%; height: 100vh; display: block; list-style: none; margin: 0; padding: 0; } .ngparapaternoster > ul.ngparapaternoster-desktop > li > ul > li.ngparapaternoster-text { display: flex; justify-content: center; align-items: center; } .ngparapaternoster > ul.ngparapaternoster-desktop > li > ul > li.ngparapaternoster-text > div { width: 75%; } .ngparapaternoster > ul.ngparapaternoster-desktop > li > ul > li.ngparapaternoster-picture img { width: 100%; height: 100%; object-fit: cover; display: block; } .ngparapaternoster > ul.ngparapaternoster-mobile { display: block; margin: 0; padding: 0; } .ngparapaternoster > ul.ngparapaternoster-mobile > li { display: block; margin: 0; padding: 0; list-style: none; width: 100%; } .ngparapaternoster > ul.ngparapaternoster-mobile > li.ngparapaternoster-picture img { width: 100%; height: 100vh; object-fit: cover; display: block; } .ngparapaternoster > ul.ngparapaternoster-mobile > li.ngparapaternoster-text { width: 100%; min-height: 100vh; object-fit: cover; display: flex; justify-content: center; align-items: center; } .ngparapaternoster > ul.ngparapaternoster-mobile > li.ngparapaternoster-text > div { width: 75%; padding: 12vh 0; } .ngparapaternoster a.ngparapaternoster-button { border-color: #00a9fb; border-width: 1px; border-style: solid; padding: 10px 20px 10px 20px; background: #00a9fb; font: 20px Merriweather,Times,'Times New Roman',serif; color: #ffffff; letter-spacing: 0px; box-shadow: 3px 3px 3px rgba(0,0,0,0.1); border-radius: 2px; display: inline-block; margin-top: 20px; cursor: pointer; -webkit-appearance: none; text-decoration: none; } .ngparapaternoster a.ngparapaternoster-button:hover { border-color: #2eabd0; background: #2eabd0; font-weight: normal; font-style: normal; text-transform: none; color: #ffffff; text-decoration: none; } .ngparapaternoster a.ngparapaternoster-button:focus { border-color: #2eabd0; background: #000000; box-shadow: 3px 3px 3px rgba(0,0,0,0.1); font-weight: normal; font-style: normal; text-transform: none; color: #ffffff; outline: auto; } .ngparapaternoster .ngparapaternoster-text-right { text-align: right; } .ngparapaternoster .ngparapaternoster-text-center { text-align: center; } .ngparapaternoster .ngparapaternoster-text-justify { text-align: justify; } @media (max-width: 1023px) { .ngparapaternoster > ul.ngparapaternoster-desktop { display: none; } } @media (min-width: 1024px) { .ngparapaternoster > ul.ngparapaternoster-mobile { display: none; } }