@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
:root {
   --purple: #7379b3;
   --lightpurple: #daddff;
   --black: #000000;
   --darkgrey: #333333;
   --lavender: #dcd1d9;
}
body, html {
   margin: 0;
   height: 100%;
   color: var(--black);
   font-family: "Roboto", sans-serif;
}
h1 {
   font-size: 48px;
}
p {
   line-height: 26px;
}
content {
   display: flex;
   flex-direction: column;
   min-height: 100vh; /* Ensure content takes at least full viewport height */
   width: 100%;
}
.flexfill {
   flex-grow: 1;
}
.innerdiv {
   width: 90%;
   max-width: 1300px;
   margin: 0px auto;
}
.row_2 {
   display: flex;
   flex-direction: row;
   justify-content: center;
   margin: 20px 0px 20px 0px;
}
.row_2 div {
   width: 50%;
   margin: 10px;
}
.imgdiv {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center; /* Center align items vertically */
}
.imgdiv img {
   max-width: 90%;
   height: auto; /* Maintain aspect ratio */
}
.scroller {
   height: 50px;
   width: 100%;
   background-color: var(--black);
   color: white;
   display: flex;
   align-items: center;
   overflow: hidden;
   text-transform: uppercase;
   position: relative;
}
.scroller-text {
   white-space: nowrap;
   display: inline-block;
   animation: scrollText 30s linear infinite; /* Adjust duration as needed */
}
@keyframes scrollText {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-50%);
   }
}
.submain {
   width: 100%;
}
.mainbg {
   position: relative;
   width: 100%;
   height: calc(100vh - 50px); /* Full height minus the scroller */
}
.mainbg video {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translate(-50%, -50%);
   z-index: -1; /* Send video behind any overlaying content */
}
.centered-image {
   position: absolute;
   width: 100%; /* Spanning full width */
   height: 100%; /* Spanning full height */
   display: flex;
   align-items: center;
   justify-content: center;
}
.centered-image img {
   max-height: 60%; /* Ensures the image is no more than 60% of the parent's height */
   width: auto; /* Maintains the aspect ratio */
   display: block;
   opacity: 0; /* Start hidden */
   position: absolute; /* Allow the image to move freely */
   transition: transform 2s ease-in-out, opacity 1s ease-in-out; /* Combine transitions for movement and fading out */
}
@keyframes fadeinout {
   0% {
      opacity: 0;
   }
   20% {
      opacity: 1
   }
   80% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}
.header_norm {
   width: 100%;
   top: 50px;
   height: 150px;
   display: flex;
   flex-direction: row;
}
.zeroopaq {
   opacity: 0 !important;
}
.notopaq {
   opacity: 1 !important;
}
.header {
   width: 100%;
   position: absolute;
   top: 0;
   height: 150px;
   display: flex;
   flex-direction: row;
}
#mm_icon {
   display: none;
   z-index: 1000;
}
#dktp_men {
   display: flex;
}
.lavbg {
   background-color: var(--lavender);
}
.darkgreybg {
   background-color: var(--darkgrey);
}
.header.scrolled {
   background-color: rgba(255, 255, 255, 0.9); /* Change to the desired background color */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000; /* Ensure it stays on top of other content */
   transition: background-color 0.3s ease-in-out; /* Smooth transition for background color */
}
.head_logo {
   width: 200px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
}
.head_logo img {
   height: 130px;
   width: 130px;
   cursor: pointer;
   position: relative; /* Ensure the header logo is positioned relative for accurate positioning */
   z-index: 10; /* Keep the header logo on top */
}
.head_right {
   width: 200px;
   flex-direction: row;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   align-content: center;
}
.head_right img {
   margin-right: 10px;
   width: 50px;
   height: 50px;
}
.head_nav {
   flex-grow: 1;
   text-align: right;
   z-index: 10000;
}
.head_nav ul {
   list-style-type: none; /* Removes bullet points */
   padding: 0; /* Removes default padding */
   margin: 0; /* Removes default margin */
   display: flex; /* Displays items in a row */
   justify-content: center;
   line-height: 150px;
}
.head_nav ul li {
   padding: 0 10px; /* Adds some horizontal spacing between items */
   text-transform: uppercase;
   font-weight: bold;
}
.head_nav ul li a {
   text-decoration: none;
   color: #000000;
}
.head_nav ul li a:hover {
   text-decoration: underline;
}
.subheading {
   width: 100%;
   height: 110px;
   color: #ffffff;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.subheading h1 {
   font-size: 26px;
   margin: 30px;
}
.onecol {
   display: flex;
   flex-direction: row;
   width: 100%;
   max-width: 1800px;
   min-height: 250px;
   margin: 0px auto;
}
.onecol div {
   width: 100%;
   text-align: center;
}
.flexcol {
   display: flex;
   flex-direction: column;
}
.flexcenter {
   justify-content: center;
}
.twocol_absolute {
   display: flex;
   flex-direction: row;
   width: 90%;
   max-width: 1400px;
   min-height: 200px;
   margin: 0px auto;
   margin-top: 200px;
}
.twocol_absolute > div {
   width: 50%;
}
.twocol {
   display: flex;
   flex-direction: row;
   width: 100%;
   max-width: 1800px;
   min-height: 200px;
   margin: 0px auto;
}
.twocol div {
   width: 50%;
}
.bgblack {
   background: var(--black);
   color: #ffffff;
}
.bgblack a {
   color: #ffffff !important;
}
.btns {
   display: flex;
   flex-direction: row;
}
.btns button {
   margin: 10px 10px 10px 0px;
}
.button_dark {
   padding: 20px 40px;
   cursor: pointer;
   border: none;
   background: var(--darkgrey);
   color: #ffffff;
   text-transform: uppercase;
   font-weight: bold; /* Corrected from text-weight to font-weight */
   transition: transform 0.2s ease-in-out; /* Smooth transition for the transform */
}
.button_dark:hover {
   transform: translateY(-5px); /* Move the button 5px up on hover */
   background: var(--purple);
}
.welcome {
   min-height: 600px;
   display: flex;
   flex-direction: row;
   justify-content: center;
}
.welcome > div {
   margin: 100px 60px;
   width: 100%;
   display: flex;
   flex-direction: column; /* Arrange children in a column */
   justify-content: center; /* Center children vertically */
}
.welcome > div h1 {
   margin: 10px 0px;
}
.welcomeimg {
   background-image: url("images/welcome.jpg");
   background-position: center top;
}
.imgdiv {
   background-repeat: no-repeat;
   background-size: cover;
}
.formdiv {
   background: #ffffff;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.uppercase {
   text-transform: uppercase;
}
.learnmore {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 1800px;
   height: 600px;
   margin: 0px auto;
   justify-content: flex-end;
   background-color: var(--black);
}
.innerimg {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
.slanted-div-top {
   position: relative;
   clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
}
.slanted-div-bottom {
   position: relative;
   clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
}
.skillimg {
   background: #000000 url('images/skillclinic.jpg') no-repeat center top;
   background-size: cover;
}
.campsimg {
   background: #000000 url('images/camps.jpg') no-repeat center center;
   background-size: cover;
}
.learnmore h2 {
   font-size: 48px;
   color: #ffffff;
}
.learnmore button {
   padding: 20px 40px;
   cursor: pointer;
   border: none;
   background: var(--purple);
   color: #ffffff;
   text-transform: uppercase;
   font-weight: bold; /* Corrected from text-weight to font-weight */
   transition: transform 0.2s ease-in-out; /* Smooth transition for the transform */
}
.learnmore button:hover {
   transform: translateY(-5px); /* Move the button 5px up on hover */
   background: var(--darkgrey);
}
.innerimg div {
   margin: 50px;
}
.jamieimg {
   background-image: url("images/coach-jamie-duffy.jpg");
   background-position: center center;
}
.igfeed {
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: var(--black);
   padding: 50px 0px;
}
.coachsoverview {
   width: 100%;
   display: flex;
   flex-direction: row;
   margin: 0px auto;
   max-width: 1800px;
   flex-wrap: wrap;
   justify-content: center;
}
.coachbox {
   flex: 1 1 33%; /* Adjusted flex-basis and flex properties */
   flex-grow: 1; /* Allow it to grow if there's extra space */
   flex-shrink: 1; /* Allow it to shrink before wrapping */
   max-width: 500px;
   min-width: 300px;
   border: #C9C9C9 solid 1px;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   margin: 10px;
   /* Maintain aspect ratio */
   aspect-ratio: 5 / 4; /* Aspect ratio of 500px width to 400px height */
   height: auto; /* Allow height to be determined by aspect ratio */
   max-height: 400px; /* Max height set to 400px */
}
.cb_img {
   width: 100%;
   height: 70%; /* Image takes 70% of the height */
   background-size: cover;
   background-position: center;
}
.cb_txt {
   width: 100%;
   height: 30%; /* Text takes 30% of the height */
   /* Additional styles for text content */
}
.coachgareth {
   background-image: url("images/coaches/gareth_overview.jpg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}
.footer {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   padding: 20px 0px;
   background-color: var(--darkgrey);
}
.innerfooter {
   width: 95%;
   max-width: 1800px;
   display: flex;
   flex-direction: row;
   justify-content: center;color: #ffffff;
}
.innerfooter > div {
   width: 33%;
   margin: 10px;
}
.innerfooter ul {
   list-style-type: none; /* Removes bullet points */
   padding: 0; /* Removes default padding */
   margin: 0; /* Removes default margin */
   display: block; /* Displays items in a row */
   justify-content: center;
}
.innerfooter ul li {
   padding: 0 10px; /* Adds some horizontal spacing between items */
}
.innerfooter ul li a {
   text-decoration: none;
   color: #ffffff;
}
.innerfooter ul li a:hover {
   text-decoration: underline;
}
.copyright {
   text-align: center;
   width: 100%;
   margin: 0px auto;
   background-color: var(--darkgrey);color: #ffffff;
}
.logobg {
   background-image: url("images/logo_300x300.png");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
}

.upcomingevent {
	width: 95%;
	max-width: 1000px;
	margin: 0px auto;
	margin-top: 50px;
	margin-bottom: 50px;
	border-radius: 5px;
}

.upcomingevent img {
	width: 100%;
}
.tryoutinfo {
	width: 90%;
	max-width: 900px;
	font-size: 20px;
	margin: 0px auto;
	margin-top: 40px;
}

.tryoutinfo p {
	line-height: 30px;
}

.partners {
	width: 90%;
	max-width: 1300px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0px auto;
}

.partners img {
	margin: 30px;
}
@media only screen and (max-width: 768px) {
   .scroller {
      font-size: 12px;
   }
   .head_nav ul {
      position: fixed;
      top: 50px;
      left: 0;
      height: 100%;
      width: 50%;
      background-color: var(--black);
      line-height: normal;
      text-align: left;
   }
   .head_nav ul li {
      display: block;
      line-height: 50px;
      padding: 0px;
      margin-left: 20px;
   }
   .head_nav ul li a {
      color: #ffffff;
   }
   .centered-image img {
      max-width: 90%;
   }
   #mm_icon {
      display: block;
   }
   #dktp_men {
      display: none;
   }
   .twocol_absolute {
      flex-direction: column;
   }
   .twocol_absolute > div {
      width: 100%;
   }
   .twocol {
      flex-direction: column;
   }
   .twocol div {
      width: 100%;
   }
   .imgdiv {
      min-height: 500px;
   }
   .innerfooter {
      flex-direction: column;
   }
   .innerfooter > div {
      width: 95%;
   }
   .logobg {
      min-height: 150px;
   }
   .formdiv {
      width: 90%;
      min-height: 300px;
   }
   .welcome {
      min-height: 500px;
   }
}