/* 
Theme Name:		 eTheme-Child
Theme URI:		 https://www.eplaylab.it/
Description:	 eTheme-Child is a child theme of eTheme
Author:			 ePlay
Author URI:		 https://www.eplaylab.it/
Template:		 eTheme
Version:		 2.0
Text Domain:	 etheme-child
*/



@font-face {
    font-family: 'Montserrat-Regular';
    src: url('./fonts/Montserrat-Regular.ttf');
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('./fonts/Montserrat-Bold.ttf');
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('./fonts/Montserrat-SemiBold.ttf');
}

:root {
    --ecreative-black: #000000;
    --ecreative-white: #ffffff;

    --ecreative-first-color: #9DA18E;
    --ecreative-second-color: #C9CDBC;
    --ecreative-third-color: #F8998F;
    --ecreative-fourth-color: #000000;
    --ecreative-fifth-color: #EEEEEC;

    --ecreative-title-color: #949887;
    --ecreative-text-color: #000000;

    --ecreative-hover-color: #F8998F;

    --ecreative-background-color: #ffffff;
    --ecreative-background-color-alt: #EEEEEC;

    --ecreative-font-primary: 'Montserrat-Regular';
}


body {
    margin: unset;
    overflow-x: hidden;
    font-family: var(--ecreative-font-primary);
}

body {
    background-color: #fff; /* Colore di sfondo per la zona del notch */
    padding-top: constant(safe-area-inset-top); /* Per iOS < 11.2 */
    padding-top: env(safe-area-inset-top);      /* Per iOS 11.2+ */
}

section.xox-landing {
    position: relative;
}

.xox-landing__logo {
	width: 160px; height: 70px;
	margin: 0 auto 10px;
	border: 1px dashed #bbb;
	display: grid; place-items: center;
	font-size: 14px;
}

.xox-landing__intro {
	max-width: 780px;
	margin: 0 auto 48px;
	padding: 32px 22px;
	border: 1px solid #e5e5e5;
	background: #fff;
}

.xox-landing__intro p { 
    margin: 0 0 12px; 
    line-height: 1.6; 
}

.xox-landing__intro p:last-child { 
    margin-bottom: 0; 
}

.xox-landing__title { 
    text-align: center; 
    margin-top: 100px;
}

.xox-landing__title h2 { 
    margin: 0; 
    font-size: 30px;
}

.xox-landing__title .sub { 
    margin-top: 8px; 
    font-size: 14px; 
    opacity: .8; 
}

.xox-landing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: start;
    max-width: 75%;
    margin: 35px auto 50px;
}

.xox-card {
	background: #fff;
	padding: 18px;
	text-align: center;
	min-height: 220px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 10px;
}

.xox-card__kicker { 
    font-size: 14px; 
    margin: 0; 
    color: #36383D;
}

.xox-card__cta { 
    font-size: 14px;
    margin: 0; 
}

.xox-landing__grid{
  max-width: 1200px;
  margin: 35px auto 50px;
}

.xox-card__logo{
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
  margin: 35px auto 0;
}

.xox-card__logo img{
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
}

.xox-landing__footer {
    text-align: center;
    padding: 20px 0;
    background: #36383D;
    color: #fff;
    font-size: 14px;
}

.xox-landing__footer a{
    color: #fff;
    text-decoration: none;
}

.xox-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -1px;
}

.xox-hero::before {
    content: '';
    background: #36383D;
    width: 100%;
    height: 75%;
    position: absolute;
    z-index: -1;
}

.xox-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
    margin-bottom: 150px;
    margin-top: 100px;
}

.xox-hero__logo {
    width: 280px;
	margin: 0 auto;
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 14px;
}

.xox-hero__logo img{
    max-width: 100%;
}

.xox-hero__box {
    width: auto;
    max-width: 780px;
    background: #fff;
    padding: 70px;
    text-align: center;
    background-color: #fff !important;
}

.xox-hero__box p {
	margin: 0 0 12px;
    line-height: 25px;
    font-size: 16px;
    color: #36383D;
}

.xox-hero__box p:last-child {
	margin-bottom: 0;
}

.xox-landing__intro {
	margin-top: 100px;
}

body.home .wpb_text_column.wpb_content_element {
    margin: unset;
}

.xox-header-color-wrapper {
    background: #36383D;
}

.xox-header-color-wrapper .xox-header-container {
    width: 100vw;
    height: 88px;
    position: relative;
    overflow: hidden;
}

.xox-header-color-wrapper .xox-color-left {
    width: 60vw;
    height: 75px;
    top: -60px;
    transform: translateX(-5%);
    left: 0;
    background: #3017C9;
    animation: blue-animation 1s ease .2s forwards;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.xox-header-color-wrapper .xox-color-right {
    width: 50vw;
    height: 75px;
    background: #D400D5;
    right: 0;
    top: -60px;
    animation: orange-animation 1.5s ease-out forwards .5s;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.xox-header-color-wrapper .xox-color-center-right {
    width: 25vw;
    height: 150px;
    background: #900B84;
    top: -110px;
    transform: scaleX(2.25);
    right: 30%;
    animation: yellow-orange-animation 1.2s ease-in-out forwards;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.xox-header-color-wrapper .xox-color-center-left {
    width: 25vw;
    height: 150px;
    background: #641097;
    top: -110px;
    transform: scaleX(2.2);
    left: 30%;
    animation: blue-yellow-animation 2s ease-in-out forwards;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.xox-footer-color-wrapper .xox-footer-container {
    width: 100vw;
    height: 88px;
    position: relative;
    overflow: hidden;
}

.xox-footer-color-wrapper .xox-color-left {
    width: 50vw;
    height: 50px;
    top: 75px;
    transform: translateX(-5%);
    left: 0;
    background: #3017C9;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.xox-footer-color-wrapper .xox-color-right {
    width: 50vw;
    height: 50px;
    background: #D400D5;
    right: 0;
    top: 75px;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.xox-footer-color-wrapper .xox-color-center-right {
    width: 25vw;
    height: 150px;
    background: #900B84;
    top: 50px;
    transform: scaleX(2.25);
    right: 30%;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    opacity: 0.7;
}

.xox-footer-color-wrapper .xox-color-center-left {
    width: 25vw;
    height: 150px;
    background: #641097;
    top: 50px;
    transform: scaleX(2.2);
    left: 30%;
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    opacity: 0.7;
}

.xox-landing__title{
    text-align: center;
}

.xox-title{
    position: relative;
    display: inline-block;
    margin: 0;
    font-family: 'Montserrat-Bold';
    font-size: 30px;
    line-height: 1.25;
}

.xox-title__main{ 
    color:#36383D; 
}

.xox-title__muted{
    position: relative;
    display: inline-block;
    color:#A8A8AB;
    margin-left: .25em;
    padding-bottom: 20px;
}
.xox-title__underline{
    position:absolute;
    left:0;
    right:0;
    bottom:2px;
    height:10px;
    pointer-events:none;
    overflow:hidden;
    opacity:.9;
    --x: 50;
    --sx: 1;
}

.xox-title__underline::before{
    content:"";
    position:absolute;
    top:50%;
    left: calc(var(--x) * 1%);
    width: 42%;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg,#ffffff,#ffffff,#3017C9,#641097,#900B84,#D400D5,#ffffff,#ffffff);
    mask-image: radial-gradient(ellipse at center, black 52%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 52%, transparent 78%);
    filter: blur(.55px);
    backdrop-filter: blur(.55px);
    transform-origin: center;
    transform: translate(-50%, -50%) scaleX(var(--sx));
    will-change: transform, left;
}

.xox-title__underline{ --x: 50; --sx: 1; }

.xox-title__underline::before{
    left: calc(var(--x) * 1%);
    transform: translate(-50%, -50%) scaleX(var(--sx));
}

.glow-on-hover {
    position: relative;
    z-index: 0;
}

.glow-on-hover:before {
    content: '';
    /*background: linear-gradient(
        45deg,
        #3017C9,
        #641097,
        #900B84,
        #D400D5
    );*/
    background: linear-gradient(45deg, #4CB9FF, #4CB9FF, #3017C9, #3017C9, #641097, #641097, #D400D5, #D400D5, #FF3BFE, #FF3BFE, #D400D5, #D400D5, #641097, #641097, #3017C9, #3017C9, #4CB9FF,#4CB9FF);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 10s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    backdrop-filter: blur(6px);
    filter: blur(6px);
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
}

@keyframes glowing {
  0%   { background-position-x:   0%; }
  50%  { background-position-x: 100%; }
  100% { background-position-x:   0%; }
0%   { background-position-y:   50%; }
  50%  { background-position-y: 50%; }
  100% { background-position-y:   50%; }
}



.xox-link {
    position: relative;
    text-decoration: none !important;
    font-family: 'Montserrat-Bold';
    color: #36383D;
}

.xox-link__arrow{
  width: 16px;
  height: 16px;
  stroke: #36383D;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
      position: absolute;
}

.xox-link:hover .xox-link__arrow{
  transform: translateX(4px);
}

.xox-link:hover .xox-link__arrow{
  background: linear-gradient(45deg,#3017C9,#641097,#900B84,#D400D5);
  background-size: 400%;
  animation: glowing 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.xox-link span {
  position: relative;
  background-size: 400%;
  transition: color .25s ease;
}

.xox-link:hover span {
  background: linear-gradient(
    45deg,
    #3017C9,
    #641097,
    #900B84,
    #D400D5
  );
  background-size: 400%;
  animation: glowing 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*.xox-link::before {
    content: '›';
    position: absolute;
    right: -20px;
    top: 45%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #36383D;
    transition: transform .25s ease;
}

.xox-link:hover::before {
  transform: translate(4px, -50%);
}*/

.xox-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: #36383D;
    background-size: 400%;
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
    transition: opacity .25s ease, transform .25s ease;
}

.xox-link:hover::after {
    animation: glowing 5s linear infinite;
    background: linear-gradient(45deg, #3017C9, #641097, #900B84, #D400D5);
}

.xox-reveal-up, .xox-reveal-card, .xox-reveal-zoom{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 1s cubic-bezier(.39,.575,.565,1),
    transform 1s cubic-bezier(.39,.575,.565,1);
  transition-delay: var(--d, 0ms);
}

.xox-reveal-up{
  transform: translateY(18px);
}

.xox-reveal-card{
  transform: translateY(26px) scale(.98);
}

.xox-reveal-zoom{
  transform: scale(.86);
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
}

.xox-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

span.different-footer-font {
    font-family: 'Montserrat-SemiBold';
}

.xox-landing__footer{
    background:#36383D;
    color:#fff;
    padding: 18px 16px;
    text-align:center;
}

.xox-landing__footer-wrapper{
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem .7rem;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.xox-landing__footer-wrapper a{
    color: inherit;
    text-decoration: unset !important;
    white-space: nowrap;
}

.xox-landing__footer-wrapper a:hover{
    text-decoration: underline;
}

.different-footer-font{
    font-family: 'Montserrat-Bold';
}

.xox-landing__footer-wrapper > *{
  position: relative;
}

.xox-landing__footer-wrapper > *:not(:last-child)::after{
  content: "–";
  opacity: .7;
  margin-left: .7rem;
}

.xox-hero__box p strong {
    font-family: 'Montserrat-Bold';
}

.xox-sticky-moon {
    position: fixed;
    top: -13px;
    left: 50%;
    width: 70%;
    height: 50px;
    background: #36383D;
    border-bottom-left-radius: 100% 85px;
    border-bottom-right-radius: 100% 85px;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%) translateX(-50%);
    transition: opacity .35s ease, transform .35s ease;
}

.xox-sticky-moon.is-active {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
}

.xox-sticky-logo {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
    background: #36383D;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.xox-sticky-logo.is-active{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.xox-sticky-logo img {
    height: 38px;
    padding: 10px 40px;
    display: block;
}

.lang-fab{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
}

.lang-fab__btn {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: #36383D;
    color: #fff;
    box-shadow: 0 0px 15px #641097;
    transition: all 0.2s linear;
}

.lang-fab.is-open button.lang-fab__btn {
    box-shadow: 0 0px 15px #D400D5;
}

.lang-fab__menu{
    position: absolute;
    right: -6px;
    bottom: calc(100% + 10px);
    min-width: 65px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.lang-fab.is-open .lang-fab__menu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-fab__menu ul.qtranxs_language_chooser{
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.lang-fab__menu ul.qtranxs_language_chooser li{
    margin: 0;
}

.lang-fab__menu ul.qtranxs_language_chooser a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: #36383D;
    border-radius: 10px;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--ecreative-font-primary);
    font-size: 14px;
}

.lang-fab__menu ul.qtranxs_language_chooser li.active a {
    font-family: 'Montserrat-Bold';
}

.lang-fab__menu ul.qtranxs_language_chooser a:hover{
    background: rgba(0,0,0,.06);
}

.et-icon-wrapper.lang-fab__icon, .et-icon-wrapper.lang-fab__icon svg {
    width: 22px;
    height: 22px;
}

.et-icon-wrapper.lang-fab__icon svg, .et-icon-wrapper.lang-fab__icon g {
    fill: #fff;
}

.xox-hero-text {
    line-height: 25px;
    font-size: 16px;
}

.xox-hero-title {
    display: inline;
    font-size: inherit;
    font-family: 'Montserrat-Bold';
    margin: 0;
    color: #36383D;
}

.xox-hero-title::after {
    content: " ";
}

.xox-hero-description {
    display: inline;
    margin: 0;
}

.vicenzaoro-section {
    margin-bottom: 50px;
}

.vicenzaoro-section h2 {
    margin-top: unset;
    font-family: 'Montserrat-Bold';
    margin-bottom: 20px;
    font-size: 1.65em;
}

.vicenzaoro-section h3 {
    margin: unset;
    font-family: 'Montserrat-Bold';
    font-size: 1.3em;
}

.vicenzaoro-section p {
    margin: unset;
    font-size: 18px;
}

p.hall-section {
    width: fit-content;
    margin: auto;
    padding: 10px 15px;
    background: #e1dfe1;
    border-radius: 60px;
    margin-top: 20px;
}
















@media (max-width: 650px){
    .xox-sticky-logo img{
        height: 35px;
        padding: 10px 60px;
    }

    .xox-sticky-moon {
        width: 90%;
        display: none;
    }

    .xox-sticky-logo {
        top: 8px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce){
  .xox-reveal-up,
  .xox-reveal-card,
  .xox-reveal-zoom{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@keyframes xoxUnderlineSlide{
  from {
    left: 0%;
    background-position: 0% 50%;
  }
  to {
    left: 67%;
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce){
  .xox-title__underline::before{
    animation: none;
    left: 0;
  }
}

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

	.xox-landing__intro { 
        padding: 24px 16px; 
    }
}

@media screen and (max-width:650px){
    .xox-landing__title {
        margin-top: 60px;
    }

    .xox-hero__logo {
        width: 55%;
    }

    .xox-hero__box {
        padding: 30px 20px;
        max-width: 75% !important;
    }

    .xox-hero__inner {
        margin-bottom: 70px;
        margin-top: 100px;
    }   

    .xox-landing__title h2 {
        font-size: 22px;
        margin: 0 15px;
    }

    .xox-hero__box p {
        font-size: 14px;
    }

    .xox-card__logo {
        margin: 15px auto 0;
    }

    .xox-header-color-wrapper .xox-color-left, .xox-header-color-wrapper .xox-color-right {
        height: 65px;
    }

    .xox-header-color-wrapper .xox-color-center-right, .xox-header-color-wrapper .xox-color-center-left{
        height: 130px;
    }

    .xox-footer-color-wrapper .xox-color-left, .xox-footer-color-wrapper .xox-color-right {
        top: 85px;
    }

    .xox-footer-color-wrapper .xox-color-center-right, .xox-footer-color-wrapper .xox-color-center-left{
        top: 70px;
    }

    .xox-header-color-wrapper .xox-header-container {
        height: 58px;
    }

    .xox-landing__footer-wrapper > *:not(:last-child)::after{
        content: "";
        margin: 0;
    }

    .xox-landing__footer-wrapper{
        gap: .25rem .6rem;
    }

    .xox-card__logo {
        width: min(170px, 100%);
    }

    .xox-landing__grid{
        margin-bottom: unset;
    }

    body.home .vc_column-inner {
        padding: unset;
    }

    body.home .vc_row{
        margin: unset;
    }

    .glow-on-hover:before{
        opacity: 1 !important;
        animation: glowing 6s linear infinite;
    }

    .xox-card {
        padding: 12px;
    }

    .xox-landing__footer-wrapper {
        flex-direction: column;
    }
}