html 
{
	height:100%;
}
body
{
	height:100%;
	overflow-y:hidden;
	background-color: #e8e8e8;
	
}


a:hover {
  cursor:pointer;
 }
@font-face {
    font-family: signika-light;
    src: url(fonts/signika.light.ttf);
}

@font-face {
    font-family: signika-regular;
    src: url(fonts/signika.regular.ttf);
}

@font-face {
    font-family: signika-semibold;
    src: url(fonts/signika.semibold.ttf);
}

/* =============================================================================
INDEX
============================================================================= */
.pre-index
{
	
	float:left;
}

.pre-index-first-line
{
	
	width:100%;
	height:88.24%;
}

.pre-index-second-line
{
	
	width:100%;
	height:5.74%;
}

.pre-index-third-line
{
	
	width:100%;
	height:6.02%;
}

.pre-index-second-line-first-column
{
	width:43.125%;
	
	/*display: inline-block;*/
	float:left;
	height:100%;
	margin:0px;
	padding:0px;
	
}

.pre-index-second-line-second-column
{
	width:13.75%;
	
	/*display: inline-block;*/
	float:left;
	height:100%;
	margin:0px;
	padding:0px;
}

.pre-index-second-line-third-column
{
	width:43.125%;
	
	/*display: inline-block;*/
	float:left;
	height:100%;
	margin:0px;
	padding:0px;
}

.pre-index-img
{
	display: block;
    max-width: 100%;
    height: 100%;
	margin:0px;
	padding:0px;
	text-align: center;
}

/* =============================================================================
HOME
============================================================================= */


.hidden-index {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
 
}

#index-container
{
	z-index: 1;
}

.container
{
	
	width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;/* vertical center */
    left:0;right:0; /* horizontal center */
}

.content
{
	float: left;
	width:87.5%;
	height:100%;
	
}

.title
{
	position: absolute;
    top: 0;
	
    width:100%;
    /*height: 100%;*/
    z-index:99;
}

.title img
{
	max-width: 100%;
    max-height: 100%;
   /* display: block; */
    margin: auto;
}



.tips-container
{
	position: absolute;
    bottom: 0;
    width:100%;
	z-index:99;
}

.tips
{
	
	width:100%;
	height:68px;
	overflow:hidden;
	/*background:url(assets/images/web/pan-zoom.png) bottom right no-repeat;*/
}

.tips-container img
{
	max-width: 100%;
    max-height: 100%;
   /* display: block; */
	margin: auto;
	right:0;
	position:absolute;
}

.sidebar
{
	/*background:yellow;*/
	font-family: 'signika-regular';
	width:12.5%;
	float:left;
	height:100%;
	position: relative;
    z-index: 100;
}


.video-item
{
	display: inline-block;
    background-image: url('assets/images/web/video.png');
    background-repeat: no-repeat;
    /*background-position: 50% 10px;*/
	background-position: center;
}

.doc-item
{
	display: inline-block;
    background-image: url('assets/images/web/doc.png');
    background-repeat: no-repeat;
    /*background-position: 50% 10px;*/
	background-position: center;
}

.foto-item
{
	display: inline-block;
    background-image: url('assets/images/web/foto.png');
    background-repeat: no-repeat;
    /*background-position: 50% 10px;*/
	background-position: center;
}

.main-content
{
	position:relative;
	height:76.4%;
	background: #000;
	position: relative;
	/*z-index:100;*/
}

.bottom-content
{
	height:23.6%;
	width:100%;
	/*z-index:150;*/
}

.logo
{
	height:27.7%;
	/*background:green;*/
}

.logo img
{
	height:100%;
	width:100%;
}

.navigation
{
	height:48.7%;
	background-image: url("assets/images/web/back_sidebar.jpg");
    background-repeat: none;

}

.navigation-item
{
	padding: 2% 0 5% 2%;
	display:table;
	cursor:pointer;
	font-family: "signika-regular";
	font-size: 0.7vw;
}

.navigation-item span
{
	vertical-align: middle;
	
}

.navigation-item img
{
	vertical-align:middle;
	cursor:pointer;
	max-width: 80%;
    max-height: 80%;
	/*padding-right: 5px;
	padding-left: 5px;
	width: 13%;*/
	/*float:left;*/
}

.navigation-item-icon
{
	/*float: left;*/
	display:table-cell;
    /*height: 30px;*/
    width: 13%;
	vertical-align: middle;
}

.navigation-item-text
{
	display:table-cell;
	width: 87%;
	vertical-align: middle;
}

.forward
{
	height:23.6%;
	background:white;
	
}

.forward-container 
{
	width:100%;
	height:100%;
	
	
}

.forward-container a
{
	padding-top:10%;
	display: inline-block;
	width: 100%;
    height: 100%;
    
    
}


.forward-container img
{
	display:block;
    max-width: 80%;
    max-height: 80%;
	margin: auto;
	
}

.timeline
{
	height:calc(64.84% - 13px);
	width:100%;
	padding-bottom:3px;
	padding-top:10px;
	background-color: white;
	-webkit-box-shadow: inset -10px 0px 9px -5px rgba(0,0,0,0.29);
-moz-box-shadow: inset -10px 0px 9px -5px rgba(0,0,0,0.29);
box-shadow: inset -10px 0px 9px -5px rgba(0,0,0,0.29);
}



.upper-timeline
{
	height:calc(50% - 10px);
	margin-left:2.1%;
	margin-right:-2.7%;
	position:relative;
	width:100%;
}

.bottom-timeline
{
	height: calc(50% - 10px);
	position:relative;
	margin-left:18.75%;
	/*padding-right:-18.15%;*/
}

.timeline-button-up
{
	display:inline-block;
	/*margin-left: -1.5vw;*/
	/*margin-bottom:1%;*/
	/*position:absolute;*/
	
	/*bottom:0;*/
	/*margin-top:0.5%;*/
}

.timeline-button-up img
{
	/*width:100%;*/
	display: block;
    max-width: 100%;
    height: 100%;
	
}

.timeline-button-down
{
	
	display:inline-block;
	/*margin-left: -1vw;
	margin-top:0%;
	position:absolute;*/
	/*margin-bottom:0.7%;*/
	
	
}

.timeline-button-down img
{
	/*width:100%;*/
	display: block;
    max-width: 100%;
    height: 100%;
}

.timeline-button-date
{
	display:inline-block;
	
}

.timeline-button-date-up
{
	/*-webkit-transform: rotate(270deg);	
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	background-color: #a41f3c;
	color:#fff;*/
}

.timeline-button-date-up img
{
	vertical-align: middle;
}

.timeline-button-date-down img
{
	vertical-align: middle;
}

.timeline-button-date-down
{
	border-right:1px;
	border-color:  #a41f3c;
}

.timeline-button-title
{

	display:inline-block;
	vertical-align: middle;
	
}

.vertical-align
{
	vertical-align: middle;
}

.timeline-button-title-up
{
	
	
	
}

.line
{
	height:16px;
	/*background-image: url("assets/images/web/line_repeat.png");*/
	background-image: url("assets/images/web/timeline_storia.png");
    background-repeat: repeat-x;
	/*margin-left:5%;*/
	background-size: contain;
	
}

.timeline-1-up-first
{
	width:calc(17% + 15px);z-index:3;
}

.timeline-1-up-second
{
	width:calc(38.7% + 15px);
}

.timeline-1-up-third
{
	width:calc(22.7% + 15px);
}

.timeline-1-down-first
{
	width:calc(12.2% + 15px);
}

.timeline-1-down-second
{
	width:calc(47.8% + 15px);
}

.timeline-1-down-third
{
	width:calc(30.5% + 15px);
}

.mostra img {
	height:100%;
	width: 100%;

}	


.breakpoint
{
	float:left;
	background: url("assets/images/web/point.png") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow:hidden;
	height:100%;
	width:10px;
}	

.spacer
{
	float:left;
}


.line-2
{
	height:60px;
	/*background-image: url("assets/images/web/line_repeat.png");*/
	background-image: url("assets/images/web/timeline_narrare.png");
	background-repeat: no-repeat;
	/*margin-left:5%;*/
	width:100%;
	background-size: contain;
	
}

.bottom-timeline-2
{
	height:calc(50% - 60px);
}



.timeline-2-button-up
{
	display:inline-block;
	width:calc(14.28% - 0.3%);

}

.timeline-2-button-up img
{
	
	display: block;
    max-width: 100%;
    height: 100%;
	
}


#scroll {
  
    overflow:hidden;
	height:100%;
}

.img
{
	height: 100%; 
	
}

.over
{
	
	z-index: 2; 
	
	transform: translate(0, -100%);
}



.under
{
	
	
}

.visible {
  visibility: visible;
  opacity: 1;
  /*transition: opacity 2s linear;*/
  
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
  z-index:0;
}

.footer
{
	position: relative;
    overflow: auto;
	width: 100%;
	height:35.16%;
	background-color:#F1F1F1;
	-webkit-box-shadow: inset -10px 0px 9px -5px rgba(0,0,0,0.29);
	-moz-box-shadow: inset -10px 0px 9px -5px rgba(0,0,0,0.29);
	box-shadow: inset -10px 0px 9px -5px rgba(0,0,0,0.29);
}

.footer-button {
	height: 100%;
	width: 20%;
	float: left;
}

.footer-button div {
	width: 30%;
	float: left;
	height: 100%;
}

.footer-button img {
	max-width:100%; 
	max-height:100%; 
	display:block;

}

.footer-nav {
	height: 100%;
	width: 60%;
	float: left;
}

.footer-nav div{
	width: calc(33% - 20px);
	padding:0 10px;
	float: left;
	height: 100%;
}

.footer-nav img{
	max-width:100%; 
	max-height:100%; 
	display:block;
	/*padding-top:2%;*/
	margin:auto;
}

.footer-link {
	height: 100%;
	width: 20%;
	float: left;
}

.clear{
	float:none;
	clear:both;
	font-size:0px;
	line-height:0px;
	height:0px;
}

#loader-container
{
	position: absolute;
    top: calc(50% - 50px);
	left:calc(50% - 50px);
    width:100%;
	z-index:99;
}

.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (max-width: 1280px), screen and (max-height: 720px)
 {
 
	body
	{
		
		overflow-y:auto;
	}
 
    .container
	{
		
		width: 1280px!important; 
		height: 720px!important; /* height:width ratio = 9/16 = .5625  */
		max-height: 720px!important;
		max-width: 1280px!important; /* 16/9 = 1.778 */
		margin: auto;
		position: absolute;
		top:0;/* vertical center */
		left:0;right:0; /* horizontal center */
	}
	
	.title
	{
		width:1280px;
	   
	}
	
	.timeline
	{
		height:calc(64.84% - 15px);
		padding-top:10px;
		padding-bottom:5px;
	}
	
	.upper-timeline
	{
		
		margin-left:1.7%;
		
	}

	.bottom-timeline
	{
		
		margin-left:18.35%;
	}
	
	.timeline-1-up-first
	{
		width:calc(17% + 15px);z-index:3;
	}

	.timeline-1-up-second
	{
		width:calc(38.2% + 15px);
	}

	.timeline-1-up-third
	{
		width:calc(22.7% + 15px);
	}
	
	.timeline-1-down-first
	{
		width:calc(11.8% + 15px);
	}

	.timeline-1-down-second
	{
		width:calc(47.2% + 15px);
	}

	.timeline-1-down-third
	{
		width:calc(30.5% + 15px);
	}
	
	.navigation-item span
	{
		
		font-size:9px;
	}
}

@media screen and (min-width: 1921px), screen and (min-height: 1081px)
{

	 .container
	{
		
		width: 1920px!important; 
		height: 1080px!important;
		max-height: 1080px!important;
		max-width: 1920px!important; 
		margin: auto;
		position: absolute;
		top:0;/* vertical center */
		left:0;right:0; /* horizontal center */
	}
	
	.title
	{
		width:1920px;
	   
	}
	
}