/*
Theme Name: Safety By Design Custom Theme v 1.0
Theme URI: http://www.marion.com
Description: A custom WordPress theme built for Safety By Design
Author: MARION Marketing | Rustin Dodd
Author URI: http://www.marion.com
Version: 1.0
*/

/****** Most core styles we will grab from bootstrap.  This is ismple where we customize these core items */

/* Universal Styles
-------------------------------------------------------------------------------*/

html, body{height:100%;}
body {font-size: 16px; font-family: 'Libre Franklin', sans-serif;}

body, select, input, textarea {color: #333;}

.wrap{width:90%; max-width:1100px; margin:auto;}
	.wrap:after, .content:after{content:''; display:block; widht:0; height:0; clear:both;}

.section{padding:75px 0;}
		
/* Custom text-selection colors (remove any text shadows */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}


/******* Links and Buttons ********/
	a {color: #0071b9; text-decoration:none;}
	a:hover{color:inherit}
	
	/*	j.mp/webkit-tap-highlight-color */
	a:link {-webkit-tap-highlight-color: #fcd700;}
	
	/* Bootstrap Button Overrides */
	.btn, .button{background:#ffcb05; color:#003558; text-decoration: none; border:0; border-radius:50px; padding:12px 30px; cursor: pointer; transition: ease all 0.25s; font-weight:600;}
	.btn:focus, .btn:active:focus, .button:focus, .button:active:focus{outline:none; box-shadow:none;}
	.btn:hover, .button:hover{background:#003558; color:#fff; box-shadow:0 0 5px 5px rgba(0,0,0,0.1);}
	.btn-primary{}
	.btn-secondary{}
	.btn-success{}
	.btn-info{}
	.btn-warning{}
	.btn-danger{}
	.btn-dark{}
	.btn-light{}
	.btn-link{}

	/* SafeTeam Link */
	.safe-team-link{font-weight:700; color:#fff!important;}
		.safe-team-link:before{display:inline-block; content:''; width:35px; height:20px; background:url(_/img/icon-yellow.svg); background-size:contain; background-position:center right; background-repeat:no-repeat; transform: translateY(3px); margin:0 5px 0 0;}
	
	/* Seach Results Links */
	.search-result{display:block; color:#323232; text-decoration:none; padding:25px;}
	.search-result:hover{color:#323232; background:#f5f5f5; text-decoration:none;}
		.search-result h4{color: #0071b9; margin:0;}
		.search-result .url{color:#999; margin:5px 0;}
		.search-result .entry *{margin:0;}
		
	/* Social Icons */
	a.social-icon{display:inline-block; height:40px; width:40px; border-radius:50%; background-size:100%; background-position:center center; margin:0 10px 0 0;}
		a.social-icon:first-child{margin-left:0;}
		a.social-icon:last-child{margin-right:0;}
		a.social-icon span{display:none;}
	a.social-icon.facebook{background-image:url(_/img/social/facebook.svg);}
	a.social-icon.instagram{background-image:url(_/img/social/instagram.svg);}
	a.social-icon.linkedin{background-image:url(_/img/social/linkedin.svg);}
	a.social-icon.twitter{background-image:url(_/img/social/twitter.svg);}
	a.social-icon.youtube{background-image:url(_/img/social/you-tube.svg);}
	a.social-icon.yelp{background-image:url(_/img/social/yelp.svg);}
	a.social-icon.pinterest{background-image:url(_/img/social/pinterest.svg);}
	a.social-icon.rss{background-image:url(_/img/social/rss.svg);}
	
	/* Social Share Buttons */
	.social-share{display:block; background:#f5f5f5; margin:25px 0; padding:15px;}
		.social-share h6{font-size:18px; margin:0 0 10px 0;}
		.social-share ul, .social-share ul li{display:inline-block; margin:0 5px 0 0;}
			.social-share ul li img{width:35px; height:auto;}


ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* Gravity Forms */
.gform_wrapper label{display:none!important;}
.gform_wrapper input[type=text], .gform_wrapper textarea, .gform_wrapper select{padding:15px 10px!important; border:solid 1px #e7e7e7; border-radius:3px; width:100%!important;}


/* ACF Google Map */
.acf-map {width: 100%; height: 350px; border: #ccc solid 1px; margin: 20px 0;}


/* WP Core Styles
-------------------------------------------------------------------------------*/

.sticky, .bypostauthor, .gallery-caption { display: normal;}

.alignnone {margin: 1em 1em 1em 0;}
.aligncenter, div.aligncenter {display:block; margin: .5em auto;}
.alignright {float:right; margin: 0 0 1em 1em;}
.alignleft {float:left; margin: 0 1em 1em 0;}
.aligncenter {display: block; margin: 1em auto;}

img, img[style], img[class*="align"], img[class*="wp-image-"] {width:auto; max-width:100%; height: auto;}
img.wp-smiley {border: none; margin-bottom: 0; margin-top: 0; padding: 0;}
img.alignright {margin-left: 0 0 1em 1em;}
img.alignleft {margin: 0 1em 1em 0;}
img.aligncenter{display: block; margin: 1em auto;}
img#wpstats {display: block; margin: 0 auto;}
img[class*="align"], img[class*="wp-image-"], .gallery .gallery-icon img {border: none;}

.wp-caption, .wp-caption[style] {margin-bottom: 1em; margin-left: 0; width:auto!important; max-width:100%!important; height:auto; text-align: center;}
.wp-caption img {display: block; margin: 0 auto;}
.wp-caption-text {position: relative; font-size: .8em; margin:5px 0; color:#999;}

.gallery {margin: 0 auto;}
.gallery .gallery-item  {margin: 0; float: left; text-align: center; width: 33%;}
.gallery a img {border: none;}
.gallery-columns-4 .gallery-item {width: 25%;}
.gallery-columns-4 .gallery-item img {width: 100%; height: auto;}

blockquote{padding:0 0 0 25px; border-left:solid 1px #e7e7e7;}
code{display:block; padding:15px; background:#f5f5f5;}

table{border:solid 2px #e7e7e7;}
table th{background:#666; color:#fff; padding:5px;}
table tr:nth-child(odd){background:#f5f5f5;}
table tr td{padding:5px 10px;}

dl{padding:0 0 0 25px;}
dt{font-weight:bold;}
dd{padding:0 0 0 15px;}

.entry ul{list-style:disc; padding:0 0 0 25px;}
ol{padding:0 0 0 25px;}

embed, object {max-width: 100%;}


/* Header Styles
-------------------------------------------------------------------------------*/

header{padding:0 0 25px 0; position:absolute; width:100%; top:0; z-index:10000;}
	header .wrap{position:relative;}

/********* Top Header **********/
.top-header{text-align:right; color:#fff; position: relative; z-index: 10000;}
	.top-header > div{display:inline-block; border-bottom:solid 1px #fff; width:auto; padding:5px 0; margin:0 0 20px 0;}
		.top-header > div a, .top-header > div a:visited{text-decoration:none; color:#ffcb05; margin:0 10px 0 10px;}
		.top-header > div a:first-child{margin:0 10px 0 0;}
		.top-header > div a:last-child{margin:0 0 0 10px;}

/********* Logo and Description **********/
.logo{display:block; width:200px; float:left; position: relative;}
	.logo img{width:100%; height:auto;}

/********* Nav Styles ************/
.nav-container{width:auto; float:right; margin:10px 0;}
.nav-open{display:none; height:22px; width:22px; background:url(_/img/menu-icon.svg) center center; background-size:contain; position:absolute; top:50%; right:5px; transform:translateY(-50%); cursor:pointer;}
.nav-close{display:none; height:30px; width:30px; background:url(_/img/menu-close.svg) center center; background-size:contain; position:absolute; top:15px; right:15px; cursor:pointer;}
nav{display:block; width:auto; list-style-type: none; margin:0;}
	nav a, nav a:visited{display:block; padding:8px 17px; color:#fff; text-decoration:none; width:100%; border:solid 1px rgba(0,0,0,0)}
	nav a:hover, nav li.current-menu-item a, nav li.current_page_parent a{color:#fff; border:solid 1px rgba(255,203,5,1); text-decoration: none; transition: all ease 0.5s;}
	nav ul{margin:0; padding:0; position:relative; z-index:10;}
	nav ul:after{content:''; display:block; clear:both;}
		/* Top Level Nav */
		nav ul li{display:block; float:left; position:relative; white-space:nowrap; margin:0;}
		nav ul > li.menu-item-has-children > a:after{content:''; display:inline-block; width:12px; height:15px; margin:0 0 0 5px; background:url(_/img/down-arrow.svg) center center; transform:translateY(3px);}
			nav ul li > ul a:hover{background:#999; border:solid 1px rgba(0,0,0,0)}
			/* Second Level Nav*/
			nav ul li > ul{display:none; position:absolute; background:#666; z-index:5;}
			nav ul li > ul li{float:none;}
			nav ul li > ul li.menu-item-has-children > a:after{content:''; display:inline-block; width:18px; height:12px; margin:0 0 0 5px; background:url(_/img/right-arrow.svg) center center; transform:translateY(0);}
			nav ul li > ul a:hover{background:#999;}
			nav ul > li:hover > ul, nav ul > li:active > ul, nav ul > li:target > ul{display:block; opacity:1; transform:translateY(0%); animation-name:subMenu; animation-duration:0.3s;}
				/* Tird Level Nav */
				nav ul > li ul > li ul{display:none; position:absolute; background:#CCC; z-index:0;}
				nav ul > li ul > li:hover ul, nav ul > li ul > li:active ul, nav ul > li ul > li:target ul{display:block; transform:translateX(100%); top:0; right:0px; opacity:1; animation-name:thirdMenu; animation-duration:0.3s;}

/********* Srolling Header Styles ************/
header.scroll{position:fixed; top:0; background:#313e49; padding:15px 0; transform:translateY(0); animation:menuDrop; animation-duration: 0.5s;}
header.scroll .logo{width:165px; margin:6px 0 0 0;}
header.scroll .top-header{display:none;}

/* Footer Styles
-------------------------------------------------------------------------------*/
.footer{width:100%; background:#fff; border-top:solid 2px #e2eff8;}
	.footer .wrap{padding:25px 0;}
	.footer h5{font-size:100%; color:#313e49; display:inline-block; border-bottom: solid 3px #ccc; margin:0 0 25px 0; padding:0 10px 10px 0;}
	.footer p{display:inline-block;}
		.footer p > span{color:#0071b9; font-size:100%; transform:translateY(0)}
	.footer span{display:inline-block; color:#e84c3d; font-size:250%; margin:0 10px 0 0; transform:translateY(-5px);}

.footer a, .footer a:visited{color:inherit; text-decoration:none;}

#legal{display:block; width:100%; background:#ffcb05; color:#666; text-align: center; padding:10px 0;}
	.menu-footer-menu-container, #legal ul{display:inline-block; margin:0; padding:0;}
		.menu-footer-menu-container, #legal ul li, #legal ul li{display:inline-block;}	
		#legal ul, #legal ul li:after{content:" | ";}
			#legal a, #legal a:visited{color:#666;}
		

/* Sidebar Styles
-------------------------------------------------------------------------------*/

.sidebar > div{margin:25px 0 0 0;}
	.sidebar > div:first-child{margin:0;}
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4{font-size:125%;}


/* Search Styles
-------------------------------------------------------------------------------*/
.search-form{margin:0 0 35px 0;}
.search-form label{display:none;}
	.search-form input[type=search]{width:100%; max-width:350px; padding:10px 15px; margin:0 10px 20px 0; border:solid 1px #e7e7e7;}
	.search-form input.button{margin:0; padding:10px 15px; transform:translateY(-10px);}


/* Blog Styles
-------------------------------------------------------------------------------*/
.featured-img{display:block; width:100%; height:300px; background-position:center center; background-size:cover; border:0; margin:25px 0;}

/****** Blog Index / Archives *******/
.wrap.blog-index article, .wrap.archive article{margin:0 0 25px 0; padding:0 0 25px 0; border-bottom:solid 1px #f5f5f5;}


/* 404 Page
-------------------------------------------------------------------------------*/
.four-oh-four {background-image:url(_/img/404.png); background-position:center center; background-size:cover;}
.four-o-four{display:block; width:100%; padding:50px 0; text-align:center;}
	.four-o-four img{margin:0 0 25px 0;}
	

/* Search Page
-------------------------------------------------------------------------------*/
.no-results{display:block; width:100%; padding:50px 0; text-align:center;}
	.no-results img{margin:0 0 25px 0; height:150px; width:auto;}

/* Universal Page Styles
-------------------------------------------------------------------------------*/
/* Page Title */
.page-title{padding:350px 0 100px 0; color:#fff; margin:0; position:relative; background-image:url(_/img/safety-title-bg.jpg); background-position:center center; background-size:cover; text-align: center;}
	.page-title h1, .page-title h2{font-size:350%; font-weight:700;}

/* 50 / 50 Split Content */
.fifty-fifty{border-top:solid 2px #e2eff8; text-align: center;}
	.fifty-fifty .fifty-icon{display:inline-block; width:auto; height:auto; max-width:75px; max-height:65px; margin:0 25px 0 0; position:relative; transform:translateY(-20%);}
	.fifty-fifty > h2{display:inline-block; font-size:350%; font-weight:700; color:#003558; margin:0 0 50px 0;}
	.fifty-fifty .wrap{text-align:left;}
	.fifty-fifty .wrap h1, .fifty-fifty .wrap h2, .fifty-fifty .wrap h3, .fifty-fifty .wrap h4, .fifty-fifty .wrap h5, .fifty-fifty .wrap h6{color:#0e76bc; font-weight:600;}

/* CTA */
.cta{background:#f3faff; text-align: center;}
	.cta h4{font-size:350%; font-weight:700; color:#003558; margin:0 auto 25px auto; max-width:800px;}
	.cta p{font-size:150%;}
	.cta .btn.text-cta{margin:25px 0 0 0;}
	.cta .gform_wrapper{max-width:600px; margin:50px auto 0 auto!important;}
	.cta .gform_body{padding:10px 10px 20px 20px; background:#fff; border-radius:7px; box-shadow:0 0 10px 5px rgba(0,0,0,0.05);}
	.cta input[type=submit]{display:block!important; margin:auto!important;}

/* Column Content */
.column-content{background-color:#f3faff; background-image:url(_/img/grid-bg.png); background-size:contain; background-position:top left; background-repeat: no-repeat;}
	.column-content .wrap.row > div{text-align:left;}
	.column-content .wrap.row > div img{display:block; width:auto; height:65px; margin:0 0 15px 0;}
	.column-content .wrap.row > div h1, .column-content .wrap.row > div h2, .column-content .wrap.row > div h3, .column-content .wrap.row > div h4, .column-content .wrap.row > div h5, .column-content .wrap.row > div h6{font-size:105%; font-weight:600; margin:0 0 5px 0; color:#003558;}
	.column-content .column-footer{margin:25px auto 0 auto; border-top:solid 3px #e6f2f9; padding:50px 0 0 0; text-align:center;}
	.column-content .column-header{text-align:center; max-width:800px;}
	.column-content .column-header h4{font-size:300%; color: #003558; font-weight:700;}
	.column-content .column-header p{color:#0071b9; font-size:150%; font-weight:600; margin:35px 0;}

/* Our Team */
.team{background-color:#f3faff; background-image:url(_/img/grid-bg-right.png); background-position:bottom right; background-repeat: no-repeat;}
	.team .wrap > h4{font-size:300%; color: #003558; font-weight:700; text-align: center;}
	.team .wrap > p{color:#0071b9; font-size:150%; font-weight:600; margin:35px auto; text-align: center; max-width:800px}
	.team .wrap img{margin-top: -10px;}
		.team .owner h1, .team .owner h2, .team .owner h3, .team .owner h4, .team .owner h5, .team .owner h6{color: #003558; font-weight:600;}
	
	.team-members{margin-top:50px; padding-top:50px;  border-top:solid 3px #e6f2f9;}
	.team .team-members h5{color: #003558; font-weight:600; font-size:150%;}
		.team .employee{margin:25px 0;}
		.team .employee p{margin:0;}
		.team .employee p.name{color: #003558; font-weight:600; font-size:120%;}
		.team .employee p.title{font-weight:500; font-size:105%; font-style:italic;}
		.team .employee .bio{margin:25px 0 0 0;}

/* Featured Text */
.featured-text{padding:125px 0; background-size:cover; background-position:center center; background-repeat: no-repeat;}
.featured-text p{color:#fff; font-weight:600; font-size:200%; text-align: center; line-height:1.25; max-width:1000px; margin:auto;}


/* Home Page Styles
-------------------------------------------------------------------------------*/
.page-title.home{height:100%; margin:0; padding:0; position:relative; background-position:center center; background-size:cover;}
	.page-title.home .wrap{position:absolute; top:calc(50% + 25px); left:50%; transform: translate(-50%, -50%); padding:25px 50px; border-left:solid 1px #fff;}
		.page-title.home .wrap h1{display:block; font-size:500%; line-height:1;}
		.page-title.home .wrap p{font-size:200%; text-transform: uppercase; color:#ffcb05;}
.home-content{background-color:#f3faff; background-image:url(_/img/grid-bg.png); background-size:contain; background-position:top left; background-repeat: no-repeat;}
.home-services{background:linear-gradient(to bottom, #0877be, #054872); transform:translateY(-50%); text-align:center;}
	.home-services .row {width:100%; margin:0;}
	.home-services .row > div{color:#fff; text-decoration: none; border-right:solid 1px #065a8f; text-align: left; padding:25px 25px 10px 25px; margin:0;}
	.home-services .row > div img{height:65px; width:auto; opacity:0.35; transition: ease all 0.25s;}
	.home-services .row > div p{font-size:125%; font-weight: 700; margin:15px 0 0 0; line-height:1.15;}
	.home-services .btn{margin:35px auto;}
.fifty-fifty.home{padding:0 0 150px 0; border:0px;}


/* Tool Box 
-------------------------------------------------------------------------------*/
.tool-box-talks{border-top:solid 2px #f5f5f5;}
	.tool-box-talks .talk-intro h1{font-size:200%; color: #003558; font-weight:700; text-align: center;}
	.tool-box-talks .talk-intro{text-align:center; font-size:150%; font-weight:700; color:#0071b9; padding:0 0 50px 0; margin-bottom:50px; border-bottom:solid 2px #f5f5f5;}
		.tool-box-talks .talk-intro p{max-width:800px; margin:auto;}
	.tool-box-talks .fa-file-word{transform:translateY(-8px); font-size:300%; color:#0071b9;}
	.tool-box-talks .talk-name{font-weight:700; color: #003558; font-size:105%; margin:0 0 10px 0;}
	.tool-box-talks .talk-description{margin:0 0 15px 0;}


/* Media queries
-------------------------------------------------------------------------------*/

@media only screen and ( max-width: 1150px ) {
	
	/* Header */
	header, header.scroll{background:#313e49; padding:15px 0;}
	.top-header{display:none; overflow:visible; height:auto;}
		
	/* Page Title */
	.page-title{padding:200px 0 100px 0;}

   /* Mobile Nav - Don't forget to update mobile-click.js if nav max-width changes */
   .nav-open{display:block;}
   .nav-close{display:block;}
   nav{display:none; position:fixed; top:0; left:0; width:100%; height:100%; font-size:24px; overflow:auto; background:rgba(0,0,0,0.95);}
   	nav.open{display:block; opacity:1; transform:translateX(0); animation-name:mobileMenuOpen; animation-duration:0.5s;}
	nav.close{opacity:0; transform:translateX(-100%); animation-name:mobileMenuClose; animation-duration:0.5s;}
   	nav a, nav a:visited{padding:15px 20; border:none;}
	nav a:hover{background:none;}
	nav a:hover, nav li.current-menu-item a, nav li.current_page_parent a{border:none;}
	nav div > ul{margin:50px 0 0 0;}
		/* Top Level Nav */
		nav ul li{float:none; width:100%; text-align:center;}
			nav ul li > ul{background:rgba(250,250,250,0.07);}
			nav ul li > ul a:hover{background:inherit;}
			/* Second Level Nav*/
			nav ul li > ul{position:relative;}
			nav ul li > ul a:hover{background:inherit;}
				/* Tird Level Nav */
				 nav ul > li ul > li ul{background:rgba(250,250,250,0.1); position:relative; transform:translateX(0);}
				nav ul > li ul > li:hover ul, nav ul > li ul > li:active ul, nav ul > li ul > li:target ul{transform:translateX(0); animation-name:subMenu;}
	
	/* Home Page */
	.home-content{padding:50px 0 0 0;}
	.home-services{transform:translateY(0); margin: 0 auto 50px auto;}
	.fifty-fifty.home{padding:0 0 50px 0;}
	.fifty-fifty.home .wrap > div:first-child{text-align:center;}
	.fifty-fifty.home .wrap > div:last-child{padding:50px 15px!important;}

}

@media only screen and ( max-width: 850px ) {
	
	/* Page Title and Section Titles */
	.page-title h1, .page-title h2, .cta h4, .fifty-fifty > h2, .column-content .column-header h4, .team .wrap > h4{font-size:250%;}

}

@media only screen and ( max-width: 750px ) {
	
	/* Home Page */
	.page-title.home{height:auto; padding:200px 0 100px 0;}
	.page-title.home .wrap{position:relative; top:auto; left:auto; transform: translate(0, 0); padding:0; border:none;}
		.page-title.home .wrap h1{font-size:400%;}
	
	
	/* Fififty Fifty Content */
	.fifty-fifty .wrap div.image{text-align:center!important;}
	.fifty-fifty .wrap div.content{padding:50px 0 0 0!important;}
	
	/* Team */
	.team .owner{padding:50px 15px 0 15px!important;}
	
	/* Footer */
	.footer .wrap > div{padding:25px 0 0 0;}
	
}

@media only screen and ( max-width: 650px ) {

   /* WP Core Styles */
   .gallery-columns-3 .gallery-item {width: 33.33%;}
   .gallery-columns-3 .gallery-item img {width: 100%; height: auto;}

}

@media screen and (max-width: 480px) {

   /* Page Title */
	.page-title{padding:150px 0 50px 0;}
	
	/* Home Page */
	.page-title.home{padding:150px 0 75px 0;}
	.page-title.home .wrap h1{font-size:300%;}
	
	/* WP Core Styles */
   .gallery-columns-2 .gallery-item {width: 50%;}
   .gallery-columns-2 .gallery-item img {width: 100%; height: auto;}

}



/* Animations
------------------------------------------------------------------------------*/

@keyframes subMenu {
  0% {
    opacity:0;
	transform:translateY(-10%);
  }
  33%{
	opacity:0;
	transform:translateY(-5%);
  }
  100% {
    opacity:1;
	transform:translateY(0%);
  }
}
@keyframes thirdMenu {
  0% {
    opacity:0;
	transform:translateX(90%);
  }
  33%{
	opacity:0;
	transform:translateX(95%);
  }
  100% {
    opacity:1;
	transform:translateX(100%);
  }
  
}
@keyframes mobileMenuOpen {
  0% {
    opacity:0;
	transform:translateX(-100%);
  }
  100% {
    opacity:1;
	transform:translateX(0);
  }
  
}
@keyframes mobileMenuClose {
  0% {
    opacity:1;
	transform:translateX(0);
  }
  100% {
    opacity:0;
	transform:translateX(-100%);
  }
  
}

@keyframes menuDrop {
  0% {
	transform:translateY(-100%);
  }
  100% {
	transform:translateY(0);
  }
  
}