/*
	N.B.:	i valori in px dei @media screen max-width, max-height, ecc. si riferiscono all'area
			 visibile del browser (che sono variabili) e non ai valori fissi di screen.availWidth, screen.availHeight
*/


	@font-face {
		font-family: 'Text';
		src: url('/Content/Fonts/Spartan-VariableFont_wght.ttf') format('truetype');
	}
	@font-face {
		font-family: 'Ruthie';
		src: url('/Content/Fonts/Ruthie-Regular.ttf') format('truetype');
	}
	@font-face {
		font-family: 'Poiret One';
		src: url('/Content/Fonts/PoiretOne-Regular.ttf') format('truetype');
	}
	@font-face {
		font-family: 'Miss Fajardose';
		src: url('/Content/Fonts/MissFajardose-Regular.ttf') format('truetype');
	}
	@font-face {
		font-family: 'Lato';
		src: url('/Content/Fonts/Lato-Light.ttf') format('truetype');
	}

	html {
		font-size: calc( 10px + 100vw / 3840 * 10 );		/* da min 10px a max 20px su schermo 4k */
	}

	/* body */
	body {
		position: absolute;									/* senza gli elementi di input sono disabilitati (come se ci fosse una schermata sopra) */
		/* width e height 100%, si adatta in base alla spazio a disposizione */
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		font-family: Text, sans-serif;
		color: #777;
		background-color: #fdfdfd;
	}

	/* se � presente main gli elementi di input sono disabilitati (come se ci fosse una schermata sopra) */
	main {
		overflow: hidden;		/* senza vengono visualizzati gli elementi fuori schermo quando viene applicato un effetto */
	}

	/* controllo audio */
	audio {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 2.2rem;
		width: 18.5rem;
		z-index: 2;
	}
	:focus {
		outline-style: none;	/* toglie il bordo al focus */
	}


	/* */
	header, nav, section, article, footer {
		display: grid;
		position: relative;
		background: transparent;
	}


	header a:hover {
		text-decoration: none !important;
	}

	/* sezione MEN� */
	#menu {
		display: grid;
		grid-auto-flow: column;
		align-items: center;
		font-family: 'Lato';
		font-size: 1.2rem;
		background-color: #6e3c09;
		box-shadow: 0 .3rem .7rem .0rem #777;
		z-index: 15;
	}
	/* voci men� */
	#menu a {
		white-space: nowrap;
		color: #fff;
	}
	#menu a.closemenuvert {
		display: none;
		text-align: right;
	}
	/* spazia il simbolo dal testo */
	#menu a.login i,
	#menu a[data-url] i,
	#menu a[data-sec] i {
		padding-right: .5rem;
	}
@media screen and (min-width: 120.0rem) {
	/* nasconde il simbolo MENU se � sufficientemente ampio da contenere le voci del men� orizzontale */
	#menu a.openmenuvert {
		display: none;
	}
}
@media screen and (max-width: 100.0rem) {
	/* nasconde contatti */
	#menu a[data-sec='contatti'] {
		display: none;
	}
}
@media screen and (max-width: 100.0rem) {
	/* nasconde video */
	#menu a[data-sec='video'] {
		display: none;
	}
}
@media screen and (max-width: 90.0rem) {
	/* nasconde gallerie */
	#menu a[data-sec='gallerie'] {
		display: none;
	}
}
@media screen and (max-width: 80.0rem) {
	/* nasconde dintorni */
	#menu a[data-sec='dintorni'] {
		display: none;
	}
}
@media screen and (max-width: 30.0rem) {
	/* nasconde ristorante */
	#menu a[data-sec='grandieventi'],
	#menu a[data-sec='benessere'],
	#menu a[data-sec='ristorante'] {
		display: none;
	}
}
@media screen and (max-width: 20.0rem) {
	/* nasconde benessere, hotel, grandieventi */
	#menu a[data-sec='hotel'] {
		display: none;
	}
}
	/* per la visualizzazione del men� in verticale */
	#menu.showvert {
		display: flex !important;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		align-content: stretch;
		opacity: 1;
	}
	#menu.showvert .openmenuvert {
		display: none !important;
	}
	#menu.showvert a {
		display: block;
	}



	q:before {
		margin-left: .7rem;
		content: '\00201c';		/* � */
	}
	q:after {
		content: '\00201d';		/* �  \00201e = � */
	}

	cite {
		font-style: initial;
		font-size: 1.3rem;
		padding-left: 1rem;
	}
	cite::before {
		content: '(';
		padding-right: .3rem;
	}
	cite::after {
		content: ')';
		padding-left: .3rem;
	}

	p {
		text-align: justify;
	}
	p::first-letter, .first-letter {
		/*
		background-image: url('/content/images/home/fl.png');
		background-position: center;
		box-shadow: inset .1rem .1rem .4rem .0rem #606060;
		*/
		font-family: 'Ruthie', cursive;
		letter-spacing: .1rem;
		color: #922700;
		font-size: 3rem;
		font-style: italic;
		padding: .1rem 0 .1rem .5rem;
		border-radius: .2rem;
	}


	/* a */
	a {
		cursor: pointer;
		text-decoration: none;
		color: #005207;
		transition: all .5s;
	}
	a:hover {
		text-decoration: underline;
		color: #904141;
	}

	button {
		cursor: pointer;
		color: #007;
		transition: all .5s;
	}


	/* */
	section {
		box-shadow: 0 -.6rem 1.3rem .0rem #999, 0 .6rem 1.3rem .0rem #999;
		min-height: 75%;
	}

	/* image home */
	section.home {
		min-height: 100vh;
	}


	/* sfondo immagini di sezione */
	.bg {
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		backface-visibility: hidden;			/* altrimenti il jpg della filigrana sovrasta l'ombreggiatura della sezione */
		transform-origin: bottom;				/* altrimenti sconfina sull'elemento successivo */
		min-height: 50vh;
		/*
		transform: scaleX(1.0) scaleY(1.1);		con firefox non funziona lo scrolling parallattico
		*/
	}
	/* stili filigrana */
	.fili {
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: contain;
		z-index: -1;
	}


	h1, h2 {
		padding: 0 .5rem;			/* evita che il testo sia troppo vicino ai bordi */
	}
	h1, h2, h3, h4, h5 {
		margin: 0;
		font-weight: normal;
		text-align: center;
	}
	h2 {
		font-size: 3.5rem;
		line-height: 2rem;
		letter-spacing: .1rem;
		word-spacing: .5rem;
		/*text-shadow: 0 0 1rem #FF9800;*/
	}
	section h2 {					/* titolo di sezione */
		position: absolute;
		top: calc(50% - .5rem);		/* sposta in alto per una migliore centratura */
		left: 0;
		right: 0;
		color: #fff;
	}

	article {
		padding: 5rem 4rem;
		line-height: 2rem;
		font-size: 1rem;
		z-index: -1;
	}
	article h2 {					/* titolo */
		font-size: 2rem;
	}
	article h3 {
		font-size: 1.7rem;
	}
	article h4 {
		font-size: 1.5rem;
		font-style: italic;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	article h5 {
		color: #e49725;
		font-size: 1.2rem;
		font-style: italic;
	}


	/* HOME */
	/* Resort Regis */
	h1.home {
		position: absolute;
		font-size: 3rem;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		padding: 1vh 1vh 5vh;
		font-family: 'Poiret One', cursive;
		letter-spacing: 1vw;
		color: #fff;
		background: rgba(0,0,0,.2);
	}
	/* R */
	h1.home span {
		font-family: 'Miss Fajardose', cursive;
		font-size: 5rem;		/* il doppio delle dimensioni del font del padre */
		color: #8b6600;
		text-shadow: 0 0 .6rem #888;
	}

	img.logo {
		border-radius: .5rem;
		max-height: 25vh;
		max-width: 25vw;
		background: rgba(255,255,255,.9);
		box-shadow: .0rem .0rem 2.0rem .0rem #000;
	}

	h2.slogan {
		position: absolute;
		color: #fff;
		font-size: 5rem;
		line-height: 3rem;
		left: 0;
		right: 0;
		top: 15%;
		font-family: 'Miss Fajardose', cursive;
	}


	/* scorri per visitare il sito */
	div.scorri {
		position: absolute;
		width: 10px;
		height: 10px;
		left: 0;
		right: 0;
		bottom: 7vh;
		margin: auto;
		font-size: 3rem;
		text-align: center;
		color: #fff;
		cursor: pointer;
		z-index: 8;
		transition: .5s;
	}
	div.scorri:hover {
		color: #000;
	}


	/* CONTATTI */
	#contatti {
		/* disegno a lato */
		background-position: 110% 8%;
		background-repeat: no-repeat;
		grid-template-columns: auto 50%;
		grid-gap: 2rem;
		align-items: start;
		padding-bottom: 2rem;
	}
@media screen and (max-width: 65.0rem) {
	/* dispone dovesiamo e risponderemo in verticale */
	#contatti {
		grid-template-columns: 100%;
		background-size: 50%;
		background-position-x: 133%;
	}
	/* spazia il box del form dalla mappa soprastante */
	#contatti div.dovesiamo, #contatti div.risponderemo {
		padding-top: 3rem;
	}
}

	.sc *:nth-of-type(1n+2):not(:empty):before {
		content: '-';
		color: #f88;
		margin-left: .2rem;
		margin-right: .4rem;
	}
	/* per non far spezzare la riga in mezzo ai dati (gli span devono essere separati da spazi o a capo) */
	.sc * {
		white-space: nowrap;
	}

	/* box indirizzo, tel., email */
	#contatti .sc {
		display: grid;
		grid-template-columns: 3rem auto;
		align-items: center;
	}
	#contatti .sc .fa {
		font-size: 1.5rem;
	}

	#contatti button {
		font-weight: bold;
	}
	#contatti button, #contatti input, #contatti textarea {
		font-family: Text;
		width: 100%;
		padding: 1rem;
		margin-bottom: 1rem;		/* distanzia campi */
		border: .1rem solid;
		border-radius: .4rem;
		box-shadow: 0 0 1rem 0rem #aaa;
	}
	#contatti button:hover {
		color: #0f6522;
	}
	#contatti button u {
		padding-right: .5rem;
	}
	#contatti button.disabled {
		color: #aaa;
		cursor: default !important;
	}

	#contatti .privacy {
		display: grid;
		grid-template-columns: 3rem auto;
		align-content: center;
	}
	#contatti .privacy input {
		height: 1.2rem;
		box-shadow: none;
	}

	/* popup info visualizzato con il click sulla bandierina */
	#contatti div.mapinfo {
		padding: 1rem 0 1rem 1rem;
	}
	#contatti div.mapinfo * {
		text-align: center;
	}
	#contatti div.mapinfo a {
		color: #b00;
		font-weight: normal;
	}
	#contatti div.testo {
		align-self: end;
		margin-bottom: .5rem;
		font-style: italic;
	}

	#contatti .mappa {
		display: grid;
		background-color: #fff;
		padding: 2%;
		border: .2rem solid #777;
		border-radius: 1rem;
		cursor: pointer;
		box-shadow: 0 0 2.0rem .0rem #aaa;
	}
	#contatti .mappa img {
		width: 100%;
	}
@media screen and (max-width: 70.0rem) {
	#contatti div.intest {
		min-height: initial;
	}
}





	/* email inviata */
	#msginviato {
		text-align: center;
		color: #e00;
		padding: 1rem;
	}	


	/* pie pagina */
	footer {
		align-content: center;
		height: 14rem;
		font-size: .9rem;
		background-position: center bottom !important;
		transition: 1s;
		z-index: -1;
	}
	footer:hover {
		background-position: center 115% !important;
		box-shadow: 0 -0.5rem 1rem 0.2rem #607d8b;
	}
	footer>div {
		width: 100%;
		margin-bottom: .7rem;
		text-align: center;
		transition: all 1s;
	}
	footer div:hover a {
		color: rgb(66,114,219) !important;
	}
	/* links social */
	footer .social a {
		padding: 1rem;
		font-size: 2rem;
	}
	/* link hslab */
	footer .poweredby {
	}
	/* versione sito */
	footer .ver {
		font-size: .8rem;
		font-style: italic;
		color: #333;
	}
	/* privacy */
	footer .privacy {
	}


	/* STILI ED EFFETTI */
	.boxshddn {
		box-shadow: 0 .5rem 1rem .2rem #607D8B;
	}
	.boxshdup {
		box-shadow: 0 -.5rem 1rem .2rem #607D8B;
	}



	/* modal per l'invio delle mail */
	.modal {
		z-index: 10;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background: rgba(0,0,0,.65);
	}

	/* pulsante charger */
	button.bcharger i {
		color: #0b0;
	}
	/* pulsante regala un voucher */
	button.laterale.bvoucher {
		width: 10rem;
		font-size: 2rem;
		height: 9rem;
		display: grid;
		align-content: space-between;
		padding-top: .7rem;
		padding-bottom: .7rem;
		background-image: url(/Views/XSites/Regis/images/fiocvouc.png);
		background-repeat: no-repeat;
		background-position: center center;
	}


	/* barra dei messaggi */
	.msgbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 2rem;
		z-index: 10;
		background-color: #fff;
	}
	.msgbar .msg  {
		position: relative;
		margin: 1rem;
		text-align: center;
		font-weight: bold;
		padding: 1rem 3rem 1rem 1rem;
		border: .4rem solid;
		border-radius: 1rem;
		animation-timing-function: ease;
		cursor: pointer;
	}
	.msgbar .msg.anim  {
		animation-name: msgbarkf;
		animation-duration: 1s;
	}
@keyframes msgbarkf {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}
	100% {
		transform: translateY(0%);
	}
}
	.msgbar .msg.unanim  {
		animation-name: msgbarkfun;
		animation-duration: .75s;
	}
@keyframes msgbarkfun {
	0% {
		transform: translateY(0%);
		opacity: 1;
	}
	100% {
		transform: translateY(100%);
		opacity: .2;
	}
}
	/* per i messaggi che contengono codice html */
	.msgbar >* {
		text-align: center;
	}
	/* in forma tabellare -> label / testo */
	.msgbar .tab>span {
		display: grid;
		text-align: left;
		grid-template-columns: 20% auto;
		grid-column-gap: 1rem;
		margin-bottom: .5rem;
		color: #911;
	}
	/* label */
	.msgbar .tab>span i {
		text-align: right;
		color: #888;
		padding-left: .2rem;
		padding-right: .2rem;
	}
	/* simbolo failure / success */
	.msgbar u {
		position: absolute;
		top: 0.1rem;
		right: 0.1rem;
		font-size: 3rem;
		text-decoration: none;
	}
	/* colore testo */
	.failure  {
		color: #f00;
	}
	.success  {
		color: #0b0;
	}


	/* centra nella pagina */
	.abs_center {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}


	/* per la gestione della pagina orizzontale in due parti */
	.frame {
		background-color: #eee;
		padding: 1rem;
	}
	.frame .testo {
		padding: 2rem;
	}
	.frame .immagini {
		width: 60%;
	}
	.frame .immagini img {
		width: 100%;
	}
	.frame h3 {
		padding-bottom: 1rem;
	}
	/* inverte la posizione del box testo con quello delle immagini */
	.frame .swap {
		order: 1;
	}


	/* container flex_oriz: dispone gli elementi in orizzontale */
	.flex_oriz {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		align-content: stretch;
	}
@media screen and (max-width: 58.0rem) {
	/* visulizzazione verticale */
	[class*='flex_oriz'] {
		flex-direction: column;
	}
	[class*='flex_oriz']>div, .frame .immagini {
		width: 100%;
	}
	/* ripristina l'ordine naturale: testo seguito dall'immagine */
	.frame .swap {
		order: initial;
	}
}