/*
Theme Name: Functional
Author: BWD
Description: Theme for Andy Seo
Version: 1.0
*/

:root
{
	--functional-blue : #0E69AD; /* Blue */
	--functional-light-blue : #3697df; /* Light Blue */
}

body, html
{
	margin : 0px;
	padding : 0px;

	font-family : "Open Sans", sans-serif;
	font-size : 16px;
	line-height : 22px;
}

.site_width_container, .wp-block-group__inner-container, .wp-block-columns
{
	max-width : 1200px;
	width : calc(100% - 60px);

	margin : 0px auto;
	padding : 0px 30px;

	padding : 30px 30px;
}

.padding-bottom-0 .wp-block-group__inner-container
{
	padding-bottom : 0px;
}

.padding-top-0 .wp-block-group__inner-container
{
	padding-top : 0px;
}

.wp-block-group.skinnycol
{
	max-width : 50%;
	width : 100%;

	margin : 0px auto;
}

.wp-block-columns
{

	padding : 0px 30px;
}

.site_width_container
{
	padding : 0px 30px;
}

#header_contact .site_width_container, header .site_width_container, footer .site_width_container
{
	padding : 0px 30px;
}

.width-100
{
	width : 100%;
	padding : 0px;
}

p.button
{
	display : table;

	min-height : 75px;

	margin : 0px auto;

}

p.button a:link, p.button a:visited, #main_content_container a.button:link, #main_content_container a.button:visited
{
	display : inline-block;

	background : var(--functional-blue);
	color : #FFF;

	padding : 15px 25px;
	border-radius : 10px;

	text-decoration : none;

	transition : .3s;

	display : table-cell;
	vertical-align : middle;
}

#main_content_container .blog_short_container a:link, #main_content_container .blog_short_container a:visited
{
	display : inline-block;
}

.wp-block-column p.button a:link, .wp-block-column p.button a:visited
{
	max-width : 100%;
	width : calc(100% - 50px);
}

p.button a:hover, #main_content_container a.button:hover
{
	background : #3697df;
}


#header_contact
{
	background : #262A2B; /* Almost Black */
	color : #FFF;

	padding : 5px 0px;

	font-family : "Open Sans", sans-serif;
	font-size : 12px;
	text-align : right;
}

#header_contact img
{
	display : block;

	float : left;

	padding-top : 5px;
	padding-right : 10px;
}

#header_contact img.uptwo
{
	padding-top : 3px;
}

#header_contact img.upfive
{
	padding-top : 5px;
}

#header_contact img.rightzero
{
	padding-right : 0px;
}

#header_contact a:link, #header_contact a:visited
{
	display : inline-block;

	color : #FFF;

	padding-left : 15px;

	text-decoration : none;

}

#header_contact a:after
{
	content : "";border-color : #FFF;

	width: auto;
    left: auto;
    right: auto;
    position: relative;
    height: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    /* transform: translateY(-40%); */
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    border-left-width: 1px;
    border-style: solid;
    right: -8px;
}

#header_contact a:last-child:after
{
	border-width : 0px;
}

.pull
{
	display : none;
}

nav div
{
	float : right;

	display : inline-block;

	margin-top : 17px;
}

.navbar_container
{
	position : relative;

	background : #FFF;

	max-width : 1100px;
	max-width : 1190px;
	width : 100%;

	padding : 14px 0px;

	text-align : left;
}

.navbar_container .logo
{
	position : absolute;

	top : 43px;
}

.navbar_container ul
{
	position : relative;
	display : inline;

	list-style-type : none;

	padding : 0px 0px 0px;
}

.navbar_container ul.sub-menu
{
	display : none;
}

.navbar_container ul li
{
	display : inline-block;
	position : relative;

	height : auto;
}

.navbar_container ul li.mobile_only
{
	display : none;
}

.navbar_container ul li a
{
	display : inline-block;

	color : var(--functional-blue);

	padding : 0px 15px 15px;

	font-size : 14px;
	font-weight : 700;
	text-transform : uppercase;
	text-decoration : none;

	transition : background .3s;
}

.navbar_container ul li:not(.menu-item-has-children) a:hover
{
	border-style : solid;
	border-color : var(--functional-blue);
	border-width : 0px 0px 2px 0px;
}

.navbar_container ul li:last-child a
{
	margin-right : 0px;
}

.navbar_container ul li:hover ul.sub-menu
{
	display : block;
}

.navbar_container ul.sub-menu
{
	position : absolute;

	left : 0px;

	background : #0096D3; /* Light Blue */

	margin : 0px;
	padding : 0px;

	border-style : solid;
	border-color : var(--functional-blue);
	border-width : 2px 0px 0px 0px;
}

.navbar_container ul.sub-menu li
{
	width : 100%;
	width : calc(100% - 30px);
}

.navbar_container ul.sub-menu li a
{
	color : #FFF;

	width : 100%;


	text-transform : none;

	padding : 15px 0px;
	padding : 15px;
}

.navbar_container ul.sub-menu li a:hover
{
	background : #FFF;
	color : var(--functional-blue);
}

.navbar_container ul.sub-menu li a:hover
{
	border-width : 0px;
}

#hp_hero, #hero
{
	background : #105673; /* Dark Blue */
	color : #FFF;

	padding : 60px 0px;

	text-align : center;
}

#hp_hero
{
	background : url('/wp-content/uploads/2018/11/Screen-Shot-2018-11-02-at-1.45.25-PM.png');
	background-size : cover;
}

#hp_hero h1
{
	color : #FFF;

	font-size : 45px;
	line-height : 70px;
}

#hero h1, #hero h2, #hero h3, #hero h4, #hero h5, #hero h6
{
	font-family : "Montserrat", sans-serif;

	line-height : initial;
}

#hero h1
{
	font-size : 45px;
}


#main_content_container
{
	/* padding : 45px 0px; */
}

#main_content_container h1, #main_content_container h2, #main_content_container h3,
#main_content_container h4, #main_content_container h5, #main_content_container h6,
.wp-block-group__inner-container h1, .wp-block-group__inner-container h2,
.wp-block-group__inner-container h3, .wp-block-group__inner-container h4,
.wp-block-group__inner-container h5, .wp-block-group__inner-container h6,
.wp-block-columns h1, .wp-block-columns h2, .wp-block-columns h3,
.wp-block-columns h4, .wp-block-columns h5, .wp-block-columns h6,
.wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3,
.wp-block-heading h4, .wp-block-heading h5, .wp-block-heading h6
{
	color : #0E69AD; /* Blue */

	font-family : "Montserrat", sans-serif;

	line-height : normal;
}

#main_content_container h1, .wp-block-group__inner-container h1, .wp-block-columns h1,
.wp-block-heading h1
{
	font-size : 30px;
}

#main_content_container img, .wp-block-group__inner-container img, .wp-block-columns img
{
	height : auto;
}

#main_content_container a:link, #main_content_container a:visited
.wp-block-group__inner-container a:link, .wp-block-group__inner-container a:visited,
.wp-block-columns a:link, .wp-block-columns a:visited
{
	color : var(--functional-blue);

	text-decoration : none;
}

#main_content_container p.button a:link, #main_content_container p.button a:visited
.wp-block-group__inner-container p.button a:link, .wp-block-group__inner-container p.button a:visited,
.wp-block-columns p.button a:link, .wp-block-columns p.button a:visited
{
	color : #FFF;
}

.border1
{
	border-style : solid;
	border-width : 1px;
	border-color : #000;
}

.has-medium-font-size
{
	line-height : 32px;
}

.wp-block-column
{
	line-height : 24px;

	padding : 30px 15px;

	padding : 15px 15px;
}

.greycol
{
	background: lightgray;
}

.blog_short_container
{
	float: left;

	max-width : 541px;
	width : 100%;
	min-height : 520px;

	padding-top : 25px;
	padding-right : 60px;

	text-align: center;
}

.blog_img_container
{
	max-height : 260px;

	overflow : hidden;
}

#main_content_container .blog_short_container img
{
	max-width : 400px;

	height : auto;
}

.blog_short_container:nth-child(even)
{
	padding-right : 0px;
}

footer
{
	background : #262A2B; /* Dark Grey */
	color : #FFF;

	padding : 30px 0px;

	font-size : 14px;
	line-height : 20px;
	text-align : center;
}

footer a:link, footer a:visited
{
	color : #FFF;

	text-decoration : none;
}

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

.clear
{
	clear : both;

	width : 0px;
	height : 0px;
}

@media only screen and (max-width : 825px)
{
	nav div
	{
		float : none;
		display : block;
	}

	.navbar_container ul li:not(.menu-item-has-children) a:hover
	{
		border-style : solid;
		border-color : var(--functional-blue);
		border-width : 0px 0px 0px 0px;
	}

	img.logo_functional
	{
		padding : 15px 0px 0px 15px;
	}

	.navbar_container ul
	{
		background : var(--functional-blue);
	}

	.navbar_container
	{
		position : fixed;

		top : 0px;
		left : 0px;

		background : #FFF no-repeat;


		float : none;

		max-width : 100%;
		width : 100%;
		height : auto;


		margin-top : 0px;
		padding : 0px;

		text-align : left;

		z-index : 99999;

		border-style : solid;
		border-color : var(--flowers-purple);
		border-width : 0px 0px 3px;
	}

	.navbar_container.admin
	{
		top : 45px;
	}

	.navbar_container ul, .navbar_container ul.sub-menu, .navbar_container ul li:hover ul.sub-menu
	{
		float : none;

		display : none; /* If we don't have this here, menu will pop open on resize when wne don't want it to. */

		max-width : 100%;
		width : 100%;
		height : auto;

		margin : 0px;
		padding : 0px 0px 0px 0px;

		text-align : left;
	}

	.navbar_container ul li, .navbar_container ul.sub-menu li,
	.navbar_container ul li:last-child, .navbar_container ul li.mobile_only
	{
		float : none;

		background : #C3C5B0; /* Dark Blue */
		background : #88a278;
		background : #FFF;
		background : var(--playbook-dark-blue);

		display : block;
		height : auto;

		max-width : 100%;
		width : 100%;

		margin : 0px;
		padding : 0px 0px 0px;

		border-style : solid;
		border-color : var(--rr-teal);
		border-width : 0px 0px 1px 0px;
	}

	.navbar_container ul li ul.sub-menu.open
	{
		position : relative;
		display : block;
	}

	.navbar_container ul li ul.sub-menu.open li
	{
		display : block;
	}


	.navbar_container ul li:last-child
	{
		border-width : 0px;
	}

	.navbar_container ul li.skinny_hide
	{
		display : inline-block;
	}

	.navbar_container ul li a, .navbar_container ul li a:link, .navbar_container ul li a:visited,
	 .navbar_container ul li:last-child a:visited, .navbar_container ul li:last-child a
	{
		float : none;

		background : none;
		color : var(--playbook-dark-blue);
		color : #FFF;

		display : block;

		max-width : 100%;
		width: 100%;
		height : 25px;

		font-size : 16px;
		font-weight : 600;

		margin : 0px;
		padding : 10px 30px 10px 30px;

		text-transform : none;
		text-transform : uppercase;

		border-width : 0px;
	}

	.navbar_container ul li a:hover, .navbar_container ul li:last-child a:hover
	{
		background : #FFF;
		color : var(--playbook-dark-blue);
	}

	body.admin_bar .navbar_container
	{
		top : 32px;
	}

	.navbar_container a.pull
	{
		display: inline-block;
		position: absolute;

		right : 15px;
		top : 0px;

		color : #FFFFFF;

		height : auto;

		font-size : 16px;
		font-weight : 600;
		letter-spacing: 1px;

		text-transform : uppercase;
		text-decoration : none;

		padding : 24px 30px 61px 90px;
	}

	.navbar_container a.pull:after
	{
		content:"";
		background: url('images/nav-icon.png') no-repeat;
		width: 23px;
		height: 21px;
		display: inline-block;
		position: absolute;
		right: 30px;
		top: 30px;
	}

	.blog_short_container
	{
		float : none;

		max-width : none;

		padding : 25px 0px 0px;
	}

	.wp-block-group.skinnycol
	{
		max-width : 100%;
	}
}

@media only screen and (max-width : 600px)
{
	.site_width_container, .wp-block-group__inner-container, .wp-block-columns
	{
		padding : 0px;
	}

	.wp-block-heading
	{
		padding : 0px 30px;
	}

	.wp-block-group__inner-container
	{
		width : calc(100% - 30px);
	}

	.wp-block-group
	{
		padding-top : 30px;
	}

	.wp-block-column
	{
		margin-top : 30px;
	}

	figure.wp-block-image
	{
		text-align : center;
	}

	#hp_hero
	{
		padding : 30px 0px;
	}

	#hp_hero h1
	{
		font-size : 36px;
		line-height : 50px;
	}


}