/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

@font-face {
    font-family: 'Arcade Pixel';
    src: url('font/ArcadePixel-Regular.ttf');
}
@font-face {
    font-family: 'Arcade Classic';
    src: url('font/ARCADECLASSIC.ttf');
}
@font-face {
    font-family: 'Ocra';
    src: url('font/OCRA.ttf');
}
#main {
    background: linear-gradient(to right, rgb(6, 0, 24) 0%, rgb(152, 23, 77) 50%, rgb(6, 0, 24) 100%)!important;
}
:is(.page-parent, .page-id-1680) #main::before {
    content: '';
    height: calc(100% - 941px);
    width: 1098px;
    position: absolute;
    border: solid 4px #1c181a;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    top: 895px;
}
.page.page-template.page-parent:not(.page-id-9) #main::before {
    top: 25vh;
    height: calc(100% - 30vh);
}


:is(.page-parent, .page-id-1680) .row.row-collapse {
    max-width: 1090px;
    background-color: #7a123b;
    padding: 0 40px;
}

.page-parent section.proj_template .row.row-collapse, .page-parent section.proj_template ~ section .row.row-collapse {
    background-color: transparent;
}

.page-parent section.proj_template ~ section .has-video .hero_text_box {
    display: flex;
    flex-direction: column;
}

p {
    font-family: 'Ocra';
    font-size: 15px;
}
h1 {
    font-family: 'Arcade Classic';
    font-size: 44px;
}
h2 {
    font-family: 'Arcade Pixel'!important;
    color: rgb(230 33 101);
    font-size: 36px;
}
h3 {
    font-family: 'Arcade Pixel'!important;
    font-size: 30px;
    font-weight: 300;
    text-shadow: 2px 2px 0px #de1261;
}
h4 {
    font-family: 'Arcade Pixel'!important;
    font-size: 20px;
    font-weight: 300;
    text-shadow: 2px 2px 0px #de1261;
}
h5 {
    font-family: 'Arcade Pixel'!important; 
    text-shadow: 2px 2px 0px #de1261;
}
h6 {
    font-family: 'Arcade Pixel'!important; 
    font-size: 24px;
    opacity: 1!important;
}
.p11, .p11 p {
    font-size: 12px;
}
.p12, .p12 p {
    font-size: 12px;
}
.margin_bottom0 *, .margin_bottom0 {
    margin-bottom: 0!important;
}
.padding_bottom0 > div {
    padding-bottom: 0!important;
}
.padding0, .padding0 > div {
    padding: 0!important;
}
.zindex10 {
    z-index: 10;
}
.button_default {
    background-color: #D0286F!important;
    width: 200px;
    padding: 5px;
    font-family: 'Ocra';
}
.partecipa_button {
    width: 100%;
    font-family: 'Arcade Pixel'!important;
    font-size: 30px;
    font-weight: 300;
    text-shadow: 2px 2px 0px #de1261;
    box-shadow: 0 0 8px 2px rgb(255 0 98), inset 0 0 8px 2px rgb(255, 0, 98);
    margin: 0;
}
.partecipa_button:hover {
    box-shadow: 0 0 10px 4px rgb(255 0 98), inset 0 0 8px 2px rgb(255, 0, 98)!important;
    background-color: transparent!important;
    border-color: unset!important;
}
.home_hero_video h1{
    font-family: 'Arcade Classic';
    font-size: 80px !important;
}
.home_hero_video .h1_color{
    position: absolute;
    top: 18px;
    text-align: center;
    width: fit-content;
    margin: auto;
    left: 0;
    right: 0;
}
.h1_color h1 {
    text-shadow: 2px 2px 5px #ff008a, -2px -2px 5px #e52e71;
    background: linear-gradient(to right, #ff5c8e, #e52e71);
    -webkit-background-clip: text;
    color: transparent;
}
.is-border, .ring_manifesto > div {
    box-shadow: 0 0 8px 2px rgb(255 0 98), inset 0 0 8px 2px rgb(255, 0, 98);
}
.is-border:hover, .ring_manifesto > div:hover {
    box-shadow: 0 0 10px 4px rgb(255 0 98), inset 0 0 8px 2px rgb(255, 0, 98);
}
.hero_banner_video {
    background-color: transparent!important;
}
.hero_banner_video video {
    height: auto;
    margin: auto!important;
    max-width: 1100px;
}
.hero_banner_video::before {
    content: '';
    height: 100%;
    width: 1094px;
    position: absolute;
    border: solid 3px #1c181a;
    left: 50%;
    transform: translateX(-50%);
}

.has-video .bg {
    display: block;
    z-index: 2;
}

.manifesto .banner {
    background-color: transparent!important;
}
.manifesto .banner .bg-fill {
    background-size: contain!important;
}
.ring_manifesto {
    position: absolute;
    display: flex;
    justify-content: space-around;
    width: 100%;
    left: 0;
    bottom: -39px;
}
.ring_manifesto > div {
    border: 2px solid white;
    width: 36px;
    height: 64px;
    border-radius: 20px;
    z-index: 2;
}

:is(.page-id-9, .page-id-1680) :is(.bg_game, .bg_game1) {
    background-image: url(https://www.theinnovation-game.com/wp-content/uploads/2023/12/103_RetroVHS3-scaled.jpg);
}
.bg_game , .bg_game1 {
    height: 300px;
    background-size: cover;
    padding: 0!important;
    overflow: hidden;
}
.bg_game {
    background-position-y: 20%;
}
.bg_game1 {
    background-position-y: 80%;
}
:is(.bg_game, .bg_game1) > .col > .col-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}
.bg_game .img, .bg_game1 .img {
    width: 60px!important;
}
.img60 .img {
    width: 60px!important;
}
.img100 .img {
    width: 100px!important;
}
.img160 .img {
    width: 160px!important;
}

.fire .img:nth-child(2) {
    position: absolute;
    left:330px;
    width: 60px!important;
}
.fire2 .img:nth-child(3) {
    top: 70px ;
}
.fire .img:nth-child(3) {
    position: absolute;
    left:430px;
    width: 60px!important;
}
.fire .img:nth-child(4) {
    position: absolute;
    left:530px;
    width: 60px!important;
}
.fire2 .img:nth-child(4) {
    bottom: 70px ;
}

.reverse_fire.img {
    transform: rotatey(180deg);
    width: 160px!important;
    top: unset !important;
}
.reverse_banner .row {
    position: absolute;
}
.row_fire {
    width: auto!important;
    right: 340px;
    background-color: transparent!important;
    padding: 0!important;
}
.row_fire .img:nth-child(3) {
    top: unset!important;
}
.row_fire > .col .img:nth-child(2) {
    right: -80px;
}
.col-inner>.img:not(:last-child), .col>.img:not(:last-child) {
    margin-bottom: 0;
}
.bg_h4 {
    padding: 20px;
    background-color: rgb(135,72,106);
}
.journey_col > div {
    height: 220px;
}
.col_journey .col-inner .flip_img  {
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

.col_journey .col-inner:hover .flip_img  {
    transform: translate(-50%,-60%)!important;
    transition: transform 0.6s ease-out;
}
.banner_pacman video {
    object-fit: contain;
}

.curve_line {
    left: 50%;
    position: absolute;
}
.curve_line2 {
    left: 50%;
    position: absolute;
    transform: rotateX(180deg);
}
.pum_running {
    position: relative;
    top: -100px;
    width: 110%!important;
    left: -20px;
    transition: transform 0.3s ease-in-out;
}
.pum_running2 {
    position: relative;
    top: -80px;
    left: -20px;
    transition: transform 0.3s ease-in-out;
}
.pum_stand {
    transition: transform 0.3s ease-in-out;
}
.pum_running:hover, .pum_stand:hover, .pum_running2:hover {
    transform: translateX(-5px);
    animation: shake 0.5s ease-in-out;
} 
.foot {
    position: absolute;
}
.foot:nth-child(1) {
    left: 90px;
    transform: rotate(18deg);
}
.foot:nth-child(2) {
    left: 240px;
    transform: rotate(8deg);
}
.foot:nth-child(3) {
    left: 260px;
    top: 100px;
    transform: rotate(350deg);
}
.foot:nth-child(4) {
    left: 350px;
    top: 20px;
    transform: rotate(337deg);
}
.line_shadow {
    box-shadow: 0 0 8px 2px rgb(255 0 98);
}
.line1, .line2, .line3, .line4, .line5, .line6 {
    position: absolute;
    background-color: white;
    animation: muoviLaterale 5s linear infinite;
    animation-delay: 4s;
}
.line1 {
    width: 4%;
    height: 5px;
    left: 20%;
    top: 20%;
}
.line2 {
    width: 20%;
    height: 5px;
    left: 50%;
    top: 16%;
}
.line3 {
    width: 20%;
    height: 2px;
    left: 40%;
    top: 45%;
}
.line4 {
    width: 4%;
    height: 5px;
    right: 10%;
    top: 70%;
}
.line5 {
    width: 20%;
    height: 5px;
    right: 5%;
    top: 85%;
}
.line6 {
    width: 20%;
    height: 5px;
    left: 5%;
    top: 85%;
}
@keyframes muoviLaterale {
    0% {
      transform: translateX(-100vw);
    }
    
    100% {
      transform: translateX(1100vw);
    }
}

.shield {
    animation: spin 5s infinite;
}

@keyframes spin {
    0% { 
        top: 0;
        transform: rotateY(0);
    }
    50% {
        top: -30px;
        transform: rotateY(720deg); 
    }
    100% { 
        top: 0px;
        transform: rotateY(0deg); 
    }
}

.bg1_h4 {
    padding: 20px;
    background-color: rgb(97,68,94);
}
.row_challenges > div:hover .bg1_h4 {
    background-color: rgb(131, 91, 127);
}
.row_challenges > div {
    transition: transform 0.3s ease-in-out;
}
.row_challenges > div:hover img {
    transform: translateX(-5px); /* Puoi regolare la quantità di "shake" cambiando il valore di translateX */
    animation: shake 0.5s ease-in-out;
}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(-5px);
    }
    30%, 50%, 70% {
        transform: translateX(5px);
    }
}

.row_challenges > div:nth-of-type(odd) {
    margin-top: -40px;
}
.row_challenges > div:nth-of-type(even) {
    margin-top: 40px;
}
.challenges_col > div {
    height: 280px;
}
.challenges_col.h350 > div {
    height: 350px;
}
.challenges_icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    transform: rotateY(180deg);
}

/****LEVEL POPUP*****/
.level1 {
    background: linear-gradient(to bottom, rgb(119, 19, 67), rgb(59, 11, 48));
    box-shadow: 0 0 8px 2px rgb(255 0 98);
    border: 2px solid white;
}
.level2 {
    background: linear-gradient(to bottom,  rgb(59, 11, 48), rgb(59, 7, 32));
    box-shadow: 0 0 8px 2px rgb(255 0 98);
    border: 2px solid white;
}
.level3 {
    background: linear-gradient(to bottom,  rgb(59, 11, 48), rgb(24, 4, 13));
    box-shadow: 0 0 8px 2px rgb(255 0 98);
    border: 2px solid white;
}
.level .img {
    width: 80px!important;
}
.level .level_img {
    position: absolute;
}
.bg_h4_level {
    padding: 12px 90px;
    background-color: rgb(201 201 201 / 50%);
    min-width: 430px;
}
.col_level_flex > div {
    display: flex;
    align-items: center;
}
.level_col6 > div {
    border: 2px solid #ffffffbd;
    padding: 12px;
    box-shadow: 0 0 8px 2px rgb(255 0 98);
    height: 238px;
}
.level_col6 > div h4 {
    margin-bottom: 15px;
}

.bg_h4_next_level {
    background-color: rgb(201 201 201 / 50%);
    width: 100%;
    padding: 12px 0 12px 90px;
}
.col_level_flex {
    display: flex;
    align-items: center;
}
.arrow {
    opacity: 0;
    right: 0;
    filter: invert(1);
    animation: blinkArrow 1s infinite;
    animation-delay: 5s;
}
@keyframes blinkArrow {
    0%, 100% { 
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
.col_criteri .row .is-border {
    box-shadow: none;
}

.play_button {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #333; /* Imposta il colore del bordo qui */
    display: inline-block;
    transform: rotate(-90deg);
}
.ready_arrow_left > div, .ready_arrow_right > div  {
    display:flex;
}
.ready_arrow_right .img, .ready_2arrow {
    transform: rotate(180deg);
}
.ready_middle_arrow {
    margin: 0 -60px!important;
}
.slider_video .flickity-page-dots .dot {
    border: 3px solid #fff;
    height: 20px;
    width: 20px;
}
.slider_video .flickity-page-dots {
    bottom: -10px;
}
.piedino_sx {
    border-radius: 50%;
    background: #060506;
    height: 50px;
    width: 50px;
    position: relative;
    bottom: 25px;
    z-index: -1;
    transform: translateX(50%);
    right: -200px;
}
.piedino_dx {
    border-radius: 50%;
    background: #060506;
    height: 50px;
    width: 50px;
    position: absolute;
    bottom: 25px;
    z-index: -1;
    transform: translateX(50%);
    right: 250px;
}
/************ PROJECT GALLERY **************/
.bg_black_br20 > div {
    border: solid 1px;
    border-radius: 20px;
    background-color: black;
    height: 120px;
}

/*********** SINGLE PROJ ***************/
.single_proj_cont {
    margin-top: -400px;
}
.bg_single_proj {
    background: linear-gradient(to bottom,  #05001A, black);
}
.single_proj_cont > div > div {
    border: solid 1px;
    border-radius: 20px;
}
.img_single_proj {
    width: 220px;
    height: 220px;
    object-fit: cover;
}
.col_title_single_proj > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.title_single_proj h2:before {
    content: '';
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, #fff, #fff 3px, transparent 3px, transparent 6px);
    transform: translateY(-50%);
}
.title_single_proj p {
    font-family: 'Arcade Pixel';
    font-size: 24px;
}
.proj_title_row {
    margin-bottom: -25px;
}
.single_proj_cont iframe {
    width: 100%;
    height: 500px;
}
.ultimo_aggiornamento {
    position: absolute;
    right: 40px;
    top: 20px;
}
.ultimo_aggiornamento p {
    font-size: 12px;
}
.stella_single_proj {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
}
.access_md_proj {
    position: absolute;
    font-size: 12px;
    right: -17px;
    bottom: -65px;
}


.hero_banner h1{
    font-family: 'Arcade Classic';
    font-size: 80px !important;
}

.hero_banner h2{
    font-family: 'Arcade Pixel';
    font-size: 50px !important;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.hero_banner h2 {
    animation: blinker 1s linear infinite;
}


@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes float {
    0% { transform: translatey(0px); }
    50% { transform: translatey(-10px); }
    100% { transform: translatey(0px); }
}

.home_hero_video, .home_hero_video video{
    width: 100%;
    max-width: 1090px;
    height: auto;
    margin: auto;
}

.home_hero_video #volumeIcon {
    position: absolute;
    bottom: 70px;
    right: calc( 50% - 25px);
    cursor: pointer;
    font-size: 40px;
    color: white;
    z-index: 1;
    animation: float 2s ease-in-out infinite;
}

.home_hero_video_mobile, .home_hero_video_mobile video{
    /width: 685px;
    width: 100%;
    height: auto;
    margin: auto;
}

.home_hero_video_mobile video{
    /transform: translateX(calc((100vw - 685px)/2));
}

.home_hero_video_mobile #volumeIcon_mobile {
    position: absolute;
    bottom: -18px;
    left: 0;
    transform: translateX(calc((100vw - 350px)/2));
    cursor: pointer;
    font-size: 20px;
    color: white;
    z-index: 1;
    border: solid 1px white;
    border-radius: 20px;
    height: 36px;
    width: 350px;
    text-align: center;
    background-color: black;
    font-family: 'Ocra';
}


.pum-container {
    box-shadow: inherit !important;
    background-color: transparent !important;
}

.pum-container > .pum-content {
    margin-bottom: 150px !important;
}


@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}


.text_spin {
    animation: blinker 1.5s linear infinite;
}

.zindex0 {
    z-index: 0;
}

.zindex99 {
    z-index: 99;
}

#logo > a {
    font-family: 'Arcade Classic';
}

.header-inner .nav-top-link{
    font-family: 'Ocra';
    font-size: 12px;
}

.header-nav-main.nav > li.active > a {
    color: white !important;
}

.nav-line-bottom>li>a:before {
    content: inherit;
}

.nav-line-bottom>li:hover>a:before {
    content: " ";
}

.sidebar-menu .menu-item > a{
    font-family: 'Ocra' !important;
    color: white;
}

#footer {
    display: none;
}

.ig_interesse_form input, .ig_interesse_form textarea{
    background-color: transparent;
    border: solid 1px white;
    color: white;
}

.ig_interesse_form button{
    background-color: #D0286F;
    width: 100%;
    padding: 5px;
}

.section_sfondo {
    background: linear-gradient(to bottom,  #05001A, black);
}


.video.video-fit.mb {
    padding-top: 50px !important;
}

.videochallenge_fix .mejs-overlay.mejs-layer.mejs-overlay-play{
    height: calc(100% - 40px) !important;
}

.videochallenge_fix .mejs-container.wp-video-shortcode.mejs-video{
    height: 170px !important;
}

/***************GENERATIVE AI*****************/

.select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection, select {
    min-width: 255px;
    padding-right: 1.5em;
    background-image: url("data:image/svg+xml;charset=utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}
.row_manifesto_ai {
    margin-top: 100px;
}

/***************GENERATIVE AI END VECCHIO*****************/

#pum-1483 .pum-content{
    border-color: rgb(255, 255, 255);
    border-radius: 20px;
    border-width: 2px 2px 2px 2px;
    border-color: white;
    box-shadow: 0 0 8px 2px #2EAEFF, inset 0 0 8px 2px #2EAEFF;
    overflow: hidden;
}

#pum-1483 .pum-close{
    top: 30px;
    right: 10px;
    background-color: transparent;
    color: #14c7ff;
    font-size: 30px;
    line-height: 30px;
}

.blinking_text {
    animation: blinker 1s linear infinite;
}

/***************AI POWERED ITALTEL start***********************************************************/


.page-id-1344 #main {
    background: linear-gradient(to right, #002c39 0%, #047597 50%, #002c39 100%)!important;
}

.row_manifesto_ai.project_page {
    margin-top: 235px;
}


.page.page-template.page-parent.page-id-1344 #main::before {
    background: linear-gradient(to bottom, 
        #0C71A5 0%,     /* Blu in alto */
        #1F0727 30%,    /* Blu più scuro */
        #070118 50%,    /* Blu ancora più scuro */
        #1F0727 70%,    /* Viola chiaro */
        #0C71A5 100%    /* Viola medio */
    );
}
.page-id-1344 .banner_ai .banner-bg, .borderradius20 .is-border {
    border-radius: 20px;
}
.borderradius10 .is-border {
    border-radius: 10px;
}
.page-id-1344 .is-border, .page-id-1344 .ring_manifesto > div{
    box-shadow: 0 0 8px 2px #2EAEFF, inset 0 0 8px 2px #2EAEFF;
}
.page-id-1344 .is-border:hover, .page-id-1344 .ring_manifesto > div:hover {
    box-shadow: 0 0 10px 4px #2EAEFF, inset 0 0 8px 2px #2EAEFF;
}
.page-id-1344 h3, .page-id-1344 h4 {
    text-shadow: 2px 2px 0px #2EAEFF;
}

.page-id-1344 .line_shadow {
    box-shadow: 0 0 8px 2px #2EAEFF;
}

.page-id-1344 .bg1_h4 {
    background-color: rgba(255, 255, 255, 0.25);
}

.page-id-1344 .rules_icon .is-border {
    background-color: #003151;
}
.page-id-1344 .col_chall:hover img {
    transform: translateX(-5px);
    animation: shake 0.5s ease-in-out;
}
.page-id-1344 .partecipa_button {
    text-shadow: 2px 2px 0px #2EAEFF;
    box-shadow: 0 0 8px 2px #2EAEFF, inset 0 0 8px 2px #2EAEFF;
}

.page-id-1344 .partecipa_button:hover {
    box-shadow: 0 0 10px 4px #2EAEFF, inset 0 0 8px 2px #2EAEFF !important;
}

.page-id-1344 .button_default {
    background-color: #0D6FA2 !important;
}

.page-id-1344 .button_default span {
    display: block!important;
}
.page-id-1344 div[class*="bg_game"]  {
    background-image: url(https://www.theinnovation-game.com/wp-content/uploads/2024/05/image2.jpeg);
    height: 300px;
    padding: 0!important;
    overflow: hidden;
}

.page-id-1344 div[class*="bg_game"] .col-inner {
    height: 100%;
}

.page-id-1344 .bg_game1 {
    background-position-y: 0%;
}
.page-id-1344 .bg_game2 {
    background-position-y: 20%;
}
.page-id-1344 .bg_game3 {
    background-position-y: 40%;
}
.page-id-1344 .bg_game4 {
    background-position-y: 60%;
}
.page-id-1344 .bg_game5 {
    background-position-y: 80%;
}
.page-id-1344 .bg_game6 {
    background-position-y: 100%;
}

.page-id-1344 #main::before {
    border: solid 1px white;
}

.page-id-1344 .flickity-page-dots {
    bottom: -50px;
}

.page-id-1344 .flickity-page-dots .dot{
    border: 3px solid white;
}

.page-id-1344 .flickity-page-dots .dot.is-selected{
    background-color:  white;
}

.page-id-1344 .link_color u {
    color:#0D6FA2!important;
}
.page-id-1344 .link_color a:hover u {
    color:#159be4!important;
}

.criteri_row h3 {
    font-size: 24px!important;
}
*/
/*template di inserimento progetto*/
.page-id-1343 .bg_single_proj{
    background: linear-gradient(to bottom, #001625, black);
}
.page-id-1343 .submit_button {
    background-color: #0D6FA2;
}
.page-id-1343 .bg_single_proj a {
    color: #5dacd5;
}



/*template di modifica progetto*/
.page-id-1431 .bg_single_proj{
    background: linear-gradient(to bottom, #001625, black);
}
.page-id-1431 .submit_button {
    background-color: #0D6FA2;
}
.page-id-1431 .bg_single_proj a {
    color: white;
}
/*Login Form modifica*/
.page-id-1431 .ig_project_login_form .submit_button_cont button {
    background-color: #2EAEFF;
    width: 50%;
    padding: 5px;
}
/*template di GALLERY*/
.page-id-1391 .bg_single_proj{
    background: linear-gradient(to bottom, #001625, black);
}
.page-id-1391 h3, .page-id-1391 .project_desc > h4{
    text-shadow: 2px 2px 0px #2EAEFF;
}
.page-id-1391 .star_cont, .page-id-1391 .ig_sorting_select .select-items > div:nth-child(2){
    display: none;
}


/***************AI POWERED ITALTEL end***********************************************************************/





/***************GESTISCO LANDING PAGE CON ACCESSO ESTERNO***********************************************************************/

/* pagina 1680 (call for startup) */

.page-id-1680 .logo {
    pointer-events: none;
}

.page-id-1680 .project_selector_cont{
    display: none;
}

/*****POPUP FORM******/

#open-popup-btn {
    font-family: 'Ocra';
    font-size: 15px;
    margin: 0px;
    font-size: 18px;
    text-align: center;
    width: 100%;
}
.cf7-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cf7-popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    position: relative;
    padding-bottom: 40px;
    margin-top: 70px;
}

.cf7-close-popup {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 9;
}

.cf7-step#step-1, .cf7-step#step-3 {
    max-width: 400px;
    margin: auto;
}

.cf7-popup-content h2 {
    font-size: 24px;
    margin-bottom: 15px;
    text-align: center;
}

.cf7-popup-content label {
    display: block;
    margin-bottom: 10px;
    color: white!important;
}

.cf7-popup-content input,
.cf7-popup-content select,
.cf7-popup-content textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.cf7-popup-content button {
    background-color: #761343;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0px !important;
    position: absolute;
    bottom: -90px;
    box-shadow: 0 0 8px 2px rgb(255 0 98);
    border: 2px solid white;
    width: 120px;
}

.next-btn {
    right: 0px;
}

.prev-btn {
    left: 0px;
}
/*
.posts-grid {
    display: flex;
    gap: 20px;
    overflow: auto;
    padding: 20px;

}


*/


.posts-grid {
    display: flex;
    overflow-x: hidden;
    gap: 20px;
    scroll-behavior: smooth;
    width: 80%;
    margin: 0 auto;
    padding: 24px 0;
}

button.scroll-left,
button.scroll-right {
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    position: absolute;
    bottom: 0!important;
    box-shadow: none!important;
}
button.scroll-left {
    top: 54%;
    transform: translateY(-50%);
    left: -11px;
}
button.scroll-right {
    top: 54%;
    transform: translateY(-50%);
    right: -12px;
}
button.scroll-left img {
    transform: rotate(180deg); /* Ruota la freccia verso sinistra */
    width: 40px; /* Puoi aggiustare la dimensione */
    filter: invert(1);
}

button.scroll-right img {
    width: 40px; /* Stessa dimensione per la freccia destra */
    filter: invert(1);
}

.cf7-popup .wpcf7 input[type="file"] {
    color: #ffffff63;
}



.cf7-popup .wpcf7-acceptance label {
    display: flex;
}

.cf7-popup .wpcf7-acceptance label input {
    width: 20px!important;
}

.cf7-popup .wpcf7 form .wpcf7-response-output {
    color: white !important;
    width: max-content;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}





.post-item {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    min-width: 230px;
    position: relative;
    border: solid 3px transparent;
    cursor: pointer;
}

.post-thumbnail img {
    max-width: 100%;
    border-radius: 8px;
    height: 90px;
    width: 100%;
    object-fit: cover;
}

.post-info {
    margin-top: 10px;
}

.post-title {
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.post-title a {
    pointer-events: none;
}

.post-meta {
    font-size: 14px;
    color: #666;
    display: none;
}

input[type='submit'].send_form {
    color: white;
    background-color: #de1261;
}

.post-selection {
    width: 36px;
    position: absolute;
    height: 36px;
    top: -18px;
    right: -18px;
    display: none;
}

.post-item.selected {
    border: solid 3px black;
}

.post-item.selected .post-selection {
    display:block;
}

input.selected_project_input, input.selected_project_input + .char-counter {
    display: none;
}

.captcha_condition {
    font-size: 11px;
    color: white;
    margin: 10px 0px  !important;
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 100%;
    padding: 0px 10% !important;
    /* margin: unset; */
    text-align: center;
}

.grecaptcha-badge {
    display: none;
}

.cf7-popup form {
    padding-bottom: 14px;
}
.cf7-popup form.sent #step-3 {
    display: none!important;
}
.cf7-popup form.sent .wpcf7-response-output {
    margin-top: 40px;
}
.cf7-popup .wpcf7-spinner {
    display: none!important;
    visibility: hidden!important;
}

@media only screen and (max-width: 549px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


    .pum-container {
        top: 35px !important;
    }

    .pum_running, .steve_running {
        position: static;
        width: 56%!important;
        margin: 0px auto 35px;
    }

    .challenges_col > div {
        height: auto;
    }

    .row_challenges > div:nth-of-type(odd) {
        margin-top: 40px;
    }

    .row_challenges > div:first-child {
        margin-top: 0px;
    }

    .row > .rules_icon {
        margin-top: 40px;
    }

    .rules_icon .is-border {
        width: 100px;
        height: 100px;
        margin: auto;
    }

    .rules_icon .img-inner, .rules_icon .img {
        width: 70px;
        height: 70px;
        margin: auto;
    }

    .application_timeout {
        padding-top: 120px !important;
    }

    .level2_popuprow > .col:nth-child(0){
        order: 1;
    }
    .level2_popuprow > .col:nth-child(1){
        order: 2;
    }
    .level2_popuprow > .col:nth-child(2){
        order: 3;
    }
    .level2_popuprow > .col:nth-child(3){
        order: 4;
    }
    .level2_popuprow > .col:nth-child(4){
        order: 5;
    }
    .level2_popuprow > .col:nth-child(5){
        order: ;
    }
    .level2_popuprow > .col:nth-child(6){
        order: 6;
    }
    .level2_popuprow > .col:nth-child(7){
        order: 11;
    }
    .level2_popuprow > .col:nth-child(8){
        order: 7;
    }
    .level2_popuprow > .col:nth-child(9){
        order: 10;
    }
    .level2_popuprow > .col:nth-child(10){
        order: 12;
    }
    .level2_popuprow > .col:nth-child(11){
        order: 8;
    }
    .level2_popuprow > .col:nth-child(12){
        order: 13;
    }
    .level2_popuprow > .col:nth-child(13){
        order: ;
    }
    .level2_popuprow > .col:nth-child(14){
        order: ;
    }
    .level2_popuprow > .col:nth-child(15){
        order: 9;
    }
    .level2_popuprow > .col:nth-child(16){
        order: 14;
    }
    .level2_popuprow > .col:nth-child(17){
        order: ;
    }
    .level2_popuprow > .col:nth-child(18){
        order: ;
    }
    .level2_popuprow > .col:nth-child(19){
        order: 15;
    }
    .level2_popuprow > .col:nth-child(20){
        order: ;
    }
    .level2_popuprow > .col:nth-child(21){
        order: ;
    }



    .hero_banner h1 {
        font-size: 60px !important;
    }
    .filter_cont {
        flex-direction: column
    }
    .filter_cont > * {
        margin: 10px 0px;
    }

    .bg_black_br20 .col-inner{
        height: auto;
        width: calc(100% - 20px);
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .bg_h4_level {
        min-width: 100%;
    }
    

    .nav-vertical>li {
        justify-content: center;
    }
    .project_selector_cont {
        margin-bottom: 100px;
        margin-top: -100px;
    }

    .home_hero_video h1 {
        font-size: 30px!important;
    }
    :is(.page-parent, .page-id-1680) .row.row-collapse {
        padding: 0 20px;
    }
    button.scroll-right {
        right: -56px;
    }
    button.scroll-left {
        left: -56px;
    }
    .post-item {

        min-width: 200px;
    }
    .post-selection {
        width: 28px;
        height: 28px;
        right: -8px;
    }
    .cf7-close-popup {
        position: absolute;
        top: -2px;
        right: 10px;
        font-size: 26px;
        cursor: pointer;
        z-index: 9;
    }
    .cf7-popup-content :is(.prev-btn, .next-btn)  {
        padding: 6px 12px;
        width: 106px;
        font-size: 13px;
    }
    .cf7-popup {
        overflow: auto;
    }
    .cf7-popup-content label {
        font-size: 12px;
    }
    .captcha_condition {
        bottom: -34px;
        font-size: 10px;
        padding: 0 !important;
    }
    .cf7-popup .wpcf7 form .wpcf7-response-output {
        color: white !important;
        width: 100%;
        position: relative;
        left: unset;
        transform: unset;
        top: unset;
    }

}