/*
Theme Name: safety-effects
Author: WSI Web Success
Author URI: https://www.wsiwebsuccess.com/
Description: Theme for Safety Effects
Version: 1.01
Tags: blog, two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images
Text Domain: safety-effects
*/

/* CSS Document */

html {
    box-sizing: border-box;
}
*,
*:before,
*:after
{
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1.3em;
    color: #1f1f1f; /*very dark*/
    background: #fdfdfd; /*very light*/
    font-family: Helvetica, Arial, Lucida, sans-serif;
    font-size:18px;
    line-height: 1.5em;
}
ol,
ul {
	margin: 0 0 20px 0;
    padding: 0 0 0 35px;
    font-size: 1em;
	font-weight:normal;
}
ol ol,
ul ul {
    font-size:1em;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption,
th,
td {
    text-align: left;
    font-weight: normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}
blockquote,
q {
    quotes: "" "";
}
hr {
	height: 1px;
    margin: 30px 0;
    width: 100%;
    background: #636363; /*medium gray*/
}
strong {
    font-weight:bold;
}
em {
	font-style:italic;
}
sup {
	font-size:.7em;
	vertical-align: top;
    line-height: 1.1em;
    margin-left: 2px;
}
u {
	text-decoration:underline;
}
h1 {
    padding: 0;
    margin: 0 0 30px 0;
    font-weight: 700;
    font-size: 1.9em;
    line-height: 1.2em;
	font-family: 'Oswald', sans-serif;
}
h2 {
    padding: 0;
    margin: 30px 0;
    font-weight: 600;
    font-size: 1.6em;
	line-height:1.2em;
	font-family: 'Oswald', sans-serif;
}
h3 {
    padding: 0;
    margin: 20px 0;
    font-weight: 600;
    font-size: 1.3em;
	line-height:1.2em;
	font-family: 'Oswald', sans-serif;
}
h4 {
    padding: 0;
    margin: 20px 0;
    font-weight: 500;
    font-size: 1.2em;
	line-height:1.2em;
	font-family: 'Oswald', sans-serif;
}
p {
    padding: 0;
    margin: 0 0 20px 0;
    font-weight:normal;
    font-size: 1em;
}
a {
    color:#23495d; /*dark blue*/
}
a:hover, a:focus {
    color: #ed2224; /*red*/
	text-decoration:underline;
}
img {
    max-width:100%;
}
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}
.container {
    width:90%;
    margin:0 auto;
	max-width:1600px;
}

.screen-reader-text {
	opacity:0;
	height:0;
	width:0;
	position:absolute;
	top: 0;
    left: 0;
}
.skip-main {
    position: absolute;
    top: 0;
    left: calc(50% - 75px);
    width: 200px;
    height: 30px;
    text-align: center;
    background-color: white;
    padding: 6px 5px;
    opacity: 0;
	z-index:-1;
	font-size:15px;
}
.skip-main:focus {
    opacity:1;
	border:1px solid #0069a0; /*darker blue*/
    z-index:105;
}
#main-content:focus {
	outline: none;
}

/* COOKIE NOTIFICATION */
body .cookie-notification {
	display:none;
}
.cookie-notification {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background-color: #2e2e2e; /*very dark*/
	z-index:100;
}
body.show-cookie-notification .cookie-notification {
	display:block;
}
body.show-cookie-notification .cookie-notification p {
	margin:0;
	padding:7px;
	width:calc(100% - 130px);
	color:white;
	float:left;
	text-align:center;
	font-size:17px;
}
.cookie-notification a {
	color:white;
	text-decoration:underline;
	margin-left:10px;
}
.cookie-notification a:hover,
.cookie-notification a:focus {
	opacity:1;
}
.cookie-notification .close {
	text-shadow: unset;
    cursor:pointer;
    float: right;
    padding: 12px 45px 5px 10px;
    color: white;
	font-size:17px;
    opacity: 1;
    font-weight: normal;
	line-height: 1.5em;
	position: relative;
	top: -3px;
}
.cookie-notification .close:hover,
.cookie-notification .close:focus {
    text-decoration:underline;
}
body.show-cookie-notification {
	margin-top: 40px;
}

/* SEARCH */
.search {
	float: right;
	margin-top:-4px;
	font-size:.8em;
}
.searchbutton {
	height: 34px;
	width: 34px;
	border-radius:10px;
	background-image: url(img/search_color.png);
	background-size: 24px;
	background-repeat: no-repeat;
	border: none;
	background-color:transparent;
	background-position:4px 4px;
	position:relative;
	top:6px;
}
.search input[type=text] {
	position: relative;
	top: -6px;
	padding: 3px 5px;
	width: 175px;
	border:1px solid lightgray;
}
.searchbutton:hover,
.searchbutton:focus {
	opacity:0.5;
}

/* FIX FIREFOX */
@-moz-document url-prefix() {
	.search input[type="text"] {
    	top: 6px;
	}
}

/* MINI TOP */
.mini-top-bar {
	text-align:right;
	margin-bottom:-2px;
	background-color:#ced2d2; /*light gray*/
}
.mini-top-bar .phone {
	color:#1f1f1f;
	text-decoration:none;
	font-size:1.2em;
	font-weight:500;
	padding: 5px 20px 5px 5px;
    display: inline-block;
}
.mini-top-bar .phone:hover {
	color:#1f1f1f;
	text-decoration:none;
}

/* TOP BAR */
.top-bar {
	background-color:#1f1f1f; /*super dark*/
	padding:5px 0 0 0;
	color:white;
	text-align:center;
	border-bottom: 5px solid #ed2224; /*red*/
	box-shadow: 0 2px 2px rgba(0,0,0,0.8);
}
.logo {
	width:250px;
	float:left;
	margin-top:-20px;
}
.top-right {
	float:right;
}

/* TOP NAV */
.top-nav {
    margin:26px 0 0 0;
	color:white;
	display:inline-block;
}
.top-nav ul {
    margin: 0 auto;
    padding:0;
    list-style: none;
    position: relative;
    content:"";
    display:table;
    clear:both;
    text-align:center;
}
.top-nav ul li {
    display: inline-block;
}
.top-nav ul li a {
    text-decoration: none;
    padding: 3px 10px;
    white-space: nowrap;
    display: block;
    font-size: 16px;
    color:white;
	font-weight:bold;
	letter-spacing:1px;
	font-weight:500;
}
.top-nav > ul > li > a:hover,
.top-nav > ul > li > a:focus {
    text-decoration:none;
	color:#ffcd33; /*yellow*/
}

/* Hide Dropdowns by Default */
.top-nav ul ul {
    display: none;
    position: absolute;
    z-index: 9999;
    min-width:290px;
}
ul.expandable {
    z-index: 9999;
}

/* First Tier Dropdown */
.top-nav ul ul li {
    display: list-item;
    position: relative;
    padding:0;
    border-left:none;
}
.top-nav ul ul li:last-child {
    border-bottom:none;
}
.top-nav ul ul li:hover > ul.drop-to-right,
.top-nav ul ul li.hover > ul.drop-to-right {
    right: 100%;
    left: auto;
}
.top-nav ul ul li:hover > ul li {
    white-space: nowrap;
}
.top-nav ul ul li a {
    padding: 5px 15px;
    color: black;
    text-align: left;
    font-size: 16px;
}
.top-nav ul ul li a:hover,
.top-nav ul ul li a:focus {
    text-decoration:none;
    background-color:white;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
}

/* Display Dropdowns on Hover */
.top-nav ul li:hover > ul,
.top-nav ul li.hover > ul {
    display:block;
    border-top: 3px solid #ffcd33; /*yellow*/
    border-bottom: 3px solid #ffcd33; /*yellow*/
    background-color: rgba(255,255,255,0.9);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    margin-top:-4px;
}

/* Getting 3rd Level to Show */
.top-nav ul ul li:hover > ul,
.top-nav ul ul li.hover > ul{
    display: list-item;
    position: absolute;
    top: 12px;
    left: 168px;
    background-color:#e2e2e2; /*light gray*/
}

/* Second, Third and more Tiers	*/
.top-nav ul ul ul li {
    position: relative;
}

/* Getting 3rd Level to Show */
.top-nav ul ul ul li:hover > ul,
.top-nav ul ul ul li.hover > ul {
    display: list-item;
}

/* Change this in order to change the Dropdown symbol */
.top-nav li > a:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-top: 4px solid white;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.top-nav li > a:only-child:after {
    display: none;
}
.top-nav li:hover > a:after {
	border-top:4px solid #ffcd33; /*yellow*/
}

/* MOBILE TOP */
.mobile-top {
    display:block;
    background-color:#ced2d2; /*light gray*/
    height:60px;
    color:#1f1f1f; /*super dark*/
    font-size:16px;
    position: fixed;
    width: 100%;
    z-index: 100;
    top:0;
}
.mobile-top a {
    color:#1f1f1f; /*super dark*/
    font-weight:normal;
    text-decoration:none;
    display:block;
    padding-bottom: 7px;
	line-height:1.2em;
}
.mobile-top img,
.mobile-nav img{
    height: 35px;
    margin: 3px auto -17px;
    display: block;
}
.mobile-phone,
.mobile-map,
.mobile-contact,
.mobile-nav {
    width:25%;
    float:left;
    text-align: center;
}

/* MOBILE NAV */
.mobile-nav, .middle-nav {
    position:relative;
}
.mobile-nav .hamburger,
.middle-nav .hamburger {
    width:45px;
    margin:0 auto;
	line-height:1.2em;
}
.mobile-nav .cross,
.middle-nav .cross {
    width:45px;
    margin:0 auto;
	line-height:1.2em;
}
.mobile-nav ul,
.middle-nav ul {
    list-style:none;
    background-color: rgba(255,255,255,.9);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    margin:3px 0;
    padding:0;
    width:290px;
    z-index: 3;
    font-size:18px;
}
.mobile-nav>ul,
.middle-nav>ul {
    position:absolute;
    right:0px;
    border-top: 4px solid #ffcd33; /*yellow*/
    border-bottom: 4px solid #ffcd33; /*yellow*/
	display:none;
}
.mobile-nav ul li a,
.middle-nav ul li a {
    padding:8px 10px;
    display:block;
    color: #323232; /*dark gray*/
    line-height:1.1em;
}
.mobile-nav ul li a:hover,
.middle-nav ul li a:hover {
    color: black;
    background-color:white;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
}
.mobile-nav ul li ul,
.middle-nav ul li ul {
    display:block;
    font-size:16px;
}
.mobile-nav ul li ul li,
.middle-nav ul li ul li {
    background-color:#f3f3f3; /*light gray*/
}
.mobile-nav ul li ul li ul li,
.middle-nav ul li ul li ul li {
    background-color:#a1a1a1; /*light gray*/
}
.mobile-nav ul li ul li ul li a,
.middle-nav ul li ul li ul li a {
    color:#666666; /*light gray*/
}
.mobile-nav ul a,
.middle-nav ul a {
    text-decoration:none;
}
.mobile-nav .sub-menu,
.middle-nav .sub-menu {
    overflow: hidden;
    height: 0px;
    transition: 0.3s height ease-in-out;
}
.mobile-nav .sub-menu.expanded,
.middle-nav .sub-menu.expanded {
    height: auto;
}
.mobile-nav li > a:after,
.middle-nav li > a:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px solid #323232; /*dark gray*/
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.mobile-nav li > a:only-child:after,
.middle-nav li > a:only-child:after {
    display: none;
}

/* BANNER */
.banner {
	height:400px;
	background-image:url("img/main-banner.jpg");
	background-size:cover;
	background-position:50% 55%;
	background-repeat:no-repeat;
	position:relative;
	border-bottom: 5px solid #ed2224; /*red*/
	box-shadow: 0 2px 2px rgba(0,0,0,0.8);
}
.banner .announcement {
	color:white;
	position:absolute;
	text-align:center;
	width:100%;
	left:0;
	bottom:30px;
	background-color:#1f1f1fd4;
}
.banner .announcement h2 {
	font-size:1.8em;
	margin:15px 0 20px 0;
}

/* CTA */
.cta-wrap {
	text-align:center;
	margin-top:15px;
}
.cta {
	display:inline-block;
	color: #1f1f1f; /*super dark*/
	width:calc(33.33% - 4px);
	max-width:200px;
	padding:10px 5px 5px 5px;
	text-decoration:none;
}
.cta:hover, .cta:focus {
	text-decoration:none;
	color: #1f1f1f; /*super dark*/
	transform: translate(-2px,-3px);
    box-shadow: 4px 3px 7px rgba(0,0,0,0.3);
    outline: none;
    transition: all 0.25s ease;
}
.cta h4 {
	margin:0 0 10px;
}

/* CONTENT */
.note {
	font-size:.8em;
	font-style:italic;
}
#main-content {
    padding:0 20px 20px 0;
    float:left;
    width:calc(100% - 350px);
    position:relative;
}
.no-side #main-content {
    float:none;
    width:100%;
	padding:20px 0;
}
.side-bar {
    float:left;
    width:350px;
    padding:20px 5px;
    background-color: #ffe5c9; /*light peach*/
    border-radius: 10px;
    margin:0 auto 20px;
}
.side-bar.blog {
	padding:20px 15px;
}
.side-bar.blog h4 {
	text-align:center;
}
.side-bar.blog ul {
	font-size:15px;
	padding-left:20px;
}
.side-bar.blog a {
	text-decoration:none;
}
.side-bar.blog a:hover {
	text-decoration:underline;
}
.side-bar.blog ul li {
	padding-bottom:10px;
}
.blog .post-details {
	font-size: .8em;
    font-style: italic;
    margin: -5px 0 10px 0;
    display: block;
	opacity:.7;
}
.blog .blog-post h3 a {
	text-decoration:none;
}
.blog-post img {
    width: 10%;
    float: left;
    margin-right: 10px;
	height:auto;
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 95%;
}

/* PRODUCTS */
.product {
	display:table;
	width:100%;
	border-top:1px solid gray;
}
.product img {
	float:left;
	max-width:200px;
	margin-right:35px;
	margin-bottom:30px;
}
.technical {
	width:100%;
}
.technical tr {
	background-color:#f5f5f5; /*super light*/
}
.technical tr:nth-child(even) {
	background-color:#e4e4e4; /*light gray*/
}
.technical td {
	vertical-align:middle;
	padding:3px;
}
.technical tr td:first-child {
	width:115px;
	text-align:center;
	font-weight:bold;
}
.technical tr td:nth-child(2) {
	padding:3px 15px;
}
.technical tr td:last-child {
	width:200px;
	text-align:center;
}
.technical.certificates tr td:last-child {
	width:auto;
	text-align:left;
}

/* CONTACT */
.contact {
	background-color:#1f1f1f; /*super dark*/
	border-radius:3px;
	max-width:800px;
	padding:1px 0 1px 15px;
}
.contact .gform_wrapper .top_label .gfield_label {
    color: white;
    font-weight: normal;
}
.contact .gform_wrapper .gfield_required {
    color: white;
}
.contact .gform_wrapper .gform_footer input.button {
    color: white;
    background-color: #ed2224; /*red*/
    display: block;
    width: calc(100% - 15px);
    padding: 5px 10px;
}
.contact .gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
	color:white;
	margin:3px 0 0 0;
}
.contact .gform_wrapper .gform_footer input.button:hover,
.contact .gform_wrapper .gform_footer input.button:focus {
	background-color:#ced2d2; /*gray*/
	cursor:pointer;
}

/* FOOTER */
footer {
	border-top: 7px solid #ed2224; /*red*/
	background-color: #1f1f1f; /*super dark*/
	color:white;
	padding:15px 0;
	position:relative;
}
footer:before {
	content:" ";
	position:absolute;
	height:5px;
	width:100%;
	top:-12px;
	left:0;
	background-color:#ced2d2; /*light gray*/
	box-shadow: 0px 2px 2px rgba(0,0,0,0.8)
}
footer a {
	color:white;
}
footer a:hover, footer a:focus {
	color:#ffcd33; /*yellow*/
}
.footer-address {
	width:250px;
	float:left;
}
.footer-nav {
	width:calc(100% - 250px);
	float:left;
}
.footer-nav ul {
	list-style-type:none;
	margin:0;
}
.footer-nav ul.menu>li {
	display:inline-block;
	width:calc(33.3% - 4px);
	vertical-align:top;
}
.footer-nav ul.menu a {
	text-decoration:none;
	display:block;
	padding:5px 10px;
}
.footer-nav ul li.menu-item-has-children>a {
	font-weight:bold;
	padding-top:0;
}
.footer-nav ul li.menu-item-has-children>a:hover,
.footer-nav ul li.menu-item-has-children>a:focus {
	color:white;
}
.footer-nav .sub-menu {
	margin:0;
	text-align:left;
}

/* COPYRIGHT */
.copyright {
    text-align:center;
    margin-top:22px;
    font-size:.8em;
    opacity:0.6;
}

/* WP CONTROLS */
.wp-caption {
	width:100%!important;
}
.wp-caption.caption-25{
	width:25%!important;
}
.wp-caption.caption-25 .size-img-25 {
	width:100%;
}
.wp-caption.caption-33{
	width:33%!important;
}
.wp-caption.caption-33 .size-img-33 {
	width:100%;
}
.wp-caption.caption-50 {
	width:50%!important;
}
.wp-caption.caption-50 .size-img-50{
	width:100%;
}
.wp-caption img {
	height:auto;
}
.wp-caption-text {
	text-align:center;
	font-style:italic;
	font-size:.9em;
	margin-top:5px;
}
.centered-img, .centered-img.alignleft, .centered-img.alignright, .centered-img.aligncenter {
	float:none;
	display:inline-block;
	padding:3px;
	margin:0;
}
.alignleft {
    float: left;
    margin: 0 30px 10px 0;
}
.alignright {
	float: right;
    margin: 0 0 10px 30px;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
}
.alignleft.size-2-across, .alignleft.size-3-across, .alignleft.size-4-across,
.alignright.size-2-across, .alignright.size-3-across, .alignright.size-4-across,
.aligncenter.size-2-across, .aligncenter.size-3-across, .aligncenter.size-4-across {
	margin:0;
	display:inline-block;
}
.size-full {
	height:auto;
}
.size-2-across {
    vertical-align:top;
    display:inline-block;
    width:calc(50% - 4px);
    text-align:center;
    padding:3px;
	height:auto;
}
.size-3-across {
    vertical-align:top;
    display:inline-block;
    width: calc(33.33% - 4px);
    text-align:center;
    padding:3px;
	height:auto;
}
.size-4-across {
    vertical-align:top;
    display:inline-block;
    width: calc(25% - 4px);
    border:0px;
    text-align:center;
    padding:3px;
	height:auto;
}
.size-two-thirds {
	vertical-align:top;
    display:inline-block;
    width: calc(66.66% - 4px);
    text-align:center;
    padding:3px;
	height:auto;
}
.size-img-25  {
	padding:2px;
    width: 25%;
	height:auto;
    min-width: 200px;
}
.size-img-33  {
	padding:2px;
    width: 33.33%;
	height:auto;
    min-width: 250px;
}
.size-img-50 {
	padding:2px;
    width: 50%;
	height:auto;
    min-width: 250px;
}
.size-img-100 {
	width:100%;
	height:auto;
}

@media (max-width:950px) {
	.footer-address {
		float:none;
		width:100%;
		text-align:center;
	}
	.footer-nav {
		width:100%;
	}
	.footer-nav>ul {
		padding:0;
	}
	 #main-content {
        float:none;
        width:100%;
        padding: 0 0 20px 0;
    }
	.side-bar {
        float:none;
        width:100%;
		max-width:500px;
    }
	.size-img-25 {
		width:33.33%;
	}
	.size-img-33 {
		width:50%;
	}
	.wp-caption.caption-25{
		width:33.33%!important;
	}
	.wp-caption.caption-33{
		width:50%!important;
	}
}

@media (min-width:750px) {
	.mobile-top {
		display:none;
	}
}

@media (max-width:750px) {
	.mini-top-bar {
		display:none;
	}
	.top-bar {
		margin-top:55px;
		text-align:center;
	}
	.logo {
		margin:5px 5px 0 -40px;
		display:inline-block;
		float:none;
	}
	.top-nav {
		display:none;
	}
	.technical tr td:nth-child(2) {
		display:inline-block;
	}
	.technical.certificates tr td:nth-child(2) {
		display:table-cell;
	}
	.technical tr td:last-child {
		width:auto;
		display:inline-block;
	}
	.technical tr td:last-child a {
		position:relative;
	}
	.technical tr td:last-child a:before {
		content:"-";
		position:absolute;
		top: -5px;
    	left: -11px;
	}
	.footer-nav ul.menu>li {
		width:100%;
		max-width: 350px;
		display: block;
		margin: 0 auto 20px;
	}
	.size-img-25 {
		width:50%;
	}
	.size-img-50, .size-img-50.alignleft, .size-img-50.alignright {
		width:100%;
		float:none;
		margin:10px auto;
		display:block;
	}
	.size-4-across {
		width:50%;
	}
	.size-2-across {
		width:100%;
		float:none;
	}
	.wp-caption.caption-25{
		width:50%!important;
	}
	.wp-caption.caption-50, .wp-caption.caption-50.alignright, .wp-caption.caption-50.alignright {
		width:100%!important;
		float:none;
		margin:10px auto;
		display:block;
	}
}

@media (max-width:640px) {
	.banner .announcement h2 {
    	font-size: 1.4em;
	}
	.cta {
		width:100%;
	}
	.contact {
		padding:1px 15px;
	}
	.product .title {
		text-align:center;
	}
	.product img {
		float:none;
	}
	.technical td{
		text-align:center;
	}
	.technical tr td:first-child, .technical.certificates tr td:first-child {
		display:block;
		width:100%;
	}
	.technical tr td:nth-child(2) {
		display:block;
		width:100%;
	}
	.technical.certificates tr td:nth-child(2) {
		display:block;
		text-align:center;
	}
	.technical tr td:last-child {
		display:block;
		width:100%;
	}
	.technical tr td:last-child a:before {
    	content: "";
	}
	.size-img-33, .size-img-33.alignleft, .size-img-33.alignright {
		width:100%;
		float:none;
		margin:10px auto;
		display:block;
	}
	.size-3-across {
		width:100%;
		float:none;
	}
	.size-two-thirds {
		width:100%;
		float:none;
	}
	.size-img-66, .size-img-66.alignleft, .size-img-66.alignright {
		width:100%;
		float:none;
		margin:10px auto;
		display:block;
	}
	.wp-caption.caption-33, .wp-caption.caption-33.alignleft, .wp-caption.caption-33.alignright{
		width:100%!important;
		float:none;
		margin:10px auto;
		display:block;
	}
}

@media (max-width:450px) {
    .size-img-25, .size-img-25.alignright, .size-img-25.alignleft {
		width:100%;
		float:none;
		margin:10px auto;
		display:block;
	}
	.size-4-across {
		width:100%;
		float:none;
	}
	.wp-caption.caption-25, .wp-caption.caption-25.alignleft, .wp-caption.caption-25.alignright{
		width:100%!important;
		float:none;
		margin:10px auto;
		display:block;
	}
}