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

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

body {
	margin:0px; 
	padding:0px; 
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-size:100%; 
	color:#333333; 
	height:100%; 
	background:#FFF;
}

a:link {color:inherit; text-decoration:none;}      
a:visited {color:inherit;}  
a:hover {color:inherit;}  
a:active {color:inherit;}  


img {border: 0;}

a.titlelinks { display:inline-block; text-decoration:none; padding:0 0 4px 0;}
a.titlelinks:hover {background:url(https://massiprod.com/music/soundtrack-creation.png); 
	background-position:bottom; 
	background-repeat:repeat-x; }

h1{}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

#titolo { height:0; overflow:hidden;}

.logo {margin:3% 0 0 6.5%; width:20%; min-width:65px; max-width:120px; max-height:120px;}

/*scroll*/
.bg {
  background: url(https://massiprod.com/music/dj.jpg); repeat:no-repeat; background-size:100% 100%;
  position: fixed;
  width: 100%;
  height: 80%;
  margin:18% 0 0 0;
  z-index: -1;
}
@media screen and (max-width: 768px) {
.bg {
 background-size:200% 100%;
}
}

.bg-production {
  background: url(https://massiprod.com/music/music-production.jpg); repeat:no-repeat; background-size:100% 100%;
  position: fixed;
  width: 100%;
  height: 80%;
  margin:15% 0 0 0;
  z-index: -1;
}
@media screen and (max-width: 768px) {
.bg-production {
 background-size:140% 100%;
}
}

.bg-music-fashion-show {
  background: url('https://massiprod.com/music/music-fashion-show.jpg'); repeat:no-repeat; background-size:100% 100%;
  position: fixed;
  width: 100%;
  height: 80%;
  margin:15% 0 0 0;
  z-index: -1;
}
@media screen and (max-width: 768px) {
.bg-music-fashion-show {
 background-size:140% 100%;
}
}

section {
  width: 100%;
  margin: 0;
}

/*dj MONTREAL ban*/
#dietro-dj-montreal {}
#dj-montreal {
	position:fixed; 
	background-color:#171717; 
	width:100%; 
	top:0px; 
	z-index:2;
	}




/*NAV*/

nav {
	height:0;
	width: 100%;
	position:relative;
	font-family: "Helvetica Neue Light","Helvetica Neue","Helvetica","Arial","Lucida Grande",sans-serif; color: #335980;
	font-size:14px;
}

nav ul {
	padding: 0 0 0 0;
	margin: 0 auto;
	height: 40px;
	float:right;
	margin: 50px 3.2% 0 0;
	
}
nav li {
	display: inline;
	float: left;
}
nav li a:link, nav a:visited {
	color: #fff;
	display: inline-block;
	width: 116px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	color:#FFF;
}

nav li a {
	}
	
nav li:last-child a {
	border-right: 0;
}

nav li a:hover, nav a:active  {background:url(https://massiprod.com/music/soundtrack-creation.png); 
	background-position:bottom; 
	background-repeat:no-repeat; 
}

nav a#pull {
	display: none;
}

nav li a.current{
	background:url(https://massiprod.com/music/soundtrack-creation.png); 
	background-position:bottom; 
	background-repeat:no-repeat; 
	color:#FFF;
	text-shadow:none;
}


@media screen and (max-width: 800px) {
	nav { 
  		height:0;
  	}
  	nav ul {
		padding:0 1% 0 0;
  		width: 98%;
  		display: block;
		display: none;
  		height: auto;
		margin:0;
  	}
  	nav li {
		width: 100%;
  		position: relative;
	}
  	nav li a {
		width: 100%;
		border-right:0;
		border-bottom: 2px solid rgb(255, 255, 255);
    	border-bottom: 2px solid rgba(255, 255, 255, .5);
    	-webkit-background-clip: padding-box; /* for Safari */
    	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	}
  	nav li a:link, nav a:visited  {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 5px;
		color:#FFF;
		text-shadow:none;
  	}
	
	nav li a:hover, nav a:active {
		width: 100%;
		background:none;
		font-weight:bold;
	}
	
	nav a#pull {
		display: block;
		width: 90px;
		height:30px;
		float:right;
		margin-right:5%;
		padding:10% 10% 0 0;
		background: url('https://massiprod.com/music/dj-montreal.png') no-repeat; background-position:bottom;
	}

nav a#pull:hover, nav a#pull:active {
}
	nav a#pull:after {
		content:"";
		background: url('') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;

	}
}
/*ENDNAV*/


/*HOME-MAIN*/
#home-main {
	-webkit-animation:rosso 6s; /* Chrome, Safari, Opera */
	animation:rosso 6s; background:#ff0000; 
	}
	/* Chrome, Safari, Opera */
	@-webkit-keyframes rosso{
	0%   {background: #FFF;}
	100% {background: #ff0000;}
	}
	/* Standard syntax */
	@keyframes rosso{
	0%   {background: #fff;}
	100% {background: #ff0000;}
}

#home-main-verde {
	-webkit-animation:verde 6s; /* Chrome, Safari, Opera */
	animation:verde 6s; background:#33a754; 
	}
	/* Chrome, Safari, Opera */
	@-webkit-keyframes verde{
	0%   {background: #FFF;}
	100% {background: #33a754;}
	}
	/* Standard syntax */
	@keyframes verde{
	0%   {background: #fff;}
	100% {background: #33a754;}
}

#home-main-blu {
	-webkit-animation:blu 6s; /* Chrome, Safari, Opera */
	animation:blu 6s; background:#334ea7; 
	}
	/* Chrome, Safari, Opera */
	@-webkit-keyframes blu{
	0%   {background: #FFF;}
	100% {background: #334ea7;}
	}
	/* Standard syntax */
	@keyframes blu{
	0%   {background: #fff;}
	100% {background: #334ea7;}
}

#home-main-giallo {
	-webkit-animation:giallo 6s; /* Chrome, Safari, Opera */
	animation:giallo 6s; background:#ffc300; 
	}
	/* Chrome, Safari, Opera */
	@-webkit-keyframes giallo{
	0%   {background: #FFF;}
	100% {background: #ffc300;}
	}
	/* Standard syntax */
	@keyframes giallo{
	0%   {background: #fff;}
	100% {background: #ffc300;}
}

#home-main-video {
	-webkit-animation:video 6s; /* Chrome, Safari, Opera */
	animation:video 6s; background:#afbc26; 
	}
	/* Chrome, Safari, Opera */
	@-webkit-keyframes video{
	0%   {background: #FFF;}
	100% {background: #afbc26;}
	}
	/* Standard syntax */
	@keyframes video{
	0%   {background: #fff;}
	100% {background: #afbc26;}
}


#home-main-nero {
	-webkit-animation:nero 6s; /* Chrome, Safari, Opera */
	animation:nero 6s; background:#222222; 
	}
	/* Chrome, Safari, Opera */
	@-webkit-keyframes nero{
	0%   {background: #FFF;}
	100% {background: #222222;}
	}
	/* Standard syntax */
	@keyframes nero{
	0%   {background: #fff;}
	100% {background: #222222;}
}

#home-main-music{text-align:right; margin:15% 0 2% auto;}
#home-main-music-page2{max-width:580px; text-align:right; margin:8% 0 2% auto;}
#imghome {margin:0 10% 0 auto; width:60%; max-width:580px;}
#divfreccia {width:100%; text-align:center; margin:0 auto 15% auto; color:#FFF; font-weight:bold;}


@media screen and (max-width: 360px) {
#home-main-music { margin:20% 0 5% auto;}
#home-main-music-page2 { margin:20% 0 5% auto;}
#imghome {margin:0 10% 0 auto; width:80%; max-width:580px;}
#divfreccia {width:100%; text-align:center; margin:15% auto 15% auto}
}

/*MENU2*/
#menu2{position: relative; height:100%; margin:0 0 0 0;}
#menu2vid {position:absolute; z-index: -99; width: 100%; height: 100%; margin:0 0 0 -50%;}
.menu2-title { font-size:360%; margin:0; padding:0; color:inherit;}
#menu2-col1{float: left; width:48%; height:0; padding: 2% 1% 30% 1%; text-align:right; margin:0; color:#222222;
	/*opacity*/
	background:rgb(255,255,255);
	background: transparent\9;
	background:rgba(255,255,255,0.6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff);
	zoom: 1;
	/*fine-opacity*/
}
#menu2-col2{float: left; width:48%; height:0; padding: 2% 1% 30% 1%; text-align:left; margin:0;color:#FFF;
	/*opacity*/
	background:rgb(0,0,0);
	background: transparent\9;
	background:rgba(0,0,0,0.6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
	zoom: 1;
	
	/*fine-opacity*/
}

@media screen and (max-width: 950px) {
.menu2-title { font-size:250%;}
}

@media screen and (max-width: 700px) {
#menu2vid { display:none;}
#menu2-col1{float: left; width:96%; padding: 3% 3% 30% 1%; min-height:250px;
}
#menu2-col2{float: left; width:94%; padding: 3% 2% 30% 4%;  min-height:250px;
}
}


/*TESTO*/
#testo{ background:#FFF; margin:0 0 0 0; padding:5% 0 5% 0;}
.testo-title {font-size:200%; margin:0; padding:0; }
#testo-col1{float: left; width:41%; padding: 0 4% 2% 5%; text-align:left; margin:0;
}

#testo-col2{float: left; width:44%; padding: 0 5% 2% 1%; text-align:left; margin:0; color:#666; line-height:200%;
}

@media screen and (max-width: 950px) {
#testo-col1{ width:90%; padding: 2% 5% 0 5%;
}

#testo-col2{ width:90%; padding: 0 5% 6% 5%;
}
}

/*DJSET*/
#djset-container { width:100%; margin:25% 0 0 0; padding: 0 0 5% 0; background:#FFF;}
#djset {width:29%; float:left; margin:0 2% 0 2%; padding:4% 0 2% 0;  max-width:1212px; border-bottom: 6px solid #ffc300; font-size:160%;}
a.djset-link:link{display:block; width:100%; background:url(https://massiprod.com/music/latitudehouse/play.png); 		
		background-position:right; background-repeat:no-repeat; background-size:50% 180%;}
a.djset-link:hover{ background:url(https://massiprod.com/music/latitudehouse/playhover.png); background-size:50% 180%; background-position:right; background-repeat:no-repeat;}
#djset-img{float:left; width:30%; margin:0 2% 0 0;}
.djset-description{font-size:70%; color:#666}

@media screen and (max-width: 1200px) {
#djset {width:46%;}

}

@media screen and (max-width: 768px) {
#djset-container {margin:35% 0 0 0;}
#djset {width:96%; font-size:120%;}
a.djset-link:link{background-size:48% 170%;}
a.djset-link:hover{background-size:48% 170%;}
#djset-img{width:30%;}
.djset-description{font-size:80%;}
}

/*MUSIC PRODUCTION*/
#music-production-container { width:100%; margin:25% 0 0 0; padding: 0 0 5% 0; background:#FFF;}
#music-production {width:29%; float:left; margin:0 2% 0 2%; padding:4% 0 2% 0;  max-width:1212px; border-bottom: 6px solid #334ea7; font-size:160%;}
a.music-production-link:link{display:block; width:100%; background:url(https://massiprod.com/music/latitudehouse/play.png); 		
		background-position:right; background-repeat:no-repeat; background-size:50% 180%;}
a.music-production-link:hover{ background:url(https://massiprod.com/music/latitudehouse/playhover.png); background-size:50% 180%; background-position:right; background-repeat:no-repeat;}
#music-production-img{float:left; width:30%; margin:0 2% 0 0;}
.music-production-description{font-size:70%; color:#666}

@media screen and (max-width: 1200px) {
#music-production {width:46%;}

}

@media screen and (max-width: 768px) {
#music-production-container {margin:35% 0 0 0;}
#music-production {width:96%; font-size:120%;}
a.music-production-link:link{background-size:48% 170%;}
a.music-production-link:hover{background-size:48% 170%;}
#music-production-img{width:30%;}
.music-production-description{font-size:80%;}
}

/*VID*/
.vid-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.vid-container iframe,
.vid-container object,
.vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*MENU4*/
#menu4container{ width:100%; background:#FFF; padding:10% 0 10% 0;}
a.menu4link:link{ display:block; width:100%; height:100%;
}

a.menu4link:hover{ background:url('https://massiprod.com/music/dj-fashion-show.png');
}
.menu4foto {width:100%;}
#menu4{width:90%; margin:0 auto 0 auto;  max-width:1212px;}
#menu4col1{width:25%; float:left;}
#menu4col2{width:25%; float:left;}
#menu4col3{width:25%; float:left;}
#menu4col4{width:25%; float:left;}

@media screen and (max-width: 700px) {
#menu4col1{width:100%; float:left; margin:0 0 20% 0;}
#menu4col2{width:100%; float:left; margin:0 0 20% 0;}
#menu4col3{width:100%; float:left; margin:0 0 20% 0;}
#menu4col4{width:100%; float:left; margin:0 0 20% 0;}
}

/*Descrizione*/
#descrizione{ background:#333; color:#CCC;}
.descrizione-title {font-size:200%; margin:0; padding:0; }
#descrizione-col1{float: left; width:43%; padding: 2% 1% 15% 6%; text-align:left; margin:0;
}

#descrizione-col2{float: left; width:43%; padding: 2% 6% 15% 1%; text-align:left; margin:0;; line-height:200%;
}

@media screen and (max-width: 700px) {
#descrizione-col1{ width:90%; padding: 5% 5% 0 5%;  height:auto; min-height:inherit;
}

#descrizione-col2{ width:90%; padding: 0 5% 15% 5%;  height:auto; min-height:inherit;
}
}

/*Contatti*/
#contatti{ background:#181818; color:#999;}
.contatti-title {font-size:200%; margin:0; padding:0; }
#contatti-col1{float: left; width:43%;  padding: 2% 1% 15% 6%; text-align:left; margin:0;
}

#contatti-col2{float: left; width:43%; padding: 2% 6% 15% 1%; text-align:left; margin:0;; line-height:200%;
}
@media screen and (max-width: 700px) {
#contatti-col1{ width:90%; padding: 5% 5% 0 5%; height:auto; min-height:inherit;
}

#contatti-col2{ width:90%; padding: 0 5% 15% 5%; height:auto; min-height:inherit;
}
}