I’m growing a web site utilizing this open supply code from CodePen
After spending every week engaged on it I spotted that these Vertical Accordion Slides don’t work Safari iOS (whereas they do work on Chrome iOS).
Surprisingly it does work on desktop Chrome AND Safari.
Can anybody assist me make this suitable with Safari iOS?
I’m glad 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 (when you look on the CodePen website there’s a part of feedback on the prime which isn’t posted beneath):
.T73auXqB6A1R7oKOBA8BDesP {
width: 100%;
peak: 50vh; /* = free var 'peak', 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 {
peak: 100vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 {
peak: 90vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 {
peak: 80vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 {
peak: 70vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 {
peak: 60vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 {
peak: 50vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 {
peak: 40vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 {
peak: 30vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 {
peak: 20vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 {
peak: 10vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 {
peak: 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 after 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);
remodel: translate(0,0);
transition: all 500ms ease; /* want this after 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; /* may want this if '.accordion-text' is absolute! */
width: 100%; /* goes with earlier! */
peak: 50vh; /* = free var 'peak' */
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 when you have absolute positioned baby nodes; additionally want it to
activate scrolling on these nodes! Aspect-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 grow to be un-fixed! */
place: relative;
background-position: left prime; /* free var 'img-position' for background pictures */
background-size: cowl; /* may want this for background pictures */
background-repeat: no-repeat; /* may want this for background pictures */
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 > ul > li > div {
peak: 100vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 > ul > li > div {
peak: 90vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 > ul > li > div {
peak: 80vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 > ul > li > div {
peak: 70vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 > ul > li > div {
peak: 60vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 > ul > li > div {
peak: 50vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div {
peak: 40vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 > ul > li > div {
peak: 30vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 > ul > li > div {
peak: 20vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 > ul > li > div {
peak: 10vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 > ul > li > div {
peak: 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
* --------------------
* Aspect-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 incorporates 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; /* may want this */
z-index: 100;
padding: 0;
peak: 50vh; /* = free var 'peak', that is crucial! */
width: 50vh; /* = free var 'peak', that is crucial! */
margin: 0 0 0 calc(-25vh + 50%); /* = calc(-'peak'/2px + 50%), that is crucial! */
transition: all 500ms ease; /* may 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);
remodel: rotate(-90deg);
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 > ul > li > div > .accordion-text {
peak: 100vh;
width: 100vh;
margin: 0 0 0 calc(-50vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 > ul > li > div > .accordion-text {
peak: 90vh;
width: 90vh;
margin: 0 0 0 calc(-45vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 > ul > li > div > .accordion-text {
peak: 80vh;
width: 80vh;
margin: 0 0 0 calc(-40vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 > ul > li > div > .accordion-text {
peak: 70vh;
width: 70vh;
margin: 0 0 0 calc(-35vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 > ul > li > div > .accordion-text {
peak: 60vh;
width: 60vh;
margin: 0 0 0 calc(-30vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 > ul > li > div > .accordion-text {
peak: 50vh;
width: 50vh;
margin: 0 0 0 calc(-25vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div > .accordion-text {
peak: 40vh;
width: 40vh;
margin: 0 0 0 calc(-20vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div > .accordion-text {
peak: 40vh;
width: 40vh;
margin: 0 0 0 calc(-20vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 > ul > li > div > .accordion-text {
peak: 30vh;
width: 30vh;
margin: 0 0 0 calc(-15vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 > ul > li > div > .accordion-text {
peak: 20vh;
width: 20vh;
margin: 0 0 0 calc(-10vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 > ul > li > div > .accordion-text {
peak: 10vh;
width: 10vh;
margin: 0 0 0 calc(-5vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 > ul > li > div > .accordion-text {
peak: 0;
width: 0;
margin: 0;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-text {
/*place: static;*/
width: 100%;
peak: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
remodel: 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;
coloration: 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; /* may want this to contract background coloration round title */
font-size: 3rem;
coloration: 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;
coloration: 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 at all times present pictures */
width: auto;
peak: 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%;
peak: 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 {
peak: 100%;
object-fit: cowl;
}
/*
* Background pictures
* -----------------
* Modify it in your mission.
*/
/*
.T73auXqB6A1R7oKOBA8BDesP > ul > li:nth-child(1) > div {
background-image: url("https://supply.unsplash.com/consumer/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 develop 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 huge 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;
coloration: #ddd;
cursor: pointer;
transition: all 250ms ease;
remodel: translateY(-50%); /* want this to middle this baby 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 {
coloration: 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 {
remodel: 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 {
remodel: translateY(-100%);
}
/* Reset for low width screens */
/* max width: 600px */
@media display screen and (max-width: 600px) {
/* Primary code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 {
peak: 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%;
peak: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
remodel: 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; /* may want this to contract background coloration round title */
font-size: 3rem;
coloration: 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%;
peak: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li.img-cover > div > .accordion-img {
peak: 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 {
peak: 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%;
peak: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
remodel: 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; /* may want this to contract background coloration round title */
font-size: 3rem;
coloration: 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%;
peak: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li.img-cover > div > .accordion-img {
peak: 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 {
peak: 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%;
peak: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
remodel: 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; /* may want this to contract background coloration round title */
font-size: 3rem;
coloration: 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%;
peak: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li.img-cover > div > .accordion-img {
peak: 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 {
peak: 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%;
peak: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
remodel: 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; /* may want this to contract background coloration round title */
font-size: 3rem;
coloration: 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%;
peak: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li.img-cover > div > .accordion-img {
peak: 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;
}