body {font-family:Gotham} h1,h2 {font-family:Regal;} a.link-button {display:block;width:fit-content;padding:1rem 3rem; border-radius:2rem; text-decoration:none;font-weight:600;color:var(--hexcolor1);background-color:#FFF; transition:.5s background, .5s color, .5s border;} a.link-button:hover {color:#FFF;background-color:var(--hexcolor1);} /*** WEBSITE HEADER > *****************************************************************************************************************************************************************************************************************************************************************/ /* BAR: */ body > header#main {overflow:visible} body > header#main h1 {display:block;width:fit-content;margin:3rem auto; text-align:center;font-size:4rem;color:var(--hexcolor1)} body > header#main h1 small {display:block;margin-top:1rem; text-align:center;font-family:Gotham;font-size:40%;font-weight:400;} body > header#main > nav#menu {background-color:var(--hexcolor1)} body > header#main > nav#menu > ul#menu-main {margin-top:1rem;display:flex;align-items:center;justify-content:space-between;list-style-type:none;color:#FFF} body > header#main > nav#menu > ul#menu-main > li.menu-item-has-children > ul.sub-menu {display:none} body > header#main > nav#menu > ul#menu-main > li.menu-item-has-children:hover > ul.sub-menu {display:block;list-style-type:none;position:absolute;padding:1rem;background:var(--hexcolor1);z-index:1;} body > header#main > nav#menu > ul#menu-main > li.menu-item-has-children:hover > ul.sub-menu > li.menu-item > a {display:block;padding:0.75rem 0.33rem;border-bottom:2px groove #9996;font-size:90%;} body > header#main > nav#menu > ul#menu-main > li.menu-item-has-children:hover > ul.sub-menu > li.menu-item > a:hover {background:#3333;} /* OPTIONS: */ /* ▼ Search: */ /*** < WEBSITE HEADER *****************************************************************************************************************************************************************************************************************************************************************/ /*** WEBSITE FOOTER > *****************************************************************************************************************************************************************************************************************************************************************/ /* ▼ Contact: */ body > footer > #contact {overflow:visible;} body > footer > #contact > #left.panel {width:33%;margin-bottom:10rem;color:var(--hexcolor1)} body > footer > #contact > #left.panel h2 {font-size:3rem;font-weight:900} body > footer > #contact > #left.panel h3 {margin-top:4rem;font-size:2rem;font-weight:400} body > footer > #contact > #left.panel > :is(p,a) {display:block;font-size:1rem;line-height:1.5;margin-top:0.5rem;color:#AAA;} body > footer > #contact > #right.panel {position:absolute;width:92%;aspect-ratio:1/1;top:0;right:calc(6rem - 25vw);padding:15rem 20rem 12rem 12rem;border-radius:50%;border-left:1rem solid #CCC;border-top:1rem solid #CCC;background-color:var(--hexcolor1);color:#FFF;} body > footer > #contact > #right.panel fieldset {width:93%; display:flex;gap:2%;border:none;} body > footer > #contact > #right.panel fieldset :is(input[type="text"],input[type="email"],input[type="tel"]) {width:50%; margin-block:1rem; flex-grow:1;border:1px solid #FFF;border-radius:2rem;background-color:transparent;font-family:Gotham;font-size:1rem;color:#FFF} body > footer > #contact > #right.panel textarea {width:93%;margin-block:1rem; border:1px solid #FFF;border-radius:2rem;background-color:transparent;font-family:'Gotham';font-size:1rem;color:#FFF} body > footer > #contact > #right.panel button {display:block;width:33%;margin:1rem auto; border:1px solid #FFF;border-radius:2rem;background-color:transparent;font-family:Gotham;font-size:1rem;color:#FFF; transition: background 0.5s,border 0.5s,color 0.5s} body > footer > #contact > #right.panel button:hover {border:1px solid var(--hexcolor1);background-color:#FFF;color:var(--hexcolor1);} body > footer > #contact > #right.panel fieldset :is(input[type="text"],input[type="email"],input[type="tel"])::placeholder, body > footer > #contact > #right.panel textarea::placeholder {color:#FFF6;letter-spacing:3px;font-size:0.75rem} body > footer > #contact > #right.panel h3 {word-spacing:100vw;font-family:Regal;font-size:4rem;font-weight:900} body > footer > #contact > #left.panel div.socials {display:flex;gap:5%;margin-block:4rem;} body > footer > #contact > #left.panel div.socials a.icon img {width:4rem} body > footer > #contact > #left.panel div.credits > p {font-weight:700;color:#AAA;margin-bottom:-5rem} /*** < WEBSITE FOOTER *****************************************************************************************************************************************************************************************************************************************************************/ /*** HOME PAGE > **********************************************************************************************************************************************************************************************************************************************************************/ /* CV SECTION: */ /* ▼ Header: */ body.home > main > #banner {position:relative;} body.home > main > #banner picture {height:100vh} body.home > main > #banner picture img {object-fit:cover;object-position:top;} body.home > main > #banner > h2 {position:absolute;top:20%;left:3%; line-height:1.25;font-size:4rem;color:#FFF} /* ▼ Services: */ body.home > main > #services {padding:4rem} body.home > main > #services > h2 {text-align:center;font-size:3rem;color:var(--hexcolor1);font-weight:900} body.home > main > #services > ul {display:flex;gap:5%;align-items:center;justify-content:space-between;margin:3rem;list-style-type:none; /* container-type:inline-size (for implementation when better compatibility) */ text-transform:uppercase;} body.home > main > #services > ul li {position:relative;display:grid;place-items:center;width:15rem;height:15rem;padding:1rem; border-radius:50%; line-height:1.5;text-align:center;font-size:1rem;/* font-size:1.6cqw; (for implementation when better compatibility) */letter-spacing:4px;font-weight:600;} body.home > main > #services > ul li a {line-height:1.5;} /* @media (max-width:1280px) { body.home > main > #services > ul li {font-size:1rem;letter-spacing:2px}} */ body.home > main > #services > ul li:nth-child(even) {background-color:var(--hexcolor1);color:#FFF;border:1px solid transparent;} body.home > main > #services > ul li:nth-child(odd) {background-color:transparent;color:var(--hexcolor1);border:1px solid var(--hexcolor1);} body.home > main > #services > article {padding-inline:3rem; text-align:center;font-size:1rem;color:var(--hexcolor1)} body.home > main > #services > article p {line-height:2;} body.home > main > #services > a.link-button {margin-inline:auto;margin-top:6rem; border:1px solid var(--hexcolor1);background-color:#FFF; font-weight:600;color:var(--hexcolor1);} body.home > main > #services > a.link-button:hover {background-color:var(--hexcolor1);border-color:#FFF;color:#FFF;} /* ▼ Letter: */ body.home > main > #letter {display:flex;align-items:center;height:min(75vw,100vh);background-color:var(--hexcolor1);color:#FFF;} body.home > main > #letter > picture {width:55%;height:100%} body.home > main > #letter > picture img {object-fit:cover;} body.home > main > #letter > header picture > img {object-fit:cover;} body.home > main > #letter > div {width:45%;padding:0 min(8rem,8%); margin-inline:auto;} body.home > main > #letter > div article {color:#FFF;background-color:var(--hexcolor1);} body.home > main > #letter > div article > header {max-width:35rem; display:flex;align-items:center;flex-wrap:wrap;flex-direction:row-reverse;} body.home > main > #letter > div article > header > picture {width:12rem;margin-right:auto; aspect-ratio:1/1;border-radius:50%;border-right:10px solid #FFF;border-top:10px solid #FFF; overflow:hidden; } body.home > main > #letter > div article > header > picture img {object-fit:cover } body.home > main > #letter > div article > header > h3 {width:min-content;margin-block:1rem;flex-grow:1; font-family:Regal;font-size:3rem;} body.home > main > #letter > div article p {clear:left;margin-bottom:1rem; line-height:2;font-size:1rem;} body.home > main > #letter > div article a.link-button {margin-top:4rem; border:1px solid #FFF;background-color:var(--hexcolor1); font-size:0.85rem;font-weight:600;color:#FFF;} body.home > main > #letter > div article a.link-button:hover {border:1px solid var(--hexcolor1);background-color:#FFF; font-weight:600;color:var(--hexcolor1);} /* ▼ News: */ body.home > main > #news {padding-block:6rem} body.home > main > #news > h2 {margin-bottom:4rem;padding-bottom:1rem; border-bottom:1px solid var(--hexcolor1); font-size:3rem;color:var(--hexcolor1);font-weight:900} body.home > main > #news > div {display:flex;justify-content:space-between;} body.home > main > #news > div > article {flex-basis:30%; display:flex;flex-direction:column;align-items:flex-start;} body.home > main > #news > div > article h3 {flex-basis:3em; color:var(--hexcolor1);text-transform:uppercase;font-size:1.25rem;font-weight:500;} body.home > main > #news > div > article p {line-height:2; margin-bottom:0.5rem;color:var(--hexcolor1)} body.home > main > #news > div > article p.review {font-weight:500;color:#000} body.home > main > #news > div > article p.date {margin-top:auto} body.home > main > #news > a.link-button {margin-inline:auto;margin-top:6rem; border:1px solid var(--hexcolor1);background-color:#FFF; font-size:0.85rem;font-weight:600;color:var(--hexcolor1);} body.home > main > #news > a.link-button:hover {background-color:var(--hexcolor1);border-color:#FFF;color:#FFF;} /*** < HOME PAGE **********************************************************************************************************************************************************************************************************************************************************************/ /*** CV > *****************************************************************************************************************************************************************************************************************************************************************************/ body.page-template-cv > main {margin-bottom:6rem;color:var(--hexcolor1)} body.page-template-cv > main > header {padding-block:1rem;margin-block:2rem; background-color:#5C6D7E;} body.page-template-cv > main > header > picture {display:block;width:14rem;aspect-ratio:1/1;margin-inline:auto; border-radius:50%;overflow:hidden} body.page-template-cv > main > header > picture img {object-fit:cover} body.page-template-cv > main > section {overflow:visible} body.page-template-cv > main > section > div {display:flex; align-items:center;} body.page-template-cv > main > section > div > * {flex-basis:calc(50% - 1px);} body.page-template-cv > main > section > div:nth-of-type(odd) > div.parags {order:1} body.page-template-cv > main > section > div:nth-of-type(odd) > picture.icon {order:2} body.page-template-cv > main > section > div:nth-of-type(even) > div.parags {order:2} body.page-template-cv > main > section > div:nth-of-type(even) > picture.icon {order:1} body.page-template-cv > main > section > div > picture.icon {display:grid; justify-content:center} body.page-template-cv > main > section > div > picture.icon img {width:6rem;aspect-ratio:1/1;} body.page-template-cv > main > section > div > div.parags {position:relative;padding:1rem; display:flex;align-items:center;gap:1rem;overflow:visible} @media (max-width:1680px) { body.page-template-cv > main > section > div > div.parags {flex-direction:column;align-items:flex-start;}} body.page-template-cv > main > section > div > div.parags::before {content:'';background-color:#EEE;position:absolute;width:50vw;height:100%;z-index:-1;} body.page-template-cv > main > section > div:nth-of-type(odd) > div.parags::before {top:0;right:0;} body.page-template-cv > main > section > div:nth-of-type(even) > div.parags::before {top:0;left:0;} body.page-template-cv > main > section > div > div.parags h2 {padding-inline:1rem; flex-basis:45%; font-size:3rem;font-weight:500;} @media (max-width:1680px) { body.page-template-cv > main > section > div > div.parags h2 {padding-inline:0; flex-basis:unset;}} body.page-template-cv > main > section > div > div.parags article {flex-basis:calc(55% - 1rem);font-size:0.85rem;} body.page-template-cv > main > section > div > div.parags article p {line-height:1.25} body.page-template-cv > main > section > div > div.parags article p:not(:last-child) {margin-bottom:0.75rem;} /*** < CV *****************************************************************************************************************************************************************************************************************************************************************************/ /*** ARCHIVE ARTICLES *****************************************************************************************************************************************************************************************************************************************************************/ body.archive > main > header h1 {margin-bottom:5rem;padding-block:3rem;border:1px solid;text-align:center;font-size:3rem;color:var(--hexcolor1);font-weight:500;} body.archive > main > #articles > div.container {margin-bottom:10rem;display:flex;flex-wrap:wrap;gap:5rem; align-items:stretch;} body.archive > main > #articles > div.container figure {margin-inline:auto;flex-basis:calc((100% - 5rem) / 2); display:flex;flex-direction:column} body.archive > main > #articles > div.container figure figcaption {flex-grow:1; display:flex;flex-direction:column;} body.archive > main > #articles > div.container figure figcaption h2 {width:100%;padding-block:1rem; display:flex;justify-content:space-between;align-items:center;column-gap:0.5rem; font-size:2rem;font-weight:500;color:var(--hexcolor1)} body.archive > main > #articles > div.container figure figcaption h2::after {content:url('/wp-content/themes/popori2023/assets/svg/icon_post.svg');align-self:flex-start} body.archive > main > #articles > div.container figure figcaption a {display:block;width:100%;padding-block:1rem;margin-top:auto; display:flex;justify-content:space-between;align-items:center;column-gap:0.5rem; border-block:1px solid; font-size:1rem;font-weight:400;color:var(--hexcolor1)} body.archive > main > #articles > div.container figure figcaption a::after {content:url('/wp-content/themes/popori2023/assets/svg/icon_read.svg'); transition:scale 0.5s cubic-bezier(0.3,0.2,0.2,5)} body.archive > main > #articles > div.container figure figcaption a:hover {color:#000} body.archive > main > #articles > div.container figure figcaption a:hover::after {scale:1.33;} /*** < ARCHIVE ARTICLES ***************************************************************************************************************************************************************************************************************************************************************/ /*** SINGLE ARTICLE > *****************************************************************************************************************************************************************************************************************************************************************/ body.single-post > main {color:var(--hexcolor1);margin-bottom:10rem} body.single-post > main > header {position:relative;margin-top:2rem;margin-bottom:4rem;padding:4rem;} body.single-post > main > header::before {content:'';position:absolute;top:8rem;left:50%;translate:-50% 0%;background:#EEE;width:100%;height:100%;z-index:-1;} body.single-post > main > header h1{padding-block:1rem; background:var(--hexcolor1); text-align:center;font-size:3rem;font-weight:500;color:#FFF} body.single-post > main > section {overflow:visible} body.single-post > main > section:not([class*="1column"]) {display:flex;flex-wrap:wrap;gap:5rem;} body.single-post > main > section:not([class*="1column"]) > * {flex-basis:calc(50% - 5.5rem); align-self:center} body.single-post > main > section:not(:first-of-type) {border-top:1px solid var(--hexcolor1);margin-top:4rem;padding-top:5rem;} body.single-post > main > section > article {font-size:0.85rem;} body.single-post > main > section > article h2 {margin-top:2rem;margin-bottom:1rem; font-size:2.5rem;font-weight:500;} body.single-post > main > section > article h2:first-child {margin-top:0;} body.single-post > main > section > article h3 {margin-top:0.5rem;font-size:1.5rem;font-weight:500;} body.single-post > main > section > article h3:first-of-type {margin-top:0;} body.single-post > main > section > article p {margin-bottom:0.75rem; line-height:1.5} body.single-post > main > section > article p:last-of-type {margin-bottom:0;} body.single-post > main > section > article ul {padding-left:2rem;margin-bottom:1.25rem} body.single-post > main > section > article ul:last-of-type {margin-bottom:0rem} body.single-post > main > section > article ul li {margin-bottom:.5rem; line-height:1.5} body.single-post > main > section > article ul li:last-of-type {margin-bottom:0rem;} body.single-post > main > section[class*="title"] > * {align-self:flex-start;} body.single-post > main > :is(section[class*="title"],section[class*="boldpanel"]) > h2 {position:relative;font-size:2rem;font-weight:500; -webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;} body.single-post > main > section.text-left-photos-right > article {order:1;} body.single-post > main > section.text-left-photos-right > picture {order:2;} body.single-post > main > section.text-left-photos-right > picture > img {left:-2rem;} body.single-post > main > section.text-right-photos-left > picture {order:1;} body.single-post > main > section.text-right-photos-left > article {order:2;} body.single-post > main > section.text-right-photos-left > picture > img {left:2rem;} body.single-post > main > :is(section.title-left-text-right,section.boldpanel-2columns) > h2 {order:1;} body.single-post > main > :is(section.title-left-text-right,section.boldpanel-2columns) > article {order:2;} body.single-post > main > section.boldpanel-1column > * {align-self:center;text-align:center} body.single-post > main > section.boldpanel-1column > article {margin-top:2rem} body.single-post > main > section.boldpanel-1column > article :is(ul,ol) {padding-inline:31%;display:inline-block;width:fit-content; text-align:left} body.single-post > main > section.boldpanel-1column > article p {padding-inline:31%;} body.single-post > main > section[class*="boldpanel"] {padding-block:4rem;color:#FFF;} body.single-post > main > section[class*="boldpanel"]::before {content:''; position:absolute;z-index:-1; left:50%;top:50%;translate:-50% -50%; height:calc(100% + 2px);width:100vw; background:var(--hexcolor1);} body.single-post > main > section[class*="boldpanel"] + section {margin-top:0} body.single-post > main > section.divider {padding:0;border:none;} body.single-post > main > section.divider::before {content:'';position:absolute;height:1px;width:100%;top:50%;left:50%;translate:-50% -50%;background:#000;} body.single-post > main > section.divider > article {position:relative;display:block;width:fit-content;padding-inline:2rem;background-color:#FFF;margin-inline:auto;text-align:center;} body.single-post > main > section.title-right-text-left > h2 {order:2;} body.single-post > main > section.title-right-text-left > article {order:1;} body.single-post > main > section > picture {align-self:center; background-color:#CCC; overflow:visible} body.single-post > main > section > picture > hr {border:none;background:#FFF;height:2rem} body.single-post > main > section > picture > img {margin-block:2rem; object-fit:cover} /*** < SINGLE ARTICLE *****************************************************************************************************************************************************************************************************************************************************************/ /*** ARCHIVE NEWSPOSTS > **************************************************************************************************************************************************************************************************************************************************************/ body.archive > main > header h1 {margin-bottom:5rem;padding-block:3rem;border:1px solid;text-align:center;font-size:3rem;color:var(--hexcolor1);font-weight:500;} body.archive > main > header .seminars-container {margin-bottom: 10rem; display: flex ; gap: 5rem; align-items: stretch;} body.archive > main > header .seminars-container > .seminar {margin-inline: auto; flex-basis: calc((100% - 5rem) / 2);} body.archive > main > #news > div.container {margin-bottom:10rem;display:flex;flex-wrap:wrap;gap:5rem; align-items:stretch;} body.archive > main > #news > div.container figure {margin-inline:auto;flex-basis:calc((100% - 5rem) / 2); display:flex;flex-direction:column} body.archive > main > #news > div.container figure figcaption {flex-grow:1; display:flex;flex-direction:column;} body.archive > main > #news > div.container figure figcaption h2 {width:100%;padding-block:1rem; display:flex;justify-content:space-between;align-items:center;column-gap:0.5rem; font-size:2rem;font-weight:500;color:var(--hexcolor1)} body.archive > main > #news > div.container figure figcaption h2::after {content:url('/wp-content/themes/popori2023/assets/svg/icon_post.svg');align-self:flex-start} body.archive > main > #news > div.container figure figcaption a {display:block;width:100%;padding-block:1rem;margin-top:auto; display:flex;justify-content:space-between;align-items:center;column-gap:0.5rem; border-block:1px solid; font-size:1rem;font-weight:400;color:var(--hexcolor1)} body.archive > main > #news > div.container figure figcaption a::after {content:url('/wp-content/themes/popori2023/assets/svg/icon_read.svg'); transition:scale 0.5s cubic-bezier(0.3,0.2,0.2,5)} body.archive > main > #news > div.container figure figcaption a:hover {color:#000} body.archive > main > #news > div.container figure figcaption a:hover::after {scale:1.33;} /*** < ARCHIVE NEWSPOSTS **************************************************************************************************************************************************************************************************************************************************************/ /*** SINGLE NEWSPOST > ****************************************************************************************************************************************************************************************************************************************************************/ body.single-newspost > main {color:var(--hexcolor1);margin-bottom:10rem} body.single-newspost > main > header {position:relative;margin-top:2rem;margin-bottom:4rem;padding:4rem;} body.single-newspost > main > header::before {content:'';position:absolute;top:8rem;left:50%;translate:-50% 0%;background:#EEE;width:100%;height:100%;z-index:-1;} body.single-newspost > main > header h1{padding-block:1rem; background:var(--hexcolor1); text-align:center;font-size:3rem;font-weight:500;color:#FFF} body.single-newspost > main > article {font-size:0.85rem;} body.single-newspost > main > article h2 {margin-top:2rem;margin-bottom:1rem; font-size:2.5rem;font-weight:500;} body.single-newspost > main > article h2:first-child {margin-top:0;} body.single-newspost > main > article h3 {margin-top:0.5rem;font-size:1.5rem;font-weight:500;} body.single-newspost > main > article h3:first-of-type {margin-top:0;} body.single-newspost > main > article p {margin-bottom:0.75rem; line-height:1.5} body.single-newspost > main > article p:last-of-type {margin-bottom:0;} body.single-newspost > main > article ul {padding-left:2rem;margin-bottom:1.25rem} body.single-newspost > main > article ul:last-of-type {margin-bottom:0rem} body.single-newspost > main > article ul li {margin-bottom:.5rem; line-height:1.5} body.single-newspost > main > article ul li:last-of-type {margin-bottom:0rem;} /*** < SINGLE NEWSPOST *****************************************************************************************************************************************************************************************************************************************************************/ /*** SINGLE SERVICE > *****************************************************************************************************************************************************************************************************************************************************************/ body.single-service > main {margin-bottom:10rem;padding-inline:2rem; color:var(--hexcolor1);} body.single-service > main > header {padding-block:3rem;margin-bottom:3rem; border-bottom:1px solid; text-align:center;font-family:Regal;font-weight:500;font-size:2rem;color:var(--hexcolor1);} body.single-service > main > header h1 small {display:block; line-height:1;font-weight:300;font-size:65%;opacity:0.75} body.single-service > main > section {padding:0;overflow:visible} body.single-service > main > section:not([class*="1column"]) {display:flex;flex-wrap:wrap;gap:5rem;} body.single-service > main > section:not([class*="1column"]) > * {flex-basis:calc(50% - 5.5rem); align-self:center} body.single-service > main > section:not(:first-of-type) {border-top:1px solid var(--hexcolor1);margin-top:4rem;padding-top:5rem;} body.single-service > main > section > article {font-size:0.85rem;} body.single-service > main > section > article h2 {margin-bottom:1rem; font-size:2.5rem;font-weight:500;} body.single-service > main > section > article h2:not(:first-child) {margin-top:2rem;} body.single-service > main > section > article h3 {margin-bottom:0.5rem;font-size:1.5rem;font-weight:500;} body.single-service > main > section > article p {margin-bottom:0.75rem;line-height:1.5} body.single-service > main > section > article :is(ul,ol) {padding-left:2rem;margin-bottom:1.25rem} body.single-service > main > section > article :is(ul,ol) li {margin-bottom:.5rem; line-height:1.5} body.single-service > main > section > article :last-child {margin-bottom:0; padding-bottom:0} body.single-service > main > section[class*="title"] > * {align-self:flex-start;} body.single-service > main > :is(section[class*="title"],section[class*="boldpanel"]) > h2 {position:relative;font-size:2rem;font-weight:500; -webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;} body.single-service > main > section.text-left-photos-right > article {order:1;} body.single-service > main > section.text-left-photos-right > picture {order:2;} body.single-service > main > section.text-left-photos-right > picture > img {left:-2rem;} body.single-service > main > section.text-right-photos-left > picture {order:1;} body.single-service > main > section.text-right-photos-left > article {order:2;} body.single-service > main > section.text-right-photos-left > picture > img {left:2rem;} body.single-service > main > section[class*="title"] > h2::before {content:'';position:absolute;display:block;left:0;top:50%;translate:-50% -50%;height:150%;min-height:10rem;aspect-ratio:1/1;border-radius:50%;background:#0001;z-index:-1;} body.single-service > main > :is(section.title-left-text-right,section.boldpanel-2columns) > h2 {order:1;} body.single-service > main > :is(section.title-left-text-right,section.boldpanel-2columns) > article {order:2;} body.single-service > main > section.boldpanel-1column > * {align-self:center;text-align:center} body.single-service > main > section.boldpanel-1column > article {margin-top:2rem} body.single-service > main > section.boldpanel-1column > article :is(ul,ol) {padding-inline:31%;display:inline-block;width:fit-content; text-align:left} body.single-service > main > section.boldpanel-1column > article p {padding-inline:31%;} body.single-service > main > section[class*="boldpanel"] {padding-block:3rem;color:#FFF;} body.single-service > main > section[class*="boldpanel"] + section {margin-top:0;} body.single-service > main > section[class*="boldpanel"]::before {content:''; position:absolute;z-index:-1; left:50%;top:50%;translate:-50% -50%; height:calc(100% + 2px);width:100vw; background:var(--hexcolor1);} body.single-service > main > section[class*="boldpanel"] + section {margin-top:0 auto} body.single-service > main > section.divider {padding:0;border:none;color:var(--hexcolor1)} body.single-service > main > section.divider::before {content:'';position:absolute;height:1px;width:100%;top:50%;left:50%;translate:-50% -50%;background:var(--hexcolor1);} body.single-service > main > section.divider > article {position:relative;display:block;width:fit-content;padding-inline:2rem;background-color:#FFF;margin-inline:auto;text-align:center;} body.single-service > main > section.title-right-text-left > h2 {order:2;} body.single-service > main > section.title-right-text-left > article {order:1;} body.single-service > main > section > picture {align-self:center; background-color:#CCC; overflow:visible} body.single-service > main > section > picture > hr {border:none;background:#FFF;height:2rem} body.single-service > main > section > picture > img {margin-block:2rem; object-fit:cover} /*** < SINGLE SERVICE *****************************************************************************************************************************************************************************************************************************************************************/ /*** ARCHIVE TESTIMONIALS > ***********************************************************************************************************************************************************************************************************************************************************/ body.post-type-archive-testimonial > main > header h1 {margin-bottom:6rem;padding-block:3rem;border:1px solid;text-align:center;font-size:3rem;color:var(--hexcolor1);font-weight:500;} body.post-type-archive-testimonial > main > #testimonials {margin-left:2rem;overflow:visible;} body.post-type-archive-testimonial > main > #testimonials > div.container {margin-bottom:10rem;display:flex;flex-wrap:wrap;gap:10rem; align-items:stretch;} body.post-type-archive-testimonial > main > #testimonials > div.container > #pagination {min-width:25%;margin:4rem auto;display:flex;justify-content:space-between;align-items:center;column-gap:3rem;} body.post-type-archive-testimonial > main > #testimonials > div.container > #pagination span.current {font-weight:600;} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote {position:relative;padding-block:1rem; flex-basis:calc(50% - 5rem); display:flex;flex-direction:column; border-block:1px solid #0003} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote::before {content:'“';position:absolute;z-index:-1;width:25%;top:-5rem;left:-3rem;opacity:0.05;font-size:10rem;font-weight:900;aspect-ratio:1/1;} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote article {text-align:justify;font-size:0.85rem;font-style:italic;font-weight:400;color:var(--hexcolor1);} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote article p {line-height:1.5;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote article p:not(:last-child) {margin-bottom:0.5rem;} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote footer {margin-top:auto; text-align:right;font-size:0.85rem;font-weight:400;color:var(--hexcolor1)} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote footer cite {display:block;margin-inline:auto;text-align:center;width:fit-content} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote footer cite picture {margin-inline:auto;width:2rem;aspect-ratio:0.6/1; opacity:0.5;} body.post-type-archive-testimonial > main > #testimonials > div.container > blockquote footer cite picture img {object-fit:cover;} /*** < ARCHIVE TESTIMONIALS ***********************************************************************************************************************************************************************************************************************************************************/ /*** PANELS BLOCKS > ******************************************************************************************************************************************************************************************************************************************************************/ body.page-template-panels > main {color:var(--hexcolor1);margin-bottom:10rem} body.page-template-panels > main > header {padding-block:3rem;margin-bottom:3rem; border-bottom:1px solid; text-align:center;font-family:Regal;font-weight:500;font-size:2rem;color:var(--hexcolor1);} body.page-template-panels > main > header h1 small {display:block; line-height:1;font-weight:300;font-size:65%;opacity:0.75} body.page-template-panels > main > section {padding:0;overflow:visible} body.page-template-panels > main > section:not([class*="1column"]) {display:flex;flex-wrap:wrap;gap:5rem;} body.page-template-panels > main > section:not([class*="1column"]) > * {flex-basis:calc(50% - 5.5rem); align-self:center} body.page-template-panels > main > section:not(:first-of-type) {border-top:1px solid var(--hexcolor1);margin-top:4rem;padding-top:5rem;} body.page-template-panels > main > section > article {font-size:0.85rem;} body.page-template-panels > main > section > article h2 {margin-bottom:1rem; font-size:2rem;font-weight:500;} body.page-template-panels > main > section > article h2:not(:first-child) {margin-top:2rem;} body.page-template-panels > main > section > article h3 {margin-bottom:0.5rem;font-size:1.5rem;font-weight:500;} body.page-template-panels > main > section > article p {margin-bottom:0.75rem;line-height:1.5} body.page-template-panels > main > section > article :is(ul,ol) {padding-left:2rem;margin-bottom:1.25rem} body.page-template-panels > main > section > article :is(ul,ol) li {margin-bottom:.5rem; line-height:1.5} body.page-template-panels > main > section > article :last-child {margin-bottom:0; padding-bottom:0} body.page-template-panels > main > section[class*="title"] > * {align-self:flex-start;} body.page-template-panels > main > :is(section[class*="title"],section[class*="boldpanel"]) > h2 {position:relative;font-size:2rem;font-weight:500; -webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;} body.page-template-panels > main > section.text-left-photos-right > article {order:1;} body.page-template-panels > main > section.text-left-photos-right > picture {order:2;} body.page-template-panels > main > section.text-left-photos-right > picture > img {left:-2rem;} body.page-template-panels > main > section.text-right-photos-left > picture {order:1;} body.page-template-panels > main > section.text-right-photos-left > article {order:2;} body.page-template-panels > main > section.text-right-photos-left > picture > img {left:2rem;} body.page-template-panels > main > section[class*="title"] > h2::before {content:'';position:absolute;display:block;left:0;top:50%;translate:-50% -50%;height:150%;min-height:10rem;aspect-ratio:1/1;border-radius:50%;background:#0001;z-index:-1;} body.page-template-panels > main > :is(section.title-left-text-right,section.boldpanel-2columns) > h2 {order:1;} body.page-template-panels > main > :is(section.title-left-text-right,section.boldpanel-2columns) > article {order:2;} body.page-template-panels > main > section.boldpanel-1column > * {align-self:center;text-align:center} body.page-template-panels > main > section.boldpanel-1column > article {margin-top:2rem} body.page-template-panels > main > section.boldpanel-1column > article :is(ul,ol) {padding-inline:31%;display:inline-block;width:fit-content; text-align:left} body.page-template-panels > main > section.boldpanel-1column > article p {padding-inline:31%;} body.page-template-panels > main > section[class*="boldpanel"] {padding-block:3rem;color:#FFF;} body.page-template-panels > main > section[class*="boldpanel"] + section {margin-top:0;} body.page-template-panels > main > section[class*="boldpanel"]::before {content:''; position:absolute;z-index:-1; left:50%;top:50%;translate:-50% -50%; height:calc(100% + 2px);width:100vw; background:var(--hexcolor1);} body.page-template-panels > main > section[class*="boldpanel"] + section {margin-top:0 auto} body.page-template-panels > main > section.divider {padding:0;border:none;color:var(--hexcolor1)} body.page-template-panels > main > section.divider::before {content:'';position:absolute;height:1px;width:100%;top:50%;left:50%;translate:-50% -50%;background:var(--hexcolor1);} body.page-template-panels > main > section.divider > article {position:relative;display:block;width:fit-content;padding-inline:2rem;background-color:#FFF;margin-inline:auto;text-align:center;} body.page-template-panels > main > section.title-right-text-left > h2 {order:2;} body.page-template-panels > main > section.title-right-text-left > article {order:1;} body.page-template-panels > main > section > picture {align-self:center; background-color:#CCC; overflow:visible} body.page-template-panels > main > section > picture > hr {border:none;background:#FFF;height:2rem} body.page-template-panels > main > section > picture > img {margin-block:2rem; object-fit:cover} /*** < PANELS BLOCKS ******************************************************************************************************************************************************************************************************************************************************************/ /*** PLAIN PAGE > *********************************************************************************************************************************************************************************************************************************************************************/ body.page-template-plain > main {min-height:75vh} body.page-template-plain > main > header h1 {margin-bottom:5rem;padding-block:3rem;border-bottom:1px solid;text-align:center;font-size:3rem;color:var(--hexcolor1);font-weight:500;} /*** < PLAIN PAGE *********************************************************************************************************************************************************************************************************************************************************************/ /*** CONTACT PAGE > *********************************************************************************************************************************************************************************************************************************************************************/ body.page-id-476 fieldset {width:93%; display:flex;gap:2%;border:none;} body.page-id-476 fieldset :is(input[type="text"],input[type="email"],input[type="tel"]) {width:50%; margin-block:1rem; flex-grow:1;border:1px solid #5c6d7e;border-radius:2rem;background-color:transparent;font-family:Gotham;font-size:1rem;color:#5c6d7e} body.page-id-476 textarea {width:93%;margin-block:1rem; border:1px solid #5c6d7e;border-radius:2rem;background-color:transparent;font-family:'Gotham';font-size:1rem;color:#5c6d7e} body.page-id-476 button {display:block;width:33%;margin:1rem auto; border:1px solid #5c6d7e;border-radius:2rem;background-color:transparent;font-family:Gotham;font-size:1rem;color:#5c6d7e; transition: background 0.5s,border 0.5s,color 0.5s} body.page-id-476 button:hover {border:1px solid var(--hexcolor1);background-color:#5c6d7e;color:var(--hexcolor1);} body.page-id-476 fieldset :is(input[type="text"],input[type="email"],input[type="tel"])::placeholder, body.page-id-476 textarea::placeholder {color:#5c6d7e6;letter-spacing:3px;font-size:0.75rem} body.page-id-476 h3 {word-spacing:100vw;font-family:Regal;font-size:4rem;font-weight:900} /*** < CONTACT PAGE *********************************************************************************************************************************************************************************************************************************************************************/