@import url('extern/bootstrap.css');
	@import url('extern/bootstrap.min.css');
	@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

/*Mise en page body*/
	body{
		/* background-image: url("../image/background.jpg"); */
		background-size: 100%;
		font-family: 'Montserrat', sans-serif;
		background-color: #FEFDF0;
	}

	.loginContainer{
		margin: 2% auto;
		height: fit-content;
		width: 35% !important;
		padding: 1% 1% 0 1%;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
	}

	#information{
		border: none !important;
		text-align: center;
	}

	/*Carousel*/
		.carousel-item{
			height: 400px;
		}

		.carousel-indicators li {
		  width: 10px;
		  height: 10px;
		  border-radius: 100%;
		}

	.complement{
		text-align: left;
	}

	.iconCompl{
		width: 50px;
	}

	/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

	/* Portrait and Landscape */
	@media only screen 
	  and (min-device-width: 320px) 
	  and (max-device-width: 568px)
	  and (-webkit-min-device-pixel-ratio: 2) {
	  	/*LoginContainerr*/
	  		.loginContainer{
	  			margin-top: 17%;
	  			width: 90%;
	  			height: 550px;
	  			padding: 2%;
	  			/*float: right;*/
	  		}

	  		.connection_title{
	  			font-size: 60px;
	  			text-align: center;
	  			margin-bottom: 15px;
	  		}

	  		.connection_table{
	  			margin: auto;
	  			width: 100%;
	  		}

	  		.loginControl{
	  			height: 100px;
	  			font-size: 54px;
	  			margin-bottom: 25px;
	  		}

	  		.loginBtn{
	  			width: 400px;
	  			height: 100px;
	  			font-size: 50px;
	  			border-radius: 25px;
	  		}
	  	/*Navbar*/
		  	.navbar{
		  		min-height: 200px;
		  	}
		  	.navbar-brand{
		  		font-size: 50px;
		  	}
		  	.navbar-toggler-icon{
		  		width: 100px;
		  		height: 100px;
		  	}
		  	.nav-item{
		  		font-size: 50px;
		  	}
		  	#navbar-conn{
				background-color: rgba(48, 48, 48, 0.5);
				width: 100%;
				margin: 0 auto 1.5%;
				height: 50px;
			}
			.navbar-collapse{
				background-color: rgba(48, 48, 48, 0.5);
				width: 100%;
				margin: 0 auto 1.5%;
				height: fit-content;
			}

			
		/*Carousel*/
			.carousel-item{
				height: 550px;
			}

			.carousel-indicators li {
			  width: 10px;
			  height: 10px;
			  border-radius: 100%;
			}
	}

	/* Portrait */
	@media only screen 
	  and (min-device-width: 320px) 
	  and (max-device-width: 568px)
	  and (-webkit-min-device-pixel-ratio: 2)
	  and (orientation: portrait) {
	  	/*LoginContainerr*/
	  		.loginContainer{
	  			margin-top: 17%;
	  			width: 90%;
	  			height: 550px;
	  			padding: 2%;
	  			/*float: right;*/
	  		}

	  		.connection_title{
	  			font-size: 60px;
	  			text-align: center;
	  		}

	  		.connection_table{
	  			margin: auto;
	  			width: 100%;
	  		}

	  		.loginControl{
	  			height: 100px;
	  			font-size: 54px;
	  		}

	  		.loginBtn{
	  			width: 400px;
	  			height: 100px;
	  			font-size: 50px;
	  			border-radius: 25px;
	  		}
	  	/*Navbar*/
		  	.navbar{
		  		min-height: 200px;
		  	}
		  	.navbar-brand{
		  		font-size: 50px;
		  	}
		  	.navbar-toggler-icon{
		  		width: 100px;
		  		height: 100px;
		  	}
		  	#navbar-conn{
				background-color: rgba(48, 48, 48, 0.5);
				width: 100%;
				margin: 0 auto 1.5%;
				height: 50px;
			}

			
		/*Carousel*/
			.carousel-item{
				height: 550px;
			}

			.carousel-indicators li {
			  width: 10px;
			  height: 10px;
			  border-radius: 100%;
			}
	}

	/* Landscape */
	@media only screen 
	  and (min-device-width: 320px) 
	  and (max-device-width: 568px)
	  and (-webkit-min-device-pixel-ratio: 2)
	  and (orientation: landscape) {
	  	/*LoginContainerr*/
	  		.loginContainer{
	  			margin-top: 5%;
	  			width: 90%;
	  			height: 310px;
	  			padding: 2%;
	  			/*float: right;*/
	  		}

	  		.connection_title{
	  			font-size: 25px;
	  			text-align: center;
	  		}

	  		.connection_table{
	  			margin: auto;
	  			width: 100%;
	  		}

	  		.loginControl{
	  			height: 40px;
	  			font-size: 25px;
	  		}

	  		.loginBtn{
	  			width: 200px;
	  			height: 50px;
	  			font-size: 25px;
	  			border-radius: 25px;
	  		}
	  	/*Navbar*/
		  	.navbar{
		  		min-height: 55px;
		  	}
		  	.navbar-brand{
		  		font-size: 25px;
		  	}
		  	.navbar-toggler-icon{
		  		width: 20px;
		  		height: 20px;
		  	}
		  	#navbar-conn{
				background-color: rgba(48, 48, 48, 0.5);
				width: 100%;
				margin: 0 auto 1.5%;
				height: 50px;
			}

			
		/*Carousel*/
			.carousel-item{
				height: 170px;
			}

			.carousel-indicators li {
			  width: 10px;
			  height: 10px;
			  border-radius: 100%;
			}
	}

	/* ----------- Non-Retina Screens ----------- */
	@media screen 
	  and (min-device-width: 1200px) 
	  and (max-device-width: 1600px) 
	  and (-webkit-min-device-pixel-ratio: 1) { 

		.loginContainer{
			margin: 2% auto;
			height: fit-content;
			width: fit-content;
			padding: 1% 1% 0 1%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		}

		/*Carousel*/
			.carousel-item{
				height: 350px;
			}

			.carousel-indicators li {
			  width: 10px;
			  height: 10px;
			  border-radius: 100%;
			}

		/*Barre de navigation, code pour que la barre de navigation reste au dessus, profil*/
			.navbar{
				width: 100%;
				margin: 0 auto 1.5%;
				z-index: 90;
			}

			.navbar+.navbar {
			  z-index: 80;
			}
			
			#navbar-conn{
				background-color: rgba(48, 48, 48, 0.5);
				width: 100%;
				margin: 0 auto 1.5%;
				height: 50px;
			}


	}

	/* ----------- Retina Screens ----------- */
	@media screen 
	  and (min-device-width: 1200px) 
	  and (max-device-width: 1600px) 
	  and (-webkit-min-device-pixel-ratio: 2)
	  and (min-resolution: 192dpi) { 

		.loginContainer{
			margin: 2% auto;
			height: fit-content;
			width: fit-content;
			padding: 1% 1% 0 1%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		}

		/*Carousel*/
			.carousel-item{
				height: 350px;
			}

			.carousel-indicators li {
			  width: 10px;
			  height: 10px;
			  border-radius: 100%;
			}

		/*Barre de navigation, code pour que la barre de navigation reste au dessus, profil*/
			.navbar{
				width: 100%;
				margin: 0 auto 1.5%;
				z-index: 90;
			}

			.navbar+.navbar {
			  z-index: 80;
			}
			
			#navbar-conn{
				background-color: rgba(48, 48, 48, 0.5);
				width: 100%;
				margin: 0 auto 1.5%;
				height: 50px;
			}

	}

	@media screen 
	  and (min-device-width: 1200px) 
	  and (max-device-width: 1600px) 
	  and (-webkit-min-device-pixel-ratio: 1) { 


		/*Carousel*/
			.carousel-item{
				height: 200px!important;
			}

			.carousel-indicators li {
			  width: 10px;
			  height: 10px;
			  border-radius: 100%;
			}

	}

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

		body{
			font-size: 50px!important;
		}

	    .loginContainer{
			margin: 2% auto;
			height: fit-content;
			width: fit-content;
			padding: 1% 1% 0 1%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		}

		.connection_title{
  			font-size: 60px;
  			text-align: center;
  			margin-bottom: 15px;
  		}

  		.connection_table{
  			margin: auto;
  			width: 100%;
  		}

  		.loginControl{
  			height: 100px;
  			font-size: 54px;
  			margin-bottom: 25px;
  		}

  		.loginBtn{
  			width: 400px;
  			height: 100px;
  			border-radius: 25px;
  		}

		/*Carousel*/
			.carousel-item{
				height: 750px;
			}

			.carousel-indicators li {
			  width: 10px;
			  height: 10px;
			  border-radius: 100%;
			}

		/*Barre de navigation, code pour que la barre de navigation reste au dessus, profil*/
			.navbar{
				height: 150px!important;
				width: 100%;
				margin: 0 auto 1.5%;
				z-index: 90;
			}

			.navbar+.navbar {
			  z-index: 80;
			}
			
			#navbar-conn{
				background-color: rgba(48, 48, 48, 0.5);
				width: 100%;
				margin: 0 auto 1.5%;
				height: 50px;
			}

			.navbar-brand{
				font-size: 50px;
			}

			.nav-item{
				font-size: 45px;
			}

			.form-control-lg{
	  			height: 60px;
	  			font-size: 50px;
	  		}

	  		.form-group{
	  			text-align: center;
	  		}

	  		.dropdown-menu-right{
	  			width: 650px!important;
	  		}

	  		.dropdown-menu-right>a{
	  			font-size: 50px;
	  		}

	  		#custom-search-form>input{
	  			height: 60px;
	  			font-size: 40px;
	  		}

	  		#custom-search-form>button{
	  			height: 60px;
	  			width: 75px;
	  			font-size: 35px;
	  		}

			.welcome{
				font-size: 50px!important;
			}

			.welcome_text{
				font-size: 40px;
			}

			.recipe_title{
				font-size: 50px!important;
			}

			.fav>button{
				font-size: 35px!important;
			}

			.complement{
				font-size: 35px!important;
			}

			.media-body{
				font-size: 40px!important;
			}

			.filterBtn{
				font-size: 50px;
			}

			.dropdown-filter>label{
				font-size: 50px;
			}

			.form-check{
				font-size: 50px;
			}

			.form-check-input{
				height: 50px;
				width: 50px;
			}

			.form-check-label{
				padding-left: 50px; 
			}

			.btnFilter{
				font-size: 50px;
			}

			.formSearch>input{
				height: 60px;
				font-size: 40px;
			}

			.formSearch>button{
				height: 60px;
				font-size: 35px;
			}

			.card-title{
				font-size: 40px!important;
			}

			.btnVoirPlus{
				font-size: 40px!important;
			}
	}

.fa-filter{
	color: white !important;
}

.dropdown-toggle{
	cursor: pointer;
}

.filterBtn:after{
	display: none;
}

.dropdown-filter{
	width: fit-content !important;
	height: fit-content !important;
	padding: 15px;
	padding-bottom: 5px;
}

.btnFilter{
	margin-bottom: 1px !important;
}

#underline{
	color: white!important;
}

#underline>li>a:hover{
	border-bottom: medium solid white;
}

#underline>li>a:active{
	border-bottom: medium solid white;
}

.active{
	border-bottom: medium solid white;
}

.dropdown-menu{
	width: 350px;
	max-height: 70vh;
}

#custom-search-form{
	background-color: transparent;
}

#secondnavbar{
	height: 40px;	
}

.icon-nav{
	/* width: 5%; */
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.sticky + .content {
  padding-top: 102px;
}

.profil_img{
	width: 245px!important;
	height: 250px!important;
}

.table_profil{
	width: 70%;
	margin: 1% auto auto 5%;
}

table, th, td {
	border-collapse: collapse;
}
th, td {
	padding: 2%;
}

.row{
	margin: 0 auto;
}

#btn-change{
	position: right;
}

#btn-mail:hover{
	text-decoration: underline;
}

#btn-password:hover{
	text-decoration: underline;
}

/*Searchbar https://bootsnipp.com/snippets/GaeQR */
	.redirectSearch{
		background-color: transparent;
		color: blue;
		border: none;
		text-decoration: underline;
		cursor: pointer;
	}

	.searchBar{
		display: inline-block;
      	width: 100%;
      	vertical-align: middle;
	}

	.btnSearch{
		padding-right: 1%;
	}

/*Bouton de retour*/
	.btnBack{
		margin-left: 2%;
	}

/*Recette*/
	.recipe{
		margin: 1% 0% 1% 5%;
		width: 40%;
		height: fit-content;
		padding: 2%;
		border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px 5px 5px 5px;
		-webkit-border-radius: 5px 5px 5px 5px;
		border: 0px solid #000;
		-webkit-box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		background-color: #fff;
		float: left;
	}
	
	.recipe:hover{
		cursor: pointer;
		background-color: #FBFCFA;
	}
	
	.recipe_picture{
		width: 25%;
	}
	
	.card_recipe{
		margin: 1% 0% 2% 4%;
		float: left;		
		width: 20%;
	}
	
	.card_recipe:hover{
		cursor: pointer;
		-webkit-box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
	}
	
	.card-title{
		font-size: 18;
	}
	
	.card-body-recipe {
		height: 100px;
	}
	
	.tab-content{
		text-align: justify;
	}
	
	.ingredient_list > li {
		margin: 0;
		padding: 0 0 0 2em;
		text-indent: -2em;
		list-style-type: none;
		counter-increment: item;
	}

	.ingredient_list > li:before {
		display: inline-block;
		width: 1em;
		padding-right: 0.5em;
		font-weight: bold;
		text-align: right;
		content: counter(item) ".";
	}
	
	.paginations a.current {
		text-decoration: underline;
	}

/*Div texte de bienvenue et à propos*/
	.welcome_text{
		margin: 1% auto;
		width: 70%;
		height: fit-content;
		padding: 2%;
		border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px 5px 5px 5px;
		-webkit-border-radius: 5px 5px 5px 5px;
		border: 0px solid #000;
		-webkit-box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.4);
		background-color: #fff;
	}
	
	.welcome{
		font-size: 30;
		text-align: center;
	}
	
	.welcome_details{
		text-align: center;
	}
	
	.signature{
		text-align: right;
	}
	
	.about_title{
		font-size: 30;
		text-align: center;
	}
	
	.about_details{
		text-align: justify;
	}
	
/*Favoris*/
	.fav{
		text-align: right;
		cursor: pointer;
		color: #FCD21C;
	}
	
/*Footer*/
	.fab {
		padding: 20px;
		font-size: 30px;
		width: 50px;
		text-align: center;
		text-decoration: none;
		border-radius: 50%;
		color: #303030;
	}

	.fab:hover {
		opacity: 0.7;
	}
	
	.footer-copyright{
		padding-top: 0%;
	}

	/* CSS Test begin */
	.comment-box {
		margin-top: 10px !important;
	}
	/* CSS Test end */

	.comment-box img {
		width: 50px;
		height: 50px;
	}
	.comment-box .media-left {
		padding-right: 10px;
		width: 65px;
	}
	.comment-box .media-body p {
		border: 1px solid #ddd;
		padding: 10px;
	}
	.comment-box .media-body .media p {
		margin-bottom: 0;
	}
	.comment-box .media-heading {
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		padding: 7px 10px;
		position: relative;
		margin-bottom: -1px;
	}
	.comment-box .media-heading:before {
		content: "";
		width: 12px;
		height: 12px;
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		border-width: 1px 0 0 1px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		position: absolute;
		top: 10px;
		left: -6px;
	}
	
	.comment-box .media-footer p {
		border: 1px solid #ddd;
		padding: 10px;
	}
	.comment-box .media-footer .media p {
		margin-bottom: 0;
	}