body{
	margin-top: 0px; margin-left: 0px; padding-top: 0px; padding-left: 0px; background-color: #000000; background-image: url("GraphicWeb/SplashPage2023.jpg"); background-size: 100%;background-attachment: fixed;background-repeat: no-repeat; font-family: 'Times New Roman', sans-serif; color:#FFFFFF;
}
img {
    max-width: 100%;
    height: auto;
}



a {
	color:#fafafa;
	text-decoration:none;
}
a:hover{
	color:aqua;
	border:5;
}
/*
a:hover{
	color:#000066;
	-webkit-transition: 150ms linear 0s;
	-moz-transition: 150ms linear 0s;
	-o-transition: 150ms linear 0s;
	transition: 150ms linear 0s;
	outline: 0 none;
	text-shadow: -1px 1px 15px #ffffff, 1px -1px 20px #ffffff;
}

a:visited{
	color:#fafafa;
}
*/
a:active{
	color:#fa0000;
}
p {
	font-size:18px !important;
	margin-top:8px;
	margin-bottom:8px;
	line-height:22px;
	text-indent:12px;
}
ul {
	font-size:18px !important;
	margin-top:3px;
	margin-bottom:3px;
	line-height:22px;
}
h1 {
	font-size:28px !important;
	margin-top:25px;
	margin-bottom:0px;
	padding-top:0px;
	padding-bottom:0px;
	
}
h2 {
	font-size:26px;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:0px;
	padding-bottom:0px;
	
}

th {
	vertical-align:middle;
}
th a{
	width:100%;
	height: 44px;
}

#Wear a {
	color:red;
}
#Wear a:hover {
	color:yellow;
}

#content {
	position: absolute;
	width:100%;
	left: 0;
	top: 0;
}

#logo {
	position: absolute;
	width:320px;
	left: 0px;
	top: 0px;
}

#story:hover{
	color:#fa0000;
}


#text {
	position: absolute;
	left: 25%;
	top: 40px;
	font-size:32px;
	text-align:center;
	color:#ffffff;
}

#switc {
	position: absolute;
	left: 330px;
	top: 15px;
	font-size:12px;
	text-align:center;
	color:#ffffff;
}
#switc a{
	color:yellow;
}
#switc a:hover{
	color:aqua;
}

#btn1,#btn2,#btn3,#btn4{
	position:relative;
	color:#fcf8b7;
}

#btn1:hover,#btn2:hover,#btn3:hover,#btn4:hover{
	color:#000066;
	-webkit-transition: 150ms linear 0s;
	-moz-transition: 150ms linear 0s;
	-o-transition: 150ms linear 0s;
	transition: 150ms linear 0s;
	outline: 0 none;
	text-shadow: -1px 1px 15px #ffffff, 1px -1px 20px #ffffff;
}

#figura {
	position:relative;
	top: -10px;
	height:500px;
	display:none;
	width:100%;
	padding: 0;
	background-image: url("GraphicWeb/contactBg.gif");
	background-repeat: no-repeat;
	background-position: center top;
}
#abitare {
	position:relative;
	top: -10px;
	height:500px;
	display:none;
	width:100%;
	padding: 0;
	background-image: url("GraphicWeb/contactBg.gif");
	background-repeat: no-repeat;
	background-position: center top;
}

#contact {
	position:relative;
	top: -10px;
	height:450px;
	display:none;
	width:100%;
	padding: 0;
	background-image: url("GraphicWeb/contactBg.gif");
	background-repeat: no-repeat;
	background-position: center top;
}
#vidCont {
	position:absolute;
	left:0px;
	top:100px;
	width:100%;
	z-index:3;
}
#vid {
	position:absolute;
	left:25%;
	top:100px;
	width:50%;
	z-index:3;
}
#Intro {
	position:absolute;
	left:25%;
	top:10px;
	width:45%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:15px;
	padding-right:15px;
	text-align:justify;
}
#Scul {
	position:absolute;
	left:25%;
	top:670px;
	width:45%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:15px;
	padding-right:15px;
	text-align:justify;
}
#Wear {
	position:absolute;
	left:25%;
	top:670px;
	width:45%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:15px;
	padding-right:15px;
	text-align:justify;
}
.contacTit{
	position:relative;
	top:90px;
	font-size:20px;
	text-align:center;
	color:gray;
}
.contacTxt{
	position:relative;
	top:80px;
	margin-bottom:30px;
	text-align:center;
	color:gray;
}

.smallink {
	font-size: 14px;
}

.btn {
	height:44px;
	background-image: url(GraphicWeb/buttonLarge.gif);
	background-repeat: no-repeat;
	background-position: top;
	font-size: 16px;
	color: #fcf8b7;
}	
.btn:hover {
	background-image: url(GraphicWeb/buttonLargeUp.gif);
}


/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 24%;
  text-align:center;
  padding: 5px;
}

/* Style the images inside the grid */
.column img {
  height:150px;
  opacity: 0.8;
  cursor: pointer;
}
.column video {
  height:150px;
}

.column img:hover {
  opacity: 1;
}
.row {
	background-color:#000000;
	color:white;
}
.row h3 {
	font-size:18px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
	position:absolute;
	top: 0px;
	left: 0px;
	width:100%;
	display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 35px;
  color: #fc7a07;
  font-size: 35px;
  cursor: pointer;
} 









	
/* Large screens ----------- */
@media screen and (min-width: 1824px) {

}	
	
/* Desktops and laptops ----------- */
@media screen and (min-width: 1224px) and (max-width: 1823px) {

#Intro {
	left:35%;
	width:50%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:20px;
	padding-right:30px;
	text-align:justify;
}
#Scul {
	left:30%;
	width:50%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:15px;
	padding-right:25px;
	text-align:justify;
}
#Wear {
	left:30%;
	width:45%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
}	




/* iPads (portrait and landscape) ----------- */
@media screen and (min-width: 1024px) and (max-width: 1224px) {
#vid{
	left:40%;
	width:45%;
	}
#text{
		font-size:20px;
		left:40%;
	}
#Intro {
	left:0;
	top:900px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
#Scul {
	top:475px;
	left:45%;
	width:50%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:15px;
	padding-right:25px;
	text-align:justify;
}
#Wear {
	top:475px;
	left:45%;
	width:45%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
#vid{
		top:100px;
		left:40%;
		width:45%;
	}
#text{
		top:50px;
		font-size:20px;
		left:40%;
	}
#Intro {
	left:0;
	top:900px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
#Scul {
	top:475px;
	left:45%;
	width:50%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:15px;
	padding-right:25px;
	text-align:justify;
}
#Wear {
	top:475px;
	left:45%;
	width:45%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (min-width: 480px) and (max-width: 767px) {
#text{
		font-size:15px;
		top: 630px;
		left 45%;
	}
#vid{
		left:3%;
		top:2000px;
		width:95%;
	}
#Intro {
	left:3%;
	top:1200px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
#Scul {
	left:0%;
	top:1400px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
#Wear {
	left:0%;
	top:1500px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
	
}

/* Smartphones (portrait and landscape) ----------- */
@media screen and (min-width: 320px) and (max-width: 479px) {
	#text{
		font-size:15px;
		top: 630px;
		left: 5%;
	}
	#vid{
		width:95%;
		left:0%;
		top:1080px;
	}

#Intro {
	left:0%;
	top:1150px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
#Scul {
	left:0%;
	top:1250px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
#Wear {
	left:0%;
	top:1400px;
	width:95%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media screen and (min-width: 180px) and (max-width: 319px) {
#text{
		font-size:12px;
		top: 630px;
		left: 5%;
	}
	#vid{
		width:95%;
		left:0%;
		top:980px;
	}

#Intro {
	left:0%;
	top:1150px;
	width:100%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:20px;
	text-align:justify;
}
#Scul {
	left:0%;
	top:1300px;
	width:100%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
#Wear {
	left:0%;
	top:1500px;
	width:40%;
	z-index:4;
	display:none;
	font-family:"TimesNewRoman";
	background-color:#d1ebde;
	color:#000000;
	padding-left:5px;
	padding-right:10px;
	text-align:justify;
}
}