/* Google fonts link */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,400;0,500;0,800;0,900;1,100;1,200;1,700&display=swap');

body {
	font-family: 'Raleway', sans-serif;
	font-size: 1.25em;
	font-weight: 400;
	color: #272722;
	background-color: #fff;
}

/* Styling anchor element */
a {
	color: inherit;
	text-decoration: underline 1px solid #ff9f76;
}

a:hover {
	color: #ff4500 ;
	text-decoration: underline;
	text-decoration-color: #ff9f76;
}

/* Customising Bootstrap Navbar */
.navbar {
	color: #ff9f76;
	background-color: #333;
}

.navbar a {
	color: #ff9f76;
	font-weight: 500;
	text-decoration: none;
}

.navbar a:focus {
	color: #272722;
	background-color: #ff9f76;
}

.navbar-toggler {
	background-color: #ff9f76;
	font-size: medium;
}

.navbar-nav {
	margin: 0 auto;
	text-align: center;
}

.navbar-nav li {
	display: inline-block;
}

.navbar-nav li:hover {
	background-color: #ff9f76;
}

/* Styling Call-To-Action button used in the Carousel caption, "timetable" and "learn" sections. */
.button-cta {
	position: relative;
	top: 50%;
	font-size: 1.5em;
	font-weight: 900;
	text-align: center;
	color: #272722;
	background-color: #ff9f76;
	border: 1px solid #ff9f76;
	margin: 10px 10px;
	padding: 10px 10px;
}

.button-cta:hover {
	background-color: #FFD9EA;
	border: 1px solid #ff9f76; 
}

/* Styling basic elements and adding classes to position site elements */
label {
	padding: 0.25em;
}

.logo img {
	margin: 0 20px;
}

/* 3 ID's for carousel cover images and it's caption */
#cover-photo1 {
	height: 100vh;
	background: url(../../assets/img/cover1.webp) center / cover;
}

#cover-photo2 {
	height: 100vh;
	background: url(../../assets/img/cover2.webp) center / cover;
}

#cover-photo3 {
	height: 100vh;
	background: url(../../assets/img/cover3.webp) center / cover;
}

.caption {
	width: 100vw;
	height: 100vh;
	color: #ffffff;
	text-align: center;
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
}

.caption h1 {
	position: relative;
	top: 50%;
	font-size: 5em;
	font-weight: 900;
}

.caption p {
	position: relative;
	top: 50%;
	color: #ffffff;
	font-size: 2em;
	font-weight: 700;
}

/* Styling containers, removing margins - to override margins for bootstrap containers*/
.container-fluid {
	padding: 0;
}

.pink {
	background-color: #FFE9F3;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.justify {
	text-align: justify;
}

#learn .container {
	border-radius: 2%;
	box-shadow: 10px 10px 5px #D0D2D6;
	padding: 0 50px;
}

.accordion-header button {
	color: #272722;
	background-color: #FFE9F3;
	font-weight: 500;
	width: 100%;
}

.accordion-item {
	background-color: #FFE9F3;
}

.accordion-body {
	background: #FFE9F3;
	color: #333;
	text-align: left;
	margin: 20px;
}

/* Stylink "thankyou" and "404" pages */
.thankyou-caption {
	width: 100vw;
	height: 100vh;
	text-align: center;
	background: url(../../assets/img/thankyou.webp) center / cover;
}

.error-caption {
	width: 100vw;
	height: 100vh;
	text-align: center;
	background: url(../../assets/img/notfound.webp) center / cover;
}

.thankyou-caption h1 {
	position: relative;
	top: 20%;
	font-size: 2em;
	font-weight: 900;
	background-color: #ff9f76;
}

.thankyou-caption p {
	position: relative;
	top: 20%;
	margin: auto;
	color: #ff9f76;
	background-color: #333;
	font-size: 1em;
	font-weight: 700;
}

.error-caption h1 {
	position: relative;
	top: 20%;
	font-size: 2em;
	font-weight: 900;
	background-color: #ff9f76;
}

.error-caption p {
	position: relative;
	top: 20%;
	margin: auto;
	color: #ff9f76;
	background-color: #333;
	font-size: 1em;
	font-weight: 700;
}


/* Table from Class Timetable section */
table {
	margin: auto;
	text-align: center;
	padding: 5px;
	border: 1px solid #fff;
}

.hours {
	font-weight: 600;
}

th {
	border-bottom: 2px solid #FFD9EA;
}

/* Styling Booking section elements */
.booking {
	margin: 1em auto 1em auto;
	width: 40%;
	padding: 1em;
	background-color: #FFE9F3;
	border-radius: 1em;
	box-shadow: 10px 10px 5px #D0D2D6;
}

.booking input:hover {
	border: 1px solid #ff9f76;
}

.submit {
	width: 100%;
	color: #272722;
	background-color: #fff;
	border: 1px solid #ff9f76;
	border-radius: 0.5em;
	padding: 5px;
}

.submit:hover {
	background-color: #ff9f76;
	color: #272722;
}

/* Styling Instructors section */
.instructors {
	width: 100%;
}

.instructors img {
	width: 250px;
	height: 250px;
	border-radius: 125px;
}

.instructors img:hover {
	opacity: 0.8;
}

/* Styling Gallery section and image grid based on "Responsive Image Grid" tutorial from w3schools.com */
.gallery-row {
	background-color: #fff;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	width: 100%;
	margin: auto;
	text-align: center;
}

.gallery-column {
	flex: 25%;
	max-width: 20%;
	padding: 0;
}

.gallery-column img {
	margin-top: 0px;
	vertical-align: middle;
	width: 100%;
}

.gallery-row img:hover {
	opacity: 0.8;
}

/* Styling Quote Section */
.quote {
	font-size: x-large;
	font-style: italic;
	font-weight: 500;
	text-align: left;
	margin: 20px;
}

/* Styling iframe element for Google Map */
iframe {
	width: 100%;
	height: 15em;
	display: block;
}

/* Styling YouTube embeded video */
.youtube {
	height: 30em;
	display: block;
}

/* Styling Footer section / social media icons / Font-Awesome icons */
.footer {
	color: #7A6D5B;
}

.icons-header {
	font-size: 0.75em;
	padding: 0 0.25em;
}

.icons-social {
	font-size: 1.5em;
}

.icons-social i {
	font-size: 1.5em;
	padding: 5px;
}

.icons-social i:hover {
	color: #ff9f76;
}

.icons-reasons {
	color: #ff9f76;
}

.copyright {
	text-align: center;
	font-size: medium;
	padding: 0;
	margin: 0;
}

.footer a {
	text-decoration: none;
}

.footer a:hover {
	color: orangered;
	text-decoration: underline;
}

/* Media queries - responsiveness */

/* X-small devices, phones in portrait mode 576px*/
@media (max-width: 575.98px) {

	body {
		font-size: 1em;
	}

	p {
		padding: 10px;
		text-align: left;
	}

	.container-fluid,
	.container {
		width: 100%;
		margin: 0;
		padding: 0px;
	}

	.accordion-item p {
		text-align: left;
	}

	.booking {
		margin: auto;
		width: 100%;
		background-color: #FFE9F3;
		border-radius: 1em;
		box-shadow: none;
	}

	.row {
		width: 100%;
	}

	.col {
		display: block;
		width: 100%;
	}

	#learn .container {
		border-radius: 0;
		box-shadow: none;
		padding: 0px;
	}

	#cover-photo1 {
		height: 50vh;
		background: url(../../assets/img/cover1_mobile.webp) center / cover;
	}

	#cover-photo2 {
		height: 50vh;
		background: url(../../assets/img/cover2_mobile.webp) center / cover;
	}

	#cover-photo3 {
		height: 50vh;
		background: url(../../assets/img/cover3_mobile.webp) center / cover;
	}

	.caption {
		width: 100vw;
		height: 50vh;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
	}

	.caption h1 {
		top: 30%;
		text-align: center;
		font-size: 2em;
		font-weight: 600;
	}

	.button-cta {
		position: relative;
		top: 70%;
		font-size: 1em;
	}

	.caption button,
	.caption p {
		display: none;
	}

	.thankyou-caption h1 {
		font-size: 2em;
	}

	.thankyou-caption p {
		font-size: 1em;
	}

	#gallery img,
	#instructors img,
	#learn img {
		max-width: 100vw;
		height: auto;
	}

	.footer div,
	p {
		display: block;
		text-align: center;
	}

	.gallery-row {
		width: 100%;
	}

	.gallery-column {
		-ms-flex: 50%;
		flex: 50%;
		max-width: 50%;
	}
}

/* Gallery images are "viewport width" up to 600px */
@media screen and (max-width: 600px) {

	.gallery-row {
		width: 100%;
	}

	.gallery-column {
		-ms-flex: 100%;
		flex: 100%;
		max-width: 100%;
	}

	#gallery img {
		width: 100%;
	}
}

/* Tablets, up to 768px */
@media only screen and (min-width: 576px) and (max-width: 767.98px) {

	body {
		font-size: 1em;
	}

	p {
		padding: 10px;
		text-align: left;
	}

	.thankyou-caption h1 {
		font-size: 2em;
	}

	.thankyou-caption p {
		font-size: 1em;
	}

	.accordion-item p {
		text-align: left;
	}

	.booking {
		margin: auto;
		width: 100%;
		background-color: #FFE9F3;
		border-radius: 1em;
		box-shadow: none;
	}

	.timetable,
	.row {
		width: 100%;
	}

	.col {
		display: block;
		width: 100%;
	}

/* Smaller carousel cover images for mobile use*/ 
	#cover-photo1 {
		height: 60vh;
		background: url(../../assets/img/cover1_mobile.webp) center / cover;
	}

	#cover-photo2 {
		height: 60vh;
		background: url(../../assets/img/cover2_mobile.webp) center / cover;
	}

	#cover-photo3 {
		height: 60vh;
		background: url(../../assets/img/cover3_mobile.webp) center / cover;
	}

	.caption {
		width: 100vw;
		height: 60vh;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
	}

	.caption h1 {
		top: 40%;
		text-align: center;
		font-size: 2em;
		font-weight: 600;
	}

	.caption button {
		display: none;
	}

	.caption p {
		font-size: 1.5em;
	}

	.footer div,
	p {
		display: block;
		text-align: center;
	}
}


/* Medium devices (tablets, bigger than 768 px but less than 992px) */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {

	p {
		padding: 10px;
		text-align: left;
	}

	.thankyou-caption h1 {
		font-size: 2em;
	}

	.thankyou-caption p {
		font-size: 1em;
	}

	.accordion-item p {
		text-align: left;
	}

	.row {
		width: 100%;
	}

	.booking {
		margin: 1em auto 1em auto;
		width: 100%;
		padding: 1em;
		background-color: #FFE9F3;
		border-radius: 1em;
		box-shadow: 10px 10px 5px #D0D2D6;
	}

/* smaller carousel cover images for mobile use */
	#cover-photo1 {
		height: 60vh;
		background: url(../../assets/img/cover1_mobile.webp) center / cover;
	}

	#cover-photo2 {
		height: 60vh;
		background: url(../../assets/img/cover2_mobile.webp) center / cover;
	}

	#cover-photo3 {
		height: 60vh;
		background: url(../../assets/img/cover3_mobile.webp) center / cover;
	}

	.caption {
		width: 100vw;
		height: 60vh;
		color: #ffffff;
		text-align: center;
		background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
	}

	.caption h1 {
		top: 40%;
		text-align: center;
		font-size: 2em;
		font-weight: 600;
	}

	.caption p {
		font-size: 1em;
	}

	#carousel button {
		top: 60%;
	}

	.footer div,
	p {
		display: block;
		text-align: center;
	}
}

/* Large devices (laptops, desktops, less than 1200px) */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {

	.caption {
		width: 100vw;
		height: 100vh;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
	}

	.caption h1 {
		top: 40%;
		text-align: center;
		font-size: 2.5em;
		font-weight: 600;
	}

	.caption p {
		font-size: 1.5em;
	}

	.caption button {
		position: relative;
		top: 70%;
	}
}