/*
  ####  ###### #    # ###### #####    ##   #
 #    # #      ##   # #      #    #  #  #  #
 #      #####  # #  # #####  #    # #    # #
 #  ### #      #  # # #      #####  ###### #
 #    # #      #   ## #      #   #  #    # #
  ####  ###### #    # ###### #    # #    # ######
*/
body{
	font-family: 'Montserrat';
}

/*@font-face {
    font-family: 'lostinwild';
    src: url('../fonts/Lost in Wild.otf');
    src: url('../fonts/Lost in Wild.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/
a{
	color: #dd3937;
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	color: #dd3937;
}


@font-face {
    font-family: 'lostinwild';
    src: url('../fonts/lost_in_wild-webfont.woff2') format('woff2'),
         url('../fonts/lost_in_wild-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bebas';
    src: url('../fonts/BebasNeue Bold.otf');
    src: url('../fonts/BebasNeue Bold.ttf') format('truetype');
    src: url('../fonts/BebasNeue Regular.otf');
    src: url('../fonts/BebasNeue Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.index{
	background-image: url('../images/background_accueil_responsive.jpg');
}
.menu{
	background-image: url('../images/background_menu_responsive.jpg');
}
.contact{
	background-image: url('../images/background_accueil_responsive.jpg');
}

.pageLivraison, .mentions{
	background-image: url('../images/bgLivraison2.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}

#salades, #enfants{
	background-color: #dd3937;
}

#pates, #grignotages{
	background-color: #2c3032;
}

.index .row div{
	margin-top: 100px;
}

.lostinwild{
	font-family: 'lostinwild';
}

.menu > div > div:nth-child(1) > h2 > span.lostinwild{
	color: white;
}

#background > div > div:nth-child(1) > h2 > span.bebasBold{
	color: #dd3937;
}

.index .row:first-child div .lostinwild14{
	font-family: 'lostinwild';
	font-size: 18px;
}

.index h2, .index p, .index a{
	color: white;
	text-align: center;
}

#fusee{
	display: none;
}

.bebasBold{
	font-family: 'bebas';
	font-weight: 700;
}

.bebasRegular{
	font-family: 'bebas';
	font-weight: 400;
}

#vgSand,
#vdSand,
#vgSal,
#vdSal,
#vgPres,
#vdPres,
#vgPiz,
#vdPiz,
#vgPates,
#vdPates,
#vgGri,
#vdGri,
#vgEnf,
#vdEnf,
#vgDes,
#vdDes,
#vgBoi,
#vdBoi{ display: none;}

h3{
	letter-spacing: 1px;
}

#imgPates{ display: none; }

#pizzaGauche, #pizzaDroite{ display: none; }

#fondBois{
	background-image: url('../images/bgLivraison2.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}

/*
 #    # ######   ##   #####
 #    # #       #  #  #    #
 ###### #####  #    # #    #
 #    # #      ###### #    #
 #    # #      #    # #    #
 #    # ###### #    # #####
*/





/*
 #    # ###### #    # #    #
 ##  ## #      ##   # #    #
 # ## # #####  # #  # #    #
 #    # #      #  # # #    #
 #    # #      #   ## #    #
 #    # ###### #    #  ####
*/
#navbarSupportedContent{
	/* text-align: center; */
	text-transform: uppercase;
}
ul.navbar-nav{
	text-align: right;
}

#navbarSupportedContent a{
	color: black;
	font-family: 'bebas';
	font-size: 24px;
}

.navbar a img{
	width: 70%;
}

.tel{
	position: absolute;
	top: 20px;
	right: 0px;
	font-size: 7px;
	font-family: 'lostinwild';
	color: #A61E1C;
}

.navbar-toggler{
	position: absolute;
	top: 40px;
	right: 14px;
}

#navbarSupportedContent a.nav-link.nav-link-important{
  color: #dd3937;
  border: 3px solid #dd3937;
  display: inline-block;
  padding : 8px !important;
}
#btn-order{
	background-color:transparent;
	border-radius:0;
	color:#fff;
	border: 3px solid #fff;
	display: block;
	margin: auto;
	margin-bottom:20px;
	font-size: 32px;
}

#sousMenu{
	width: 100%;
	background-color: rgba(255,255,255,0.7);
}

#sousMenu ul{
	padding-left: 0px;
}

#sousMenu ul li{
	list-style-type: none;
	text-align: center;
	padding: 4px 0px 4px 0px;
}

#sousMenu ul li:first-of-type, #sousMenu ul li a:first-of-type{
	padding: 16px 0px 4px 0px;
}

#sousMenu ul li a{
	color: black;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'bebas';
	padding: 4px 0px 4px 0px;
	font-size: 18px;
}

#navbarSupportedContent .active{
	border-bottom: 3px solid #dd3937;
}


/*
  ####   ####  #    # ##### ###### #    # #    #
 #    # #    # ##   #   #   #      ##   # #    #
 #      #    # # #  #   #   #####  # #  # #    #
 #      #    # #  # #   #   #      #  # # #    #
 #    # #    # #   ##   #   #      #   ## #    #
  ####   ####  #    #   #   ###### #    #  ####
*/

.decoBlanche{display: none;}

/* NOS, LES */
.menu > div > div:nth-child(1) > h2 > span.bebasBold,
#prestiges > div > div:nth-child(1) > h2 > span.bebasBold,
#salades > div > h2:nth-child(5) > span.bebasBold,
#salades > div > h2:nth-child(1) > span.bebasBold{
	font-size: 30px;
	position: relative;
	top: -12px;
}

.menu > div > div:nth-child(1) > h2 > span.bebasBold{ left: 26px;}

#background > div > div:nth-child(1) > div > h2 > span.bebasRegular{
	font-size: 66px;
    letter-spacing: 1px;
    position: relative;
    top: -6px;
}

#background > div > div:nth-child(1) > div:nth-child(1) > p.lostinwild14{
	position: relative;
    top: -14px;
}

#background > div > div:nth-child(1) > div:nth-child(2) > p.lostinwild14{
	position: relative;
    top: -14px;
}

.index .row:first-child div a, .index .row:nth-child(3) div a{
	display: block;
	margin: auto;
	font-weight: 700;
	padding: 8px 0px 8px 0px;
	border-radius: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 22px;
	letter-spacing: 1px;
	text-decoration: none;
	transition: 0.3s all;
}

.index .row:first-child div:first-child a{
	background-color: #f8b703;
	width: 200px;
	margin-top: 0px;
}

.btn-order{
	width:auto !important;
	background-color: #dd3937 !important;
}

.index .row:first-child div:first-child a:hover{
	background-color: #d08f03;
}

.index .row:first-child div:nth-child(2) a{
	background-color: #36d7b7;
	width: 160px;
	margin-top: 0px;
}

.index .row:first-child div:nth-child(2) a:hover{
	background-color: #36af8f;
}

.index hr{
	height: 3px;
	background-color: white;
	margin-top: 20px;
}

.index .row:nth-child(3) div a{
	background-color: #dd3937;
	width: 160px;
	margin-top: 0px;
}

.index .row:nth-child(3) div a:hover{
	background-color: #b5110f;
}

.index .row:nth-child(3) p{
	text-transform: uppercase;
	letter-spacing: 3px;
}

.index .row:nth-child(3){
	padding-bottom: 80px;
}

.index .row:nth-child(3) img{
	display: block;
	width: 220px;
	margin: auto;
}

.index > div > div:nth-child(1) > div > p.bebasBold{
	font-size: 36px;
	letter-spacing: 2px;
	margin-top: -30px;
}

.menu .row div{
	margin-top: 30px;
}

.menu h2{
	text-align: center;
	width: 100%;
	margin-top: 60px;
	margin-bottom: 30px;
	font-size: 50px;
}

.livraison{
	color: #f8b714;
	font-family: 'bebas';
	text-align: center;
	font-size: 24px;
}

.imgLivraison{
	width: 209px;
	display: block;
	margin: auto;
}

#prestiges > div > div:nth-child(1) > div:nth-child(2) > img{ width: 227px; }

.emporter{
	color: #59bcaa;
	font-family: 'bebas';
	text-align: center;
	font-size: 24px;
}

.imgEmporter{
	width: 211px;
	display: block;
	margin: auto;
}
#prestiges > div > div:nth-child(1) > div:nth-child(3) > img{ width: 231px; }

.menu > div > div:nth-child(2),
#prestiges > div > div:nth-child(2),
#salades > div > div:nth-child(2),
#salades > div > div:nth-child(5),
#salades > div > div:nth-child(7){
	color: white;
	text-align: center;
}

#background > div > div:nth-child(2) h3, #prestiges > div > div:nth-child(2) h3, #salades > div > div:nth-child(2) h3, #salades > div > div:nth-child(5) h3){
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 38px;
}

#prestiges{
	background-color: rgba(0,0,0,0.5);
	padding-bottom: 40px;
	margin-top: 40px;
}

#prestiges > div > div:nth-child(1) > h2 > span.bebasBold, #prestiges > div > div:nth-child(1) > h2 > span.lostinwild{
	color: #dd3937;
}

#salades, #pates, #grignotages, #enfants, #desserts, #boissons{
	padding-top: 40px;
	padding-bottom: 40px;
}

#salades h2, #enfants h2{
	width: 100%;
	margin: auto;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 30px;
}

#pates h2, #grignotages h2{
	width: 100%;
	margin: auto;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 30px;
	color: #dd3937;
}

#desserts h2, #boissons h2{
	width: 100%;
	margin: auto;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 30px;
	color: white;
}

#salades > div > h2:nth-child(2) > span.bebasBold,
#salades > div > h2:nth-child(7) > span.bebasBold,
#pates > div > h2 > span.bebasBold,
#grignotages > div > h2 > span.bebasBold,
#enfants > div > h2 > span.bebasBold,
#desserts > div > h2 > span.bebasBold,
#boissons > div > h2 > span.bebasBold{
	font-size: 36px;
	position: relative;
	top: -10px;
}

#salades h3, #salades p,
#pates h3, #pates p,
#grignotages h3, #grignotages p,
#enfants h3, #enfants p,
#desserts h3, #desserts p,
#boissons h3, #boissons p{
	color: white;
	text-align: center;
}

#salades hr{
	height: 4px;
	background-color: #2c3032;
	width: 30%;
	margin-top: 40px;
	margin-bottom: 80px;
}

#salades .prix, #enfants .prix{
	color: #2c3032;
	font-family: 'bebas';
	font-weight: 700;
}

#pates .prix, #grignotages .prix{
	color: #dd3937;
	font-family: 'bebas';
	font-weight: 700;
}

#desserts .prix, #boissons .prix{
	color: #dd3937;
	font-family: 'bebas';
	font-weight: 700;
}

#imgSalade{ display: none; }

#carte{
	position: absolute;
	top: 400px;
	right: 0;
	width: 100%;
	max-width: 400px;
}

.pageLivraison fieldset{
	color: white;
	border: 1px solid white;
	width: 300px;
	margin: auto;
}
.pageLivraison legend{
	font-size: 34px;
	margin-left: 30px;
	width: 170px;
	padding-left: 20px;
	padding-right: 20px;
}

.pageLivraison li{
	font-size: 30px; font-weight: 700;
	text-transform: uppercase;
	font-family: 'bebas';
	letter-spacing: 1px;
	line-height: 30px;
}

.contact{
	padding-top: 50px;
	padding-bottom: 80px;
}

.contact label{
	color: white;
}

.contact hr{
	height: 3px;
	background-color: white;
	margin-top: 50px;
	width: 30%;
}

.telMail{
	text-align: center;
	margin-top: 50px;
}

.telMail p{
	font-family: 'bebas';
	color: white;
}

.telMail p:last-child{
	letter-spacing: 1px;
}

.telMail a{
	font-family: 'lostinwild';
	color: white;
	padding-bottom: 20px;
    display: block;
}

.telMail a:nth-child(2){
	font-family: 'Montserrat';
	font-size: 18px;
}
.pageLivraison{
	color:#fff;
	padding-top:70px;
}

.mentions{
	padding-top: 50px;
	padding-bottom: 80px;
	color: white;
	height: auto;
}

.mentions .row{
	margin-top: 100px;
}

#pates > div > h2 > span.bebasBold{
	left: 16px;
	top: -2px;
}

#enfants .row{
	text-align: center;
}

#enfants .bebasBold{
	letter-spacing: 1px;
	font-size: 22px;
}

.black{
	color: #2c3032;
}

.offert{
	font-size: 44px;
}

#enfants div:last-child .black{
	font-size: 22px;
}

.mini{
	font-size: 16px;
}

#nounours{
	width: 285px;
}

#laBeunaise{
	width: 91px;
	display: block;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

/*
 ######  ####   ####  ##### ###### #####
 #      #    # #    #   #   #      #    #
 #####  #    # #    #   #   #####  #    #
 #      #    # #    #   #   #      #####
 #      #    # #    #   #   #      #   #
 #       ####   ####    #   ###### #    #
*/
footer{
	padding-top: 20px;
}

footer ul{
	text-align: center;
	padding: 0;
}

footer li{
	list-style-type: none;
	text-transform: uppercase;
}

footer li a{
	color: black;
	font-size: 18px;
	text-decoration: none;
	transition: 0.3s all;
}

footer li a:hover{
	color: #A61E1C;
	text-decoration: none;
}

footer .last{
	color: #A61E1C;
}

footer .last:hover{
	color: black;
}
/*
 #####  ######  ####  #####   ####  #    #  ####  # #    # ######
 #    # #      #      #    # #    # ##   # #      # #    # #
 #    # #####   ####  #    # #    # # #  #  ####  # #    # #####
 #####  #           # #####  #    # #  # #      # # #    # #
 #   #  #      #    # #      #    # #   ## #    # #  #  #  #
 #    # ######  ####  #       ####  #    #  ####  #   ##   ######
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.decoBlanche{display: block;}


	#background > div > div:nth-child(1) > div:nth-child(1) > img{
		position: relative;
		left: 120px;
		top: -20px;
		width: 60px;
	}

	#background > div > div:nth-child(1) > div:nth-child(1) > p.lostinwild14{
		top: -40px;
		left: 36px;
	}

	/* #background > div > div:nth-child(1) > div:nth-child(2) > img{
		position: relative;
		left: 320px;
		top: -60px;
		width: 60px;
	} */

	#background > div > div:nth-child(1) > div:nth-child(2) > p.lostinwild14{
		left: -40px;
	}

	.tel{
		top: 26px;
		right: 18px;
		font-size: 10px;
		font-family: 'lostinwild';
		color: #dd3937;
	}

	.navbar-toggler{
		top: 60px;
		right: 50px;
	}

	.menu h2{
		font-size: 50px;
	}

	#salades h2, #pates h2, #grignotages h2, #enfants h2, #desserts h2, #boissons h2{
		font-size: 50px;
	}

	/* .pageLivraison{
		height: 734px;
	} */

	#carte{
		max-width: 500px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.index{
		padding-top: 60px;
		padding-bottom: 60px;
	}

	#background > div > div:nth-child(1) > div:nth-child(1) > img{
		left: 30px;
	}

	#background > div > div:nth-child(1) > div:nth-child(2) > img{
		left: 230px;

	}

	.menu{
		padding-top: 20px;
	}

	#sousMenu{
		background-color: rgba(0,0,0,0);
		text-align: right;
	}

	#sousMenu ul li{
		display: inline-block;
		margin-left: 5px;
		margin-right: 5px;
	}

	#sousMenu ul li a{
		color: white;
		position: relative;
	}

	#sousMenu ul li:not(:last-child) a:after{
		position: absolute;
	    content: "";
	    background-color: white;
	    height: 15px;
	    width: 1px;
	    right: -8px;
	    top: 18px;
	}

	#vgSand,
	#vdSand,
	#vgSal,
	#vdSal,
	#vgPres,
	#vdPres,
	#vgPiz,
	#vdPiz,
	#vgPates,
	#vdPates,
	#vgGri,
	#vdGri,
	#vgEnf,
	#vdEnf,
	#vgDes,
	#vdDes,
	#vgBoi,
	#vdBoi{display: block;}

	#vgPiz{
		position: relative;
		top: 106px;
		left: 130px;
	}

	#vdPiz{
		position: relative;
		top: -97px;
		left: 520px;
		height: 40px;
	}

	#vgPres{
		position: relative;
		top: 106px;
		left: 80px;
	}

	#vdPres{
		position: relative;
		top: -97px;
		left: 550px;
		height: 40px;
	}

	#vgSal{
		position: relative;
		top: 78px;
    	left: 80px;
	}

	#vdSal{
		position: relative;
		top: -97px;
		left: 520px;
	}

	#vgSand{
		position: relative;
		top: 76px;
		left: 30px;
	}

	#vdSand{
		position: relative;
		top: -97px;
		left: 570px;
	}

	#vgPates{
		position: relative;
		top: 76px;
		left: -10px;
	}

	#vdPates{
		position: relative;
		top: -97px;
		left: 610px;
	}

	#vgGri{
		position: relative;
		top: 76px;
		left: 20px;
	}

	#vdGri{
		position: relative;
		top: -97px;
		left: 580px;
	}

	#vgEnf{
		position: relative;
		top: 76px;
		left: 20px;
	}

	#vdEnf{
		position: relative;
		top: -97px;
		left: 580px;
	}

	#vgDes{
		position: relative;
		top: 76px;
		left: 70px;
	}

	#vdDes{
		position: relative;
		top: -97px;
		left: 530px;
	}

	#vgBoi{
		position: relative;
		top: 76px;
		left: 70px;
	}

	#vdBoi{
		position: relative;
		top: -97px;
		left: 530px;
	}

	.contact hr{
		display: none;
	}

	.telMail{
		margin-top: 220px;
	}

	.index, .menu, .contact{
		background-image: url('../images/background.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#header{
		height: 120px;
	}

	.navbar a img{
		position: absolute;
		top: 20px;
		width: 280px;
		left: 60px;
	}

	#navbarSupportedContent{
		position: absolute;
		right: 0;
		top: 60px;
	}

	.tel{
		top: 42px;
		right: 18px;
		font-size: 14px;
	}

	#navbarSupportedContent li{
		padding-left: 8px;
		padding-right: 8px;
	}

	#navbarSupportedContent a{

		padding-bottom: 0px;
		transition: 0.3s all;
		border-bottom: 3px solid transparent;
	}

	#navbarSupportedContent a:hover{
		border-bottom: 3px solid #dd3937;
	}

	#background > div > div:nth-child(1) > div:nth-child(1) > img{
		left: 90px;
	}

	#background > div > div:nth-child(1) > div:nth-child(2) > img{
		left: 290px;
	}

	#sousMenu a{
		padding-bottom: 0px;
		transition: 0.3s all;
		border-bottom: 3px solid transparent;
	}

	#sousMenu a:hover{
		border-bottom: 3px solid #dd3937;
	}

	#sousMenu{
		margin-right: 24px;
	}

	#vgPiz{
		left: 260px;
	}

	#vdPiz{
		left: 630px;
	}

	#vgPres{
		left: 200px;
	}

	#vdPres{
		left: 670px;
	}

	#vgSal{
    	left: 200px;
	}

	#vdSal{
		left: 640px;
	}

	#vgSand{
		left: 150px;
	}

	#vdSand{
		left: 690px;
	}

	#vgPates{
		left: 110px;
	}

	#vdPates{
		left: 730px;
	}

	#vgGri{
		left: 140px;
	}

	#vdGri{
		left: 700px;
	}

	#vgEnf{
		left: 140px;
	}

	#vdEnf{
		left: 700px;
	}

	#vgDes{
		left: 180px;
	}

	#vdDes{
		left: 650px;
	}

	#vgBoi{
		left: 180px;
	}

	#vdBoi{
		left: 650px;
	}

	.index hr{
		width: 60%;
	}

	#fusee{
		display: block;
		width: 150px;
		position: absolute;
		top: 260px;
		left: calc(50% - 75px);
	}

	.menu > div > div:nth-child(1) > h2{ margin-bottom: 30px;}

	.menu > div > div:nth-child(1) > div:nth-child(5), #prestiges > div > div:nth-child(1) > div:nth-child(4){
		margin-left: -100px;
	}

	.livraison, .emporter, .imgLivraison, .imgEmporter{
		display: inline-block;
		margin: 0px;
	}

	.emporter{ width: 100px; text-align: right; line-height: 22px; margin-top: 4px;}

	.imgLivraison{
		margin-top: -10px;
	}

	.imgEmporter{
		margin-top: -38px;
	}

	#background > div > div:nth-child(1) > div:nth-child(5),
	#prestiges > div > div:nth-child(1) > div:nth-child(4){ text-align: right;}

	/* .pageLivraison{
		height: 672px;
	} */

	#carte{
		max-width: 500px;
		top: 300px;
	}

	.pageLivraison fieldset{
		/*position: relative;*/
		left: -280px;
		top: 100px;
	}

	.contact .row{
		margin-top: 100px;
	}

	.telMail p{
		font-size: 18px;
	}

	.telMail a{
		font-size: 24px;
	}

	footer li{
		display: inline-block;
	}

	footer a{
		position: relative;
		margin: 0px 4px 0px 4px;
	}

	footer li:not(:last-child) a:after{
		position: absolute;
	    content: "";
	    background-color: black;
	    height: 14px;
	    width: 1px;
	    right: -7px;
	    top: 3px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#background > div > div:nth-child(1) > div:nth-child(1) > img{
		left: 140px;
	}

	#background > div > div:nth-child(1) > div:nth-child(2) > img{
		left: 330px;
	}

	#vgPiz{
		left: 350px;
	}

	#vdPiz{
		left: 720px;
	}

	#vgPres{
		left: 290px;
	}

	#vdPres{
		left: 760px;
	}

	#vgSal{
    	left: 290px;
	}

	#vdSal{
		left: 730px;
	}

	#vgSand{
		left: 240px;
	}

	#vdSand{
		left: 780px;
	}

	#vgPates{
		left: 200px;
	}

	#vdPates{

		left: 820px;
	}

	#vgGri{
		left: 230px;
	}

	#vdGri{
		left: 790px;
	}

	#vgEnf{
		left: 230px;
	}

	#vdEnf{
		left: 790px;
	}

	#vgDes{
		left: 270px;
	}

	#vdDes{
		left: 740px;
	}

	#vgBoi{
		left: 270px;
	}

	#vdBoi{
		left: 740px;
	}

	/* .pageLivraison{
		height: 867px;
	} */

	#carte{
		max-width: 800px;
		top: 200px;
	}

	#enfants > div > div > div:nth-child(1) > p{
		text-align: left;
		margin-top: 20px;
	}

	#enfants .bebasBold{
		font-size: 22px;
	}

	#enfants > div > div > div:nth-child(3) > p > span:nth-child(1){
		font-size: 36px;
		line-height: 20px;
	}

	.offert{
		font-size: 58px;
		position: relative;
		top: -20px;
	}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1700px) {
	#imgSalade{
		display: block;
		position: absolute;
		top: 2550px;
		right: 0px;
	}

	#imgPates{
		display: block;
		position: absolute;
		left: 0;
		top: 3550px;
	}

	#pizzaGauche, #pizzaDroite{
		display: block;
	}

	#pizzaGauche{
		position: absolute;
		left: 0;
		top: 690px;
	}

	#pizzaDroite{
		position: absolute;
		right: 0;
		top: 300px;
	}
}