
/*
Theme Name: Island Lives
Author: dosgrapas
Author URI: https://www.dosgrapas.com
Version: 1.1.01
Text Domain: island
*/

/*------------------------------------------------  GENERAL ------------------------------------------------*/
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body.menuOpen { overflow: hidden; }

.splide__arrow { height: 40px !important; width: 40px !important; border-radius: 0 !important; background: transparent !important; top: -45px !important; opacity: 1 !important; transition: all ease 0.2s; background-size: contain !important; }
.splide__arrow:hover { opacity: 0.7 !important; }
.splide__arrow svg { display: none; }
.splide__arrow--next { right: 0px !important; background-image: url('images/next-slide.svg') !important; }
.splide__arrow--prev { left: auto !important; right: 52px !important; background-image: url('images/prev-slide.svg') !important; }

.dropdown { overflow: hidden; }
.dropdown .dropdown-toggle_icon { transition: all 0.3s ease; }
.dropdown.open .dropdown-toggle_icon { rotate: 180deg; }
.dropdown .dropdown-content, .people_tags .people_tags-hide { grid-column-gap: 0px; grid-row-gap: 0px;
    grid-template-rows: 0fr; grid-template-columns: 1fr; grid-auto-columns: 1fr; display: grid; overflow: hidden; }
.dropdown .dropdown-content { transition: grid-template-rows 300ms; }
.dropdown .dropdown-content div { overflow: hidden; transition: all 0.2s ease; }
.dropdown.is-grid.open .dropdown-content div { padding-top: 20px; }
.dropdown.open .dropdown-content { grid-template-rows: 1fr; padding-bottom: 15px; }

.w-lightbox-backdrop { background: #000000bd; z-index: 9999; }
.w-lightbox-close { background-size: 24px; }
.w-slider-dot { width: 10px; height: 10px; background-color: #95959566; }
.w-slider-dot.w-active { background-color: #000; }
.other-link:hover .title-5, .text-block a:hover { color: var(--orange) !important; }

.iframe-container { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media (min-width: 768px) {
    .w-lightbox-image { max-width: 90vw; max-height: 90vh; }
}

@media (max-width: 767px){
    .splide__arrow { height: 30px !important; width: 30px !important; top: -38px !important; }
    .splide__arrow--prev { right: 44px !important; }
}

/*------------------------------------------------  HEADER ------------------------------------------------*/

/*------------------------------------------------  FOOTER ------------------------------------------------*/

/*------------------------------------------------ HOME ------------------------------------------------*/
.home_hero-section { background-color: #000; }
.home_hero-image { opacity: 0.85; }
.investigation-grid_element:hover .investigation-grid_element_image { opacity: 1; }
.investigation-grid_element_picto { filter: brightness(50%); }
.paragraph-1 p, .paragraph-1 li { font-size: 18px; font-weight: 400; line-height: 22px; }
.is-white p { color: var(--white); }
.margin-0 p { margin: 0; }
.about_project-container .title-4 p { margin-bottom: 30px; }
.paragraph-1 a { text-decoration: none; font-weight: bold; color: var(--black); }
.paragraph-1 a:hover { color: var(--orange); }
.map-slider-arrow { background-image: url('images/slider-arrow.svg'); }
.map-map_container { overflow: hidden; }
.map-expand-link:hover { transform: scale(1.03); }
.dropdown-content.is-key-concept p { color: #000000b3; margin-bottom: 10px; }
.dropdown-toggle.is-key-concept:hover .dropdown-toggle_title .dropdown-toggle_title_text { color: var(--orange); }
.dropdown.is-key-concept:first-child .dropdown-toggle.is-key-concept { border-top: 0px solid transparent; }
.dropdown.is-key-concept.open .dropdown-toggle_icon.plus { display: none; } 
.dropdown.is-key-concept.open .dropdown-toggle_icon.less { display: inline-block; }

@media screen and (min-width: 1280px){
    .paragraph-1 p, .paragraph-1 li { font-size: 20px; line-height: 25px; }
    .about_project-container .title-4 p { margin-bottom: 35px; }
}

@media screen and (max-width: 991px){ 
    .about_project-container .title-4 p { margin-bottom: 25px; }
}

@media screen and (max-width: 767px){ 
    .paragraph-1 p, .paragraph-1 li { font-size: 16px; line-height: 20px; }
    .about_project-container .title-4 p { margin-bottom: 20px; }
}

/*------------------------------------------------ SINGLE ------------------------------------------------*/
.return-link:hover .return-logo.default { display: none; }
.return-link:hover .return-logo.hover { display: inline-block; }
.blocks h2 { font-family: var(--font-1); font-size: 24px; line-height: 29px; margin-top: 45px; margin-bottom: 28px;}
.blocks h3 { font-family: var(--font-1); color: var(--black); margin-top: 35px; margin-bottom: 20px; font-size: 20px; font-weight: 600; line-height: 28px; }
.blocks h2:first-child, .blocks h3:first-child { margin-top: 0; }
.blocks h2:last-child , .blocks p:last-child, .blocks h3:last-child { margin-bottom: 0 !important; }
.blocks blockquote p { font-family: var(--font-1); color: var(--black); border-left: 5px #e2e2e2; margin-bottom: 0;
    padding: 0; font-size: 22px; font-weight: 700; line-height: 30px; }
.blocks .featured_text_block p { font-weight: bold; }
.title-4 p { font-family: var(--font-1); margin-top: 0; margin-bottom: 15px; font-size: 26px; font-weight: 400; line-height: 32px; }
.paragraph-4 p { font-size: 14px; line-height: 18px; margin-bottom: 0; }
.title-6 p { font-family: var(--font-1); margin-top: 0; margin-bottom: 15px; font-size: 21px; font-weight: 400; line-height: 27px; }

.single_header-left_container .single_title-container { overflow-wrap: break-word; }
.single_content-section .text-block p a { text-decoration: none; font-weight: bold; color: #000; }
.responsible_text-container a { color: var(--black); text-decoration: none; }
.responsible_text-container a:hover { text-decoration: underline; }

.dropdown-toggle.is-other-link .dropdown-icon { filter: grayscale(1) brightness(0); }

@media screen and (min-width: 1280px) {
    .blocks h2 { margin-top: 50px; margin-bottom: 35px; font-size: 26px; line-height: 31px; }
    .blocks h3 { margin-top: 35px; margin-bottom: 20px; font-size: 22px; line-height: 30px; }
    .title-4 p { font-size: 30px; line-height: 36px; }
    .title-6 p { font-size: 24px; line-height: 30px; }
}

@media screen and (max-width: 991px) {
    .blocks h2 { margin-bottom: 25px; font-size: 22px; line-height: 27px; }
    .blocks h3 { font-size: 18px; line-height: 26px; }
    .blocks blockquote p { font-size: 20px; line-height: 28px; }
    .title-4 p { font-size: 24px; line-height: 30px; }
    .title-6 p { font-size: 19px; line-height: 25px; }
}

@media screen and (max-width: 767px) {
    .blocks h2 { font-size: 20px; line-height: 25px; margin-bottom: 20px; }
    .blocks h3 { margin-top: 32px; margin-bottom: 18px; font-size: 16px; line-height: 24px; }
    .blocks blockquote p { font-size: 18px; line-height: 26px; }
    .title-4 p { font-size: 20px; line-height: 26px; margin-bottom: 10px; }
    .title-6 p { font-size: 18px; line-height: 24px; }
}

/*------------------------------------------------ ABOUT ------------------------------------------------*/
.principal_investigator-contact a { color: var(--black); }
.principal_investigator-contact a:hover { text-decoration: none; }
.paragraph-2 p, .paragraph-2 li { margin-bottom: 30px; font-size: 16px; font-weight: 400; line-height: 24px; }
.paragraph-2 a, .team-contact_column a, .team-text_column a { color: var(--black); }
.paragraph-2 a:hover, .team-contact_column a:hover, .team-text_column a:hover { text-decoration: none; }
.team-image_column { padding-bottom: 24%; position: relative; overflow: hidden; }
.team-image_column .team-image { position: absolute; width: 100%; height: 100%; object-fit: cover; }
p.margin-0 { margin: 0 !important; }

@media screen and (min-width: 1280px) {
    .paragraph-2 p, .paragraph-2 li { font-size: 18px; line-height: 26px; }
}

@media screen and (max-width: 991px) {
    .paragraph-2 p, .paragraph-2 li { margin-bottom: 25px; }
    .team-image_column { padding-bottom: 19%; }
}

@media screen and (max-width: 767px) {
    .team-image_column { padding-bottom: 70%; }
}

