@charset "utf-8";
/* CSS Document */
div.wrapper {width:1140px; margin:0 auto; }
body{margin:0px}
div.index h2, p{font-family: "verdana", sans-serif;}
div.index html{scroll-behavior: smooth;}
div.about h2{font-family:"agency-fb", sans-serif; font-size: 24px; text-decoration-line: underline;}
div.about p{font-family: "verdana", sans-serif;}
div.gym h2{font-family:"agency-fb", sans-serif;  font-size: 22px; text-decoration-line: underline}
div.gym p{font-family: "verdana", sans-serif;}
div.join h2{font-family:"agency-fb", sans-serif; font-size: 50px; text-decoration: none;}
div.join p{font-family: "verdana", sans-serif;}
div.join h1{font-family: rokkitt, serif; font-weight: 700;}
div.contact h2{font-family:"agency-fb", sans-serif;  font-size: 22px; text-decoration-line: underline}
div.contact p{font-family: "verdana", sans-serif;}

/*Header*/
div.header div.wrapper {display:flex;}
div.header {background:rgba(135,37,37,1.00) url("Images/Gravillion-texture.png")}
div.header div.wrapper {margin: 0 auto;}
div.header div.wrapper ul {font-family:"agency-fb", sans-serif; font-size:30px; margin-top:90px; margin-left:282px;}
div.header div.wrapper ul li {display:inline-block; margin-right:20px; border-right:2px solid #130101; padding-right:20px;}
div.header div.wrapper ul li a{text-decoration:none; color: rgba(19,1,1,1.00);}
div.header div.wrapper ul li a:hover {color: rgba(228,204,151,1.00);}
div.header div.wrapper ul li.last{border:none; margin-right: none; padding-right:none;}
div.header div.wrapper img{margin-top:15px; margin-right: 60px;}

/*INDEX CONTENT*/
div.index div.content img{align:right; padding: 50, 0, 0, 0px; width:100%; margin: 10 auto; border-top: 5px solid #130101; border-bottom: 5px solid #130101; }
div.index div.content div.wrapper a.cta{font-size: 30px; border: 10px; background:rgba(228, 204, 151, 3); padding: 5px; text-decoration: none; color: rgba(19,1,1,1.00); box-shadow: 3px 3px 5px 3px; border-radius: 5px; margin: 15px auto 15px auto; width: 310px; display:block; text-align: center;}
div.index div.content{background: url("Images/Grunge-background.png"); background-size: cover; padding-bottom: 15px}

/*ABOUT CONTENT*/
div.about div.content{background: url("Images/Grunge-background.png"); background-size:cover;}
div.about div.content div.wrapper {display:flex}
div.about div.content div.wrapper div.test1{margin:0px 20px 10px 0px; width: 360px;}
div.about div.content div.wrapper div.test2{margin:0px 20px 10px 0px; width: 360px;}
div.about div.content div.wrapper div.test3{margin:0px 20px 10px 0px; width: 360px}
div.about div.content div.wrapper div.owner{margin:5px 60px 5px 0px;}
div.about div.content div.wrapper div.owner h2{width: 930px; padding-right: 200px;}
div.about div.content div.wrapper div.owner p{width: 930px;}
div.about div.content div.wrapper div.owner img{float: right; width: 300px; display:block; padding-left: 200px; padding-right: 50px;}
div.about div.content div.wrapper div.how{margin:5px 60px 5px 0px;}
div.about div.content div.wrapper div.formula{margin:5px 60px 5px 0px;}
div.about div.content div.wrapper div.mentors{margin:5px 60px 5px 0px;}
div.about div.content div.wrapper div.testimonial{margin:5px 60px 5px 0px;}
div.about div.content div.wrapper div.testimonial div.testimonials{display:flex;}
div.about div.content div.wrapper div.testimonial div.testimonials div.test1 p.bold{font-family: rokkitt, serif; font-weight: 700; font-size:20px;}
div.about div.content div.wrapper div.testimonial div.testimonials div.test2 p.bold{font-family: rokkitt, serif; font-weight: 700; font-size: 20px;}
div.about div.content div.wrapper div.testimonial div.testimonials div.test3 p.bold{font-family: rokkitt, serif; font-weight: 700; font-size: 20px;}
div.about div.content div.wrapper div.mentors div.ment1 {display:flex; margin-bottom: 20px;}
div.about div.content div.wrapper div.mentors div.ment1 img{width:300px; float: right;}
div.about div.content div.wrapper div.mentors div.ment2 {display:flex; margin-bottom: 20px;}
div.about div.content div.wrapper div.mentors div.ment2 img{width:300px; float: right;}
div.about div.content div.wrapper div.mentors div.ment3 {display:flex; margin-bottom: 20px;}
div.about div.content div.wrapper div.mentors div.ment3 img{width:300px; float: right;}
div.about div.content div.wrapper div.mentors div.ment1 div.mentor1 span{font-family: "rokkitt", serif; font-weight: 700; font-size: 20px;}
div.about div.content div.wrapper div.mentors div.ment2 div.mentor2 span{font-family: "rokkitt", serif; font-weight: 700; font-size: 20px;}
div.about div.content div.wrapper div.mentors div.ment3 div.mentor3 span{font-family: "rokkitt", serif; font-weight: 700; font-size: 20px;}
/*Accordian*/
.mentor1 {max-width: 600px;margin: 5px 40px 5px auto;font-family: Arial, sans-serif;border: 1px solid #ddd;border-radius: 8px;overflow: hidden; display: block;}
.accordion-item {border-bottom: 1px solid #ddd;}
.accordion-item:last-of-type {border-bottom: none;}
.accordion-header {display: flex;justify-content: space-between;/*align-items: center;*/padding: 12px 16px;background-color: rgba(228,204,151,1.00);cursor: pointer;font-weight: 600;transition: background-color 0.3s ease;}
.accordion-header:hover {background-color: rgba(204,177,118,1.00);}
.icon {transition: transform 0.3s ease;}
.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;padding: 0 16px;background-color: #fff;}
.accordion-content p {margin: 12px 0;font-size: 14px;line-height: 1.5;}
.accordion-item input {display: none;}
.accordion-item input:checked ~ .accordion-content {max-height: 200px; padding: 12px 16px;}
.accordion-item input:checked + .accordion-header .icon {transform: rotate(45deg);}

.mentor2 {max-width: 600px;margin: 5px 40px 5px auto;font-family: Arial, sans-serif;border: 1px solid #ddd;border-radius: 8px;overflow: hidden; display:block;}
.accordion-item {border-bottom: 1px solid #ddd;}
.accordion-item:last-of-type {border-bottom: none;}
.accordion-header {display: flex;justify-content: space-between;/*align-items: center;*/padding: 12px 16px;background-color: rgba(228,204,151,1.00);cursor: pointer;font-weight: 600;transition: background-color 0.3s ease;}
.accordion-header:hover {background-color: rgba(204,177,118,1.00);}
.icon {transition: transform 0.3s ease;}
.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;padding: 0 16px;background-color: #fff;}
.accordion-content p {margin: 12px 0;font-size: 14px;line-height: 1.5;}
.accordion-item input {display: none;}
.accordion-item input:checked ~ .accordion-content {max-height: 200px; padding: 12px 16px;}
.accordion-item input:checked + .accordion-header .icon {transform: rotate(45deg);}

.mentor3 {max-width: 600px;margin: 5px 40px 5px auto;font-family: Arial, sans-serif;border: 1px solid #ddd;border-radius: 8px;overflow: hidden; display: block;}
.accordion-item {border-bottom: 1px solid #ddd;}
.accordion-item:last-of-type {border-bottom: none;}
.accordion-header {display: flex;justify-content: space-between;/*align-items: center;*/padding: 12px 16px;background-color: rgba(228,204,151,1.00);cursor: pointer;font-weight: 600;transition: background-color 0.3s ease;}
.accordion-header:hover {background-color: rgba(204,177,118,1.00);}
.icon {transition: transform 0.3s ease;}
.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;padding: 0 16px;background-color: #fff;}
.accordion-content p {margin: 12px 0;font-size: 14px;line-height: 1.5;}
.accordion-item input {display: none;}
.accordion-item input:checked ~ .accordion-content {max-height: 200px; padding: 12px 16px;}
.accordion-item input:checked + .accordion-header .icon {transform: rotate(45deg);}

/*GYM CONTENT*/
div.gym div.content{background: url("Images/Grunge-background.png"); background-size: cover; padding-top: 10px;}
div.gym div.content div.wrapper div.photos div.responsive{margin:15px auto;}
div.gym div.content div.wrapper h2{margin-top: 50px;}
div.gym div.content div.wrapper p span{font-family: rokkitt, serif; font-weight: 700; font-size: 20px;}
/*Gallery*/
div.gallery {border: 1px solid #ccc; margin-bottom: 20px;}
div.gallery:hover {border: 1px solid #777;}
div.gallery img {width: 100%; height: auto;}
div.desc {padding: 15px;text-align: center;}
* {box-sizing: border-box;}
.responsive {padding: 0 6px;float: left;width: 24.99999%;}
@media only screen and (max-width: 700px) {.responsive {width: 49.99999%;margin: 6px 0;}}
@media only screen and (max-width: 500px) {.responsive {width: 100%;}}
.clearfix:after {content: "";display: table;clear: both;}
/*Table*/
td.bold2{font-family:"agency-fb", sans-serif; font-size:20px}
td{font-family: "verdana", sans-serif; font-size:15px}
td{border:2px, solid #130101; text-align: center; margin:0px 0px; padding: 5px;}
td:nth-child(even) {background-color: rgba(228,204,151,1.00);}
td:nth-child(odd) {background-color: rgba(204,177,118,1.00);}
table{margin-bottom: 10px; border-collapse:collapse;}


/*JOIN CONTENT*/
div.join div.content{background: url("Images/Grunge-background.png"); background-size:cover;}
div.join div.content div.wrapper {display:flex;}
.membership{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);max-width: 300px;margin: auto;text-align: center;}
.title{color: grey;font-size: 18px;}
button{border: none;outline: 0;display: inline-block;padding: 8px;color: white;background-color: #000;text-align: center;cursor: pointer;width: 100%;font-size: 18px;}
div.join div.content a{text-decoration: none;font-size: 22px;color: black;}
button:hover, a:hover{opacity: 0.7;}
div.join div.content div.wrapper div.membership{background:rgba(228, 204, 151, 3); margin-bottom: 40px;}
div.join div.content div.wrapper div.membership img{width:200px;}
div.join div.content div.wrapper div.membership h2.title {font-family: rokkitt, serif; font-weight: 700;}
div.join div.content h2.noflex {diplay:inline-block; text-align: center; margin-top: 7px;}

/*CONTACT CONTENT*/
div.contact div.content{background: url("Images/Grunge-background.png"); background-size: cover;}
div.contact div.content div.wrapper {margins: 60px 0px}
div.contact div.content div.phone div.wrapper p span{font-family: rokkitt, serif; font-weight: 700; font-size: 20px;}
div.contact div.content div.email div.wrapper p span{font-family: rokkitt, serif; font-weight: 700; font-size: 20px;}
div.contact div.content div.mentor div.wrapper div.mentorcontact p span{font-family: rokkitt, serif; font-weight: 700; font-size: 20px;}
div.contact div.content div.location div.wrapper{display: flex; width:1140px;}
div.contact div.content div.location div.wrapper div.iframe{float:left; border-right:1px solid #5e5e5e; width:560px; margin-bottom: 30px;}
iframe { float:left; margin-right:20px;}
div.contact div.content div.location div.wrapper div.address{float:left; width:480px; margin-left:40px; }
div.contact div.content div.location div.wrapper div.address p span{font-family: rokkitt, serif; font-weight: 700; font-size: 20px;}

/*Footer*/
div.footer {background:rgba(135,37,37,1.00) url("Images/Gravillion-texture-v4.png"); background-size:cover; text-align:center;}
div.footer div.wrapper{ padding-bottom: 5px; padding-top: 5px}
div.footer div.wrapper h2 {font-size: 20px; padding-bottom: 5px; margin-top: 10px; margin-bottom: 10px; text-decoration-line: underline;}
div.footer div.wrapper p{font-size: 15px; }

/*MY PROBLEMS*/
/*FIND FONT, cut white border around top and bottom of photo, change font sizes*/