body{
	padding:0px;
	background: url('/assets/front/fond.jpg');

	
}

header#top{	
	display:block;
	

	background: url('/assets/front/top.png') repeat-x;
	
	img{
		width:120px;
		float:left;
		margin:20px 50px;
	}
	
}

navigation#first_nav{
	
	margin-top:50px;
	margin-right:20px;
	float:right;
	
	
		a{
		display:inline-block;
		padding:10px;
		color:black;
		}

}

#main, #sidebar{
	margin-top:50px !important;

}
#main{
	
	
 
	header{	  
		h1{
			margin-bottom:10px;
		}
		
		h2{
			margin-top:0em;
			margin-bottom:1em;
		}
 
	}
  
	img{
		max-width:100%;
	}
  
  
	article{
		margin-bottom:3em;
		border-top:2px solid #97bc4a;
		padding-top:1em !important;
		aside{
			img{
				display:none;
			}

			*{
				display:inline;
			}
	
		}

	}
	 
}

#sidebar{	
	padding:0% 2%;
	
	
	background:#97bc4a;
	
	img{
		margin:0.5em 0;	
	}
	
	
	color:white;
	
	h3,a{
		color:white;
	}

}

comment{

	message{
	padding:10px;
		
	}
		
	author{
	float:left;
	width:200px;
	text-align:center;
		
		p{			
		text-align:center;
		margin:0px;

		}
		
		.img{
			height:120px;
			width:120px;
			border-radius:50%;
			overflow:hidden;
			display:inline-block;
		
			img{
				height:120px;
			}
			
		}

	}

}

.clear{
	clear:both;
}

footer{
	margin-top:100px;

	
}



@media only screen and (min-width: 0px)  {
	
	header#top{
	
		img{
			width:120px;
				
			margin:20px 5%;
		}

	}	
	
	#main{	  
		margin:auto;
		
		max-width:800px;
		width:90%;
	}
	
	#sidebar{
		margin:auto;
		padding:2% !important;
		max-width:800px;
		width:86%;	
	
		img{
		margin:0.5em 0;
		max-width:98%;		
		}

	}
	
	
	.img_with_legend{
	position:relative;
	  
		figcaption{
			margin-top:5px; 
		}
	  
	}
	
	
}


@media only screen and (min-width: 769px) {


	#main{
		margin-left:2%;
		
	
		max-width:800px;
		width:69%;
		float:left;
	
		padding:0px;
	
	
		article{
			padding:0px 6%;
		}
		
	}
	
	#sidebar{
		float:right;
		width:23%;
			padding-top:0px !important;
		min-height:1000px;
		
		img{
			max-width:100%;
			margin:0.5em 0;	
		}

	}
	
	

	
	

		
}


@media only screen and (min-width: 950px) {


	#main{
		margin-left:5%;

		width:64%;
		
	
		
	}
}

@media only screen and (min-width: 1200px) {


	#main{
		margin-left:18%;

		width:53%;
		
		
	}

	#sidebar{
		
		padding-top:0em !important;
	}



	article{
		position:relative;
		
		

		aside{			  
				  
			display:block;
			position:absolute;
			left : -39%;

			top:-2px;
			padding-top:0em;
			line-height:1.6em;
			width:42%;
			
			text-align:center;
		
			  
			p{
				margin:0px;
				display:block !important;
			}
			  
			img{
				display:block !important;
				margin:auto;
				border-radius:50%;		  
			}
			  
			time{
				display:block;
				  
			}

			*{			  
				text-align:center;

			}
		  		  
		}

	}
	
	
	.img_with_legend{
		position:relative;
	  
		figcaption{
			display:block;
			position:absolute;
			left : -35%;		  
			width:32%;
			top:10px;
		  
			*{  
				text-align:right;

			}		  
		  
		}
	  
	}	
	
	
	
}

#comments{

	.comment{
		margin-bottom:3em;
			
		aside{
	
			img{
				float:left;
				margin:auto;				 
				border-radius:50%;
			  
			}
				
		}

		blockquote{

			text-align:justify !important;
			border-color : #97bc4a;
			min-height:3em;
			padding-right:0px;
				
			p{
				text-align:justify !important;
					
			}
				
		}
	
		.header, blockquote{			
			margin-left:100px;

		}
		
		.header{
			font-size: 0.95em;
			line-height:1.6em;
			  
			img{
				display:none;			  
			}			
		  
		}

	}

}


#comment_form{
	background:#e4f1d5;
	background-color:rgba(127,182,55,0.2);
	padding:20px;
	padding-bottom:35px;
	margin:0px 0px 0px 0px;
			
	h3{
		margin-top:0px;
		text-transform:uppercase;

	}
			
	input,textarea{
		background:white;
		background-color:rgba(255,255,255,0.8);
		padding:1%;
			
	}
			
	textarea{
		line-height:1.6em;
			
	}
			
	label{
		display:inline-block;
		min-width:90px;
		padding:5px;

	}
			
	.submit{
		float:right;
		@include border-radius(10px);
		margin-top:-16px;
		cursor:pointer;

		&:hover{
			background:#97bc4a;
			color:white;
				
		}
		padding:1% 2%;
			
	}

}





//iPhone
@media only screen and (max-width: 480px) {

	


	body{
		font-size:50%;
		
	}
	
	
	
	
}

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

	


	body{
		font-size:75%;
		
	}
	
	
	
	
}


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

	


	
	
	
	
	header#top{
		
		text-align:center;
		img{
			float:none;
			display:block;
			margin:auto;
	
			
		
		}
	
	
	navigation{
		text-align:center;
		float:none;
		display:block;
		margin-top:10px;
		
	
	}
	
	
		
	}
	
	
	
	#comment_form{
		margin:0px !important;
	}
	
	#comments{

		.comment{
			
			aside{
	
				img{
					float:left;
					margin:auto;				 
					border-radius:50%;
					width:40px;
					height:40px;
			  
				}
				
			}

		
			.header, blockquote{			
				margin-left:50px;

			}
			blockquote{			
							margin-left:10px;

						}
			
			

		}

	}
	
	
	
}


footer{
	display:block;
	padding:1em;
	font-size:0.95em;
	line-height:1.4em;
	border-top: #202020 2px solid;
	border-bottom: #97BC4A 12px solid;
	text-align:center;
	
	


}



#legals_large{
	background:rgba(250,250,250,0.8);
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height:100%;
	display:none;
	
	.content{
		background:rgba(250,250,250,0.95);
		padding:10px 30px;
		margin:auto;
		width:90%;
		max-width:600px;
		border:1px solid gray;
		
		
	}

}
