#menu-global{width:100%; z-index: 3000;padding-top: 1px; top:75px; left:0; /*background:url(../img/trame.png);*/ position: absolute; visibility:hidden;opacity:0; transition:all 0.5s ease; }
#menu-global.open{opacity:1}

#widgets-container.grid{visibility:hidden;}

.grid{ width:98%; margin-top:5%; margin-left:auto; margin-right:auto; position:relative; z-index:100; pointer-events: initial; }
#menu-global .grid{z-index: 3000;}

.grid.open, #menu-global.open, #widgets-container.grid.open{visibility:visible}

.row{width:65%; margin-left:auto; margin-right:auto; position:relative}

#widgets-container.grid{margin-top:0px !important;}
#widgets-container.grid .row{margin-top:0px !important;overflow:hidden}
#widgets-container.grid .row:last-child{ margin-top:20px !important; }

.grid-width-one-column{width:100%;}
.grid-width-two-column{width:50%;}
.grid-width-two-column-2_3{width:66%;}
.grid-width-two-column-1_3{width:34%;}

.grid-width-tree-column{width:33%;}
.grid-width-tree-column:first-child{width:34%}


.grid-height-one{height:290px}
.grid-height-two{height:220px}
.grid-height-three{height:150px}
.grid-height-four{height:145px}

.grid figure.cell{height:100%; position:relative;cursor:pointer;float:left;perspective: 600px;}
.grid figure{padding:0 !important; margin:0 !important}
.grid figure.cell .content{
	position:absolute;
	width:100%;
	height:100%;

	background-repeat:no-repeat;
	background-position:center;
	display:block;	
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	  
	overflow:hidden;
	
	/*transform: rotateX(90deg) translateY(-400px) translateZ(200px) ;*/
	/*transform-origin: bottom center;*/
	
	transform-style: preserve-3d;	
	/*opacity:0;*/
}

.grid figure.cell.flip .content{ /*transition:all 0.5s ease;   transform: rotateX(0deg) translateY(0px) translateZ(0px) !important;*/  }

.grid figure.cell .content .video-container{position:absolute;}

/****************************************/
/*****************ROLL*******************/
/****************************************/

figure.cell .content .roll{
	z-index:100;
	display:block;
	background-color:#000000;
	opacity: 0.25;
	width:100%; 
	height:100%; 
	position:absolute;
	top:0px;
	transition:all 0.5s ease;
}

figure.cell.over .content .roll {
	height:0%;
}

figure.cell .content img{
	position: relative;
	z-index:200;
}

/*figure.grid-width-one-column.cell .content img{width:40%;}
figure.grid-width-two-column.cell .content img{width:40%;}
figure.grid-width-two-column-2_3.cell .content img{width:30%;}
figure.grid-width-two-column-1_3.cell .content img{width:40%;}
figure.grid-width-tree-column.cell .content img{width:40%;}*/

@media screen and (max-width: 960px) {
	.grid{width:98% !important; margin-top:5%;}	
	.grid .row{width:100% !important;}
}

@media screen and (max-width: 700px) {

	/* =============================================================================
	GRID
	========================== =================================================== */
	
	.grid{ width:100%; margin-top:5%; }

	.grid .row{ width:90%; }
	

	.grid .grid-width-one-column{ width:100% !important; }
	.grid .grid-width-two-column{ width:50% !important; }
	.grid .grid-width-two-column-2_3{ width:100% !important; }
	.grid .grid-width-two-column-1_3{ width:100% !important; }
	.grid .grid-width-tree-column{ width:100% !important; }
	
	#menu-global .grid figure.cell{ height:50% }	
	#menu-global .grid figure.cell.grid-width-two-column,
	#menu-global .grid figure.cell.grid-width-one-column{ height:100% }
		
}

@media screen and (max-width: 580px) {

	.grid{ width:100%; margin-top:5%; }
	.grid .row{ width:90%; }	
	.grid .grid-width-two-column{ width:100% !important; }	
	
	#menu-global .grid figure.cell{ height:50% !important }	
	#menu-global .grid figure.cell.grid-width-one-column{ height:100% !important }
	
}