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

.yellow{
	color: #fff206;
}


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



/*
 #    # ###### #    # #    #
 ##  ## #      ##   # #    #
 # ## # #####  # #  # #    #
 #    # #      #  # # #    #
 #    # #      #   ## #    #
 #    # ###### #    #  ####
*/
nav{
	background-color: #090e35;
}

nav div{
	width: 100%;
}

nav .row{
	width: 300px;
    margin: auto;
}


nav a img{
	width: 220px;
}

nav button{
	height: 50px;
	margin-top: 14px;
}



nav li:last-child{
	background-color: #fff206;
}

.navbar-light .navbar-nav .nav-link{
	color: white;
}

.navbar-toggler{
	background-color: #f8f9fa;
	margin-top: 4px;
}

#navbarSupportedContent > ul > li:nth-child(5) a{
	color: #090e35;
}

#navbarSupportedContent > ul > li:nth-child(5) a:hover{
	color: #00b7ee;
}

nav li a{
	text-transform: uppercase;
	font-size: 18px;
	text-align: center;
	transition: 0.3s all;
}

nav li a:hover{
	font-weight: 700;
	
}

.navbar-light .navbar-nav .nav-link:hover{
	color: #00b7ee;
}

#navbarSupportedContent > ul > li.nav-item.active > a{
	color: #00b7ee;
	font-weight: 700;
}

#navbarSupportedContent > ul > li.nav-item:last-child.active > a{
	color: #00b7ee;
}

/*
  ####   ####  #    # ##### ###### #    # #    #
 #    # #    # ##   #   #   #      ##   # #    #
 #      #    # # #  #   #   #####  # #  # #    #
 #      #    # #  # #   #   #      #  # # #    #
 #    # #    # #   ##   #   #      #   ## #    #
  ####   ####  #    #   #   ###### #    #  ####
*/
.panel{
	background-color: #090e35;
	width: 280px;
	margin:auto;
}

.panel p{
	color: white;
	padding: 12px 14px 12px 14px;
}

h1{
	color: #00b7ee;
}

.accueil h1 span{
	position: relative;
	top: -20px;
	color: black;
	font-size: 28px;
}

.accueil .velos img{
	width: 290px;
	display: block;
	margin: auto;
	text-align: center;
}

.velos{
	margin-top: 40px;
	margin-bottom: 40px;
}

.boutonJaune{
	background-color: #fff206;
	color: #00b7ee;
	display: block;
	font-size: 12px;
	width: 276px;
	margin: auto;
	padding: 14px 14px 14px 14px;
	text-transform: uppercase;
	font-weight: 700;
}

table{
	margin-top: 60px;
}

table tr{
	height: 73px;
}

.contact iframe{
	margin: auto;
	margin-top: 50px;
}

#titreLocation{
	width: 100%;
	text-align: center;
	margin-top: 60px;
}

.velos h2{
	text-decoration: underline;
}

.card{
	margin-bottom: 20px;
}

.tarifs h1{
	text-align: center;
	margin-top: 60px;
}

.reparation h1{
	text-align: center;
	margin-top: 60px;
}
.reparation p{
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}

.reparation img{
	border-radius: 6px;
	width: 100%;
	margin-bottom: 30px;
}

.contact{
	text-align: center;
	margin-top: 60px;
}

#mentions{
	margin-top: 60px;
}

#mentions h1{
	text-align: center;
	margin-bottom: 40px;
}

/*
 ######  ####   ####  ##### ###### #####
 #      #    # #    #   #   #      #    #
 #####  #    # #    #   #   #####  #    #
 #      #    # #    #   #   #      #####
 #      #    # #    #   #   #      #   #
 #       ####   ####    #   ###### #    #
*/
footer{
	margin-top: 50px;
	background-color: #090e35;
	padding-top: 30px;
}
footer img{
	width: 200px;
	display: block;
	margin: auto;
	text-align: center;
	margin-bottom: -20px;
	height: 60px;
}

footer .row div:first-of-type{
	margin-top: 30px;
}

footer p:not(.yellow), footer a{
	color: white;
}

footer a:hover{
	text-decoration: none;
	color: white;
}
/*
 #####  ######  ####  #####   ####  #    #  ####  # #    # ######
 #    # #      #      #    # #    # ##   # #      # #    # #
 #    # #####   ####  #    # #    # # #  #  ####  # #    # #####
 #####  #           # #####  #    # #  # #      # # #    # #
 #   #  #      #    # #      #    # #   ## #    # #  #  #  #
 #    # ######  ####  #       ####  #    #  ####  #   ##   ######
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.panel{
		width: 510px;
		margin: auto;
		position: relative;
		top: -20px;
	}

	.panel p{
		font-size: 22px;
	}

	.boutonJaune{
		font-size: 18px;
		width: 396px;
	}

	footer .text-right{
		margin-top: 100px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

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

	nav{
		width: 100%;
		margin:auto;
	}
	nav a img{
		margin-top: 20px;
	}

	nav ul{
		margin-top: -18px;
	}

	nav li{
		padding: 20px 2px 8px 2px;
	}

	nav li:last-child{
		padding-bottom: 23px;
		padding-top: 23px;
	}

	nav li a{
		width: 146px;
		font-size: 16px;
	}

	nav .row{
		width: 80%;
	}

	body > nav > div > div > a{
		margin-left: -100px;
		z-index: 2;
	}
	#navbarSupportedContent{
		margin-left: 100px;
		margin-top: -60px;
	}



	/*body > nav > div > div > div.centrer > a{
		position: absolute;
		top: 70px;
		left: 20px;
		z-index: 2;
	}*/

	body > nav > div > div > div.centrer > a img{
		width: 240px;
	}
			

	/*#navbarSupportedContent{
		position: absolute;
	    top: 16px;
	    left: 240px;
	    width: 750px;
	}*/

	/*#navbarSupportedContent > ul > li.nav-item.active > a{
		margin-top: 15px;
	}*/
	#navbarSupportedContent > ul > li.nav-item:first-of-type > a{
		margin-top: 15px;
	}

	.panel{
		width: 700px;
	}

	.panel p{
		font-size: 30px;
	}

	footer
	{
		height: 200px;
	}

	footer img{
		position: relative;
		left: -360px;
		top: 30px;
	}

	footer .row div:first-of-type{
		position: relative;
		top: 0px;
		left: 120px;
	}

	footer .row div:last-child{
		position: relative;
		top: -90px;
	}

	footer .row div{
		height: 100px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	body > nav > div > div > a{
		margin-left: -150px;
		margin-top: 44px;
		z-index: 2;
	}

	body > nav > div > div > a > img{
		width: 320px;
	}
	#navbarSupportedContent{
		margin-left: 180px;
		margin-top: -77px;
	}

	nav a img{
		margin-top: -40px;
	}

	nav ul{
		margin-top: -12px;
	}

	nav li{
		padding: 20px 12px 8px 12px;
	}

	.panel{
		width: 1015px;
	}

	.panel p{
		font-size: 38px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.goodBikes{
		padding-left: 15px;
		padding-right: 15px;
		width: 1000px;
		margin: auto;
	}

	.velos{
		width: 1000px;
		margin: auto;
		margin-top: 50px;
		margin-bottom: 50px;
	}

	footer img{
		left: -450px;
	}
}