I’m growing a web site utilizing this open supply code from CodePen
After spending every week engaged on it I noticed that these Vertical Accordion Slides don’t work Safari iOS (whereas they do work on Chrome iOS).
Unusually it does work on desktop Chrome AND Safari.
Can anybody assist me make this suitable with Safari iOS?
I’m completely satisfied to ship a tip for the assistance.
Thanks.
It is required to put up the code when linking to CodePen, so right here you go (in the event you look on the CodePen web site there’s a part of feedback on the prime which isn’t posted beneath):
.T73auXqB6A1R7oKOBA8BDesP {
width: 100%;
top: 50vh; /* = free var 'top', want this to clip empty area on the backside! */
overflow: hidden;
border-radius: 0.5rem;
box-shadow: 5px 3px 3px rgba(0,0,0,0.3),5px -3px 3px rgba(0,0,0,0.3);
/* '5px' comes from free var 'accordion-gutter' */
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 {
top: 100vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 {
top: 90vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 {
top: 80vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 {
top: 70vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 {
top: 60vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 {
top: 50vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 {
top: 40vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 {
top: 30vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 {
top: 20vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 {
top: 10vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 {
top: 0;
}
.T73auXqB6A1R7oKOBA8BDesP > ul {
list-style: none;
width: 32%; /* = 'slides' * 'tab-width' or, go away it mounted! ('.T73auXqB6A1R7oKOBA8BDesP.open' resets it to 100%) */
show: desk;
table-layout: mounted;
margin: 0;
padding: 0;
transition: all 500ms ease; /* want this once we are getting into vertically! */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li {
show: table-cell;
vertical-align: prime;
place: relative;
/* want this to cease speedy opening of all subsequent slides when getting into vertically! */
overflow: hidden;
-ms-transform: translate(0,0); /* want this to use 'place: mounted;' of navigation buttons! */
-webkit-transform: translate(0,0);
rework: translate(0,0);
transition: all 500ms ease; /* want this once we soar from slide to slip! */
background-color: #bfbfbf; /* free var 'accordion-back-color' */
padding: 0 0 0 5px; /* free var 'accordion-gutter' */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div {
show: inline-block; /* would possibly want this if '.accordion-text' is absolute! */
width: 100%; /* goes with earlier! */
top: 50vh; /* = free var 'top' */
overflow: hidden;
border: 2px stable #808080; /* = free var 'border' */
border-radius: 10px; /* = free var 'radius' */
background-color: #666; /* free var 'tab-back-color' */
/* want this if in case you have absolute positioned youngster nodes; additionally want it to
activate scrolling on these nodes! Facet-effect: animation scrollbars in
relation with the 'scroll' class! Do NOT change with 'translate(0,0)' as
the facet impact is in navigation buttons that turn out to be un-fixed! */
place: relative;
background-position: left prime; /* free var 'img-position' for background pictures */
background-size: cowl; /* would possibly want this for background pictures */
background-repeat: no-repeat; /* would possibly want this for background pictures */
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 > ul > li > div {
top: 100vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 > ul > li > div {
top: 90vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 > ul > li > div {
top: 80vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 > ul > li > div {
top: 70vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 > ul > li > div {
top: 60vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 > ul > li > div {
top: 50vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div {
top: 40vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 > ul > li > div {
top: 30vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 > ul > li > div {
top: 20vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 > ul > li > div {
top: 10vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 > ul > li > div {
top: 0;
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > :not([class*="accordion-text"]) {
show: none;
}
.T73auXqB6A1R7oKOBA8BDesP:not([class*="hover"]) > ul > li:hover > div {
background-color: #868686; /* free var 'tab-hover-back-color' */
}
/*
* Hover management class
* -------------------
*/
.T73auXqB6A1R7oKOBA8BDesP.hover > ul:hover {
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul:hover > li {
width: 8%; /* = free var 'tab-width' */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover {
width: 80%; /* = 100 - ('slides' - 1) * 'tab-width' or, go away it mounted! */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: middle;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > :not([class*="accordion-text"]) {
show: block;
}
/*
* Open management class
* ------------------
*/
.T73auXqB6A1R7oKOBA8BDesP.open > ul {
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li {
width: 8%; /* = free var 'tab-width' */
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li.open {
width: 80%; /* = 100 - ('slides' - 1) * 'tab-width' or, go away it mounted! */
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li.open > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: middle;
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li.open > div > :not([class*="accordion-text"]) {
show: block;
}
/*
* Scroll management class
* --------------------
* Facet-effect: animation scrollbars.
* Answer: use js to use inline fashion on animation begin 'overflow: hidden;'
* and on animation finish take away that fashion!
*/
.T73auXqB6A1R7oKOBA8BDesP.hover.scroll > ul > li:hover > div,
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li.scroll:hover > div,
.T73auXqB6A1R7oKOBA8BDesP.scroll > ul > li.open > div,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open.scroll > div {
overflow: auto;
}
/*
* Accordion textual content
* --------------
* It accommodates title utilized in tabs and physique used when slide is displayed.
* Makes use of 'pYLEi1aS9dFRUWLSptPEh7ov' for centering.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-text {
place: absolute; /* would possibly want this */
z-index: 100;
padding: 0;
top: 50vh; /* = free var 'top', that is vital! */
width: 50vh; /* = free var 'top', that is vital! */
margin: 0 0 0 calc(-25vh + 50%); /* = calc(-'top'/2px + 50%), that is vital! */
transition: all 500ms ease; /* would possibly want this for 'accordion-text' animation on slide opening */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
rework: rotate(-90deg);
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 > ul > li > div > .accordion-text {
top: 100vh;
width: 100vh;
margin: 0 0 0 calc(-50vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 > ul > li > div > .accordion-text {
top: 90vh;
width: 90vh;
margin: 0 0 0 calc(-45vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 > ul > li > div > .accordion-text {
top: 80vh;
width: 80vh;
margin: 0 0 0 calc(-40vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 > ul > li > div > .accordion-text {
top: 70vh;
width: 70vh;
margin: 0 0 0 calc(-35vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 > ul > li > div > .accordion-text {
top: 60vh;
width: 60vh;
margin: 0 0 0 calc(-30vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 > ul > li > div > .accordion-text {
top: 50vh;
width: 50vh;
margin: 0 0 0 calc(-25vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div > .accordion-text {
top: 40vh;
width: 40vh;
margin: 0 0 0 calc(-20vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div > .accordion-text {
top: 40vh;
width: 40vh;
margin: 0 0 0 calc(-20vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 > ul > li > div > .accordion-text {
top: 30vh;
width: 30vh;
margin: 0 0 0 calc(-15vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 > ul > li > div > .accordion-text {
top: 20vh;
width: 20vh;
margin: 0 0 0 calc(-10vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 > ul > li > div > .accordion-text {
top: 10vh;
width: 10vh;
margin: 0 0 0 calc(-5vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 > ul > li > div > .accordion-text {
top: 0;
width: 0;
margin: 0;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-text {
/*place: static;*/
width: 100%;
top: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
rework: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.hover.no-open-text > ul > li:hover > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li.no-open-text:hover > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.no-open-text > ul > li.open > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open.no-open-text > div > .accordion-text {
show: none;
}
/*
* Accordion title
* ---------------
* It's used as tab and slide title.
* Makes use of 'pYLEi1aS9dFRUWLSptPEh7ov' for centering.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-text .accordion-title {
font-size: 2.5rem;
shade: black; /* free var 'tab-title-font-color */
text-shadow: 2px 2px rgba(255, 255, 255, .5);
margin: 0;
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-text .accordion-title,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-text .accordion-title {
show: inline-block; /* would possibly want this to contract background shade round title */
font-size: 3rem;
shade: white; /* free var 'title-font-color' */
text-shadow: 2px 2px rgba(0, 0, 0, .5);
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}
/*
* Accordion physique
* --------------
* It's used as textual content in slides.
* Makes use of 'pYLEi1aS9dFRUWLSptPEh7ov' for centering.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-text .accordion-body {
show: none;
shade: white; /* free var 'body-font-color */
text-align: justify;
padding: 0 10px;
margin: 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.4); /* free var 'body-back-color' */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-text .accordion-body,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-text .accordion-body {
show: block;
}
/*
* Accordion pictures
* ----------------
* It's utilized in slides beneath accordion textual content and navigation arrows.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-img {
place: absolute;
z-index: 1;
prime: 0;
left: 0;
show: block; /* want this to all the time present pictures */
width: auto;
top: 100%; /* want this to fill tab vertically dictated by free var 'img-position' */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-img {
width: 100%;
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.hover.img-cover > ul > li:hover > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li.img-cover:hover > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.img-cover > ul > li.open > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open.img-cover > div > .accordion-img {
top: 100%;
object-fit: cowl;
}
/*
* Background pictures
* -----------------
* Modify it in your challenge.
*/
/*
.T73auXqB6A1R7oKOBA8BDesP > ul > li:nth-child(1) > div {
background-image: url("https://supply.unsplash.com/person/alexagorn/JIUjvqe2ZHg/450x200");
}
*/
/*
* Accordion navigation
* --------------------
* It's utilized in slides for navigation.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav {
place: mounted;
z-index: 200;
width: 100%; /* want this to increase absolutely contained in the dad or mum! */
prime: 50%; /* want this to middle the container! */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a {
/* you'll be able to't use one massive navigation space because it blocks scrolling when mouse is
over it! So, we break them to 2 small anchor areas! */
place: absolute;
font-size: 50px;
line-height: 50px;
width: 50px;
text-align: middle;
shade: #ddd;
cursor: pointer;
transition: all 250ms ease;
rework: translateY(-50%); /* want this to middle this youngster within the container! */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a:nth-child(1) {
left: 0px;
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a:nth-child(2) {
proper: 9px; /* = 'accordion-gutter' + 'border' + 2px */
}
/* hover */
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a:not([class*="disabled"]):hover {
shade: white;
}
/* 'fix-nav-scroll-overlap' */
.T73auXqB6A1R7oKOBA8BDesP.fix-nav-scroll-overlap > ul > li > div > .accordion-nav a:nth-child(2) {
proper: 22px; /* = 'accordion-gutter' + 'border' + 2px + 13px for scrollbars */
}
/* 'nav-circle', 'nav-square' */
.T73auXqB6A1R7oKOBA8BDesP.nav-circle > ul > li > div > .accordion-nav a {
border-radius: 50px;
}
.T73auXqB6A1R7oKOBA8BDesP.nav-circle > ul > li > div > .accordion-nav a,
.T73auXqB6A1R7oKOBA8BDesP.nav-square > ul > li > div > .accordion-nav a {
background-color: rgba(0, 0, 0, 0.2); /* free var 'nav-back-color' */
}
.T73auXqB6A1R7oKOBA8BDesP.nav-circle > ul > li > div > .accordion-nav a:not([class*="disabled"]):hover,
.T73auXqB6A1R7oKOBA8BDesP.nav-square > ul > li > div > .accordion-nav a:not([class*="disabled"]):hover {
background-color: rgba(0, 0, 0, 0.4); /* free var 'nav-hover-back-color' */
}
/* 'nav-top' */
.T73auXqB6A1R7oKOBA8BDesP.nav-top > ul > li > div > .accordion-nav {
prime: 0%;
}
.T73auXqB6A1R7oKOBA8BDesP.nav-top > ul > li > div > .accordion-nav a {
rework: translateY(2px); /* = `border` */
}
/* 'nav-bottom' */
.T73auXqB6A1R7oKOBA8BDesP.nav-bottom > ul > li > div > .accordion-nav {
prime: auto;
backside: 9px; /* = 'accordion-gutter' + 'border' + 2px */
}
.T73auXqB6A1R7oKOBA8BDesP.nav-bottom > ul > li > div > .accordion-nav a {
rework: translateY(-100%);
}
/* Reset for low width screens */
/* max width: 600px */
@media display screen and (max-width: 600px) {
/* Primary code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 {
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > :not([class*="accordion-text"]) {
show: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li {
show: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: middle;
}
/* Hover, open management lessons */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.open > ul > li.open {
width: 100%;
}
/* Scroll management class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li.scroll > div {
overflow: auto;
}
/* Accordion textual content */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-text {
/*place: static;*/
width: 100%;
top: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
rework: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li.no-open-text > div > .accordion-text {
show: none;
}
/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-text .accordion-title {
show: inline-block; /* would possibly want this to contract background shade round title */
font-size: 3rem;
shade: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}
/* Accordion physique */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-text .accordion-body {
show: block;
}
/* Accordion pictures */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-img {
width: 100%;
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li.img-cover > div > .accordion-img {
top: 100%;
object-fit: cowl;
}
/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.open > ul > li.open > div > .accordion-nav {
show: none;
}
}
/* max width: 500px */
@media display screen and (max-width: 500px) {
/* Primary code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 {
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > :not([class*="accordion-text"]) {
show: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li {
show: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: middle;
}
/* Hover, open management lessons */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.open > ul > li.open {
width: 100%;
}
/* Scroll management class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li.scroll > div {
overflow: auto;
}
/* Accordion textual content */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-text {
/*place: static;*/
width: 100%;
top: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
rework: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li.no-open-text > div > .accordion-text {
show: none;
}
/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-text .accordion-title {
show: inline-block; /* would possibly want this to contract background shade round title */
font-size: 3rem;
shade: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}
/* Accordion physique */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-text .accordion-body {
show: block;
}
/* Accordion pictures */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-img {
width: 100%;
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li.img-cover > div > .accordion-img {
top: 100%;
object-fit: cowl;
}
/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.open > ul > li.open > div > .accordion-nav {
show: none;
}
}
/* max width: 400px */
@media display screen and (max-width: 400px) {
/* Primary code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 {
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > :not([class*="accordion-text"]) {
show: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li {
show: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: middle;
}
/* Hover, open management lessons */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.open > ul > li.open {
width: 100%;
}
/* Scroll management class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li.scroll > div {
overflow: auto;
}
/* Accordion textual content */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-text {
/*place: static;*/
width: 100%;
top: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
rework: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li.no-open-text > div > .accordion-text {
show: none;
}
/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-text .accordion-title {
show: inline-block; /* would possibly want this to contract background shade round title */
font-size: 3rem;
shade: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}
/* Accordion physique */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-text .accordion-body {
show: block;
}
/* Accordion pictures */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-img {
width: 100%;
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li.img-cover > div > .accordion-img {
top: 100%;
object-fit: cowl;
}
/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.open > ul > li.open > div > .accordion-nav {
show: none;
}
}
/* max width: 300px */
@media display screen and (max-width: 300px) {
/* Primary code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 {
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > :not([class*="accordion-text"]) {
show: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li {
show: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: middle;
}
/* Hover, open management lessons */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.open > ul > li.open {
width: 100%;
}
/* Scroll management class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li.scroll > div {
overflow: auto;
}
/* Accordion textual content */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-text {
/*place: static;*/
width: 100%;
top: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
rework: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li.no-open-text > div > .accordion-text {
show: none;
}
/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-text .accordion-title {
show: inline-block; /* would possibly want this to contract background shade round title */
font-size: 3rem;
shade: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}
/* Accordion physique */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-text .accordion-body {
show: block;
}
/* Accordion pictures */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-img {
width: 100%;
top: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li.img-cover > div > .accordion-img {
top: 100%;
object-fit: cowl;
}
/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.open > ul > li.open > div > .accordion-nav {
show: none;
}
}
/**
* pYLEi1aS9dFRUWLSptPEh7ov
* ========================
* Facilities components horizontally & vertically.
* Ex.:
* ...
* ...
*
*/
.pYLEi1aS9dFRUWLSptPEh7ov {
show: desk;
table-layout: mounted;
width: 100%;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .centered,
.pYLEi1aS9dFRUWLSptPEh7ov > .north,
.pYLEi1aS9dFRUWLSptPEh7ov > .south {
show: table-cell;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .centered {
text-align: middle;
vertical-align: center;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .north {
text-align: middle;
vertical-align: prime;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .south {
text-align: middle;
vertical-align: backside;
}