header#top{	
	display:block;
	h1{
	  font-weight:normal;
    font-size:1.7em;
    position:absolute;
    top:50px;
    left:160px;
    margin:0;
    a{
      color:black;
    }
    
	}
  
	h2{
	  font-weight:normal;
    font-size:1.1em;
    
    position:absolute;
    top:85px;
    left:160px;
    margin:0;
    a{
      color:#99BB52;
      
    }
    
	}
  .center{
    max-width:1200px;
    margin:auto;
    position:relative;
    
  }
	background: url('/assets/front/top.png') repeat-x;
	
	img{
		height:120px;
		float:left;
		margin:20px 0px;
    margin-left:20px;
	}
	
}

navigation#first_nav{
	//font-family:"jaf-bernino-sans", sans-serif;
	margin-top:50px;
	margin-right:20px;
	float:right;
	
	
		a{
		display:inline-block;
		padding:10px;
		color:black;
		}

}


#main{
	

  max-width:1200px;
  margin:auto;
  
	img{
		max-width:100%;
	}
  
  
	
	 
}
#corps{
  
  float:left;
  width:65%;
  box-sizing: border-box;
}

.article_corps{
  background:white;
  
}
#sidebar{	
	
  padding-left:40px;
  width:35%;
  float:left;
  box-sizing: border-box;
 
	h3{
    
    
	}
  
  .article_small{
    h3{
      
      border:0;
    }
    
  }


	


}

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;

	
}




	

	


footer{
	display:block;
	padding:20px;
	font-size:0.95em;
	line-height:1.4em;
	border-top: #858585 1px solid;
	max-width:1200px;
	text-align:center;
  margin:auto;
  margin-top:50px;
	
	


}



.article_small{

  margin-bottom:20px;


  h3{
    margin:0;
    
  }
  background:white;
  
  padding:10px;

  .img{
    width:100px;
    float:left  ;
    display:block;
    margin:0;
    margin-right:10px;
    background-size:cover;

    
  }
}

.article_img{
  position:relative;
  .content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
 
    
  }
  background:center center no-repeat;
  background-size:100%;
  background-size:cover;
  text-align:center;
  padding:50px 0;
  color:white;
  display:block;
  //font-family:"jaf-bernino-sans", sans-serif;
  text-transform:uppercase;
  
  span{
    display:inline-block;
    padding:5px 10px;
    border:1px solid white;
    position:relative;
  }
  margin-bottom:20px;
  
  &:hover{
    .content{
      background:rgba(255,255,255,0.2)
      
    }
    span{
      
       background:rgba(0,0,0,0.2);
      color:white;
    }
    
  }
}

article, .corps_content{
  padding:40px;
  padding-top:30px;
  background:white;
  margin-bottom:40px;
  
}
.activites{
  background:center center no-repeat;
  background-size:100%;
  background-size:cover;
  text-align:center;
  padding:50px 0;
  color:white;
  display:block;
  //font-family:"jaf-bernino-sans", sans-serif;
  text-transform:uppercase;
  
  span{
    display:inline-block;
    padding:5px 10px;
    border:1px solid white;
    
  }
  margin-bottom:20px;
  
  &:hover{
    span{
      
      background:rgba(255,255,255,0.5);
      color:#333;
    }
    
  }
}
.photographe{
  
  background-image:url('/photographe.jpg');
}

.sites{
  
  background-image:url('/sites.jpg');
}

.design{
  
  background-image:url('/design.jpg');
}



#articles_pagination{
  //font-family:"jaf-bernino-sans", sans-serif;
	clear:both;
	margin-top:40px;
  a{
    
    
  }
	a, .current{
		
		display : inline-block;

		color:#858585;
		text-decoration:none;
		
		width:28px;
    border:1px solid #858585;
		padding:10px 4px;
	

		text-align:center;
		
	}
	div.pages{
		display:inline;
		padding-left:10px;
	}
	
	div.arrows{
		float:right;
	}
	
	
	.current, a:hover{
    color:white;
		background:#858585;
	}
}


h1.principal{
  text-align:center;
  
  
}


@media only screen and (min-width: 960px) and (max-width: 1240px)  {
  #main{
    
    margin:0 20px;
    
  }
  #sidebar{
    padding-left:20px;
    
  }
  
  
}

@media only screen and (min-width: 0px) and (max-width: 960px)  {
  header#top{
    text-align:center;
    h1,h2{
      position:static;
      display:inline;
      
      
    }
    img{
        float:none;
        display:block;
        margin:auto;
        margin-bottom:1em;
      }
    
  }
  
  navigation#first_nav{
    float:none;
    display:block;
    margin:auto;
    text-align:center;
    margin-top:1em;
    
  }
  #corps, #sidebar{
    width:auto;
    float:none;
    
    
  }
  
  #sidebar{
    
    padding:20px;
  }
}