aside{
	h2{
		font-family: "Amatic SC", cursive;
		font-size: 1.2em;
	}
/*
	p,li{
		
    font-family: 'Josefin Slab', serif;

	}
*/
}

.menu-toggle{
	width: 100%;
}

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

/*--------------------------------------------------------------
## Header - Accueil
--------------------------------------------------------------*/



#masthead{
	font-family: "Roboto";
	display: block;
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	width: 100%;		
	a{
		text-decoration: none;
	}

	.main-navigation{
  		display: flex;
		box-sizing: border-box;
		vertical-align: top;
		margin: 0 auto;
		width: 100%;
		justify-content: center;

		#primary-menu{
			margin: 30px auto 50px;
// 			ul{
				li{
					display: inline;
					font-size: 0.9em;
					padding: 0 15px 0 15px;
					box-sizing: border-box;
					width: auto;
					text-transform: uppercase;
					position: relative;
					
					&:hover{
						.children{
							display: block;
							
						}
					}
	
				        .children{
				          display: none;
				          padding: 20px 0 0;
				          position: absolute;
				          top: 15px;
				          left: 0px;
				          background-color: white;
				          z-index: 300;
				          
				          text-align: center;
				          li{
				            display: inline-block;
				            text-transform: uppercase;
				            font-size: 14px;
				            text-align: left;
				            position: relative;
				            padding: 10px 15px;
				            background-color: white;
				            border-bottom: 0.5px solid $grey;
							min-width: 200px;
							&:hover{
								.children{
									display: block;
								}
							}
							
							a{
								width: 100%;
								display: block;
							}
				            
								.children{
						          display: none;
						          padding: 0;
						          position: absolute;
								  top: 0;
						          left: 100%;
						          background-color: purple;
						          z-index: 300;
						          margin: 0;
						          
						          text-align: center;
						          li{
						            display: inline-block;
						            text-transform: uppercase;
						            font-size: 14px;
						            text-align: left;
						            position: relative;
									padding: 10px 15px;
						            border-bottom: 0.5px solid $grey;
						            
									&:hover{
										.children{
											display: block;
										}
									}
						            
						          }
						        }

				            
				            
				          }
				        }
						a{
							text-decoration: none;
							color: gray;
							width: 100%;
							&:hover{
								color: black;
								cursor: pointer;
							}
						}
				}
	
				.current_page_item a{
					color: gray;
				}
/* 			} */

			// prise en charge du sous-menu


		}

	}
}


main{
	width: span(8.5);
}


.fullwidth{
	width: span(12);
}

.media{
	width: span(9); // inclusion de la taille des colonnes
	background-color: red;
}




/*--------------------------------------------------------------
## Section catégories
--------------------------------------------------------------*/


.image_links{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  a{
    width: 100%;
    height: auto;
    text-decoration: none;
    margin: 10px 0 0;
    overflow: hidden;
    height: 125px;
    &:hover{
      opacity: 0.8;
    }
    img{
      width: 100%;
      overflow: hidden;
      position: relative;

    }
    .cat-title{
      background-color: white;
      position: absolute;
      z-index: 10;
      padding: 5px 0;
      width: 60%;
      margin: 0 auto;
      top : 70px;
      left: 20%;
    }
    p{
      text-align: center;
      color: $grey;
    }
  }
}

/*--------------------------------------------------------------
## Slider catégories
--------------------------------------------------------------*/


#section_slide_cat{
	margin: 50px auto;
	width: span(10);

	#slide_cat,#slide_feat{
	box-sizing: border-box;
	
		a{
		text-decoration:none;
		
			.img_container{
			
				img{
					width: 100%;
					height: auto;
				}
			}
		
			.descrip{
					background-color: white;
					margin: -120px auto 0;
					position: relative;
					bottom: 0;
					width: 80%;
			
				h3{
					color: $grey;
					text-transform: uppercase;
					text-align: center;
					font-weight: lighter;
				}
	
			}
		
			&:hover{
			  opacity: 0.9;
			}
		}
	}

}


/*--------------------------------------------------------------
## Sidebar
--------------------------------------------------------------*/


aside{
	width: span(3);
	
	section{
		h2{
			background-color: $green;
			color: white;
			padding: 5px;
			font-size: 16px;
			font-weight: lighter;
			text-transform: uppercase;
			text-align: center;
			color: white;
		}
		ul{
			margin: 0;
			padding: 0 10px;
			list-style-position: inside;
			list-style: none;
			li{
				a{
					color: $grey;
					text-decoration: none;
					&:hover{
						color: $green;
						text-decoration: underline;
					}
					&:visited{
						color: $grey;
					}
				}
			}
		}
	}
	
	.widget_media_image{
		border-radius: 50%;
	}
	
	.widget_text{
		text-align: center;
		p{
			text-align: justify;
		}
	}
	
    .widget_search{
        
        label{
	        width: 100%;
        }
        
        input{
	        width: 100%;
        }
		
		// masquage du bouton submit
        .search-submit{
	        display: none;
	        border: none;
	        cursor: pointer;
	        width: 100%;
	        height: 25px;
	        margin: 5px 0 0;
	        
	        &:hover{
	        background-color: $blue;
	        color: white;
	        }
        }
    }

	
}

// Sidebar - recent post with thumbnail

#recent{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	
	li{
		margin-bottom: 10px;

		a{
			display: flex;
			flex-wrap: wrap;
			color: $grey;
			text-decoration: none;
			.image{
				width: 30%;
				margin-right: 10px;
			}
			p{
				width: 60%;
				margin: 0;
				padding: 0;
			}
			&:hover{
				color: $green;
				.image{
					opacity: 0.8;
				}
			}
		}
	}
	
}





/*--------------------------------------------------------------
## Contenu de la page
--------------------------------------------------------------*/

.entry-title{
	width: 100%;
	a{
		color: black;
		text-decoration: none;
		&:hover{
			opacity: 0.5;
		}
	}
}

.entry-meta{
	text-align: center;
	span{
		margin: 0 auto;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}

article{
background-color: white;
margin: 10px 0;	
width: span(12);
margin: 0 auto;


}
 

.entry-header{
	padding: 0 50px;
	h1{
		margin: 0;
		padding: 20px 0 0;
		text-transform: uppercase;
	}
	h2{
		margin: 0;
		padding: 20px 0 5px;
		text-align: center;
		text-transform: uppercase;
	}
}

.entry-content{
	padding: 0 50px;
	width: 100%;
	
	.page-links{
		a{
			color: $grey;
			&:hover{
				color: $green;
			}
		}
	}
	a{
		color: $green;
		&:hover{
			color: $grey;
		}
	}

}

.entry-footer{
	padding: 20px 50px;
	border-top: 1px solid $grey;
	background-color: white;
	span{
		margin-right: 10px;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}


.more-link{
	color: $green;
	&:hover{
		color: $grey;
	}
}


#primary{
	display: flex;
	width: span(10);
	margin: 0 auto;
	justify-content: space-between;
}

img.alignright {
    margin: 0.4211em 0 1.6842em 1.6842em;
}


table,
th,
td {
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th, td {
	padding: 0.4em;
}

.attachment-post-thumbnail{
	margin: 0 auto;
	display: block;
	width: 100%;
	height: auto;
}

.comment-body{
	padding: 15px;
}
.comment-list{
	margin: 0 0 0 0.5em;
}

.comment-meta{
	padding: 0
	;
}


/*--------------------------------------------------------------
## Navigation articles plus anciens
--------------------------------------------------------------*/

.nav-links{
	display: flex;
	justify-content: center;
	width: 40%;
	margin: 0 auto;
	line-height: normal;
		
		.prev{
			margin-right: 10px;
			background-color: $green;
		}
		.next{
			margin-left: 10px;
			background-color: $green;
		}
		
		.prev,.next{
			color: white;
			border-radius: 3px;
			&:hover{
				background-color: white;
				color: $green;
			}
		}
		
		a{
			display: block;
			padding: 5px 10px;
			background-color: white;
			text-decoration: none;
			color: $green;
			height: 100%;
			&:hover{
				background-color: $green;
				color: white; 
			}
		}
		
		.current{
			display: block;
			padding: 5px 10px;
			background-color: $green;
			color: white;
			height: 100%;
		}
}


/*--------------------------------------------------------------
## Footer - Copyright 
--------------------------------------------------------------*/
.null-instagram-feed{
    margin: 100px 0 0;
    h3{
      color: $grey;
      font-family: "Roboto";
      position: relative;
      z-index: 100;
      text-align: center;
      text-transform: uppercase;
      margin: 10px;
    }
  .instagram-pics{
      display: flex;
      flex-wrap: nowrap;
      margin: 0;
      padding: 0;
      width: span(12);

      li{
//         background-/* color */: red;
        a{
          width: 100%;
          height: auto;
          display: block;
//           background-color: $greymiddle;
          img{
            width: 100%;
            height: auto;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }
  }

}


footer{
// 	background-color: red;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	color: #585858;
	position: relative;
	bottom: 0;
	width: 100%;
}


.site-info{
// 	height: 60px;
	width: span(5);
	display: flex;
	flex-wrap: wrap;
	vertical-align: top;
	margin: 20px auto 20px;
	font-family: "Roboto";
	padding-top: 15px;
	box-sizing: border-box;
	text-align: center;
// 	background-color: red;
	.sep{
		margin: 0 10px;
	}
	a{
		color: $green;
		text-align: center;
		&:hover{
			color: $grey;
		}
		&:nth-of-type(2){
// 			width: 100%;

		}
	}
}

// social-box

.social-box{
	margin: 0 auto 20px;
	width: 15%;
	display: flex;
	justify-content: space-between;
	
	a{
		width: 30%;
		color: $green;
		text-align: center;
		i{
			font-size: 40px;
			text-align: center;
		}
	}
}


/*--------------------------------------------------------------
## Contact
--------------------------------------------------------------*/

		
form{
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	flex-wrap: wrap;
	
	p{
		width: 30%;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
		margin: 0 0 25px;
			
		input{
			border: none;
			border-radius: 0;
		}
		
		&:nth-of-type(4){
			width: 100%;
			input{
				width: 100%;
			}
		}
		
		&:nth-of-type(5){
			width: 100%;
			
			textarea{
				width: 100%;
				height: 100px;
				border-radius: 0;
				border: none;
			}
		}
		
		&:nth-of-type(6){
			width: 20%;
			margin: 30px auto;
			border: none;
			
			input{
				width: 100%;
				border: 1px solid gray;
				height: 55px;
				font-size: 1.2em;
				background-color: white;
			}
		}
		
		
	}
	
}
} // fin sup 1280px
@media screen and (min-width : 1024px) and (max-width:1279px){
	

/*--------------------------------------------------------------
## Header - Accueil
--------------------------------------------------------------*/



#masthead{
	font-family: "Roboto";
	display: block;
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	width: 100%;		
	a{
		text-decoration: none;
	}

	.main-navigation{
  		display: flex;
		box-sizing: border-box;
		vertical-align: top;
		margin: 0 auto;
		width: 100%;
		justify-content: center;

		#primary-menu{
			margin: 30px auto 50px;
/* 			ul{ */
				li{
					display: inline;
					font-size: 0.9em;
					padding: 0 15px 0 15px;
					box-sizing: border-box;
					width: auto;
					text-transform: uppercase;
					position: relative;
					
					&:hover{
						.children{
							display: block;
							
						}
					}
	
				        .children{
				          display: none;
				          padding: 20px 0 0;
				          position: absolute;
				          top: 15px;
				          left: 0px;
				          background-color: white;
				          z-index: 300;
				          
				          text-align: center;
				          li{
				            display: inline-block;
				            text-transform: uppercase;
				            font-size: 14px;
				            text-align: left;
				            position: relative;
				            padding: 10px 15px;
				            background-color: white;
				            border-bottom: 0.5px solid $grey;
							min-width: 200px;
							&:hover{
								.children{
									display: block;
								}
							}
							
							a{
								width: 100%;
								display: block;
							}
				            
								.children{
						          display: none;
						          padding: 0;
						          position: absolute;
								  top: 0;
						          left: 100%;
						          background-color: purple;
						          z-index: 300;
						          margin: 0;
						          
						          text-align: center;
						          li{
						            display: inline-block;
						            text-transform: uppercase;
						            font-size: 14px;
						            text-align: left;
						            position: relative;
									padding: 10px 15px;
						            border-bottom: 0.5px solid $grey;
						            
									&:hover{
										.children{
											display: block;
										}
									}
						            
						          }
						        }

				            
				            
				          }
				        }
						a{
							text-decoration: none;
							color: gray;
							width: 100%;
							&:hover{
								color: black;
								cursor: pointer;
							}
						}
				}
	
				.current_page_item a{
					color: gray;
				}
/* 			} */

			// prise en charge du sous-menu


		}

	}
}


main{
	width: span(8.5);
}


.fullwidth{
	width: span(12);
}

.media{
	width: span(9); // inclusion de la taille des colonnes
	background-color: red;
}




/*--------------------------------------------------------------
## Section catégories
--------------------------------------------------------------*/


.image_links{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  a{
    width: 100%;
    height: auto;
    text-decoration: none;
    margin: 10px 0 0;
    overflow: hidden;
    height: 125px;
    &:hover{
      opacity: 0.8;
    }
    img{
      width: 100%;
      overflow: hidden;
      position: relative;

    }
    .cat-title{
      background-color: white;
      position: absolute;
      z-index: 10;
      padding: 5px 0;
      width: 60%;
      margin: 0 auto;
      top : 70px;
      left: 20%;
    }
    p{
      text-align: center;
      color: $grey;
    }
  }
}

/*--------------------------------------------------------------
## Slider catégories
--------------------------------------------------------------*/


#section_slide_cat{
	margin: 50px auto;
	width: span(11);

	#slide_cat,#slide_feat{
	box-sizing: border-box;
	
		a{
		text-decoration:none;
		
			.img_container{
			
				img{
					width: 100%;
					height: auto;
				}
			}
		
			.descrip{
					background-color: white;
					margin: -120px auto 0;
					position: relative;
					bottom: 0;
					width: 80%;
			
				h3{
					color: $grey;
					text-transform: uppercase;
					text-align: center;
					font-weight: lighter;
				}
	
			}
		
			&:hover{
			  opacity: 0.9;
			}
		}
	}

}


/*--------------------------------------------------------------
## Sidebar
--------------------------------------------------------------*/


aside{
	width: span(3.2);
	
	section{
		h2{
			background-color: $green;
			color: white;
			padding: 5px;
			font-size: 16px;
			font-weight: lighter;
			text-transform: uppercase;
			text-align: center;
		}
		ul{
			margin: 0;
			padding: 0 10px;
			list-style-position: inside;
			list-style: none;
			li{
				a{
					color: $grey;
					text-decoration: none;
					&:hover{
						color: $green;
						text-decoration: underline;
					}
				}
			}
		}
	}
	
	.widget_media_image{
		border-radius: 50%;
	}
	
	.widget_text{
		text-align: center;
		p{
			text-align: justify;
		}
	}
	
    .widget_search{
        
        label{
	        width: 100%;
        }
        
        input{
	        width: 100%;
        }
		
		// masquage du bouton submit
        .search-submit{
	        display: none;
	        border: none;
	        cursor: pointer;
	        width: 100%;
	        height: 25px;
	        margin: 5px 0 0;
	        
	        &:hover{
	        background-color: $blue;
	        color: white;
	        }
        }
    }

	
}

// Sidebar - recent post with thumbnail

#recent{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	
	li{
		margin-bottom: 10px;

		a{
			display: flex;
			flex-wrap: wrap;
			color: $grey;
			text-decoration: none;
			.image{
				width: 30%;
				margin-right: 10px;
			}
			p{
				width: 60%;
				margin: 0;
				padding: 0;
			}
			&:hover{
				color: $green;
				.image{
					opacity: 0.8;
				}
			}
		}
	}
	
}





/*--------------------------------------------------------------
## Contenu de la page
--------------------------------------------------------------*/


#primary{
	display: flex;
	width: span(11);
	margin: 0 auto;
	justify-content: space-between;
}


article{
background-color: white;
margin: 10px 0;	
width: span(12);
margin: 0 auto;


}

.entry-title{
	width: 100%;
	a{
		color: black;
		text-decoration: none;
		&:hover{
			opacity: 0.5;
		}
	}
}

.entry-meta{
	text-align: center;
	span{
		margin: 0 auto;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}
 

.entry-header{
	padding: 0 50px;
	margin: 0 auto;
	h1{
		margin: 0;
		padding: 20px 0 0;
		text-transform: uppercase;
		text-align: center;
	}
	h2{
		margin: 0;
		padding: 20px 0 5px;
		text-align: center;
		text-transform: uppercase;
	}
}

.entry-content{
	padding: 0 50px;
	width: 100%;
	
	.page-links{
		a{
			color: $grey;
			&:hover{
				color: $green;
			}
		}
	}
	a{
		color: $green;
		&:hover{
			color: $grey;
		}
	}

}

.entry-footer{
	padding: 20px 50px;
	border-top: 1px solid $grey;
	background-color: white;
	span{
		margin-right: 10px;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}


.more-link{
	color: $green;
	&:hover{
		color: $grey;
	}
}



img.alignright {
    margin: 0.4211em 0 1.6842em 1.6842em;
}


table,
th,
td {
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th, td {
	padding: 0.4em;
}

.attachment-post-thumbnail{
	margin: 0 auto;
	display: block;
	width: 100%;
	height: auto;
}

.comment-body{
	padding: 15px;
}
.comment-list{
	margin: 0 0 0 0.5em;
}

.comment-meta{
	padding: 0
	;
}


/*--------------------------------------------------------------
## Navigation articles plus anciens
--------------------------------------------------------------*/

.nav-links{
	display: flex;
	justify-content: space-between;
	div{
		a{
			display: block;
			padding: 30px;
			background-color: white;
			text-decoration: none;
			color: $green;
			&:hover{
				background-color: $green;
				color: white; 
			}
		}
	}
}


/*--------------------------------------------------------------
## Footer - Copyright 
--------------------------------------------------------------*/
.null-instagram-feed{
    margin: 0;
    h3{
      color: black;
      font-family: "helvetica_lightregular";
      position: relative;
      z-index: 100;
    }
  .instagram-pics{
      display: flex;
      flex-wrap: wrap;

      li{
        width: span(1);
//         background-/* color */: red;
        a{
          width: 100%;
          height: auto;
          display: block;
//           background-color: $greymiddle;
          img{
            width: 100%;
            height: auto;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }
  }

}


footer{
// 	background-color: red;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	color: #585858;
	position: relative;
	bottom: 0;
	width: 100%;
}


.site-info{
// 	height: 60px;
	width: span(5);
	display: flex;
	flex-wrap: wrap;
	vertical-align: top;
	margin: 50px auto 20px;
	font-family: "Roboto";
	padding-top: 15px;
	box-sizing: border-box;
	text-align: center;
// 	background-color: red;
	.sep{
		margin: 0 10px;
	}
	a{
		color: $green;
		text-align: center;
		&:hover{
			color: $grey;
		}
		&:nth-of-type(2){
// 			width: 100%;

		}
	}
}

// social-box

.social-box{
	margin: 0 auto 20px;
	width: 15%;
	display: flex;
	justify-content: space-between;
	
	a{
		width: 30%;
		color: $green;
		text-align: center;
		i{
			font-size: 40px;
			text-align: center;
		}
	}
}


/*--------------------------------------------------------------
## Contact
--------------------------------------------------------------*/

		
form{
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	flex-wrap: wrap;
	
	p{
		width: 30%;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
		margin: 0 0 25px;
			
		input{
			border: none;
			border-radius: 0;
		}
		
		&:nth-of-type(4){
			width: 100%;
			input{
				width: 100%;
			}
		}
		
		&:nth-of-type(5){
			width: 100%;
			
			textarea{
				width: 100%;
				height: 100px;
				border-radius: 0;
				border: none;
			}
		}
		
		&:nth-of-type(6){
			width: 20%;
			margin: 30px auto;
			border: none;
			
			input{
				width: 100%;
				border: 1px solid gray;
				height: 55px;
				font-size: 1.2em;
				background-color: white;
			}
		}
		
		
	}
	
}
} // fin 1024px
@media screen and (min-width : 768px) and (max-width:1023px){

	

/*--------------------------------------------------------------
## Header - Accueil
--------------------------------------------------------------*/



#masthead{
	font-family: "Roboto";
	display: block;
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	width: 100%;		
	a{
		text-decoration: none;
	}

}


main{
	width: span(12);
}


.fullwidth{
	width: span(12);
}

.media{
	width: span(9); // inclusion de la taille des colonnes
	background-color: red;
}




/*--------------------------------------------------------------
## Section catégories
--------------------------------------------------------------*/


.image_links{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  a{
    width: 100%;
    height: auto;
    text-decoration: none;
    margin: 10px 0 0;
    overflow: hidden;
    height: 125px;
    &:hover{
      opacity: 0.8;
    }
    img{
      width: 100%;
      overflow: hidden;
      position: relative;

    }
    .cat-title{
      background-color: white;
      position: absolute;
      z-index: 10;
      padding: 5px 0;
      width: 60%;
      margin: 0 auto;
      top : 70px;
      left: 20%;
    }
    p{
      text-align: center;
      color: $grey;
    }
  }
}

/*--------------------------------------------------------------
## Slider catégories
--------------------------------------------------------------*/


#section_slide_cat{
	margin: 50px auto;
	width: span(11);

	#slide_cat{
	box-sizing: border-box;
	
		a{
		text-decoration:none;
		
			.img_container{
			
				img{
					width: 100%;
					height: auto;
				}
			}
		
			.descrip{
					background-color: white;
					margin: -120px auto 0;
					position: relative;
					bottom: 0;
					width: 80%;
			
				h3{
					color: $grey;
					text-transform: uppercase;
					text-align: center;
					font-weight: lighter;
				}
	
			}
		
			&:hover{
			  opacity: 0.9;
			}
		}
	}

}


/*--------------------------------------------------------------
## Sidebar
--------------------------------------------------------------*/


aside{
	width: span(12);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px 0;
	
	section{
		width: 100%;
		h2{
			background-color: $green;
			color: white;
			padding: 5px;
			font-size: 16px;
			font-weight: lighter;
			text-transform: uppercase;
			text-align: center;
			margin: 0;
		}
		ul{
			margin: 20px 0;
			padding: 0 10px;
			list-style-position: inside;
			list-style: none;
			li{
				margin: 5px 0;
				a{
					color: $grey;
					text-decoration: none;
					&:hover{
						color: $green;
						text-decoration: underline;
					}
				}
			}
		}
	}
	
	.widget_media_image{
		width: 50%;
	}
	
	.widget_text{
		width: 45%;
		text-align: center;
		p{
			text-align: justify;
		}
	}
	
    .widget_search{
        
        label{
	        width: 100%;
        }
        
        input{
	        width: 100%;
        }
		
		// masquage du bouton submit
        .search-submit{
	        display: none;
	        border: none;
	        cursor: pointer;
	        width: 100%;
	        height: 25px;
	        margin: 5px 0 0;
	        
	        &:hover{
	        background-color: $blue;
	        color: white;
	        }
        }
    }

	
}

// Sidebar - recent post with thumbnail

#recent{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 30px 0;
	padding: 0;
	
	li{
		margin-bottom: 30px;

		a{
			display: flex;
			flex-wrap: wrap;
			color: $grey;
			text-decoration: none;
			.image{
				width: 30%;
				margin-right: 10px;
			}
			p{
				width: 60%;
				margin: 0;
				padding: 0;
			}
			&:hover{
				color: $green;
				.image{
					opacity: 0.8;
				}
			}
		}
	}
	
}





/*--------------------------------------------------------------
## Contenu de la page
--------------------------------------------------------------*/


#primary{
	display: flex;
	flex-wrap: wrap;
	width: span(11);
	margin: 0 auto;
	justify-content: space-between;
}


article{
background-color: white;
margin: 10px 0;	
width: span(12);
margin: 0 auto;


}

.entry-title{
	width: 100%;
	a{
		color: black;
		text-decoration: none;
		&:hover{
			opacity: 0.5;
		}
	}
}

.entry-meta{
	text-align: center;
	span{
		margin: 0 auto;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}
 

.entry-header{
	padding: 0 50px;
	margin: 0 auto;
	h1{
		margin: 0;
		padding: 20px 0 0;
		text-transform: uppercase;
		text-align: center;
	}
	h2{
		margin: 0;
		padding: 20px 0 5px;
		text-align: center;
		text-transform: uppercase;
	}
}

.entry-content{
	padding: 0 50px;
	width: 100%;
	
	.page-links{
		a{
			color: $grey;
			&:hover{
				color: $green;
			}
		}
	}
	a{
		color: $green;
		&:hover{
			color: $grey;
		}
	}

}

.entry-footer{
	padding: 20px 50px;
	border-top: 1px solid $grey;
	background-color: white;
	span{
		margin-right: 10px;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}


.more-link{
	color: $green;
	&:hover{
		color: $grey;
	}
}



img.alignright {
    margin: 0.4211em 0 1.6842em 1.6842em;
}


table,
th,
td {
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th, td {
	padding: 0.4em;
}

.attachment-post-thumbnail{
	margin: 0 auto;
	display: block;
	width: 100%;
	height: auto;
}

.comment-body{
	padding: 15px;
}
.comment-list{
	margin: 0 0 0 0.5em;
}

.comment-meta{
	padding: 0
	;
}


/*--------------------------------------------------------------
## Navigation articles plus anciens
--------------------------------------------------------------*/

.nav-links{
	display: flex;
	justify-content: space-between;
	div{
		a{
			display: block;
			padding: 30px;
			background-color: white;
			text-decoration: none;
			color: $green;
			&:hover{
				background-color: $green;
				color: white; 
			}
		}
	}
}


/*--------------------------------------------------------------
## Footer - Copyright 
--------------------------------------------------------------*/

.null-instagram-feed{
    margin: 0;
    h3{
      color: black;
      font-family: "helvetica_lightregular";
      position: relative;
      z-index: 100;
    }
  .instagram-pics{
      display: flex;
      flex-wrap: wrap;

      li{
        width: span(3);
//         background-/* color */: red;
        a{
          width: 100%;
          height: auto;
          display: block;
//           background-color: $greymiddle;
          img{
            width: 100%;
            height: auto;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }
  }

}


footer{
// 	background-color: red;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	color: #585858;
	position: relative;
	bottom: 0;
	width: 100%;
}


.site-info{
// 	height: 60px;
	width: span(5);
	display: flex;
	flex-wrap: wrap;
	vertical-align: top;
	margin: 50px auto 20px;
	font-family: "Roboto";
	padding-top: 15px;
	box-sizing: border-box;
	text-align: center;
// 	background-color: red;
	.sep{
		margin: 0 10px;
	}
	a{
		color: $green;
		text-align: center;
		&:hover{
			color: $grey;
		}
		&:nth-of-type(2){
// 			width: 100%;

		}
	}
}

// social-box

.social-box{
	margin: 0 auto 20px;
	width: 15%;
	display: flex;
	justify-content: space-between;
	
	a{
		width: 30%;
		color: $green;
		text-align: center;
		i{
			font-size: 40px;
			text-align: center;
		}
	}
}


/*--------------------------------------------------------------
## Contact
--------------------------------------------------------------*/

		
form{
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	flex-wrap: wrap;
	
	p{
		width: 30%;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
		margin: 0 0 25px;
			
		input{
			border: none;
			border-radius: 0;
		}
		
		&:nth-of-type(4){
			width: 100%;
			input{
				width: 100%;
			}
		}
		
		&:nth-of-type(5){
			width: 100%;
			
			textarea{
				width: 100%;
				height: 100px;
				border-radius: 0;
				border: none;
			}
		}
		
		&:nth-of-type(6){
			width: 20%;
			margin: 30px auto;
			border: none;
			
			input{
				width: 100%;
				border: 1px solid gray;
				height: 55px;
				font-size: 1.2em;
				background-color: white;
			}
		}
		
		
	}
	
}


} // fin 768px
@media screen and (min-width : 480px) and (max-width:767px){

	

/*--------------------------------------------------------------
## Header - Accueil
--------------------------------------------------------------*/



#masthead{
	font-family: "Roboto";
	display: block;
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	width: 100%;		
	a{
		text-decoration: none;
	}

}


main{
	width: span(12);
}


.fullwidth{
	width: span(12);
}

.media{
	width: span(9); // inclusion de la taille des colonnes
	background-color: red;
}




/*--------------------------------------------------------------
## Section catégories
--------------------------------------------------------------*/


.image_links{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  a{
    width: 100%;
    height: auto;
    text-decoration: none;
    margin: 10px 0 0;
    overflow: hidden;
    height: 125px;
    &:hover{
      opacity: 0.8;
    }
    img{
      width: 100%;
      overflow: hidden;
      position: relative;

    }
    .cat-title{
      background-color: white;
      position: absolute;
      z-index: 10;
      padding: 5px 0;
      width: 60%;
      margin: 0 auto;
      top : 70px;
      left: 20%;
    }
    p{
      text-align: center;
      color: $grey;
    }
  }
}

/*--------------------------------------------------------------
## Slider catégories
--------------------------------------------------------------*/


#section_slide_cat{
	margin: 50px auto;
	width: span(11);

	#slide_cat{
	box-sizing: border-box;
	
		a{
		text-decoration:none;
		
			.img_container{
			
				img{
					width: 100%;
					height: auto;
				}
			}
		
			.descrip{
					background-color: white;
					margin: -120px auto 0;
					position: relative;
					bottom: 0;
					width: 80%;
			
				h3{
					color: $grey;
					text-transform: uppercase;
					text-align: center;
					font-weight: lighter;
				}
	
			}
		
			&:hover{
			  opacity: 0.9;
			}
		}
	}

}


/*--------------------------------------------------------------
## Sidebar
--------------------------------------------------------------*/


aside{
	width: span(12);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px 0;
	
	section{
		width: 100%;
		h2{
			background-color: $green;
			color: white;
			padding: 5px;
			font-size: 16px;
			font-weight: lighter;
			text-transform: uppercase;
			text-align: center;
			margin: 0;
		}
		ul{
			margin: 20px 0;
			padding: 0 10px;
			list-style-position: inside;
			list-style: none;
			li{
				margin: 5px 0;
				a{
					color: $grey;
					text-decoration: none;
					&:hover{
						color: $green;
						text-decoration: underline;
					}
				}
			}
		}
	}
	
	.widget_media_image{
		width: 100%;
	}
	
	.widget_text{
		width: 100%;
		text-align: center;
		p{
			text-align: justify;
		}
	}
	
    .widget_search{
        
        label{
	        width: 100%;
        }
        
        input{
	        width: 100%;
        }
		
		// masquage du bouton submit
        .search-submit{
	        display: none;
	        border: none;
	        cursor: pointer;
	        width: 100%;
	        height: 25px;
	        margin: 5px 0 0;
	        
	        &:hover{
	        background-color: $blue;
	        color: white;
	        }
        }
    }

	
}

// Sidebar - recent post with thumbnail

#recent{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 30px 0;
	padding: 0;
	
	li{
		margin-bottom: 30px;

		a{
			display: flex;
			flex-wrap: wrap;
			color: $grey;
			text-decoration: none;
			.image{
				width: 50%;
				margin-right: 10px;
			}
			p{
				width: 40%;
				margin: 0;
				padding: 0;
			}
			&:hover{
				color: $green;
				.image{
					opacity: 0.8;
				}
			}
		}
	}
	
}





/*--------------------------------------------------------------
## Contenu de la page
--------------------------------------------------------------*/


#primary{
	display: flex;
	flex-wrap: wrap;
	width: span(11);
	margin: 0 auto;
	justify-content: space-between;
}


article{
background-color: white;
margin: 10px 0;	
width: span(12);
margin: 0 auto;


}

.entry-title{
	width: 100%;
	a{
		color: black;
		text-decoration: none;
		&:hover{
			opacity: 0.5;
		}
	}
}

.entry-meta{
	text-align: center;
	span{
		margin: 0 auto;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}
 

.entry-header{
	padding: 0 10px;
	h1{
		margin: 0;
		padding: 20px 0 0;
		text-transform: uppercase;
		text-align: center;
	}
	h2{
		margin: 0;
		padding: 20px 0 5px;
		text-align: center;
		text-transform: uppercase;
		font-size: 1.8em;
	}
}

.entry-content{
	padding: 0 10px;
	width: 100%;
	
	.page-links{
		a{
			color: $grey;
			&:hover{
				color: $green;
			}
		}
	}
	a{
		color: $green;
		&:hover{
			color: $grey;
		}
	}

}

.entry-footer{
	padding: 20px 50px;
	border-top: 1px solid $grey;
	background-color: white;
	span{
		margin-right: 10px;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}


.more-link{
	color: $green;
	&:hover{
		color: $grey;
	}
}



img.alignright {
    margin: 0.4211em 0 1.6842em 1.6842em;
}


table,
th,
td {
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th, td {
	padding: 0.4em;
}

.attachment-post-thumbnail{
	margin: 0 auto;
	display: block;
	width: 100%;
	height: auto;
}

.comment-body{
	padding: 15px;
}
.comment-list{
	margin: 0 0 0 0.5em;
}

.comment-meta{
	padding: 0
	;
}


/*--------------------------------------------------------------
## Navigation articles plus anciens
--------------------------------------------------------------*/

.nav-links{
	display: flex;
	justify-content: space-between;
	div{
		a{
			display: block;
			padding: 30px;
			background-color: white;
			text-decoration: none;
			color: $green;
			&:hover{
				background-color: $green;
				color: white; 
			}
		}
	}
}


/*--------------------------------------------------------------
## Footer - Copyright 
--------------------------------------------------------------*/

.null-instagram-feed{
    margin: 0;
    h3{
      color: black;
      font-family: "helvetica_lightregular";
      position: relative;
      z-index: 100;
    }
  .instagram-pics{
      display: flex;
      flex-wrap: wrap;

      li{
        width: span(3);
//         background-/* color */: red;
        a{
          width: 100%;
          height: auto;
          display: block;
//           background-color: $greymiddle;
          img{
            width: 100%;
            height: auto;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }
  }

}



footer{
// 	background-color: red;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	color: #585858;
	position: relative;
	bottom: 0;
	width: 100%;
}


.site-info{
// 	height: 60px;
	width: span(5);
	display: flex;
	flex-wrap: wrap;
	vertical-align: top;
	margin: 50px auto 20px;
	font-family: "Roboto";
	padding-top: 15px;
	box-sizing: border-box;
	text-align: center;
// 	background-color: red;
	.sep{
		margin: 0 10px;
	}
	a{
		color: $green;
		text-align: center;
		&:hover{
			color: $grey;
		}
		&:nth-of-type(2){
// 			width: 100%;

		}
	}
}

// social-box

.social-box{
	margin: 0 auto 20px;
	width: 15%;
	display: flex;
	justify-content: space-between;
	
	a{
		width: 30%;
		color: $green;
		text-align: center;
		i{
			font-size: 40px;
			text-align: center;
		}
	}
}


/*--------------------------------------------------------------
## Contact
--------------------------------------------------------------*/

		
form{
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	flex-wrap: wrap;
	
	p{
		width: 30%;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
		margin: 0 0 25px;
			
		input{
			border: none;
			border-radius: 0;
		}
		
		&:nth-of-type(4){
			width: 100%;
			input{
				width: 100%;
			}
		}
		
		&:nth-of-type(5){
			width: 100%;
			
			textarea{
				width: 100%;
				height: 100px;
				border-radius: 0;
				border: none;
			}
		}
		
		&:nth-of-type(6){
			width: 20%;
			margin: 30px auto;
			border: none;
			
			input{
				width: 100%;
				border: 1px solid gray;
				height: 55px;
				font-size: 1.2em;
				background-color: white;
			}
		}
		
		
	}
	
}


} // fin de 480px
@media screen and (min-width : 320px) and (max-width:479px){

	

/*--------------------------------------------------------------
## Header - Accueil
--------------------------------------------------------------*/



#masthead{
	font-family: "Roboto";
	display: block;
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	width: 100%;		
	a{
		text-decoration: none;
	}

}


main{
	width: span(12);
}


.fullwidth{
	width: span(12);
}

.media{
	width: span(9); // inclusion de la taille des colonnes
	background-color: red;
}




/*--------------------------------------------------------------
## Section catégories
--------------------------------------------------------------*/


.image_links{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  a{
    width: 100%;
    height: auto;
    text-decoration: none;
    margin: 10px 0 0;
    overflow: hidden;
    height: 125px;
    &:hover{
      opacity: 0.8;
    }
    img{
      width: 100%;
      overflow: hidden;
      position: relative;

    }
    .cat-title{
      background-color: white;
      position: absolute;
      z-index: 10;
      padding: 5px 0;
      width: 60%;
      margin: 0 auto;
      top : 70px;
      left: 20%;
    }
    p{
      text-align: center;
      color: $grey;
    }
  }
}

/*--------------------------------------------------------------
## Slider catégories
--------------------------------------------------------------*/


#section_slide_cat{
	margin: 50px auto;
	width: span(11);

	#slide_cat{
	box-sizing: border-box;
	
		a{
		text-decoration:none;
		
			.img_container{
			
				img{
					width: 100%;
					height: auto;
				}
			}
		
			.descrip{
					background-color: white;
					margin: -120px auto 0;
					position: relative;
					bottom: 0;
					width: 80%;
			
				h3{
					color: $grey;
					text-transform: uppercase;
					text-align: center;
					font-weight: lighter;
				}
	
			}
		
			&:hover{
			  opacity: 0.9;
			}
		}
	}

}


/*--------------------------------------------------------------
## Sidebar
--------------------------------------------------------------*/


aside{
	width: span(12);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px 0;
	
	section{
		width: 100%;
		h2{
			background-color: $green;
			color: white;
			padding: 5px;
			font-size: 16px;
			font-weight: lighter;
			text-transform: uppercase;
			text-align: center;
			margin: 0;
		}
		ul{
			margin: 20px 0;
			padding: 0 10px;
			list-style-position: inside;
			list-style: none;
			li{
				margin: 5px 0;
				a{
					color: $grey;
					text-decoration: none;
					&:hover{
						color: $green;
						text-decoration: underline;
					}
				}
			}
		}
	}
	
	.widget_media_image{
		width: 100%;
	}
	
	.widget_text{
		width: 100%;
		text-align: center;
		p{
			text-align: justify;
		}
	}
	
    .widget_search{
        
        label{
	        width: 100%;
        }
        
        input{
	        width: 100%;
        }
		
		// masquage du bouton submit
        .search-submit{
	        display: none;
	        border: none;
	        cursor: pointer;
	        width: 100%;
	        height: 25px;
	        margin: 5px 0 0;
	        
	        &:hover{
	        background-color: $blue;
	        color: white;
	        }
        }
    }

	
}

// Sidebar - recent post with thumbnail

#recent{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 30px 0;
	padding: 0;
	
	li{
		margin-bottom: 30px;

		a{
			display: flex;
			flex-wrap: wrap;
			color: $grey;
			text-decoration: none;
			.image{
				width: 50%;
				margin-right: 10px;
			}
			p{
				width: 40%;
				margin: 0;
				padding: 0;
			}
			&:hover{
				color: $green;
				.image{
					opacity: 0.8;
				}
			}
		}
	}
	
}





/*--------------------------------------------------------------
## Contenu de la page
--------------------------------------------------------------*/


#primary{
	display: flex;
	flex-wrap: wrap;
	width: span(11);
	margin: 0 auto;
	justify-content: space-between;
}


article{
background-color: white;
margin: 10px 0;	
width: span(12);
margin: 0 auto;


}

.entry-title{
	width: 100%;
	a{
		color: black;
		text-decoration: none;
		&:hover{
			opacity: 0.5;
		}
	}
}

.entry-meta{
	text-align: center;
	span{
		margin: 0 auto;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}
 

.entry-header{
	padding: 0 10px;
	h1{
		margin: 0;
		padding: 20px 0 0;
		text-transform: uppercase;
	}
	h2{
		margin: 0;
		padding: 20px 0 5px;
		text-align: center;
		text-transform: uppercase;
		font-size: 1.8em;
	}
}

.entry-content{
	padding: 0 10px;
	width: 100%;
	
	.page-links{
		a{
			color: $grey;
			&:hover{
				color: $green;
			}
		}
	}
	a{
		color: $green;
		&:hover{
			color: $grey;
		}
	}

}

.entry-footer{
	padding: 20px 50px;
	border-top: 1px solid $grey;
	background-color: white;
	span{
		margin-right: 10px;
		a{
			color: $green;
			text-decoration: none;
			font-style: italic;
			&:hover{
				color: $grey;
			}
		}
	}
}


.more-link{
	color: $green;
	&:hover{
		color: $grey;
	}
}



img.alignright {
    margin: 0.4211em 0 1.6842em 1.6842em;
}


table,
th,
td {
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th, td {
	padding: 0.4em;
}

.attachment-post-thumbnail{
	margin: 0 auto;
	display: block;
	width: 100%;
	height: auto;
}

.comment-body{
	padding: 15px;
}
.comment-list{
	margin: 0 0 0 0.5em;
}

.comment-meta{
	padding: 0
	;
}


/*--------------------------------------------------------------
## Navigation articles plus anciens
--------------------------------------------------------------*/

.nav-links{
	display: flex;
	justify-content: space-between;
	div{
		a{
			display: block;
			padding: 30px;
			background-color: white;
			text-decoration: none;
			color: $green;
			text-align: center;
			&:hover{
				background-color: $green;
				color: white; 
			}
		}
	}
}


/*--------------------------------------------------------------
## Footer - Copyright 
--------------------------------------------------------------*/

.null-instagram-feed{
    margin: 0;
    h3{
      color: black;
      font-family: "helvetica_lightregular";
      position: relative;
      z-index: 100;
    }
  .instagram-pics{
      display: flex;
      flex-wrap: wrap;

      li{
        width: span(3);
//         background-/* color */: red;
        a{
          width: 100%;
          height: auto;
          display: block;
//           background-color: $greymiddle;
          img{
            width: 100%;
            height: auto;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }
  }

}


footer{
// 	background-color: red;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	color: #585858;
	position: relative;
	bottom: 0;
	width: 100%;
}


.site-info{
// 	height: 60px;
	width: span(5);
	display: flex;
	flex-wrap: wrap;
	vertical-align: top;
	margin: 50px auto 20px;
	font-family: "Roboto";
	padding-top: 15px;
	box-sizing: border-box;
	text-align: center;
// 	background-color: red;
	.sep{
		margin: 0 10px;
	}
	a{
		color: $green;
		text-align: center;
		&:hover{
			color: $grey;
		}
		&:nth-of-type(2){
// 			width: 100%;

		}
	}
}

// social-box

.social-box{
	margin: 0 auto 20px;
	width: 90%;
	display: flex;
	justify-content: space-between;
	
	a{
		width: 30%;
		color: $green;
		text-align: center;
		i{
			font-size: 40px;
			text-align: center;
		}
	}
}


/*--------------------------------------------------------------
## Contact
--------------------------------------------------------------*/

		
form{
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	flex-wrap: wrap;
	
	p{
		width: 30%;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
		margin: 0 0 25px;
			
		input{
			border: none;
			border-radius: 0;
		}
		
		&:nth-of-type(4){
			width: 100%;
			input{
				width: 100%;
			}
		}
		
		&:nth-of-type(5){
			width: 100%;
			
			textarea{
				width: 100%;
				height: 100px;
				border-radius: 0;
				border: none;
			}
		}
		
		&:nth-of-type(6){
			width: 20%;
			margin: 30px auto;
			border: none;
			
			input{
				width: 100%;
				border: 1px solid gray;
				height: 55px;
				font-size: 1.2em;
				background-color: white;
			}
		}
		
		
	}
	
}


}