.elementor-kit-12{--e-global-color-primary:#000000;--e-global-color-secondary:#333333;--e-global-color-text:#000000;--e-global-color-accent:#FFFFFF;--e-global-color-bec7659:#7070FF;--e-global-color-255c2d7:#63D8FA;--e-global-color-a39f2da:#FAF063;--e-global-color-c03a6d1:#FFB300;--e-global-color-cd7c7f3:#FA63F7;--e-global-color-8781070:#00DA0E;--e-global-typography-primary-font-family:"Open Sans";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Futura-Bold";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-weight:700;--e-global-typography-4cb64e9-font-family:"Open Sans";--e-global-typography-4cb64e9-font-weight:800;--e-global-typography-4cb64e9-text-transform:uppercase;color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:1.25rem;font-weight:400;}.elementor-kit-12 p{margin-bottom:0px;}.elementor-kit-12 a{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-12 h1{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );}.elementor-kit-12 h2{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );}.elementor-kit-12 h3{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );}.elementor-kit-12 h4{font-family:"Futura-Bold", Sans-serif;font-size:1rem;font-weight:400;text-transform:uppercase;line-height:1.2em;}.elementor-kit-12 h5{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );}.elementor-kit-12 h6{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );}.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{font-family:var( --e-global-typography-4cb64e9-font-family ), Sans-serif;font-size:var( --e-global-typography-4cb64e9-font-size );font-weight:var( --e-global-typography-4cb64e9-font-weight );text-transform:var( --e-global-typography-4cb64e9-text-transform );line-height:var( --e-global-typography-4cb64e9-line-height );letter-spacing:var( --e-global-typography-4cb64e9-letter-spacing );word-spacing:var( --e-global-typography-4cb64e9-word-spacing );color:var( --e-global-color-primary );background-color:var( --e-global-color-accent );border-radius:20px 20px 20px 20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-container{--container-max-width:1280px;}.elementor-widget:not(:last-child){margin-bottom:0px;}.elementor-element{--widgets-spacing:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-right:0px;padding-left:0px;}@media(max-width:1024px){.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{font-size:var( --e-global-typography-4cb64e9-font-size );line-height:var( --e-global-typography-4cb64e9-line-height );letter-spacing:var( --e-global-typography-4cb64e9-letter-spacing );word-spacing:var( --e-global-typography-4cb64e9-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-container{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{font-size:var( --e-global-typography-4cb64e9-font-size );line-height:var( --e-global-typography-4cb64e9-line-height );letter-spacing:var( --e-global-typography-4cb64e9-letter-spacing );word-spacing:var( --e-global-typography-4cb64e9-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-container{--container-max-width:767px;}}/* Start custom CSS */.invert-img{
    filter: invert(1);
    -webkit-filter: invert(1);
}
.fixed-header{
    position: fixed !important;
    top:0px;
    left:0px;
    width: 100vw;
}
.scaledVideo{
    max-width: calc((100vh - 200px) * 1.77);
    margin: 15px auto 0px;
    
}
.scaledVideo iframe{
    background-color: #fff !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
.scaledVideo .elementor-custom-embed-image-overlay{
    
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
:is(.scaledVideo,.reelVideo) .elementor-custom-embed-play i::before{
    
    content: '';
    background: rgba(255,255,255,0.2);
    border-radius: 100px;
    top: calc(50% - 48px);
    display: block;
    left: calc(50% - 48px);
    width: 96px;
    height: 96px;
   border: 1px solid transparent;
   animation: waves 3s infinite;
}

@keyframes waves {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
:is(.scaledVideo,.reelVideo) .elementor-custom-embed-play i::after{
    content: '';
    display: block;
    width: 0;
height: 0;
position: absolute;
top: calc(50% - 28px);
left: calc(50% - 18px);

border-style: solid;
border-width: 25px 0 25px 48px;
border-color: transparent transparent transparent #ffffff;
}
#main-grid .elementor-shortcode {
    transition: opacity .3s;
}

.sss-grid.projects .elementor-shortcode  {
    display: grid !important;
    grid-template-columns: repeat(16, 1fr);
    /*grid-auto-rows: calc(6.25vw - 16px);*/
    grid-auto-flow: dense;
    gap: 16px;
    padding: 16px;
}
.sss-grid:not(.projects) .elementor-widget-wrap{
    display: grid !important;
    grid-template-columns: repeat(16, 1fr);
    /*grid-auto-rows: calc(6.25vw - 16px);*/
    grid-auto-flow: dense;
    gap: 16px;
    padding: 16px;
}
.small {
    grid-column: span 4;
}

.medium {
    grid-column: span 8;
}

.large {
    grid-column: span 16;
}

.sss-grid-item.favorite {
    
    order: -1;
}

.small.square {
    grid-row: span 4;
    
}

.medium.square {
    grid-row: span 8;
    
}

.medium.rectangle-4x3 {
    grid-row: span 6;
    
}

.medium.rectangle-16x9 {
    grid-row: span 5;
    
}

.small.rectangle-3x4 {
    grid-row: span 6;

}
.small.rectangle-9x16 {
    grid-row: span 7;

}


.large.rectangle-16x9 {
    grid-row: span 9;
    
}


.sss-grid-item {
    position: relative;
    overflow: hidden;
    transition: all .2s ;
}

.sss-grid-item .cover {
    width: 100%;
    
}

.sss-grid-item .cover img,
.sss-grid-item .cover video,
.sss-grid-item .cover iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
.sss-grid-item .cover iframe {
    object-fit: fill;
}
@supports (aspect-ratio: 1 / 1){
.square .cover{
    aspect-ratio: 1 / 1;
    
}
.rectangle-3x4 .cover{
    aspect-ratio: 3 / 4;
}
.rectangle-4x3 .cover{
    aspect-ratio: 4 / 3;
    
}
.rectangle-16x9 .cover{
    aspect-ratio: 16 / 9;
}
.rectangle-9x16 .cover{
    aspect-ratio: 9 / 16;
} 
}
@supports not (aspect-ratio: 1 / 1){
    .square .cover{
        height: 0px;
        padding-top: 100%;
        
    }
    .rectangle-3x4 .cover{
        height: 0px;
        padding-top: 133.3333%;
    }
    .rectangle-4x3 .cover{
        height: 0px;
        padding-top: 75%;
        
    }
    .rectangle-16x9 .cover{
        height: 0px;
        padding-top: 56.25%;
    }
    .rectangle-9x16 .cover{
        height: 0px;
        padding-top: 177.7777%;
    } 
    }
.project.sss-grid-item .cover :is(img, video, iframe) {
    transition: all .3s;
}

.project.sss-grid-item:hover .cover :is(img, video, iframe) {
    filter: blur(5px);
    transform: scale(110%);
    
}

.sss-grid-item .overlay {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    inset: 0px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 22.02%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(2px);
    transition: all .3s;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.sss-grid-item:hover .overlay {
    opacity: 1 !important;
    transform: translateY(0px);
}

 .sss-grid-item:not(.project) .overlay {
    display: none !important;
}

.sss-grid-item .content {
    text-align: center;
    color: #fff;
}

.sss-grid-item .content h4 {
    padding-bottom: 10px;
    width: max-content;
    margin: 10px auto;
    border-bottom: 2px solid #fff;
    font-family: 'Futura-Bold';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-rendering: optimizeLegibility;
}

.sss-grid-item .content p {
    font-size: 12px;
    line-height: 1.5em;
    font-family: 'Open Sans';
    max-width: 480px;
    padding: 0px 10px;
    margin: 0px auto;
}

.sss-grid-item .content .actions {
    font-family: 'Open Sans';
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.sss-grid-item .cover .feature_img {
    position: absolute;
    inset: 0px;
    z-index: 1;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

body:not(.single-preview, .single-projects) .sss-grid-item:not(.project) .feature_img {
    display: none;
}

.sss-grid-item.project:not(.autoplay):hover .feature_img {
    display: none;
}
.sss-grid-item.bts .feature_img {
    display: block !important;
}
.sss-grid-item.vimeo .feature_img::after{
    content: '';
    display: block;
    width: 0;
height: 0;
position: absolute;
top: calc(50% - 28px);
left: calc(50% - 18px);

border-style: solid;
border-width: 25px 0 25px 48px;
border-color: transparent transparent transparent #ffffff;
}

.sss-grid-item.vimeo .feature_img::before{
    content: '';
background: rgba(255,255,255,0.2);
border-radius: 100px;
top: calc(50% - 48px);
display: block;
left: calc(50% - 48px);
width: 96px;
height: 96px;
border: 1px solid transparent;
animation: waves 3s infinite;
position: absolute;
z-index: 2;
}

@keyframes waves {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}/* End custom CSS */

.sss-grid-item .content .actions a {
    font-size: 14px;
    font-weight: 700;
    display: block;
    text-transform: uppercase;
    padding: 4px 12px;
    border: 2px solid #fff;
    border-radius: 15px;
    margin: 5px;
    cursor: pointer;
    line-height: 16px;
    color: #fff;
}

.sss-grid-item.autoplay .quickPlayButton {
    display: none;
}

.sss-grid-item .content .actions a:hover {
    background: #fff;
    color: rgba(0, 0, 0, 1);
}

.sss-grid-item .direction-details {
    display: flex;
    padding: 8px;
    justify-content: space-between;
}

.sss-grid-item .direction-details a {
    font-size: 12px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    padding: 4px 12px;
    font-family: 'Open Sans';
    cursor: pointer;
    line-height: 16px;
}
.sss-grid-item .direction-details a:hover{
    opacity: 0.8
}
@media (max-width: 1024px) {

    .small {
        grid-column: span 8;
    }

    .small.square {
        grid-row: span 8;
    }

    .small.rectangle-3x4 {
        grid-row: span 6;
    }
    .small.rectangle-9x16 {
        grid-row: span 5;
    }
    
    .medium {
        grid-column: span 16;
    }

    .medium.square {
        grid-row: span 16;
    }

    .medium.rectangle-4x3 {
        grid-row: span 12;
    }

    .medium.rectangle-16x9 {
        grid-row: span 9;
    }

    

}

@media (max-width: 767px) {
    .small {
        grid-column: span 16;
    }

    .small.square {
        grid-row: span 16;
    }

    .small.rectangle-3x4 {
        grid-row: span 12;
    }
    .small.rectangle-9x16 {
        grid-row: span 10;
    }
    
}

@media (hover: none) {
    .sss-grid-item .overlay {
    display:none !important;
}
    .project.sss-grid-item:hover .cover :is(img, video, iframe) {
        filter: none;
        transform: none;
    }
    .sss-grid-item.project .overlay {
        opacity: 0;
        transform: none;
    }
    .sss-grid-item.project .overlay * {
        display: none !important;
    }
    .sss-grid-item.image .cover .feature_img {
     display: none !important;

}
}


#feature-video{
    
    width: 100vw;
    aspect-ratio: 16 / 9;
    height: 56.25vw;
}

@media (min-width: 768px){
    #feature-video{
        position: fixed;
         -webkit-position: fixed;
    top: 0px;
    left: 0px;
    
    }
}

.video_controls{
    display: block;
    position: fixed;
    top: calc(50% - 60px);
    left: 30px;
    cursor: pointer;
    background: black;
    
    color: white;
    border-radius: 40px;
    
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;

}
.video_controls i{
    font-size:16px;
    vertical-align: middle;
    
    line-height:40px;
}
.videoMT{
    top: 50%;
}



.gallery-popup{
    position: fixed;
    inset:0px;
    z-index: 1000;
    background: rgba(0,0,0,0.6);
    display: none;
    color: #fff;
    overflow-y: auto;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
.gallery-popup .popup-social{
    position: fixed;
    width: 100vw;
    bottom: 0px;
    left:0px;
}
.gallery-popup .popup-social .elementor-column{
    
    justify-content: center;
}
.gallery-popup .popup-social a{
    background: none;
}

.gallery-popup .content{
    margin: 80px auto;
    max-width: 63vw;
    display:flex;
    align-items: center;
}
.gallery-popup .container{
    padding-top: 56.25%;
    position: relative;
    width: 100%;
}
.gallery-popup .popup-header .elementor-column{
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    
}
.gallery-popup .popup-header .elementor-column:nth-child(2){
    justify-content: flex-end;
}
.gallery-popup .closePopup{
    background: none;
    padding: 0px;
    
}
.gallery-popup .popup-header i::before{
    font-size: 60px;
}
.gallery-popup iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

@media (max-width:768px){
    .gallery-popup .popup-header i::before{
    font-size: 40px;
}
    
    .gallery-popup .popup-header .elementor-column{
        width: 50% !important;
    }
}

.slide-container{
    width: 63vw;
    margin:0px auto;
}
.gswiper{
    width: 100%;
    height: 80vh;
    position: relative;
}
.gswiper :is(.gallery-button-next,.gallery-button-prev){
    position: absolute;
    top: calc(50% - 30px);
    width: 60px;
    height: 60px;
    line-height: 60px;
    left: -60px;
    text-align: center;
    cursor: pointer;
}
.gswiper .gallery-button-next{
    left: auto;
    right: -60px;
}
.gallery-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
}
.gallery-slide{
    position: absolute;
    inset:0px;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
.gallery-slide img{
    position: absolute;
    inset:0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Futura-Bold';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://sss.studio/wp-content/uploads/2022/04/futuralt-bold-webfont.woff2') format('woff2'),
		url('https://sss.studio/wp-content/uploads/2022/04/futuralt-bold-webfont.woff') format('woff'),
		url('https://sss.studio/wp-content/uploads/2022/04/FuturaLT-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */