@import url("layout.css");
/* Class definitions*/
* {
    box-sizing: border-box;
}
.header {
    padding: 1px;
}
.Theteamimg
	{
/*		float:right;*/
		display:inline;
		margin: 0 0 0 0;
		width: auto;
		height:Auto;
		object-fit: contain;
/*		min-height: 400px;
		max-height: 400px;*/
}
.Theteamtext
	{
		float:left;
		text-align:center;

}
.Calendarimg	{
/*		float:right;*/
		display:inline;
		margin: 0 0 0 0;
		width: auto;
		height:auto;
		object-fit: contain;
/*		min-height: 400px;
		max-height: 400px;*/
}
.Milesimg	{
/*		float:right;*/
		display:inline-block;
		margin: 0 0 0 0;
		width: auto;
		height:auto;
		object-fit: contain;
/*		min-height: 400px;
		max-height: 400px;*/
}

.row::after {
   content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    padding: 1px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%; 
}
/* Total Site attributes*/

body {

	font-family:"Comic Sans MS";
	font-size: 20px;
	background-image: url("../Images/background.gif");
	background-repeat: repeat;
	background-attachment: scroll;
     }
/* site container attributes*/
#container {
    text-align: center;
	background-image: url("../Images/poolbottomlight2.jpg");
	background-position:right;
	background-size: cover;
	box-sizing: border-box;	
	max-width: 1200px
	
}
/* Swimm inspiration logo Attributes*/
#masthead {
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid red;
}
#masthead img{
    max-width: 100%;
    height: auto;
  	text-align: center;

}
/* Top Navigation bar attributes and responsive Classes*/
.topnavcls {
	text-align: center;
	clear: both;
	padding-top: 5px;
	padding-bottom: 5px;
	box-sizing: border-box;
    overflow: hidden;
}

.topnavcls a {
  float: left;
  display: block;
  color: Black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight:bold;
}

.topnavcls a:hover {
  background-color: White;
  color: black;
}

.active {
/*  background-color: #4CAF50;*/
  color: white;
}

.topnavcls .icon {
  display: none;
}
.Padding1 {
	padding:1px;
}
@media screen and (max-width: 1100px) {
  .topnavcls a:not(:first-child) {display: none;}
  .topnavcls a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1100px) {
  .topnavcls.responsive {position: relative;}
  .topnavcls.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnavcls.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* Define Hamburger icon*/
.Menuicon {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width:21px;
  height: 3px;
  color:black;
  background-color: #333;
  margin: 3px 0;
  transition: 0.4s;
}
/* When active Animate bars to Cross*/
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 3px);
  transform: rotate(-45deg) translate(-4px, 3px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -5px);
  transform: rotate(45deg) translate(-5px, -5px);
}

/* Global page content Attributes*/
#content {
	padding: 1px;
    border: 1px solid red;
    display:block;
	

	float: none; 
/*	centre;	width: 97%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	padding: 5px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	box-sizing: border-box;*/
}

#content h1,h2,h3,h4,h6 {
	color: #000000;
	padding:1px;
	margin:1px;
}
#content h5 {
	color: red;
	padding:1px;
	margin:1px;
}

#content img {
/*	padding: 1px;
	border: 1px solid #808080;
	text-align:center;
	margin:auto;*/
}

/* home page Slide show Definitions*/
.Homepictures{
	width: 100%;
/*	min-height: 400px;
	object-fit: scaledown;
	text-align: center;*/
}
.Homeslides {display:none;

	margin:0 0 0 15%; 
	width: 70%;
	height:Auto;
	object-fit: contain;
	min-height: 400px;
	max-height: 400px;
}

/* What we do Colapsable definitions*/
.collapsible {
/*  background-color: #777;*/
  color: black;
  cursor: pointer;
  padding:1px;
/*  padding: 18px;*/
  width: 40%;
/*	border: none;*/
   margin: auto;
  text-align: center;
  font-size:20px;
 /* background: rgba(76, 175, 80, 0.0);*/

 /* outline: none;
  font-size: 15px;*/
}

.active, .collapsible:hover {
 /* background-color: white;*/

}

.colapsecontent {
 /* padding: 0 18px;*/
  display: none;
  padding:1px;
  overflow: hidden;
  border: 1px solid red;
/*  background-color: #f1f1f1;*/
}


/*#footer {
	text-align: center;
	clear: both;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	box-sizing: border-box;
}
*/

*/

/* Content Styles */
/* Footer Styles
#footer p {
	color: #808080;
	margin-top: 5px;
}
#footer a {
	color: #5f8ea9;
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}
#footer a:hover {
	color: #33627d;
	color: #ffffff;
	text-decoration: none;
}
 */
a {
	color: #5f8ea9;
	text-decoration: underline;
}
a:hover {
	color: #33627d;
	text-decoration: underline;
}
/*img {
    max-width: 100%;
    height: auto;
  	text-align: center;
}*/
       .marquee {
            height: 50px;
            white-space: nowrap;
            overflow: Hidden;
            position: relative;
/*            background: #fefefe;*/
            color: red/* #333*/;
            border: 1px solid #4a4a4a;
            font-size: 30px;
  			font-weight:bold;

        }
        
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 10s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }