/* ================================
FONT
================================ */
@import url("../webfonts/Bernardo_Moda/stylesheet.css");
.emo {font-family: 'Noto Color Emoji', sans-serif;}
.dance {font-family: "Cookie", cursive;  font-weight: 400;  font-style: normal;}
/* ================================
LOADING
================================ */
#body-loading {
	position:fixed;
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background-color: #293133; 
	z-index: 1000; 
	transition: opacity 0.2s ease;
}
a {text-decoration: none;}
/* ================================
SIZING
================================ */
.w-20 {width:20%;}
.w-30 {width:30%;}
.w-40 {width:40%;}
.w-60 {width:60%;}
.w-90 {width:90%;}

.w-50m {width:50%;}
.h-90 {height: 90%;}
.w-25_50 {
	width: 25%;
}
@media all and (max-width: 768px){
.w-25_50 {width: 50%;}
.dc-m {flex-direction: column;}
.hm-auto {height: auto !important;}
}
.h_6 {height: 6vh;}
.h10 {height: 10vh;}
.h20 {height: 20vh;}
.h50 {height: 50vh;}
.h84 {height: 84vh;}
.h100 {height: 100vh;}
/* ================================
NORMALIZE
================================ */
.rex { /*g-0*/
	padding-right: 0;
	padding-left: 0;
}
.rx {
    position: relative;

}
.over {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0; left:0;
}
/* ================================
RESPONSIVE
================================ */
@media all and (max-width: 600px){
.w-50m {width:100%;}
}
.sceno {box-shadow: inset 0px 0px 0px 0px rgba(200,95,66, 0.4),inset 0 0 0 2.5px rgba(255,255,255,0.6);}
/* ===========================================
TEXT 
=========================================== */
.tu {text-transform: uppercase;}
.tc {text-align: center;}
.tc-1 {text-align: center;line-height:1;}
.t-caps {font-variant: small-caps;}
.text-coral {color: coral;}
/* ===========================================
TEXT-SHADOW 
=========================================== */
.tsh {text-shadow: 1px 1px 2px rgba(51,51,51,1);}
.p-caption {width:100%;background-color:rgba(0,0,0,0.5);line-height:1;color:white;padding:0.5rem 0;}
h1.pantalla {
	font-family: "Bernardo Moda";
	letter-spacing: 1px;
	line-height: 1em;
	font-size: 6em;
	color: rgba(255,255,255,1);
	text-align: center;
	text-shadow: 2px 2px 1px rgba(51,51,51,0.9);
}
span.pantalla {
	font-family: "Bernardo Moda";
	letter-spacing: 1px;
	line-height: 1em;
	font-size: 1.2em;	
	font-weight: 900;
	color: rgba(255,255,255,1);
	text-align: center;
	text-shadow: 2px 2px 1px rgba(51,51,51,0.9);
}
@media all and (max-width: 768px){
h1.pantalla {font-size: 4em;}
}
@media all and (max-width: 576px){
h1.pantalla {font-size: 2.5em;}
}

.gridex li a:hover{
font-weight:900;
color:rgba(255,255,255,1);
background-color: rgba(0,0,0,0.6);
}
a.test-opa:hover {
background-color: green;
}
a.test-opa > span:hover {
font-weight:900;
color:yellow;
}

/* ===========================================
BG-color
=========================================== */
.bg_opa {background-color:rgba(51,51,51,0.50);}
.bg_pink {background-color: pink;}
.bg_lgreen {background-color: lightgreen;}
.bg-gre {background-color:#eee;}
.bg-grc {background-color:#ccc;}

/* ================================
BACKGROUND - PALETTE
================================ */
.bgp-champ1 {background-color:#9C772B;} 
.bgp-champ2 {background-color:#C89A38;} 
.bgp-champ3 {background-color:#E2B34B;} 
.bgp-champ4 {background-color:#E8C36C;} 
.bgp-champ5 {background-color:#EFD594;} 
.bgp-champ6 {background-color:#F5E5BE;} 
.bgp-champ7 {background-color:#FCF6E9;} 

.bg_gray2 {background-color: var(--bs-gray-200);}
.bg_gray4 {background-color: var(--bs-gray-400);}
.bg_gray6 {background-color: var(--bs-gray-600);}
/* ===========================================
BG-size
=========================================== */
.bgcv {background:/*#fff*/ /*image*/ center center/cover no-repeat /* origin / clip / attachment*/}
.bgcn {background:/*#fff*/ /*image*/ center center/contain no-repeat /* origin / clip / attachment*/}
.bgct {background:#fff /*image*/ center start/cover no-repeat /* origin / clip / attachment*/}
/* ===========================================
NAVMASTER
=========================================== */
.wrap {
	white-space: wrap !important;
	font-size: 0.85rem;
}
ul.scap > li > a > small > mark {
	font-variant: small-caps;
}
/* ===========================================
ELEMENTI
=========================================== */
.round-number {
	width:60px; 
	border-radius:50%;
	color:white;
	background-color:#232323;
	font-size:150%;
	margin-bottom:6px;
}
.round-section {
	width:50px; 
	border-radius:50%;
	color:white;
	background-color:#232323;
	font-size:150%;
}
/* ===========================================
FORM-MAVIA
=========================================== */
form.pd {
	padding-left:50px; 
	padding-right:50px;
}
@media all and (max-width: 768px){
form.pd {
	padding-left:0; 
	padding-right:0;
}}
.form-group {
    position: relative;
    margin-bottom: 1rem;
}
.form-group label {
    font-weight: 400;
    color: #222;
}
input.form-control, select.form-control, textarea.form-control {
    background: none;
    background-color: #fff;
    border: none;
    border-bottom: 2px solid #e8ebed;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    color: #999;
    font-size: 1rem;
}