/*
Theme Name: ButteCAA
Theme URI: https://www.halfabubbleout.com/
Version: 1.0
Description: The theme for ButteCAA created by the Half A Bubble Out team.
Author: Half a Bubble Out
Author URI: https://www.halfabubbleout.com/
template: bb-theme
*/

/* =======================================================================
 * Header
 * =====================================================================*/

.fl-page-nav-container
{
    padding-top:                10px;
    min-height:                 64px;
    background-color:           #a7092f;
    border-top-left-radius:     12px;
    border-top-right-radius:    12px;
    text-align:                 center;
	position:					relative;
}

.fa.fa-bars {color: white;}

@media (min-width: 768px)
{
    .fl-page-nav-container .navbar-nav
    {
        float:      none !important;
        text-align: center !important;
    }
    
    .fl-page-nav-container li
    {
        float:      none !important;
        display:    inline-block !important;
    }
}

.fl-page-nav-wrap
{
    border-top:     0 !important;
    border-bottom:  0 !important;
}

.fl-page-nav-container a
{
	border-bottom: 5px solid transparent;
}

.fl-page-nav-container a:hover
{
	border-bottom: 5px solid #DDAA44;
	padding-bottom: 5px;
}

.header-links
{
    margin-top: 60px;
}

.login-wrapper
{
    max-width:	1100px;
    margin:     auto;
    position:   relative;
}

.login, .search-link
{
    position:   absolute;
    right:      12px;
    top:        12px;
    text-align: center;
}

.login a, .search-link a
{
	position: relative;
	z-index: 10;
}

.login a:hover, .search-link a:hover
{
    text-decoration: none !important;
}

.sub-menu
{
	background-color: 			#DDAA44 !important;
	border-bottom-left-radius: 	4px;
    border-bottom-right-radius: 4px;
	text-align: 				left;
	
	margin-top: -1px !important;
	border-top: 0 !important;
}

.sub-menu li
{
	
}

.sub-menu a
{
	margin:				0 0 0 8px !important;
	border-radius:		4px;
	width:				190px !important;
}

.sub-menu a:hover
{
	background-color: 	white;
	color: 				#a7092f !important;
}

.fl-page-nav ul.sub-menu > li {
	width: calc(100% - 16px) !important;
}

.fl-page-nav ul.sub-menu > li > a {
	width: 100% !important;
}

/* =======================================================================
 * Footer
 * =====================================================================*/
 
.fl-page-footer-container
{
    padding-top: 45px !important;
}
 
.fl-page-footer .text-left
{
    width: 55%;
}

.fl-page-footer .text-right
{
    width: 45%;
}

.footer-badge
{
    float: left;
    margin-top: -20px;
    width: 40%;
}

.footer-links
{
    margin-right:   32px;
    margin-top:     80px;
    font-size:      14px;
}

.fl-page-footer-text
{
    font-size: 13px;
    color: #6d7278;
}

.fl-page-footer-text b
{
    color: #656565;
}

.fl-page-footer-text * {
	color: #6d7278;
}

.footer-left {
	display: flex;
}

.footer-contact {
	display: inline-block;
	margin-left: 8px;
}

@media (max-width: 991px) {
	.footer-left-logo {
		min-width: 200px;
	}
}

@media (max-width: 768px) {
	.footer-left {
		display: block;
	}

	.footer-left-logo {
		margin-top: 24px;
	}
}

#google_translate_element
{
	position: absolute;
	bottom: -170px;
}

.fl-page-footer-widgets {border-top: 0 !important;}

/* =======================================================================
 * General Formatting
 * =====================================================================*/
 
h2
{
    color:          #a7092f !important;
    font-weight:    bold !important;
}

h3
{
    color:          #666666 !important;
    font-weight:    bold !important;
    text-transform: uppercase !important;
}

.btn-overlay
{
    z-index: 1;
}

.btn-overlay .fl-button
{
    border-radius:      0 !important;
    background-color:   #4e699e !important;
    border:             0 !important;
    text-transform:     uppercase;
    font-weight:        bold !important;
    padding:            20px !important;
    width:              170px;
    text-align:         center;
    font-size:          16px !important;
}

.script-font
{
    font-family:    'Nothing You Could Do', cursive;
    font-size:      21px;
    font-weight:    100;
    color:          #52697d !important;
}

/* =======================================================================
 * Side Navigation
 * =====================================================================*/
 
.subpage-wrapper
{
	max-width: 	1170px;
	margin: 	auto !important;
}

.subpage-content
{
	display: inline-block;
	width: calc(100% - 280px);
	vertical-align: top;
}
 
.side-navigation
{
	width: 270px;
	display: inline-block;
	vertical-align: top;
	padding: 20px 20px 20px 40px;
}
 
.side-navigation h2
{
	background-color: 	#455A71;
	color:				white !important;
	width: 				100%;
	font-size: 			20px;
	text-align:			center;
	margin:				0 !important;
	
	border-top-left-radius: 	3px;
	border-top-right-radius: 	3px;
}

.side-navigation ul
{
	background-color: 	#F4F5F5;
	padding: 			15px 0;
	list-style:			none;
	
	border-bottom-left-radius:	3px;
	border-bottom-right-radius:	3px;
}

.side-navigation a 			{display: inline-block; color: #455971; padding: 10px 15px; font-size: 20px; width: 100%;}
.side-navigation a:hover	{text-decoration: none;}
.side-navigation a:hover,
.side-navigation a.active 	{background-color: #DDD;}

/* =======================================================================
 * Home Page
 * =====================================================================*/

body.home .fl-page::before
{
	content: "";
	
	position: 	absolute;
	left: 		0;
	top: 		0;
	width: 		100%;
	height: 	546px;
	z-index:	0;
	
	background-image: 	url("/wp-content/uploads/2017/05/header-bg.png");
	background-repeat: 	repeat-x;
	background-size:	contain;
}

body.home .fl-page-header {background-image: none;}

.home-slider
{
    width: 		1170px;
    max-width: 	90%;
}

@media (max-width: 1099px)
{
	.home-slider {max-width: 100%;}
}

.home-slider .fl-node-content
{
    position:   relative;
    top:        10px;
}

.home-slider .fl-slide-bg-photo
{
    border-radius: 8px;
}

.home-slider::after
{
    content: "";
    display: block;
    height: 72px;
    
    background-image: url("/wp-content/uploads/2017/05/home-slide-shadow.png");
    background-size: 100% 100%;
}

.home-slider .fl-slide-content
{
	background-color: rgba(69, 90, 113, 0.5);
	border-radius: 1em;
	position: relative;
	padding: 32px;
}

.home-slider .fl-slide-title 		{color: white !important; font-size: 20px;}
.home-slider .fl-button				{background-color: #991133 !important; border: 0 !important; position: absolute !important; height: 35px; right: 40px; top: initial !important; bottom: 8px !important; z-index: 50 !important;}
.home-slider .fl-button:hover		{background-color: #5F071D !important;}
.home-slider .fl-button-text 		{color: white !important; position: relative; top: -4px;}
.home-slider .fl-button-text font 	{color: white !important;}

.home-slider .fl-content-slider-svg-container 	{display: none;}
.home-slider .fl-content-slider-navigation		{top: auto; bottom: 44px;}
.home-slider .slider-prev,
.home-slider .slider-next		{opacity: 1.0; background-repeat: no-repeat; background-size: contain; width: 27px; height: 27px;}
.home-slider .slider-prev		{background-image: url("/wp-content/themes/buttecaa/images/prev-arrow-md.png"); left: auto; right: 50px;}
.home-slider .slider-next		{background-image: url("/wp-content/themes/buttecaa/images/next-arrow-md.png"); right: 20px;}
.home-slider .slider-prev:hover	{background-image: url("/wp-content/themes/buttecaa/images/prev-arrow-md-hover.png");}
.home-slider .slider-next:hover	{background-image: url("/wp-content/themes/buttecaa/images/next-arrow-md-hover.png");}

.home-slider .fl-row-content-wrap {min-height: 346px; max-height: 346px;}

.home-links .fl-callout-title
{
    margin-top: 	-70px;
    position:   	relative;
    z-index:    	1;
	pointer-events: none;
}

.home-links .fl-callout-title span
{
    background-color:   rgba(0, 0, 0, 0.35);
    color:              white;
    padding:            8px;
    font-size:          21px;
}

.home-links .fl-callout-title a {color: white;}

.home-join-callout
{
    position: relative;
}

.home-join-callout .fl-callout-title
{
    position:   absolute;
    left:       40px;
    top:        30px;
}

.home-join-callout .fl-callout-text
{
    position:   absolute;
    left:       40px;
    top:        80px;
    width:      58%;
}

/* =======================================================================
 * Blog
 * =====================================================================*/
 
.single-post .fl-post-thumb		{float: right; margin: 0 0 10px 10px;}
.single-post .fl-post-thumb img	{width: 350px;}

.fl-archive .fl-post-thumb		{float: left;}
.fl-archive .fl-post-thumb a	{border: 10px solid white; box-shadow: 3px 3px 3px #DDD; display: block;}
.fl-archive .fl-post-thumb img	{width: 135px;}
.fl-archive .fl-post-content	{display: block;}
.fl-archive .fl-post-header		{margin-bottom: 0;}

.fl-post-details {margin-left: 170px;}

/* =======================================================================
 * Search
 * =====================================================================*/

.search .fl-post-details 			{margin-left: 0;}
.search-field 						{max-width: 400px; margin: auto;}
.search-field form 					{text-align: center;}
.search-field input[type="submit"]	{margin: 16px;}

/* =======================================================================
 * Responsiveness
 * =====================================================================*/
 
.navbar-toggle {margin-top: -5px !important;}
.navbar-toggle::before {content: "Menu"; color: white; position: relative; top: -2px; left: -8px;}

@media (max-width: 1099px)
{
	.fl-page-nav a {font-size: 14px !important; padding: 4px !important;}
	.fl-page-nav-container {padding: 20px 20px 0 20px;}
}

@media (min-width: 769px)
{
	.fl-page-footer-row .col-md-6.text-left {width: 70%;}
	.fl-page-footer-row .col-md-6.text-right {width: 30%;}
}

@media (max-width: 768px)
{
	.fl-page-nav-container {padding-top: 10px;}
	
	.fl-page-nav li 		{text-align: left; border-bottom: 0 !important;}
	.fl-page-nav a 			{text-align: left;}
	.fl-page-nav a:hover 	{text-align: left;}
	
	#menu-primary-navigation a 			{color: white !important;}
	#menu-primary-navigation a:hover 	{color: #DDAA44 !important; padding-left: 32px !important;}
	
	.fl-page-nav-collapse.collapsing,
	.fl-page-nav-collapse.in {margin-top: 32px;}
	
	.side-navigation {display: none;}
	.subpage-content {width: 100%; padding: 0 16px;}
	
	.fl-page-footer-row .col-md-6 {width: 100%;}
	#google_translate_element {left: 0; width: 100%; bottom: -225px; text-align: center !important; z-index: 1;}
	
	.side-navigation {display: none;}
	.subpage-content {width: 100%;}
	
	.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav .navbar-toggle {top: initial; font-size: 24px;}
	.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-header-logo {margin-right: 75px !important;}
	.fl-page-nav-bottom .fl-page-header-content .fl-page-header-text .header-links {margin-top: 0;}
	.fl-page-nav-bottom .fl-page-header-content .fl-page-header-text {margin-top: 10px;}
	
	.fl-page-nav-container {min-height: 44px; border-top-left-radius: 0; border-top-right-radius: 0;}
	
	.home-slider {margin-bottom: 32px;}
	.home-slider a.fl-button {position: initial !important;}
	
	li.gfield_html {
		display: block;
	}
}

/* =======================================================================
 * 
 * =====================================================================*/

div.text-body-1 {
    background-color: #455971;
border-radius: 15px 15px 15px 15px;
    color: #ffffff;
    line-height: 1.7;
}
div.text-body-2 {
    color: #666666;
    line-height: 1.7;
}
div.picture-box-1 {
    box-shadow: 5px 5px 5px;
    margin-left: 90px;
    margin-right: 90px;
    margin-bottom: 40px;
}
div.picture-box-2 {
    box-shadow: 5px 5px 5px;
    margin-left: 350px;
    margin-right: 350px;
    margin-bottom: 40px;
}
div.callout-1 {
     background: light-grey; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, gray, white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, gray, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, gray, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, gray, white); /* Standard syntax */
border-radius: 15px 15px;
margin-left: 120px;
margin-right: 120px;
margin-bottom: 10px;
}
div.text-body-3 {
    color: #666666;}
h4 {color:#455971 !important; font-size: 26px;}

.fl-slide-bg-link {display: none;}

.login-wrapper .social-links {
	position: absolute;
	z-index: 10;
	right: 110px;
	top: 18px;
}

.social-links .dashicons-facebook {
	font-size: 40px;
	width: 45px;
}
.social-instagram {
	display: inline-block;
	fill:#e3425c;
	width: 36px;
	height: 41px;
}
.footer-social .social-instagram {
	margin-right: 25px;
}

.login-wrapper .social-instagram {
    width: 33px;
    height: 38px;
}

.footer-social .dashicons-facebook {
	font-size: 40px;
	color: #428bca;
	width: 42px;
	margin-right: 7px;
}

.dashicons-facebook {
	transition: color 300ms ease-in-out;
}

.dashicons-facebook:hover {
	text-decoration: none;
	color: #ddaa44 !important;
}

.social-instagram svg {
	transition: fill 300ms ease-in-out;
}
.social-instagram:hover {
	fill: #ddaa44;
}

@media (max-width: 744px)
{
	.footer-social .dashicons-facebook {
		display: inline-block;
		position: static;
	}
	
	#google_translate_element {
		bottom: -250px !important;
	}
}

@media (max-width: 620px)
{
	.login-wrapper .social-links {
		display: none;
	}
}

/* =======================================================================
 * References Repeater
 * =====================================================================*/

.field-reference-name,
.field-reference-email,
.field-reference-phone,
.field-reference-occupation,
.field-reference-years {
	display: inline-block !important;
	width: calc(100% / 5) !important;
}

.field-attachments,
.field-fullname, 
.field-phone,
.field-address,
.field-dlnumber,
.field-education_and_training
{
	margin: 32px 0;
}

@media (max-width: 991px) {
	.field-reference-name,
	.field-reference-email,
	.field-reference-phone,
	.field-reference-occupation,
	.field-reference-years {
		width: calc(100% / 3) !important;
	}
	
	.field-reference-years {
		margin-right: calc(100% / 3) !important;
		margin-bottom: 64px;
	}
}

@media (max-width: 768px) {
	.field-reference-name,
	.field-reference-email,
	.field-reference-phone,
	.field-reference-occupation,
	.field-reference-years {
		width: calc(100% / 2) !important;
	}
	
	.field-reference-years {
		margin-right: calc(100% / 2) !important;
	}
}
.fl-page-footer-widgets {
    display: none;
}

.form-bkgd {
    background: #fff4dd;
    padding: 12px 24px;
}

.fl-row-content-wrap {
    margin-bottom: 36px;
}