/*/////////////////// Attributs global////////////////////*/
/**********************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
  margin: 0;
  padding: 0;
  border: 0;  
  font: inherit;
  vertical-align: baseline;
  font-family :"Trebuchet MS",Arial,sans-serif;
  font-size :1em;  
}

html,body {	
	margin: 0;
	padding: 0;
	border: 0;
	height:100%; /* !!!!!!! needed for container min-height !!!! don't touch !!! */  
	background:url(../images/bodyback.png) ;
	background-repeat:repeat-x repeat-y;	
}
strong {font-weight: bold;}
img {width : 100%;}
hr {
/*	opacity : 0;*/		
	margin : 1% 10%;
	width:80%;
    height: 5px;
	display : inline-block;
	
	
	background: #bbb;
	border: none;		
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;  
	box-shadow:2px 2px 2px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
	-o-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

#container 
{
	position: relative;	
	width:100%;
	min-height: 100%;
	float:left;
	overflow:hidden;
}	

/*///////////////// Footer Styling  ////////////////*/ 	
#footer {			

		display:block;
		position: fixed; 
		width: 100%;
		float:left;
		bottom: 0;	
		z-index:99;
		 
	   background-color: #000000;
  border-top: 1px solid #4B4B4B;
  background-image: -moz-linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
  background-image: -o-linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
  background-image: -WebKit-gradient(linear, 0% 0%, 0% 100%, from(#2F2F2F), color-stop(50%, #151515), color-stop(51%, #000000), to(#000000));
  background-image: linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
		 
		 /*
		background-color : #111;			
		box-shadow: black 0 -10 20px;	
		-webkit-box-shadow:black 0 -10 20px;	
		-moz-box-shadow: black 0 -10 20px;	
		-o-box-shadow:black 0 -10 20px;			*/ 
}
#footer p
{	
	float:left;
	width:100%;
	font-family: franklin Gothic Medium,tahoma, sans-serif;
	text-align :center;
	color: #ccc;	
}		
	
	
#content 
{
	
	z-index:9;
	float : right;
	/*display : block;	*/
}

.noVisible
{
	display :none;
}

select {
	display :none;
 
 
    font-size: 180%;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
}
select  option{    

    color: red;
    font-size: 180%;   
	width:100%;
}

#fullScreen
{
	position :absolute;
	width:100%;
	height : 100%;
	background-color : #111;
	z-index:999999;
	display:none;
}

#fullscreenContainer
{
	float:left;
	
}

#fullScreenButton
{
	background:url(../images/loupe.png) ;
	opacity : 0.85;
	position:absolute;
	right : 0;
	top : 0;
	width:50px;
	height:50px;
	/*background-color:red;*/
	cursor: pointer;	
	z-index:9999;
	display:block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: franklin Gothic Medium, tahoma;
  font-weight: bold;   
  color: #111;
  
}
h1{  
  font-size: 1.3em; 
  text-shadow:1px 1px 1px #aaa; 
}
h2{
  font-size: 1.6em; 
  text-shadow:2px 2px 1px #aaa;
}
h3{
  font-size: 1.3em; 
  color : #eee;
  text-shadow:1px 1px 1px #444;
  
 
}
h4{
	font-size: 1.2em; 
	 color : #eee;
	 text-shadow:1px 1px 1px #444;
}
h5{
 font-size: 1.6em; 
	 color : #eee;
	 text-shadow:1px 1px 1px #444;
}

h6
{
  font-size: 1.3em; 
  text-shadow:2px 2px 1px #aaa;
	
}

p{
    text-align:justify;
	font-family : "Trebuchet MS",Arial,sans-serif;	
	font-size:1em;
}
a { 
  text-decoration: none;
}
a:hover {
  /*color: #bbbbbb;*/
}


#imgUniq img
{
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5); 
	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.5); 
	-o-box-shadow:5px 5px 5px rgba(0,0,0,0.5);


}	
						

/************Structure FLUID GRID**************/
#grid_container {
	width: 100%;	
	float :left;
	margin-top : 2%;
}

.grid_cel a 
{
	float:left;
	width : 100%;
}
.grid_cel img
{
	/*position : absolute;
	top : 0;
	left : 0;	*/
	float :left;
	width : 100%;	
	height : auto;
}   

.grid_cel 
{
	 width: 50%;  

	
	/*box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-moz-box-shadow:  4px 4px 4px rgba(0,0,0,0.5); 
	-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); */
/* filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.90;	*/
}

.grid_cel:hover 
{
	  /*filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;*/
/*	box-shadow: 4px 4px 4px rgba(0,0,0,0.7); 
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.7); 
	-moz-box-shadow:  4px 4px 4px rgba(0,0,0,0.7); 
	-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.7); */
}

.grid_content
{	
	position: relative;
	padding : 3%;
	overflow:hidden;
}

.grid {
	list-style: none;
	overflow: hidden; 
	max-width: 100%;
}
/*
.grid li {
  
   width: 50%;
   float: left;
}*/
.grid li > div {
 /* padding: 38% ;*/
 float :left;
  overflow : auto;
  text-align: center;
}


.gridDyn
{
	/*float :left;*/
	/*overflow:auto;*/
}

.gridDynLi
{
	padding:1%;
	float : left;
	display : inline-block;
	list-style: none;
	position :relative;
	overflow : hidden;
	
}

.gridDynLi li
{
	text-align:center;
	overflow:hidden;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-moz-box-shadow:  4px 4px 4px rgba(0,0,0,0.5); 
	-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
}
	
	
	

.gridDynLi li a img
{	
	width: 100%;
	text-align :center;
}


.gridDynLiTxtContainer
{ 
	float : left;
	position : relative;
	width : 100%;
		
	box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-moz-box-shadow:  4px 4px 4px rgba(0,0,0,0.5); 
	-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
}
.gridDynLiTxt
{ 

text-align :center;
position : absolute ;
bottom : 0;
left : 0;
width : 100%;
/*height : 10%;*/
background-color : rgba(0,0,0,0.6);
/*padding : 1%;*/
color : #ddd;
font-weight: bold;
overflow : hidden;
}


.gridDynLi li a
{
	/*float:left;*/
	position :relative;
	display:block;
}
/*///////////////////////////////////////////////*/

/*///////////////////////////////////////////////*/
/* Contact From style*/
#contact  form
{
	margin : 5% 0;
}

#contact  textarea
{
	width:98%;
	height :125px;
}
#contact  td
{	
	margin : 1% 0;
	width:45%;
	display:inline-block;
	white-space:nowrap;	
    text-align:justify;
	vertical-align :  top;
}
#contact  input
{
	width:98%;
	/*width:100%;*/
}

#contact  label
{	
	font-weight : bold;
		white-space:nowrap;	
}
#contact  textarea 
{
	/*font-family :franklin Gothic,"Trebuchet MS",Arial,sans-serif;*/
	/*padding:1px;*/
	/*width:100%;*/
}

#contact  table 
{
	margin-bottom : 5%;
}


:placeholder
{
	color : rgba(0,0,0,0.7);	
	background-color : rgba(255,0,0,0.1);

}


::-webkit-input-placeholder {
  color : rgba(0,0,0,0.7);	
	background-color : rgba(255,0,0,0.1);
  
}

:-moz-placeholder { 
  color : rgba(0,0,0,0.7);		
  background-color : rgba(255,0,0,0.1);
  
}

::-moz-placeholder { 
   background-color : rgba(255,0,0,0.1);
     color : rgba(0,0,0,0.7);	
  
}

:-ms-input-placeholder {  
   background-color : rgba(255,0,0,0.1);
     color : rgba(0,0,0,0.7);	
  
}
/*///////////////////////////////////////////////*/



/*//// TEXT area styling /////////*/
/*////////////////////////////////*/
.txt_area
{
	/*padding : 2%;*/
	float:left;
	width :98%;
	margin-left:1%;
	margin-top:1%;
	margin-bottom:1%;
}
.txt_area img
{	
	box-shadow:2px 2px 2px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
	-o-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.txt_area > ul
{
	padding :0 5%;
}
.txt_area  > hr ,p hr
{
	margin-left :25%;
	width:50%;
	height : 3px;	
	display:none;
}	

/*///////////////////////////////////////////////*/



/*/////////BREAK POINT : mode horizontal  ratio >1   //////////////////*/
/*/////////////////////////////////////////////////////////////*/
/*//////////////  MODE BIG SCREEN > 1400 px ////////////////////////*/
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 1300px){		 
	#content 
	{
	  display : block;
	  margin: 0% 28% 0 auto; 
	  width : 42%;		 
	}	
}

/*//////////////  MODE SMALL SCREEN < 1100 px ////////////////////////*/
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 1300px) { 	
	 
	#content 
	{	  
	  margin: 0% 15% 0 auto;		
	  width : 55%			
	}
	#footer 
	{			
		position: static;
		bottom :0; 		
	}
	
}

/*/////////BREAK POINT : mode vertical  ratio < 1   //////////////////*/
/*/////////////////////////////////////////////////////////////*/
@media only screen and (max-aspect-ratio: 1/1) {	 			
	#content 
	{ 
		margin-right :2%;
		margin-bottom :2%;
		width : 96%;			
	}  		
	#footer 
	{			
		position: absolute;
		bottom :0; 		
	}	 
}

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

	#fullScreenButton
	{
		display:block;
	}
	

	#contact  td
	{	
		margin : 0;
		width:100%;
		/*display:block;*/
	}
	
	
	h3
	{
			line-height :130%;
			font-size: 0.85em;
	}
	h4
	{
			line-height :115%;
			font-size: 0.90em;
	}	
	h2,h5
	{	
			line-height :130%;
			font-size: 1.2em;
	}
	h6
	{
		font-size:1em;
		line-height :115%;
	}
	h1
	{
		font-size :110%;
	}

}

@media only screen and (max-width:500px)
{
.grid_cel 
	{
		width: 100%;
	/*	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity: 1;*/

	}
}
@media only screen and (max-width:300px)
{	 
	h3
	{
			line-height :80%;
			font-size: 0.65em;
	}
	h4
	{
	
	}	
	h2,h5
	{	
			line-height :100%;
			font-size: 0.9em;
	}

	h1
	{
		font-size : 95%;
	}

}