@font-face {
  font-family: 'Open Sans Condensed';
  src: url('/fonts/OpenSans-CondBold-webfont.ttf') format('ttf'),
       url('/fonts/OpenSans-CondBold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

* {box-sizing: border-box;}
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}



:root {
	--dark-grey: #282828;
	--lighter-grey: #4a4a4a;
	--title-font: "Bebas Neue", sans-serif;
	--light: #fff;
	--green :#390;
	--gold: #F90;
}


body {padding:0; margin:0;font-family: 'Poppins', sans-serif; background-color:#282828; height:100%}
.middle {background-color:var(--dark-grey)}
h1, h2, h3, .side_heading, .side_heading-mobile .conetitle {font-family: var(--title-font); color:var(--light); margin:0; padding-top:20px; text-transform:uppercase; line-height:1}
h1, .conetitle, h2 {text-align:center; width:100%; display:block; font-size:4em; font-weight:100;}

.conetitle {font-weight:bold}
p {line-height:1.55; letter-spacing:1px; text-align:center; margin:20px auto; width:95%}
h2 { padding-left:5px}
h3 {font-size: 30px; text-align: center; width: 100%; margin: 0 auto; padding: 0; position: relative;}
	.left_col {max-width:300px; min-width:280px; float:left; width:23%; display:block;}
	.left_col .padding {padding:10px}
	.right_col {width:76%; max-width:900px; display:block; float:left;}
	.clear {width:100%; height:1px; display:block; overflow:hidden; clear:both}
.container {width:100%; max-width:1365px; margin-left:auto; margin-right:auto; display: flex; justify-content: center; align-items: center; padding-bottom:20px}
.container-bottom {width:96%; max-width:1320px; margin-left:auto; margin-right:auto}

.flexbox {
        display: flex;
		gap: 50px;
      }
.left_col_flex {display:none}
@media only screen and (min-width: 770px) {
.left_col_flex { flex: 0 0 300px; display:none}
}
.right_col_flex { flex:1;}
     /* Custom CSS Document */
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none; outline:none
}

.video_holder, .header_dt_content {width:100%; max-width:1365px; margin-left:auto; margin-right:auto; display:block}

.header_dt {width:100%; display:block; background-color:var(--dark-grey); margin-bottom:0px;  padding-bottom:0px !important; z-index:999}

@media only screen and (min-width: 770px) {
  .header_dt {width:100%; height:55px; display:block; background-color:var(--dark-grey); padding-top:9px; padding-bottom:50px !important; margin-bottom:0px; }
}



.logo {width:200px; height:50px; display:inline-block; background-image:url(images/rxtr-logo.jpg); background-repeat:no-repeat; background-size:100% auto;  margin:0 auto; background-position:center;}
@media only screen and (min-width: 231px) {
.logo {width:200px; margin: 0 auto}
}
@media only screen and (min-width: 770px) {
  .logo {}
}
.head_center {width:auto; margin:0 auto; display: block; text-align: center;}
.dt-dropdown-bg {position:fixed; top:80px; left:0; height:100%; display:block; z-index:89}
.dropdownholder {display:inline-block; color:#fff; font-family:var(--title-font); font-size:18px; position:relative; top:-19px; left:78px; padding-right:40px; background-repeat:no-repeat; background-position:right center}
.drill_menu {padding-left:10px}
.arrow-down {background-image:url(images/arrow-down.png)}
.arrow-up {background-image:url(images/arrow-up.png)}
/* new dropdwon */
.dt-dropdown-bg {width:100%; background-color:var(--dark-grey); opacity:0.8; height:100%; display:none; z-index:89}
.dt-dropdown {display:none; height:auto;  z-index:91; color:#fff; width:100%; overflow:hidden}

/* menu grid */
.menugrid {
display:grid;
grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 96%;
    margin: 0 auto;
	max-width:1291px;
	padding-top:25px
}
@media only screen and (min-width: 1300px) {
.menugrid {    width: 100%; }
}
.grid-item a {display:block; text-decoration:none; color:#fff; margin:10px 0; font-size:14px}
@media only screen and (min-width: 1400px) {
	.grid-item a {font-size:16px}
}

.dt-menu-title {text-transform:uppercase; font-size:18px; font-family:var(--title-font); font-weight:bold; margin-bottom:10px}

.drill_menu a { height:40px; width:250px; text-decoration:none; display:block; margin-bottom:10px; width:100%;  background-color:#333;  background-size:250px 40px; background-repeat:no-repeat; border-top-left-radius:25px; border-bottom-left-radius:25px}
.drill_main_link {padding-left:45px; padding-top:4px; font-size:14px; display:block; text-transform:uppercase; font-weight:bold; color:#fff}
.drill_sub_link { font-size:12px; display:block; padding-left:45px; color:#fff; text-transform:uppercase}
.mobile-menu-item-holder {width:100%; display:block;height:45px; padding-top:5px}
.drill_link_basic {background-image:url(images/basic_drill_bg.gif)}
.drill_link_medium {background-image:url(images/medium_drill_bg.gif)}
.drill_link_advanced {background-image:url(images/advanced_drill_bg.gif)}
.mobile-stars {width:66px; height:19px; display:block; float:right;background-repeat:no-repeat; margin-right:3px; margin-top:9px }
.stars_basic {background-image:url(images/icons/1star.svg); background-size:20px 17px; background-repeat:none; background-position:center center }
.stars_medium {background-image:url(images/icons/2star.svg); background-size:44px 17px; background-repeat:none; background-position:center center }
.stars_advanced {background-image:url(images/icons/3star.svg); background-size:66px 17px; background-repeat:none; background-position:center center }

.mobmenuHeader {width:100%; box-sizing:border-box; font-size:22px; color:#fff; font-weight:bold; background-color:var(--lighter-grey); padding:15px; padding-left:15px; border-top:2px solid
 #ccc; text-transform:uppercase}


@media only screen and (max-width: 322px) {
.drill_main_link  {font-size:3.8vw}
.drill_sub_link {font-size:3.4vw}
}

.apptext {color:var(--light);}
.main_login_button {width:200px; margin:0 auto; padding:10px 0px; text-align:center; display:block}
a.main_login_button:active,a.main_login_button:visited, a.main_login_button:link, a.main_login_button:hover {text-decoration:none; color:var(--dark-grey); background-color:var(--light); border:2px solid var(--dark-grey); font-family:var(--title-font); text-transform:uppercase}
a.main_login_button:hover {background-color:var(--dark-grey); color:var(--light); border:2px solid var(--light);}

.drill_button {width:100%; margin:0 auto; padding:10px 0px; text-align:center; display:block}
a.drill_button:active,a.drill_button:visited, a.drill_button:link, a.drill_button:hover {text-decoration:none; color:var(--light); background-color:var(--dark-grey); border:2px solid var(--light); font-family:var(--title-font); text-transform:uppercase; width:80%}
a.drill_button:hover {background-color:var(--light); color:var(--dark-grey); border:2px solid var(--light);}

@media only screen and (min-width: 450px) {
a.drill_button:active,a.drill_button:visited, a.drill_button:link, a.drill_button:hover {width:calc(100% - 4px)}
}
a.tile_link:active,a.tile_link:visited, a.tile_link:link, a.tile_link:hover { width:100%; text-decoration:none; color:var(--light); background-color:var(--dark-grey); border:2px solid var(--light); font-family:var(--title-font); text-transform:uppercase; display:block; text-align:center; padding:10px 0}
a.tile_link:hover {color:var(--dark-grey); background-color:var(--light); border:2px solid var(--dark-grey);}
   .menu-icons-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .icons-flex-item {
      flex: 1; /* Each column takes equal width */
      min-width: calc(33.33% - 10px); /* Account for the gap */
      padding: 10px;
      box-sizing: border-box;
    }

    /* Define the number of columns per row (2 rows in this case) */
    @media (max-width: 749px) {
      .icons-flex-item {
        min-width: calc(70% - 10px); /* Two columns per row */
		max-width:80%; margin:0 auto
      }
    }

@media only screen and (min-width: 900px) {
    .icons-flex-item {
      flex: 1; /* Each column takes equal width */
      min-width: calc(16.66666667% - 10px); /* Account for the gap */
	}
}


.side_heading {padding-left:5px; font-size:19px; margin-bottom:0px; cursor:pointer; margin-bottom:10px}
.side_heading-mobile {padding-left:5px; font-size:19px; margin-bottom:0px; cursor:pointer;}
.mobile_menu_switch {width:50px; height:50px; display:block;background-repeat:no-repeat; background-image:url(images/hamburger.png); background-size:50px 100px; float:right; margin-right:10px; cursor:pointer; margin-top:0px; user-select: none;
  -webkit-user-select: none; /* For iOS Safari */
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For Microsoft Edge */}
.menu_closed  {background-position:0 0 }
.menu_open  {background-position:0 -50px}
.mobile-flyout-holder, .mobile-flyout-bgfade {display:none}
.mobile-flyout-bgfade {width:100%; height:100%; background-color:#000; z-index:50; top:65px; left:0}
.mobile-flyout-holder {width:100%; z-index:51; background-color:#F00; height:auto; padding:10px;}
header, .header_dt, .middle {z-index:1; padding-bottom:50px}
.header {background-color:#282828; text-align:center;}
.hidenmenu {display:none}
.sidemenuswitch {float:right; padding-right:20px; cursor:pointer}
.mobile-flyout-bgfade .side_heading-mobile {color:#fff; padding-left:15px; border-bottom:0px solid #444; border-top:0px solid #444; padding-top:15px; padding-bottom:15px; text-transform:uppercase}
.hidenmenu { border-bottom:1px solid #444; border-top:1px solid #444; padding-top:14px; padding-bottom:0px}
#teamtrainingmobile{border-top:0px solid #444;border-bottom:2px solid #444 !important}
.side_heading6 {border-bottom:2px solid #444 !important}
.mobile-flyout-bgfade .sidemenuswitch {padding-right:33px}
.mobile-flyout-bgfade a{text-decoration:none; padding-top:20px; padding-bottom:5px; display:block; width:100%; background-repeat:no-repeat}
.mobile-flyout-bgfade .drill_main_link {color:#fff}
.mobile-flyout-bgfade .drill_sub_link {color:#fff}
.mobilescroll {position:relative; top:0; left:0; padding:0; margin:0; width:100%; height:calc(100% - 70px); overflow:scroll}
.mobilescroll::-webkit-scrollbar{
    display: none;
  }

.mobilescroll .drill_link_basic {background-image:url(images/basic_drill_bg_mobile.gif)}
.mobilescroll .drill_link_medium {background-image:url(images/medium_drill_bg_mobile.gif)}
.mobilescroll .drill_link_advanced {background-image:url(images/advanced_drill_bg_mobile.gif)}
.mobile_equipment_link {width:100%; text-align:center; background-color:#900; color:#fff; padding-top:10px; padding-bottom:10px; display:block; letter-spacing:2px; font-size:20px}
a.dt_equipment_link:active, a.dt_equipment_link:link,a.dt_equipment_link:visited, a.dt_equipment_link:hover { color:#900; padding-top:10px; padding-bottom:10px; display:block; font-size:19px}
@media only screen and (max-width: 1200px) {
  .right_col {width:62vw}
}

.mobile {display:none}
@media only screen and (max-width: 770px) {
.mobile {display:block}
.desktop {display:none}
.header {width:100%}
.fixed_head_space {width:100%; height:67px; display:block}
}
@media only screen and (min-width: 770px) {
.mobile-flyout-bgfade {display:none !important}
.drill_menu a, .hidenmenu {border:none}
.fixed_head_space {width:100%; height:69px; display:block}
}


.drill_content {padding:20px}
.skill_level, .targets {text-align:left; margin-left:auto; margin-right:auto; display:block; color:var(--light); font-size:16px}
.targets {text-align:left; margin-top:15px; margin-bottom:25px; padding-right:20px; padding-left:10px}
.beginners, .players, .pros {font-size:1.2em; font-weight:bold; width:100%; text-align:center; display:block; margin-left:auto; margin-right:auto; text-transform:uppercase; background-repeat:no-repeat; background-position:top center; padding-top:40px; margin-bottom:50px}

.beginners {background-image:url(images/icons/bigstars-basic.png); background-size:26px 25px}
.players {background-image:url(images/icons/bigstars-medium.png); background-size:52px 25px}
.pros {background-image:url(images/icons/bigstars-advanced.png); background-size:78px 25px}
.target_amount {color:var(--gold);}

.coneimage {width:90%; display:block; margin-left:auto; margin-right:auto; text-align:center; margin-bottom:20px}
.coneimage img {max-width:400px; margin-left:auto; margin-right:auto}






.drill_content p {text-align:left}
.drill_link_title {font-weight:bold; color:#111}
.drill_link_info {font-weight:normal; color:#444; font-size:14px; font-style:italic}
.drill_link_info, .drill_link_title {display:block}
.drill_menu2 {color:var(--light);}
.drill_menu2 a{display:block; margin-bottom:10px; text-decoration:none; color:var(--light); padding-left:5px; width:93%; font-family:var(--title-font)}

.drill_link2_basic {background-image:url(images/dt-1star.gif); background-position:right center; background-repeat:no-repeat; background-size:15px 15px}
.drill_link2_medium {background-image:url(images/dt-2star.gif); background-position:right center; background-repeat:no-repeat; background-size:30px 15px}
.drill_link2_advanced {background-image:url(images/dt-3star.gif); background-position:right center; background-repeat:no-repeat; background-size:45px 15px}
.drill_link2_basic:hover {background-image:url(images/dt-1star-on.gif);}
.drill_link2_medium:hover {background-image:url(images/dt-2star-on.gif);}
.drill_link2_advanced:hover {background-image:url(images/dt-3star-on.gif);}

.targetflex {display: flex;
		gap: 50px;}
.mobile-menu-item-holder {padding-top:4px !important}

#mobile_banner {display:none; background-color:var(--dark-grey)}
#dt_banner {display:block; z-index:2}

@media only screen and (max-width: 770px) {
#mobile_banner {display:block}
#dt_banner {display:none}
}

@media only screen and (max-width: 395px) {
.targetflex { display:flex; gap:3vw}
.beginners{font-size:4vw; background-size:7vw; padding-top:27px}
.pros {font-size:4vw; background-size:20vw; padding-top:27px}
.players {font-size:4vw; background-size:14vw; padding-top:27px}
.target_amount {font-size:5vw}
}


.bottom-nav {clear:both; padding-top:20px; display:block}
.next {float:right; padding-right:20px}
.previous {float:left; padding-left:20px}

.prev_icon {background-image:url(images/prev.svg); background-size:100% 100%; display:block;background-repeat:no-repeat;  height:40px; width:40px; display:inline-block}
.next_icon {float:right; background-image:url(images/next.svg); background-size:100% 100%; display:block;background-repeat:no-repeat;  height:40px; width:40px; display:inline-block}
.prev_text {position:relative; top:-14px; padding-left:5px; display:none;}
.next_text {position:relative; top:8px; padding-right:5px; display:none;}
.prev_link a {padding-left:60px}
.next_link a {padding-right:60px}
a.prev_link:active, a.prev_link:visited, a.prev_link:link, a.prev_link:hover {text-decoration:none; color:var(--light)}
a.next_link:active, a.next_link:visited, a.next_link:link, a.next_link:hover {text-decoration:none; color:var(--light)}
@media only screen and (max-width: 900px) {
.prev_link, .next_link {text-indent:-9999px; padding:0}
}
@media only screen and (max-width: 500px) {
.prev_text, .next_text {display:none}
}

.spacer {width:100%; height:25px; display:block; clear:both}
.upsell { display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 1.4vw;
    padding: 0px;
    width: 100%; max-width:550px; margin-left:auto; margin-right:auto}

.product_image {margin:0; padding:0}
.product_image img {width:100%; height:auto}
.product_text {background-color:#333; text-align:center}
.product_text a {text-decoration:none}

a.image_link:link, a.image_link:hover, .image_link:visited, .image_link:active {margin:0; padding:0; display:block !important; width:238px; height:238px}
a.text_link:link, a.text_link:hover, .text_link:visited, .text_link:active {margin:0; padding:0; display:block; color:#fff; text-decoration:none; font-weight:bold; text-align:center; position:relative; top:-4px}


.upsell_area {width:100%; max-width:550px; margin-left:auto; margin-right:auto; display:block}
.product {width:100%; max-width:238px; height:auto; display:block; float:left; background-color:#333; border-radius:5px; overflow:hidden}

.footer {width:100%; margin:0; display:block; padding:25px 0; background-color:#282828; color:#fff; text-align:center}
.footerlogo {width:50%; max-width:200px; height:10vw; display:block; margin:0 auto; background-image:url(images/quickplay-logo.gif); background-repeat:no-repeat; background-size:100% auto}

@media only screen and (min-width: 425px) {
	.footerlogo {width:200px; height:50px;}

}


  .gallery_container {
    width: 100%;
    height: auto;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: #333;
    padding: 0; margin:25px 0
  }

  .gallery_div {
    width: 80%;
    height: auto;
    display: inline-block;
	margin:5px;  vertical-align: top;
  }

 @media only screen and (min-width: 770px) {
   .gallery_div {
    width: 40%;
   }
 }
 @media only screen and (min-width: 1100px) {
   .gallery_div {
    width: 20%;
   }
 }
.gallery_div a {width:100%}
.gallery_v_spacer {width:100%; height:50px; display:block; clear:both}

.videoshortdesc {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:left;
  background-color:#333
}
.videoshortdesc p{ text-align:left; font-size:12px}


.gallery_flex {display:flex; gap:20px; flex-wrap: wrap; margin:0 auto}
.drill_item {  flex: 0 0 calc(100%);   margin: 0px; margin-bottom:25px !important }
.drill_desc, .drill_desc p {text-align:left}

 @media only screen and (min-width: 450px) {
.drill_item {  flex: 0 0 calc(50% - 15px);   margin: 0px; }
.gallery_flex {gap:15px;}
 }
 @media only screen and (min-width: 800px) {
.drill_item {  flex: 0 0 calc(33.33% - 15px);   margin: 0px; }
 }
 @media only screen and (min-width: 1000px) {
.drill_item {  flex: 0 0 calc(25% - 15px);   margin: 0px; }
 }
 @media only screen and (min-width: 1200px) {
.drill_item {  flex: 0 0 calc(20% - 15px);   margin: 0px; }
 }

a.viewmore:link,a.viewmore:visited,a.viewmore:active,a.viewmore:hover {background-color:var(--green); color:var(--light); padding:10px 25px; display:block; text-decoration:none; font-family:var(--title-font)}

.accordion {
}

.accordion-item {
    border-bottom: 1px solid #ddd; display: none;
}

.accordion-title {
    cursor: pointer;
    margin: 0;
    padding: 10px;
	 font-family:var(--title-font)
}

.accordion-content {
    display: none;
    padding: 10px;
	color:var(--light)
}
.accordion-plus {width:18px; height:18px; display:block; float:right; background-image:url(images/plus.gif); background-repeat:no-repeat; background-size:100% auto; position:relative; top:6px; right:20px}
.accordion-open {background-position:0 100% !important}
.drill .container-bottom, .drill .drill_content {padding:0; width:100%}
.drill h1 {font-size:22px; text-align:center; padding:20px 20px; width:calc(100% - 40px)}
.drill h2 {font-size:18px; text-align:center; padding-left:20px;}
.skill_level {text-align:left; font-size:16px}
.accordion-content p{margin:0; color:var(--light); width:calc(100% - 20px); padding:0 10px}

.drill_thumb {width:86%; margin:0 auto; margin-bottom:20px; color:var(--light)}

/* register */
.error {margin:20px 0; padding-left:4px;color:#C00; font-weight:bold; display:block}
.success {margin:20px 0; padding-left:4px;color:#0C0; font-weight:bold; display:block}

#BMdropdownholder {margin-left:78px !important}
a.aboutMasteryLink:active, a.aboutMasteryLink:visited, a.aboutMasteryLink:hover, a.aboutMasteryLink:link  {margin:0 !important}




.drillHolder {
  display: flex;
    flex-wrap: wrap;
    gap: 20px; margin-bottom:25px}

@media only screen and (min-width: 770px) {
    .drillHolder a {width:30% !important}
  }





  .bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.previous,
.next {
  flex-shrink: 0; /* Prevents the arrow divs from shrinking */
  /* Add any additional styling for your arrows here, for example: */
  padding: 10px;
}

.title-container {
  text-align: center;
  flex-grow: 1; /* Allows the title container to take up the remaining space */
  /* Add any additional styling for your title here, for example: */
  padding: 0 20px; /* Adds some space between the title and the arrows */
}

/* Optional: If your title is an h2 or similar, you might want to adjust its margin */
.title-container h2 {
  margin: 0;
}

/* footer fix /*
/* Add these new rules to your CSS */

html {
    height: 100%; /* Ensure the html element covers the full height */
}

body {
    min-height: 100%; /* Make the body at least the full height of the viewport */
    display: flex;
    flex-direction: column;
}

/* This is the key part. It targets the main content wrapper
  and tells it to grow and take up any available space.
  In your case, the content is in a div with the class "middle".
  We'll target the one that contains the main flexbox.
*/
.middle {
    flex-grow: 1;
}

/* To give you the 50px space you wanted, we can add some padding
  to the bottom of the main content area or to the top of the footer.
  Adding padding to the footer is often cleaner.
*/
.footer {
    padding-top: 20px;
    padding-bottom: 30px; /* This creates the space at the very bottom */
}
.vidContainer {padding-top:20vw}




.header {
    width:100%;
    height:114px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}