/* Theme Name: sassoon 2020 Author: iuno.co Version: 1.0 */ :root { --s-grey: #808285; --s-text: #808285; --s-grey80: rgba(128,130,133,0.8); --s-black: rgba(0,0,0,1); --s-white: rgba(255,255,255,1); --s-zero-white: rgba(255,255,255,0); --s-dust: rgba(245,245,245,1); --s-zero-dust: rgba(245,245,245,0); --s-lightgrey: #eeeeee; --s-violet: #4a00Be; --s-blue: #0091ce; --s-lightblue: #3d8dd9; --s-shadow: rgba(90,90,90,.2); } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } .entry-content .alignwide { margin-left: -80px; margin-right: -80px; } .entry-content .alignfull { margin-left: calc( -100vw / 2 + 100% / 2 ); margin-right: calc( -100vw / 2 + 100% / 2 ); max-width: 100vw; } .alignfull img { width: 100vw; } .is-style-iuno-sub-square { text-align: center; } .is-style-iuno-medium-square { text-align: center; } .is-style-iuno-sub-square-multiple { display: inline-block; width: 60px; margin: 0 10px; } .is-style-iuno-medium-square-multiple { display: inline-block; width: 100px; margin: 0 10px; } .is-style-iuno-sub-square img, .is-style-iuno-sub-square-multiple img { width: 60px !important; height: 60px !important; object-fit: cover; object-position: top center; } .is-style-iuno-medium-square img, .is-style-iuno-medium-square-multiple img { width: 100px !important; height: 100px !important; object-fit: cover; object-position: top center; } .is-style-iuno-290-square img { width: 290px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; } .is-style-iuno-large-square img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; } .is-style-iuno-large-round img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; border-radius: 100%; } .is-style-iuno-banner img { width: 100% !important; height: auto; } .is-style-iuno-column-left, .is-style-iuno-group-left { text-align: left; } .is-style-iuno-column-center, .is-style-iuno-group-center { text-align: center; } .is-style-iuno-column-right, .is-style-iuno-group-right { text-align: right; } .is-style-iuno-no-padding { padding: 0 !important; } hr.is-style-iuno-sassoon { border-top: 1px var(--s-grey) solid; } .container { position: relative; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0 2rem; } @media (min-width: 401px) { .container { max-width: 401px; } } @media (min-width: calc(991px)) { .container { width: calc(100% - 4rem); max-width: 991px; } } /* body:after { content: '401 - mobile'; } @media (min-width: 991px) { body:after { content: '991 - tablet'; } } @media (min-width: 1251px) { body:after { content: '1251 - desktop'; } body.mobile:after { content: 'php check: mobile'; } body.tablet:after { content: 'php check: tablet'; } } body.desktop:after { content: 'php check: desktop'; } */ body { position: relative; overflow: auto; } body.side-navigation-active { } * { font-family: 'Bliss ExtraLight', sans-serif; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; } .bliss-r { font-family: 'Bliss', sans-serif; font-weight: normal; } h1, h2, h3, h4, h5, h6, .bliss-xl { } .h1, .h2, .h3, .h4, .h5, .h6, .is-style-iuno-h1, .is-style-iuno-h2, .is-style-iuno-h3, .is-style-iuno-h4, .is-style-iuno-h5, .is-style-iuno-h6, h1, h2, h3, h4, h5, h6 { text-transform: uppercase; } .serif { font-family: serif; font-style: italic; } @media (min-width: 991px) { .narrow, .is-style-iuno-group-narrow { padding-left: 4rem; padding-right: 4rem; } } h1 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 2.5rem; line-height: 1.2; margin: 0 0 0 0; padding: 0 0 1.15rem 0; color: var(--s-grey); text-transform: uppercase; } .h1, .is-style-iuno-h1 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 2.5rem; line-height: 1.2; margin: 0 0 0 0; padding: 0 0 1.15rem 0; color: var(--s-grey); } h2 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.9rem; line-height: 1.3; margin: 0 0 0 0; padding: 0 0 1.15rem 0; color: var(--s-grey); } .h2, .is-style-iuno-h2 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.9rem; line-height: 1.3; margin: 0 0 0 0; padding: 0 0 1.15rem 0; color: var(--s-grey); } h3 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.6rem; line-height: 1.3; margin: 0 0 0 0; padding: 0 0 1.15rem 0; color: var(--s-grey); } .h3, .is-style-iuno-h3 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.6rem; line-height: 1.3; margin: 0 0 0 0; padding: 0 0 1.15rem 0; color: var(--s-grey); } h4 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.3rem; line-height: 1.3; margin: 0 0 0 0; padding: 0 0 1.15rem 0; color: var(--s-grey); } .h4, .is-style-iuno-h4 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.3rem; line-height: 1.3; margin: 0 0 0 0; padding: 0 0 0 0; color: var(--s-grey); } h5 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 1.15rem 0; } .h5, .is-style-iuno-h5 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 1.15rem 0; } h6 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 1.15rem 0; } .h6, .is-style-iuno-h6 { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 1.15rem 0; } .is-style-iuno-pricelist { padding-left: 2rem; padding-right: 2rem; } p { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 1.15rem 0; } pre { font-family: courier, serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 1.15rem 0; } blockquote { font-family: 'Bliss Light', sans-serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 1.15rem 0; } ul { margin: 0 0 0 0; padding: 0 0 1.15rem 0; } li { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0 0; padding: 0 0 0 0; } /* h1 strong { font-size: 40px; font-weight: inherit; color: green; } h2 strong { font-size: 30px; font-weight: inherit; color: green; } h3 strong { font-size: 25px; font-weight: inherit; color: green; } h4 strong { font-size: 20px; font-weight: inherit; color: green; } h5 strong { font-size: 18px; font-weight: inherit; color: green; } h6 strong { font-size: 18px; font-weight: inherit; color: green; } p strong { font-size: 18px; font-weight: inherit; color: green; } li strong { font-size: 18px; font-weight: inherit; color: green; } */ a { color: var(--s-lightblue); text-decoration: none; } a:hover, a:active, a:focus { color: var(--s-lightblue); text-decoration: underline; } .sections a:before { content: '» '; text-decoration: none !important; } .ptop-2 { padding-top: 2rem; } .pbtm-2 { padding-bottom: 2rem; } a[target="_blank"] { color: var(--s-lightblue); } .has-s-text-background-color a { color: var(--s-white) !important; text-decoration: underline; } .m-show, .is-style-iuno-mobile { display: block; } .m-hide, .is-style-iuno-desktop { display: none; } @media (min-width: 991px) { .m-show, .is-style-iuno-mobile { display: none !important; } .m-hide, .is-style-iuno-desktop { display: block !important; } } #side-navigation-show { margin: 2rem 1rem 1rem 1rem; position: absolute; top: 0; left: 0; z-index: +1; box-shadow: 0 0 !important; color: var(--s-grey); } #side-navigation-show span { display: block; font-size: 2rem; line-height: 0.5rem; } #side-navigation-show div { position: absolute; display: none; top: 0.05rem; left: 3.5rem; font-family: 'Bliss ExtraLight', sans-serif; line-height: 2.6rem; font-size: 1rem; text-transform: uppercase; white-space: nowrap; } #side-navigation-hide { margin: 2.8rem 1rem 1rem 1rem; position: absolute; top: 0; right: calc(401px - 5.5rem); z-index: +1; box-shadow: 0 0 !important; color: var(--s-grey); } #side-navigation-hide span { display: block; font-size: 2.5rem; line-height: 0; } #side-navigation-hide span:first-of-type { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #side-navigation-hide span:last-of-type { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -0.6rem; } #side-navigation-hide div { position: absolute; display: none; top: -0.75rem; left: 3rem; font-family: 'Bliss ExtraLight', sans-serif; line-height: 2.6rem; font-size: 1rem; text-transform: uppercase; white-space: nowrap; } @media (min-width: 991px) { #side-navigation-show div { display: block; } #side-navigation-hide div { display: block; } } .screen-overlay { position: fixed; top: 0; left: 0; height: 100%; z-index: 1030; opacity: 0; visibility: hidden; transition: opacity .2s linear, visibility .1s, width 1s ease-in; background-color: var(--s-white); } .screen-overlay.show { width: 100%; opacity: 0.2; visibility: visible; transition: opacity .5s ease, width 0s; } #side-navigation { position: fixed; display: block; width: 100%; min-width: 401px; height: 100%; top: 0; left: 0; z-index: 1200; visibility: hidden; opacity: 0; transform: translateX(-100%); transition: all .2s; overflow-y: auto; overflow-x: hidden; background-color: var(--s-white); border-radius: 0; box-shadow: 0 5px 10px var(--s-shadow); } #side-navigation.show { visibility: visible; opacity: 1; transform: translateX(calc(-100% + 401px)); transition: transform .2s; } @media (min-width: 991px) { #side-navigation.show { transform: translateX(calc(-100% + ((100% - 991px) / 2) + 401px)); } } #sassoon-logo { margin: 2rem 0 1rem 0; display: inline-block; } .svg-sassoon, .svg-salon, .svg-academy { fill: var(--s-grey) } #sassoon-logo svg { height: auto; max-height: 3rem; width: 100%; max-width: 50vw; } @media (min-width: 991px) { #sassoon-logo svg { max-height: 3rem; } } body { padding-top: 6rem; background-color: var(--s-dust); } @media (min-width: 991px) { body { padding-top: 9rem; } } #sticky-header { position: absolute; top: 0; left: 0; background-color: var(--s-white); z-index: 1000; width: 100%; height: 6rem; box-shadow: 0 0 1px var(--s-shadow); } @media (min-width: 991px) { #sticky-header { height: 6rem; position: fixed; } } #sticky-header .row { margin: 0 !important; } #sticky-header .row .col { padding: 0 !important; } #sticky-header nav { margin: 0 !important; padding: 0; height: 2rem; } #sticky-header nav .nav { width: 100%; } #sticky-header nav .nav-link { line-height: 2rem; padding: 0 1rem; } .menu-content { padding: 6rem 0 5rem 0; } @media (min-width: 991px) { .menu-content { padding: 7rem 0 5rem 0; } } .menu-frame { width: 401px; margin: 0 0 0 auto; } .menu-frame a { font-size: 1.15rem; transition: opacity .25s ease-in-out; } .menu-frame a:hover, .menu-frame a:active { opacity: 0.7; } .menu-content ul.menu { padding: 0; list-style: none outside none; border-bottom: 1px var(--s-lightgrey) solid; } .menu-content ul.menu ul { padding: 0; margin: 0 -2rem; border-bottom: 0; } .menu-content ul.menu li { display: block; padding: 0 2rem; } .menu-content ul.menu li:not(:first-of-type), .menu-content ul.menu ul.sub-menu li { border-top: 1px var(--s-lightgrey) solid; } .menu-content ul.menu li.top-distance { padding: 1rem 2rem 0 2rem; } .menu-content ul.menu li.appointment a { font-family: 'Bliss', sans-serif; color: var(--s-lightblue); } .menu-content ul.menu li.appointment a::before { content: ''; position: relative; display: block; width: 2rem; height: 2rem; margin: -0.4rem 0.5rem 0 -0.3rem; float: left; background-image: url('data/appointment.svg'); background-repeat: no-repeat; background-size: 100% auto; } .menu-content ul.menu li a { position: relative; display: block; font-size: 1.2rem; line-height: 1.4rem; padding: 0.5rem 0; margin: 0; font-family: 'Bliss ExtraLight', sans-serif; text-decoration: none; color: var(--s-grey); text-transform: uppercase; } .menu-content ul.menu li a:hover { background-color: var(--s-white); } .menu-content ul.menu ul a:before { content: '» '; text-decoration: none !important; } #desktop-header { margin: 2.4rem 1rem 1rem 1rem; position: absolute; top: 0; right: 0; z-index: +1; width: auto; display: none; } #desktop-header a.appointment { height: 2rem; line-height: 2rem; text-transform: uppercase; font-family: 'Bliss ExtraLight', sans-serif; text-decoration: none; } #desktop-header a.appointment::after { content: ''; position: relative; display: block; width: 2rem; height: 2rem; margin: -0.1rem 0.7rem 0 0.5rem; float: right; background-image: url('data/appointment.svg'); background-repeat: no-repeat; background-size: 100% auto; } @media (min-width: 991px) { #desktop-header { display: block; } } footer { background-color: var(--s-white); padding: 2rem 0; } footer .col-12:first-of-type { text-align: center; } footer .sassoon-logo { width: 50%; display: inline-block; padding: 0 0 2rem 0; } footer ul { list-style: none outside none; padding: 0; margin: 0; } footer ul li { padding: 0; margin: 0; } footer ul li a { color: var(--s-grey); font-size: 1rem; line-height: 2rem; text-transform: uppercase; transition: opacity .25s ease-in-out; text-decoration: none !important; } footer ul li a:hover, footer ul li a:active, footer ul li a:focus { opacity: 0.7; } #copyright { font-size: 0.7rem; line-height: 1rem; padding-top: 1rem; padding-bottom: 1rem; text-transform: uppercase; } #copyright span { display: block; font-style: italic; color: var(--s-grey); text-transform: none; } .mobile #copyright span { padding-bottom: 6rem; } @media (min-width: 991px) { footer .col-12:first-of-type { text-align: left; } footer .sassoon-logo { width: 80%; padding: 0.6rem 0 0 0; } #copyright span { float: right; } } #mobile-footer { position: fixed; display: none; bottom: -7rem; left: 0; width: 100vw; z-index: 100; padding: 1rem 0 2rem 0; background-color: var(--s-white); text-align: center; transition: all .25s ease-in-out; box-shadow: 0 5px 10px var(--s-shadow); } @media all and (orientation:portrait) { .mobile #mobile-footer { display: block; bottom: 0; } } #mobile-footer a { padding: 0 0.75rem; transition: opacity .25s ease-in-out; font-family: 'Bliss', sans-serif; font-size: 1.2rem; line-height: 2rem; color: var(--s-lightblue); display: inline-block; text-transform: uppercase; text-decoration: none; } #mobile-footer a.border-left { border-left: 1px var(--s-grey) solid !important; } #mobile-footer a:hover, #mobile-footer a:active { opacity: 0.7; } .modal-open #mobile-footer { bottom: -7rem; } #mobile-footer a.appointment::before { content: ''; position: relative; display: block; width: 2rem; height: 2rem; margin: -0.1rem 0.5rem 0 -0.3rem; float: left; background-image: url('data/appointment.svg'); background-repeat: no-repeat; background-size: 100% auto; } #mobile-footer a.contact::after { content: ''; position: relative; display: block; width: 2rem; height: 2rem; margin: -0.1rem -0.3rem 0 0.5rem; float: right; background-image: url('data/contact.svg'); background-repeat: no-repeat; background-size: 100% auto; } /* BLOCK COLUMNS / IMAGES */ .wp-block-columns { display: flex; margin: 0 -2rem; flex-wrap: wrap !important; gap: 0 !important; } .wp-block-columns .wp-block-columns { flex-wrap: nowrap !important; } .wp-block-column .wp-block-columns { margin: 0 0; } @media (min-width: 991px) { .wp-block-columns { flex-wrap: nowrap !important; } .wp-block-column .wp-block-columns { margin: 0 -2rem; } .wp-block-column .wp-block-columns.narrow { margin: 0 !important; } .wp-block-column:first-child .wp-block-columns { margin: 0 0 0 -2rem; } .wp-block-column:last-child .wp-block-columns { margin: 0 0 0 -2rem; } } .wp-block-columns.are-vertically-aligned-top { align-items: flex-start; } .wp-block-columns.are-vertically-aligned-center { align-items: center; } .wp-block-columns.are-vertically-aligned-bottom { align-items:flex-end } .wp-block-column { flex-basis: 100%; flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; position: relative; padding: 0 2rem; margin-bottom: 0rem; } .wp-block-column .wp-block-column { flex-basis: 0; flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; position: relative; padding: 0 2rem; margin-bottom: 0rem; } .wp-block-column .wp-block-column[style * =flex-basis] { flex-grow: 0; } .wp-block-column .wp-block-column:not(:first-child) { margin-left: 0.5rem; } .wp-block-column .wp-block-column:not(:last-child) { margin-right: 0.5rem; } .wp-block-column:first-child .is-style-iuno-head-square img { width: 401px; height: 401px; object-fit: cover; object-position: top center; } @media (max-width: 990px) { .wp-block-column { flex-basis: 100% !important; } .wp-block-column .wp-block-column { flex-basis: inherit !important; } .wp-block-column[style * =flex-basis] img { margin: 0 -4rem; width: calc(100% + 8rem); } .wp-block-column .wp-block-column img { margin: 0 -2rem; width: calc(100% + 4rem); } } @media (min-width: 991px) { .wp-block-column { flex-basis: 0; flex-grow: 1; } .wp-block-column[style * =flex-basis] { flex-grow: 0; } .wp-block-column .wp-block-column:first-child img { margin: 0 -2rem 0 0; width: calc(100% + 2rem); } /* .wp-block-column:last-child figure:not(.is-style-iuno-sub-square, .is-style-iuno-medium-square, .is-style-iuno-sub-square-multiple, .is-style-iuno-head-square) img { margin: 0 0 0 -2rem; width: calc(100% + 2rem); }*/ .wp-block-column:first-child .wp-block-column img { margin: 0 -2rem 0 -2rem; width: calc(100% + 4rem); } .wp-block-column:last-child .wp-block-column img { margin: 0 -2rem 0 -2rem; width: calc(100% + 4rem); } .wp-block-column:not(:first-child) { margin-left: 1px; margin-right: 0; } } @media (min-width: 991px) and (max-width: calc(991px + 4rem)) { .wp-block-column:first-child .is-style-iuno-head-square img { width: calc((100vw - 9rem) * 0.4); height: calc((100vw - 9rem) * 0.4); } } @media (min-width: calc(991px + 4rem)) { .wp-block-column:first-child .is-style-iuno-head-square img { width: 364px; height: 364px; } } .wp-block-column.is-vertically-aligned-top { align-self: flex-start; } .wp-block-column.is-vertically-aligned-center { -ms-grid-row-align: center; align-self: center; } .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; } .wp-block-column.is-vertically-aligned-bottom, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-top { width: 100%; } .wp-block-text-columns .wp-block-column { margin: 0; } .wp-block-text-columns .wp-block-column:first-child { margin-left: 0; } .wp-block-text-columns .wp-block-column:last-child { margin-right: 0; } .wp-block-text-columns.columns-2 .wp-block-column { width: calc((100% - 1px) / 2); } .wp-block-text-columns.columns-3 .wp-block-column { width: calc((100% - 2px) / 3); } .wp-block-text-columns.columns-4 .wp-block-column { width: calc((100% - 3px) / 4); } .wp-block-columns.is-style-iuno-mobile-reverse .wp-block-column:first-of-type .wp-block-columns.mobile-reverse .wp-block-column:first-of-type { order: 2; } .wp-block-columns.is-style-iuno-mobile-reverse .wp-block-column:last-of-type .wp-block-columns.mobile-reverse .wp-block-column:last-of-type { order: 1; } .block-border { padding: 0; margin: 2rem -2rem; } @media (min-width: 991px) { .wp-block-columns.is-style-iuno-mobile-reverse .wp-block-column:first-of-type .wp-block-columns.mobile-reverse .wp-block-column:first-of-type { order: 1; } .wp-block-columns.is-style-iuno-mobile-reverse .wp-block-column:last-of-type .wp-block-columns.mobile-reverse .wp-block-column:last-of-type { order: 2; } .block-border::before { content: ''; position: absolute; top: 0; left: -1px; bottom: 0; width: 1px; background-color: #111; height: auto; } .block-border::after { content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; background-color: #111; height: auto; } } .wp-block-column img { width: calc(100% + 4rem); height: auto; margin: 0 -2rem; } .has-s-text-background-color .wp-block-column .is-style-iuno-large-round img { width: 100%; height: auto; margin: 0; } @media (min-width: 991px) { .wp-block-columns.has-background .wp-block-column img { width: 100%; height: auto; margin: 0; } .has-s-text-background-color .wp-block-column .is-style-iuno-large-round img { width: calc(100% + 4rem); height: auto; margin: 0 -2rem; } } .has-text-align-center { text-align:center } .has-text-align-left { text-align:left } .has-text-align-right { text-align:right } .aligncenter { text-align: center; clear: both } .wp-block-image .aligncenter img { margin: 0; } .wp-block-image:not(.is-style-iuno-sub-square, .is-style-iuno-sub-square-multiple, .is-style-iuno-banner) .aligncenter img { width: inherit !important; } /* IUNO BLOCK LOCATIONS */ .iuno-locations { background-color: var(--s-white); margin: 0 -2rem; padding: 2rem 2rem; } .iuno-locations .city-columns { margin: 0 -2px; } .iuno-locations .location-text { padding: 2rem 0 0 0; } .iuno-locations .city { margin: 0; width: 20% !important; overflow: hidden; border-left: 2px var(--s-white) solid; border-right: 2px var(--s-white) solid; padding: 10rem 0 0 0; background-color: var(--s-grey); font-family: 'Bliss ExtraLight', sans-serif; display: block; width: 100%; text-decoration: none; transition: opacity .25s ease-in-out; color: var(--s-white); text-align: center; background-position: top center; background-size: auto 14rem; background-repeat: no-repeat; } .iuno-locations .city span { text-decoration: none; color: var(--s-white); text-transform: uppercase; line-height: 82px; font-size: 1.6rem; text-align: right; background-color: var(--s-grey80); display: block; width: 14rem; height: 74px; padding-right: 1rem; transform: rotate(90deg) translateX(-10rem) translateY(-74px); transform-origin: 0 0; } @media (min-width: 991px) { .iuno-locations .city span { line-height: 4rem; width: 100%; height: 4rem; text-align: center; transform: rotate(0deg) translateX(0) translateY(0); padding-right: 0; } } .iuno-locations .city:hover { text-decoration: none; opacity: 0.7; } .iuno-locations .city::before { display: none; } .iuno-locations .city::after { content: '»'; position: relative; display: block; height: 4rem; width: 4rem; overflow: hidden; font-size: 3rem; line-height: 3.3rem; transform: rotate(90deg); margin: 0 auto; } /* IUNO BLOCK TEASER */ .iuno-teaser { display: block; background-color: var(--s-white); height: 12rem; text-decoration: none !important; text-align: center; margin: 2rem 0; } .iuno-teaser { display: block; background-color: var(--s-white); height: 12rem; text-decoration: none !important; text-align: center; margin: 2rem 0; } .iuno-teaser::before { display: none; } .iuno-teaser .row { margin: 0 !important; } .iuno-teaser .row .col, .iuno-teaser .row .col-auto { padding: 0 !important; } .iuno-teaser .col { height: 12rem; line-height: 12rem; } .iuno-teaser img { height: 15rem; width: auto !important; margin: 0 !important; } .iuno-teaser .text { display: inline-block; vertical-align: middle; margin: 0; padding: 0; text-transform: uppercase; } .iuno-teaser .teaser-link { display: block; font-size: 1.15rem; padding-top: 1rem; } .iuno-teaser .teaser-link::before { content: '» '; } .iuno-teaser .violet * { color: var(--s-violet) !important; } .iuno-teaser .col-auto.styles-left { width: 9rem; overflow: hidden; } .iuno-teaser .col-auto.styles-left img { position: absolute; right: 0; } .iuno-teaser .col-auto.styles-right { width: 3rem; overflow: hidden; } .iuno-teaser .col-auto.styles-right img { position: absolute; left: 0; } .iuno-teaser .col-auto.color-left { width: 5rem; overflow: hidden; } .iuno-teaser .col-auto.color-left img { position: absolute; right: 0; } .iuno-teaser .col-auto.color-right { width: 7rem; overflow: hidden; } .iuno-teaser .col-auto.color-right img { position: absolute; left: 0; } .iuno-teaser .col-auto.men-left { width: 12rem; overflow: hidden; } .iuno-teaser .col-auto.men-left img { position: absolute; left: 0; } .iuno-teaser .col-auto.academy-left { width: 12rem; overflow: hidden; } .iuno-teaser .col-auto.academy-left img { position: absolute; left: 0; } .iuno-teaser .col-auto.dummy-left { width: 12rem; overflow: hidden; } .iuno-teaser .col-auto.dummy-left img { position: absolute; left: 0; } @media (min-width: 991px) { .iuno-teaser { height: 14rem; } .iuno-teaser { height: 14rem; } .iuno-teaser .col { height: 14rem; line-height: 14rem; } .iuno-teaser img { height: 18rem; } .iuno-teaser .col-auto.styles-left { width: 10rem; } .iuno-teaser .col-auto.styles-right { width: 4rem; } .iuno-teaser .col-auto.color-left { width: 5rem; } .iuno-teaser .col-auto.color-right { width: 9rem; } .iuno-teaser .col-auto.men-left { width: 14rem; overflow: hidden; } .iuno-teaser .col-auto.academy-left { width: 14rem; overflow: hidden; } .iuno-teaser .col-auto.dummy-left { width: 14rem; overflow: hidden; } } /* IUNO BLOCK PRICELIST */ .is-style-iuno-group-pricelist { position: relative; display: block; margin-left: -2rem; margin-right: -2rem; width: calc(100% + 4rem;) } .pricelist * { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; } .iuno-block-wider { margin: 0 -2rem; } .pricelist { width: 100%; display: block; } .pricelist::after { content: ''; clear: both; display: block; } .pricelist-column-1 { width: 100%; display: block; float: none; height: auto; min-height: 100px; } .pricelist-column-2 { width: 100%; display: block; float: none; height: auto; min-height: 600px; background-color: white; padding: 2rem 0; margin: 50px 0; } .pricelist-column-3 { width: 100%; display: block; float: none; height: auto; min-height: 100px; } .pricelist .narrow { padding: 0 2rem; } @media (min-width: 991px) { .pricelist-column-1 { width: 50%; float: right; } .pricelist-column-2 { width: 50%; float: left; margin: 0; } .pricelist-column-3 { width: 50%; float: right; } .pricelist .narrow { padding: 0 4rem; } } .pricelist .spacer { width: 100%; height: 3rem; display: block; margin-top: 2rem; border-top: 1px var(--s-grey) solid; font-size: 0; line-height: 0; } .pricelist-column-2 h3, .pricelist-column-2 .h3 { padding-left: 2rem; padding-right: 2rem; } .pricelist-column-1 p { margin: 0; padding: 0 0 1rem 0; } .pricelist-column-2 p { margin: 0; padding: 0 2rem; } .pricelist-column-3 p { margin: 0; padding: 0 0 1rem 0; } .pricelist img { margin: 0 1rem 1rem 1rem; } .pricelist .distance_1 { display: block; height: 1rem; } .pricelist .distance_2 { display: block; height: 2rem; } .pricelist .distance_3 { display: block; height: 3rem; } .pricelist .price-border { border-bottom: 1px var(--s-grey) solid; } .pricelist .price-border[aria-expanded="false"], .pricelist .price-border[aria-expanded="true"] { cursor: pointer; } .pricelist .price-border[aria-expanded="false"]::before { content: '» '; width: 0.8rem; display: inline-block; } .pricelist .price-border[aria-expanded="true"]::before { content: '✕ '; width: 0.8rem; display: inline-block; font-size: 0.8rem; } .pricelist .price { display: block; width: calc(100% - 4rem); margin: 0 2rem; } .pricelist .price .title { display: inline-block; text-align: left; text-transform: uppercase; line-height: 1.2rem; padding: 0.4rem 0; } .pricelist .price .amount { display: inline-block; float: right; line-height: 1.2rem; padding: 0.4rem 0; } .pricelist .text-preview { display: block !important; height: 5rem; overflow: hidden; padding: } .pricelist .text-preview-content { height: auto; display: block; position: relative; } .pricelist .read-more { position: relative; width: 100%; display: block; height: 100px; margin: -50px 0 0 0; text-align: center; text-transform: uppercase; padding: 70px 0 0 0; cursor: pointer; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); } .pricelist .read-more[aria-expanded="false"]::before { content: 'weiterlesen'; position: absolute; top: 70px; left: 0; width: 100%; height: 1rem; margin: 0px auto; text-align: center; } .pricelist .read-more[aria-expanded="false"]::after { content: '»'; position: absolute; top: 45px; left: calc(50% - 20px); width: 40px; height: 1rem; margin: 0px auto; text-align: center; transform: rotate(90deg); line-height: 0.8; } .pricelist-group * { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; } .pricelist-group { width: 100%; display: block; } .pricelist-group::after { content: ''; clear: both; display: block; } .pricelist-group p { margin: 0; padding: 0; } .pricelist-group .price-border { border-bottom: 1px var(--s-grey) solid; } .pricelist-group .price-border[aria-expanded="false"], .pricelist-group .price-border[aria-expanded="true"] { cursor: pointer; } .pricelist-group .price-border[aria-expanded="false"]::before { content: '» '; width: 0.8rem; display: inline-block; } .pricelist-group .price-border[aria-expanded="true"]::before { content: '✕ '; width: 0.8rem; display: inline-block; font-size: 0.8rem; } .pricelist-group .price { display: block; width: 100%; } .pricelist-group .price .title { display: inline-block; text-align: left; text-transform: uppercase; line-height: 1.2rem; padding: 0.4rem 0; max-width: calc(100% - 110px); } .pricelist-group .price .amount { display: inline-block; float: right; line-height: 1.2rem; padding: 0.4rem 0; } .pricelist-range * { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; } .pricelist-range { width: 100%; display: block; } .pricelist-range::after { content: ''; clear: both; display: block; } .pricelist-range p { margin: 0; padding: 0; } .pricelist-range .price-border { border-bottom: 1px var(--s-grey) solid; } .pricelist-range .price { display: block; width: 100%; } .pricelist-range .price .title { display: inline-block; text-align: left; text-transform: uppercase; line-height: 1.2rem; padding: 0.4rem 0; max-width: calc(100% - 110px); } .pricelist-range .price .amount { display: inline-block; float: right; line-height: 1.2rem; padding: 0.4rem 0; } .pricelist-text * { font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; } .pricelist-text { width: 100%; display: block; } .pricelist-text::after { content: ''; clear: both; display: block; } .pricelist-text p { margin: 0; padding: 0; } .pricelist-text .text-preview { display: block !important; height: 5rem; overflow: hidden; padding: } .pricelist-text .text-preview-content { height: auto; display: block; position: relative; } .pricelist-text .read-more { position: relative; width: 100%; display: block; height: 100px; margin: -50px 0 0 0; text-align: center; text-transform: uppercase; padding: 70px 0 0 0; cursor: pointer; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); } .pricelist-text .read-more[aria-expanded="false"]::before { content: 'weiterlesen'; position: absolute; top: 70px; left: 0; width: 100%; height: 1rem; margin: 0px auto; text-align: center; } .pricelist-text .read-more[aria-expanded="false"]::after { content: '»'; position: absolute; top: 45px; left: calc(50% - 20px); width: 40px; height: 1rem; margin: 0px auto; text-align: center; transform: rotate(90deg); line-height: 0.8; } /* IUNO BLOCK EXP TEXT */ .expandable-text .text-preview { display: block !important; height: 20rem; overflow: hidden; padding: } .expandable-text .text-preview-content { height: auto; display: block; position: relative; } .expandable-text .text-preview-content p:last-of-type { padding-bottom: 0; } .expandable-text .read-more { position: relative; width: 100%; display: block; height: 100px; margin: -50px 0 0 0; font-family: 'Bliss ExtraLight', sans-serif; font-size: 1.15rem; line-height: 1.4; text-align: center; text-transform: uppercase; padding: 70px 0 0 0; cursor: pointer; background: var(--s-dust); background: linear-gradient(0deg, var(--s-dust) 50%, rgba(255,255,255,0) 100%); } .expandable-text .read-more[aria-expanded="false"]::before { content: 'weiterlesen'; position: absolute; top: 70px; left: 0; width: 100%; height: 1rem; margin: 0px auto; text-align: center; } .expandable-text .read-more[aria-expanded="false"]::after { content: '»'; position: absolute; top: 45px; left: calc(50% - 20px); width: 40px; height: 1rem; margin: 0px auto; text-align: center; transform: rotate(90deg); line-height: 0.8; } .has-s-white-background-color .expandable-text .read-more { background: var(--s-white); background: linear-gradient(0deg, var(--s-white) 50%, rgba(255,255,255,0) 100%); } .has-s-text-background-color .expandable-text .read-more { background: var(--s-text); background: linear-gradient(0deg, var(--s-text) 50%, rgba(255,255,255,0) 100%); } /* IUNO BLOCK GALLERY */ .gallery ul { list-style: none outside none; margin: 0 1.5rem; padding: 0; position: relative; } .gallery ul::after { content: ''; clear: both; display: block; } .gallery ul li { margin: 0.5rem; padding: 0; position: relative; display: block; } .gallery ul li a { display: block; width: 100%; height: 100%; } .gallery ul li a::before { display: none; } .gallery ul li img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .gallery ul.style_1 li:nth-of-type(1) { float: left; width: calc(401px - 4rem); height: calc(401px - 4rem); } .gallery ul.style_1 li:nth-of-type(2) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_1 li:nth-of-type(3) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_1 li:nth-of-type(4) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_1 li:nth-of-type(5) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_1 li:nth-of-type(6) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_2 li:nth-of-type(1) { float: left; width: calc(401px - 4rem); height: calc(401px - 4rem); } .gallery ul.style_2 li:nth-of-type(2) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(3) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(4) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(5) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(6) { display: none; } .gallery ul.style_3 li:nth-of-type(1) { float: left; width: calc((401px - 3rem) / 3 * 2 - 1rem); height: calc((401px - 3rem) / 3 * 2 - 1rem); } .gallery ul.style_3 li:nth-of-type(2) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_3 li:nth-of-type(3) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_3 li:nth-of-type(4) { float: right; width: calc((401px - 3rem) / 3 * 2 - 1rem); height: calc((401px - 3rem) / 3 * 2 - 1rem); } .gallery ul.style_3 li:nth-of-type(5) { float: right; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_3 li:nth-of-type(6) { float: right; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_4 li:nth-of-type(1) { float: left; width: calc(401px - 4rem); height: calc(401px - 4rem); } .gallery ul.style_4 li:nth-of-type(2) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_4 li:nth-of-type(3) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_4 li:nth-of-type(4) { display: none; } .gallery ul.style_4 li:nth-of-type(5) { display: none; } .gallery ul.style_4 li:nth-of-type(6) { display: none; } .gallery ul.style_5 li:nth-of-type(1) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(2) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(3) { float: left; width: calc(401px - 4rem); height: calc(401px - 4rem); } .gallery ul.style_5 li:nth-of-type(4) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(5) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(6) { display: none; } .gallery ul.style_6 li:nth-of-type(1) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(2) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(3) { float: left; width: calc((401px - 3rem) / 3 - 1rem); height: calc((401px - 3rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(4) { float: left; width: calc(401px - 4rem); height: calc(401px - 4rem); } .gallery ul.style_6 li:nth-of-type(5) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } .gallery ul.style_6 li:nth-of-type(6) { float: left; width: calc((401px - 3rem) / 2 - 1rem); height: calc((401px - 3rem) / 2 - 1rem); } @media (min-width: 991px) and (max-width: calc(991px + 4rem)) { .gallery ul.style_1 li:nth-of-type(1) { float: left; width: calc((100vw - 7rem) / 2 - 1rem); height: calc((100vw - 7rem) / 2 - 1rem); } .gallery ul.style_1 li:nth-of-type(2) { float: left; width: calc((100vw - 7rem) / 4 - 1rem); height: calc((100vw - 7rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(3) { float: left; width: calc((100vw - 7rem) / 4 - 1rem); height: calc((100vw - 7rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(4) { float: left; width: calc((100vw - 7rem) / 4 - 1rem); height: calc((100vw - 7rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(5) { float: left; width: calc((100vw - 7rem) / 4 - 1rem); height: calc((100vw - 7rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(6) { display: none; } .gallery ul.style_2 li:nth-of-type(1) { float: left; width: calc((100vw - 7rem) / 5 * 2 - 1rem); height: calc((100vw - 7rem) / 5 * 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(2) { float: left; width: calc((100vw - 7rem) / 5 * 2 - 1rem); height: calc((100vw - 7rem) / 5 * 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(3) { float: left; width: calc((100vw - 7rem) / 5 - 1rem); height: calc((100vw - 7rem) / 5 - 1rem); } .gallery ul.style_2 li:nth-of-type(4) { float: left; width: calc((100vw - 7rem) / 5 - 1rem); height: calc((100vw - 7rem) / 5 - 1rem); } .gallery ul.style_2 li:nth-of-type(5) { display: none; } .gallery ul.style_2 li:nth-of-type(6) { display: none; } .gallery ul.style_3 li:nth-of-type(1) { float: left; width: calc((100vw - 7rem) / 6 * 2 - 1rem); height: calc((100vw - 7rem) / 6 * 2 - 1rem); } .gallery ul.style_3 li:nth-of-type(2) { float: left; width: calc((100vw - 7rem) / 6 - 1rem); height: calc((100vw - 7rem) / 6 - 1rem); } .gallery ul.style_3 li:nth-of-type(3) { float: left; width: calc((100vw - 7rem) / 6 - 1rem); height: calc((100vw - 7rem) / 6 - 1rem); } .gallery ul.style_3 li:nth-of-type(4) { float: right; width: calc((100vw - 7rem) / 6 * 2 - 1rem); height: calc((100vw - 7rem) / 6 * 2 - 1rem); } .gallery ul.style_3 li:nth-of-type(5) { float: right; width: calc((100vw - 7rem) / 6 - 1rem); height: calc((100vw - 7rem) / 6 - 1rem); } .gallery ul.style_3 li:nth-of-type(6) { float: right; width: calc((100vw - 7rem) / 6 - 1rem); height: calc((100vw - 7rem) / 6 - 1rem); } .gallery ul.style_4 li:nth-of-type(1) { float: left; width: calc((100vw - 7rem) / 3 - 1rem); height: calc((100vw - 7rem) / 3 - 1rem); } .gallery ul.style_4 li:nth-of-type(2) { float: left; width: calc((100vw - 7rem) / 3 - 1rem); height: calc((100vw - 7rem) / 3 - 1rem); } .gallery ul.style_4 li:nth-of-type(3) { float: left; width: calc((100vw - 7rem) / 3 - 1rem); height: calc((100vw - 7rem) / 3 - 1rem); } .gallery ul.style_4 li:nth-of-type(4) { display: none; } .gallery ul.style_4 li:nth-of-type(5) { display: none; } .gallery ul.style_4 li:nth-of-type(6) { display: none; } .gallery ul.style_5 li:nth-of-type(1) { float: left; width: calc((100vw - 7rem) / 5 * 2 - 1rem); height: calc((100vw - 7rem) / 5 * 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(2) { float: right; width: calc((100vw - 7rem) / 5 * 2 - 1rem); height: calc((100vw - 7rem) / 5 * 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(3) { float: right; width: calc((100vw - 7rem) / 5 - 1rem); height: calc((100vw - 7rem) / 5 - 1rem); } .gallery ul.style_5 li:nth-of-type(4) { float: right; width: calc((100vw - 7rem) / 5 - 1rem); height: calc((100vw - 7rem) / 5 - 1rem); } .gallery ul.style_5 li:nth-of-type(5) { display: none; } .gallery ul.style_5 li:nth-of-type(6) { display: none; } .gallery ul.style_6 li:nth-of-type(1) { float: left; width: calc((100vw - 7rem) / 2 - 1rem); height: calc((100vw - 7rem) / 2 - 1rem); } .gallery ul.style_6 li:nth-of-type(2) { float: left; width: calc((100vw - 7rem) / 2 - 1rem); height: calc((100vw - 7rem) / 2 - 1rem); } .gallery ul.style_6 li:nth-of-type(3) { float: left; width: calc((100vw - 7rem) / 3 - 1rem); height: calc((100vw - 7rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(4) { float: left; width: calc((100vw - 7rem) / 3 - 1rem); height: calc((100vw - 7rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(5) { float: left; width: calc((100vw - 7rem) / 3 - 1rem); height: calc((100vw - 7rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(6) { display: none; } } @media (min-width: calc(991px + 4rem)) { .gallery ul.style_1 li:nth-of-type(1) { float: left; width: calc((991px - 3rem) / 2 - 1rem); height: calc((991px - 3rem) / 2 - 1rem); } .gallery ul.style_1 li:nth-of-type(2) { float: left; width: calc((991px - 3rem) / 4 - 1rem); height: calc((991px - 3rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(3) { float: left; width: calc((991px - 3rem) / 4 - 1rem); height: calc((991px - 3rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(4) { float: left; width: calc((991px - 3rem) / 4 - 1rem); height: calc((991px - 3rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(5) { float: left; width: calc((991px - 3rem) / 4 - 1rem); height: calc((991px - 3rem) / 4 - 1rem); } .gallery ul.style_1 li:nth-of-type(6) { display: none; } .gallery ul.style_2 li:nth-of-type(1) { float: left; width: calc((991px - 3rem) / 5 * 2 - 1rem); height: calc((991px - 3rem) / 5 * 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(2) { float: left; width: calc((991px - 3rem) / 5 * 2 - 1rem); height: calc((991px - 3rem) / 5 * 2 - 1rem); } .gallery ul.style_2 li:nth-of-type(3) { float: left; width: calc((991px - 3rem) / 5 - 1rem); height: calc((991px - 3rem) / 5 - 1rem); } .gallery ul.style_2 li:nth-of-type(4) { float: left; width: calc((991px - 3rem) / 5 - 1rem); height: calc((991px - 3rem) / 5 - 1rem); } .gallery ul.style_2 li:nth-of-type(5) { display: none; } .gallery ul.style_2 li:nth-of-type(6) { display: none; } .gallery ul.style_3 li:nth-of-type(1) { float: left; width: calc((991px - 3rem) / 6 * 2 - 1rem); height: calc((991px - 3rem) / 6 * 2 - 1rem); } .gallery ul.style_3 li:nth-of-type(2) { float: left; width: calc((991px - 3rem) / 6 - 1rem); height: calc((991px - 3rem) / 6 - 1rem); } .gallery ul.style_3 li:nth-of-type(3) { float: left; width: calc((991px - 3rem) / 6 - 1rem); height: calc((991px - 3rem) / 6 - 1rem); } .gallery ul.style_3 li:nth-of-type(4) { float: right; width: calc((991px - 3rem) / 6 * 2 - 1rem); height: calc((991px - 3rem) / 6 * 2 - 1rem); } .gallery ul.style_3 li:nth-of-type(5) { float: right; width: calc((991px - 3rem) / 6 - 1rem); height: calc((991px - 3rem) / 6 - 1rem); } .gallery ul.style_3 li:nth-of-type(6) { float: right; width: calc((991px - 3rem) / 6 - 1rem); height: calc((991px - 3rem) / 6 - 1rem); } .gallery ul.style_4 li:nth-of-type(1) { float: left; width: calc((991px - 3rem) / 3 - 1rem); height: calc((991px - 3rem) / 3 - 1rem); } .gallery ul.style_4 li:nth-of-type(2) { float: left; width: calc((991px - 3rem) / 3 - 1rem); height: calc((991px - 3rem) / 3 - 1rem); } .gallery ul.style_4 li:nth-of-type(3) { float: left; width: calc((991px - 3rem) / 3 - 1rem); height: calc((991px - 3rem) / 3 - 1rem); } .gallery ul.style_4 li:nth-of-type(4) { display: none; } .gallery ul.style_4 li:nth-of-type(5) { display: none; } .gallery ul.style_4 li:nth-of-type(6) { display: none; } .gallery ul.style_5 li:nth-of-type(1) { float: left; width: calc((991px - 3rem) / 5 * 2 - 1rem); height: calc((991px - 3rem) / 5 * 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(2) { float: right; width: calc((991px - 3rem) / 5 * 2 - 1rem); height: calc((991px - 3rem) / 5 * 2 - 1rem); } .gallery ul.style_5 li:nth-of-type(3) { float: right; width: calc((991px - 3rem) / 5 - 1rem); height: calc((991px - 3rem) / 5 - 1rem); } .gallery ul.style_5 li:nth-of-type(4) { float: right; width: calc((991px - 3rem) / 5 - 1rem); height: calc((991px - 3rem) / 5 - 1rem); } .gallery ul.style_5 li:nth-of-type(5) { display: none; } .gallery ul.style_5 li:nth-of-type(6) { display: none; } .gallery ul.style_6 li:nth-of-type(1) { float: left; width: calc((991px - 3rem) / 2 - 1rem); height: calc((991px - 3rem) / 2 - 1rem); } .gallery ul.style_6 li:nth-of-type(2) { float: left; width: calc((991px - 3rem) / 2 - 1rem); height: calc((991px - 3rem) / 2 - 1rem); } .gallery ul.style_6 li:nth-of-type(3) { float: left; width: calc((991px - 3rem) / 3 - 1rem); height: calc((991px - 3rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(4) { float: left; width: calc((991px - 3rem) / 3 - 1rem); height: calc((991px - 3rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(5) { float: left; width: calc((991px - 3rem) / 3 - 1rem); height: calc((991px - 3rem) / 3 - 1rem); } .gallery ul.style_6 li:nth-of-type(6) { display: none; } } /* ADRESS */ .has-s-black-background-color { background-color: var(--s-black); } .has-s-white-background-color, .has-white-background-color { background-color: var(--s-white); } .has-s-text-background-color { background-color: var(--s-text); } .has-s-text-background-color * { color: var(--s-white); } .has-s-blue-background-color { background-color: var(--s-blue); } .has-s-violet-background-color { background-color: var(--s-violet); } .has-white-background-color .wp-block-column:first-of-type { padding: 2rem 2rem 0 2rem; } .has-white-background-color .wp-block-column:last-of-type { padding: 0 2rem 2rem 2rem; } @media (min-width: 991px) { .has-white-background-color .wp-block-column, .has-white-background-color .wp-block-column:first-of-type, .has-white-background-color .wp-block-column:last-of-type { padding: 2rem 4rem; } .has-white-background-color .wp-block-column:first-of-type::after { content: ''; height: calc(100% - 4rem); position: absolute; top: 2rem; right: -1px; width: 1px; background-color: var(--s-grey); overflow: hidden; } .has-white-background-color .wp-block-column:last-of-type::before { content: ''; height: calc(100% - 4rem); position: absolute; top: 2rem; left: -1px; width: 1px; background-color: var(--s-grey); overflow: hidden; } .has-s-white-background-color .wp-block-column, .has-s-white-background-color .wp-block-column:first-of-type, .has-s-white-background-color .wp-block-column:last-of-type { padding: 2rem 4rem; } .has-s-white-background-color .wp-block-column:first-of-type::after { content: ''; height: calc(100% - 4rem); position: absolute; top: 2rem; right: -1px; width: 1px; background-color: var(--s-grey); overflow: hidden; } .has-s-white-background-color .wp-block-column:last-of-type::before { content: ''; height: calc(100% - 4rem); position: absolute; top: 2rem; left: -1px; width: 1px; background-color: var(--s-grey); overflow: hidden; } .has-s-text-background-color .wp-block-column, .has-s-text-background-color .wp-block-column:first-of-type, .has-s-text-background-color .wp-block-column:last-of-type { padding: 2rem 4rem; } .has-s-text-background-color .wp-block-column:first-of-type::after { content: ''; height: calc(100% - 4rem); position: absolute; top: 2rem; right: -1px; width: 1px; background-color: var(--s-white); overflow: hidden; } .has-s-text-background-color .wp-block-column:last-of-type::before { content: ''; height: calc(100% - 4rem); position: absolute; top: 2rem; left: -1px; width: 1px; background-color: var(--s-white); overflow: hidden; } } /* single */ /* gallery */ .sassoon-gallery { list-style: none outside none; } .sassoon-gallery::after { content: ''; display: block; clear: both; } .sassoon-gallery li { width: 100%; } .sassoon-gallery li:nth-of-type(2) { display: none; } .sassoon-gallery li img { width: 100%; height: auto; margin: 0.5rem 0; } @media (min-width: 991px) { .sassoon-gallery li { width: 50%; float: left; } .sassoon-gallery li:first-of-type { float: right; top: 0 !important; min-height: 500px; } .sassoon-gallery li:nth-of-type(2) { display: block; height: 500px; } .sassoon-gallery li:nth-child(2n-1) { clear: both; position: relative; top: -250px; } .sassoon-gallery li img { width: calc(100% - 0.5rem); } .sassoon-gallery li:nth-child(2n-1) img { margin: 0.5rem 0.5rem 0.5rem 0; } .sassoon-gallery li:nth-child(2n-0) img { margin: 0.5rem 0 0.5rem 0.5rem; } } .gform-body * { appearance: none; border-width: 0 0 1px 0; border-radius: 0; border-color: var(--s-grey); font-family: 'Bliss', sans-serif; font-weight: normal; } .gform-body input[type=checkbox] { width: 1.5rem; height: 1.5rem; margin: 0 1rem 0 0; float: left; border: 1px solid var(--s-grey); border-radius: 3px; } .gform-body input[type=checkbox]:checked { background-position: center center; background-size: auto 80%; background-image: url('data/check.svg'); background-repeat: no-repeat; } .gform-body select { background-position: right center; background-size: auto 60%; background-image: url('data/angle-down.svg'); background-repeat: no-repeat; } .gform-body .gform_page_footer { padding: 2rem 0 3rem 0 !important; } .gform-body .gform_button, .gform-body .gform_next_button { background-color: var(--s-blue); color: var(--s-white) !important; border: 1px solid var(--s-grey) !important; width: auto; padding: 0.25rem 3rem; float: right; } .gform-body .gform_page_footer::after { content: ''; position: relative; width: 0; height: 0; display: block; clear: both; } .gform-body .gform_previous_button { background-color: var(--s-grey) !important; color: var(--s-white) !important; border: 1px solid var(--s-grey) !important; width: auto; padding: 0.25rem 3rem; float: left; }