/* ----------------------------------------------------------------
  Stylesheet for Hooked Pickleball Junior pages
-----------------------------------------------------------------*/

::selection {
  background: #2de7ff;
  color: #000;
  text-shadow: none;
}

::-moz-selection {
 background: #2de7ff;
  color: #000;
  text-shadow: none;
}

::-webkit-selection {
  background: #2de7ff;
  color: #000;
  text-shadow: none;
}

:active,
:focus {
  outline: none !important;
}

/* ----------------------------------------------------------------
  Typography
-----------------------------------------------------------------*/
body {
  line-height: 1.4em;
  color: #161616;
  font-family: 'poppins', 'Arial', sans-serif;
  font-weight: 400;
  background: #000;
}

a {
color: #004da0;
  text-decoration: underline;
}
a:hover {
  color: #00aac0;
  text-decoration: underline;
}

a:not(.btn):not(.btn-link):not(.text-decoration-underline):not(.more-link) {
    text-decoration: underline !important;
}
a.btn:hover {text-decoration: none !important;}

a img {
  border: none;
}

img {
  max-width: 100%;
}

iframe {
  width: 100%;
  border: 0 !important;
  overflow: hidden !important;
}

p {
  margin: 0px !important;
  padding: 0px 0px 15px 0px;
  line-height: 1.8em !important;
}

/* ----------------------------------------------------------------
  Basic Layout Styles
-----------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000;
  font-weight: 500;
  line-height: 1.4em;
  margin: 0 0 10px 0;
  margin-top: 0px !important;
  font-family: 'poppins', 'Arial', sans-serif;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
  font-weight: 600;
}

h5 {
  font-size: 0.875rem;
}

h6 {
  font-size: 0.75rem;
}

h5,
h6 {
  font-weight: bold;
  margin-bottom: 20px;
}

h1 > span:not(.nocolor):not(.badge),
h2 > span:not(.nocolor):not(.badge),
h3 > span:not(.nocolor):not(.badge),
h4 > span:not(.nocolor):not(.badge),
h5 > span:not(.nocolor):not(.badge),
h6 > span:not(.nocolor):not(.badge) {
  color: #a44a3f;
}

pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset,
form {
  margin-bottom: 15px;
}

small {
  font-family: 'poppins', 'Arial', sans-serif;
}

.cursiveheading {
  font-weight: normal;
  line-height: 1.4em;
  margin: 0 0 20px 0;
  font-style: italic;
  font-family: 'english', Georgia, Times New Roman, serif;
}


.page-section {
  padding: 40px 0px 40px 0px;
}



/* ----------------------------------------------------------------
  Masthead
-----------------------------------------------------------------*/

header.masthead-inside {
  background-color: #1d5cb0;
  background-image: url(../images/hpb-bg-mastheadinside.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.headerlogo {text-align: center; width: 100%; padding: 80px 0px 30px 0px;}
.headerlogo img {width: 45%; height: auto;}

header.masthead {
  background: url("../images/hpb-bg-mastheadhome.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

@media (min-width: 992px) {
  header.masthead {
    height: 80vh;
    min-height: 40rem;
    padding-top: 4.5rem;
    padding-bottom: 0;
  }
  .headerlogo img {width: 218px; height: auto;}
}
@media (min-width: 1200px) {
}


/* ----------------------------------------------------------------
  Header Nav
-----------------------------------------------------------------*/

#mainNav {
  box-shadow: none;
  margin-top: 0px;

background: linear-gradient(to right,  rgba(0,25,66,1) 0%,rgba(29,74,149,1) 100%);


padding-top: 15px !important; 
  padding-bottom: 15px !important;
}
#mainNav .navbar-brand {
  font-family: 'poppins', 'Arial', sans-serif;
  font-weight: 700;
  color: #c5c5c5;
}
#mainNav .navbar-nav .nav-item .nav-link {
  color: #c5c5c5;
  font-family: 'poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding: 10px 0px;
  text-decoration: none !important;
  text-transform: none;
}
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
  color: #00b3ca;
  text-decoration: underline !important;
}
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: #c5c5c5 !important;
  text-decoration: underline !important;
}

#mainNav .dropdown-menu {
    border-radius: 0px !important;
    border: 1px solid #2e2e2e;
    background-color: #2e2e2e;
}

#mainNav .dropdown-menu .dropdown-item {
  background-color: transparent;
  color: #bababa;
}
#mainNav .dropdown-menu .dropdown-item:hover {color: #00b3ca;}

  #mainNav.navbar-shrink {
    margin-top: 0px;
    box-shadow: none;
    border-bottom: none;
    background-color: #000000;
  }

@media (min-width: 992px) {
  #mainNav {
    box-shadow: none;
    margin-top: 0px;
  }
  #mainNav .navbar-brand {
    color: rgba(255, 255, 255, 0.7);
  }
  #mainNav .navbar-brand:hover {
    color: #00b3ca;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    color: #c5c5c5;
    padding: 0 1rem;

  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #00b3ca;
  }
  #mainNav .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0;
  }

  #mainNav .dropdown-menu {box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.75);}

   #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {color: #c7c7c7 !important;}

   #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
    color: #fff !important;
  }

}


/* ----------------------------------------------------------------
  Footer
-----------------------------------------------------------------*/

footer {
  width: 100%;
  background-color: #000;
  text-align: center;
  color: #b2b2b2;
  font-size: 14px;
  font-weight: 300;
  padding: 0px 0px 60px 0px;
}
.footerlinks {
  font-weight: 400;
  font-size: 16px;
  padding: 0px 0px 10px 0px;
  color: #b2b2b2;
}
footer a {color: #b2b2b2 !important;}
footer a:hover {color: #fff !important;}

.footerlogo {margin: 0px; padding: 0px 0px 30px 0px; width: 100%;}



/* ----------------------------------------------------------------
  Pre-Footer Bar
-----------------------------------------------------------------*/

.prefooterbar {
  background-color: #dcdcdc;
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 40px 20px 20px 20px;
    text-align: center;
}
.prefooterbar-content {font-size: 18px !important; font-weight: 300;}
.prefooterbar-content a {text-decoration: underline !important;}
.prefooterbar p, .prefooterbar-content p, .prefooterbar .prefooterbar-content p {font-size: 18px !important; font-weight: 400;}

.prefooterbarheading {
  color: #000000;
  font-size: 24px;
  font-weight: normal;
  padding: 0px 0px 20px 0px;
  vertical-align: middle;
  font-family: 'poppins', 'Arial', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

ul.thesponsors {margin: 0px; padding: 0px;}
ul.thesponsors li {
  list-style-type: none;
  display: inline-block;
  margin: 0px;
  padding: 0px 20px 40px 20px;
}


@media (min-width: 992px) {
  .sponsorsbar {padding: 40px 20px 0px 20px;}
}


/* ----------------------------------------------------------------
  Inside Page Template
-----------------------------------------------------------------*/

.headerarea-pe {
  position: relative;
}

.masthead-pe {
  position: relative;
  width: 100%;
  z-index: 1;
}


.pex-pageheading {
  width: 100%;
  position: absolute;
  border-bottom: none;
  text-align: center;
  z-index: 10;

  bottom: 0;
  left: 0;

  padding: 0px 10px 10px 10px;
  color: #fffce6;
  font-family: 'westsac', 'Georgia', serif;
  font-style: normal;
  font-size: 28px;
  line-height: normal;
  text-transform: none;
  font-weight: normal;
  background: transparent;
  letter-spacing: 0px;
  background-color: transparent !important;
  background-image: url(../images/pe-pageheaderbg.png);
  background-repeat: repeat-x;
  background-size: 250px auto;
  background-position: top left;
  filter: none;
}

.boxedheading {
  display: inline-block;
  background-color: #5a2705;
  border-radius: 3px;
  padding: 5px 10px 3px 10px;
}

@media (min-width: 992px) {

  .pex-pageheading {
    padding: 10px 10px 30px 10px;
    font-size: 36px;
    background-size: 552px auto;
  }
  .boxedheading {
    border-radius: 5px;
    padding: 10px 25px 8px 25px;
  }

}

.thecontentstuff {
  width: 100%;
  background-color: #fffce6;
  padding: 20px 0px 0px 0px;
  background-image: url(../images/pe-contentbg.jpg);
  background-repeat: repeat-x;
  background-position: bottom left;
}

.enrollnowbar {
  width: 100%;
  text-align: center;
  padding: 40px 0px 20px 0px;
}


.enrollnowbar a:not(.btn):not(.btn-link):not(.text-decoration-underline):not(.more-link) {
  text-decoration: none !important;
}

.hkdpbjuniorlogos {padding: 0px 0px 30px 0px; text-align: center;}
.hkdpbjuniorlogos img {width: 85%; height: auto;}

@media (min-width: 768px) {
  .hkdpbjuniorlogos img {width: auto; height: auto;}
}