/*
Theme Name:     Twenty Twenty Four
Theme URI:      https://humanconnection.studio
Author:         hello@stefanushosea.com
Author URI:     https://dsgndbystfn.us
Template:       hcs
Version:        29.1.24
*/

/* Global */
*{
    scroll-behavior: smooth;
}
img{
    user-drag: none; user-select: none;-moz-user-select: none;-webkit-user-drag: none;-webkit-user-select: none;-ms-user-select: none;
}
::selection {
    background-color: transparent;
    color: rgba(255, 255, 255, .75);
    text-shadow: none;
}
.grecaptcha-badge,.stefanushosea #ajax-loading-screen .default-skin-loading-icon{
    display: none !important;
    visibility: hidden !important
}

/* Header */
.stefanushosea #logo img{
    transition: all .5s ease-in-out !important
}
#logo img:hover{
    filter: blur(0.8px);
    -webkit-filter: blur(0.8px);
    opacity: .9;
}
.stefanushosea #header-outer[data-lhe="default"] #top nav > ul > li > a:hover,
.stefanushosea #header-outer[data-lhe="default"] #top nav .sf-menu > .current-menu-item > a,
.stefanushosea #header-outer[data-lhe="default"] #top nav .sf-menu > .current_page_ancestor > a,
.stefanushosea #header-outer[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a,
.stefanushosea #header-outer[data-lhe="default"] #top nav .sf-menu > .current_page_item > a,
.stefanushosea #header-outer[data-lhe="default"] #top nav > ul > .button_bordered > a:hover,
.stefanushosea #header-outer[data-lhe="default"] #top nav > .sf-menu > .button_bordered.sfHover > a,
.stefanushosea #header-outer:not(.transparent) .nectar-mobile-only.mobile-header a:hover,
.stefanushosea #header-outer:not(.transparent) .nectar-mobile-only.mobile-header li[class*="current"] a{
	color:#f2f4f2 !important
}
.menu-title-text::last-word{
    font-weight: 500 !important
}
.stefanushosea #header-outer .menu-item-30 > a:before {
    background: rgba(255, 255, 255, .25);
    border: solid 2px rgba(255, 255, 255, .25);
}
.stefanushosea #header-outer .menu-item-30 > a:hover:before {
    background: rgba(255, 255, 255, .35);
    border: solid 2px rgba(255, 255, 255, .5);
}
@media only screen and (min-width:1000px){
    header .sf-menu .menu-item{
        transition: all .5s ease-in-out;
    }
    header:hover .sf-menu:not(.buttons) .menu-item{
        opacity: .75;
        filter: blur(1px);
        -wekit-filter: blur(1px);
    }
    header:hover .sf-menu:not(.buttons) .menu-item:hover{
        opacity: 1;
        filter: blur(0);
        -wekit-filter: blur(0);
    }
}
.stefanushosea .fullscreen-inline-images .nectar-ocm-image-wrap-outer {
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(5px);
    background-image: linear-gradient(black, transparent);
}

/* Lightbox */
.mfp-wrap{
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
}

/* About */
#about{
    margin-bottom: calc(-100vw * 0.12);
}
@media only screen and (max-width :690px){
    #about {
        margin-bottom: calc(100vw * 0.10);
    }
}
#about h1{
    line-height: 1.11;
    font-weight: 200
}
@media only screen and (min-width:691px){
    #about h1{
        font-size: 4vw;
    }
}
#about h1 em{
    font-style: normal
}
#about .nectar-split-heading{
    margin: 0
}
#about .one > * > span:first-child, #about h1 .one em{
    font-weight: 400
}
#about .two > * > span:first-child, #about h1 .two em{
    font-weight: 300
}
#about .three > * > span:first-child, #about h1 .three em{
    font-weight: 200
}
#about .one > * > span:last-child, #about h1 .one strong{
    font-weight: 300
}
#about .two > * > span:last-child, #about h1 .two strong{
    font-weight: 400
}
#about .three > * > span:last-child, #about h1 .three strong{
    font-weight: 500
}
#description h2{
    line-height: 1.25;
    max-width: 70vw;
    margin: auto;
}
@media only screen and (min-width:691px){
    #description h2{
        font-size: 2.25vw
    }
}
@media only screen and (max-width:690px){
    #description h2{
        font-size: 1.1em
    }
    #description p{
        display: none
    }
}

/* Credo */
#credo h1{
    line-height: 1.35;
    font-weight: 200;
    text-align: justify;
    text-align-last: justify;
}
@media only screen and (min-width:691px){
    #credo h1{
        font-size: 3.5em;
    }
}
#credo h1 span:nth-child(8),
#credo h1 span:nth-child(12),
#credo h1 span:nth-child(13),
#credo h1 span:nth-child(18),
#credo h1 span:nth-child(19),
#credo h1 span:nth-child(24),
#credo h1 span:nth-child(25){
    font-weight: 300
}
#credo p{
    line-height: 2;
    margin-top: 2em;
    text-align: justify;
}
@media only screen and (max-width:691px){
    #credo p{
       font-size: 1em;
    }
}
#credo p strong{
    font-weight: 300
}

/* Heartwork */
.nectar-fancy-box .heading-wrap p{
    text-align: justify;
    font-size: 1em;
    line-height: 1.75;
    text-align-last: justify;
}

/* B-Listed */
@media only screen and (min-width:691px){
    #B-Listed h2{
        max-width: 500px
    }
}
.sub{
    text-align: justify;
}
#B-Listed .sub img{
    width: 40px;
    margin: 0
}
.nectar-rotating-words-title .dynamic-words{
    font-weight: 500
}
#big h3{
    font-weight: 400
}
#big p:first-child{
    margin: 0
}
#big p img{
    max-width: 250px;
    margin: 0;
    transition: all .25s ease-in-out
}
#big p img:hover{
    transform: scale(.98);
    opacity: .75
}
#big .bpublicist, .bpublicist h3{
    color: #000
}
@media only screen and (min-width:691px){
    #big .bigchangeagency p{
        max-width: 345px;
    }
    #big .bpublicist p{
        max-width: 290px;
    }
}
@media only screen and (max-width:690px){
    #big p{
       font-weight: 300 
    }
}

/* Client */
@media only screen and (min-width:691px){
    #client .unilever, #client .aia{
        width: 50px
    }
    #client .kahf,
    #client .marriott{
        width: 75px
    }
    #client .undp,
    #client .map{
        width: 85px
    }
    #client .goto{
        width: 100px
    }
	#client .permata{
        width: 125px
    }
}
@media only screen and (max-width:690px){
    #client .unilever, #client .aia{
        width: 35px;
        margin-left: calc(100% * 0.15);
    }
    #client .marriott{
        width: 45px;
        margin-left: calc(100% * 0.35);
    }
    #client .kahf,#client .map,#client .undp{
        width: 50px;
        margin-left: calc(100% * 0.15);
    }
    #client .bca, #client .goto{
        width: 65px;
        margin-left: calc(100% * 0.15);
    }
}
#clients{
    margin-top: -2.5em
}
@media only screen and (max-width:690px){
    #clients{
        margin-top: -.5em
    }
}
#clients h2 strong{
    font-weight: 500
}
.list{
    font-size: .75em;
    line-height: 2;
    text-align: justify;
    text-align-last: justify;
    opacity: .75;
    cursor: cell;
}
@media only screen and (min-width:1000px){
    .list{
        font-size: 1.2em;
    }
}
.list span{
    transition: all .5s ease-in-out;
}
#clients .list:hover span{
    opacity: .5;
    filter: blur(1px);
    -wekit-filter: blur(1px);
}
#clients .list:hover span:hover{
    opacity: 1;
    filter: blur(0);
    -wekit-filter: blur(0);
}

/* Contact */
#contact #details{
    margin: 2.5em 0;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.75;
}
#contact .nectar-split-heading > * > span:last-child{
    font-weight: 500
}
#contact #details .nectar-cta .link_wrap .link_text {
    font-weight: 300;
}
#contact #details a{
    opacity: 1
}
#contact #details a:hover{
    opacity: .75
}
#contact #mobile-form{
    display: none
}
#contact .copyright #spark{
    display: inline;
    width: 12px;
    margin: 0 2px;
}
@media only screen and (max-width:690px){
    #contact #contact-form{
        display: none
    }
    #contact #mobile-form{
        display: block
    }
    #contact #details{
        font-size: 1em;
        margin: 1em 0 1.5em
    }
    #contact .copyright p{
        font-size: .75em
    }
    #contact .copyright #spark{
        width: 8px;
    }
    body.material .wpcf7-form .nectar-wpcf7-inline-form{
        padding: 1em 0;
    }
    body[data-fancy-form-rcs="1"] .variations select, body[data-fancy-form-rcs="1"] .select2-container--default .select2-selection--single{
        padding-left: 3.5px;
        padding-right: 3.5px;
    }
}
#contact form p{
    padding-bottom: 1em
}
body .span_12.light .wpcf7-form .wpcf7-not-valid-tip{
    padding: 0;
    font-size: .75em;
    text-align: center;
    font-style: italic;
}
body .wpcf7 form .wpcf7-response-output {
    margin: 1em 0;
    padding: 0;
    border: none;
    font-size: .95em;
    font-weight: 400;
    font-style: italic;
}
body .wpcf7 .wpcf7-response-output{
    background-color: transparent
}
.light .wpcf7 div.wpcf7-response-output, div.wpcf7-validation-errors{
    color: #f2f4f2 !important;
}
body.material .wpcf7-form .nectar-wpcf7-inline-form{
    padding: 1em 0;
}
body[data-form-style="minimal"] textarea{
    padding: 15px !important;
}
body[data-form-style="minimal"] .container-wrap .span_12.light input[type="text"],
body[data-form-style="minimal"] .container-wrap .span_12.light textarea,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type="email"],
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=password],
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=tel],
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=url],
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=search],
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=date],
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=number],
body[data-form-style="minimal"] .container-wrap .span_12.light select{
    transition: all .5s ease-in-out
}
body[data-form-style="minimal"] .container-wrap .span_12.light input[type="text"]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light textarea:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type="email"]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=password]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=tel]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=url]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=search]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=date]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light input[type=number]:hover,
body[data-form-style="minimal"] .container-wrap .span_12.light select:hover{
    border-color: #f2f4f2
}
body[data-form-style="minimal"] .container-wrap .span_12.light input[type="text"], body[data-form-style="minimal"] .container-wrap .span_12.light textarea, body[data-form-style="minimal"] .container-wrap .span_12.light input[type="email"], body[data-form-style="minimal"] .container-wrap .span_12.light input[type=password], body[data-form-style="minimal"] .container-wrap .span_12.light input[type=tel], body[data-form-style="minimal"] .container-wrap .span_12.light input[type=url], body[data-form-style="minimal"] .container-wrap .span_12.light input[type=search], body[data-form-style="minimal"] .container-wrap .span_12.light input[type=date], body[data-form-style="minimal"] .container-wrap .span_12.light input[type=number], body[data-form-style="minimal"] .container-wrap .span_12.light select{
    border-color: rgba(255,255,255,.25);
    border-width: 1px
}
body[data-fancy-form-rcs="1"] .fancy-select-wrap {
    padding-top: 0 !important;
}
.span_12.light .select2-container--default .select2-selection--single, body[data-fancy-form-rcs="1"] .span_12.light .select2-container--default .select2-selection--single {
    border-color: rgba(255, 255, 255, .25);
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}
.select2-container--default .select2-selection--single{
    border-radius: 0 !important
}
body[data-fancy-form-rcs="1"] .variations select, body[data-fancy-form-rcs="1"] .select2-container--default .select2-selection--single {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}
body[data-fancy-form-rcs="1"] .select2-container--default .select2-selection--single:hover,
body[data-fancy-form-rcs="1"] .select2-container--default.select2-container--open .select2-selection--single{
    background-color: transparent !important;
    color: #f2f4f2 !important;
    border-color: #f2f4f2 !important
}
body[data-fancy-form-rcs="1"] .select2-drop, body[data-fancy-form-rcs="1"] .select2-dropdown {
    background-color: rgba(255, 255, 255, .75) !important;
    backdrop-filter: blur(2.5px) !important;
}
body[data-fancy-form-rcs="1"] .select2-container--default .select2-results__option[aria-selected=true], body[data-fancy-form-rcs="1"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(255, 255, 255, .25) !important;
}
.select2-selection{
    transition: .5s ease-in-out;
}
.select2-results {
    padding: 0 !important;
}
.select2-results__option {
    padding: 6px 10px !important;
}
.select2-selection__rendered{
	text-transform: lowercase !important;
}
.stefanushosea button[type=submit],.stefanushosea input[type=button],.stefanushosea input[type=submit] {
    border: solid 2px rgba(255,255,255,.15)
}
.stefanushosea .container-wrap .span_12.light input[type=submit]:hover {
    background-color: #444;
    border: solid 2px rgba(255,255,255,.35)
}
body .wpcf7-spinner {
    background-color: #404040;
    top: 5px;
}
body[data-form-submit=regular] .container-wrap button[type=submit], body[data-form-submit=regular] .container-wrap input[type=submit]{
    font-size: 17px !important;
    font-weight: 400 !important;
    padding: 0.75em 2.5em 0.5em !important;
}

/* Works */
#headline{
    margin-top: 25px;
}
#headline p{
    max-width: 345px;
}
@media only screen and (max-width:999px){
    #feature{
        display: none;
        visibility: hidden
    }
}
#works{
    margin: 2em 0;
}
#works .nectar-video-box {
    margin: 0 0 10px !important;
}
#works .nectar-video-box[data-mouse-style=see_through_contrast],#works .nectar-video-box[data-mouse-style=see_through_contrast]>.inner-wrap {
    background-color: transparent;
}
#works .nectar-video-box .play_button_mouse_follow.nectar_video_lightbox {
    width: 55px;
    height: 55px;
    margin-top: -27.5px;
    margin-left: -25px;
}
#works p{
    text-align: center;
    line-height: 1.5;
    max-width: 75%;
    margin: auto;
    padding: 0;
}
#works p:last-child{
    line-height: 1.25;
    margin: 0.5em auto 0;
}
#works .desc{
    font-size: .85em;
    margin: 1em auto;
}
#works p strong{
    font-size: .85em
}
#works.podcast #details{
    margin-bottom: 2em;
}
@media only screen and (max-width:690px){
    #works.podcast #details{
        margin-bottom: 0;
    }
    #works.podcast #details .artwork{
        display: none;
    }
}
#works.podcast #details p{
    text-align: left;
    max-width: 100%
}
#works.podcast #details .links{
    margin-top: 1em;
}
#works.podcast #details .links img{
    filter: invert(1);
    -webkit-filter: invert(1);
    max-height: 3em;
    padding-right: .5em;
    transition: all .25s ease-in-out
}
#works.podcast #details .links img:hover{
    opacity: .75;
    transform: scale(.99)
}
.carousel-wrap[data-full-width="true"] .portfolio-items .col .work-item h3, .portfolio-items .col .work-item.style-2 h3 {
    font-size: 1.15em;
    line-height: 1.5;
}
#works .work-info p{
    max-width: 100%;
}
.mfp-content .mfp-title {
    color: rgba(255, 255, 255, .5);
    font-size: .85em;
    font-weight: 400;
    text-align: center;
    padding-right: 0;
}
.mfp-content .mfp-counter{
    display: none
}