body {
	font-family: 'Titillium Web', sans-serif;
	font-weight:300;
	background-image: url('../images/backgroundepk.jpg');
    background-repeat: repeat-y;
    background-size: 100%;
    background-attachment: fixed;
    color:white;
}

a {
	color: #00f6ff;
	text-decoration: none;
}

a:hover {
	color: #c7fdff;
}

.socialico {
	font-size: 3.8rem;
}

.leadtxt {
	font-size: 1.3rem;
}

.gotop {
  position: fixed;
  bottom:1rem;
  right: 1rem;
  z-index: 99;
}

.fw-mbold {
    font-weight: 400!important;
}

.colorb {
	color:#c7fdff;
	font-weight: 500;
}

.vidcontainer {
    background-color: rgba(23,77,188,0.6);
}

.epkframe {
	  border: 0; 
	  width: 70%; 
	  height: 753px;
}

.fullwidthblack {
	width: 100%;
	padding: 2rem;
	margin:0 0;
	background-color: rgba(0,0,0,0.8);
}

.fullwidth {
	width: 100%;
}


.pretitle {
	font-size: 1.3rem;
}

.maincover {
	max-width: 650px;
}

.btn-outline-dark {
	background-color: #ece5c6;
	border: 8px solid black;
	border-radius: 10%;
	cursor: pointer !important;
}


.btn-special {
  cursor: pointer !important;
  width:100%;
  margin:0;
  border-radius:0;
  font-size: 2.2rem;
  font-weight: 800;
}

.btn-special {
    /* Colori gialli */
    background: linear-gradient(145deg, #ece5c6, #f3e6d5, #cad7cd);
    border: solid rgba(255, 215, 0, 0.3);
    border-width: 2px 0;
    
    /* Effetti di profondità gialli */
    box-shadow: 
        inset 0 .5em 1.5em rgba(255, 215, 0, 0.3), 
        inset 0 .125em .5em rgba(255, 215, 0, 0.15),
        0 4px 8px rgba(255, 215, 0, 0.2);
    
    /* Transizione per hover */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Posizione relativa per effetti aggiuntivi */
    position: relative;
    overflow: hidden;
    
    /* Effetto bordo luminoso */
    outline: none;
}

/* Effetto hover */
.btn-special:hover {
    background: linear-gradient(145deg, #000000, #111111, #222222);
    color: white;
    border-color: rgba(255, 215, 0, 0.5);
    
    /* Ombra più intensa al passaggio del mouse */
    box-shadow: 
        inset 0 .5em 1.5em rgba(255, 215, 0, 0.4), 
        inset 0 .125em .5em rgba(255, 215, 0, 0.25),
        0 6px 12px rgba(255, 215, 0, 0.3),
        0 0 15px rgba(255, 215, 0, 0.4);
    
    transform: translateY(-2px);
}

/* Effetto attivo (click) */
.btn-special:active {
    transform: translateY(1px);
    box-shadow: 
        inset 0 .5em 1.5em rgba(255, 215, 0, 0.2), 
        inset 0 .125em .5em rgba(255, 215, 0, 0.1),
        0 2px 4px rgba(255, 215, 0, 0.2);
}

/* Effetto focus per accessibilità */
.btn-special:focus {
    outline: 2px solid rgba(255, 215, 0, 0.7);
    outline-offset: 2px;
}




@media(max-width:845px) {
  
	.zuframe {
	  border: 0; 
	  width: 99%; 
	  height: 753px;
	}

	.maincover {
		max-width: 80%;
	}

}


.textbg {
    background: linear-gradient(135deg, rgba(115, 160, 157, 0.6) 0%, rgba(177, 203, 200, 0.8) 100%);
}


/* ANIMAZIONI */

   /* Effetto hover solo per le foto con classe phgall */
    .phgall {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }

    .phgall:hover {
        transform: scale(1.15);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        z-index: 10;
    }

    .ombra-3d {
    
    box-shadow: 12px 12px 21px rgba(0, 0, 0, 0.7);
}










/* Stile per lo switch delle lingue */
.language-switch {
    width: 40px;
    height: 25px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.language-switch:hover {
    transform: scale(1.05);
}


/* Bandiera italiana */
.flag-it {
    display: flex;
}

.flag-green, .flag-white, .flag-red {
    width: 33.33%;
    height: 100%;
}

.flag-green {
    background-color: #009246;
}

.flag-white {
    background-color: #FFFFFF;
}

.flag-red {
    background-color: #CE2B37;
}

/* Bandiera inglese (UK) */
/* Bandiera inglese come immagine di sfondo */
.flag-uk {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="60" height="30"><path fill="%23012169" d="M0 0h60v30H0z"/><path fill="%23FFF" d="M0 0l60 30m0-30L0 30"/><path stroke="%23FFF" stroke-width="6" d="M0 0l60 30m0-30L0 30"/><path fill="%23C8102E" d="M30 0v30M0 15h60"/><path stroke="%23C8102E" stroke-width="10" d="M30 0v30M0 15h60"/></svg>');
    background-size: cover;
    background-position: center;
}

.my_steam {
  width:90%;
  height:190px;
}