/*
 Theme Name:   Travel Unity
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress Child Theme
 Author:       Ira Kriskovic
 Author URI:   
 Template:     generatepress
 Version:      0.1
*/

/* Table of Contents
- Resets
	- Baseline Normalize
	- Box Sizing
	- Float Clearing
- General Styles
	- Typography
	- Headings
	- Objects
	- Gallery
	- Forms
	- Tables
	- Screen Reader Text
- Structure and Layout
	- Site Container
	- Site Inner
- Common Classes
	- Avatar
	- Genesis
	- Search Form
	- Titles
	- WordPress
- Widgets
	- Featured Content
- Plugins
	- Genesis eNews Extended
	- Genesis Simple FAQ
	- WPForms
- Skip Links
- Site Header
	- Title Area
- Site Navigation
	- Responsive Menu
	- Header Menu
	- Footer Menu
- Content Area
	- Entry Content
	- Entry Meta
	- Pagination
	- Entry Comments
- Sidebar
- Footer Widgets
- Site Footer
- Media Queries
	- Min-width: 960px
		- Site Header
		- Genesis Menu
		- Responsive Menu
		- Header Menu
		- Site Inner
		- Content
		- Sidebar
		- Author Box
		- After Entry
		- Column Classes
		- Entry Misc.
		- Footer Widgets
- Print Styles
*/


/*_________________________________________________________________

             HTML5 Reset
____________________________________________________________________  */

/***** normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *****/
/* stylelint-disable */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}ol,ul {margin:0}

/* stylelint-enable */

/***** Box Sizing and Smoothing *****/

html {
	box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

*,*::before,*::after {
	box-sizing: inherit;
}

/***** Float Clearing *****/

.author-box::before,.clearfix::before,.entry::before,.entry-content::before,.footer-widgets::before,.nav-primary::before,.nav-secondary::before,.pagination::before,.site-container::before,.site-footer::before,.site-header::before,.site-inner::before,.widget::before,.wrap::before {
	content: " ";
	display: table;
}
.author-box::after,.clearfix::after,.entry::after,.entry-content::after,.footer-widgets::after,.nav-primary::after,.nav-secondary::after,.pagination::after,
.site-container::after,.site-footer::after,.site-header::after,.site-inner::after,.widget::after,.wrap::after {
	clear: both;
	content: " ";
	display: table;
}



/*_________________________________________________________________

             TRAVEL UNITY - BASE
____________________________________________________________________  */


/*      VARIABLES 
________________________________________*/
:root {
    --white: #ffffff;
    --light-yellow: #FFF9D5;
    --yellow: #ffe236;
    --dark-yellow: #937100;
    --light-grey: #F5F5F5;
    --black: #000000;
}

/*      CLASSES
________________________________________*/
.yellow-text-shadow {
    text-shadow: 2px 2px var(--yellow);
}
ul.list-type-disc {
    padding-left: 20px;

    li {
     list-style-type: disc;
    }
}

.mar-top-30 {
    margin-top: 30px;
}
.mar-top-50 {
    margin-top: 50px;
}
.mar-bott-30 {
    margin-bottom: 30px;
}
.mar-bott-50 {
    margin-bottom: 50px;
}


/*_________________________________________________________________

             TYPOGRAPHY
____________________________________________________________________  */

body {
    margin: 0;
    font-family: "Comfortaa", sans-serif; 
    font-size: 16px;
}
h2 {
    margin-top: 120px;

        @media only screen and (max-width: 1024px) {
            margin-top: 100px;
        } 
        
    @media only screen and (max-width: 767px) {
            margin-top: 70px;
        } 
}
/* p {
    margin: 0;
} */
img {
    border-style: none;
    border-radius: 20px;
  }
li {
	list-style-type: none;
}
li a,
.gb-button {
    text-decoration: none;
    cursor: pointer;
}
a {
    text-decoration: none;
}
p a {
    text-decoration: underline;
}
.subtitle {
    font-size: 24px;
}
.large-text {
    font-size: 18px;
}
.large-button {
    font-size: 20px;
    font-weight: 500;
    border-radius: 20px;
}
.centered-text {
    text-align: center;
}
blockquote {
    max-width: 80%;
    margin: 0 auto;
    border: none;
    z-index: 100;
}
blockquote p {
    font-size: 29px;
    text-align: center;
}
blockquote::before,
blockquote::after {
    content:url('../../uploads/2024/07/quote.jpg');
    position: absolute;
    z-index: -1;
}
blockquote::before {
    left: -13%;
    top: -15px;
}
blockquote::after {
    right: -13%;
    bottom: -15px;
    transform: rotate(180deg);
}
    /* Transition */
* {
    transition: all ease .6s;
}


/*_________________________________________________________________

             ELEMENTS
____________________________________________________________________  */



/*      SITE CONTENT 
________________________________________*/

.gb-container.container-text {
    @media only screen and (min-width: 1025px) and (max-width: 1295px) {
        row-gap: 10px;
    }
}


/*      HEADER  
________________________________________*/

/* Top Menu */
.top-menu-container, 
.site-header {
    position: sticky;
    z-index: 1000;
}
.top-menu-container {
    top: 0;
}
.site-header {
    top: 100px;
    padding: 0 5%;
}
.main-title a, .main-title a:hover {
    font-weight: 700;
    font-size: 28px;
    line-height: 24px;
    letter-spacing: 0.15px;
}

/* become a member & donate buttons */
#menu-top-menu {
    color: black;
    background-color: #ffffff;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 40px 200px 60px 0;


    li {
        float: right;
        padding: 8px 30px;
        border: 1px solid #000000;
        border-radius: 25px;
        margin-left: 30px;
    }

    /* Donate button - Float pushes it to the right */
    li:first-child {
        color: var(--black);
        background-color: var(--yellow);
        border: 1px solid var(--yellow);
    }
    li:first-child:hover {
        color: var(--white);
        background-color: var(--black);
        border: 1px solid var(--black);
    }
    &:nth-child(2):hover {
        color: var(--yellow);
        background-color: var(--black);
        border: 1px solid var(--black);
    }
    li a {
        font-size: 18px;
    }



        /*      MOBILE MENU, SEARCH ICON, TOP MENU  
    ________________________________________*/

    @media only screen and  (min-width: 1650px) {
        padding-right: calc(200px + 2%);
    }
    
/*     @media only screen and (max-width: 1214px) and (min-width: 769px) {
            margin-right: 25px;
    } */
}




/*      MAIN MENU    
________________________________________*/

.site-header {
    padding-bottom: 10px;
}
.inside-header {
    padding: 0 5%;
}
.main-navigation .main-nav ul li a {
    padding-left: 15px;
    padding-right: 15px;
}
.main-nav li a, 
.main-navigation .main-nav ul ul li a {
    font-size: 18px;
}

.main-navigation li:hover,
.main-navigation li.current-menu-item {
    color: var(--dark-yellow);
}
.main-nav .sub-menu {
    background: var(--white);
    margin-left: -18px;
    padding-bottom: 25px;
}
.main-nav .sub-menu li {
    padding-left: 15px;
    color: var(--black);
}
.main-nav .sub-menu li:hover {
    color: var(--dark-yellow);
}
.menu-item-has-children .dropdown-menu-toggle {
    padding-left: 0;
}
.main-nav .icon-arrow {
    display: none;
}


/* Search Icon - enabled through main nav, styled to take position in the top menu*/
.inside-navigation .menu-bar-items {
    position: absolute;
    top: -66px;
    right: 0;
    margin-left: 20px;
}
.inside-navigation .menu-bar-items:hover {
    color: var(--dark-yellow);
}
.menu-bar-item a {
    font-weight: 700;
    font-size: 25px;
}
.main-navigation .menu-bar-item>a {
    padding-right: 0;
}
    /* Search overlay */
.gp-search-modal .gp-modal__overlay {
    color: var(--white);
    background: rgba(0, 0, 0, .8);
}


/*      MOBILE MENU, SEARCH ICON, TOP MENU   
_____________________________________________________*/

@media only screen and (max-width: 1214px) and (min-width: 769px) {
    .main-navigation.mobile-menu-control-wrapper {
        margin-top: -100px;
    }
}



    /*      MOBILE MENU  
________________________________________*/

@media only screen and (max-width: 1214px) {
    .menu-toggle {
        font-size: 25px;
    }
    .main-navigation.toggled .main-nav ul ul {
        border: none;
    }
    /* Opens submenu, hidden for desktop */
    .main-nav .icon-arrow {
        display: inline-block;
    }
    .main-navigation.toggled .dropdown-menu-toggle {
        font-size: 30px;
        padding-right: calc(100% - 190px);
    }
    .main-navigation.toggled .main-nav ul ul.toggled-on {
        padding-left: 70px;
    }
}

    /*******   MOBILE MENU    *******/
@media only screen and (max-width: 768px) {
    .top-menu-container {
        display: none;
    }
    .site-header {
        top: 0;
    }
}



    /*      BANNER  
________________________________________*/

.banner {
    padding-top: 80px;
    padding-left: 100px;
}
.banner p {
    width: 400px;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 1.1px;
}

@media only screen and (max-width: 1024px) {
    .site-content-width.banner {
        padding: 70px;
    }
}



    /*      SECTION WITH ICONS (About US, Travel Industry, Events)
_____________________________________________*/

.left-border-icon-grid {
    column-gap: 5%;
    position: relative;
    padding: 50px 0 80px;

    @media only screen and (max-width: 768px) {
        padding: 30px 0;

        .about-us-lightbulb-icon {
            margin-bottom: 30px;
        }
    }
}

/* Line behind icons */     
.left-border-icon-grid > div::after,
.left-border-icon-grid:last-child > div::after {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50px;
    border: 1px solid var(--black);
    z-index: 10;
}

.left-border-icon-grid > div::after {
    top: 0;
    bottom: 0;
    left: 50px;
}
.left-border-icon-grid:last-child > div::after {
    top: -50px;
    bottom: 0;
    left: 50px;
    height: 100px;
}
    /* Circle */
.left-border-icon-grid:first-child::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: var(--black);
    margin-left: 46px;
    margin-top: -50px;
}

/* Instances with full width intro text require shorter border*/
.left-border-icon-grid.no-icon {
    margin-top: 50px;
    padding: 15px 0 25px;
}
.left-border-icon-grid.no-icon > div:first-child::after {
    top: -25px;
    bottom: 0;
    left: 50px;
    height: 25px;
}


    /*      MEDIA QUERY  
________________________________________*/

@media only screen and (max-width: 768px) {

    .left-border-icon-grid > div::after,
    .left-border-icon-grid:last-child > div::after,
    .left-border-icon-grid:first-child::before {
        display: none;
    }
}


/*_________________________________________________________________

             FOOTER
____________________________________________________________________  */

.copyright-message {
    display: inline-block;
}


/*_________________________________________________________________

             CARD (info on hover)- WP Pattern
____________________________________________________________________  */

.card-container {
    position: relative;

    /* positioned absolute - does not affect figure height (hovered image overlay) */
    .card-name {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
      }

    /* description visible on hover only */
    .card-desc {
        position: absolute;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%);  
        color: var(--white);
        font-size: 0.9rem;
        opacity: 0; 

        /* description slightly moved, fits better for those screen sizes */
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            top: 55%; 
            left: 30%;
            transform: translate(-20%, -45%); 
        }
    }

    .card-social {
        padding-top: 20px;
    }

    /* card on hover */
    &:hover {

        /* visible when hovered */
        .card-desc {
            opacity: 1;       
        }

        /* image overlay */
        figure::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
          }
    }


        /*      MEDIA QUERY  
________________________________________*/

    @media only screen and (max-width: 768px) {

        /* image width */
        img {
                width: 80%;
        }

        /* card on hover */
        &:hover {
            figure::before {
                width: 80%;
                left: 10%;  /* center description, adjusted to image width */
                text-align: center;
            }
        }
    }

}  /* end - card-container */


/*_________________________________________________________________

             CARD (flat)- WP Pattern
____________________________________________________________________  */

.flat-card-container h2 {
    margin-bottom: 80px;
}
.card-flat {
    padding-bottom: 10%;
    
    /* padding-bottom: 40px; */
    border-radius: 20px 20px 0 0;

    img {
        border-radius: 20px 20px 0 0;
        padding-bottom: 20px;
    }
    .social {
        padding-top: 20px;
    }
    p {
        padding: 0 5px;
    }

    @media only screen and (max-width: 768px) {

        figure {
            max-width: 400px;
        }
    }
}


.card-flat-grid > div > div {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    @media only screen and (max-width: 768px) {
        box-shadow: none;
    }
}



/*******************************************************************

            PAGES 
********************************************************************/


/*_________________________________________________________________

             HOME
____________________________________________________________________  */



    /*      Youth Programs / Industry Initiaives  
___________________________________________________*/

.program-initiatives-grid .gb-container {
    display: flex;
    align-items: center;
}
.program-initiatives-grid {
    justify-content: space-between;

    .icon {
        width: 90px;
        border-radius: 50%;
        padding: 23px;
        margin-bottom: 30px;
        background-color: var(--yellow);
    }
    p {
        padding: 0 10%;
        flex-grow: 1;
    } 
}


    /*      Our Mission  
________________________________________*/

     /* background circle */
.our-mission {
    margin: 100px 0 160px;
}
.our-mission .subtitle {
    margin-bottom: 50px;
}
.our-mission .statement {
    flex: 1;
    margin: 1%;
    border-radius: 50%;
    position: relative;
    width: 115%;
    z-index: 100;
}

    /* Gives circles height */
.our-mission .statement::before {
    content: "";
    display: inline-block;
    padding-top: 97%;
}
.our-mission .statement > * {
    position: absolute;
}
.our-mission .statement p {
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}
.statement-one, 
.statement-three {
    top: 50px;
    z-index: 10;
}
.statement-one {
    left: -3%;
    padding: 0 20% 0 10%;
}
.our-mission .statement-one p {
    padding: 0 20% 0 10%;
}
.statement-one i {
    bottom: 10%;
    left: 11%;
}
.statement-two {
    margin-top: -17%;
    left: -10.5;
    z-index: 100;
}
.our-mission .statement-two p {
    font-size: 1.8rem;
    text-align: center;
    padding: 0 28%;
}
.statement-two i {
    top: 10%;
    right: 28%;
    rotate: -30deg;
}
.statement-three {
    left: -18%;
}
.our-mission .statement-three p {
    padding: 0 20%;
}
.statement-three i {
    bottom: 10%;
    right: 11%
}
.empty-circles {
    margin-bottom: -300px;
}
.empty-circles  .statement{
    background-color: var(--white);
    margin: 0 auto;
    transform: translate(42%, -102%);
    z-index: 10;
}

@media only screen and (max-width: 1214px) {
    .our-mission .statement p {
        top: 50%;
        transform: translate(0, -50%);
        text-align: center;
        font-size: 1.3rem;
        font-weight: 700;
    }
    .our-mission .statement-two  p {
        font-size: 1.5rem;
    }
    /* Airplane and users icons - landing page */
/*     .fa-4x {
        font-size: 3.5em;
    }
    .fa-3x {
        font-size: 2.5em;
    }
    .statement-two i {
        top: 4%;
    }
    .statement-three i {
        bottom: 3%;
    } */
}

@media only screen and (max-width: 1024px) {
    .our-mission {
        margin-bottom: -150px;
    }
    .our-mission-circles-grid > div.gb-grid-column {
        width: 100%;
    }
    .our-mission-circles-grid.empty-circles {
        display: none;
    }
    .our-mission-circles-grid {
        margin-bottom: 130px;
    }
    .our-mission .subtitle {
        margin-bottom: 0;
    }
    .our-mission .statement {
        width: 50%;
    }
    .statement-one {
        padding: 0;
        left: 9%;
    }
    .statement-two {
        top: -23%;
        left: 45%;
    }
    .statement-two i {
        top: -5%;
    }
    .statement-three {
        top: -45%;
        left: 21%;
    }
}


    /*     Home Page - Our Youth  
________________________________________*/

@media only screen and (max-width: 768px) {
    blockquote p {
        font-size: 24px;
    }
        /* Airplane and users icons - landing page */
/*         .fa-4x {
            font-size: 3em;
        }
        .fa-3x {
            font-size: 2em;
        } */
}

.home-carousel {
    margin: 100px 0;
}
.home-carousel img {
    border-radius: 20px;
}


    /*     Home Page - Newsletter  
________________________________________*/
#noptin-form-1 > div.noptin-form-header.no-image > div > div.noptin-form-heading {
    font-style: normal!important;
}
.noptin-text.noptin-form-field,
.noptin-form-submit {
    border-radius: 30px;
    min-height: 50px;
}
.noptin-form-submit:hover {
    box-shadow: none;
    color: var(--black)!important;
    background-color: var(--white)!important;
}

/*_________________________________________________________________

            ABOUT US
____________________________________________________________________  */

.about-staff p {
    margin: 0;
}


/* .about-us-check-icon i,
.about-us-lightbulb-icon {
    background: var(--yellow);
    text-align: center;
    border-radius: 50%;
    padding: 12px;
}

.about-us-check-icon i {
    font-size: 27px;
}
.about-us-lightbulb-icon {
    width: 100px;
    height: 100px;
    font-size: 50px;
    position: relative;
    z-index: 100;
}
.about-us-lightbulb-icon i {
    z-index: 100;
}
 */


/*_________________________________________________________________

             YOUTH 
____________________________________________________________________  */


.youth-container-text-image,
.youth-container-image-text {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 4%;
    align-items: center;
}
.youth-container-text-image {
    grid-template-areas: 
        "youth-title youth-img"
        "youth-text  youth-img";
}
.youth-container-image-text {
    grid-template-areas: 
        "youth-img youth-title"
        "youth-img youth-text";
}
.youth-container-title {
    grid-area: youth-title;
    align-self: end;
}
.youth-container-text {
    grid-area: youth-text;
}
.youth-container-img {
    grid-area: youth-img;
}

@media only screen and (min-width: 768px) and (max-width: 1024px)  {
    .youth-container-text-image {
        grid-template-areas: 
        "youth-title youth-title"
        "youth-text youth-img";
    }
    .youth-container-image-text {
        grid-template-areas: 
        "youth-title youth-title"
        "youth-img youth-text";
    }
    .youth-container-title {
        padding-bottom: 10px;
    }
}


@media only screen and (max-width: 768px) {

    .youth-container-text-image,
    .youth-container-image-text {
        grid-template-columns:  1fr;
        grid-gap: 0;
        grid-template-areas: 
         "youth-title"
         "youth-text"
         "youth-img";
    }
    .youth-container-title,
    .youth-container-text {
        text-align: center;
    }
    .youth-container-text {
        margin: 20px 0 30px;
    }

    
    /*******   RESOURCES PAGE    *******/
    .resources-list li {
        width: 100%;
    }
    .resources-list a {
        width: 100%;
    } 
}

@media only screen and (max-width: 540px) {
    .youth-our-programs-grid.gb-grid-wrapper > div {
        width: 100%;
    }
}



/*_________________________________________________________________

             RESOURCES
____________________________________________________________________  */


        /*      Top list  
________________________________________*/

    .resources-list {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 40px;
    }
    .resources-list li {
        display: grid;
        grid-template-columns: 85px auto;
        align-items: center;
        padding: 12px 60px;
        border: 1px solid black;
        border-radius: 25px;
    }
    .resources-list li i, .resources-links-section i {
        width: 50px;
        height: 50px;
        margin-right: 40px;
        padding: 15px;
        border-radius: 50px;
        background: var(--yellow);
    }
        
            /*      Bottom list with links 
__________________________________________________*/
    .resources-links-section .fas {
        font-size: 35px;
    }
    .resources-links-section ul {
        max-width: 1000px;
        margin-left: 140px;
        line-height: 1.9;
    }
    .resources-links-section ul li {
        list-style-type: disc;
    }
    .resources-links-section ul li a {
        text-decoration: underline var(--dark-yellow);
    }
    .resources-list li:hover {
        color: var(--black);
        background: var(--light-yellow);
    }
    .resources-links-section .wp-block-separator {
        border-top: 1px solid var(--black);
        margin-bottom: 50px;
    }
    .organizations-by-state-list-item {
        margin-top: 30px;
    }
    .resources-links-section ul  .organizations-list-by-state-list {
        margin-left: 30px;
    } 
    ul.organizations-list-by-state-list li {
        list-style-type: circle;
    }
    .resources-links-section ul {
        max-width: 1000px;
        margin-left: 140px;
        line-height: 1.9;
    }
    ul.organizations-list-by-state li {
        list-style-type: circle;
        margin-left: 40px;
    }
        /* Move section from the very top when linked to */
        .anchor-section::before {
            display: block;
            content: " ";
            height: 220px;
            margin: -220px 0 0;
        }

    
    @media only screen and (min-width: 1025px) and (max-width: 1250px) {
        .resource-list.subtitle {
            font-size: 19px;
        }
    }
    @media only screen and (max-width: 1160px) {
        .resources-list {
            grid-template-columns: 100%;
        }
        .resources-list li {
            width: 83%;
        }
        .resources-list a:nth-child(even) li {
            float: right;
        }
    }



    
/*_________________________________________________________________

             EVENTS PAGE
____________________________________________________________________  */


.events-intro .icon {
    position:relative;
    width: 90px;
    border-radius: 50%;
    padding: 23px;
    margin-left: 6px;
    margin-bottom: 30px;
    background-color: var(--yellow);
    z-index:100;
}


            /*      VS Event List Plugin
__________________________________________________*/


/* date calendar background */
.vsel-day-top {
    background: var(--light-yellow);
    color: var(--black);
}
/* event title */
.vsel-meta-title {
    text-align: center;
    font-size: 1.8rem;

    a {
        color: var(--black);
    }
}



            /*      Upcoming events
__________________________________________________*/

#vsel.upcoming-events {

    .vsel-content {

        display: grid;
        grid-template-columns: 1fr 3fr;
        column-gap: 40px;
        align-items: center;
        position: relative;
        margin: 0;
        padding: 50px 0;

        .vsel-meta,
        .vsel-info-block {
            width: 100%!important; /* overwrite default plugin settings */
        }
        /* remove pseude element as it creates unwanted grid item */
        .vsel-content::after {
            display: none;
        }


        /* text & image */
        .vsel-info-block {
            position: relative;

            figure,
            .vsel-info {
                position: absolute;
                width: 50%;
                top: 50%;
                transform: translateY(-50%);
            }

            figure {
                max-width: 50%!important;
                right: 0;
                margin: 0;

                &:hover {
                    filter: brightness(50%);
                }
            }
        }
    
            /* center text */
            .vsel-info {
                position: absolute;
                width: 50%;
                top: 50%;
                transform: translateY(-50%);
                padding-right: 40px;
            }
            /* read more button */
            .vsel-read-more {
                float: right;
                padding: 5px 30px;
                border-radius: 25px;
                margin: 20px 0 30px;
                color: var(--black);
                background-color: var(--yellow);

                &:hover {
                    color: var(--white);
                    background-color: var(--black);
                }
            }


        &:nth-last-child(2) {
            border-bottom: none;
        }


        /* event meta */
        .vsel-start-icon, .vsel-end-icon {
            display: block;
            margin: 20px 15px 30px 0;
            background: var(--white);
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.3);
        }
        .vsel-meta-time,
        .vsel-meta-location,
        .vsel-meta-cats {
            text-align: center;
            color: var(--light-yellow);

            span {
                display: block;
            }
        }


        @media (max-width: 900px) {
            grid-template-columns: 1fr;

            .vsel-info-block {
                figure,
                .vsel-info {
                    display: contents; /* Ensures children are positioned as grid items */
                    position: relative!important;
                    max-width: 100%!important;
                    width: 100%!important;              
                }
                figure {             
                    padding-bottom: 40px;

                    img.vsel-image {
                        margin-bottom: 20px;
                    }
                }
                .vsel-info {
                    -webkit-transform: none!important;
                    transform: none!important;
                    padding-right: 0;
                    text-align: center;
                }
            }
        }
    }
}


            /*      Past events
__________________________________________________*/

.past-events-heading {
    margin: 30px 0 50px;
}


#vsel.past-events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    .vsel-content {
        border-bottom: none;

        h3.vsel-meta-title {
            background-color: rgba(0, 0, 0, 0.6);
            padding: 10px 0;

            a {
                color: var(--white);
            }
        }

    }

    /* stretch elements to full width */
    div.vsel-meta.vsel-alignleft,
    .vsel-info-block figure,
    div.vsel-info-block {
        max-width: 100%!important;
        width: 100%!important;
    }

    figure {
        filter: brightness(100%);
        &:hover {
           filter: brightness(50%);
        }
    }

    .vsel-meta-date-icon,
    .vsel-meta-time,
    .vsel-meta-location,
    .vsel-meta-cats,
    .vsel-info {
        display: none;
    }

    /* pull image up */
    .vsel-info-block {
        margin-top: -80px;
        position: relative;
    }
    .vsel-meta-title {
        position: relative;
        z-index: 10;

        a {
            color: var(--black);
            text-shadow: 2px 2px 4px var(--black);
         }
    }


    @media only screen and (max-width: 768px) {
        grid-template-columns: 1fr;

        .vsel-meta {
            margin: 0;
        }

    }
}



/*_________________________________________________________________

              SINGLE EVENT PAGES
____________________________________________________________________  */

/* remove padding to stretch full width */
/* .single-event {
    .site-content {
        padding: 0;
    }
}

div.featured-image.page-header-image-single.grid-container.grid-parent {
        padding: 0;
        } */



.event {

    /* hero - set image behind headind */
    .inside-article {
        position: relative;
        z-index: 1;
    }

    .featured-image img {
        max-width: calc(100% + 80px); /* set image to full site width (site-content padding 40px)*/
        margin-left: -40px;
        border-radius: unset;
    }

    /* heading (h1) and meta info moved up */
    header,
    div.vsel-meta {
        width: 70%; /* meta is set through dashboard */
        /* place header on top of image */
        position: absolute;
        top: 70px;
        left: 0;
        z-index: 100;
        left: 50%; /* center text */
        transform: translateX(-50%);
    }

    h1,
    div.vsel-meta div {
        margin: 0;
        padding: 15px;
        text-align: center;
        background-color:rgba(0,0,0,0.6);
        color: var(--white);
    }

    div.vsel-meta {
        top: 280px;
        flex-direction: column; 
        padding:  0;
    }

    /* page content */
    .vsel-info-block {
        width: 100%!important;

        /* remove bottom padding from container */
        .wp-block-group__inner-container {
            padding-bottom: 0;
        }

        /*  Become a member button */
        span.large-button {
            margin: 35px auto 70px;
        }
    }

    /* full width intro section section on several single events  */
    .event-intro-details {
        width: calc(100% + 80px); /* set to full site width (site-content padding 40px)*/
        margin-left: -40px;
    
        .event-intro-details-text {
            padding-left: 10%;
            padding-right: 10%;
        }
    }

    /* event schedule, individual column background - stretches through 25% */
    .event-schedule .gb-grid-column {
        background: linear-gradient(90deg, var(--light-yellow) 25%, var(--white) 25%);
        border-radius: 5% 0 0 5%;
        margin-top: 20px;
        padding-bottom: 30px;
    }

    .speakers-list {
        line-height: 2.2rem;
    }

    /*  widen video section */
    .event-recap-video {
        @media only screen and (max-width: 1024px) {
            margin-left: calc(-100vw / 2 + 100% / 2);
            margin-right: calc((-100vw / 2 + 100% / 2) + 80px );
        }
    }

    .video-title {
        margin-top: 12px;
    }
    
}



            /*      2021 Travel Unity Summit
__________________________________________________*/

/* full width intro section section on several single events  */
.twenty-one.event-intro-details {
    line-height: 2.5rem; /* stretch event details */
}
/* gap between title and sessions */
.twenty-one-sessions {
    margin-top: 30px;
}

            /*      2022 Travel Unity Summit
__________________________________________________*/

.testimonials {
    .quotes {
        font-size : 50px;
        padding: 30px;
    }
    background: var(--light-yellow);
    border-radius: 20px;

    .slick-slide p {
        padding: 15% 10%;
/*         line-height: 1.8; */
    }
    .slick-prev:before,
    .slick-next:before {
        font-size: 40px;
        color: var(--black);
    }
    .slick-next {
        right: 0px; /* default gap fix */
    }
}
    


/*_________________________________________________________________

             CONTACT
____________________________________________________________________  */

.contact-form {
    input[type=text],
    input[type=email],
    textarea,
    button[type=submit] {
        border-radius: 20px!important;
    }

    button[type=submit] {
        color: var(--black)!important;
        background-color: var(--yellow)!important;
        border: 1px solid var(--yellow)!important;
        padding: 8px 30px!important;
    }

    .wpforms-required-label {
        color: var(--black)!important;
    }
}