/*Header styling*/
html{
      line-height: 2; /* Sets the line height to 2 times the current font-size - eg if font size is 1.5rem, line height = 3rem. */
      background-color: #B7B7B7;
}

#logo {
  float: left;
  margin-top: 23px;
  margin-left: 24px; 
}

header {
  background: #2FBEC2;
  margin-top: -1px;
  
}

#header-text h1 {
  color: white;
  text-align: center;
  padding-top: 75px;
  font-family: "Arial";
  padding-right: 50px;
}


/*Navigation styling*/
body {
  max-width: 1200px;
  margin: auto;
  font-size: 17px;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 0.4px;
}

.theme_color {
  background-color:#2FBEC2;
}

.nav-pills .nav-link.active {
  background-color: #28a0a4;
}

.navbar-nav {
      margin-top: 10px;
}

li {
  padding: 0 28px 0 28px;
}


/*Footer styling*/

footer{
  float: left;
  width: 100%; /* Ensures footer takes up whole page width (1200px max) */
}

footer ul,
footer h5{
  text-align: center;
}

#footer-content {
  background-color: #2FBEC2;
  overflow: hidden;
  padding: 0;
}

/* Icons change color when user hovers over them */

.fab:hover {
  color: black; 
}

#contact-footer {
      padding-bottom: 14px;
}


/*Safety page styling*/
#left_container {
  float: left;
  background-color: #fafafa;
  padding-bottom: 10px;
}

#right_container {
  float: left;
  background-color: #fafafa;
}

#safety {
  background-color: #fafafa;
  padding-top:10px;
}

#safety p{
  margin: 5px 0 5px 10px;
}

#safety h2{
  margin: 5px 0 5px 10px;
  color:#E42D26;
}

#safety a {
  margin: 5px 0 5px 10px;
}



/*Contact us page styling*/
#contact{
      background-color: #fafafa;
      position: relative;
}

#contact h2{
      text-align: center;
      color:#E42D26;
}

#contact p{
      text-align: center;
}

.center {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
}

.line_break {
      height: 20px;
}




/*Modal styling*/
.modal-body input {
      margin: 5px;
      width: 200px;
    }
    
.modal-body textarea {
margin: 5px;
width: 300px;
height: 200px;
}

.modal-header {
position: relative;
background-color:#2FBEC2;
border: none;
}

.modal-body {
background-color:#2FBEC2;
}

.modal-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.btn-primary {
background-color: #186466;
border-color: #186466;
}

.btn-primary:hover {
background-color:#2FBEC2;
border-color: #2FBEC2;
}

.modal-header img{
height: 40px;
width: auto;
}

.modal-footer {
padding-bottom: 0;
padding-top: 16px;
}

@media (max-width: 992px) {
  .outline {
      border: none;
      height:0;
  }
  li {
      padding: 0;
  }
}




/* start of components that are constant on joining page*/
#joining-page-content h2 {
        color: #E42D26;
}

#joining-page-content p{
        text-align: justify;
}

#joining-page-photos  {
        display: flex;
}

/* end of components that are constant on joining page*/

/* start of components that are constant on additional information page*/
#additional-info-content h2 {
        color: #E42D26;
}

#additional-info-content p{
        text-align: justify;
      }

#list-heading h5{
        color:#E42D26;

}
/* end of components that are constant on additional information page*/

/* Styling for XS Viewport */
@media (max-width: 319px) { 

  #header-text h1 {
        font-size: 14px;
        padding-right:15px;
        padding-top: 41px;

  }

  header {
        padding-bottom: 54px;
  }

  #joining-page-text-one {
        padding-top: 10px;
  }

  #joining-page-text-two {
        padding-top: 10px;
  }

  #joining-page-text-three {
        padding-bottom: 1px;
        padding-top: 10px;   
  }

  #logo {
        margin-left: 12px;  
        margin-top: 23px;
  }

  #additional-info-text-one {
        padding-top: 10px;
  }

  #add-info-img-one {
        padding-bottom: 15px;
  }

  #additional-info-text-two {
        padding-top: 10px;
  }
  
  #club-portal-list {
        padding-bottom: 1px;
  }

  /* styling for carousel for XS viewport */
  #carouselExampleIndicators {
      align-items: center;
      display: flex;
      flex: 1;
      float: right;
      height: 100%;
      padding: 5px 10px 20px 5px;    
}

#image-two-joining {
      margin-left: 3px;
}

}
  

@media (min-width: 320px) { 

  #header-text h1 {
        font-size: 14px;
        padding-right:15px;
        padding-top: 41px;
  }

  header {
        padding-bottom: 54px;
  }


  #joining-page-text-one {
        padding-top: 10px;
  }

  #joining-page-text-two {
        padding-top: 10px;
  }

  #joining-page-text-three {
        padding-bottom: 1px;
        padding-top: 10px;
  }

  #logo {
        margin-left: 14px;
        margin-top: 23px; 
  }


  #add-info-img-one {
        padding-bottom: 15px;
  }

  #additional-info-text-one {     
        padding-top: 10px;
  }
    
   #add-info-img-one {
        padding-bottom: 15px;
  }
    
   #additional-info-text-two {
        padding-top: 15px;
  }

  #club-portal-list {
        padding-bottom: 1px;
  }

  /* styling for carousel for XS viewport */
  #carouselExampleIndicators {
        align-items: center;
        display: flex;
        flex: 1;
        float: right;
        height: 100%;
        padding: 5px 10px 20px 5px;    
}

#image-two-joining {
      margin-left: 3px;
}
}

@media (min-width: 375px) { 

  #header-text h1 {
        font-size: 17px;
        padding-right:15px;
        padding-top: 45px;
  }

  header {
        padding-bottom: 54px;
  }

  #logo {
        margin-left: 14px;  
        margin-top: 23px;
  }
}

@media (min-width: 425px) { 

  #header-text h1 {
        font-size: 19px;
        padding-right:15px;  
        padding-top: 49px;
  }

  header {
        padding-bottom: 54px;
  }

  #logo {
        margin-left: 16px;  
        margin-top: 23px;
  }
}

@media (min-width: 509px) { 

  #header-text h1 {
        font-size: 22px;
        padding-right:15px;  
        padding-top: 52px;
  }

  header {
        padding-bottom: 54px;
  }

  #logo {
        margin-left: 24px;   
        margin-top: 23px;     
  }
}

@media (max-width: 524px) { 


}



@media (min-width: 576px) { 

  #header-text h1 {
        font-size: 25px;
        padding-right:15px;  
        padding-top: 55px;
  }

  header {
        padding-bottom: 54px;
  }

  #joining-page-text-one {
        padding-top: 10px;
  }

  #additional-info-text-one {
        padding-top: 10px;
  }

  #add-info-img-one {
        padding-bottom: 25px;
  }

}

/* Styling for S Viewport */
@media (min-width: 577px) {

  #header-text h1 {
        font-size: 26px;
        padding-right:15px;  
        padding-top: 56px;
  }

  header {
        padding-bottom: 58px;
  }
}


@media (min-width: 639px) {

      #header-text h1 {
            font-size: 28px;
            padding-right:15px;  
            padding-top: 60px;
      }
    
      header {
            padding-bottom: 58px;
      }
    }


@media (min-width: 711px) {

      #header-text h1 {
            font-size: 33px;
            padding-right:15px;  
            padding-top: 65px;
      }
    
      header {
            padding-bottom: 58px;
      }
    }


/* Styling for M Viewport */
@media (min-width: 768px) {

  #header-text h1 {
        font-size: 35px;
        padding-right:15px;
        padding-top: 64px;     
  }

  header {
        padding-bottom: 51px;
}

#additional-info-text-one {
        padding-top: 10px;
}

#add-info-img-one {
        padding-bottom: 30px;
}

#additional-info-text-three {
        padding-top: 10px;
}

#additional-info-text-two {
        padding-top: 20px;
}

}

/* styling for text that tells user 
how to interact with Gallery */
#checkout  {
      font-size: 20px;
      padding: 20px;
      text-align: center;
      width: 100%;      
}

@media (min-width: 849px) {

  #header-text h1 {
        font-size: 40px;
        padding-right:15px;  
        padding-top: 68px;
  }

  header {
        padding-bottom: 65px;
}
}

@media (min-width: 907px) {

      #header-text h1 {
            font-size: 42px;
            padding-right:15px;  
            padding-top: 75px;
      }
    
      header {
            padding-bottom: 65px;
}
}

@media (min-width: 983px) {

      #header-text h1 {
            font-size: 45px;
            padding-right:15px;  
            padding-top: 80px;
      }
    
      header {
            padding-bottom: 65px;
}
}

/* Styling for L Viewport*/
@media (min-width: 992px) {

  #header-text h1 {
        font-size: 42px;
        padding-right:15px;  
        padding-top: 78px;
  }

  #image-one-joining {
        margin-left: -9px;
  }

  #image-two-joining {
      margin-left: 10px;
}

  header {
        padding-bottom: 90px;
  }

  #womens-race-photo {
        float: right;
        margin-top: -103px;
        padding-left: 14px;
  }

  #joining-page-content h2 {
        font-size: 30px;
  }

  #joining-page-content p {
        font-size: 15.7px;
    }

  #joining-page-text-two {
        margin-top: 30px;
  }

  #joining-page-photos {
        padding-left: 10px;
        padding-top: 0px;
  }

  #additional-info-text-one {
        padding-right:10px;
        padding-top: 10px;

}

#add-info-img-one {
        float: right;
        margin-top: -195px;
        padding-left: 19px;
}

#add-info-img-two {
        float: right;
        margin-top:55px;
        margin-right: 1px;
        padding-left: 19px;
}

#additional-info-text-three {
        padding-right:20px;
        padding-top: 0px;

}

#additional-info-content h2 {
        font-size: 27px;
}

#additional-info-content p {
        font-size: 15px;
}

#additional-info-content li {
        font-size: 14px;
}

#id-card-list {
        margin-top:-7px;
}

#additional-info-text-two {
        padding-right:20px;
        padding-top: 0px;
}
/*fix the issue of left and right container not having the same height*/
#right_container {
      height: 437px;
}
/* Styling for text on home page 
that ensures text and images are 
aligned well */  
#text-1, #text-2, #text-3 {
      float: left;
      font-size: 16.6px;
      padding: 5px;
      text-align: justify;     
}

/* styling for carousel for LG viewport */
#carouselExampleIndicators {
      align-items: center;
      display: flex;
      float: right;
      flex: 1;
      height: 100%;
      padding: 5px 5px 20px 10px;    
}

}

@media (max-width: 991px) {
      /* does not display this image 
      for viewports up to 991px  */
      #masters-crew img {
            display: none;
      }

      /* defines image thumbnail appearance 
      for gallery */
      .item {
            width: 50%;
            height: 50%;
      }
      
}


/* these three media queries outline
how the text on the home page changes
in size to ensure optimal alignment
with adjacent image */
@media (min-width: 1000px) {
      #text-1, #text-2, #text-3 {
            font-size: 17.5px;
            float: left;
            padding: 5px;
            text-align: justify;
      }
}
    
@media (min-width: 1040px) {
        #text-1, #text-2, #text-3 {
            font-size: 18px;
            float: left;
            padding: 5px;
            text-align: justify;      
        }
}

@media (min-width: 1111px) {
      /*fix the issue of left and right container not having the same height*/
      #right_container {
            height: 413px;
      }
}

@media (min-width: 1150px) {
        #text-1, #text-2, #text-3 {
            font-size: 20.5px;
            float: left;
            padding: 5px;
            text-align: justify;
        }
}


/* Styling for XL Viewport */
@media (min-width: 1200px) {

  #header-text h1 {
        font-size: 52px;
        padding-right:15px;
        padding-top: 84px;
  }

  header {
        padding-bottom: 90px;
  }

  #image-one-joining {
        margin-left: -9px;
  }

  #womens-race-photo {
        float: right;
        margin-top: -160px;
        padding-left: 14px;
  }

  #joining-page-photos {
        margin-top: 20px;
        padding-left: 10px;
  }

  #joining-page-content h2 {
        font-size: 38px;
}

  #joining-page-content p {
        font-size: 20px;
  }

  #joining-page-text-two {
        margin-top: -3px;
  }

  #additional-info-text-one {
        padding-top: 10px;
    }
    
    #add-info-img-one {
        float: right;
        margin-top: -220px;
        padding-left: 19px;
    }
    
    #add-info-img-two {
        float: right;
        margin-right: 1px;
        margin-top: 55px;
        padding-bottom:25px;
        padding-left: 19px;
    }
    
    #additional-info-text-three {
        padding-top: 15px;
    }
    
    #additional-info-content h2 {
        font-size: 30px;
    }
    
    #additional-info-content p {
        font-size: 17px;
    }
    
    #additional-info-content li {
        font-size: 15.5px;
    }
    
    #id-card-list {
        margin-top:0px;
    }
    
    #additional-info-text-two {
        margin-top: 0px;
        padding-top: 0px;
        }
        
      #text-1, #text-2, #text-3 {
            font-size: 20.5px;
            float: left;
            padding: 5px;
            text-align: justify;
      }
}


/* Styling for XXL Viewport */
@media (min-width: 1400px) {

  #header-text h1 {
        font-size:60px;
        padding-top: 90px;
  }

  header {
        padding-bottom: 90px;
  }

  #image-one-joining {
        margin-left: -9px;
  }

  #womens-race-photo {
        float: right;
        margin-top: -161px;
        padding-left: 14px;
  }

  #joining-page-photos {
        margin-top: 20px;
        padding-left: 10px;
  }

  #joining-page-content h2{
        font-size: 38px;
  }

  #joining-page-content p{
        font-size: 20.5px;
  }

  #joining-page-text-two {
        margin-top: -14px;
  }

  #joining-page-text-three {
        padding-top: 20px;
}

#additional-info-text-one {
        padding-top: 10px;
    }
    
    #add-info-img-one {
        float: right;
        margin-top: -238px;
        padding-left: 19px;
    }
    
    #add-info-img-two {
        float: right;
        margin-right: 1px;
        margin-top: 50px;
        padding-bottom:25px;
        padding-left: 19px;
    }
    
    #additional-info-text-three {
        padding-top: 5px;
    }

    #additional-info-text-three p{
        margin-top: -5px;
    }

    #additional-info-text-two p {
        margin-top: -10px;
    }
    
    #additional-info-content h2 {
        font-size: 38px;
    }
    
    #additional-info-content p {
        font-size: 18px;
    }
    
    #additional-info-content li {
        font-size: 17.5px;
    }
    
    #id-card-list {
        margin-top:0px;
    }

    
    #additional-info-text-two {
        margin-top: -5px;
        padding-top: 0px;
        }

      #text-1, #text-2, #text-3 {
            font-size: 21px;
            float: left;
            padding: 5px;
            text-align: justify;
      }



}

/* Styling for Home Page */
#main-section-1 {
      display: flex;
      /* 
      Then we define the flow direction 
      and if we allow the items to wrap 
      Remember this is the same as:
      */
      flex-direction: row;
      flex-wrap: wrap;
      flex-flow: row wrap;
      padding: 5px;
      /* Then we define how is distributed the remaining space */
}

/* styles subheading on home page */
.who-we-are {
      color: #E42D26;
      font-size: 30px;
      padding-bottom: 10px;
      padding-top: 0px;
      padding-left: 0px;
}
    
/* styles Our Values heading */
#who {
      padding-top: 40px;
      padding-bottom: 50px;
}

/* styles first block of test on home page */
#text-1 {
      float: left;
      padding: 0px 10px 5px 5px;
      text-align: justify;
        
}
    
/* styles second block of test on home page */
#text-2 {
      float: left;
      padding: 5px;
      padding-top: 25px;
      text-align: justify;
}
   
/* styles third block of test on home page */
#text-3 {
      float: left;
      padding: 5px;
      text-align: justify;
}
    
/* padding is opposite for these two images as 
they are adjacent and must be separated down 
the middle by the same amount as "text-1" and 
the carousel are separated */
#men-race {
      padding: 5px 10px 5px 5px;
}
    
#masters-crew {
      padding: 5px 5px 5px 10px;
}

/* Styling for Gallery Page */

/* heading for gallery page */
.gallery-text {
      color: #E42D26;
      font-size: 30px;
      padding-top: 20px;
      text-align: center;
}

/* styles text below gallery heading */
#checkout  {
      padding: 10px;
      text-align: center;
      width: 100%;
}

/* container that gallery sits in*/
.container-fluid {
      padding-bottom: 30px;
      text-align: center;
}

/* user can hover over image on gallery page 
and the hover feature will be a transitionn 
effect */
.item {
      transition: 0.5s ease-in-out;
}

/* defines the strenght of the hover feature */
.item:hover {
      filter: brightness(60%)
}



/* modal styling */

.modal-body input {
      margin: 5px;
      width: 200px;
    }
    
.modal-body textarea {
      margin: 5px;
      width: 300px;
      height: 200px;
}

.modal-header {
      position: relative;
      background-color:#2FBEC2;
      border: none;
}

.modal-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.modal-body {
      background-color:#2FBEC2;
}

.btn-primary {
      background-color: #186466;
      border-color: #186466;
}

.btn-primary:hover {
      background-color:#2FBEC2;
      border-color: #2FBEC2;
}