/* This is a custom style sheet */

body {background-color: #99CCFF;color:#fff;padding-top:10px;font-family:'Open Sans', arial, verdana, sans-serif;font-size:16px;}
.container {background-color: #000082;}
.content {padding:0px 60px 0px 60px; margin-bottom: 30px;}
a {color:#fff; text-decoration: underline;font-weight: bold;}
a:hover {text-decoration: none;color:#fff;}
p {margin-bottom:20px;}
h1.home {border-bottom: 3px solid #fff;padding-bottom: 10px;}
h2 {font-size:24px;}
h3 {font-size: 20px;}
.center {text-align: center;}
.nopadding {padding:0;}
p.final {margin-bottom: 0;}
blockquote {border-left:0; font-size: 16px;}
ul {margin-bottom:25px;}
.leftpad {padding-left:30px;}
.clear {clear:both;}


header .logo-mobile {
	margin: 20px auto 0 auto;
}

@media (min-width: 768px) {
	header .logo-mobile {
		display: none;
	}
}

header .topheader {
	padding: 10px 20px;
	background-color: #fff;
	color: #000;
}
header .topheader h3 {
	font-size: 16px;
	text-align: center;
}
header .social {
	float: left;
    position: relative;
    margin: 10px 0px 0 20px;
    font-size: 25px;
	z-index: 99;
	
}
header .social i {
	padding: 0 3px 0 0;
}
header .social a:hover {
	color: #99ccff;
}

@media (max-width: 468px) {
	header .social {
		margin: 10px 0 0 10px;
		z-index: 99;
	}
}

@media (max-width: 767px) {
	header .social {
		margin: 10px 0 0 10px;
	}
	header .logo-desk {
		display: none;
	}
}
@media (min-width: 768px) {
	header .social {
		margin: -80px 0 0 10px;
	}
}
@media (min-width: 991px) {
	header .social {
		margin: -100px 0 0 20px;
	}
}

@media (max-width: 767px) {
	.navbar-nav .open .dropdown-menu {
		border-radius: 0;
		background-color: #99CCFF;
		text-align: center;
	}

}
.navbar-default {background-color: #000082; border:none;}
.navbar .navbar-nav {display: inline-block;float: none;vertical-align: top;}
.navbar .navbar-collapse {text-align: center;}
.navbar-default .navbar-nav>li>a {color:#fff;text-transform: uppercase;text-decoration: none;}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {color:#99CCFF;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {background-color: #000082;color:#99CCFF;}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {background-color: #000082;color:#99CCFF;}
.dropdown-menu>li>a {text-align: left; text-decoration: none;}
.dropdown-menu {background-color:#99CCFF;left:15px;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {text-decoration: none;}
.navbar-default .navbar-nav .open .dropdown-menu>li>a { color: #000;}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
	color: #000;
}
.navbar-default .navbar-nav li.yellow {
	background-color: #fcc123;
}
.navbar-default .navbar-nav li.yellow a:hover {
	color: #000;
}
.navbar-default .navbar-nav > li.yellow.active>a, .navbar-default .navbar-nav > li.yellow.active>a:hover, .navbar-default .navbar-nav > li.yellow.active>a:focus {background-color: #fcc123;color:#000;}

.menu-name { font-size: 12px; }
.navbar-brand {
	padding: 10px 0 0 0;
	height: 90px;
	float: none;
}
.navbar-default .navbar-toggle .icon-bar {
	width: 100%;
	background-color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: #99ccff;
}
.navbar-toggle {
	border-radius: 0;
	margin-right: 10px;
	padding: 2px 10px 8px 10px;
}
footer {
	text-align: center;
	line-height:22px;
	margin-bottom: 20px;
}
footer .container {
	background-color: #fff;
}
footer .footer-content {
	background-color: #fff;
	color: #000;
	padding: 30px 30px 20px 30px;
}
footer h3 {
	font-weight: 700;
	margin-top: 0;
	text-transform: uppercase;
}
footer p {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}
footer a {
	color: #0100bd;
}
footer a:hover {
	color: #99CCFF;	
}
footer img {
	margin: 0 auto;
	display: inline-block !important;
	padding: 10px 0;
	width: 100px;
}

@media (min-width: 768px) {
	footer {
		text-align: left;
	}
	footer img {
		padding-left: 5px;
		float:right;		
	}	
}
@media (min-width: 992px) {
	footer img {
		width: auto;		
	}	
}


.photobox {float:right; padding:20px;}
.fancybox img {padding-bottom:3px;}


h2.rule {
	padding-bottom: 4px;
	border-bottom: solid 1px #fff;
}

.well, .well a {
	color: #000;
}

.safety {
	background-color: #fcc123;
	color: #000082;
	margin-bottom: 30px;
	clear:both;
}
.safety h2 {
	font-weight: 700;
}
.safety-content {
	padding: 5px 20px 10px 10px;
}
.safety span {
	color: red;
}
.safety a {
	color: #000082;
}
.safety a:hover {
	color: red;
}

.thumbnail {
    padding: 0;
    border: 0;
    border-radius: 0;
}
.thumbnail .caption {
    padding: 12px;
}
.caption h3 {
	font-weight: 700;
}
.caption a {
	color:  #000082;
}
.caption a:hover {
	color:  #99CCFF;
}
.caption .btn-default:hover {
	color: #333;
}
@media (min-width: 768px) {
	.homebox {float:right; width:300px;margin: 0 0 0px 40px; font-size:14px;}
	.kayaks {
		margin-top: 30px;
	}
}

@media (max-width: 480px) {
	body {padding-top: 0;}
	.content {padding: 0 10px;}
}

@media (min-width: 1200px) {
    .container{
        max-width: 1000px; padding-right:0;padding-left: 0;
    }
}
.form-group span {
    float: left;
    display: inline-block;
    margin-left: .25em;
    margin-right: .25em;
}
.form-group .grouped-field {
    width: auto;
    text-align: center;
    border: 1px solid #CCC;
    float: left;
}
.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.thumbnail {
  height: 100%;
}
.thumbnail ul {
	padding-left: 20px;
}

.btn-info {
	padding: 16px 12px;
	display: block;
	font-size: 16px;
	margin-top: 20px;
}


.col-xs-equal,
.col-sm-equal,
.col-md-equal,
.col-lg-equal {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

# Next, we are adding here some media queries with various
  breakpoints

.col-xs-equal {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-equal {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-equal {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-equal {
        width: 20%;
        float: left;
    }
}