/*
Theme Name: SWAG Media Factory
Description: A custom responsive theme built for The Fabien Cousteau Ocean Learning Center.
Version: 1.0
Author: Jake Sheppard of SWAG Media Factory
Author URI: http://www.swagmediafactory.com
*/


/* ==================================  GENERAL  ================================== */

body {
	height:100%;
	font-size:18px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#333;
	overflow-x: hidden; /* Prevent scroll on narrow devices */
	width:100%;
	line-height:1.5;
	padding:0 0 0 0;
	margin:0;
	background-color:#FFFFFF;
}

img {
	max-width:100%;
	position:relative;
	margin:auto;
	display:block;
}

img.aligncenter {
	display:inline-block !important;
	margin:15px;
}

img.alignleft {
	display:inline-block !important;
	float:left;
	margin:15px;
}

img.alignright {
	display:inline-block !important;
	float:right;
	margin:15px;
}


.container {
	position:relative;
}

.center-block {
	float:none;
}

.section {
	position:relative;
	padding-top:40px;
	padding-bottom:40px;
}

#content {
	margin-top:40px;
}

/* ==================================  UI  ================================== */

.card {
	-webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.1);
	background-color:#FFFFFF !important;
	border-radius:4px 4px 4px 4px;
	border:1px solid transparent;
	border-color:#DDDDDD !important;
	margin:15px 0 15px 0;
	color:#333333 !important;
	text-decoration:none !important;
}

.card:hover {
	cursor:pointer;
}

.card-image {
	padding:20px 0 20px 0;
	height:160px;
	background-size:cover;
	background-position:center;
}

.card-image .card-icon {
	
}

.card-content {
	padding:20px;
	font-size:14px;
}

.card h3 {
	text-transform:uppercase;
	font-size:18px;
	height:38px;
}


.desaturate {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

.card:hover .desaturate {
	-webkit-filter: none !important;
	filter: none !important;
}

input, .form-control {
	background-color:#eeeeee;
	padding:2px 8px 2px 8px;
	border:1px solid transparent;
	border-radius:0;
	outline:none;
	box-shadow:none;
}

label {
	text-transform:uppercase;
	font-size:14px;
	opacity:.7;
}

input:focus {
	outline:none;
	border:1px solid rgba(0,0,0,.3);
}

.nav-tabs>li>a {
	padding:5px 12px 5px 13px;
	color:#333;
	border:1px solid rgba(0,0,0,.15);
	text-transform:uppercase;
	font-size:13px;
	border-radius:0;
}

.nav-tabs {
	border:none;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
	border-bottom:1px solid rgba(0,0,0,.15);
	background-color:#eeeeee;
}

textarea.form-control {
	height:119px;
	resize:none;
}

.spacer {
	display:block;
	height:20px;
}

blockquote {
	border-left:none;
	max-width:90%;
	margin:auto;
	color:#333333;
}

blockquote h1 {
	font-family: 'Lora', serif;
	font-size:24px;
	letter-spacing:3px;
	font-weight:100;
	line-height:32px;
	padding:20px;
	border-top:rgba(51,51,51,.20) solid 2px;
	border-bottom:rgba(51,51,51,.20) solid 2px;
} 

blockquote h2 {
	font-family: 'Lora', serif;
	opacity:.7;
	font-size:16px;
}


/* ==================================  TYPE  ================================== */

h1, h2 {
	font-family: 'Raleway', sans-serif;
	font-weight:700;
	letter-spacing:2px;
	margin-bottom:20px;
}

h3, h4 {
	font-weight:300;
	letter-spacing:2px;
	margin:0 0 10px 0;
	padding:0;
}

h5 {
	font-weight:700;
	letter-spacing:2px;
	margin:0 0 10px 0;
	text-transform:uppercase;
}

h5.sub-title {
	padding-bottom:5px;
}
.white-text {
	color:#FFFFFF;
}

/* ==================================  COLORS  ================================== */
.secondary {
	opacity:.7;
}

/* ==================================  LINKS  ================================== */

a, a:hover, a:visited, a:focus, a:active {
	text-decoration:none;
}

#footer a:hover {
	text-decoration:underline;
}

#footer a {
	color:#FFFFFF !important;
}

/* ==================================  SOCIAL SHARE  ================================== */
.share-button {
	text-align:center;
	display:block;
	width:40px;
	height:40px;
	color:#FFFFFF !important;
	font-size:20px;
	margin:20px auto 20px auto;
	background-color:#FBAF42;
	padding-top:6px;
}

/* ==================================  BUTTONS  ================================== */
.btn, #infinite-handle button {
	position:relative;
	background-color:#264186;
	border-radius:40px !important;
	border:2px solid #264186;
	color:#FFFFFF !important;
	font-weight:500;
	text-transform:uppercase;
	min-width:180px !important;
	float:none;
	display:inline-block;
	font-family: 'Raleway', sans-serif;
	letter-spacing:2px;
}

.btn:hover {
	border-color:#FFF;
}

.btn-green {
	background-color:#f93c50 !important;
	border-color:#f93c50 !important;
}

.btn-green:hover {
	background-color:#f93c50;
	border-color:#FFF;
}

#infinite-handle {
	text-align:center;
}

#donate-button {
	float:right;
	margin-top:10px;
}

/* ==================================  LOADER  ==================================== */

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.page-loader {
text-align:center;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1029;
background:#FFFFFF;
}

.loader {
display: inline-block;
width: 50px;
height: 50px;
position: relative;
top: 40%;
animation: loader 2s infinite ease;
}

@keyframes loader {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}


/* ==================================  NAV  ================================== */
.navbar {
	min-height:45px;
	margin-bottom:0;
	background-color:#2ca7b8;
	font-family: 'Raleway', sans-serif;
	letter-spacing:2px;
	line-height:1.25;
	border:none;
}

.navbar-header {
	position:relative;
	z-index:20;
	width:100%;
	background-color:#002f40;
	line-height:1;
}

#logo {
	position:absolute;
	left:0px;
	top:3px;
	width:208px;
}

#menu-main-menu li {
    padding-top: 15px;
    padding-bottom:15px;
}

.navbar .navbar-nav {
    float: none;
}

.navbar-nav>li {
	margin-left:0px;
	margin-right:0px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:0px;
	padding-right:0px;
}

.navbar-nav>li>a {
	text-transform:uppercase;
	line-height:normal;
	padding:5px 15px 5px 15px;
	display:inline-block;
	color:rgba(255,255,255,1.00);
	font-size:10px;
}

.navbar-nav>li>a:hover, .navbar-nav>li>a:active, .navbar-nav>li>a:focus {
	background-color:transparent;
	outline:none;
}

.navbar-collapse {
	padding-left:0px;
	padding-right:0px;
	padding-bottom:0px;
}

#menu-main-menu {
	float:left;
}

#searchform {
	float:left;
	display:inline-block;
	height:37px;
	padding-top:7px;
	padding-bottom:5px;
	margin-left:18px;
	margin-right:18px;
}

.social-icons {
	list-style:none;
	padding:0 0 5px 0;
	display:inline-block;
	margin-bottom:0px;
	margin-top:5px;
}

.social-icons li {
	display:inline-block;
	font-size:12px;
	padding-left:8px;
	padding-right:8px;
	padding-top:4px;
}

.social-icons li .fa {
	color:rgba(255,255,255,1.00);
}

.social-icons li a .fa {
	color:#FFFFFF;
	font-size:16px;
}

.social-icons li a {
	color:#FFFFFF;
}

#content .social-icons li .fa {
	color:rgba(0,0,0,1.00);
	font-size:18px;
}

#primary-nav {
	margin-left: 0px;
	color:rgba(255,255,255,1.00);
}

#primary-nav .main-button {
	position:relative;
	float:left;
	color:rgba(255,255,255,1.00);
	padding-left:20px;
	padding-top:10px;
	padding-bottom:10px;
	width:150px;
}

#primary-nav .main-button:hover {
	background-color:rgba(255,255,255,.2);
}

#primary-nav .main-button .large-text {
	display:block;
	text-transform:uppercase;
	font-size:18px;
	font-weight:500;
}

#primary-nav .main-button .small-text {
	display:block;
	font-size:12px;
	opacity:.7;
	font-weight:400;
}

#hamburger {
	position:absolute;
	right:20px;
	top:-8px;
}


/* ==================================  CAROUSEL  ================================== */

.carousel {
	position:relative;
	height: 700px;
	margin-bottom: 60px;
	color:rgba(255,255,255,1.00);
}

.carousel .btn {
    background-color: #fff;
    font-size: 20px;
    padding: 10px 60px 10px 60px;
    width: auto;
    color: #f93c50 !important;
	border-color:#f93c50;
}

.overlay {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color: rgba(34,59,123,.5);
}

.carousel-control {
	padding-top:340px;
}

.carousel .item {
	padding-top:300px;
	height:700px;
	background-size:cover;
	background-position:center;
}

.carousel .item h1 {
	color:#FFFFFF;
	font-size:55px;
	font-weight:500;
	text-shadow: 2px 2px rgba(0,0,0,.8);
}


.carousel .item h3 {
	font-size:20px;
	font-family: 'Raleway', sans-serif;
	font-weight:300;
	padding:0;
	margin:0 0 30px 0;
	text-shadow: 2px 2px rgba(0,0,0,.8);
}

.carousel-indicators {
	bottom:50px;
}

.carousel-indicators li {
	border:none;
	background-color:rgba(255,255,255,.5);
}

.carousel-indicators li .active {
	border:none;
	background-color:rgba(255,255,255,1);
}


/* ==================================  HOME  ================================== */
#special-content {
	position:relative;
	background-image:url(images/3.jpg);
	background-position:center 60%;
	background-size:cover; 
	background-repeat:no-repeat;
	color:#FFFFFF;
	margin:40px 0 40px 0;
	padding:100px 0 100px 0;
}

#special-content h2 {
	letter-spacing:4px;
	margin-bottom:30px;
}

#subscribe {
	position:relative;
	background-image:url(images/2.jpg);
	background-position:center center;
	background-size:cover; 
	background-repeat:no-repeat;
	color:#FFFFFF;
	margin:80px 0 0px 0;
	padding:160px 0 100px 0;
}

.page #subscribe, .single #subscribe {
	margin:0;
}

#subscribe h2 {
	letter-spacing:4px;
	margin-bottom:30px;
}

.email-subscribe {
	position:relative;
	max-width:300px;
	width:100%;
	background-color:rgba(255,255,255,.80);
	text-align:center;
	margin:auto;
}

.icon-image {
	opacity:.75;
}


/* ==================================  PAGE  ================================== */
body.page, body.single {
	background-color:#E1E1E1;
	padding-top:80px;
}

#page-box {
	position:relative;
	background-color:#FFFFFF;
	padding-bottom:60px;
}

#hero {
	position:relative;
	width:100%;
	padding-top:200px;
	padding-bottom:100px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
}

.page-title {
	color:#FFFFFF;
	text-shadow: 2px 2px rgba(0,0,0,.8);
	z-index:1000;
	position:relative;
}

.sub-title {
	border-bottom:1px solid #E3E3E3;
	padding-bottom:20px;
}

#content .page_item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #F6F6F6;
    border: 1px solid #ddd;
    font-size:14px;
}

#content .page_item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#content .page_item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

#content .current_page_item a {
	color:#418846;
	font-weight:bold;
}

/* ==================================  PROJECT  ================================== */
#project #hero {
	height:600px;
	padding-top:300px;
}


/* ==================================  POSTS  ================================== */
.post {
	margin-bottom:30px;
}

#related .post {
	margin-bottom:0;
}

.post-categories {
	list-style:none;
	padding:0;
	margin:0 10px 0 0;
	display:inline-block;
}

.meta {
	font-size:14px;
}

.meta .category {
	text-transform:uppercase;
}

.pipe {
	margin-right:10px;
}

.post p {
	margin-top:20px;
	margin-bottom:20px;
}

.post .btn {
	margin-top:10px;
}

.post .the-content {
	margin-bottom:20px;
}

.post .title, .post a:hover .title {
	text-decoration:none !important;
	color:#333;
	font-size:24px;
	margin-top:0;
	text-align:left;
}

.single-post {
	text-align:justify;
}

.single-post .meta {
	margin-top:20px;
	margin-bottom:20px;
}

#related .meta {
	margin-top:0px;
	margin-bottom:0px;
}


.single-post .the-content {
	margin-bottom:20px;
	clear:both;
	margin-top:20px;
}

.post-hero {
	position:relative;
	background-size:cover;
	height:500px;
}

.social-button {
	padding-top:10px;
}

.modal-dialog {
	max-width:750px;
	width:90%;
}

.modal-content {
	border-radius:0;
}

.modal-text {
	display:table;
	height:400px;
}

.modal-text form {
	font-size:20px;
}

.modal-text .table-cell {
	display:table-cell;
	vertical-align:middle;
}

button.close {
	position:absolute;
	right:-15px;
	top:-15px;
	color:rgba(255,255,255,1.00);
	background-color:rgba(0,0,0,1.00);
	border-radius:50%;
	height:50px;
	width:50px;
	opacity:1;
	font-size:30px;
	z-index:10000000;
}

button.close:hover {
	opacity:.9;
}

.modal-image {
	height:400px;
	background-size:cover;
}

#comments {
	margin-bottom:0px;
}

#comments-button {
	cursor:pointer;
	font-size:14px;
	float:none;
	margin:auto;
}

#comments-container {
	width:100%;
}

div.sharedaddy {
	margin-top:20px;
}

div.sharedaddy h3.sd-title {
	display:none !important;
}

.sd-social-icon .sd-content ul li[class*=share-].share-twitter a.sd-button, .sd-social-icon .sd-content ul li[class*=share-].share-facebook a.sd-button, .sd-social-icon .sd-content ul li[class*=share-].share-pinterest a.sd-button, .sd-social-icon .sd-content ul li[class*=share-] a.sd-button {
 color:#FFFFFF !important;
 background-color:#FBAF42 !important;
 border-radius:0px !important;
}

.press-item {
	height: 140px;
	border-bottom:1px solid rgba(184,184,184,1.00);margin-bottom: 15px;
}

/* ==================================  ABOUT  ================================== */

#about {
}

.show {
	display:inline-block !important;
}




/* ==================================  CONTACT  ================================== */
.box .padding {
	padding:20px;
	}
	
	.contact #content {
		margin-bottom:30px;
	}
	
	.contact-tabs {
		margin-top:8px;
	}

/* ==================================  FOOTER  ================================== */
#footer {
	position:relative;
	margin:0 0 0 0;
	padding:20px 0 20px 0;
	font-size:12px;
	color:#FFFFFF;
	background-color:rgba(0,0,0,1.00);
}

#footer hr {
	margin-bottom:20px;
}

#infinite-footer {
	display:none !important;
}

#menu-policy-nav.navbar-nav>li>a {
	padding-left:0px;
}


/* ==================================  MEDIA QUERIES  ================================== */

/* ==================================  MD MEDIA QUERIES  ================================== */
@media all and (max-width: 1199px) and (min-width: 0px) {


}

/* ==================================  SM MEDIA QUERIES  ================================== */
@media all and (max-width: 991px) and (min-width: 768px) {


}

/* ==================================  XS MEDIA QUERIES (MOBILE MENU POPS IN)  ================================== */
@media all and (max-width: 767px) and (min-width: 0px) {
.carousel {
	height:300px;
	margin-bottom:0px;
}

.carousel .item {
	height:300px;
	padding-top:70px;
}

.carousel .item h1 {
	font-size:36px;
}

.carousel-control {
    padding-top: 150px;
}

.carousel .btn {
	font-size:16px;
	padding:10px 20px 10px 20px;
}

#logo {
	width:100%;
	top:15px;
}

#logo img {
	max-width:40%;
	display: inline-block;
	margin-left: 10px;
}

.carousel-indicators {
	width:100%;
	bottom:-25px;
	background-color:#223B7B;
	left:0px;
	right:0px;
	margin:0;
}

.navbar {
	min-height:50px;
}

#special-content h2 {
	font-size:16px;
}

#hero {
	height:auto !important;
	padding-top:80px !important;
}

#donate-button {
	clear: both;
    float: none;
    margin: auto;
    position: relative;
    display: block;
    margin-bottom:20px;
    margin-top:10px;
}

#primary-nav {
    margin-left: 0px;
}

#primary-nav .main-button {
    display: block;
    float: none;
    text-align: center;
    width: 100%;
    padding-left:0;
}

#menu-main-menu {
    float: left;
	margin: 0;
	width: 100%;
}

.navbar .navbar-nav {
    float: none;
    text-align: center;
}

#mobile-menu {
	padding-top:60px;
	-webkit-transition: all 500ms ease-out 0s;
    -moz-transition: all 500ms ease-out 0s;
    -o-transition: all 500ms ease-out 0s;
    transition: all 500ms ease-out 0s;
    opacity:0;
    height:0px;
    background-color: #264186;
    display:none;
}

#mobile-menu.mobile-menu-display {
	opacity:1;
	height:auto;
	display:block;
}

blockquote {
	width:100%;
	padding-left:0px;
	padding-right:0px;
	font-size:14px;
	line-height:20px;
}

body.page, body.single {
	padding-top:50px;
}


}