/*
Theme Name: fctc
Author: Surface Impression
Version: 1.0
*/

/*
lightblue: #E9F4F7
darkblue: #001B4A
mediumblue: #3095B4 
mediumblue2: #036d95 (slider background)
red: #B51228

*/


:root {
  --dark-blue: #001B4A;
  --medium-blue2: #036d95;
  --light: #E9F4F7;
}

body {
	font-family: 'IBM Plex Sans Condensed', Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 130%
}

	@media screen and (max-width: 1023px) {
		body {
			font-size: 19px;
		}
	}
	
	@media screen and (max-width: 680px) {
		body {
			font-size: 18px;
		}
	}


.row {
	max-width:1300px;
	padding: 0	
}


.narrow {
	max-width: 1100px;

}

h1 {
	font-size: 72px;
	font-weight: 300;
	color: #fff;
	/* background: #3095B4 ; */
	padding: 7px 10px;
	max-width: 60%;
	position: relative;
	z-index: 3
}


h2, h3, h4, h5, h6 {
	font-weight: 400;
	color: #001B4A;
	
}

h2 {
	font-size: 48px;
	margin: 0 0 45px 0	
}

h3 {
	font-size: 30px;
	margin: 0 0 25px 0	
}

h4, h5, h6 {
	font-size: 22px;
}

	@media screen and (max-width: 1024px) {
		h1 {
			font-size: 48px;
		}
		
		h2 {
			font-size: 28px;	
		}
		
		h3 {
			font-size: 24px;	
		}
		
		h4, h5, h6 {
			font-size: 19px;
		}

	}
	
	@media screen and (max-width: 767px) {
		h1 {
			font-size: 42px;
		}
		
		h2 {
			font-size: 38px;	
		}
		
		h3 {
			font-size: 30px;	
		}
		
		h4, h5, h6 {
			font-size: 19px;
		}
	}
	
	@media screen and (max-width: 480px) {
		h1 {
			font-size: 30px;
		}
		
		h2 {
			font-size: 28px;	
		}

	}

.section h4 {
	text-transform: uppercase;
	font-weight: 700	
}

p {
	margin: 0 0 45px 0	
}
	

a {
	color: #B51228;
	font-weight: 500	
}

a:hover, a:focus{
	color: #3095B4	
}

.secondary a {
 color: #046D96	
}

blockquote {
	border: 2px solid #3095B4;
	padding: 40px 50px 20px 50px;
	margin: 0 -80px 55px -80px;
	position: relative;
	color: #001B4A;
	font-weight: 300
}

	@media screen and (min-width: 640px) and (max-width: 1069px) {
		.last_column  {
			padding: 0 0 0 30px;
		}
	}
	
	@media screen and (max-width: 767px) {
		blockquote {
			margin: 0 0 55px 0;
			padding: 30px 20px 0 20px;
		}
	}

blockquote:before {
	content: '';
	width: 0; 
	height: 0; 
	position:absolute;
	bottom: 0;
	right: 0;
	border-bottom: 50px solid #3095B4; 
	border-left: 50px solid #fff;
}

blockquote:after {
	content: '';
	width: 0; 
	height: 0; 
	position:absolute;
	bottom: 0;
	right: 0;
	border-bottom: 50px solid #fff; 
	border-left: 50px solid transparent;
	margin: 0 -2px -2px 0	
}

blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6 {
	font-size: 30px;
	margin: 0 0 20px 0	
}

blockquote p {
	font-weight: 300;
	color: #001B4A;
	margin: 0 0 15px 0	
}
blockquote ul {
	margin: 0	
}
blockquote li {
	list-style: none	
}

blockquote li a {
	font-weight: 300	
}

.button, button {
	background: #001B4A;
	color: #fff;
	font-weight: 500;
	padding: 10px 0 10px 15px;
	margin: 20px 24px 0 0;
	position: relative;
	height: 45px;
	float: right;
	display: inline-block
}
	@media screen and (max-width: 800px) {
		.button, button {
			padding: 10px 0 10px 10px;
		}
	}
	@media screen and (max-width: 767px) {
		.button, button {
			float: none;
			margin: 0 auto;
			margin-right: 0;
			font-size: 18px;
			padding: 13px 0 10px 10px;
		}
	}
.button:after, button:after, .submit-button:after {
	content: ""; 
	position: absolute; 
	right: -24px; 
	bottom: -1px; 
	width: 0; 
	height: 0; 
	border-left: 23px solid #001B4A; 
	border-top: 22px solid transparent; 
	border-bottom: 23px solid transparent;
    transition: all 0.25s ease-out;
	-webkit-transform:rotate(360deg);
}

.button:hover, button:hover {
	background: #3095B4;
}

.button:hover:after, button:hover:after {
	border-left: 23px solid #3095B4; 
}

.button-left {
	float: none
}
	
	
	@media screen and (max-width: 1260px) {
		.button-left-mob {
			float: none
		}	
	}
	
	@media screen and (max-width: 1024px) {
		.button-mob {
			background: none;
			color: #001B4A;
			height: auto
		}
		
		.button-mob:after {
			border-left: 8px solid #001B4A; 
			border-top: 8px solid transparent; 
			border-bottom: 8px solid transparent;
			right: -14px; 
			bottom: 11px; 
			padding: 0;
			height: auto;
		}
	}


input.button {
	margin: 0	
}

.fa {
	color: #fff	
}

.fa.dark {
	color: #001B4A
}

.fa.small {
	font-size: 1rem
}

.small-text {
	font-size: 18px	
}

.hidden {
	display: none	
}

#breadcrumbs  {
	font-size: 85%;
	font-weight: 300	
}

#breadcrumbs a {
	font-weight: 300	
}

.addmargin {
	padding-bottom: 80px	
}

.inner-page ul {
	margin: 0 0 35px 20px	
}

.wp-caption{
	max-width:100%;
}

/* ------ HEADER ------  */

#top-bar {
	background: #001B4A;
	margin: 0 0 40px 0;
}

	@media screen and (max-width: 767px) {
		#top-bar {
			margin: 0 0 20px 0
		}	
	}

#member-login-nav {
	background: #E9F4F7;
	padding: 5px 10px;
	color: #001B4A;
	width: auto;
	float: right;	
}

	@media screen and (max-width: 767px) {
		#member-login-nav {
			background: none;
			padding: 5px 0;
			color:  #fff;
			font-size: 18px
		}
		
		#member-login-nav .fa {
			color:  #fff;	
		}
	}

#logo {
	max-width: 300px;
	position: relative;
	z-index: 110	
}

	@media screen and (max-width: 767px) {
		#logo {
			max-width: 100%	
		}
	}

.fa-universal-access {
	margin: 5px 0 5px 0;
	display: block	
}

#language-switcher select {
	width: 200px;
	height: 25px;
	margin: 5px 0 0 0;
	padding: 1px 5px	
}

/* ------ NAVIGATION ------  */

header {
	margin: 0 0 15px 0;
	position: relative;
	z-index: 106
}
header nav {
	float: right;
	margin: 30px 0 0 0	
}
header nav li {
	list-style: none;
	float: left;
	margin: 0 15px;	
}

header nav li:first-child {
	margin: 0
}

	@media screen and (max-width: 1200px) {
		header nav li {
			margin: 0 13px;	
		}
	}

header nav li a {
	color: #001B4A);
	display: block
}

header nav li:first-child a, header nav li:first-child.current_page_item a  {
	color: #fff;
	width: 43px;
	font-size: 1px
}

header nav li:first-child a:before  {
	content: '\f015';
	font-family: 'FontAwesome';
	color: #001B4A;
	float: right;
	margin: 0 10px 0 0;
	font-size: 24px
}

header nav li:hover a, header nav li.current_page_item a, header nav li:first-child.current_page_item a:before{
	color: #B51228
}

header nav li.current_page_item a {
	border-bottom: 4px solid #B51228
}

header nav li:first-child.current_page_item a {
	border-bottom: none
}

header nav ul ul:before {
	content: '';
	width: 25px; 
  	height: 25px; 
  	border-left: 20px solid transparent;
  	border-right: 20px solid transparent;
  	border-bottom: 20px solid  #001B4A;
 	position: absolute;
	top: -10px;
	left: 40%;
}

header nav ul ul {
	background: #001B4A	;
	padding: 15px 0
}
header nav ul ul li:first-child {
	margin: 0 15px;
	width: 100%	
}
header nav ul ul li {
	text-align: left;
	padding: 5px 10px;
	float: none;
	display: block;	
}
header nav ul ul.sub-menu li a{
	color: #fff;
	display: block;
	width: auto;
	font-size: 18px
}


#accessibility-dropdown {
	background: #E9F4F7;
	padding: 30px;
	width: 98.5%;
	height: 250px;
	z-index: 111;
	font-size: 22px;
}

.close-dropdown {
	float: right	
}

.a11y-toolbar {
	position: relative;
	margin: 20px 0 0 0	
}

.a11y-toolbar li {
	font-size: 22px;
}

.a11y-toolbar li a {
	color: #001B4A;
	border: 1px solid #3095B4;
	display: inline-block;
	margin: 10px 0;
	border-radius: 3px;
	padding: 5px 15px;
	max-width: 380px		
}

.toggle-contrast:before {
	content: 'Toggle high contrast '	
}

.toggle-fontsize:before {
	content: 'Toggle font size Large / Regular '	
}

.a11y-toolbar li .aticon {
	margin: 8px 0 0 0	
}


/* menu dropdown */

.sf-menu li {
	position: relative;
}

.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: -35%;
	z-index: 104;
	width: 200px
}

.sf-menu li:hover > ul {
	display: block;
}

.sf-menu ul ul {
	top: 0;
	left: 100%;
} 



/* ------ SEARCH BUTTON ------  */ 

#search-button {
	background: url(images/bg-search.png) top left no-repeat;
	color: #fff;
	cursor: pointer;
	display: block;
	float: right;
	padding: 10px;
	width: 88px;
	height: 57px;
	margin: 15px -15px 0 25px;
	text-align: center	
}

#search-dropdown {
	width: 100%;
	max-width: 40%;
}

#search-dropdown form {
	background: #001B4A;
	position: absolute;
	width: 100%;
	padding: 15px 25px 0 25px;
	top: 78px;
	right:  -89px;	
	z-index: 104
}

#search-dropdown input[type=TEXT] {
	width: 85%;
	float: left	
}

#search-dropdown input[type=submit] {
	width: 12%;
	float: right;
	border: none;
	background: #E9F4F7;
	padding: 5px;
	height: 42px
}

#search-mob {display: none}


/* ------ SLIDER ------  */ 

.slider-wrapper {
	/* margin-bottom: 50px; */
}

#home-slider, .slide {
	height: 360px;
	overflow: hidden;
	background: #036d95;	
}

	@media screen and (max-width: 767px) {
		#home-slider, .slider-wrapper, .slide {
			height: auto;
			overflow: visible	
		}
		
		#home-slider .slide {
			background-size: 100% !important	
		}
	}
	
#home-slider .slide a {
	color: #fff;
	text-decoration: underline	
}

.slide {
	width: 100%; 	
}

.slide-content {
	background: #036d95 url(images/Group230@2x.png) top left no-repeat;
	background-size: 100%;
	padding: 3% 4%;
	color: #fff;
	height: 360px;
}
	
	@media screen and (max-width: 767px) {
		.slide-content {
			background: #036d95;
			padding: 15px 15px 0 15px;
			height: auto;
			margin: 180px 0 0 0;
		}
		
		.slide-content p {
			margin: 0 0 15px 0	
		}
	}

.cycle-pager { 
    text-align: left; 
	width: 29.333%; 
	z-index: 104; 
	position: absolute; 
	bottom: 7px; 
	right: 0;  
	overflow: hidden;
}

	@media screen and (max-width: 767px) {
		.cycle-pager { 
			text-align: center; 
			width: 100%; 
			z-index: 500; 
			bottom: -35px; 
		}
	}
	
.cycle-pager span { 
	font-size: 50px; 
	width: 16px; 
	height: 16px; 
    display: inline-block; 
	color: #fff; 
	cursor: pointer; 
}

	@media screen and (max-width: 767px) {
		.cycle-pager span { 
			color: #ccc; 
		}
	}
	
.cycle-pager span.cycle-pager-active { 
	color: #001B4A;
}


/* carousel */ 
.slider-wrapper {
	position: relative;
	height: auto;
}

.slider-wrapper .cycle-slideshow {
	margin-left: 3%	;
	overflow:  hidden

}

	@media screen and (max-width: 640px) {
		.slider-wrapper .cycle-slideshow {
			margin-left: 10%	
		}
	}
	
	@media screen and (max-width: 640px) {
		#content-slider .cycle-slideshow {
			margin-left: 16%	
		}
	}
	
	@media screen and (max-width: 390px) {
		#content-slider .cycle-slide {
			opacity: 0	
		}
		
		#content-slider .cycle-slide.cycle-slide-active {
			opacity: 1	
		}
	}
	
	
#campaign-slider .cycle-slideshow {
	margin-left: 5.5%	
}

.slidec {
	height: 160px;
	padding: 0 25px 	
}

.prev .fa, .next .fa {
	color: #fff ;
	font-size: 34px;
	background: #001B4A ;
	width: 31px;
	height: 34px;
	border-radius: 50%;
	text-align: center
}

.prev .fa {
	padding: 0 3px 0 0
}

.next .fa {
	padding: 0 0 0 3px
}

.prev {
	position: absolute;
	left: 0;
	top: 40%;
	z-index: 104;
}

.next {
	position: absolute;
	right: 0;
	top: 40%;
	z-index: 104	
}

#prev1 {
	margin: 30px 0 0 25px	
}

#next1 {
	margin: 30px 35.5% 0 0		
}

	@media screen and (max-width: 767px) {
		#prev1 {
			top: 25%;
			margin: 0 0 0 15px	
		}
			
		#next1 {
			top: 25%;
			margin: 0 15px 0 0		
		}
		
		.carousel  {
			overflow: hidden 
		}
		
		.carousel .cycle-slide {
			width: 180px ;
		}
	}
	
#members-slider, #content-slider {
	overflow: hidden	
}


/* ------ NEWSLETTER ------  */  

#newsletter-box {
	background: #036d95 url(images/Group230@2x.png) 100% 55% no-repeat;
	text-align: center;
	padding: 40px 0 65px 0;
	color: #fff;
	margin-top: 40px;
}

.home #newsletter-box {
	margin-top: 80px;
}

#newsletter-box form {
	max-width: 560px;
	margin: 0 auto;
}

#newsletter-box input[type="TEXT"]{
	width: 80%;
	float: left
}

	
	@media screen and (max-width: 600px) {
		#newsletter-box input[type="TEXT"]{
			width: 78%;
		}	
	}
	
	@media screen and (max-width: 480px) {
		#newsletter-box input[type="TEXT"]{
			width: 70%;
		}	
	}

#newsletter-box h4 {
	text-transform: none;
	font-size: 24px	
}

.submit-button {
	display: inline-block;
	position: relative;
}

.submit-button:after {
	right: -23px; 
	height: 46px
}

/* ------ HOME PAGE ------  */ 
.news-box {
	border-bottom: 2px solid #3095B4;
	padding: 0 0 15px 0		
}

	@media screen and (max-width: 767px) {
		.news-box {
			border-bottom: none		
		}
	}
	
.date-meta {
	color: #666;
	font-size: 19px;
	border-bottom: 1px solid #3095B4
}

	@media screen and (max-width: 768px) {
		#news-list .columns:nth-of-type(3), #news-list .columns:nth-of-type(4) {
			display: none !important	
		}
		
	}

/* ------ INNER PAGES ------  */
#slider-inner {
	background: #036d95;
	height: 350px;
	position: relative;
	margin-bottom: 30px;
	overflow: hidden;
	z-index: 0
}
	@media screen and (max-width: 1024px) {
		#slider-inner {
			height: 280px;
		}
	}
	@media screen and (max-width: 767px) {
		#slider-inner {
			height: 180px;
		}
	}

#slider-inner  h1 {
	padding: 0 5%;
	position: relative;
  	top: 50%;
  	transform: translateY(-52%);
	line-height: 100%
}

.slider-inner-img{
	height: 350px;
	width: 45%;
	position:absolute;
	top: 0;
	right: 0; 
}

#curve  {
	height: 350px;
	width: 45%;
	position:absolute;
	top: 0;
	right: 0;
	z-index: 2;
	background: url(images/curve.png) top left no-repeat
}

	@media screen and (max-width: 767px) {
		.slider-inner-img, #curve  {
			height: 200px;
		}
		
		#curve {
			width: 65%;
		}
	}

.card {
	border: 1px solid #001B4A;
	margin: 0 0 60px 0	
}

	@media screen and (max-width: 767px) {
		.card {
			margin: 0 0 30px 0	
		}
	}
	

.card h2 {
	font-size: 22px;
	margin: 0
}

.card a {
	padding: 15px 50px 15px 25px;
	display: block;	
	position: relative
}

.card a:after {
	content: '\f105 ';
	font-family: 'FontAwesome';
	position: absolute;
	top: 15px; 
	right: 20px;
	color: #3095B4;
	font-size: 28px	
}

#card-4 {
	clear: both;
	float: left	
}

.card-box {
	margin: 0 30px;
	border-top: 2px solid #001B4A;
	padding: 15px 0;
}

	@media screen and (max-width: 768px) {
		.card-box {
			margin: 0 ;
		}
	}
	
.card-box h3 {
	font-weight: 400;
	font-size: 20px;
	line-height: 130%
}

.card-box h3 a {
	color: #001B4A;
	display: block;	
	position: relative;
	padding: 0 30px 0 0
}

.card-box h3 a:hover {
	color: #3095B4	
}

.card-box h3 a:after {
	content: '\f105 ';
	font-family: 'FontAwesome';
	position: absolute;
	top: 0; 
	right: 0;
	color: #3095B4;
	font-size: 28px	
}

.date-card {
	font-size: 14px;
	line-height: 120%;
	display: inline-block	
}
.related-post {
	margin: 0 0 20px 0	
}
.related-post a {
	display: block;
}

/* ------ CAMPAIGN PAGES ------  */
.activities-slider {
	position: relative	
}

.activities-slider img, .activities-slider .slided {
	width: 225px	
}

.activities-slider .slided div:after {
	display: none		
}

.resources-grid {
	max-width: 815px;
	margin: 0 auto	
}
.resources-grid li {
	padding: 40px 0 0 0	
}
.resources-grid a {
	display: block;
	position: relative
}

.resources-grid a span {
	position: absolute;
	top: -20px;
	left: 0
}

.tag:not(body) {
	display: inline-block;
	color: #046D96;
	border: 1px solid #046D96;
	font-size: 16px;
	padding: 1px 5px;
	line-height: 120%;
	margin-bottom: 2px
}

.our-work-box {
	float: left !important;
	margin: 0 0 30px 0	
}

/* ------ RESOURCE HUB ------  */
.tags { 
	margin-top: 20px;
	font-size: 16px;
	line-height: 120%
}

.tags a {
	color: #046D96	
}

#resource-results .medium-3 {
	float: left	
}

/* ------ SEARCH & FILTER ------  */
.search-wrapper {
	width: 100%;
	background: #E9F4F7;
	padding: 20px;
	margin: 50px 0	
}

	@media screen and (max-width: 640px) {
		.search-wrapper {
			padding: 10px;
			margin: 25px 0	
		}
	}

.search-wrapper h4 {
	float: left;
	padding: 0 15px 0 0;
	text-transform: none ;
	font-size: 20px;
	clear: left;
	font-weight: 400;
	color: #000;
	width: 120px
}

	@media screen and (max-width: 640px) {
		.search-wrapper h4 {
			float: none;
			padding: 0 5px
		}
	}

.search-wrapper .fa {
	color: #001B4A;
}

.search-wrapper label.sf-label-radio {
	text-transform: uppercase;
	color: #001B4A;
	font-weight: 700;
	font-size: 22px
}

.search-wrapper label {
	padding: 0 10px 0 0;
}

	@media screen and (max-width: 640px) {
		.search-wrapper ul {
			margin: -15px 0 0 0	
		}
		.search-wrapper label {
			padding: 0 5px;
			margin: 0 0 0 -10px;
		}
	}

.search-wrapper .sf-option-active label {
	border-bottom: 2px solid #001B4A;
	padding: 0 10px 0 0
}

	@media screen and (max-width: 640px) {
		.search-wrapper .sf-option-active label {
			padding: 0 5px 0 0
		}
	}

.search-wrapper input, .search-wrapper select {
	border: 1px solid #001B4A;
	border-radius: 0;
}	

	@media screen and (max-width: 640px) {
		.search-wrapper input, .search-wrapper select {
			margin: 0 15px
		}	
	}

.search-wrapper .sf-field-submit input[type=SUBMIT] {
	background: none;
	border: none;
	color: #001B4A;
	height: auto;
	margin: 0 0 0 -10px
}

	@media screen and (max-width: 640px) {
		.search-wrapper .sf-field-submit input[type=SUBMIT] {
			margin: 0 0 0 10px
		}
	}
		
.search-wrapper .sf-field-submit:after {
	content: '\f0d7';
	font-family: 'FontAwesome';
}

.search-wrapper select, .search-wrapper option{
	font-size: 18px;
	color: #3095B4
}	
.search-wrapper .sf-field-post_type ul {
	display: block;
	width: 100%	;
	height: 60px;
}

.search-wrapper .sf-field-post_type ul li{
	float: left	;
	margin: -6px 0 0 0
}

.search-wrapper .sf-field-post_type ul li input[type=RADIO] {
	opacity: 0;
}

.search-wrapper .sf-field-tag {
	margin-left: 120px;
    width: 60%;
}

.pagination {
	text-align: center;
	font-size: 18px;
	margin: 50px 0 0 0
}

.wp-pagenavi  {
	padding: 0 15px 	
}

.pages {
	display: inline-block	
}

.pagination a, .pagination span {
	border: none	
}

#resource-hub-search li {
	display: inline-block;
	width: 50%;
}

	@media screen and (max-width: 640px) {
		#resource-hub-search li {
			display: inline-block;
			width: 100%
		}
	}

#resource-hub-search li select {
	width: 220px
	
}

	@media screen and (max-width: 640px) {
			#resource-hub-search li select {
				width: 100%	
			}
	}

#search-results-filter {
	margin: -20px 0 50px 0	
}
#search-results-filter li {
	display: inline-block;
}

/* ------ MAP ------- */
h4.marker-title {
	padding: 20px 0 0 0	
}

p.map-text {
	font-size: 18px;
	margin-left: -15px
}



	@media screen and (max-width: 768px) {
		.gm-style-iw {
			width: 90% !important	
		}
	}

/* ------ FOOTER SECTIONS ------  */
.section {
	padding: 40px 0	
}

.light-bg {
	background-color: #E9F4F7;
}

.medium-bg {
	background-color: #036d95;
}

.dark-bg {
	background-color: #001B4A;
}

.section h4 {
	margin: 0 0 30px 0	
}

.medium-bg h4, .dark-bg p {
	color: #fff	
}

h4.inline {
	float: left
}
#social-icons  {
	float: left	
}
#social-icons li {
	list-style: none;
	float: left;
	margin: 0 10px
}

#social-icons li .fa-twitter {
	color: #1ac3f6	
}

#social-icons li .fa-facebook-square, .social-box  .fa-facebook-square{
	color: #425198	
}

#social-icons li .fa-linkedin-square {
	color: #0d6aa8	
}

#social-icons li .fa-instagram {
	color: #9564bc	
}

#social-icons li .fa-youtube {
	color: #333	
}

.social-box {
	background: #fff;
	padding: 15px;
	min-height: 300px;
	margin: 0 0 30px 0	
}

	
	@media screen and (max-width: 800px) {
		.social-box {
			padding: 10px;
			min-height: auto;
			margin: 0 0 20px 0	
		}
	}

/* feed them social plugin */


.fts-mashup-post-wrap {
	background: #fff;
	width: 100% !Important		
}

.fts-jal-fb-link-wrap, .fts-mashup-image-and-video-wrap, .fts-mashup-count-wrap  {
	display: none !important	
}

#youtube-box .fts-mashup-image-and-video-wrap {
	display: block !important	
}

#twitter-box .fts-mashup .fts-mashup-post-wrap:nth-of-type(2) .fts-mashup-icon-wrap-left, #twitter-box .fts-mashup .fts-mashup-post-wrap:nth-of-type(2) .fts-jal-fb-user-name {
	display: none !Important	
}

.fts-mashup-post-wrap {
	border: none !Important	
}

#youtube-box .social-box, #twitter-box .social-box {
	padding-bottom: 0	
}

#youtube-box .fts-mashup-description-wrap {
	display: none !Important	
}


/* What we're doing */

#content-slider img, #content-slider .slided {
	width: 210px
}

#campaign-slider img, #campaign-slider .slided {
	width: 250px;
}

.slided {
	margin: 0 15px;
	display: block;
	white-space:normal;
	vertical-align: top
}

	@media screen and (max-width: 800px) {
		.slided {
			margin: 0 10px;
		}
	}

.slided div {
	background: #fff;
	padding: 10px 40px 10px 10px;
	position: relative;
	font-size: 17px;
	line-height: 120%;
	height: 110px;
	
}

.slided div:after {
	content: '';
	width: 0; 
	height: 0; 
	position:absolute;
	bottom: 0;
	right: 0;
	border-bottom: 40px solid #036d95; 
	border-left: 40px solid transparent;	
}

#campaign-slider div:after {
	display: none	
}

.slided div a {
	color: #001B4A;
	font-weight: 300;
	position: relative;
	display: block;
}

.slided div a:hover {
	color: #3095B4	
}

.slided div a:after {
	content: '\f105 ';
	font-family: 'FontAwesome';
	position: absolute;
	top: 0; 
	right: -22px;
	color: #3095B4;
	font-size: 28px
}

.slided div .carousel-tag {
	background: #001B4A;
	color: #fff;
	padding: 3px 5px;
	position: absolute;
	top: -25px;
	left: 0;
	z-index: 10	
}

/* ------ FOOTER CONTACT SECTION ------  */

#contact-section .button {
	margin: 30px -50px 0 0	
}
.block-grid  ul {
	margin: 0 20px 30px 20px	
}

	@media screen and (max-width: 767px) {
		.block-grid {
			margin: 0 
		}	
	}
	
.block-grid li {
	list-style: none;
	line-height: 120%;
	margin: 0 0 12px 0
}

#footer-last {
	padding: 20px;
}

#footer-last p{
	font-size: 18px;	
}

.resources-list.block-grid li {
	list-style: disc	
}

.resources-list {
	max-width: 830px;
	margin: 0 auto;
	margin-top: 30px
}


/* MOBILE NAVIGATION ------------------------ */
#nav-toggle {display: none}

@media screen and (max-width: 1180px) {
#search-button {display: none}
#search-mob {
	display: block;
	position: absolute; 
	right: 65px;
	top: 67px;
	z-index: 111
}
#search-mob .fa-search {
	color: #001B4A; 
	font-size: 28px
}

#search-dropdown {
	max-width: 100%;
	z-index: 112
}

#search-dropdown form {
	background: #001B4A;
	position: absolute;
	width: 100%;
	padding: 15px 25px 0 25px;
	top: 110px;
	right:  0;	
	z-index: 104
}

#nav-toggle { 
	right: 15px;
	display: block; 
	position: absolute; 
	cursor: pointer; 
	padding: 10px; 
	width: 120px; 
	font-size: 20px; 
	color: #333;
	margin-top: 9px;
}

#nav-toggle span {
	position: absolute;
	right: 0;
	top: 20px	
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 30px;
  background: #333;
  position: absolute;
  display: block;
  content: '';
  z-index: 110
}
#nav-toggle span:before {
  top: -9px; 
}
#nav-toggle span:after {
  bottom: -9px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
   -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

header nav {
	position: absolute;	
	top: 5px;
	left: 0;
	z-index: 109;
	width: 100%;
	padding: 120px 0 10px 0;
	background: #fff; 
	min-height: 100vh
}

header nav .sf-menu {
	max-width: 100%;
	height: auto;
	float: none;
	margin: 30px
}
	
header nav .sf-menu li {
	float: none;
	margin: 0;
	text-align: left;
	font-size: 28px;
}

header nav .sf-menu li a {
	padding: 5px 0;
	display: block
}

header nav ul ul:before {
	display: none
}

header nav ul ul {
	background: #fff;
	padding: 0	
}

header nav ul li:first-child a:before  {
	margin: 0 0 10px 0;
	font-size: 32px;
	float: none
}

header nav ul ul li:first-child {
	margin: 0 15px ;
}

header nav li li:first-child a:before {
	display: none	
}

header nav li.current_page_item a {
	border-bottom: none
}

header nav ul ul li {
	text-align: left;
	padding: 5px 0;
	float: none;
	display: block;	
	font-size: 22px;
}

header nav ul ul.sub-menu li a{
	color: #001B4A;
	display: inline-block;	
	width: auto;
	font-size: 22px;
}

header nav ul ul.sub-menu li:before {
	content: '- ';
	display: inline-block;
	margin: 0 7px 0 0	
}
.sf-menu ul {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	z-index: 104;
	width: auto
}
}

@media screen and (max-width: 640px) {
	.equalheight, .equalheight2 {
		height: auto !important	
	}	
	
	header nav {
		padding: 80px 0 10px 0;

	}
}