/*
	CSS: A Letter For Sally
	Data Creazione: Gennaio 2021
	Autore: Luca Franzetti
	Note:
*/

/*IMPORT SECTION*/
@import url(common.css);
@import url(contents.css);
@import url(superfish.css);
@import url(superfish-vertical.css);
@import url(super-panel.css);

/*DEFAULTS*/
body{
	width:100%;
	height:100%;
	font-family:"Open Sans", sans-serif;
	font-weight:400;
	color:#c9cbcd;
	line-height:150%;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	padding:0;
	margin:0;
	background-image:url("../img/bglyt-ne.png"), url("../img/bglyt-nw.png"), url("../img/bglyt-se.png"), url("../img/bglyt-sw.png"), url("../img/bgbody.jpg");
	background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	background-position:top right, top left, bottom right, bottom left, top left;
	background-attachment:fixed, fixed, fixed, fixed, fixed;
	background-size:12% auto, 12% auto, 12% auto, 12% auto, auto auto
}
body.biography,
body.media,
body.liveshows,
body.news{background-size:9% auto, 9% auto, 9% auto, 9% auto, auto auto}
hr{display:none}
h1,h2,h3,h4,h5,h6{padding:0;margin:0}
p,ul,li{padding:0;margin:0}
img{border:0}
table{font-size:100%}
a,a:hover,a:visited{text-decoration:none}
input,select,textarea{font-family:"Open Sans", sans-serif;font-weight:400}

/*UTILS*/
div{text-align:left}
.hide{display:none}
.hidden{visibility:hidden}
.clear{clear:both}
.HDN{display:none}
.hdn{display:none}
fieldset{border:none;padding:0;margin:0}
legend{margin:0;padding:0}

/*FONT FACE KITS*/
@font-face {
	font-family:"GuanineRegular";
	src:url("../fonts/GuanineRegular.eot");
	src:url("../fonts/GuanineRegular.eot?#iefix") format("embedded-opentype"),
			url("../fonts/GuanineRegular.woff") format("woff"),
			url("../fonts/GuanineRegular.ttf") format("truetype"),
			url("../fonts/GuanineRegular.svg#GuanineRegular") format("svg");
	font-weight:normal;
	font-style:normal
}

@font-face {
	font-family:"VelocetteRegular";
	src:url("../fonts/VelocetteRegular.eot");
	src:url("../fonts/VelocetteRegular.eot?#iefix") format("embedded-opentype"),
			url("../fonts/VelocetteRegular.woff") format("woff"),
			url("../fonts/VelocetteRegular.ttf") format("truetype"),
			url("../fonts/VelocetteRegular.svg#VelocetteRegular") format("svg");
	font-weight:normal;
	font-style:normal
}

/*reset sf-menu*/
ul.sf-menu{float:none!important;margin:0!important}
ul.sf-menu ul{
	width:auto!important;
	min-width:auto!important;
	box-shadow:none!important
}
ul.sf-menu li{
	margin:0!important;
	background:none!important
}
ul.sf-menu a{
	margin:0!important;
	padding:0!important;
	border:none!important
}

/*RESPONSIVITY*/
@media only screen and (min-width:320px) and (max-width:1024px) {
	body{background-size:17% auto, 17% auto, 17% auto, 17% auto, auto auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{background-size:12% auto, 12% auto, 12% auto, 12% auto, auto auto!important}
}

@media only screen and (min-width:1025px) and (max-width:1280px) {
	body{background-size:17% auto, 17% auto, 17% auto, 17% auto, auto auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{background-size:12% auto, 12% auto, 12% auto, 12% auto, auto auto!important}
}

@media only screen and (min-width:1281px) and (max-width:1500px) {
	body{background-size:15% auto, 15% auto, 15% auto, 15% auto, auto auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{background-size:12% auto, 12% auto, 12% auto, 12% auto, auto auto!important}
}

@media only screen and (min-width:1501px) and (max-width:1950px) {
	body{background-size:15% auto, 15% auto, 15% auto, 15% auto, auto auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{background-size:12% auto, 12% auto, 12% auto, 12% auto, auto auto!important}
}

/*TABLET*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
	/*body{
		background-image:url("../img/bgbody.jpg")!important;
		background-repeat:repeat!important;
		background-position:top left!important;
		background-attachment:fixed!important;
		background-size:80px auto!important
	}*/
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
	body{background-size:22% auto, 22% auto, 22% auto, 22% auto, 80px auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{background-size:13% auto, 13% auto, 13% auto, 13% auto, 80px auto!important}
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
	body{background-size:17% auto, 17% auto, 17% auto, 17% auto, 80px auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{background-size:14% auto, 14% auto, 14% auto, 14% auto, 80px auto!important}
}

/*SMARTPHONE*/
@media only screen and (min-device-width:320px) and (max-device-width:767px) {
	/*body{
		background-image:url("../img/bgbody.jpg")!important;
		background-repeat:repeat!important;
		background-position:top left!important;
		background-attachment:fixed!important;
		background-size:80px auto!important
	}*/
}

@media only screen and (min-device-width:320px) and (max-device-width:767px) and (max-aspect-ratio:13/9) {
	body{background-size:27% auto, 27% auto, 27% auto, 27% auto, 70px auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{
		background-image:url("../img/bgbody.jpg")!important;
		background-repeat:repeat!important;
		background-position:top left!important;
		background-attachment:fixed!important;
		background-size:70px auto!important
		/*background-size:9% auto, 9% auto, 9% auto, 9% auto, 70px auto!important*/
	}
}

@media only screen and (min-device-width:320px) and (max-device-width:767px) and (min-aspect-ratio:13/9) {
	body{background-size:17% auto, 17% auto, 17% auto, 17% auto, 70px auto!important}
	body.biography,
	body.media,
	body.liveshows,
	body.news{background-size:11% auto, 11% auto, 11% auto, 11% auto, 70px auto!important}
}