@charset "utf-8";

/*===============================================*/
/* Copyright (c) 2017 Sea Captain Date ----------*/
/* All Rights Reserved --------------------------*/
/* URL: https://www.seacaptaindate.com ----------*/
/*===============================================*/

/* Main Stylesheet */
/* Updated: 1.27.2017 */
/* version 1.95 */

/*-----------------------------------------------------------------------------------------------*/
/*======================================== Global Styles ========================================*/
/*-----------------------------------------------------------------------------------------------*/

/* local fonts */
@font-face {
	font-family: 'Cardo Fallback';
	font-weight: 400;
	font-style: normal;
	src: url('../fonts/Cardo-regular/Cardo-regular.eot');
	src: url('../fonts/Cardo-regular/Cardo-regular.eot?#iefix') format('embedded-opentype'),
		local('Cardo'),
		local('Cardo-regular'),
		url('../fonts/Cardo-regular/Cardo-regular.woff2') format('woff2'),
		url('../fonts/Cardo-regular/Cardo-regular.woff') format('woff'),
		url('../fonts/Cardo-regular/Cardo-regular.ttf') format('truetype'),
		url('../fonts/Cardo-regular/Cardo-regular.svg#Cardo') format('svg');
}
@font-face {
	font-family: 'Questrial Fallback';
	font-weight: 400;
	font-style: normal;
	src: url('../fonts/Questrial-regular/Questrial-regular.eot');
	src: url('../fonts/Questrial-regular/Questrial-regular.eot?#iefix') format('embedded-opentype'),
		local('Questrial'),
		local('Questrial-regular'),
		url('../fonts/Questrial-regular/Questrial-regular.woff2') format('woff2'),
		url('../fonts/Questrial-regular/Questrial-regular.woff') format('woff'),
		url('../fonts/Questrial-regular/Questrial-regular.ttf') format('truetype'),
		url('../fonts/Questrial-regular/Questrial-regular.svg#Questrial') format('svg');
}
@font-face {
	font-family: 'Roboto Fallback';
	font-weight: 400;
	font-style: normal;
	src: url('../fonts/Roboto-regular/Roboto-regular.eot');
	src: url('../fonts/Roboto-regular/Roboto-regular.eot?#iefix') format('embedded-opentype'),
		local('Roboto'),
		local('Roboto-regular'),
		url('../fonts/Roboto-regular/Roboto-regular.woff2') format('woff2'),
		url('../fonts/Roboto-regular/Roboto-regular.woff') format('woff'),
		url('../fonts/Roboto-regular/Roboto-regular.ttf') format('truetype'),
		url('../fonts/Roboto-regular/Roboto-regular.svg#Roboto') format('svg');
}

/* icons */
.icon {
	display: inline-block;
}

.navbar-header .icon-compass {
	margin-top: 5px;
	margin-right: 0;
}

.icon-compass {
	width: 36px;
	height: 36px;
	background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjkgMTguNWMwIDcuMTgtNS44MiAxMy0xMyAxM3MtMTMtNS44Mi0xMy0xM0MzIDEyLjE3IDcuNTI1IDYuOTAzIDEzLjUxNSA1Ljc0MyAxMy4xOSA1LjI2MyAxMyA0LjY4NiAxMyA0LjA2M2MwLTEuNjU4IDEuMzQzLTMgMy0zIDEuNjU2IDAgMyAxLjM0MiAzIDMgMCAuNjIyLS4xOSAxLjItLjUxNiAxLjY4QzI0LjQ3NCA2LjkwMyAyOSAxMi4xNyAyOSAxOC41em0tMTMtMTZjLS44MyAwLTEuNS42NzItMS41IDEuNXMuNjcgMS41IDEuNSAxLjVjLjgyOCAwIDEuNS0uNjcyIDEuNS0xLjVzLS42NzItMS41LTEuNS0xLjV6bTEgNS4wNVYxMGgtMlY3LjU1Yy01LjQyLjQ5LTkuNjk1IDUuMDM0LTkuOTc0IDEwLjUxM0g4VjIwSDUuMTA0Yy42NjMgNS4wNjYgNC43NjcgOC45ODYgOS44OTYgOS40NVYyN2gydjIuNDVjNS4xMDctLjQ2MiA5LjE5Ny00LjQxMyA5Ljg4Ny05LjQ1SDI0di0yaDIuOTc3QzI2LjczIDEyLjQ5MiAyMi40NCA4LjA0IDE3IDcuNTV6TTkuNTEzIDI1LjE2MmwzLjkxOC04Ljg2OCA4LjgxLTMuODYtMy44NDQgOC43OTQtOC44ODMgMy45MzR6bTcuODA3LTcuODA4Yy0uNzgtLjc4LTIuMDQ4LS43OC0yLjgzIDAtLjc4Ljc4LS43OCAyLjA0NyAwIDIuODI4Ljc4Mi43OCAyLjA1Ljc4IDIuODMgMHMuNzgyLTIuMDQ2IDAtMi44Mjh6Ii8+PC9zdmc+");
	background-repeat: none;
	background-size: 100%;
}
/* no-svg fallback */
.no-svg .icon-compass {
	background-image: url("../images/fallback/compass-icn.png");
}

/* html */
*::-moz-selection {background: #c8dcff;}
*::selection {background: #c8dcff;}

body {padding-top: 50px; padding-bottom: 20px;}

h1, h2, h3, h4, h5, h6 {
	font-family: "Cardo", "Cardo Fallback", "Times New Roman", Georgia, Times, serif !important;
	color: #333;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 1px;
}

h1 {text-transform: uppercase;}

p {
	font-family: "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, Times, serif !important;
	color: #333;
	font-size: 14px;
	line-height: 25px;
}

/* links */
a {color: #ca1701;}
a:hover, a:focus {color: #fc1d01;}
a:active {color: #fc1d01;}
a:visited {}

p a, ul a {
	color: #ca1701;
	text-decoration: none !important;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

/* highlights for text */
.hl-red {color: #ca1701 !important;}
.hl-gray {color: #d4d4d4 !important;}
.v-bar {color: #aaa !important;}
.scd {white-space: nowrap !important;}

/* page break */
hr {border: none;}

hr.lined {
	display: inline-block;
	border-top: 1.5px solid #ccc;
	width: 100%;
	padding: 0;
}

/* labels for accessibility */
label {line-height: 0;}

/* standard button */
.btn {
	color: #333;
	background: #ccc;
}

/* container size */
.container {
	width: 95%;
	max-width: 1000px;
	padding-left: 2.5%;
	padding-right: 2.5%;
}

/* navigation container (silver) */
.container-fluid {
	padding-right: 1em;
	padding-left: 1em;
}

.sidecar {
	position: relative;
	display: inline-block;
	float: right;
	clear: right;
	width: 300px;
	height: 100%;
	min-height: 100px;
	background: #fff;
	border: 1px solid #ccc;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: inset 0 0 30px 0 #ccc, 0 3px 7px #aaa;
	-moz-box-shadow: inset 0 0 30px 0 #ccc, 0 3px 7px #aaa;
	box-shadow: inset 0 0 30px 0 #ccc, 0 3px 7px #aaa;
}

.red-button {
	color: #fff;
	background-color: #ca1701;
	font-family: "Questrial", "Questrial Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	text-decoration: none;
	letter-spacing: 0.5px;
	border: none;
    cursor: -webkit-pointer;
	cursor: -moz-pointer;
    cursor: pointer;
	-webkit-transition: background-color 400ms ease-in-out;
	-moz-transition: background-color 400ms ease-in-out;
	transition: background-color 400ms ease-in-out;
}

.red-button:hover, .red-button:focus {
	color: #fff;
	background-color: #e31a01;
}

.red-button:active {
	color: #fff;
	background-color: #e31a01;
}

/*---------------------------------------- Header & Navigation [WHITE] ----------------------------------------*/

/* header */
#page-header {
	z-index: 10;
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	height: 73px;
	background: url("../images/bg/navbar-bg.png") 50% 0 repeat-x;
	background: -webkit-linear-gradient(top, rgb(109, 26, 22) 10%, rgb(178, 19, 4) 30%, rgb(202, 23, 1) 50%, rgb(188, 21, 1) 70%, rgb(136, 16, 3) 90%);
	background: -moz-linear-gradient(top, rgb(109, 26, 22) 10%, rgb(178, 19, 4) 30%, rgb(202, 23, 1) 50%, rgb(188, 21, 1) 70%, rgb(136, 16, 3) 90%);
	background: linear-gradient(to bottom, rgb(109, 26, 22) 10%, rgb(178, 19, 4) 30%, rgb(202, 23, 1) 50%, rgb(188, 21, 1) 70%, rgb(136, 16, 3) 90%);
	border: none;
	border-width: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
}

/* login and register buttons */
#header-login-btn, #header-join-btn, #header-back-btn {
	z-index: 1;
	position: relative;
	float: left;
	width: 80px;
	height: 40px;
	font-family: "Questrial", "Questrial Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 0.45;
	letter-spacing: 1px;
	text-decoration: none;
	font-weight: normal;
	text-align: center;
	border: 2px solid #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 17px;
}

#header-login-btn {
	background-color: #005aef;
	padding: 15px 0 15px 0;
	margin-left: 27px;
	margin-right: 20px;
}

#header-login-btn:hover, #header-login-btn:focus {background: #327af2;}

#header-join-btn {
	background-color: #00a300;
	padding: 15px 0 15px 0;
}

#header-join-btn:hover, #header-join-btn:focus {background: #00b700;}

/* back button on login page */
#header-back-btn {
	background-color: #b51400;
	font-size: 20px;
	padding-top: 8px;
	margin-left: 27px;
	margin-right: 20px;
}

#header-back-btn:hover, #header-back-btn:focus {background: #cf2e1a;}

/* social buttons */
#social-links {background: none;}

#twitter-circle, #yt-circle {
	display: inline-block;
	position: relative;
	float: right;
	width: 45px;
	height: 45px;
	color: #b51400;
	background-color: #fff;
	line-height: 0;
	text-decoration: none;
	text-align: center;
	border: 2px solid #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#twitter-circle {
	font-size: 24px;
	padding: 11px 0 0 2px;
	margin: 15px 24px 0 0;
}

#yt-circle {
	font-size: 22px;
	padding: 11px 0 0 0;
	margin: 15px 17px 0 0;
}

#twitter-circle:hover, #twitter-circle:focus,
#yt-circle:hover, #yt-circle:focus {
	color: #fff;
	background-color: #cf2e1a;
}

/* #fb-circle {
	font-size: 24px;
	padding: 11px 2px 0 0;
	margin: 15px 17px 0 0;
} */

/* top-nav */
#top-nav {
	z-index: 1;
	position: relative;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
	height: auto; /* DO NOT CHANGE */
	min-height: 90px;
	background-color: #c5c5c5; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#fff, #c5c5c5); /* For Safari 5.1 to 6.0 */ /* For Firefox 3.6 to 15 */
	background: -moz-linear-gradient(#fff, #c5c5c5); /* For Opera 11.1 to 12.0 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#c5c5c5', GradientType=0)"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#c5c5c5', GradientType=0); /* IE5-7 */
	background: linear-gradient(#fff, #c5c5c5); /* Standard syntax */
	-webkit-box-shadow: 0 2px 8px #aaa;
	-moz-box-shadow: 0 2px 8px #aaa;
	box-shadow: 0 2px 8px #aaa;
	/* border-bottom: 5px solid #ca1701; */
	overflow: hidden;
}

#navbar-border {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
	background-color: #ca1701;
	padding: 0;
	margin: 0;
}

#top-nav ul {
	padding-left: 5%;
	padding-right: 5%;
}

#top-nav ul li {
	display: block;
	float: left;
	width: 20%;
	border: none;
	overflow: hidden;	
}

#top-nav li a {
	display: block;
	width: auto;
	min-width: 50px;
	color: #333;
	text-align: center;
	text-indent: 0;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.25em;
	font-family: "Trebuchet MS", "Lucida Grande", "Verdana", Helvetica, Arial, sans-serif !important;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: normal;
	border: none;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	padding: 22px 0 16px 0;
	margin: 30px 22% 0 22%;
	-webkit-transition: margin 0.3s ease-in, background 0.5s ease, box-shadow 0.5s ease, color 0.1s linear, text-shadow 0.1s linear;
	-moz-transition: margin 0.3s ease-in, background 0.5s ease, box-shadow 0.5s ease, color 0.1s linear, text-shadow 0.1s linear;
	transition: margin 0.3s ease-in, background 0.5s ease, box-shadow 0.5s ease, color 0.1s linear, text-shadow 0.1s linear;
}

#top-nav li a:hover, #top-nav li a:focus {
	background:#ca1701 !important;
	color: #fff;
	text-shadow: 0 1px #333;
	text-decoration: none;
	border: none;
	-webkit-box-shadow: inset 0 12px 12px 0 rgba(0,3,50,0.25);
	-moz-box-shadow: inset 0 12px 12px 0 rgba(0,3,50,0.25);
	box-shadow: inset 0 12px 12px 0 rgba(0,3,50,0.25);
}

#top-nav li.active a {
	background:#ca1701 !important;
	color: #fff;
	text-shadow: 0 1px #333;
	font-weight: bolder;
	text-decoration: none;
	border: none;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	-webkit-box-shadow: inset 0 12px 12px 0 rgba(0,3,50,0.25);
	-moz-box-shadow: inset 0 12px 12px 0 rgba(0,3,50,0.25);
	box-shadow: inset 0 12px 12px 0 rgba(0,3,50,0.25);
}

.navbar-nav {float: none;}

.navbar-header {float: none;}

/* jumbotron (masthead) */
#masthead {
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 1000px;
	height: 220px;
	border: 2px solid #ccc;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	
	background: url("../images/scd-masthead-left.png") no-repeat, url("../images/scd-masthead-right.png") no-repeat;
	background-color: #fff;
	background-size: 55%, 34%;
	background-position: left 7.5% top 15%, right bottom;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;

	margin: 2.2em auto 1.5em auto;
	overflow: hidden;
}

/* IE8 and below */
.lt-ie9 #masthead {
	border: none\9;
	background: url("../images/masthead.png") no-repeat\9;
	background-size: contain\9;
	background-position: center\9;
}

/* rows */
#row1 {}
#row2 {}

/*---------------------------------------- Welcome [WHITE] ----------------------------------------*/

#welcome {
	position: relative;
	float: left;
	width: 65%;
	height: 100%;
	min-height: 1px;
	background: none;
	margin-top: 1em;
/*	margin-left: 1em; */
	margin-left: 0;
	margin-right: -2em;
}

#welcome:after {
	z-index: -1;
	position: absolute;
	zoom: 1; /* For IE */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: url("../images/bg/compass-bg.png") no-repeat;
	background-position: top 4em right 1em;
	background-size: 33%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE 5-7 */
	opacity: 1.0;
	-webkit-transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
	-moz-transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
	transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
}

#welcome h1 {
	display: inline-block;
	font-size: 2.2em;
	letter-spacing: 2px;
	white-space: nowrap;
	padding-top: 0.2em;
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0.7em;
}

#welcome p {
	display: inline-block;
	position: relative;
	clear: both;
	width: 60%;
	font-size: 1.2em;
	padding-bottom: 1em;
}

/* homepage sign up button */
#welcome-join-btn {
	color: #000;
	background-color: #dcdcdc;
	font-size: 1em;
	padding: 12px 8px 10px 17px;
	display: inline-block;
	font-weight: normal;
}

#welcome-join-btn:hover, #welcome-join-btn:focus {background-color: #ebebeb;}

#welcome-join-btn > .fa-chevron-right {
	display: inline-block;
	font-size: 1.75em;
	color: #848484;
	line-height: 1.1;
	margin-left: 12px;
	margin-right: 3px;
}

/* YouTube player */
#video-player {
	display: inline-block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 10px auto 5px auto;
}

#video-player .embed-reponsive {
	display: block;
}

/*---------------------------------------- Browse [WHITE] ----------------------------------------*/

#profile-list {
	position: relative;
	float: left;
	clear: both;
	color: #333;
	width: 60%;
	min-height: 1px;
	background: none;
	margin-top: 1em;
	margin-right: 0;
}

#profile-list h1 {
	display: inline-block;
	font-size: 2em;
	letter-spacing: 2px;
	white-space: nowrap;
	padding-top: 0.2em;
	margin-top: 0;
	margin-left: 2px;
	margin-bottom: 0.25em;
}

.profile-box {
	z-index: -1;
	display: block;
	width: 100%;
	height: auto;
	min-height: 150px;
	background-color: #fff;
	font-family: Helvetica, Arial, sans-serif !important;
	border: 1px solid #ccc;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin: 1em 20px 1em 0;
	overflow: hidden;
	
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

#top-profile {}
#bottom-profile {margin-bottom: 0.75em;}

.profile-box .headline {
	z-index: 0;
	position: relative;
	color: #ca1701;
	background: #eee;
	width: 100%;
	height: 100px;
	letter-spacing: 1px;
	border-bottom: 7px solid #dedede;
	padding: 15px 0 0 170px;
}

.profile-box .headline a {
	color: #ca1701;
	text-transform: none;
	text-decoration: none;
}

.profile-box p {
	display: inline-block;
	width: 100%;
	height: 100%;
	font-family: "Roboto", "Roboto Fallback", Helvetica, Arial, sans-serif !important;
	padding: 10px 25px 0 170px;
	margin-bottom: 0;
}

.big-text {font-size: 1.2em;}

.profile-box p:first-of-type {margin-bottom: auto;}

.profile-box p:last-of-type {
	padding-bottom: 20px;
	margin-bottom: auto;
}

.profile-info {
	background: none;
	color: #ca1701;
	margin-top: 5px;
}

.profile-info .name {
	display: inline-block;
	font-size: 1.25em;
	font-weight: bold;
}

.profile-info .status, .location {
	display: inline-block;
	font-size: 1em;
	margin-top: 2px;
}

.profile-pic {
	z-index: 1;
	position: absolute;
	display: block;
	width: 125px;
	height: 125px;
	top: -3px;
	left: -3px;
	outline: none;
	background-color: #ca1701; /* fixes border gap problem in IE */
	padding: 2px;
	margin: 0;
}

.profile-pic-wrapper {
	z-index: 2;
	position: absolute;
	display: inline-block;
	clear: both;
	float: none;
	width: 127px;
	height: 127px;
	border: 4px solid #ca1701;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	left: 16px;
	margin-top: 16px;
	overflow: hidden;
}

.profile-box .send-message {
	z-index: 1;
	position: absolute;
	display: block;
	font-size: 12px;
	color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSI2NCA2NCAxMjggMTI4Ij48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTU5LjI3IDExNS41OGwxMi42LTEyLjZjMi43Mi40NyA1LjYtLjM1IDcuNjgtMi40NCAzLjM4LTMuMzggMy40Mi04Ljg0LjE0LTEyLjI4bDkuNi03LjY4LTEzLjg4LTEzLjg4LTcuNjggOS42Yy0zLjQ0LTMuMjctOC45LTMuMjQtMTIuMy4xNS0yLjA4IDIuMS0yLjkgNC45OC0yLjQ0IDcuN2wtMTIuNiAxMi41OGMtOC4zNy0yLjgtMTcuNjUtLjctMjQuMDggNS43NEw2OS42IDE0OS4yYy02LjkyIDYuOS0uNDMgMTkuNyA4LjUzIDI4LjY3IDguOTYgOC45NiAyMS43NiAxNS40NSAyOC42OCA4LjUzbDQ2LjczLTQ2LjcyYzYuNDMtNi40MyA4LjUzLTE1LjcgNS43NC0yNC4xem0tNTYuMTUgNjcuMTJjLTMuNTMgMy41Mi0xMy4wNS0uMy0yMS4yOC04LjUzLTguMjQtOC4yNC0xMi4wNi0xNy43Ni04LjU0LTIxLjNsNDYuNzItNDYuN2M1Ljg1LTUuODUgMTQuNjYtNi45NCAyMS42LTMuMjVsMTcuNjItMTcuNjItLjEtLjFjLTEuNC0xLjQtMS40LTMuNjYgMC01LjA1IDEuNC0xLjQgMy42Ny0xLjQgNS4wNyAwbDExLjY1IDExLjY0YzEuNCAxLjQgMS40IDMuNjUgMCA1LjA1cy0zLjY2IDEuNC01LjA1IDBsLS4xLS4xLTE3LjYyIDE3LjYzYzMuNjggNi45NCAyLjYgMTUuNzUtMy4yNSAyMS42bC00Ni43IDQ2LjcyeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xMDMuNjYgMTM2LjEyYy0uNDIgMS0uMTYgMi4xMy41NyAyLjg1LjIzLjI0LjUyLjQzLjg1LjU3bDIuNDQgMS0yMi41IDE1Ljk2Yy0uMjUuMDgtLjQ3LjItLjY2LjQtLjY2LjY3LS42NSAxLjc0IDAgMi40bC4wNS4wNSAxMy44NCAxMy44MmMuMzUuMzUuODQuNTMgMS4zMy41LjUtLjA1Ljk1LS4zIDEuMjUtLjcybDE3LjUtMjQuN2MuNTgtLjA0IDEuMTUtLjI2IDEuNi0uNy40NC0uNDUuNjUtMS4wMi43LTEuNmwyNS0xNy44Yy40LS4yOC42NS0uNzMuNy0xLjIzLjAzLS41LS4xNS0uOTgtLjUtMS4zNEwxMzIgMTExLjc2Yy0uMzUtLjM1LS44NC0uNTMtMS4zNC0uNS0uNS4wNS0uOTUuMy0xLjI0LjcybC0xNi4xNCAyMi42OC0uNS0xLjgzYy0uNC0xLjQtMS44Mi0yLjIyLTMuMi0xLjg1LTEuNC4zOC0yLjIzIDEuODItMS44NSAzLjJsLjI0LjktLjktLjM3Yy0xLjMzLS41NS0yLjg2LjEtMy40IDEuNDJ6bTM4LjM1LTkuNTVsLTIzIDE2LjM4LTQuMzYtNC4zNyAxNi4zOC0yMyAxMSAxMXptLTUzLjc3IDMxLjhsMjIuNy0xNi4xIDQuMzggNC4zOC0xNi4xIDIyLjctMTAuOTctMTAuOTh6Ii8+PC9zdmc+");
	background-repeat: no-repeat;
	background-position: top 7px left 5px;
	background-color: #ca1701;
	background-size: 36px;
	width: 138px;
	height: 47px;
	line-height: 29px;
	text-decoration: none;
	border: none;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align: right;
	-webkit-box-shadow: 0 4px #971101;
	-moz-box-shadow: 0 4px #971101;
	box-shadow: 0 4px #971101;
	padding: 10px 8px 10px 10px;
	margin: -64px 0 0 12px;
}
/* no-svg fallback */
.no-svg .profile-box .send-message {
	background-image: url("../images/fallback/send-message-icn.png");
}

.profile-box .send-message:hover, .profile-box .send-message:focus {
	background-color: #e31a01;
	border: none;
	-webkit-box-shadow: 0 4px #b01401;
	-moz-box-shadow: 0 4px #b01401;
	box-shadow: 0 4px #b01401;
}

.profile-box .send-message:active {
	background-color: #e31a01;
	-webkit-box-shadow: 0 2px #971101;
	-moz-box-shadow: 0 2px #971101;
	box-shadow: 0 2px #971101;
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
}

.verified {
	z-index: 1;
	position: absolute;
	display: inline-block;
	top: 15px;
	right: 0;
	
	width: 40px;
	height: 40px;

	background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSI2NCA2NCAxMjggMTI4Ij48cGF0aCBmaWxsPSIjRjFFNUJFIiBkPSJNMTI4IDY1LjhjLTM0LjUgMC02Mi41IDI4LTYyLjUgNjIuMyAwIDM0LjQgMjggNjIuNCA2Mi40IDYyLjQgMzQuMiAwIDYyLjMtMjggNjIuMy02Mi40cy0yOC02Mi40LTYyLjQtNjIuNHYuMnoiLz48cGF0aCBmaWxsPSIjRDRBRjM3IiBkPSJNMTI4IDY1LjhjLTM0LjUgMC02Mi41IDI4LTYyLjUgNjIuMyAwIDM0LjQgMjggNjIuNCA2Mi40IDYyLjQgMzQuMiAwIDYyLjMtMjggNjIuMy02Mi40cy0yOC02Mi40LTYyLjQtNjIuNHYuMnptMCAxMTguNWMtMzEgMC01Ni4zLTI1LjItNTYuMy01Ni4yIDAtMzAuOCAyNS4yLTU2IDU2LjItNTYgMzEgMCA1NiAyNSA1NiA1NnMtMjUgNTYuMy01NiA1Ni4zeiIvPjxwYXRoIGZpbGw9IiNENEFGMzciIGQ9Ik0xNTQgMTM5aDMuOGMtMSAxNC0xMiAyNS42LTI2IDI3LjR2LTQzaDEzdi03LjhoLTEzVjEwNmM1LTEuOCA4LjYtNi40IDguNi0xMiAwLTYuOC01LjUtMTIuNC0xMi41LTEyLjRzLTEyLjUgNS42LTEyLjUgMTIuNWMwIDUuNiAzLjUgMTAgOC41IDExLjh2MTBoLTEzdjcuN2gxM3Y0M2MtMTQtMi0yNS0xMy40LTI2LTI3LjZoMy43bC04LTEzLjZMODYgMTM5aDRjMSAxOS44IDE3LjYgMzUuNiAzNy44IDM1LjYgMjAgMCAzNi42LTE2IDM3LjgtMzUuOGg0bC03LjgtMTMuNS04IDEzLjVoLjJ6bS0yNi00MC4zYy0yLjcgMC00LjgtMi00LjgtNC41IDAtMi42IDItNC43IDQuNi00LjcgMi42IDAgNC42IDIgNC42IDQuNiAwIDIuNi0yIDQuNi00LjYgNC42eiIvPjwvc3ZnPg==");
	background-repeat: no-repeat;
	background-size: contain;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

/*	padding: 7px; */
	margin: -5px 10px 20px 0;
}
/* no-svg fallback */
.no-svg .verified {
	background-image: url("../images/fallback/verified-icn.png");
}

/* custom tooltip style */
.headline .tooltip-inner {
	z-index: 20;
	color: #fff;
	background-color: #ca1701;
	width: 120px;
	height: 35px;
	padding: 10px 0 0 2px;	
	font-size: 1em;
	letter-spacing: 1px;
	margin-right: -1px;
}

.headline .tooltip.left .tooltip-arrow {border-left-color: #ca1701;}

/* online and offline icons */
.online, .offline {
	float: left;
	width: 17px;
	height: 17px;
	border: solid 2px #d4d4d4;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: 3px;
	margin-right: 5px;
}

.online {background: #90ee90;} /* online (green) */
.offline {background: #ececec;} /* offline (gray) */

.user-a-online, .user-b-online, .user-c-online,
.user-a-offline, .user-b-offline, .user-c-offline {
	position: absolute;
	width: 80px;
	height: 15px;
	right: 10px;
	bottom: 7px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif !important;
}

/* results nav at bottom of page */
#results-nav {
	display: inline-block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 3em auto 3em auto;
}

#results-nav a {
	display: inline-block;
	text-align: center;
	font-weight: bold;
	letter-spacing:0.5px;
	text-align: center;
	text-decoration: none;
	border: none;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-transition: background-color 200ms ease-in-out;
	-moz-transition: background-color 200ms ease-in-out;
	transition: background-color 200ms ease-in-out;
}

#results-btn-wrapper {
	display: table;
	width: 65%;
	text-align: center;
	list-style: none;
	padding-left: 0;
	margin: 0 auto;
}

#results-btn-wrapper li {
	display: inline-block;
	margin: 0 2.5%;
}

#results-btn-wrapper li:first-child {
	margin-left: 0;
}

#results-btn-wrapper li:last-child {
	margin-right: 0;
}

.results-btn, .dots-btn {
	height: 55px;
	width: 55px;
	color: #333;
	font-size: 1.55em;
	background-color: #c1c1c1;
	padding-top: 0.55em;
}

.dots-btn {
	letter-spacing: 2px;
}

.results-btn.active {
	color: #fff;
	background-color: #ca1701;
}

.results-btn.active:hover,
.results-btn.active:focus {
	color: #fff;
	background-color: #e31a01;
}

.results-btn:hover,
.results-btn:focus,
.dots-btn:hover,
.dots-btn:focus {
	color: #333;
	background-color: #d4d4d4;
}

#previous-btn, #next-btn {
	position: absolute;
	top: 0;
	height: 55px;
	width: 75px;
	color: #fff;
	font-size: 1.4em;
	font-family: "Questrial", "Questrial Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	background-color: #ca1701;
	-webkit-box-shadow: 0 4px #971101;
	-moz-box-shadow: 0 4px #971101;
	box-shadow: 0 4px #971101;
	margin-top: -2px;
	padding-top: 0.75em;
}

#previous-btn {
	left: 0;
}

#next-btn {
	right: 0;
}

#previous-btn > .fa,
#next-btn > .fa {
	color: #fff;
	font-size: 1em;
	line-height: 0.65em;
}

#previous-btn > .fa {
	margin-left: -0.2em;;
	margin-right: 0.2em;
}

#next-btn > .fa {
	margin-left: 0.2em;
	margin-right: -0.2em;
}

#previous-btn:hover,
#previous-btn:focus,
#next-btn:hover,
#next-btn:focus {
	background-color: #e31a01;
	-webkit-box-shadow: 0 4px #b01401;
	-moz-box-shadow: 0 4px #b01401;
	box-shadow: 0 4px #b01401;
}

#previous-btn:active,
#next-btn:active {
	-webkit-box-shadow: 0 2px #971101;
	-moz-box-shadow: 0 2px #971101;
	box-shadow: 0 2px #971101;
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
}


/*---------------------------------------- Join [WHITE] ----------------------------------------*/

#join {
	position: relative;
	float: left;
	clear: both;
	min-height: 550px;
	width: 100%;
	height: 100%;
	margin: 1em 0 2em 1em;
}

#join:after {
	z-index: -1;
	position: absolute;
	zoom: 1; /* for IE */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: url("../images/bg/anchor-bg.png") no-repeat;
	background-position: top 120px right 0;
	background-size: 33%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE 5-7 */
	opacity: 1.0;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

#join h1 {
	display: inline-block;
	font-size: 2.2em;
	letter-spacing: 2px;
	padding-top: 0.2em;
	margin-top: 0;
	margin-left: 0.1em;
	margin-bottom: 0.7em;
}

/* fixes FitText clipping issue */
.js #join h1 {
	margin-top: 0;
	padding-left: 0.15em;
	margin-left: 0;
}

#join p {
	position: relative;
	display: inline-block;
	clear: both;
	width: 85%;
	font-size: 1.2em;
	padding-bottom: 1em;
	margin-left: 0;
}

/* Floating div on join page holding large join button */
#join-floating {
	display: table;
	float: none;
	width: 100%;
	font-size: 11px;
	text-align: center;
	margin: 0 auto 0 auto;
}

.join-disclaimer {
	font-family: Helvetica, Arial, sans-serif !important;
	color: #7a7a7a;
	padding-top: 5px;
}

/* Large Join Button */
#create-acct-button {
	display: table;
	float: none;
	width: 325px;
	height: 75px;
	color: #fff;
	background-color: #ca1701;
	text-align: left;
	text-decoration: none;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin: 25px auto 1px auto;
	-webkit-transition: background-color 200ms ease-in-out;
	-moz-transition: background-color 200ms ease-in-out;
	transition: background-color 200ms ease-in-out;
	overflow: hidden;
}

#create-acct-button:hover,
#create-acct-button:focus {
	background-color: #cf2e1a;
	-webkit-box-shadow: inset 0 0 20px -5px rgba(230,230,230,1);
	-moz-box-shadow: inset 0 0 20px -5px rgba(230,230,230,1);
	box-shadow: inset 0 0 20px -5px rgba(230,230,230,1);
}

#create-acct-button span {
	display: inline-block;
	float: right;
	color: #fff;
	font-family: "Roboto", "Roboto Fallback", Helvetica, Arial, sans-serif !important;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 1px;
	padding-right: 16px;
	margin-top: 30px;
}

#create-acct-button i {
	position: absolute;
	display: block;
	width: 80px;
	height: 75px;
	font-size: 45px;
	padding-top: 22px;
	padding-left: 17px;
	border-right: 2px solid #efb9b2;
	text-decoration: none;
}

/* join info side box */
#badge {
	display: table;
	background: transparent;
	margin: 30px auto 30px auto;
}

#badge img {
	width: auto;
	height: 175px;
}

/*---------------------------------------- About [WHITE] ----------------------------------------*/

#about {
	position: relative;
	float: left;
	clear: both;
	color: #333;
	width: 100%;
	height: 100%;
	min-height: 1px;
	background: none;	
	margin: 1em -2em 0 1em;
}

#about:after {
	z-index: -1;
	position: absolute;
	display: inline-block;
	zoom: 1; /* for IE */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: url("../images/bg/lighthouse-bg.png") no-repeat;
	background-position: top 6em right -2em;
	background-size: 33%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE 5-7 */
	opacity: 1.0;
	-webkit-transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
	-moz-transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
	transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
}

#about h1 {
	display: inline-block;
	font-size: 2.2em;
	letter-spacing: 2px;
	padding-top: 0.2em;
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0.7em;
}

#about p {
	display: inline-block;
	position: relative;
	clear: both;
	width: 72.5%;
	font-size: 1.2em;
	margin-left: 0;
}

#about .quote {
	color: #757575;
	font-size: 1.4em;
	font-style: italic;
	margin-top: 5px;
	margin-bottom: 0;
}

#about .signature {
	display: block;
	background: url("../images/bg/bk-sig-bg.jpg") 0% no-repeat;
	background-position: top -5px left -2px;
	background-size: 155px 80px;
	font-size: 1.4em;
	padding-top: 100px;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	margin-top: 1em;
}

#about .signature .span1 {
	display: inline-block;
	font-size: 0.9em;
	padding: 0;
	margin: 10px 0 4px 0;
}

#about .signature .span2 {
	display: inline-block;
	font-size: 1em;
	color: #757575;
	padding: 0;
	margin: 0;
}

#about .postscript {
	margin-top: 22px;
	font-size: 1em;
	padding-bottom: 0;
}

#news {
	position: relative;
	float: left;
	clear: none;
	margin-left: 1em;
}

#news p, #news a {
	font-size: 1.1em;
	font-weight: bold;
}

#news p .article-title {
	font-weight: normal;
	font-style: italic;
	white-space: pre-wrap;
}

#news p .news-source {
	font-weight: bold;
	font-style: normal;
	white-space: pre-wrap;
}

#news h1 {
	display: inline-block;
	font-size: 2.2em;
	padding-top: 0.5em;
	margin-top: 0;
	margin-bottom: 0.8em;
}

#featured {
	z-index: -10;
	float: right;
	width: 175px;
	height: auto;
	background: none;
	position: relative;
	margin-top: 2.5em;
	margin-left: -3em;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	overflow: auto;
}

#featured img {
	width: 175px;
	padding: 30% 0; /* spacing between featured news logos */
}

#featured .featured-top-row img:first-child {padding-top: 0;}

#featured .featured-bottom-row img:last-child {padding-bottom: 0;}

/*---------------------------------------- Contact [WHITE] ----------------------------------------*/

#contact {
	position: relative;
	float: left;
	min-height: 1px;
	width: 70%;
	height: 100%;
	background: none;
	margin-top: 1em;
	margin-left: 1em;
	margin-right: 0;
}

#contact:after {
	z-index: -1;
	position: absolute;
	display: inline-block;
	zoom: 1; /* for IE */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: url("../images/bg/bottle-bg.jpg") no-repeat;
	background-position: top 5em right -10px;
	background-size: 30%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE 5-7 */
	opacity: 1.0;
	-webkit-transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
	-moz-transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
	transition: background-size 0.5s linear, background-position 0.5s linear, opacity 0.5s ease-in-out;
}

#contact h1 {
	display: inline-block;
	font-size: 2.2em;
	letter-spacing: 2px;
	padding-top: 0.2em;
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0.7em;
}

#contact p {
	position: relative;
	display: inline-block;
	clear: both;
	width: 65%;
	font-size: 1.2em;
	margin-left: 0;
	padding-bottom: 1em;
}

/* contact info side box */
#contact-info {
	width: 250px;
	padding: 5px 0 0 0;
	background: #fff;
	margin-top: 1em;
	margin-right: -1em;
}

#contact-info h2 {
	display: block;
	text-align: center;
	font-size: 1.25em;
	letter-spacing: 1px;
	background: url("../images/bg/scd-wheel-icn.png") no-repeat;
	background-size: 25px 25px;
	background-position: 50% 0%;
	padding-top: 1.75em;
	margin-top: 0.5em;
}

#contact-info ul {
	list-style: none;
	padding-left: 0;
	padding-bottom: 0.75em;
	
}

#contact-info ul li {text-align: center;}

#contact-info ul li a {
	display: block;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 1px;
	margin-top: -5px;
}

#contact-info ul li.phone a, #contact-info ul li.misc a {font-size: 18px;}

/*---------------------------------------- Shared [WHITE] ----------------------------------------*/

/* search box */
#search {
	padding: 0.1em 0 0.5em 0;
	margin: 1em 0 0 0;
}

#search h2 {
	display: block;
	text-align: center;
	font-size: 1.5em;
	margin-bottom: -0.25em;
	letter-spacing: 2px;
}

#search .input-group {
	z-index: auto;
	width: 100%;
	font-family: "Questrial", "Questrial Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	padding: 1.5em 1.4em 0 1.4em;
}

#search .input-group-addon {
	color: #333;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	width: 100px;
	-webkit-border-radius: 7px 0 0 7px;
	-moz-border-radius: 7px 0 0 7px;
	border-radius: 7px 0 0 7px;
	letter-spacing: 0.5px;
	padding: 0 0 0 5px;
}

#search .input-group-addon.sp {padding-left: 0.5em;}

#search .dropdown-menu > li > a {
	font-size: 1em;
	font-weight: 600;
	padding: 10px 20px;
}

.form-control {height: inherit;}

.select-red {
	width: 160px !important;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.5px;
	background-color: #ca1701;
	border-color: #ac2925;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-transition: background-color 150ms ease-in-out, border 150ms ease-in-out;
	-moz-transition: background-color 150ms ease-in-out, border 150ms ease-in-out;
	transition: background-color 150ms ease-in-out, border 150ms ease-in-out;
}

.select-red.smaller {letter-spacing: 0;}

.select-red:hover, .select-red:focus, .select-red:active {
	color: #fff;
	background-color: #e31a01;
}

#search .fa {margin-left: 0; margin-right: 0.5em;} /* margin on the right of select bar icon */

/* main search button */
#search-button {
	display: block;
	width: 165px;
	height: 55px;
	letter-spacing: 2px;
	font-size: 21px;
	cursor: pointer;
	text-align: right;	
	font-weight: bold;
	outline: none;
	color: #fff;
	background-color: #ca1701;
	background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSI2NCA2NCAxMjggMTI4Ij48cGF0aCBmaWxsPSIjRkZGIiBkPSJNODUgMTg2LjhjMS43IDAgMi44LS40IDMuNi0xLjIgMS0xIDEuNS0yLjYgMS00LjgtLjcuMy0xLjUuNC0yLjQuNC0uNiAwLTEuMiAwLTEuOC0uMy0yLjMtLjYtNC41LTItNi41LTRzLTMuNC00LTQtNi40Yy0uMy0xLjQtLjMtMyAuMi00LjMtMi4yLS4zLTMuOCAwLTQuOCAxLTEgMS4yLTEuNSAzLTEgNS44czIuNCA1LjggNSA4LjVjMi44IDIuNyA2IDQuNCA4LjYgNWwxLjguM2guM3ptMi42LTEwLjNjLjYgMCAxLS4yIDEtLjRoLjJsMTMtMTAuNGMtMi40LTEtNC42LTIuNy02LjctNC43LTItMi4yLTMuNS00LjQtNC42LTYuN0w4MCAxNjd2LjJjLS40LjQtLjcgMS0uNCAyLjMuMyAxLjMgMS4yIDMgMi42IDQuMyAxLjQgMS40IDMgMi4zIDQuMyAyLjZoMS4xem0yMS4zLTEzLjhjMS4yIDAgMi4yLS41IDMtMS4ybDEuMi0xYy0zLjgtMS03LjctMy0xMS02LjUtMy41LTMuNC01LjctNy4zLTYuNi0xMXYtLjNsLTEgMS4yYy0xLjIgMS0xLjYgMy0xIDUuNS42IDIuNSAyLjIgNS41IDQuOCA4IDIuNiAyLjcgNS42IDQuMyA4IDVsMiAuMmguNXptNy43LTYuNGMuOCAwIDEuNi0uMiAyLjItLjRsMTUuNS0xMi43Yy00LjYtMS41LTkuMi00LjQtMTMuMy04LjUtNC00LTctOC43LTguNS0xMy4zbC0xMiAxNWMtMSAxLjMtMSAzLS42IDUuMy44IDIuOCAyLjYgNiA1LjQgOSAzIDIuNyA2IDQuNSA5IDUuMmwyLjMuM3ptMjQuOC0xNi40YzIuNiAwIDQuNy0uOCA2LjItMi4zaC4ydi0uMmMtMSAwLTEuOC0uMy0yLjgtLjUtNS42LTEuMy0xMS40LTQuNy0xNi41LTkuNy01LTUtOC40LTExLTkuNy0xNi42bC0uNS0yLjd2LjJoLS4yYy0yIDIuMi0yLjggNS42LTEuOCAxMCAxIDQgMy44IDkgOCAxMy4zIDQuMyA0LjIgOS4yIDcgMTMuNCA4IDEgLjIgMiAuNCAzIC40aC41em04LjgtN2MxLjcgMCAzLjMtLjQgNC42LTFsMTYuOC0xMy43Yy0uNiAwLTEtLjItMS42LS4zLTYuNy0xLjYtMTMuOC01LjYtMjAtMTEuOC02LTYtMTAuMi0xMy4yLTExLjgtMjAgMC0uOC0uMy0xLjYtLjQtMi4zTDEyNCAxMDFjLTEgMi4yLTEuMyA1LS41IDguNSAxIDQuNiA0IDkuOCA4LjUgMTQuM3M5LjcgNy40IDE0LjMgOC41YzEuNC4zIDIuOC41IDQgLjR6bTI1LjgtMTljMy42IDAgNi42LTEgOC42LTNzMy00LjggMy04bC0uNC40Yy0yLjUgMi41LTYgMy41LTkuNyAzLjQtMS4yIDAtMi41LS4yLTMuNy0uNS01LTEuMi0xMC4zLTQuMi0xNS04LjgtNC40LTQuNS03LjQtOS44LTguNi0xNC44cy0uNS0xMCAzLTEzLjVsLjQtLjRjLTMuNCAwLTYuMiAxLTggMy0zIDMtNCA3LjctMi42IDEzLjQgMS4zIDUuNyA1IDEyIDEwLjUgMTcuN3MxMiA5IDE3LjggMTAuNWw0IC42aC44em0yLjItMTJjMi40LjIgNC40LS42IDUuNy0yIDItMS44IDIuNS01IDEuNi05cy0zLjUtOC42LTcuNS0xMi42LTguNS02LjYtMTIuNS03LjVjLTMuNy0xLTYuNi0uNS04LjYgMSAzLjctMS41IDkuNi41IDE0LjIgNSAxIDEuMiAyIDIuMyAyLjcgMy40LTMuNS0yLTctMi4zLTktLjQtMi41IDIuNS0xLjMgNy44IDIuOCAxMiAxLjMgMS4yIDIuOCAyLjIgNC4zIDMtMy43LjgtOS0xLjItMTMuMi01LjVsLTEuNC0xLjRjMS4zIDIuMiAzIDQuMyA0LjggNi4yIDQgNCA4LjYgNi42IDEyLjYgNy41IDEgLjMgMiAuNCAzIC40aC40eiIvPjwvc3ZnPg==");	
	background-repeat: no-repeat;
	background-position: top 7px left 7px;
	background-size: 42px 42px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-position: cover;
	-webkit-box-shadow: 0 6px #971101;
	-moz-box-shadow: 0 6px #971101;
	box-shadow: 0 6px #971101;

	padding: 15px 12px 0 0;
	margin: 20px auto 20px auto;
}
/* no-svg fallback */
.no-svg #search-button {
	background-image: url("../images/fallback/search-icn.png");
}

#search-button:hover, #search-button:focus {
	background-color: #e31a01;
	-webkit-box-shadow: 0 6px #b01401;
	-moz-box-shadow: 0 6px #b01401;
	box-shadow: 0 6px #b01401;
}

#search-button:active {
	-webkit-box-shadow: 0 3px #971101;
	-moz-box-shadow: 0 3px #971101;
	box-shadow: 0 3px #971101;
	-webkit-transform: translateY(4px);
	-moz-transform: translateY(4px);
	-ms-transform: translateY(4px);
	transform: translateY(4px);
}


/* ZIP ZIP */

/* ZIP code text box */
#zip-code-container span {
	position: absolute;
	text-align: center;
	color: #333;
	font-family: "Questrial", "Questrial Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: bold;
	font-size: 14px;
	margin-top: 18px;
	margin-left: 30px;
}

#zip-code-container label {line-height: 24px;}

#zip-code-container .textbox {
	position: relative;
	left: 170px;
	height: 36px;
	width: 95px;
	border: 2px solid #cdcdcd;
	background-color: #fff;
	font-size: 16px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	outline: 0;
	text-align: center;
	text-indent: 0;
	padding: 0;
	margin-top: 24px;
}

#zip-code-container .textbox:focus {
	background: #fff;
	-webkit-box-shadow: 0 0 25px #ccc;
	-moz-box-shadow: 0 0 25px #ccc;
	box-shadow: 0 0 25px #ccc;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}




/* accessible search styling */
#accessible-search {
	text-align: left;
	margin-left: 10%;
	margin-right: 0;
}

#accessible-search label {
	display: inline-block;
	font-size: 16px;
	background: none;
	padding-top: 15px;
	padding-right: 5px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 10px;
}

.input-group-accessible {
	margin-top: 15px;
	margin-bottom: 15px;
}

/* custom select box */
.styled-select {
	display: table;
	height: 36px;
	width: 90%;
	background: #ca1701 !important;
	color: #fff;
	letter-spacing: 1px;
	overflow: hidden;
}

.styled-select select {
	float: right;
	border: none;
	font-size: 18px;
	width: 70%;
	height: 36px;
	padding: 5px; /* If you add too much padding here, the options won't show in IE */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* end of accessible search box styling */

#benefits {
	padding: 0.5em 0 1em 0;
	margin: 2em 0 1em 0;
}

#benefits.sidecar.browse.is_stuck {height: initial !important;}

#side-wrapper {
	float: right;
}

#benefits h2 {
	display: block;
	text-align: center;
	font-size: 1.5em;
	letter-spacing: 2px;
	margin-bottom: 0;
}

#benefits-join-btn {
	position:relative;
	display:block;
	float:none;
	height: 45px;
	width: 110px;
	font-size: 15px;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	-webkit-box-shadow: 0 4px #971101;
	-moz-box-shadow: 0 4px #971101;
	box-shadow: 0 4px #971101;
	padding: 12px 7px 5px 7px;
	margin: 10px auto 0 auto;
	-webkit-transition: background-color 400ms ease-in-out;
	-moz-transition: background-color 400ms ease-in-out;
	transition: background-color 400ms ease-in-out;
}

#benefits-join-btn:hover, #benefits #benefits-join-btn:focus {
	color: #fff;
	background-color: #e31a01;
	-webkit-box-shadow: 0 4px #b01401;
	-moz-box-shadow: 0 4px #b01401;
	box-shadow: 0 4px #b01401;
}

#benefits-join-btn:active {
	-webkit-box-shadow: 0 2px #971101;
	-moz-box-shadow: 0 2px #971101;
	box-shadow: 0 2px #971101;
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
}

#benefits ul {
	list-style:none;
	margin: 0;
	padding: 0 0 5px 25px;
	font-weight:normal;
	font-style: italic;
}

#benefits ul li {
	background: url("../images/bg/scd-wheel-icn.png") no-repeat;
	background-size: 33px 33px;
	background-position: 0% 50%;
	padding: 15px 0 15px 45px;
	border-bottom: 1.5px solid #ca1701;
	line-height: 25px;
	word-break: keep-all;
	margin-left: 0;
	margin-right: 25px;
}

#benefits ul li a {
	display: inline-block;
	font-size:17px;
	color: #333;
	text-decoration: none;
	font-weight: normal;
}

#benefits ul li span {display: block;}

/* Browse Page styles */
#search.browse {margin-bottom: 0.5em; margin-right: -1em;}
#benefits.browse {margin-bottom: 1em; margin-right: -1em;}

/* Index Page styles */
#search.primary {margin-top: 1em; margin-right: 0.5em;}
#benefits.primary {margin-top: 2em; margin-right: 0.5em;}

/* login page styles */
#login-page.container {background: #fff;}

#login-page.container hr.spacer {
	border: none;
	margin: 275px;
}

#login-page.container .fallback {
	font-size: 1.25em;
	text-align: center;
	font-weight: bold;
	line-height: 1.5;
}

.container .fallback {
	display: inline-block;
	width: 165%;
	font-size: 1.25em !important;
	font-weight: bold;
	line-height: 1.5;
}

.video-fallback {width: 100%;}

/*---------------------------------------- Footer [WHITE] ----------------------------------------*/

/* footer */
#footer {
	color: #999;
	padding-top: 1.2em;
	margin-top: 1.5em;
}

.red-border {
	position: absolute;
	display: block;
	width: 100%;
	height: 1.5px;
	left: 0; right: 0;
	background: #ca1701;
	margin-top: -1.5em;
}

#footer a {
	color: #999;
	margin-bottom: -2em;
}

#footer-nav {
	float: left;
	padding-left: 0.25em;
	text-transform: uppercase;
	font-size: 0.95em;
	padding-top: 0.25em;
	margin-bottom: 1em;
}

#footer-nav a {}

/* border bar (right hand side) */
span.bb-r {
	border-right: 1.5px solid #d4d4d4;
	margin: 0 1em;
}

#copyright, #copyright a {
	float: right;
	text-decoration: none;
	padding-right: 0.25em;
}

/*---------------------------------------- Misc [WHITE] ----------------------------------------*/

/* app pop */
#pop-spacer {
	display: block;
	
	height: 0;
	
	-webkit-transition: height 400ms;
	-moz-transition: height 400ms;
	-ms-transition: height 400ms;
	transition: height 400ms;
}

#pop-spacer.show-it {
	height: 135px;
}

#pop-wrapper {
	z-index: 500;
	display: block;
	position: fixed;
	width: 100%;
	
	left: 0; bottom: 0;
	
/*	height: 110px; */
	height: 0;
	
	background-color: #ca1701;
	background-color: rgba(202, 23, 1, 0.9);
		
	box-shadow: none;

	-webkit-transition: height 400ms, box-shadow 200ms;
	-moz-transition: height 400ms, box-shadow 200ms;
	-ms-transition: height 400ms, box-shadow 200ms;
	transition: height 400ms, box-shadow 200ms;
	
	padding: 0;
	
	overflow: hidden;
}

#pop-wrapper.show-it {
	height: 110px;
	
	-webkit-box-shadow: 0 2px 8px 4px rgba(51, 51, 51, 0.4);
	-moz-box-shadow: 0 2px 8px 4px rgba(51, 51, 51, 0.4);
    box-shadow: 0 2px 8px 4px rgba(51, 51, 51, 0.4);
}

#pop-close-btn {
	display: block;
	float: left;

	width: 40px;
	height: 40px;
	
	color: #fff;
	font-size: 24px;
	
	line-height: 0;

	background-color: transparent;
	
	border: none;
	
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	
	padding: 0;
	margin-top: -4px;
	margin-left: 4px;
	
	outline: hidden;
}

#pop-close-btn:hover, #pop-close-btn:focus, #pop-close-btn:active {

	color: #ca1701;
	background-color: #fff;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	outline: hidden;

}

#pop-app-icon {
	display: block;
	float: left;
	height: 90px;
	width: 90px;

	background-image: url("../images/app-icn-192px.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	
	margin-top: 0;
	margin-left: 20px;
	margin-right: 20px;
	
	-webkit-box-shadow: 0px 2.5px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2.5px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2.5px 10px 0px rgba(0,0,0,0.25);
}

#pop-body {
	display: block;
	float: none;
	width: 100%;
	max-width: 767px;
	padding: 0;
	margin: 0 auto;
}

#pop-body a {
	text-decoration: none;
}

#pop-body h4, #pop-body p {
	color: #fff;
	line-height: 1.65;
	text-align: center;
	letter-spacing: 1px;
	text-shadow: 0px 1px #333;
	font-family: "Roboto", "Roboto Fallback", Helvetica, Arial, sans-serif !important;
	width: 100%;
	margin-left: 0;
}

#try-it-btn {
	display: block;
	position: relative;
	float: right;
	
	color: #fff;
	background-color: #005aef;
	
	border: 2px solid #fff;
	
	height: 65px;
	width: 125px;
	
	font-family: Helvetica, Arial, sans-serif !important;
	font-size: 20px;
	letter-spacing: 3px;
	line-height: 0;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	padding: 0;
	margin-left: 10px;
	margin-top: 12px;
	margin-right: 5%;
}

#try-it-btn:hover, #try-it-btn:focus, #try-it-btn:active {
	color: #ca1701;
	background: #fff;
}

#try-it-btn:hover:before, #try-it-btn:focus:before, #try-it-btn:active:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #ca1701;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

#pop-show {
	display: block;
	position: fixed;
	left: 12px;
	bottom: 0;
	
	/* height: 30px; */
	height: 0;
	width: 40px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
	filter: alpha(opacity=0); /* IE 5-7 */
	opacity: 0;
	
	color: #fff;
	text-align: center;
	
	-webkit-border-radius: 20px 20px 0 0;
	-moz-border-radius: 20px 20px 0 0;
	border-radius: 20px 20px 0 0;
	
	background-color: #ca1701;
	background-color: rgba(202, 23, 1, 0.5);
	
	padding-top: 2px;
	
	-webkit-transition: height 400ms, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
	-moz-transition: height 400ms, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
	-ms-transition: height 400ms, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
	transition: height 400ms, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

#pop-show:hover, #pop-show:focus, #pop-show:active {
	background-color: #ca1701;
	background-color: rgba(202, 23, 1, 0.85);

	-webkit-box-shadow: 0 2px 8px 2px rgba(51, 51, 51, 0.4);
	-moz-box-shadow: 0 2px 8px 2px rgba(51, 51, 51, 0.4);
    box-shadow: 0 2px 8px 2px rgba(51, 51, 51, 0.4);
}

#pop-show.show-it {
	height: 30px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* For IE8 and earlier */
	opacity: 1.0;
}


/* premium banner */
/* div.cruiser {} */

/* bottom banner (submarine) */
#submarine {
	display: inline-block;
	width: 100%;
	padding: 0;
	/* margin: 40px 0 5px 0; */
	margin: 0 0 0 0;
}

#submarine ins {
	display: table;
	float: none;
	width: 100%;
	height: auto;
	/* max-width: 1000px; */
	border: none;
	margin: 0 auto 0 auto;
}

.google-banner {
	width: 100%;
	height: 200px;
}

.google-square {
	width: 100%;
	height: 250px;
}
/* skyscraper */
/* div.frigate {} */


/* 300x250 (scrolling in sidebar) */
#tugboat {
	float: right;
	clear: right;
	height: 250px;
	width: 300px;
/*	background: blue; */
	
	margin: 1.5em -1em 0 0;
}

/* captain hat square ad */
#special-square {
	display: table;
	float: none;
	height: 250px;
	width: 300px;
/*	background-image: url("../images/special/sea-captain-hat-deals.jpg");
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center; */
	margin: 0 auto;
}


/* 468 x 60 (center of browse page)
#dinghy {
	display: inline-block;
	height: 120px;
	width: 100%;
	margin: 2em auto 0 auto;
} */
#dinghy {
	display: block;
	width: 100%;
/*	min-width: 300px; */
	height: auto;
	min-height: 1px;
	text-align: center;
/*	background-color: blue; */
	border: 1px solid #ccc;
	margin: 2em 20px 0 0;
	overflow: hidden;
}

.google-rectangle {
	display: inline-block;
	float: none;
	width: 100%;
	margin: 0 auto;
}

/* modal */
#modal-close-btn {
	float: right;
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	color: #000;
	background: #fff;
	border: 0;
	text-shadow: 0 1px 0 #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE8 */
	filter: alpha(opacity=20); /* IE 5-7 */
	opacity: 0.2;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	margin-top: 0;
	margin-right: 7px;
}
#modal-close-btn:hover, #modal-close-btn:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
	filter: alpha(opacity=50); /* IE 5-7 */
	opacity: 0.5;
}

.modal-content {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.btn-group {
	text-align: center !important;
	font-weight: bold;
}

/* register popup */
#register-modal .modal-dialog {
	width: 310px;
	margin-top: 150px;
	margin-right: auto;
	margin-left: auto;
}

#register-modal .modal-body {
	height: 220px;
	text-align: center;
}

#register-modal .modal-body p {
	font-family: "Cardo", "Cardo Fallback", Georgia, Times, serif !important;
	font-size: 18px;
	font-weight: bold;
}

#register-modal .modal-header {
	text-align: center;
	padding: 1em 0 0 0;
}

#register-text {
	font-family: "Cardo", "Cardo Fallback", Georgia, Times, serif !important;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-top: 10px;
	padding-bottom: 0;
	margin-top: 25px;
	margin-bottom: 0;
}

#modal-join-btn {
	display: inline-block;
	color: #fff;
	background: #ca1701;
	font-family: "Questrial", "Questrial Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 22px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: none;
	letter-spacing: 1px;
	padding: 17px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0 6px #971101;
	-moz-box-shadow: 0 6px #971101;
	box-shadow: 0 6px #971101;
	margin-top: 10px;
	-webkit-transition: background-color 400ms ease-in-out, border 400ms ease-in-out;
	-moz-transition: background-color 400ms ease-in-out, border 400ms ease-in-out;
	transition: background-color 400ms ease-in-out, border 400ms ease-in-out;
}

#modal-join-btn:hover, #modal-join-btn:focus {
	color: #fff;
	background-color: #e31a01;
	-webkit-box-shadow: 0 6px #b01401;
	-moz-box-shadow: 0 6px #b01401;
	box-shadow: 0 6px #b01401;
}

#modal-join-btn:active {
	-webkit-box-shadow: 0 4px #971101;
	-moz-box-shadow: 0 4px #971101;
	box-shadow: 0 4px #971101;
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
}

/* navbar fallback */
#navbar-fallback {display: none;}

/* Fix for Bootstrap 3 modal scrollbar 'margin shifting' glitch */
body.modal-open {
	position:absolute !important; /* 'position:fixed;' will make the modal jump to the top of the page */	
	width: 100% !important;
	height: 100% !important;
	padding-right: 0!important;
	overflow: hidden !important;
}

/*-------------------------------------------------------------------------------------------------------------------*/
/*======================================== Media Queries (Responsive Design) ========================================*/
/*-------------------------------------------------------------------------------------------------------------------*/

@media (min-width:1281px) {

	#top-nav ul {
		padding-left: 2.5%;
		padding-right: 2.5%;
	}
	
	#top-nav li a {
		margin-left: 20%;
		margin-right: 20%;
	}
}

@media (max-width:1280px) {
	
	.container {width: 100%;}
	
	#top-nav ul {
		padding-left: 0;
		padding-right: 0;
	}
}
	
@media (max-width:1024px) {
	
	.container {width: 95%;}
	
	#masthead {width: 95%;}
		
/*	.login-over .modal-dialog {
		margin-top: 10%;
	} */
	
	#register-modal .modal-dialog {
		margin-top: 15%;
	}
}

/* RED */	
@media (max-width:992px) {
	
	/*---------------------------------------- Header & Navigation [RED] [992px] ----------------------------------------*/
	
	/* navigation bar */
	#top-nav li a {
		margin: 30px 15% 0 15%;
	}
	
	/*---------------------------------------- Welcome [RED] [992px] ----------------------------------------*/
	
	#welcome {
		width: 60%;
		margin-top: 1em;
	/*	margin-left: 1em; */
		margin-left: 0;
		margin-right: -1.5em;
	}
	
	#welcome:after {
		background-position: top 4.5em right 1.5em;
		background-size: 33%;
	}

	#welcome h1 {
		font-size: 2.2em;
		white-space: nowrap;
		margin-bottom: 0.7em;
	}

	#welcome p {
		width: 60%;
		font-size: 1em;
		padding-bottom: 1em;
	}
	
	#video-player {width: 95%;}

	/*---------------------------------------- Browse [RED] [992px] ----------------------------------------*/
	
	/* browse */
	#profile-list {
		width: 60%;
		margin-left: -1em;
	}

	#profile-list h1 {
		font-size: 1.95em;
		margin-left: 0.5em;
		margin-bottom: 0.25em;
	}

	.profile-box {
		width: 100%;
		min-height: 200px;
		margin: 1em 40px 1em 0;
	}
	
	.profile-info .name {
		font-size: 1.25em;
	}

	.profile-info .status, .profile-info .location {font-size: 0.95em;}
	
	.online, .offline {
		margin-left: 4px;
		margin-right: 6px;
	}
	
	.user-a-online, .user-b-online, .user-c-online,
	.user-a-offline, .user-b-offline, .user-c-offline {
		right: 0;
		font-size: 1em;
		font-weight: bold;
		line-height: 1.2;
	}
		
	/*---------------------------------------- Join [RED] [992px] ----------------------------------------*/
	
	#join {
		width: 100%;
	}
	
	#join:after {
		background-position: top 155px right 55px;
		background-size: 27%;
	}

	#join h1 {margin-left: 0.22em;}
	
	.js #join h1 {margin-left: 0.1em;} /* fixes FitText clipping issue */

	#join p {
		clear: both;
		width: 95%;
		font-size: 1em;
		padding-bottom: 1em;
		margin-left: 0.28em;
	}
		
	/*---------------------------------------- About [RED] [992px] ----------------------------------------*/
	
	#about {
		width: 100%;
		margin-top: 1em;
		margin-right: 0.5em;
	}
	
	#about:after {
		background-position: top 6em right -1em;
		background-size: 33%;
	}
	
	#about h1 {
		font-size: 2em;
		white-space: nowrap;
	}
	
	#about p {
		width: 70%;
		padding-bottom: 1em;
	}
	
	#featured {width: 145px;}

	#featured img {
		width: 145px;
		padding: 45% 0; /* spacing between featured news logos */
	}
	
	/*---------------------------------------- Contact [RED] [992px] ----------------------------------------*/
		
	#contact {
		width: 70%;
		height: 100%;
		margin-right: 0.5em;
	}
	
	#contact:after {
		background-position: top 6em right 3em;
		background-size: 30%;
	}

	#contact h1 {font-size: 2.2em;}

	#contact p {
		width: 60%;
		font-size: 1.2em;
	}
	
	#contact-info {
		width: 250px;
		padding: 5px 0 0 0;
		margin: 1em 0 1em -4em;
	}
	
	/*---------------------------------------- Shared [RED] [992px] ----------------------------------------*/
	
	/* search box */
	#search {
		padding: 0.1em 0 0.5em 0;
		margin: 1em 0 0 0;
	}

	#search h2 {
		font-size: 1.5em;
		margin-bottom: -0.25em;
	}
	
	#benefits {
		padding: 0.5em 0 1em 0;
		margin: 2em 0 1em 0;
	}
	
	/*---------------------------------------- Misc [RED] [992px] ----------------------------------------*/
	
	#dinghy {
		width: 100%;
		min-height: 1px;
		margin: 2em 40px 0 0;
	}

}

/* GREEN */
@media (max-width:767px) {
	
	.container {
		padding-right: 5%;
		padding-left: 5%;
	}
	
	/*---------------------------------------- Header & Navigation [GREEN] [767px] ----------------------------------------*/
	
	.navbar-header {
		text-align: center !important;
	}
	
	.navbar-toggle {
		position: relative;
		display: inline-block;
		min-width: 135px;
		clear: right !important;
		background-color: #ca1701 !important;
		height: 45px;
		padding-top: 5px;
		margin-top: 33px;
		margin-bottom: 10px;
		margin-right: 2em !important;
	}
		
	button.navbar-toggle {
		-webkit-transition: background-color 200ms ease-in-out;
		-moz-transition: background-color 200ms ease-in-out;
		transition: background-color 200ms ease-in-out;
	}
	
	button.navbar-toggle:hover, button.navbar-toggle:focus, button.navbar-toggle:active {
		background-color:#e31a01 !important;
	}
	
	.navbar-toggle .menu-icon {
		display: inline-block;
		background: none;
		font-size: 34px;
		font-weight: normal;
		color: #fff;
		margin-top: -7px;
	}
	
	.toggle-text {
		display: inline;
		float: left;
		font-size: 20px !important;
		font-weight: bold;
		color: #fff;
		letter-spacing: 2px;
		line-height: 1.65;
		margin-left: 7px;
		margin-right: 12px;
	}
	
	#top-nav {}
	
	#top-nav ul {
		padding: 0 0 20px 0;
		margin-top: -5px !important;
		-webkit-transition: margin 0.3s linear;
		-moz-transition: margin 0.3s linear;
		transition: margin 0.3s linear;
	}
	
	#top-nav ul li {
		float: none;
		width: 100%;
		padding-top: 10px;
	}
	
	#top-nav li a {
		color: #000;
		font-size: 1.5em;
		text-indent: 0;
		background-color: #b5b5b5;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		padding-top: 22px;
		padding-bottom: 20px;
		margin-top: 10px;
		margin-left: 5%;
		margin-right: 5%;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

	#top-nav li:hover a, #top-nav li:focus a {
		color: #fff;
		font-weight: bold;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	
	#top-nav li.active a {
		color: #fff;
		font-weight: bolder;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	
	/* login and register buttons */
	#header-login-btn, #header-join-btn, #header-back-btn {
		height: 45px;
		font-size: 18px;
		line-height: 0.65;
		padding-left: 0;
		padding-right: 0;
		margin-top: 14px;
	}
	
	#header-login-btn {
		margin-left: 24px;
		margin-right: 10px;
	}
	
	#header-join-btn {margin-left: 0;}
	
	#header-back-btn {
		font-size: 20px;
		padding-top: 10px;
	}
	
	/* social-links buttons */
	#twitter-circle, #yt-circle {
		width: 50px;
		height: 50px;
	}
	
	#twitter-circle {
		font-size: 26px;
		padding-top: 12.5px;
		margin-top: 12px;
	}
	
	#yt-circle {
		font-size: 24px;
		padding-top: 12.5px;
		padding-right: 0;
		margin-top: 12px;
	}
	
	/* #fb-circle {
		font-size: 26px;
		padding-top: 12.5px;
		padding-right: 2px;
		margin-top: 12px;
	} */
	
	#masthead {
		height: 150px !important;
	}
	
	/*---------------------------------------- Welcome [GREEN] [767px] ----------------------------------------*/
	
	#welcome {
		width: 100%;
		margin-top: 0;
		margin-left: 0;
		margin-bottom: 1em;
	}
	
	#welcome:after {
		background-position: top 4em right 2em;
		background-size: 30%;
	}
	
	#welcome h1 {
		font-size: 2.2em;
		padding-top: 0.2em;
	}
	
	#welcome p {width: 60%;}
	
	#video-player {
		display: table;
		float: none;
		width: 100%;
		margin: 7px auto 10px auto;
	}
	
	/*---------------------------------------- Browse [GREEN] [767px] ----------------------------------------*/
	
	/* browse */
	#profile-list {
		width: 100%;
		margin-top: 1em;
		margin-left: 0;
	}

	#profile-list h1 {
		text-align: center;
		font-size: 2em;
		padding-bottom: 0;
		white-space: nowrap;
		margin-left: 0;
	}

	.profile-box {
		float: none;
		width: 100%;
		min-height: 150px;
		margin: 1em auto 1em auto;
	}
	
	.profile-box p {font-size: 1.15em;}
	
	.online, .offline {
		width: 17px;
		height: 17px;
		margin-left: 4px;
		margin-right: 6px;
	}

	.user-a-online, .user-b-online, .user-c-online,
	.user-a-offline, .user-b-offline, .user-c-offline {
		right: 5px;
		bottom: 7px;
		font-size: 1em;
		line-height: 1.2;
	}
	
	#top-profile {}
	#bottom-profile {margin-bottom: 0;}
	
	/* results nav */
	#results-nav {}
	
	#results-nav a {}
		
	#previous-btn, #next-btn {
		width: 110px;
		font-size: 1.5em;
		padding-top: 0.6em;
	}

	#previous-btn > .fa,
	#next-btn > .fa {
		font-size: 1.1em;
		line-height: 0.55em;
	}

	#previous-btn > .fa {
		margin-left: -0.4em;
		margin-right: 0.4em;
	}

	#next-btn > .fa {
		margin-left: 0.4em;
		margin-right: -0.4em;
	}

	/* Browse Page styles */
	#search.browse {margin: 1em auto 1em auto;}
	#benefits.browse {margin: 2em auto 1em auto;}
	
	/* Index Page styles */
	#search.primary {margin-left: auto; margin-right: auto;}
	#benefits.primary {margin-left: auto; margin-right: auto;}
	
	/*---------------------------------------- Join [GREEN] [767px] ----------------------------------------*/
	
	#join {
		width: 100%;
		margin-top: 1em;
	}
	
	#join:after {
		background-position: top 196px right 0;
		background-size: 30%;
	}
	
	#join h1 {
		font-size: 1.75em;
		letter-spacing: 0;
	}
	
	.js #join h1 {padding-left: 0.1em;} /* fixes FitText clipping issue */
		
	#join p {width: 95%;}
		
	/*---------------------------------------- About [GREEN] [767px] ----------------------------------------*/
	
	#about {
		display: inline-block;
		width: 100%;
		margin-bottom: 1em;
	}
	
	#about:after {
		background-position: top 10em right -1em;
		background-size: 27%;
	}
	
	#about h1 {font-size: 1.9em;}
	
	#about p {width: 75%;}
	
	#news h1 {margin-left: 0;}
	
	#news {
		width: 95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
			
	#featured {
		display: table;
		float: none;
		position: relative;
		left: 0;
		right: 0;
		width: 100%;
		padding: 0;
		margin: 0 auto 1.5em auto;
	}
	
	#featured .featured-top-row, #featured .featured-bottom-row {
		display: table;
		float: none;
		width: 100%;
		text-align: center;
		background: none;
		white-space: nowrap;
		margin: 0 auto 0 auto;
	}

	#featured img {
		width: 17.5%;
		padding: 0;
		margin: 1% 1%;
	}
	
	/*---------------------------------------- Contact [GREEN] [767px] ----------------------------------------*/
	
	#contact {width: 100%;}
	
	#contact:after {
		background: url("../images/bg/bottle-bg.jpg") no-repeat;
		background-position: top 6em right 1em;
		background-size: 33%;
	}
		
	#contact p {width: 60%;}
	
	#contact h1 {font-size: 2.2em;}
	
	#contact-info {
		position: relative;
		display: table;
		float: none;
		clear: both;
		width: 90%;
		max-width: 380px;
		min-width: 300px;
		padding: 15px 0 7px 0;
		margin: 1em auto 2em auto;
	}
	
	#contact-info h2 {
		font-size: 1.5em;
		background-size: 32px 32px;
		background-position: 50% 0%;
		padding-top: 2.2em;
	}
	
	#contact-info ul {}
	
	#contact-info ul li {
		display: block;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	
	#contact-info ul li a{
		display: block;
		font-size: 18px;
		font-weight: normal;
		padding: 0;
		font-size: 18px;
		letter-spacing: 2px;
	}
	
	#contact-info ul li.phone a, #contact-info ul li.misc a {font-size: 20px;}
	
	/*---------------------------------------- Shared [GREEN] [767px] ----------------------------------------*/
	
	#search-button {
		display: block;
		width: 210px;
		height: 70px;
		letter-spacing: 2px;
		font-size: 28px;
		line-height: 1.35;
		
		background-repeat: no-repeat;
		background-position: top 10px left 12px;
		background-color: #ca1701;
		background-size: 52px 52px;
		
		padding: 18px 12px 0 0;
		margin: 20px auto 20px auto;
	}
	
	#benefits-join-btn {
		height: 55px;
		width: 140px;
		font-size: 18px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		border-radius: 40px;
		padding: 15px 7px 5px 7px;
		margin: 10px auto 0 auto;
	}
	
	.sidecar {
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		-webkit-box-shadow: inset 0 0 30px 0 #ccc, 0 1px 2px #aaa;
		-moz-box-shadow: inset 0 0 30px 0 #ccc, 0 1px 2px #aaa;
		box-shadow: inset 0 0 30px 0 #ccc, 0 1px 2px #aaa;
	}
	
	#search {
		display: table;
		position: relative;
		float: none;
		clear: both;
		width: 95%;
		min-width: 300px;
		background: #fff;
		margin: 1em auto 2em auto;
	}
	
	#search h2 {
		font-size: 1.8em;
		text-align: center;
		margin-left: 0;
		margin-bottom: 0.2em;
	}
	
	/* search box */
	#search .input-group{padding: 0.8em 2.2em 0.5em 2.2em;}

	#search .input-group-addon {
		color: #333;
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		max-width: 120px;
		-webkit-border-radius: 7px 0 0 7px;
		-moz-border-radius: 7px 0 0 7px;
		border-radius: 7px 0 0 7px;
		letter-spacing: 0.2px;
	}

	.select-red {
		width: 100% !important;
		font-size: 18px;
	}
	
	.select-picker, .select-red {height: 50px;}
	
	#search .fa {
		margin-left: 0.25em;
		margin-right: 1em;
	}
	
	/* big selectbox drop-downs */
	#search .dropdown-menu > li > a {
		font-size: 1.5em;
		font-weight: 600;
		padding: 20px 20px;
	}

	/* ZIP code text box */
	#zip-code-container {
		position: relative;
		display: table;
		width: 250px;
		height: 50px;
		float: none;
		margin: 18px auto 24px auto;
	}
	
	#zip-code-container span {
		top: 0px;
		font-size: 18px;
		margin: 0 0 0 -30px;
	}

	#zip-code-container .textbox {
		position: relative;
		top: 0;
		left: 150px;
		width: 125px;
		height: 50px;
		font-size: 20px;
		margin: 0;
	}

	#benefits {
		display: table;
		position: relative;
		float: none;
		clear: both;
		width: 95%;
		min-width: 300px;
		margin: 2em auto 1em auto;
	}
	
	#benefits h2{
		font-size: 1.8em;
		text-align: center;
		margin-left: 0;
	}
	
	#benefits ul {padding-right: 2em;}
	
	#benefits ul li {
		background-size: 48px 48px;
		margin-left: 2em;
	}
	
	#benefits ul li a {
		display: inline-block;
		font-size: 20px;
		line-height: 33px;
		padding-top: 10px;
		padding-left: 1em;
		padding-bottom: 5px;
		margin-right: 0.5em;
	}
	
	#benefits ul li span {display: inline;}
	
	#benefits-join-btn {
		float: none;
		font-size: 18px;
		height: 55px;
		width: 150px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		border-radius: 40px;
		padding: 15px 17px 8px 17px;		
		margin: 17px auto 15px auto;
	}
	
	/*---------------------------------------- Footer [GREEN] [767px] ----------------------------------------*/
	
	#footer-nav {
		float: none;
		clear: both;
		text-align: center;
		font-size: 1em;
		line-height: 1.0;
		padding: 0;
		margin: 0.5em auto 0 auto;
	}
	
	/* border bar (right hand side) */
	#footer-nav .bb-r {
		border-right: 1.5px solid #d4d4d4;
		margin: 0 0.75em;
	}
	
	#copyright, #copyright a {
		float: none;
		clear: both;
		text-align: center;
		line-height: 2em;
		padding-right: 0;
		margin: 2em auto 0 auto;
	}
	
	/*---------------------------------------- Misc [GREEN] [767px] ----------------------------------------*/
	
	#pop-close-btn {
		margin-left: 5px;
	}
	
	#try-it-btn {
		margin-right: 40px;
		
		width: 100px;
		
		font-size: 18px;
		
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		
		margin-top: 14px;
	}
	
	#try-it-btn:hover:before, #try-it-btn:focus:before, #try-it-btn:active:before {
		border: 2px solid #ca1701;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
	}
	
	#pop-app-icon {
	}
	
	#pop-body h4, #pop-body p {}
	
	#pop-body h4 {
		font-size: 18px;
		margin-bottom: 6px;
	}
	
	#pop-body p {
		font-size: 12px;
	}
	
	/* bottom banner (submarine) */
	#submarine {
		display: inline-block;
		width: 100%;
		padding: 0;
		/* margin: 25px 0 -5px 0; */
		margin: 0 0 0 0;
	}
	
	#submarine ins {
		display: table;
		float: none;
		width: 100%;
		/* max-width: 1000px; */
		border: none;
	/*	-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px; */
		margin: 0 auto 0 auto;
	}
	
	/* 300x250 */
	#tugboat {
		display: table;
		float: none;
		clear: both;
		height: 250px;
		width: 95%;
	/*	background: blue; */
		margin: 2.5em auto 1.5em auto;
	}
	
	#dinghy {
		float: none;
		width: 100%;
		min-height: 1px;
		margin: 2em auto 0 auto;
	}
	
	#side-wrapper {
		float: none;
	}
	
	.no-js .navbar-toggle {display: none;}
	
	.no-js #navbar-fallback {
		z-index: 1;
		position: absolute;
		left: 0;
		display: block;
		float: none;
		width: 100%;
		clear: both;
		text-align: center;
		font-weight: bold;
		font-family: "Trebuchet MS", "Lucida Grande", "Verdana", Helvetica, Arial, sans-serif !important;
		text-transform: uppercase;
		background: none;
		margin-top: 45px;
	}
	
	.no-js #navbar-fallback a {
		color: #333;
		font-size: 18px;
		margin-left: 3.5%;
		margin-right: 3.5%;
	}
	
	.no-js #navbar-fallback a:hover, #navbar-fallback a:focus {
		color: #ca1701;
		font-weight: bolder;
		text-decoration: none;
	}
	
	.no-js #navbar-fallback .active {
		color: #ca1701;
		font-weight: bolder;
		text-decoration: none;
	}	
}

/* YELLOW */
@media (max-width:640px) {
	.container {
		padding-right: 5%;
		padding-left: 5%;
	}
	
	/*---------------------------------------- Header & Navigation [YELLOW] [640px] ----------------------------------------*/
	
	#top-nav ul {padding: 0 0 20px 0;}
	
	.navbar-toggle {margin-right: 2em !important;}
	
	#masthead {height: 150px !important;}
	
	/*---------------------------------------- Welcome [YELLOW] [640px] ----------------------------------------*/
	
	#welcome {
		width: 95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
	
	#welcome:after {
		background: url("../images/bg/compass-bg.png") no-repeat;
		background-position: top 5em right 1em;
		background-size: 35%;
	}
	
	#welcome h1 {
		padding-top: 0.2em;
		font-size: 2em;
	}
	
	#welcome p {width: 55%;}
		
	#video-player {width: 100%;}
	
	/*---------------------------------------- Browse [YELLOW] [640px] ----------------------------------------*/

	/* results nav */
	#results-nav {}
		
	#previous-btn, #next-btn {
		height: 55px;
		width: 75px;
		font-size: 1.4em;
		padding-top: 0.75em;
	}

	#previous-btn > .fa,
	#next-btn > .fa {
		color: #fff;
		font-size: 1em;
		line-height: 0.65em;
	}

	#previous-btn > .fa {
		margin-left: -0.2em;;
		margin-right: 0.2em;
	}

	#next-btn > .fa {
		margin-left: 0.2em;
		margin-right: -0.2em;
	}

	/*---------------------------------------- Join [YELLOW] [640px] ----------------------------------------*/
	
	#join {
		width: 95%;
		padding-bottom: 120px;
		margin-left: 2.5%;
		margin-right: 2.5%;
		margin-bottom: 0;
	}
	
	#join:after {
		background-position: top 20px right 0;
		background-size: contain; /* was 65% */
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE8 */
		filter: alpha(opacity=10); /* IE 5-7 */
		opacity: 0.1;
	}
	
	#join h1{
		letter-spacing: 0;
		font-size: 1.75em;
		margin-left: 0.22em;
	}
	
	.js #join h1 {padding-left: 0.1em;} /* fixes FitText clipping issue */
	
	#join p {width: 100%;}
	
	/*---------------------------------------- About [YELLOW] [640px] ----------------------------------------*/
	
	#about {
		width: 95%;
		margin-top: 0;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
	
	#about:after {
		background-position: top 75px right 28px;
		background-size: 300px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE8 */
		filter: alpha(opacity=20); /* For IE8 and earlier */
		opacity: 0.2;
	}
	
	#about p {width: 100%;}
	
	#about h1 {
		font-size: 1.65em;
		letter-spacing: 1px;
	}
	
	#news h1 {font-size: 2em;}
	
	/*---------------------------------------- Contact [YELLOW] [640px] ----------------------------------------*/
	
	#contact {
		width: 95%;
		float: none;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
	
	#contact:after {
		background-position: top 5em right 1em;
		background-size: 65%;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE8 */
		filter: alpha(opacity=20); /* For IE8 and earlier */
		opacity: 0.2;
	}
	
	#contact p {width: 100%;}
	
	#contact h1 {
		font-size: 2.2em;
	}
	
	#contact-info {
		display: table;
		float: none;
		width: 90%;
		min-width: 300px;
		background: #fff;
	}
	
	/*---------------------------------------- Footer [YELLOW] [640px] ----------------------------------------*/
	
	#footer-nav, #footer-nav a {}
	
	#copyright, #copyright a {}

	/*---------------------------------------- Shared [YELLOW] [640px] ----------------------------------------*/
	
	/*---------------------------------------- Misc [YELLOW] [640px] ----------------------------------------*/
	
	#pop-body h4 {
		font-size: 16px;
	}
	
	#pop-body p {
		font-size: 12px;
	}
	
	#try-it-btn {
		width: 90px;
		margin-right: 12px;
	}
	
	.no-js #navbar-fallback a {
		font-size: 18px;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
}

/* BLUE */
@media (max-width:480px) {
	
	.container {}
		
	/*---------------------------------------- Header & Navigation [BLUE] [480px] ----------------------------------------*/
	
	#masthead {
		border: 1px solid #ccc;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
	}
	
	#top-nav ul {padding: 0 0 20px 0;}
	
	.navbar-toggle {margin-right: 1.5em !important;}
	
	/* login and register buttons */
	#login-join {
		margin-left: -12px;
	}
	
	#header-login-btn, #header-join-btn, #header-back-btn {
		width: 70px;
		font-size: 16px;
		line-height: 0.7;
	}
	
	#header-login-btn {}
	#header-join-btn {}
	#header-back-btn {font-size: 20px;}
	
	#social-links {
		position: absolute;
		clear: left;
		right: 12px;
	}
	
	#twitter-circle {margin-right: -2px;}
	
	#yt-circle {margin-right: 10px;}
	
	/* #fb-circle {margin-right: 10px;} */
		
	#masthead {height: 100px !important;}
	
	/*---------------------------------------- Welcome [BLUE] [480px] ----------------------------------------*/
	
	#welcome {
		width: 95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
	
	#welcome:after {
		background-position: top 2.5em right 2.5em;
		background-size: 175px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE8 */
		filter: alpha(opacity=20); /* For IE8 and earlier */
		opacity: 0.2;
	}
	
	#welcome h1 {
		font-size: 1.7em;
		letter-spacing: 1px;
		padding-top: 0;
	}
	
	#welcome p {width: 100%;}
	
	#welcome-join-btn {
		font-size: 0.85em;
		font-weight: bold;
	}
	
	#video-player {width: 100%;}
	
	/*---------------------------------------- Browse [BLUE] [480px] ----------------------------------------*/
		
	#profile-list {
		width: 95%;
		margin-top: 0;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
	
	#profile-list h1 {
		font-size: 1.5em;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	
	.profile-box {padding-bottom: 20px;}
	
	.profile-box .headline {
		height: 165px;
		padding-left:155px;
	}
	
	.profile-info {
		position: absolute;
		bottom: 0;
		margin-bottom: 20px;
	}
	
	.profile-info .name {font-size: 0.95em;}
	
	.profile-info .status {
		font-size: 0.8em;
		margin-top: 7px;
	}
	
	.profile-info .location {
		font-size: 0.8em;
		margin-top: 5px;
	}
	
	.profile-info .name.sm {font-size: 0.8em;}
	
	.profile-box p {padding: 10px 15px 0 15px;}
	
	.profile-box .send-message {
		position: relative;
		float: right;
		width: 185px;
		height: 60px;
		font-size: 1.2em;
		
		background-position: top 7px left 7px;
		background-size: 46px;

		padding: 17px 10px 0 0;
		margin: -5px 1em 0 auto;
	}
	
	.user-a-online, .user-b-online, .user-c-online,
	.user-a-offline, .user-b-offline, .user-c-offline {
		top: 20px;
		left: 150px;
		width: 85px;
		height: 15px;
		font-size: 1.1em;
		font-weight: bold;
		line-height: 1;
	}
	
	/* results nav */
	
	#results-nav {
		height: 140px;
	}
	
	.results-btn, .dots-btn {
		margin: 0 2px;
	}
	
	#results-btn-wrapper {
		width: 100%;
	}
	
	#previous-btn, #next-btn {
		top: initial;
		bottom: 0;
		width: 110px;
		font-size: 1.5em;
		margin-top: 0;
		padding-top: 0.6em;
	}
	
	#previous-btn > .fa,
	#next-btn > .fa {
		font-size: 1.1em;
		line-height: 0.55em;
	}
	
	#previous-btn > .fa {
		margin-left: -0.4em;
		margin-right: 0.4em;
	}

	#next-btn > .fa {
		margin-left: 0.4em;
		margin-right: -0.4em;
	}
	
	/*---------------------------------------- Join [BLUE] [480px] ----------------------------------------*/
	
	#join {
		padding-bottom: 50px;
		margin-top: 0;
	}
	
	#join:after {
		background-position: top 75px right 5px;
		background-size: contain; /* was 55% */
	}
	
	#join h1 {
		letter-spacing: 0;
		font-size: 1.55em;
		padding-top: 0;
		margin-left: 0.6em;
	}
	
	.js #join h1 {padding-left: 0.65em;} /* fixes FitText clipping issue */
	
	#join p {
		width: 100%;
		margin-left: 1em;
	}


	/* Large Join Button */
	#create-acct-button {
		width: 300px;
		height: 75px;
		margin: 25px auto 1px auto;
	}
	
	#create-acct-button span {
		font-size: 14px;
	}

	/*---------------------------------------- About [BLUE] [480px] ----------------------------------------*/
	
	#about {
		width: 95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
	
	#about:after {
		background-position: top 40px right -30px;
		background-size: 350px;
	}
	
	#about h1 {
		font-size: 1.4em;
		letter-spacing: 0;
	}
	
	#about p {
		width: 100%;
	}
		
	#about .signature {margin-top: 0;}
	
	#news {
		font-size: 0.9em;
		white-space: normal;
	}
	
	#news h1 {font-size: 1.7em;}
	
	/*---------------------------------------- Contact [BLUE] [480px] ----------------------------------------*/
	
	#contact {
		width: 95%;
		margin-top: 0;
	}
	
	.hl-red {
		white-space: auto;
	}
	
	#contact:after {
		background: url("../images/bg/bottle-bg.jpg") no-repeat;
		background-position: top 5em right 1.2em;
		background-size: 80%;
	}
	
	#contact h1 {
		letter-spacing: 0;
		font-size: 1.85em;
		margin-left: 0.25em;
	}
	
	#contact p {
		width: 100%;
		padding-left: 0.5em;
	}
	
	#contact-info {
		position: relative;
		display: table;
		float: none;
		width: 80%;
		max-width: 300px;
		min-width: 200px;
		padding: 15px 0 7px 0;
	}
	
	#contact-info h2 {
		font-size: 1.25em;
	}
	
	#contact-info ul li a {
		font-size: 17px;
	}
	
	#contact-info ul li.phone a, #contact-info ul li.misc a {
		font-size: 20px;
	}

	#contact-info ul li {background: none;}

	/*---------------------------------------- Shared [BLUE] [480px] ----------------------------------------*/
	
	/* search box */
	#search {
		width: 90%;
		margin: 1em auto 1em auto;
	}
	
	#search h2 {font-size: 1.5em;}
	
	#search .input-group {
		padding: 0.25em 2.2em 2em 2.2em;
	}

	#search .input-group-addon {
		z-index: -1;
		display: inline-block;
		float: left;
		min-width: 100%;
		color: #333;
		font-size: 20px;
		font-weight: bold;
		text-align: left;
		line-height: 2em;
		-webkit-border-radius: 10px 10px 0 0;
		-moz-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
		letter-spacing: 1px;
		background-color: #eee;		
		border: 1px solid #ccc;
		padding: 0.2em 10px 10px 1em;
		margin: 7px 0 0 -1px;
	}
	
	#search .input-group-addon.sp {
		padding: 0.2em 10px 10px 1em;
	}
	
	.select-red {
		font-size: 22px;
		letter-spacing: 1;
		-webkit-border-radius: 10px !important;
		-moz-border-radius: 10px !important;
		border-radius: 10px !important;
		margin-top: -10px;
	}
	
	.select-picker, .select-red {height: 60px;}

	.select-red.smaller {
		letter-spacing: 1px;
	}
	
	#search .fa {
		margin-left: 0.25em;
		margin-right: 0.4em;
	}


	/* ZIP ZIP */

	/* ZIP code text box */	
	
	#zip-code-container {
		margin-top: -10px;
		margin-bottom: -10px;
	}
	
	#zip-code-container span {
		display: table;
		position: relative;
		text-align: center;
		font-size: 20px;
		margin: 0 auto 15px auto;
	}

	#zip-code-container .textbox {
		display: table;
		float: none;
		position: relative;
		left: 0;
		height: 60px;
		width: 175px;
		border: 3px solid #cdcdcd;
		background-color: #fff;
		font-size: 22px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		outline:0;
		padding: 0;
		margin: -15px auto 10px auto;
	}
	
	
	#benefits {
		width: 90%;
		margin: 1em auto 1em auto;
	}
	
	#benefits ul {
		width: 95%;
		padding: 0 0 5px 12px;
		margin: 0;
	}

	#benefits ul li {
		background-size: 45px 45px;
		background-position: 0% 50%;
		border-bottom: 1.5px solid #ca1701;
		padding: 15px 0 15px 45px;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	#benefits ul li a {font-size: 16px;}
	
	#benefits-join-btn {margin: 10px auto 14px auto;}
	
	/*---------------------------------------- Footer [BLUE] [480px] ----------------------------------------*/
	
	#footer {
		padding-top: 1.2em;
		margin-top: 1em;
	}

	#footer-nav {
		float: none;
		clear: both;
		font-size: 0.75em;
		text-align: center;
		line-height: 1.5;
	}

	#footer-nav a {font-size: 1.25em;}
	
	#footer-nav .bb-r {margin: 0 0.5em;}
	
	#copyright, #copyright a {
		font-size: 0.95em;
	}
	
	/*---------------------------------------- Misc [BLUE] [480px] ----------------------------------------*/
	
	.no-js #navbar-fallback {margin-top: 47px;}
	
	.no-js #navbar-fallback a {
		font-size: 14px;
		font-weight: bold;
		margin-left: 2%;
		margin-right: 2%;
	}
	
	/* app pop */
	
	#pop-spacer.show-it {
		height: 110px;
	}
	
	#pop-wrapper.show-it {
		height: 90px;
	}
	
	#pop-app-icon {
		height: 72px;
		width: 72px;
		
		margin-top: 0;
		margin-left: 5px;
		margin-right: 10px;
	}
	
	#pop-body h4, #pop-body p {
		margin-left: 100px;
	}
	
	#pop-body h4 {
		font-size: 12px;
	}
	
	#pop-body p {
		font-size: 10px;
	}
	
	#try-it-btn {
		margin-right: 40px;
		width: 70px;
		height: 50px;
		font-size: 10px;
		
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		
		margin-top: 8px;
		margin-left: 0;
		margin-right: 8px;
	}
	
	#try-it-btn:hover:before, #try-it-btn:focus:before, #try-it-btn:active:before {
		border: 2px solid #ca1701;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
	}
	
	#pop-close-btn {
		width: 30px;
		height: 30px;
	
		color: #fff;
		font-size: 17px;
		
		margin-left: 2px;
	}

}

/* PINK */
@media (max-width:320px) {
	
	.container {}
	
	/*---------------------------------------- Header & Navigation [PINK] [320px] ----------------------------------------*/

	#top-nav ul {padding: 0 0 20px 0;}
	
	#top-nav ul li {padding-top: 5px;}

	.navbar-toggle {margin-right: 1em !important;}
	
	#masthead {margin: 0.8em auto 0.8em auto;}
	
	/*---------------------------------------- Welcome [PINK] [320px] ----------------------------------------*/
	
	#welcome {}
	
	#welcome:after {
		background-position: right 20px top 30px;
		background-size: 155px;	
	}
	
	#welcome h1 {
		font-size: 1.5em;
		letter-spacing: 0;
		margin-left: 0.25em;
		margin-bottom: 0.5em;
	}
	
	#welcome p {
		padding-bottom: 0;
		margin-left: 0.5em;
	}
	
	#welcome-join-btn {
		font-size: .80em;
		padding: 10px 8px 10px 10px;
	}
	
	#welcome p {width: 95%;}
	
	#video-player {
		display: table;
		float: none;
		width: 100%;
		margin: 14px auto 10px auto;
	}
	
	/*---------------------------------------- Browse [PINK] [320px] ----------------------------------------*/
	
	#profile-list h1 {font-size: 18px !important;}
		
	.profile-box {margin: 0.7em auto 0.7em auto;}
	
	.profile-box .headline {
		height: 130px;
		padding-left: 125px;
	}
	
	.profile-info {
		position:absolute;
		bottom:-12px;
	}
	
	.profile-info .name {font-size: 0.95em;}
	
	.profile-info .status, .profile-info .location {font-size: 0.8em;}
	
	.profile-box > .headline .verified {
		top: 10px;
		right: 0;
	}
	
	#top-profile {margin-top: 0.7em;}
	#bottom-profile {margin-bottom: 0.1em;}
		
	.profile-pic {
		width: 110px;
		height: 110px;
		top: -3px;
		left: -3px;
		padding: 2px;
		margin: 0;
	}
	
	.profile-pic-wrapper {
		width: 112px;
		height: 112px;
		left: 7px;
		margin-top: 7px;
	}
	
	.online, .offline {}
	
	.user-a-online, .user-b-online, .user-c-online,
	.user-a-offline, .user-b-offline, .user-c-offline {
		width: 85px;
		height: 15px;
		left: 120px;
		top: 10px;
		font-size: 1.1em;
	}
	
	/* results nav */	
	#results-nav {}
	
	.results-btn, .dots-btn {}
	
	
	/*---------------------------------------- Join [PINK] [320px] ----------------------------------------*/
	
	#join {}
	
	#join:after {
		background-position: top 280px right 0;
		background-size: contain; /* was 250px */
	}
	
	#join h1 {font-size: 1.55em;}
	
	.js #join h1 {padding-left: 0.3em;} /* fixes FitText clipping issue */
	
	#join p {
		position: relative;
		display: inline-block;
		clear: both;
		width: 100%;
		padding-bottom: 1em;
		margin-left: 0.5em;
	}
	
	/* Large Join Button (on iPhone 320px) */
	#create-acct-button {
		width: 100%;
		height: 75px;
		margin: 10px auto 0 auto;
	}

	#create-acct-button:hover, #create-acct-button:focus {}

	#create-acct-button span {
		font-size: 12px;
		line-height: 1.5;
		padding-right: 14px;
		margin-top: 30px;
	}

	#create-acct-button i {
		width: 60px;
		font-size: 34px;
		padding-top: 26px;
		padding-left: 12px;
		border-right: 2px solid #efb9b2;
		text-decoration: none;
	}
	
	#badge img {
		height: 120px;
	}

	/*---------------------------------------- About [PINK] [320px] ----------------------------------------*/
	
	#about {}
	
	#about:after {
		background-position: top 75px right -30px;
		background-size: 275px;
	}

	#about h1 {
		font-size: 1.2em;
		letter-spacing: 0;
		margin-left: 0;
	}
	
	#about p {margin-left: 0;}
	
	#news {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	#news h1 {
		font-size: 1.5em;
		margin-left: 0;
	}
	
	#news p .article-title {
		white-space: normal;
	}
	
	/*---------------------------------------- Contact [PINK] [320px] ----------------------------------------*/

	#contact {}
	
	#contact:after {
		background-position: top 120px right 16px;
		background-size: 250px;
	}
	
	#contact h1 {
		letter-spacing: 1px;
		font-size: 1.5em;
		white-space: nowrap;
		margin-bottom: 0.5em;
}
	
	#contact p {
		width: 95%;
		padding-bottom: 1em;
		padding-left: 0.5em;
	}
	
	#contact-info {
		max-width: 300px;
		min-width: 180px;
	}

	#contact-info h2 {
		font-size: 1.25em;
	}

	#contact-info ul li a {
		font-size: 15px;
	}
	
	#contact-info ul li.phone a, #contact-info ul li.misc a {
		font-size: 17px;
	}

	/*---------------------------------------- Shared [PINK] [320px] ----------------------------------------*/

	#search {
		width: 90%;
		min-width: 280px;
		margin: 1em auto 1em auto;
	}
	
	#search h2 {font-size: 1.25em;}
	
	#benefits {
		width: 90%;
		min-width: 280px;
		margin: 1em auto 1em auto;
	}
	
	#benefits h2 {font-size: 1.45em;}
	
	#benefits ul {
		list-style: none;
		font-weight:normal;
		font-style: italic;
		padding: 0 0 5px 12px;
		margin: 0;
	}

	#benefits ul li {
		background-size: 36px 36px;
		background-position: 0% 50%;
		padding: 15px 0 15px 33px;
		margin-left: 3px;
		margin-right: 3px;
	}
	
	#benefits ul li a {font-size: 16px;}
	
	#benefits-join-btn {margin: 10px auto 14px auto;}
	
	/*---------------------------------------- Footer [PINK] [320px] ----------------------------------------*/
	
	#footer {
		margin-top: 1em;
		padding-top: 1.2em;
	}
	
	.red-border {
		height: 3px;
	}
	
	#footer-nav {
		font-size: 0.8em;
		margin: 0;
	}
	
	#footer-nav a {
		font-size: 1em;
	}
	
	#copyright, #copyright a {
		font-size: 0.75;
	}	
	
	/*---------------------------------------- Misc [PINK] [320px] ----------------------------------------*/
	
	/* bottom banner (submarine) */
	#submarine {
		display: inline-block;
		width: 100%;
		padding: 0;
		/* margin: 17px 0 -14px 0; */
		margin: 0 0 0 0;
	}
	
	#dinghy {margin: 1em auto 0 auto;}

	#submarine ins {
		display: table;
		float: none;
		width: 100%;
		/* max-width: 1000px; */
		border: none;
	/*	-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px; */
		margin: 0 auto 0 auto;
	}
		
	.no-js #navbar-fallback a {
		font-size: 14px;
		font-weight: normal;
		margin-left: 2%;
		margin-right: 2%;
	}
	
	#pop-spacer.show-it {
		height: 100px;
	}
	
	#pop-wrapper.show-it {
		height: 80px;
	}
	
	#pop-app-icon {
		height: 64px;
		width: 64px;
		margin-top: -2px;
		margin-right: 8px;
	}
	
	#try-it-btn {
		width: 70px;
		font-size: 10px;
		margin-top: 5px;
		margin-left: 2px;
	}
	
	#pop-close-btn {}
		
	#pop-body h4, #pop-body p {
		letter-spacing: 0.5px;
	}

	#pop-body h4 {
		font-size: 10px;
		margin-bottom: 2px;
	}

	#pop-body p {
		font-size: 8px;
	}
}

/*---------------------------------------- Small Screens ----------------------------------------*/

@media (max-width:319px) {

	h1,h2,h3,h4,h5,h6 {
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;
		white-space: normal !important;
	}
	
	p, a, span, ul, li {
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;
		white-space: normal;
	}
	
	.hl-red {
		white-space: pre-line;
	}
	
	.span2 {
		font-size: 0.45em;
	}
	
	.profile-box, .headline {
		width: 100%;
		min-width: initial;
		margin: 0;
	}
	
	.profile-box {
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	
	.profile-box .headline {
		height: 210px;
		padding-left:155px;
	}
	
	.profile-info {
		position: absolute;
		bottom: initial;
		left: 1em;
		top: 125px;
		margin: 0;
	}
	
	.profile-info .name {
		font-size: 0.95em;
	}
	
	.profile-info .status {
		font-size: 0.85em;
	}
	
	.profile-info .location {
		font-size: 0.85em;
	}
	
	.profile-info .name.sm {font-size: 0.8em;}
	
	.profile-box p {padding: 10px 15px 0 15px;}
	
	.online, .offline {
		width: 14px;
		height: 14px;
	}
	
	.user-a-online, .user-b-online, .user-c-online,
	.user-a-offline, .user-b-offline, .user-c-offline {
		font-size: 12px;
		margin-top: 95px;
	}
	
	.verified, .verified:hover, .verified:focus {
		margin-right: 4px;
	}
	
	.profile-box .send-message {
		display: inline-block;
		position: relative;
		float: right;
		width: 90%;
		font-size: 1em;
		
		background-position: top 7px left 7.5%;
		background-size: 48px;
		
		padding: 17px 7.5% 0 0;
		margin: -5px 5% 0 5%;
	}
	
	#search, #benefits {
		width: 100%;
		min-width: initial;
	}
	
	#main-search {display: none;}
	#accessible-search {display: block !important;}
	
	#search-button {
		width: 80%;
		font-size: 1.4em;
		padding-top: 25px;
		background-size: 20%;
		margin: 10px auto;
	}
	#zip-code-container {
		width: 80%;
		margin: 10px auto;
	}
	#zip-code-container .textbox {
		width: 80%;
		font-size: 1.25em;
	}
	#zip-code-container label {
		font-size: 0.75em;
	}
	
	#benefits-join-btn {
		width: 80%;
		font-size: 1.25em;
		margin: 10px auto;
	}
	
	#create-acct-button {
		text-align: center;
		padding: 0;
	}
	
	#create-acct-button span {
		float: none;
		font-size: 14px;
		padding: 0;
		margin: 12% auto 0 auto;
	}
	
	#create-acct-button i {
		display: none;
	}
	
	.results-btn, .dots-btn {
		height: 45px;
		width: 45px;
		padding-top: 0.33em;
		margin: 0 1px;
	}
	
	#about .signature {
		background-size: contain;
		padding-top: 55%;
	}
	
	#special-square {
		width: 100%;
	}
	
}

/* small screen and landscape */
@media (max-height:480px) and (orientation:landscape) {
	
	#pop-spacer.show-it {
		height: 100px;
	}
	
	#pop-wrapper.show-it {
		height: 84px;
	}
	
	#pop-app-icon {
		height: 72px;
		width: 72px;
		margin-top: -4px;
	}
	
	#try-it-btn {
		margin-top: 0;
	}
	
	#pop-close-btn {}
	
}



/*-----------------------------------------------------------------------------------------------*/
/*======================================== Accessibility ========================================*/
/*-----------------------------------------------------------------------------------------------*/

/* overflow
#welcome, #about, #news, #join, #contact {
	overflow: hidden !important;
} */


/* '.fit' will quickly and smoothly fade in headlines with 'Fit Text' */
.js .fit {
	display: inline-block;
	width: 100%;
	height: 100%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
	filter: alpha(opacity=0); /* For IE8 and earlier */
	opacity: 0;
}

/* 'Fit Text' fallback */
.no-js .fit, .lt-ie9 .fit {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE 5-7 */
	opacity: 1.0;
}

/* accessible search (hidden on desktop and mobile) */
.js #accessible-search {display: none;}
.no-js #main-search {display: none;}

/* basic search for IE 5-8 */
.lt-ie9 #accessible-search {display: inline-block;}
.lt-ie9 #main-search {display: none;}

/* hide background for IE 5-8 */
.lt-ie9 #welcome:after, .lt-ie9 #about:after, .lt-ie9 #join:after, .lt-ie9 #contact:after,
.lt-ie9 #benefits ul li, .lt-ie9 #contact-info h2, .lt-ie9 .profile-box .send-message, .lt-ie9 #search-button  {
	background-image: none\9;
}

/* update your browser message */
.update-browser-message {display: none;}
.lt-ie9 .update-browser-message {
	display: block;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

/* 'Fade to' elements (opacity) (only if JavaScript is enabled) */
.js #search.sidecar.primary, .js #benefits.sidecar.primary, .js #search.sidecar.browse, .js #benefits.sidecar.browse, .js #contact-info {
	opacity: 0;
}
/* disable 'Fade to' elements in IE8 and below */
.lt-ie9 #search.sidecar.primary, .lt-ie9 #benefits.sidecar.primary, .lt-ie9 #search.sidecar.browse, .lt-ie9 #benefits.sidecar.browse, .lt-ie9 #contact-info {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE 5-7 */
}

.js .verified {display: none;}

/* If JavaScript is disabled */
.user-a-offline, .user-b-online, .user-c-online {display: none;}

/* non-JavaScript fallback for YouTube video player */
.no-js #video-player .embed-responsive {display: none;}

.user-a-online, .user-b-online, .user-c-online,
.user-a-offline, .user-b-offline, .user-c-offline {display: none;}



} /* <<< Don't Remove! */

/*-----------------------------------------------------------------------------------------------*/
/*====================================== End of Stylesheet ======================================*/
/*-----------------------------------------------------------------------------------------------*/