@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;
}

:root {
	--dark-grey: #282828;
	--lighter-grey: #4a4a4a;
	--title-font: 'Open Sans Condensed', sans-serif;
	--light: #fff;
	--green :#390;
	--gold: #F90;
}


body {padding:0; margin:0;font-family: 'Poppins', sans-serif; background-color:#000;}
.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}
h1, .conetitle {text-align:center; width:100%; display:block; font-size:2em}
.conetitle {font-weight:bold}
p {line-height:1.55; letter-spacing:1px; text-align:center; margin:20px auto; width:95%}
h2 { padding-left:5px}
	.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}
.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%; height:55px; display:block; background-color:var(--dark-grey); padding-top:9px; padding-bottom:5px; margin-bottom:0px; position:fixed; top:0; left:0}
.logo {width:200px; height:50px; display:inline-block; background-image:url(images/quickplay-logo.jpg); background-repeat:no-repeat; background-size:100% auto; margin-left:20px; margin-top:0; background-position:0 -3px}
.ecoach-logo {width:256px; height:50px; display:block; background-image:url(images/ecoach-logo.gif); background-repeat:no-repeat; background-size:256px 50px; margin-left:10px; margin-top:12px}
@media only screen and (min-width: 231px) {
.logo {width:200px; margin-top:12px}
}
.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;position:fixed; top:69px; left:0; height:100%; display:none; z-index:89}
.dt-dropdown {display:none; height:auto; position:fixed; top:69px; left:0; 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 soliod
 #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%; position:fixed; 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}
.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 {position:fixed; top:0; left:0; width:100%}
.fixed_head_space {width:100%; height:69px; 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-bottom:50px; padding-top:20px; display:block}
.next {float:right; padding-right:20px}
.previous {float:left; padding-left:20px}

.prev_icon {background-image:url(images/cones/prev.svg); background-size:100% 100%; display:block;background-repeat:no-repeat;  height:40px; width:40px; display:inline-block}
.next_icon { background-image:url(images/cones/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}
.next_text {position:relative; top:-14px; padding-right:5px}
.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:#000; 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:left; padding:20px 20px; width:calc(100% - 40px)}
.drill h2 {font-size:18px; text-align:left; 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}