@charset "utf-8";
/* CSS Document */

#main {
	max-width: 4000px;
    
}

#intestazione {
	position:relative;
	height:70px;
    padding-top: 10px;
	/*background-color:#3A3A3A;*/
	

}
#lingua {
	display:inline-block;
	position:absolute;
	right:0px;
}
#social_condividi {
	display:inline-block;
	position:absolute;
	right:30px;
	padding-top:5px;
}
/*PRIMO*/
#primo {
	width: 100%;
	min-width: 100%;
	position: relative;
    
	/*background-image: url(img/1A.jpg);*/
	/*display: flex;

justify-content: center;

flex-direction: column;

align-items: center;*/
}

#primo img{
	width: 100%;
    
	/*float: left;*/
	
}
#primo-A {
    
	width: 37%;
	/*margin: 0 auto;*/
	/*margin: -300px 0 0 -300px;*/
	position: absolute;
	left: 28%;
	top: 17%;
	
}
#primo-A img{
    
	width: 100%;
}
#primo-B {
    
	width: 70%;
	/*margin: 0 auto;*/
	/*margin: -300px 0 0 -300px;*/
	position: absolute;
	left: 12%;
	top: 24%;
	
}
#primo-B img{
    
	width: 100%;
}

@keyframes testo1-A {
0% {opacity:0; top:0%;}
100% {opacity:1; top:5%;}
}

#primo-C {
    
	width: 19%;
	/*margin: 0 auto;*/
	/*margin: -300px 0 0 -300px;*/
	position: absolute;
	left: 3%;
	top: 5%;
    animation-name: testo1-A;
    animation-duration: 4s;
	
}
#primo-C img{
    
	width: 100%;
}
#primo-D {
    
	width: 10%;
	/*margin: 0 auto;*/
	/*margin: -300px 0 0 -300px;*/
	position: absolute;
	right: 8%;
	top: 62%;
    /*animation-name: testo1-A;
    animation-duration: 4s;*/
	
}
#primo-D:hover {
    width: 12%;
	/*right: 7%;
	top: 61%;*/
    /*animation-name: testo1-A;
    animation-duration: 4s;*/
	
}
#primo-D img{
    
	width: 100%;
    cursor: pointer;
}
#primo-E {
    
	width: 30%;
	/*margin: 0 auto;*/
	/*margin: -300px 0 0 -300px;*/
	position: absolute;
	right: 1%;
	top: 92%;
    /*animation-name: testo1-A;
    animation-duration: 4s;*/
	
}
#primo-E:hover {
    width: 32%;
	/*right: 7%;
	top: 61%;*/
    /*animation-name: testo1-A;
    animation-duration: 4s;*/
	
}
#primo-E img{
    
	width: 100%;
    cursor: pointer;
}

#secondo {
	width: 100%;
	min-width: 100%;
	position: relative;
	/*background-image: url(img/1A.jpg);*/
	/*display: flex;

justify-content: center;

flex-direction: column;

align-items: center;*/
}
#secondo img{
	width: 100%;
	/*float: left;*/
	
}
#secondo-A {
	width: 30%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 8%;
	top: 30%;
    overflow: hidden;
/*    opacity:1;
*/	 
	
}
#secondo-A img {
    overflow: hidden;
/*	width: 100%;
    height: 0%!important;*/
	/*margin: 0 auto;*/
    position: relative;
	 
	
}

@keyframes secondo-A {
0% {opacity:0; top:0%;}
100% {opacity:1; top:30%;}
}

div#secondo-A.visible {
animation-name: secondo-A;
animation-duration: 4s;
}

div#secondo-A.invisible {
    opacity:0!important;
}

#secondo-B {
	width: 11%;
	/*margin: 0 auto;*/
	position: absolute;
	left: 33.6%;
	top: 25%;
    overflow: hidden;
	 
	
}

#secondo-B img {
    overflow: hidden;
/*	width: 100%;
    height: 0%!important;*/
	/*margin: 0 auto;*/
    position: relative;
	 
	
}

@keyframes secondo-B {
0% {opacity:0; }
100% {opacity:1; }
}

div#secondo-B.visible {
animation-name: secondo-B;
animation-duration: 4s;
}

div#secondo-B.invisible {
    opacity:0!important;
}

#secondo-C {
	width: 11%;
	/*margin: 0 auto;*/
	position: absolute;
	left: 58.4%;
	top: 20%;
    overflow: hidden;
    cursor: pointer;
	 
	
}

#secondo-C img {
    overflow: hidden;
/*	width: 100%;
    height: 0%!important;*/
	/*margin: 0 auto;*/
    position: relative;
	 
	
}
#secondo-C:hover {
	left: 59.4%;
	top: 19%;
	 
	
}


#terzo {
	width: 100%;
	min-width: 100%;
	position: relative;
	/*background-image: url(img/1A.jpg);*/
	/*display: flex;

justify-content: center;

flex-direction: column;

align-items: center;*/
}

#terzo img{
	width: 100%;
	/*float: left;*/
	
}
#terzo-A {
	width: 30%;
	/*margin: 0 auto;*/
	position: absolute;
	left: 8%;
	top: 15%;
	
}
#terzo-A img{
	width: 100%;
}

@keyframes terzo-A {
    0% {left:8%; width:30%;top: 15%;}
    80% {left:5%; width:42%;top: 8%;}
    100% {left:5%; width:40%;top: 8%;}
}

div#terzo-A.visible {
    animation-name: terzo-A;
    animation-duration: 3s;
    width:40%;
    left:5%;
    top: 8%;
    
}

div#terzo-A.invisible {
    /*opacity:0!important;*/
}


#terzo-B {
	width: 59%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 0%;
	bottom: 0%;
    z-index: -1!important;
	
}
#terzo-B img{
	width: 100%;
}

@keyframes terzo-B {
    0% {right:0%; width:59%;bottom: 0%;}
    100% {right:0%; width:50%;bottom: 0%;}
}

div#terzo-B.visible {
    animation-name: terzo-B;
    animation-duration: 3s;
    width:50%;
	right: 0%;
	bottom: 0%;
    
}

div#terzo-B.invisible {
    /*opacity:0!important;*/
}

#terzo-C {
	width: 19%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 5%;
	top: 13%;
    overflow: hidden;
/*    opacity:1;
*/	 
	
}
#terzo-C img {
    overflow: hidden;
/*	width: 100%;
    height: 0%!important;*/
	/*margin: 0 auto;*/
    position: relative;
	 
	
}

@keyframes terzo-C {
0% {opacity:0; top:0%;}
100% {opacity:1; top:13%;}
}

div#terzo-C.visible {
animation-name: terzo-C;
animation-duration: 4s;
}

div#terzo-C.invisible {
    opacity:0!important;
}

#terzo-D {
	width: 19%;
	/*margin: 0 auto;*/
	position: absolute;
	left: 14%;
	top: 83%;
	
}
#terzo-D img{
	width: 100%;
}

@keyframes terzo-D {
    0% {left:0%; }
    100% {left:14%; }
}

div#terzo-D.visible {
    animation-name: terzo-D;
    animation-duration: 3s;
    
}

div#terzo-D.invisible {
    opacity:0!important;
}

#terzo-E {
	width: 16%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 16%;
	top: 59%;
	
}
#terzo-E img{
	width: 100%;
}

@keyframes terzo-E {
    0% {right:0%; }
    80% {right:18%;}
    100% {right:16%; }
}

div#terzo-E.visible {
    animation-name: terzo-E;
    animation-duration: 3s;
    
}

div#terzo-E.invisible {
    opacity:0!important;
}

#quarto {
	width: 100%;
	min-width: 100%;
	position: relative;
	/*background-image: url(img/1A.jpg);*/
	/*display: flex;

justify-content: center;

flex-direction: column;

align-items: center;*/
}

#quarto img{
	width: 100%;
	/*float: left;*/
	
}
#quarto-A {
	width: 45%;
	/*margin: 0 auto;*/
	position: absolute;
	left: 3%;
	top: 15%;
	
}
#quarto-A img{
	width: 100%;
}

@keyframes quarto-A {
    0% {left:8%; width:30%;top: 15%;}
    100% {left:3%; width:45%;top: 8%;}
}

div#quarto-A.visible {
    animation-name: quarto-A;
    animation-duration: 3s;
    width:45%;
    left:3%;
    top: 8%;
    
}

div#quarto-A.invisible {
    /*opacity:0!important;*/
}

#quarto-B {
	width: 40%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 2%;
	bottom: 2%;
    z-index: -1!important;
	
}
#quarto-B img{
	width: 100%;
}

@keyframes quarto-B {
    0% {right:2%; width:40%;bottom: 2%;}
    100% {right:2%; width:30%;bottom: 2%;}
}

div#quarto-B.visible {
    animation-name: quarto-B;
    animation-duration: 3s;
    width:30%;
	right: 2%;
	bottom: 2%;
    
}

div#quarto-B.invisible {
    /*opacity:0!important;*/
}


#quarto-C {
	width: 15%;
	/*margin: 0 auto;*/
	position: absolute;
	left: 5%;
	top: 65%;
	
}
#quarto-C img{
	width: 100%;
}

@keyframes quarto-C {
    0% {left:0%; }
    80% {left:8%; }
    100% {left:5%; }
}

div#quarto-C.visible {
    animation-name: quarto-C;
    animation-duration: 3s;
    
}

div#quarto-C.invisible {
    opacity:0!important;
}

#quarto-D {
	width: 7%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 8%;
	top: 15%;
	
}
#quarto-D img{
	width: 100%;
}

@keyframes quarto-D {
    0% {right:0%; }
    100% {right:8%; }
}

div#quarto-D.visible {
    animation-name: quarto-D;
    animation-duration: 3s;
    
}

div#quarto-D.invisible {
    opacity:0!important;
}

#quinto {
	width: 100%;
	min-width: 100%;
	position: relative;
	/*background-image: url(img/1A.jpg);*/
	/*display: flex;

justify-content: center;

flex-direction: column;

align-items: center;*/
}

#quinto img{
	width: 100%;
	/*float: left;*/
	
}
#quinto-A {
	width: 25%;
	/*margin: 0 auto;*/
	position: absolute;
	left: 5%;
	top: 25%;
	
}
#quinto-A img{
	width: 100%;
}

@keyframes quinto-A {
    0% {left:5%; width:25%;top: 25%;}
    100% {left:3%; width:36%;top: 3%;}
}

div#quinto-A.visible {
    animation-name: quinto-A;
    animation-duration: 3s;
    width:36%;
    left:3%;
    top: 3%;
    
}

div#quinto-A.invisible {
    /*opacity:0!important;*/
}

#quinto-B {
	width: 25%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 11%;
	bottom: 25%;
	
}
#quinto-B img{
	width: 100%;
}

#quinto-C {
	width: 6%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 5%;
	bottom: 3%;
	
}
#quinto-C img{
	width: 100%;
    cursor: pointer;
}

#quinto-D {
	width: 35%;
	/*margin: 0 auto;*/
	position: absolute;
	right: 5%;
	bottom: 12%;
	
}
#quinto-D img{
	width: 100%;
}

@keyframes quinto-D {
    0% {right:5%; width:5%;bottom: 12%;}
    100% {right:5%; width:35%;bottom: 12%;}
}

div#quinto-D.visible {
    animation-name: quinto-D;
    animation-duration: 3s;
    width:35%;
    right:5%;
    bottom: 12%;
    
}

div#quinto-D.invisible {
    opacity:0!important;
    width:5%;
}

#wild-rome {
    
	width: 27%;
	/*margin: 0 auto;*/
	/*margin: -300px 0 0 -300px;*/
	position: absolute;
	left: 39%;
	top: 35%;
    z-index: 1000;
    
	
}
#wild-rome img{
    
	width: 100%;
}
@keyframes wild-rome {
    0% {top:35%; opacity:100%;}
    100% {top:100%; opacity:0%;}
}

div#wild-rome.wild-rome {
   /* position:fixed!important;
	left: 39%;
	top: 35%;*/

    /*    animation-name: wild-rome;
    animation-duration: 3s;
    width:27%;
	left: 39%;
	top: 100%;
*/    
/*transform: translate(0px, 200px);*/
}

div#wild-rome.invisible {
    /*opacity:0!important;*/
}
div#wild-rome.fixed {
    position:fixed!important;
    /*top: 0px!important;*/
}


#rome-wild {
    
	width: 27%;
	/*margin: 0 auto;*/
	/*margin: -300px 0 0 -300px;*/
	position: absolute;
	left: 39%;
    opacity: 0;
    top: 60%;
    
	
}
#rome-wild img{
    
	width: 100%;
}

div#rome-wild.fixed {
    position:fixed!important;
    opacity: 0.5!important;
    /*top: 0px!important;*/
}