@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

:root {
	--height-nav: 5rem;
}

main {
/*	margin-top: calc(var(--height-nav) * 1);*/
}
a {
	text-decoration: none;
	color:#777;
}
a:hover{
	color: #e3a73f;
}
body {
	font: 400 1.5rem Lato, sans-serif;
	color: #777;
}

h3,
h4 {
	margin: 10px 0 30px 0;
	letter-spacing: 10px;
	color: #111;
}
.text-yellow {
	color: #e3a73f;
}

/* Balise HR */
.divider {
	width: 70%;
	margin: auto;
}

/* NAVBAR SECTION */
.navbar {
	font-family: Montserrat, sans-serif;
	margin-bottom: 0;
	background-color: #2d2d30;
	border: 0;
	font-size: 1.2rem;
	letter-spacing: 4px;
	opacity: 0.9;
	height: 7rem;
}

.toggle-salamandre {
	background-color: #e3a73f;
	font-size: 3rem;
}

.navbar-brand {
	font-family: 'Dancing Script', cursive;
	font-size: 3rem;
}
.navbar-nav {
	float: right;
}

.navbar li a,
.navbar .navbar-brand {
	color: #e3a73f !important;
}

.navbar-nav li a:hover {
	color: #fff !important;
}

.navbar-nav li.active a {
	color: #fff !important;
	background-color: #29292c !important;
}

.navbar-default .navbar-toggle {
	border-color: transparent;
}


/* TOP SECTION */

.container-img-full {
	width: 100%;
	/*height: calc(100vh - 6rem);*/
}

.container-img-full>img {
	width: 100%;
	position: relative;
}
.bg-black {
	background: #2d2d30;
	color: #bdbdbd;
}

.bg-black h3 {
	color: #e3a73f;
}

.bg-black p {
	font-style: italic;
}
.medium-container {
	width: 59%;
	margin: auto;
	padding-bottom: 3rem;
}


/* CONCERTS */
.container-concert {
	height: 45vh;
	overflow: auto;
}
.column-concert {
	width: 33%;
	text-align: center;
	margin: auto;
	padding: 0.125rem;
}


.list-group-item:first-child {
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.list-group-item:last-child {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.list-group-item {
	display: flex;
	justify-content: space-around;
}

.list-group {
	margin-top: 1rem;
	padding: 2%;
}
.btn {
	padding: 10px 20px;
	background-color: #333;
	color: #f1f1f1;
	border-radius: 0;
	transition: 1.25s;
}

.btn:hover,
.btn:focus {
	border: 1px solid #333;
	background-color: #fff;
	color: #000;
}

/* MEDIA */

.container-music {
	display: flex;
	place-content: space-around;
	flex-direction: column;
}
#media {
	display: flex;
	justify-content: space-around;
}

.container-player {
	display: flex;
}

/*   BAND PRESENTATION   */
em {
	font-size: 1.7rem;
}
.container-band {
	width: 70%;
	margin: auto;
}
.container-text-band {
	margin-bottom: 5.5rem;
}
.row-second-band {
	display: flex;
	justify-content: center;
}

.card-text-band {
	border-radius: 2%;
	background-color: #2d2d30;
	color: #fff;
	margin: auto 0 3em;
	opacity: 0.9;
	justify-content: center;
	display: flex;
	height: 42vh;
	z-index: -1;
}
.person {
	border: 4px solid transparent;
	margin-bottom: -16%;
	width: 200px;
	height: 200px;
	opacity: 1;
	border-radius: 100%;
	object-fit: cover;
	border-color: #e3a73f;
	z-index: 1;
}
/*   CONTACT SECTION   */

.contact-container {
	width: 70%;
}
.info-contact {
	display: flex;
	margin: auto;
	padding: 1rem;
}
.info-contact > i {
	font-size: 2rem;
	width: 50px;
}
textarea {
	resize: none;
}
.form-control {
	border-radius: 0;
}

/*   FOOTER   */

footer {
	background-color: #2d2d30;
	color: #e3a73f;
	padding: 32px;
}

footer a {
	color: #FFFF;
}

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


/*   MEDIA QUERIES   */
/* Container concerts */
@media screen and (max-width: 1300px) {
.medium-container {
	width: 90%;
	padding-bottom: 2rem;
}
.contact-container {
	width: 100%;
}
} 
@media screen and (max-width:1080px){
.container-fluid{
	padding: 0;
}
}
@media screen and (max-width:990px) {
	.nav-item {
		width: 100vw;
		margin-top: 6px;
	}
	.navbar-nav {
		background-color: #2d2d30;
	}
	.nav-link {
		width: 100vw;
		background-color: #2d2d30;
		text-align: center;
	}
	.list-group {
		min-width: 90%;
	}
	.medium-container {
		width: 100%;
		padding-bottom: 2rem;
	}
	.contact-container {
		min-width: 100%;
	}
}
@media screen and (max-width:768px) {
	body {
		font-size: 2rem
	}
	.medium-container {
		width: 100%;
		padding-bottom: 2rem;
	}
	.navbar-toggle {
		font-size: 2.25rem;
	}
}

/* contact form  */

@media screen and (max-width:572px) {
	body {
		font-size: 2.5rem
	}
	.form-control {
		margin-top: 0.225rem;
	}
	.container {
		width: 100%;
	}
	.person {
		margin-bottom: -10%;
	}
	.info-contact  {
		font-size: 1.1rem;
	}
}
@media screen and (min-width:100px) and (max-width: 500px){
	body {
		font-size: 1rem
	}
	.navbar {
		height: 3rem;
	}
	.navbar-brand {
		font-size: 1rem;
	}
	.toggle-salamandre {
		font-size: 1rem;
	}
	.container-img-full > img {
		padding-top: 3rem;
	}
	.small-title {
		margin-bottom: 1rem
	}
	.button-envoyez {
		display: flex;
		justify-content: center;
		margin: auto;
	}
}

@media screen and (min-width:100px) and (max-width: 1060px){
	.container-navbar{
		font-size: 1rem;
	}
}