/* colors for our site based on the branding
light blue: c8eef7
cream: fcfcec
blue from the logo: 6b87bd
dark blue from logo: 57617a
turquise from hero pic: 5ed1cc
peach skin tone: e9c5af
bright blue: 02bde0
*/





body, html {
    height: auto;
    font-family:'gill sans';
    font-weight: 300;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 1px;
    color:#000000;
    margin:0;
}

h1,h2,h3,h4,h5 {
    font-weight: normal;
    color: #57617a;
    text-align:center;
}

h2 {font-size: 22px;}
h2.light_head {color:#ffffff;}
h2.center{font-size:34px;}
h2.center_main{font-size:34px; color:white;}


.centered_content {
  max-width: 1600px;
    margin: auto;
    height: 100%;

	}

  .second_centered{
    max-width: 1600px;
      margin: auto;
      height: 100%;
  }

  p.white_block{ background-color: white;
  font-size:20px;font-style: italic;
  line-height: 24px;
width:80%;
padding:20px;}


  .right_block {
    width:45%;
    float:right;
  }


  .table_holder {
    background-color: #fcfcec;
     float: right;
     margin-right: 5px;
     padding: ;
     width: 49%;
     height: auto;

  }

  .table_holder_right {
    background-color: #fcfcec;
     float: right;
     margin: ;
     padding: ;
     width: 49%;
     height: auto;

  }

  .intro_box {

     float: left;
     margin-right:5px;
     width: 54%;
     background-color: #f3d209;
     padding-top:20px;
     height: auto;
  }

  ul.visitor_list {
    margin:0 auto;
    width:70%;}

  .intro_text
  {width:80%;
    padding:20px;
    padding-top:0;
  margin:0 auto;}

  .content_team {

     width:70% ;
     padding-top:20px;
     float:right;
     clear:both;
     padding-bottom:20px;
     height: auto;

  }

  .duck_holder{
    width:30%;
    float:left;
    margin-top:30px;

  }

  .otherbox {
    width:45% ;
    padding-top:20px;
    margin:0 auto;
    background-color: #fffffff;
    height: auto;
  }
  .about_text
  {width:80%;
    padding:20px;
    padding-top:0;
  margin:0 auto;
}

.pool_text
{width:80%;
  padding:20px;
  padding-top:0;
margin:0 auto;
}
.access_text
{width:80%;
  padding:20px;
  padding-top:0;
margin:0 auto;
}
  .top_strip{background-color: #02bde0;height:60px;}

  .pool_container {
  background-color: #f3d209;
  color:inherit;
  float:right;
  width:65%;
  height:auto;
  margin-bottom:30px;
  padding:10px 0;

  }

  img.pool{}

  .poolpic{
    float:left;
    width:30%;
    padding:20px;
    margin:0 auto;
    display:block;
  }
  .swimmerbox{
    float:left;
    width:30%
  }
  .access_container{
  background-color: #ffffff;
  color:inherit;
  padding:10px;
  float:right;
  width:65%;
  height:auto;

  }

  #extend_pool_div {

    color:inherit;
     float: left;
     height: auto;
     display: block;

  }

  #extend_intro_div {
    clear:both;
    color:inherit;
     float: left;
     height: auto;
     display: block;

  }

  #extend_access_div {

     float: left;
     color:inherit;
     height: auto;
     display: block;



  }

  .extend_button {
    text-align:center;
    color:#6b87bd;
    padding:5px 7px;
    background-color: #fcfcec;
    border:1px solid #6b87bd;
    border-radius: 5px;
    margin:0 auto;
    display:none;
  }

.footer{
  padding:20px;
  background-color: #5ed1cc;
  clear:both;
}

.copyrightbar{
  background-color: black;
  padding:10px;
  bottom:0;
}


p.address{
  color:#ffffff;
  font-size: 17px;
  line-height: 19px;
}
p {font-size:20px;
line-height: 22px;}


p.address a:link {color:white;}

p.floatright{
  color:#ffffff;
  font-size: 15px;
  float:right;
}
.centered_text{
  text-align: center;
  font-size:24px;
  line-height: 26px;
  font-weight:300;
  font-style:italic;
  width:80%;
  margin:0 auto;
  color:#02bde0;
  padding:10px;
  clear:both;


}
.centered_text_right{
  text-align: center;
  font-size:20px;
  font-weight:400;
  font-style:italic;
  color:#02bde0;
  float:right;
  padding:10px;
  clear:both;


}


table.data_table {

  padding-bottom:20px;
  background-color: #fcfcec;
  border:;
  width:auto;
  margin:0 auto;
	}
td {
  padding:5px;}



a:link {
    text-decoration: none;
    color:#6b87bd;
}

a:hover {color:#5ed1cc;
}

a:visited {
    color: #6b87bd;
}

.small_text{font-size: 12px;
color:#c8eef7;}


img { max-width: 100%;
    height: auto;
  }


/*img.center_image{
text-align: center;
position: absolute;
padding:10px;
left:50%;
clear:both;}*/

img.hero_image {
  margin-top:;
}

img.hero_text{

  margin:0 auto;
  display:block;
  padding:20px 0;
}

 img.sit_left{
  float: left;
  margin: ;
}
 img.sit_right{
  float: right;
  margin: 10px ;
  margin-top:0;
  padding:20px;
  padding-top:0;
}

img.harry{
  margin:20px auto;
  display:block;
  padding-top:30px;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
    font-family:'gill sans';

}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #fcfcec;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;

}

/* Change the color of links on hover */
.topnav a:hover {
    background-color:#f3d209;
    color: black;
}

a.active { background-color: #02bde0; color:black;}

a.top_screen {color:black; float:right;}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}


.topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
}

/* media queries
*/


  @media only screen and (min-device-width: 360px) and (orientation: portrait) {
    .address{
      font-size: 16px;
  }
@media only screen and (min-device-width: 600px) and (orientation: portrait) {
  .address{
    font-size: 16px;
  }

}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    background-color: #f3d209;
  }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

@media screen and (min-width: 601px)
{

}

@media screen and (max-width: 1200px) {

    p.address{
      font-size: 12px;
    }
    p { font-size: 18px;
    line-height: 20px;}

    h2 {font-size: 20px;
    }

    h2.light_head {color:inherit;}

    table.data_table {
      padding:7px;
      font-size:17px;
    }
    .image_container{
    background-color: white;
    color:inherit;
    }
.extend_button {display:block;}
#extend_pool_div {display:none;}

#extend_intro_div {display:none;}

#extend_access_div {display:none;}

.table_holder {width:100%;}
.table_holder_right {width:100%;}
.intro_box {width:100%;}
.content_team {width:100%;}
.swimmerbox{width:100%;}
.access_container {width:100%;}
.pool_container {width:100%;}
.right_block {width:100%;}
.duck_holder {width:100%;}
img.harry{ width:100px;}
img.pool {margin:0 auto; display:block;}
.poolpic {width:100%;padding:0;}
h2.center{font-size:28px;}
h2.center_main{font-size:28px; color:white;}
  }

  .youtube-video {
    margin:0 auto; display:block;
  aspect-ratio: 16 / 9;
  width: 100%;
}