@import url('https://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700|Prompt:100,200,300,400,500,600,700');

@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');

* {
    padding: 0;
    border: 0;
    margin: 0;
    border-color: #33373a;
}

body {
    font-family: 'Exo', sans-serif;
}

h1 {
    background-color: rgba(19, 18, 18, 0.8);
    color: #fafafa;
    text-align: center;
    padding-top: 1px;
    display: inline-block;
}

header {
    height: 40em;
    width: 100%;
}

div {
    margin: 0px;
}

footer {
    padding-left: 2%;
    padding-top: 2em;
    padding-bottom: 2%;
    background-color: chocolate;
    margin: 0px; 
}

footer h5 {
    font-size: 80%;
    font-family: 'Play';
    color: #fafafa;
}

/*---------------------------------------------------------------------- Nav Bar Section ---------*/

#home-icon {
    font-family: 'Exo';
    color: #686464;
    margin-left: 10px;
    display: inline;
}

#home-icon:hover {
    text-decoration: none;
    color: #0a0a0a;
}

.nav-right {
    display: inline-block;
}

.nav-column {
    display: block;
}

.navbar {
    position: fixed;
    width: 100%;
    z-index: 10;
}

.fa-home {
    font-size: 1.5em;
}

/*------------------------------------------------------------- / End of Nav Bar Section ---------*/

/*----------------------------------------------------------Home Page Hero Image Section ---------*/

#hero-div {
    height: 35em;
    width: 100%;
}

#hero-image {
    display: block;
    text-align: center;
    height: 35em;
    width: 100%;
    background: url("../img/boxing-ring-hero-image.jpg") no-repeat center center;
    background-size: cover;
}

#contact-page-hero-image {
    display: block;
    text-align: center;
    height: 35em;
    width: 100%;
    background: url("../img/black-boxing-gloves-photo.jpg") no-repeat center center;
    background-size: cover;
}

#gym-page-hero-image {
    display: block;
    text-align: center;
    height: 35em;
    width: 100%;
    background: url("../img/gym-photo.jpg") no-repeat center center;
    background-size: cover;
}

#gym-page-hero-image h1 {
    background-color: rgba(19, 18, 18, 0.9);
    color: #fafafa;
    text-align: center;
    padding: 1%;
    display: inline-block;
}

#hero-image p {
    color: #fafafa;
    text-align: center;
    background-color: #0e0d0d99;
    display: inline-block;
    padding-left: 10px;    
    padding-right: 10px;
}

#sign-up-button {
    font-size: 1.2em;
    border-radius: 5px;
    padding: 10px 20px;
    color: #fafafa;
    background-color: rgb(46, 141, 46);
    text-decoration: none;
}

#sign-up-button-wrapper {
    margin-top: 10px;
}

.spacer {
    height: 300px;
    width:  100%;
}

/* #hero-button {
    display: inline-block;
} */

/*--------------------------------------------------- / End of Home Page Hero Image Section ---------*/

#intro-section {
    padding: 5%;
    font-size: 2em;
    color: #fafafa;
    background-color: chocolate;
    text-align: center;
    font-family: 'Play', sans-serif;
    margin-bottom: 0;
}

#main-content {
    display: block;
}

/*--------------------------------------------------------------- Home Page 'Classes' Section ---------*/ 

#adults-boxing-image {
    height: 20em;
    width: 100%;
    background: url("../img/two-men-sparring.jpg") no-repeat center center;
    background-size: cover;
}

#child-boxing-image {
    height: 20em;
    width: 100%;
    background: url("../img/young-girl-in-boxing-stance.jpg") no-repeat center center;
    background-size: cover;
}

#fitness-session-image {
    height: 20em;
    width: 100%;
    background: url("../img/fitness-session-image.jpg") no-repeat center center;
    background-size: cover;
}

.session-box {
    margin-top: 20px;
}

.session-box h3 {
    padding-top: 3%;
}

.class-times h3, .class-times h4 {
    text-align: center;    
}

.booking-details-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
}

.booking-details-box a {
    text-transform: uppercase;
    font-size: larger;
}

.booking-details-button {
    padding: 20px;
    border-width: 3px;
    border-style: solid;
}

/*----------------------------------------------------------- / End of Home Page 'Classes' Section -------*/


/*-----Contact Page Styling Section --------*/

/*------------------------------------------------------- Booking Form Section - Contact Us Page ---------*/

.book-session {
    font-size: 0.8em;
    color: #fafafa;
    background-color: chocolate;
    display: inline-block;
    padding: 3em;    
    width: 100%;
}

.book-session h2 {
    font-size: 1.5em;
    margin-bottom: 1em;
}

.fa-dumbbell {
    padding-left: 2%;
}

.text-input {
    padding-left: 0.5em;
    width: 100%;
    height: 2em;
    margin-bottom: 1em;
    border-width: 1px;  
    border-style: solid; 
    border-radius: 2px;
}

.text-input:hover {
    background: #dad8d8;
}

.submit-training-button {
    margin-top: 3em;
    border-radius: 8px;
    padding: 15px 32px;
    text-align: center;
    font-size: 1.5em;
    background: rgb(46, 141, 46);
    color: #fafafa;
    display: block;
    border-style: solid;
    border-width: 2px;
    border-color: #555555;
}

.submit-training-button:hover {
    border-color: #180808;
}

/*-----------------------------------------/ End of Booking Form Section - Contact Us Page ---------*/

/*----------- Radio Button Styling - Contact Us Page - Provided by the Markheath.net website (https://markheath.net/post/customize-radio-button-css)---------*/ 

.book-session input[name="session-choice"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.book-session label[class="radio-label-training"] {
    display: inline-block;
    background-color: rgb(54, 52, 52);
    padding: 5px 10px;
    font-family: 'Exo', sans-serif, Arial;
    font-size: 1em;
    border: 2px solid #444;
    border-radius: 4px;
}

.book-session input[name="session-choice"]:checked + label {
    background-color:#bfb;
    border-color: #4c4;
    color: black;
}

.book-session input[name="session-choice"]:focus + label {
    border: 2px solid #444;
}

.book-session p {
    font-size: 1.1em;
}
/*--------------------------------------------------------------------------------------------------- / End of Radio Button Styling - Contact Us page --------*/ 

/*----------------------------------------------- 'Contact Us box' styling - Contact Us page ---------*/ 

#contact-us p {
    margin: 0;
}

#contact-us h3 {
    padding-top: 1.6em;
    text-transform: uppercase;
}

#contact-us row {
    display: block;
}

#address {
    padding-top: 1em;
}

.days-of-week, .opening-times {
    display: inline-block;
    font-size: 100%;
}

.days-of-week {
    width: 7em;
}

#contact-text-block {
    text-align: center;
    padding-top: 0%;
}

#contact-text-block span {
    text-align: center;
    padding-top: 0%;
}

.days-and-times {
    padding-right: 4%;
}

/*--------------------------------------- / End of 'Contact Us box' styling - Contact Us page ---------*/

#map {
    height: 395px;
}


/*------ / End of Contact Page Styling Section --------*/ 

.col, .col-md-6 {
    padding-left: 0px;
    padding-right: 0px;
}

/*---------------------------------------------------------------------- Footer Styling Section --------*/ 

.social-media li {
    display: inline;
    color: #fafafa;  
}

.social-media i {
    font-size: 120%;
    color: #fafafa;
    padding-right: 2%;   
    padding-top: 0.5%; 
}

.footer-links {
    color: #fafafa;
    text-decoration: none;
}

.footer-links:hover {
    color: #aaabb4;
    text-decoration: none;
}

.fab:hover {
    color: #aaabb4;
}

/*------------------------------------------------------------- / End of Footer Styling Section --------*/

#gym-body {
    background: #0a0a0a;
}

/*------------------------------------------------------------------- Responsive Sizing Section --------*/

@media screen and (max-width: 900px) {
.class-times h4 {
    font-size: 1.1em;}
}

@media screen and (max-width: 768px) {
.session-box h3 {
    padding-top: 9%;}
}

@media screen and (max-width: 767px) {
.callout p, #intro-section {
    font-size: 1.2em;}
}

@media screen and (max-width: 767px) {
.flex-container {
    display: flex;
    flex-direction: column-reverse;}
}

@media screen and (max-width: 767px) {
#contact-us {
    padding-bottom: 2em;}
}

@media screen and (max-width: 576px) {
.session-box h3 {
    padding-top: 10px;}
}

/*---------------------------------------------------------- / End of Responsive Sizing Section --------*/