@font-face {
    font-family: 'open_sanslight';
    src: url('../font/opensans-light-webfont.eot');
    src: url('../font/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/opensans-light-webfont.woff2') format('woff2'),
         url('../font/opensans-light-webfont.woff') format('woff'),
         url('../font/opensans-light-webfont.ttf') format('truetype'),
         url('../font/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight:normal;
    font-style:normal;
	}
	

html, 
body {
	width:100%;
	height: 100%;
    margin: 0px;
	padding: 0px;
	font-family: 'open_sanslight', sans-serif;
	font-weight: normal;
	font-size: 12px;
	background-color:#ffffff;
	}
a{
	color:#000;
	-webkit-transition: color 0.7s linear;
	-moz-transition: color 0.7s linear;
	-o-transition: color 0.7s linear;
	-ms-transition: color 0.7s linear;
	transition: color 0.7s linear;
	cursor:pointer;
	text-decoration:none;
	}
		
/*I TAG SECTION RISPONDONO ALLA CLASSE SLIDE LE POSIZIONI RELATIVE VANNO MANTENUTE*/

.slide{
	width:100%;
	height:100%;
	position: relative;
	margin:0;
	padding:0;
	}	

h1 	{
	font-family: 'open_sanslight', sans-serif;
	padding:0px;
	margin:0px;
	line-height: 1em;
	font-weight:normal;
	color: #000;
	font-size: 8vw;
	}

h2  {
	font-size: 2em;
	line-height: 1em;
	font-weight: 400;
	color: #000;
	padding:0px;
	margin:0px;
	}	
	
	
.logo {
	padding:0px;
	width:20%;
	margin:15% 40% 75% 40%;
	z-index:101;
	position:absolute;
	}

/*---------------BLOCCO BARRA DI NAVIGAZIONE-----------------------------*/
.menu2 {
	display: none;
	width: 12%;
	heigth:80%;
	z-index: 1000;
	position: fixed;
	right:2%;
	left:97%;
	top:35%;
	}
	
.circle {
	padding:2% 2%;
	margin:7% 0% 0% 0%;
	width:5px;
    height:5px;
    border-radius:50px;
    border:1px #ccc;
	border-style: solid;
    cursor:pointer;
    background-color:rgba(51,51,51,0.4);
	background-position:center;
	background-size:cover;
    -moz-transition: 0.7s ease;
	-ms-transition: 0.7s ease;
	-o-transition: 0.7s ease;
	transition:all 0.7s ease 0.7s;
	transition: transform 0.7s;
	transition: background-color 0.7s ease;
	}
	
.circle:hover{
	border-color:#666;
    background-color:#ccc;
    transition: transform 0.7s;
	transform: scale(1.3);
	-webkit-box-shadow: inset 1px 1px 2px -1px rgba(50, 50, 50, 1);
-moz-box-shadow:    inset 1px 1px 2px -1px rgba(50, 50, 50, 1);
box-shadow:         inset 1px 1px 2px -1px rgba(50, 50, 50, 1);
	}
	
#aa:hover {
	background-color:rgba(255,102,0,1);
	}
#bb:hover {
	background-color:rgba(255,228,20,1);
	}
#cc:hover {
	background-color:rgba(51,204,51,1);
	}
#dd:hover {
	background-color:rgba(255,0,0,1);
	}
#ee:hover {
	background-color:rgba(153,0,255,1);
	}
#ff:hover {
	background-color:rgba(0,255,255,1);
	}
#gg:hover {
	background-color:rgba(255,0,102,1);
	}
#hh:hover {
	background-color:rgba(255,255,255,1);
	}
#ii:hover {
	background-color:rgba(255,0,102,1);
	}
	
	
/*---------------FINE BLOCCO BARRA DI NAVIGAZIONE------------------------*/










	

/*---------------CONTENITORE FILMATO - inibito e non funzionante--------------------------*/

/*
#wrapper{
	width: 100%; 
	height: 100%;
	margin: 0px;
	background-color:#fff;
	background-image:url(#);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding:0px;
}
*/

/*---------------FINE CONTENITORE FILMATO--------------------------------*/	



/*---------------------BLOCCO FINE CREATIVE WORKS + LOGO-----------------------*/
#fine_creative_works {
    height: 100%;
	background-image:url(../images/76.png);
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding:0px;
	margin:0px;
	z-index:79;
	}

/*---------------------FINE BLOCO FINE CREATIVE WORKS + LOGO------------------*/





















/*---------------------BLOCCO PACKAGING da MERILIN SLIDE-----------------*/
#grafica {
    height: 100%;
	background-image:url(../images/17.jpg);
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding:0px;
	margin:0px;
	z-index:79;
	}

#grafica h1{
	color:rgba(255,0,102,0.7);
	font-size: 8.5vw;
	margin:2% 0px 0px 1%;
	padding:0px;
	position: absolute;
	z-index: 78;
	font-family: 'open_sanslight', sans-serif;
	}
	
#grafica p{
	color:#333;
	font-family:'open_sanslight', sans-serif;
	color:rgba(0,0,0,1);
	font-size: 1vw;
	margin:11.5% 0% 0px 1.9%;
	padding:0px;
	position: absolute;
	line-height: 160%;
	z-index: 77;
	}
	
#brand1{
	width:319px;
	height:319px;
	margin-top: 20%;
	margin-left:5%;
	position: absolute;
	 -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    border-radius: 50%;
	z-index:76;
	
	}
	
	
	
		
.crema_a{
	width: 32%;
    margin-top: 20%;
	margin-left:5%;
	position:absolute;
	z-index: 75;
	animation:fade-out21 10s infinite;
    -webkit-animation:fade-out21 10s infinite;
    animation:fade-out21 10s infinite;
	}
.crema_b{
	width: 32%;
    margin-top: 20%;
	margin-left:5%;
	position:absolute;
	z-index: 74;
	animation:fade-out22 10s infinite;
    -webkit-animation:fade-out22 10s infinite;
    animation:fade-out22 10s infinite;
	}

@keyframes fade-out21
{
  0%   {opacity:1}
  15%   {opacity:1}
  30%   {opacity:1}
  45% { opacity: 0}
  60% { opacity: 0}
  75% { opacity: 0}
  90% { opacity: 1}
  100% { opacity: 1}
}

@keyframes fade-out22
{
  0%   {opacity:0}
  15%   {opacity:0}
  30%   {opacity:0}
  45% { opacity: 1}
  60% { opacity: 1}
  75% { opacity: 1}
  90% { opacity: 0}
  100% { opacity: 0}
}
/*---------------------FINE BLOCO PACKAGING da MERILIN SLIDE-------------*/



/*---------------------BLOCCO PACKAGING da MERILIN SLIDE-----------------*/
#merilin {
    height: 100%;
	background-image:url(../images/1.jpg);
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding:0px;
	margin:0px;
	z-index:74;
	}

#merilin h1{
	color:rgba(255,255,51,0.7);
	font-size: 9vw;
	margin:2% 0px 0px 1%;
	padding:0px;
	position: absolute;
	z-index: -19;
	font-family: 'open_sanslight', sans-serif;
	}
	
#merilin p{
	color:#333;
	font-family:'open_sanslight', sans-serif;
	color:rgba(51,51,51,1);
	font-size: 1vw;
	margin:11.5% 0% 0px 1.9%;
	padding:0px;
	position: absolute;
	line-height: 160%;
	z-index: -2;
	}
		
.crema_a{
	width: 32%;
    margin-top: 20%;
	margin-left:5%;
	position:absolute;
	z-index: -3;
	animation:fade-out21 10s infinite;
    -webkit-animation:fade-out21 10s infinite;
    animation:fade-out21 10s infinite;
	}
.crema_b{
	width: 32%;
    margin-top: 20%;
	margin-left:5%;
	position:absolute;
	z-index: -3;
	animation:fade-out22 10s infinite;
    -webkit-animation:fade-out22 10s infinite;
    animation:fade-out22 10s infinite;
	}

@keyframes fade-out21
{
  0%   {opacity:1}
  15%   {opacity:1}
  30%   {opacity:1}
  45% { opacity: 0}
  60% { opacity: 0}
  75% { opacity: 0}
  90% { opacity: 1}
  100% { opacity: 1}
}

@keyframes fade-out22
{
  0%   {opacity:0}
  15%   {opacity:0}
  30%   {opacity:0}
  45% { opacity: 1}
  60% { opacity: 1}
  75% { opacity: 1}
  90% { opacity: 0}
  100% { opacity: 0}
}
/*---------------------FINE BLOCO PACKAGING da MERILIN SLIDE-------------*/


/*-----------------BLOCCO TOMMY WILSON-----------------------------------*/
#tommy {
	width:100%;
	height: 100%;
	background-image:url(../images/3.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	margin:0px;
	padding:0px;
	z-index:71;
	}
		
#tommy img{
	margin-top: 6%;
}
	
.tommy_sx{
	width: 25%;
    margin-left:5%;
	position:absolute;
	z-index:-230;
	animation:fade-out31 10s infinite;
    -webkit-animation:fade-out31 10s infinite;
    animation:fade-out31 10s infinite;
}
	
.tommy_sx_red{
	width: 25%;
    margin-left:5%;
	position:absolute;
	z-index:-230;
	animation:fade-out32 10s infinite;
    -webkit-animation:fade-out32 10s infinite;
    animation:fade-out32 10s infinite;
	}

@keyframes fade-out31
{
  0%   {opacity:1}
  15%   {opacity:1}
  30%   {opacity:1}
  45% { opacity: 0}
  60% { opacity: 0}
  75% { opacity: 0}
  90% { opacity: 1}
  100% { opacity: 1}
}

@keyframes fade-out32
{
  0%   {opacity:0}
  15%   {opacity:0}
  30%   {opacity:0}
  45% { opacity: 1}
  60% { opacity: 1}
  75% { opacity: 1}
  90% { opacity: 0}
  100% { opacity: 0}
}

.tommy_cn{
	width: 25%;
   
	margin-left:35%;
	position:absolute;
	z-index:-231;
	animation:fade-out41 11s infinite;
    -webkit-animation:fade-out41 11s infinite;
    animation:fade-out41 11s infinite;
	}
	
.tommy_cn_brown{
	width: 25%;
 
	margin-left:35%;
	position:absolute;
	z-index:-231;
	animation:fade-out32 11s infinite;
    -webkit-animation:fade-out32 11s infinite;
    animation:fade-out32 11s infinite;
	}
	
@keyframes fade-out41
{
  0%   {opacity:1}
  15%   {opacity:1}
  30%   {opacity:1}
  45% { opacity: 0}
  60% { opacity: 0}
  75% { opacity: 0}
  90% { opacity: 1}
  100% { opacity: 1}
}

@keyframes fade-out42
{
  0%   {opacity:0}
  15%   {opacity:0}
  30%   {opacity:0}
  45% { opacity: 1}
  60% { opacity: 1}
  75% { opacity: 1}
  90% { opacity: 0}
  100% { opacity: 0}
}


.tommy_dx{
	width: 25%;
  
	margin-left:69%;
	position:absolute;
	z-index:-232;
	animation:fade-out51 9s infinite;
    -webkit-animation:fade-out51 9s infinite;
    animation:fade-out51 9s infinite;
	}
	
.tommy_dx_blu{
	width: 25%;
   	margin-left:69%;
	position:absolute;
	z-index:-232;
	animation:fade-out52 9s infinite;
    -webkit-animation:fade-out52 9s infinite;
    animation:fade-out52 9s infinite;
	}
	
@keyframes fade-out51
{
  0%   {opacity:1}
  15%   {opacity:1}
  30%   {opacity:1}
  45% { opacity: 0}
  60% { opacity: 0}
  75% { opacity: 0}
  90% { opacity: 1}
  100% { opacity: 1}
}

@keyframes fade-out52
{
  0%   {opacity:0}
  15%   {opacity:0}
  30%   {opacity:0}
  45% { opacity: 1}
  60% { opacity: 1}
  75% { opacity: 1}
  90% { opacity: 0}
  100% { opacity: 0}
}
/*-----------------FINE BLOCCO TOMMY WILSON------------------------------*/

/*---------------------BLOCCO ARCHITETTURA-------------------------------*/
#architettura{
	height: 100%;
	background-image:url(../images/33.jpg);
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding:0px;
	margin:0px;
	z-index: 74;	
	}	
	
#architettura h1{
	font-family: 'open_sanslight', sans-serif;
	color:rgba(102,255,0,0.7);
	font-size: 8vw;
	margin:2% 0px 0px 1%;
	padding:0px;
	position: absolute;
	z-index: 25;
}

		
#architettura p{
	color:#333;
	font-family: 'open_sanslight', sans-serif;
	color:rgba(255,255,255,1);
	font-size: 1vw;
	margin:10.5% 0% 0px 1%;
	padding:0px;
	position: absolute;
	z-index:80;
	line-height: 160%; 
}
/*---------------------FINE BLOCCO ARCHITETURA---------------------------*/



/*---------------------BLOCCO MODELLING CON SEZIONE DX e SX--------------*/
#modelling {
    height: 100%;
	background-image:url(../images/5.jpg);
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding:0px;
	margin:0px;
	z-index:72;
	}
	
#modelling h1{
	font-family: 'open_sanslight', sans-serif;
	color:rgba(255,255,255,0.5);
	font-size: 7.8vw;
	margin: 1% 0% 0% 1.5%;
	padding:0px;
	position: absolute;
	z-index:-70;
	}
	
#modelling p{
	color:#333;
	font-family:'open_sanslight', sans-serif;
	color:rgba(255,255,255,1);
	font-size: 1vw;
	margin:11.5% 0% 0px 2%;
	padding:0px;
	position: absolute;
	line-height: 160%;
	z-index:-71;
	}
	
.head_sx{
	width: 24%;
    margin-top: 0%;
	margin-left:25.9%;
	position:absolute;
	z-index:-72;
	}

.head_dx{
	width: 24%;
    margin-top: 0%;
	margin-left:50%;
	position:absolute;
	z-index:-73;
	}


/*---------------------FINE BLOCCO MODELLING CON SEZIONE DX e SX---------*/	


/*---------------------BLOCCO VST RENDERING-------------------------------*/
#vst{
	height: 100%;
	background-image:url(../images/4.jpg);
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding:0px;
	margin:0px;
	z-index:75;
	}	
	
#vst p{
	color:rgba(255,255,255,1);
	font-family: 'open_sanslight', sans-serif;
	font-size: 1vw;
	margin:11.5% 0% 0px 1.2%;
	padding:0px;
	position: absolute;
	z-index:80;
	line-height: 160%; 
	}
	
#vst h1{
	font-family: 'open_sanslight', sans-serif; 
	color:rgba(153,0,255,0.5);
	font-size: 8vw;
	margin:2% 0px 0px 1.2%;
	padding:0px;
	position: absolute;
	z-index: 25;
	}
		
#vst h2{
	font-family:OpenSans-Light; 
	color:rgba(51,51,51,1);
	font-size: 1.2vw;
	margin:15% 0% 0px 1%;
	padding:0px;
	position: absolute;
	}
/*---------------------FINE BLOCCO VST RENDERING----------------------------*/


/*---------------------BLOCCO VST WEB AND SEO-------------------------------*/
#web{
	width:100%;
	height: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-image:url(../images/6.jpg);
	background-size: cover;
	background-attachment: fixed;
	margin:0px;
	padding:0px;
	display: block;
	z-index:76;
	}


#web h1 {
	font-family: 'open_sanslight', sans-serif; 
	color:rgba(0,255,255,1);
	font-size: 8vw;
	margin:2% 0px 0px 1%;
	padding:0px;
	position: absolute;
	z-index: 29;
	}
	
#web p{
	color:rgba(255,255,255,1);
	font-family: 'open_sanslight', sans-serif;
	font-size: 1vw;
	margin:11.5% 0% 0px 1%;
	padding:0px;
	position: absolute;
	z-index:80;
	line-height: 160%; 
	}
	
.fox{
	width: 38%;
    margin-top: 10%;
	margin-left:59%;
	position: absolute;
	z-index:26;
	}
	
.chrome {
	width: 14%;
    margin-top: 33%;
	margin-left:20%;
	position: absolute;
	z-index:23;	
	}
	
.explorer {
	width: 10%;
    margin-top: 22%;
	margin-left:2%;
	position: absolute;
	z-index:22;	
	}
	
		
.safari {
	width: 7%;
    margin-top: 21%;
	margin-left: 42%;
	position: absolute;
	z-index:21;	
	padding:0px;
	}
	
	
/*---------------------FINE BLOCCO WEB SEO----------------------------*/





/*---------------------BLOCCO MAPPA---------------------------------------*/
#contatti {
	width:100%;
	height: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	margin:0px;
	padding:0px;
}

#form {
	text-align:center;
	margin:0px auto;
	width:33.333333%;
	height: 100%;
	background-color:rgba(0,153,255,1);
	/*background-image:url(../images/light-blue-wallpaper-25%5B1%5D.jpg);*/
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position:center;
	float:left;	
	padding:0px;
	}

#ticker {
	margin:0px auto;
	width:33.333334%;
	height: 100%;
	
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position:center;
	float:left;
	}
	
#mappa {
	text-align:center;
	margin:0px auto ;
	height: 100%;
	width:33.333333%;
	background-color:#fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position:center;
	float:left;
}

/*---------------------FINE BLOCCO MAPPA----------------------------------*/


/*RIPULISCE IL FLUSSO DATI*/	
.clear {clear:both;}
/*FINE ---- RIPULISCE IL FLUSSO DATI*/



.read_more {
	font-size:1.3vw;
	border: solid 1px #000;
	padding:5px 10px;
	position: absolute;
	top:89%;
	left:87%;
	transition: background-color 0.7s ease;
	background-color:rgba(255,255,255,0.5);
	cursor:pointer;
}

.read_more:hover {
	background-color:rgba(255,255,255,0.8);
}

#rm1 {
	border: solid 1px #FF0;
	z-index:119;	
}


#rm2 {
	border: solid 1px #6F3;
	z-index:119;
}

#rm3 {
	 border: solid 1px #F03;
	 z-index:119;
}	

#rm4 {
	border: solid 1px #909;
	z-index:119;
}


#rm5 {
	border: solid 1px #0CF;
	z-index:119;
}

#rm6 {
	border: solid 1px #ff0066;
	z-index:119;
}


/*--------------------------TASTO PULSANTE----------------------------------*/
.pulsa {
	padding:0px;
	width:2%;
	margin:32% 49% 75% 49%;	
	z-index:102;
	position:absolute;
	animation: pulse 1.2s ease infinite;
	padding:0%;
	cursor:pointer;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
/*--------------------------TASTO PULSANTE----------------------------------*/