/* =======================================================================
DIV BOX FOR DISPLAYING PICTURES
========================================================================= */
.box h3{
	text-align:center;
	position:relative;
	top:80px;
	}
.box{
	width:70%;
	height:300px; /*Hauteur de l'image affichée
		background:#777; /* Background color of the DIV (#FFF = White) */
	margin:40px auto;
	}
.square{
	width:200px;
	height:100px;
		background:#E5E5E5; /* Background color of the DIV (#FFF = White) */
	margin:40px auto;
	}
	
.square h3{
	text-align:center;
	position:relative;
	top:80px;
	color:black
	}
/*================================================== 
* Effect 2 // LIGHT PAGE BACKGROUND #777 // DARK PAGE BACKGROUND #FFF
* ===============================================*/
.effect2D
	{
	position:relative;
	}
.effect2D:before, .effect2D:after
	{
	z-index:-1;
	position:absolute;
	content:"";
	bottom:15px;
	left:10px;
	width:50%;
	top:80%;
	max-width:300px;
	background:#FFF; /*Gris Foncé*/
	-webkit-box-shadow:0 15px 10px #FFF;
	-moz-box-shadow:0 15px 10px #FFF;
	box-shadow:0 15px 10px #FFF;
	-webkit-transform:rotate(-3deg);

	-moz-transform:rotate(-4deg);
	-o-transform:rotate(-4deg);
	-ms-transform:rotate(-4deg);
	transform:rotate(-4deg);
	}
.effect2D:after
	{
	-webkit-transform:rotate(4deg);
	-moz-transform:rotate(4deg);
	-o-transform:rotate(4deg);
	-ms-transform:rotate(4deg);
	transform:rotate(4deg);
	right:10px;
	left:auto;
	}	

.effect2L
	{
	position:relative;
	}
.effect2L:before, .effect2L:after
	{
	z-index:-1;
	position:absolute;
	content:"";
	bottom:15px;
	left:10px;
	width:50%;
	top:80%;
	max-width:300px;
	background:#777; /*Gris Foncé*/
	-webkit-box-shadow:0 15px 10px #777;
	-moz-box-shadow:0 15px 10px #777;
	box-shadow:0 15px 10px #777;
	-webkit-transform:rotate(-3deg);

	-moz-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	transform:rotate(-3deg);
	}
.effect2L:after
	{
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	transform:rotate(3deg);
	right:10px;
	left:auto;
	}



/*================================================== 
* Effect 5 
* ===============================================*/
.effect5
	{
	position:relative;
	}
.effect5:before, .effect5:after
	{
	z-index:-1;
	position:absolute;
	content:"";
	bottom:25px;
	left:10px;
	width:50%;
	top:80%;
	max-width:300px;
	background:#FFF;
	-webkit-box-shadow:0 35px 20px #FFF;
	-moz-box-shadow:0 35px 20px #FFF;
	box-shadow:0 35px 20px #FFF;
	-webkit-transform:rotate(-8deg);
	-moz-transform:rotate(-8deg);
	-o-transform:rotate(-8deg);
	-ms-transform:rotate(-8deg);
	transform:rotate(-8deg);
	}
.effect5:after
{
	-webkit-transform:rotate(8deg);
	-moz-transform:rotate(8deg);
	-o-transform:rotate(8deg);
	-ms-transform:rotate(8deg);
	transform:rotate(8deg);
	right:10px;
	left:auto;
}


/*==================================================
 * Effect 7 on dark websites
 * ===============================================*/
.effect7D
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(1, 1, 1, 1), 0 0 40px rgba(1, 1, 1, 0.99) inset;
       -moz-box-shadow:0 1px 4px rgba(1, 1, 1, 1), 0 0 40px rgba(1, 1, 1, 0.99) inset;
            box-shadow:0 1px 4px rgba(1, 1, 1, 1), 0 0 40px rgba(1, 1, 1, 0.99) inset;
}
.effect7D:before, .effect7D:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(1,1,1,0.92);
    -moz-box-shadow:0 0 20px rgba(1,1,1,0.92);
    box-shadow:0 0 20px rgba(1,1,1,0.92);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect7D:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}


/*==================================================
 * Effect 7 sur pages claires
 * ===============================================*/
.effect7L
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7L:before, .effect7L:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect7L:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}








/*==================================================
 * Effect 8
 * ===============================================*/
.effect8
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect8:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}


/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}


/*==================================================
 * Effect 4 Pages claires
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}


/*==================================================
 * Effect 4 Pages fonçées
 * ===============================================*/
.effect4D
{
  position: relative;
}
.effect4D:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:400px;
  background: #FFF;
  -webkit-box-shadow: 0 18px 10px #FFF;
  -moz-box-shadow: 0 18px 10px #FFF;
  box-shadow: 0 18px 10px #FFF;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}


/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}