/* Universal  */
@font-face {
    font-family: 'Avenir Next';
    src: url('/wp-content/themes/vec/font/AvenirNext-Regular.otf');
}

body {
    font-family: "greycliff-cf" !important ;
}

#hired-main p a:link, #hired-main p a:visited, #hired-main p a:hover, #hired-main p a {
    color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)) !important;
    text-decoration: underline;
}

.container {
    max-width: none !important;
}

.wp-block-button__link.wp-element-button{
    background: #e53e51;
    font: normal normal bold 20px/24px "greycliff-cf";
    letter-spacing: 2px;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 20px 50px;
    transition: all 400ms ease-in-out;
}

.wp-block-button__link.wp-element-button:hover{
    background: #ee7624;
}

.btn-white .wp-block-button__link.wp-element-button{
    background: white;
    font: normal normal bold 20px/24px "greycliff-cf";
    color: #002564;
    border: 1px solid #003595;
}

.btn-white .wp-block-button__link.wp-element-button:hover{
    background: #003595;
    color: white;
}

/* Header */
.header-container {
    background: #002564;    
}

.header-image{
    position: relative;
    padding: 40px;
    background: url('/wp-content/themes/vec/img/HIRED Fund Hero@2x.png');
    background-repeat: none;
    background-size: cover;
    min-height: 800px;
}

.header-logo {
    width: 400px;
}

.header-intro-text {
    text-align: center;
    position: absolute;
    bottom: 40px;
    width: 80%;
    margin-left: 8%;
    margin-right: 7%;
    color: white;
}

.header-announcing {    
    font: normal normal bold 45px/66px "greycliff-cf";
    letter-spacing: 1.13px;
    color: #FFFFFF;
    text-shadow: 0px 3px 20px #00000029;
    text-transform: uppercase;  
}

.header-fund {
    font: normal normal 900 5vw/100px "greycliff-cf";
    letter-spacing: 0px;
    color: #FFFFFF;
    text-shadow: 0px 3px 20px #00000029;
    text-transform: uppercase;
}

header .container {
    margin-left: auto;
    margin-right: auto;
    background: #002564;
    background: transparent linear-gradient(0deg, #001C4D 0%, #002564 100%) 0% 0% no-repeat padding-box !important;
    text-align: center;
    max-width: 1400px !important;
}

.header-text-container {
    height: auto;
    background: #002564;
    text-align: center;
    color: white;
    padding: 60px 50px;
}

.header-text,
.header-funds {
    text-align:left;
    width: 50%;
    padding: 0px 52px;
    font: normal normal bold 28px/39px "greycliff-cf";
    letter-spacing: -0.28px;
    border-right: 1px solid #3E7CC9;
    max-width: 500px;
}

.header-button {
    padding: 40px 0px 10px 0px;
    max-width: 450px;
}

.header-application {
    padding: 20px 0px 0px 0px;
    font: normal normal 600 18px/40px "greycliff-cf";
    letter-spacing: -0.18px;
}

/* 2nd panel: Introduction */
.introduction-container {
    margin: 120px 25%;
}

.introduction-primary {
    font: normal normal normal 18px/24px "Avenir Next";
    letter-spacing: 0px;
}

.introduction-secondary{
    font: normal normal bold 18px/25px "Avenir Next";
    letter-spacing: 0px;
    color: #002564;
}

hr {
    border: 1px solid #ee7624 !important;
}

/* 3rd panel: Eligibility */
.wp-block-details {
    border: none !important;    
}

.eligibility-container {
    padding: 120px 96px 200px 96px;
    background: transparent linear-gradient(0deg, #001C4D 0%, #002564 100%) 0% 0% no-repeat padding-box !important;
}

.eligibility-list-container{
    padding-left: 40px;
    height: 1000px;
}


.eligibility-container .wp-block-details {
    padding-left: 20px;
}

.eligibility-container .wp-block-details[open] {
    border-left: 3px solid #e53e51 !important;
/*    border-image: linear-gradient(180deg, rgba(238,118,35,1) 0%, rgba(238,118,35,1) 45%, rgba(233,86,61,1) 55%, rgba(229,62,81,1) 100%) !important;*/
    border-left-width: 3px;
    border-left-style: solid;
    padding-left: 20px;
}

.eligibility-container .wp-block-details[open]::before {
    content: '|';
    width: 3px;
    color: #EE7623;
    display: inline-block;
    background: #EE7623;
    position: absolute;
    left: 0px;
    height: 50px;    
}

.wp-block-details-is-layout-flow summary,
.wp-block-details-is-layout-flow p {
    padding: 0px !important;
}

.wp-block-details {
    margin-bottom: 20px !important;
}

.faq-container .wp-block-details {
    margin-bottom: 0px !important;
}

.eligibility-container .wp-block-details[open] summary,
summary:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

summary {
    background: inherit !important;
    list-style-type: none; /* Firefox */
    padding-bottom: 25px !important;
    padding-left: 20px;
}

summary::-webkit-details-marker {
    display: none; /* Chrome */
}

.eligibility-container .wp-block-details{
    margin: 0px;
    padding-left: 20px;   
}

.eligibility-container summary{
    font: normal normal bold 40px/48px "greycliff-cf";
    letter-spacing: -0.4px;
}

.eligibility-container .content {
    font: normal normal normal 22px/30px "Avenir Next";
    letter-spacing: -0.22px;
    color: #F2F2F2;
    margin: 0px;    
}

.eligibility-image {
    min-width: 600px;
    height: 1000px !important;
/*    padding: 120px 0px 120px 100px;*/
}

.eligibility-list {
    max-width: 600px;
    position: relative;
/*    top:75px;*/    
    padding-right: 40px;
    background: transparent !important;
}

/* FAQS */
.faq-container {
    position: relative;
    top: -80px;
    margin: 0px 12%;
    padding: 20px;
    background: #F2F2F2;
    border-top-left-radius: 75px;
    border-top-right-radius: 75px;
}

.faq-container h2 {
    font: normal normal 900 85px/66px "greycliff-cf";
    letter-spacing: 0px;
    color: #002564;
    padding-top: 50px;
}

.faq-container .wp-block-details {
    width: 90%;
    background-image: url('/wp-content/themes/vec/img/expand icon.svg');
    background-repeat: no-repeat;
    background-position: right top 45px;
    margin-left: 5%;
    background-size: 22px;
}

.faq-container .wp-block-details[open] {
    background-image: url('/wp-content/themes/vec/img/collapse icon.svg');
}

.faq-container summary {
    text-decoration: none;
    font: normal normal bold 26px/31px "greycliff-cf";
    letter-spacing: -0.26px;
    color: #002564;
    padding: 40px 20px 40px 0px !important;
}

.faq-container .content {
    text-decoration: none;
    font: normal normal normal 20px/25px "Avenir Next";
    letter-spacing: -0.2px;
    color: #002564;
    padding: 0px 0px 60px 0px !important;
    margin: 0px;
}

.faq-container .wp-block-buttons{
    margin-bottom: 60px;
}

.faq-container .wp-block-details:not(:last-child){
    border-bottom: 1px solid #002564 !important;
}


.faq-container .wp-block-group {
    width: 100%;
    text-align: center;
}

/* Closing statement */
.outro-container {
    margin: 0px 12%;
    padding: 20px;
    margin-top: -80px;
}

.closing-statement-container{
    text-align: center;
    margin-top: 0px;
    height: 200px;
    background: #003595;
    position: relative;
}

.closing-statement-build {
    font: normal normal bold 28px/39px "greycliff-cf";
    letter-spacing: -0.28px;
    color: #FFFFFF;
    position: relative;
    bottom: -80px;
}

.closing-statement-button {
    position: relative;
    bottom: -130px;
    left: 25%;
    width: 50%;
}

/* footer adjustments  */
footer {    
    background: #002564 !important;
    padding: 150px 95px 100px 95px;
    min-height: 380px;    
}

footer, footer a{
    color: #9DBDE3 !important;
}

footer a {    
    text-decoration: underline;    
}

.float-start, .float-end {
    margin-bottom: 10px;
}

footer p {
    margin-bottom: 10px;
    margin-top: 0px;
}

footer img {
    box-shadow: none !important;
    margin-bottom: 0px !important;
}

footer p a:link, footer p a:visited, footer p a:hover, footer p a {
    color: #9DBDE3 !important;
    text-decoration: underline;
}

footer a:hover {
    color: white !important;
}

.entry {
    padding: 0 !important;
}

.fb{
    padding-right: 25px;
    height: 24px;
    width: 24px;
    display: block;
    background-image: url('/wp-content/themes/vec/img/Facebook icon.svg');;
    background-repeat: no-repeat;
}
.fb:hover{
    filter: brightness(0) saturate(100%) invert(65%) sepia(99%) saturate(439%) hue-rotate(2deg) brightness(97%) contrast(97%);
}
.x{
    padding-right: 25px;
    height: 24px;
    width: 24px;
    display: block;
    background-image: url('/wp-content/themes/vec/img/X icon.svg');;
    background-repeat: no-repeat;    
}
.x:hover{
    filter: brightness(0) saturate(100%) invert(65%) sepia(99%) saturate(439%) hue-rotate(2deg) brightness(97%) contrast(97%);
}
.lk{
    padding-right: 25px;
    height: 24px;
    width: 24px;
    display: block;
    background-image: url('/wp-content/themes/vec/img/LinkedIn icon.svg');;
    background-repeat: no-repeat;   
}
.lk:hover{
    filter: brightness(0) saturate(100%) invert(65%) sepia(99%) saturate(439%) hue-rotate(2deg) brightness(97%) contrast(97%);
}
.yt{
    height: 24px;
    width: 24px;
    display: block;
    background-image: url('/wp-content/themes/vec/img/YouTube icon.svg');;
    background-repeat: no-repeat;
}
.yt:hover{
    filter: brightness(0) saturate(100%) invert(65%) sepia(99%) saturate(439%) hue-rotate(2deg) brightness(97%) contrast(97%);
}

.post-password-form {
    margin-bottom: 200px;
}

@media (min-width: 1700px) {
    .header-fund {
        font-size: 97px;
    }
}

@media (max-width: 1500px) {

    .float-end {
        float: left;
        width: 100%;
    } 
}

/* Mid-Size */
@media (max-width: 1000px) { 
    .wp-block-buttons > .wp-block-button {
        width: 100%;
    }

    .wp-block-button__link.wp-element-button {
        width: 100%;
    }

    .header-image {
        min-height: 500px;
        background-size:cover;
    }
    .header-announcing {
        font: normal normal bold 25px/30px "greycliff-cf";
    }
    .header-fund {
        font: normal normal 900 37px/45px "greycliff-cf";
    }
    .header-text-container {
        padding: 75px;
    }
    .header-text,
    .header-funds {
        font: normal normal bold 20px/30px "greycliff-cf";
        width: 100%;
        flex: 0 0 auto;
        border: none;
        border-bottom-width: medium;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
        border-bottom: 1px solid #3E7CC9;
        max-width: none;
        padding: 0px 0px 30px 0px;
    }
    .header-funds {
        padding-top: 30px;
    }
    .header-button {
        text-align: center;
        width: 100%;
        max-width: none;
    }
    .header-button .wp-block-button__link.wp-element-button {
        width: 350px;
    }
    .header-application {
        padding-bottom: 0px;
    }
    .introduction-container {
       margin: 40px 10%; 
    }
    .eligibility-container {
        display: block !important;
        padding-bottom: 240px;
    }
    .eligibility-container .wp-block-details {
        padding-left: 0px;
    }
    .eligibility-image {
        max-width: 100%;
        min-width: unset;
        height: auto !important;
    }
    .eligibility-list-container{
        height: auto;
        padding-left: 0px;
    }
    .eligibility-list{
        height: auto;
        top: 40px;
        padding-right: 0px;
    }
    .faq-container {
        margin: 0px 5%;
        padding: 20px;     
    }
    .faq-container h2 {
        font: normal normal 900 85px/66px "greycliff-cf";
    }
    .faq-container .wp-block-details {
        background-size: 18px;
    }
    footer{
        padding-top:80px;
    }
    footer div:not(.row):not(.col) {
        margin-bottom: 20px;
    }
}

/* Mobile  */
@media (max-width: 680px) { 
    .header-logo{
        width: 250px;
    }
    .header-image{
        background: url('/wp-content/themes/vec/img/HIRED Fund Hero.png');
        padding: 10px;
        min-height: 400px;
        height: 250px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position-x: 50%;
    }

    .header-button .wp-block-button__link.wp-element-button {
        width: 250px;
    }

    .eligibility-container .wp-block-details-is-layout-flow summary,
    .eligibility-container .wp-block-details-is-layout-flow p {
        padding: 10px !important;
    }

    .introduction-primary {
        font: normal normal normal 16px/22px "Avenir Next";
    }

    .eligibility-image {
        display: none;
    }

    .eligibility-container {
        padding: 40px 40px 180px 40px;
    }

    .eligibility-container summary{
        font: normal normal bold 28px/32px "greycliff-cf";
    }

    .eligibility-container .content{
        font: normal normal normal 18px/24px "greycliff-cf";
    }

    .faq-container .content {
        font: normal normal normal 18px/25px "Avenir Next";
    }

    footer {
        padding: 180px 20px 124px 20px;
    }

    footer a {
        color: white !important;
    }

    .float-end, .float-start {
        margin-bottom: 18px;
    }

    .footer-logo {
        text-align: center;
        margin-bottom: 50px !important;
    }

    .footer-copyright {
        margin-top: 50px;
    }
    .header-text-container {
        padding: 25px;
    }

    .closing-statement-button {
        left: 10%;
        width: 80%;
    }

}

@media (max-width: 1500px) {
  .wp-block-buttons > .wp-block-button, 
  .wp-block-button__link.wp-element-button {
    width: 100%;
  }
}