/*------------------------
Default Page Styling
------------------------*/
body {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-family: 'Montserrat', sans-serif;
}

p {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

/*------------------------
Header
------------------------*/
header {
  background-color: #18453B;
  color: white;
  display: flex;
  padding: 0.5em 0 0.5em 0;
  justify-content: space-between;
}

.header-info {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

#title-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

#title {
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
}

#title:visited, #title:hover, #title:focus {
  text-decoration: none;
  color: white;
}

.nav-links, .sub-nav-links {
  font-weight: 700;
  text-decoration: none;
  color: white;
  justify-content: space-between;
}

#subheader-links {
  overflow: hidden;
  background-color: #5D5A5E;
  position: relative;
  /* margin: 1em 0; */
  display: none;
}

#header-links {
  overflow: hidden;
  background-color: #535054;
  position: relative;
  margin: 1em 0;
  display: none;
}

#header-links p:hover, #header-links p:focus {
  background-color: #97A2A2;
  color: #18453B !important;

}

#header-links p {
  margin: 0 0 !important;
  padding: 1em;
  min-width: 90px;
}

#menu {
  /* background: white; */
  display: block;
  position: absolute;
  color: white;
  right: 0;
  font-size: 1.5em;
  padding: 12px 1em;
}

#menu:hover, #menu:active, #menu:focus {
  background-color: #f2f2f2;
  color: #18453B;
}

#angle {
  -moz-transition: transform 0.2s;
  -webkit-transition: transform 0.2s;
  transition: transform 0.2s;
}

.flip {
  transform: rotate(-180deg);
}

/*------------------------
Hero
------------------------*/
h1 {
  font-weight: 900;
  text-transform: uppercase;
}

#hero-image {
  object-fit: contain;
  object-position: right;
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

#hero {
  position: relative;
  color: white;
  display: flex;
  overflow: hidden;
  /* width: 100%; */
}

#hero-text {
  position: absolute !important;
  -webkit-text-shadow: 4px 7px 25px black;
  -moz-text-shadow: 4px 7px 25px black;
  text-shadow: 4px 7px 25px black;
}

/*------------------------
Notices
------------------------*/
#notices h2 {
  font-weight: 900;
  text-transform: uppercase;
  color: #18453B;
  margin-block-start: 0;
}

#notices-title {
  margin-block-end: 0;
}

#notices-list {
  margin-block-start: 0;
  list-style-type: none;
  padding: 0;
  margin-block-end: 1em;
  color: black;
}

.signuplink:active, .signuplink:visited {
  color: #18453B;

}

.signuplink:hover, .signuplink:focus {
  color: #535054;
  font-weight: 700;
}

#notices {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

/*------------------------
Useful Links
------------------------*/
#useful-links {
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
}

#useful-links a {
  text-decoration: none;
  width: 100%;
  text-align: center;
}

#box1 {
  color: white;
  background-color: #18453B;
}

#box2 {
  color: #18453B;
  background-color: #97A2A2;
}

#box3 {
  color: white;
  background-color: #535054;
}

#box1, #box2, #box3 {
  display: flex;
  align-items: center;
  text-decoration: none;
  justify-content: center;

}

#box1:hover, #box2:hover, #box3:hover, #box1:focus, #box2:focus, #box3:focus {
  font-weight: 900;
}

/*------------------------
Sports Links
------------------------*/
#sports {
  font-weight: 900;
  text-transform: uppercase;
  color: #18453B;
}

#sports-links li {
  transition: background-color 0.2s ease;
  text-align: center;
  border-radius: 3px;
  margin-top: 1em;
  padding: 2.5em 0;
  background-color: #F2F2F2;
}

#sports-links {
  list-style-type: none;
  padding: 0;
}

#sports-links li:hover, #sports-links li:focus {
  background-color: #18453B;
  color: #F2F2F2;
  cursor: pointer;
}

/*------------------------
Sign Up Links
------------------------*/
.signuplink, .registration-message {
  color: white !important;
  display: flex;
  padding: 1.2em 2em;
  text-decoration: none;
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 1.5em;
}

.signuplink:hover, .registration-message:hover, .signuplink:focus, .registration-message:focus {
  text-decoration: underline;
}

#item1 {
  background-color: #18453B;

}

#item2 {
  background-color: #535054;
}

/*------------------------
NCAA Note
------------------------*/
#ncaa {
  background-color: #CBD1D1;
  padding: 1em 0;
}

#ncaa-rules {
  color: #18453B;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}

/*------------------------
Footer
------------------------*/
.footer {
  background-color: #18453B;
  color: white;
  padding: 0.5em 0;
}

#copyright {
  text-align: center;
}

#follow-us {
  font-weight: 700;
}

.social-media img{
  width: auto;
  height: 20px;
  padding: 0.5em;
}

.social-media {
  display: flex;
  align-items: center;
}

.social-link {
  margin: 1em 2em 2em 0;
  display: flex;
  text-decoration: none;
}

.social-link i {
  color: white;
}

.social-link i:hover, .social-link i:focus {
  color: gray;
  transition: color 0.2s ease;

}

.social-link:visited, .social-link:active {
  color: white;
}

 #spartan-fund {
   color: white;
   text-decoration: none;
   font-weight: 700;
 }

#spartan-fund:hover, #spartan-fund:focus {
  text-decoration: underline;
  color: gray;
  transition: color 0.2s ease;
}
/*------------------------
Modal
------------------------*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 1em; /* Location of the box */
  margin-bottom: 2em;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#modal-content {
  background-color: #F2F2F2;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  width: 85%;
}

.modal-add h1 {
  margin-block-start: 0;
  margin-bottom: 10px;
}

.sport-file {
  display: block;
  margin-bottom: 1em;
  background-color: lightgrey;
  color:black;
  text-decoration: none;
  height:2rem;
  margin-top: auto;
  margin-bottom: auto;
  padding: 12px 10px 0px 10px;
  border-left: 1px solid black;
  font-size: small;
}

.camp-info  {
  background-color: #FEFEFE;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 8px;
}

.camp-info h4 {
  margin: 5px 0 5px 0;
}

.camp-info h5 {
  margin: 10px 0 3px 0;
  font-size: 1em;
}

.camp-info p {
  font-size: 0.9em;
}

.camp-info .sign-up {
  text-decoration: none;
  padding: 0.5em;
  margin: 10px 0 10px 0;
  display: block;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background-color: #18453B;
}

.camp-info a.sign-up:hover, .camp-info a.sign-up:active, .camp-info a.sign-up:focus {
  background-color: #102c26;
}

.camp-info .sign-up.disable {
  color: #18453B;
  background-color: #97A2A2;
  cursor: default;
}

#exit {
  text-align: right !important;
  font-size: 1.5em;
  font-weight: 900;
  color: white;
  text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  float: right;
  padding-right: 5px;
}

.bad-news {
  background-color: tomato;
  font-weight: bold;
  border-radius: 2px;
  width: 300px;
}

.good-news {
  background-color: palegreen;
  font-weight: bold;
  border-radius: 2px;
  width: 300px;
}

.warning-news {
  background-color: orange;
  font-weight: bold;
  border-radius: 2px;
  width: 300px;
}

/*------------------------
Mobile Display
------------------------*/
@media screen and (max-width: 767px){
  body {
    margin: 0 1em 0 1em;
  }

  /* Header */
  header, #hero, #useful-links, #ncaa, .footer, #header-links, .calltoaction {
    margin: 0 -1em 0 -1em;
  }

  header .header-info, #ncaa-rules, .footer-info {
    margin: 0 1em 0 1em;
  }

  /* Hero */
  #title {
    padding-left: 0.5em;
    font-size: 0.75em;
  }

  h1 {
    padding-right: 1em;
    font-size: 6.5vw;
    line-height: 0.90em;
  }

  #hero-image {
    object-fit: cover;
    height: 400px;
    width: auto;
  }

  #hero-text {
    top: 20%;
    padding-left: 16px;
  }

  /* Useful Links */
  #box1, #box2, #box3 {
    height: 125px;
    font-size: 1.5em;
  }

  /* Sports Links */
  #sports-links li {
    font-size: 1.5em;
  }

  /* Footer */
  #copyright {
    font-size: .85em;
  }

  #follow-us {
    font-size: 1.2em;
    padding-top: 1em;
  }

  .social-media i{
    font-size: 2em;
  }




}

/*------------------------
Tablet Display
------------------------*/

@media screen and (min-width: 450px){
  #hero-image {
    height: 370px;
    width: auto;
  }

  #hero-text {
    top: 25%;
  }
}

@media screen and (min-width: 768px){
  body {
    margin: 0 5em 0 5em;
  }

  /* Header */
  header, #hero, #useful-links, #ncaa, .footer, #header-links, .calltoaction {
    margin: 0 -5em 0 -5em;
  }

  header .header-info, #ncaa-rules, .footer-info{
    margin: 0 5em 0 5em;
  }

  /* Hero */
  #title {
    padding-left: 0.5em;
    font-size: 1em;
  }

  h1 {
    padding-right: 1em;
    font-size: 3em;
    line-height: 0.90em;
  }

  #hero-image {
    height: 500px;
    width: auto;
    object-fit: cover;

  }

  #hero-text {
    top: 90px;
    padding-left: 80px;
    font-size: 7.5vw;
  }

  /* Useful Links */
  #box1, #box2, #box3 {
    height: 125px;
    font-size: 1.5em;
  }

  /* Sports Links */

  #sports-links {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0.2em;
    justify-content: space-between;

  }

  #sports-links li {
    font-size: 1.5em;
    width: 49%;
  }

  /* NCAA rules */
  #ncaa-rules {
    padding: 2em 1.5em;
  }

  /* Footer */
  #follow-us {
    font-size: 1.2em;
    padding: 0.5em 0 0.5em 0;
  }

  .social-media i{
    font-size: 2em;
  }
}

/*------------------------
Laptop Display
------------------------*/
@media screen and (min-width: 1024px){
  body {
    margin: 0 4em 0 4em;
  }

  /* Header */
  header, #hero, #useful-links, #ncaa, .footer, #header-links,.calltoaction {
    margin: 0 -4em 0 -4em;
  }

  header .header-info, #ncaa-rules, .footer-info {
    margin: 0 4em 0 4em;
  }

  #menu {
    padding: 0.5em 1em;
    display: none;
  }

  header {
    height: 35px;
  }
  #header-links {
    display: flex !important;
    overflow: hidden;
    background-color: inherit;
  }

  .nav-links {
    width: 135px;
  }

  #header-links p {
    text-align: center;
  }

  #subheader-links p{
    text-align: left;
  }

  #subheader-links {
    z-index: 2;
    position: fixed;
    top: 51px;
    width: 250px;
    /* margin-left: -1em; */

  }

  /* Hero */
  #hero-text {
    padding-right: 9em;
    font-size: 4.9vw;
    line-height: 0.90em;
    padding-top: 0.5em;
    padding-left: 64px;
  }
  #hero-image {
    object-fit: cover;
    width: auto;
    margin: 0 0 0 0;
  }

  /* Notices */
  #notices {
    border: 10px solid #18453B;
    border-radius: 20px;
    padding: 1em;
    position: absolute;
    background: rgba(255, 255, 255, 0.89);
    z-index: 1;
    top: 15vh;
    right: 0;
    margin-right: 2em;
    width: 300px;
  }


  /* Useful Links */
  #useful-links {
    display: flex;
    flex-wrap: wrap !important;
    flex-direction: row;
  }
  #useful-links a{
    width: 33.33333%;
    text-align: center;
  }

  #box1, #box2, #box3 {
    padding: 0 2.3em;
    height: 230px;
  }

  /* NCAA rules */
  #ncaa-rules {
    padding: 1em 1.5em;
  }

}

/*------------------------
Desktop Display
------------------------*/
@media screen and (min-width: 1440px){
  /* Hero */
  h1 {
    padding-top: 0;
    padding-right: 11em;
    font-size: 3em;
  }

  #hero-text {
    padding-right: 13em;

    font-size: 4vw;
  }

  #hero-image {
    object-position: 50% 80%;
    height: 650px;
  }

  /* Sports Links */
  #sports-links li {
    font-size: 1.5em;
    width: 32%;
  }

  /* Notices */
  #notices {
    margin-right: 3em;
    width: 400px;
  }

  /* NCAA rules */
  #ncaa-rules {
    padding: 1em 5em;
  }
}

/*-------------------------------
Camp Modal Images
-------------------------------*/
 .title-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  border-radius: 8px 8px 0px 0px;
 }
 #Baseball-bg-image {
  background-image: url("../images/sport-hero-images/Baseball.JPG");
 }
#Spirit\/Cheer\/Dance-bg-image {
  background-image: url("../images/sport-hero-images/Cheerleading.jpeg");
}
#Rowing-bg-image {
  background-image: url("../images/sport-hero-images/Rowing.jpg");
  background-position-y: 40%;
}
#Field\ \Hockey-bg-image{
  background-image: url("../images/sport-hero-images/Field-Hockey.png");
  background-position-y: 95%;
}
#Softball-bg-image{
  background-image: url("../images/sport-hero-images/Softball.png");
}
#Soccer-bg-image{
  background-image: url("../images/sport-hero-images/Soccer.jpg");
}
#Women\'s\ \ID\ Soccer-bg-image{
  background-image: url("../images/sport-hero-images/Womens-Soccer.png");
  background-position-y: 30%;
}
#Men\'s\ \ID\ Soccer-bg-image {
  background-image: url("../images/sport-hero-images/Men-Soccer.jpeg");
  background-position-y: 20%;
}
#Volleyball-bg-image {
  background-image: url("../images/sport-hero-images/Volleyball.jpg");
  background-position-y: 40%;
}
#Golf-bg-image {
  background-image: url("../images/sport-hero-images/Golf.png");
  background-position: right;
  background-size: contain;
  background-color: #FFFFFF;
}
#Boys\ Basketball-bg-image, #Girls\ Basketball-bg-image {
  background-image: url("../images/sport-hero-images/BreslinPracticeFloor.jpg");
}
#Hockey-bg-image {
  background-image: url("../images/sport-hero-images/MunnIceArena.jpg");
}
#Football-bg-image {
  background-image: url("../images/sport-hero-images/SpartyFootball.png");
}
#Wrestling-bg-image {
  background-image: url("../images/sport-hero-images/Wrestling.jpg");
}
@media screen and (max-width: 640px){
  #Hockey-bg-image {
    background-position: 30%;
  }
  #Football-bg-image {
    background-position-x: 30%;
  }
  #Wrestling-bg-image {
    background-image: url("../images/sport-hero-images/Wrestling.jpg");
    background-position: 47%;
  }
  #Men\'s\ \ID\ Soccer-bg-image {
    background-position-x: 75%;
  }
}
 .title-text {
  color: white;
  text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  position: relative;
  top: 400px;
  height: 3vw;
  width: 100%;
  font-size: 2.25vw;
 }
 .sport-file-flex {
  display: flex;
  flex-direction: row;
  justify-content: start;
  position:absolute;
  top: 494px;
 }
.sport-file:last-child {
  border-radius: 0px 8px 0px 0px;
}
.sport-file:hover {
  text-decoration: underline;
}
@media screen and (max-width: 640px) {
  .title-text {
    top: 420px;
    font-size: 4.5vw;
  }
}