/*   
Theme Name: Mariplast NA
Author: Sandlapper Creative
Author URI: http://www.sandlappercreative.com
Version: 1.0
*/

/*Reset*/
a,hr{padding:0}a,input[type=checkbox]{vertical-align:baseline}article,aside,figure,footer,header,hgroup,hr,img.aligncenter,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0;margin:0;padding:0}td,td img{vertical-align:top}embed,img,object{max-width:100%;height:auto;}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{font-size:100%;background:0 0;margin:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0}alignright,img.alignright{float:right;margin:15px 0 15px 15px}.aligncenter,img.aligncenter{margin:15px auto}table{border-collapse:collapse;border-spacing:0;font:100%}th{vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre-line;word-wrap:break-word}input,select,textarea{font:99% sans-serif}a:active,a:hover{outline:0}small{font-size:85%}strong,th{font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.ie6 input,input[type=radio]{vertical-align:text-bottom}


/*Styles*/

body{}
body, select, input, textarea{ font-family: "Lato", Helvetica, Arial, sans-serif; color: #666;}

a{ color: #d72229; text-decoration: underline;}
a:hover{ color: #333; text-decoration: none;}
.button, button{ display: inline-block; font-size: 14px; line-height: 14px; text-transform: uppercase; font-weight: bold; letter-spacing: .2em; padding: 20px 50px; border: 3px solid #d72229; background-color: #fff; text-decoration: none; margin-top: 45px;}
.button:hover, button:hover{ background-color: #d72229; color: #fff;}
div, a, button, img{ transition: all 0.1s ease 0s;}

h1, h2, h3, h4, h5, h6{ line-height: normal; font-family: "Oswald", Helvetica, Arial, sans-serif; font-weight: 400; color: #333;}
h1{ font-size: 42px;}
h2{ font-size: 36px;}
h3{ font-size: 30px;}
h4{ font-size: 24px;}
h5{ font-size: 21px;}
h6{ font-size: 18px;}
.page-title{ font-size: 48px; margin-bottom: 30px; text-transform: uppercase;}

#page-wrap{}
.wrapper{ width: 90%; max-width: 1200px; margin: 0 auto;}
.wrapper:after{ content: ""; display: table; clear: both;}

nav ul{ list-style: none; position: relative; float:left; margin:0; padding:0;}
nav ul a{ display: block; line-height: 32px; text-decoration: none;}
nav ul li{ position: relative; float: left; margin: 0; padding: 0;}
nav ul li.current-menu-item a, .nav ul li a:hover{}
nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; text-align: left; z-index: 999;}
nav ul ul li{ float: none; width: 200px;}
nav ul ul a{ line-height: 120%;}
nav ul ul a:hover{}
nav ul ul ul{ top: -5px; left: -210px !important;}
nav ul li:hover > ul{ display: block;}

#header .switcher{ float: right; margin: 53px 0 0 45px;}

#header{ height: 116px; overflow: visible;}
#header .logo{ float: left; margin: 30px 0 15px; max-width: 200px;}
#header .nav{ float: right; font-size: 16px; letter-spacing: .05; text-transform: uppercase; margin-top: 50px;}
#header .nav li{ margin-left: 45px;}
#header .nav a{ color: #333;}
#header .nav a:hover, #header .nav .current_page_item a, #header .nav ul li:hover > a{ color: #d72229;}
#header .nav a:hover, #header .nav ul li:hover > a{ border-bottom: 3px solid #ccc;}
#header .nav .sub-menu{ background-color: #fff; padding: 5px 5px 0; left: -10px; font-size: 14px; border-bottom: 3px solid #ccc;}
#header .nav .sub-menu li{ margin: 0;}
#header .nav .sub-menu li a{ padding: 5px; border: none;}
#header .nav .sub-menu li a:hover{ border: none;}
#responsive-menu{ padding-top: 30px !important;}
#responsive-menu-button.is-active{ top: auto; right: 0 !important; bottom: 0 !important;}

.content{ font-size: 18px; line-height: 28px; font-weight: 300;}
.content p{ margin-top: 25px;}
.content ul{ list-style: disc; margin: 15px 0 0 30px;}
.content ol{ margin: 15px 0 0 30px;}
.meta{}

.sidebar{}

.navigation{ clear: both;}
.next-posts{ width: 45%; float: left;}
.prev-posts{ width: 45%; float: right; text-align: right;}

.searchform{}
.s{}
.searchsubmit{}

#footer{ padding: 50px 0 60px; background-color: #f4f4f4; font-size: 14px;}
#footer .wrapper{ display: flex;}
#footer .footer-links, #footer .footer-contact{ width: 48%; float: left; padding: 10px 0;}
#footer .footer-links{ columns: 2;}
#footer .footer-contact{ float: right; box-sizing: border-box; border-left: 1px solid #ccc; padding-left: 4%; columns: 2;}
#footer .footer-contact .column{ display: inline-block;}
#footer .footer-contact .tel{ margin-top: 10px;}
#footer h6{ text-transform: uppercase; font-size: 18px;}
#footer li{ margin-top: 10px;}
.subfooter{ padding: 30px 0;}
.subfooter p{ float: left; font-size: 14px;}
.subfooter p.credit{ float: right;}
.subfooter a{ color: #ccc; text-decoration: none;}
.subfooter a:hover{ color: #d72229;}

.slick-prev::before, .slick-next::before{ color: #ccc !important;}


/* Homepage */

.home .hero{ width: 100%; height: 600px; position: relative; background-size: cover; background-attachment: fixed; background-position: center center; color: #fff; font-size: 18px; line-height: 26px; font-weight: 400;}
.home .hero .hero-container{ position: absolute; top: 0; left: 0; background-color: rgba(50,50,50,.75); height: 100%; width: 100%; display: flex; align-items: center;}
.home .hero .hero-content{ max-width: 600px; margin: -100px 0 0;}
.home .hero h1{ font-size: 48px; color: #fff;}
.home .hero .button{ background-color: #d72229; color: #fff; margin-top: 50px; border: none;}
.home .hero .button:hover{ background-color: #fff; color: #d72229;}
.home .about{ background-color: #f4f4f4; margin-bottom: 280px;}
.home .callouts{ margin-top: -100px; position: relative; z-index: 9;}
.home .callouts:after, .home .img-text-content:after{ clear: both; display: table; content: "";}
.home .callouts .callout{ padding: 40px; box-sizing: border-box; color: #fff; font-weight: 400; position: relative; min-height: 375px; font-size: 16px; line-height: 24px;}
.home .callouts .callout .callout-content-container{ position: absolute; left: 40px; bottom: 40px; right: 40px;}
.home .callouts .callout .callout-image{ width: 50%; position: absolute; right: 0; top: 0; height: 100%; background-size: cover; background-position: center center;}
.home .callouts .callout h4{ font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-family: "Lato", Helvetica, Arial, sans-serif; font-weight: 700; color: #fff;}
.home .callouts .callout h2{ font-size: 30px; text-transform: uppercase; color: #fff;}
.home .callouts .callout p{ margin-top: 15px;}
.home .callouts .callout a{ color: #fff; text-decoration: underline; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 14px;}
.home .callouts .callout a:hover{ text-decoration: none;}
.home .callouts .callout:nth-of-type(1){ background-color: #333; width: 65%; float: left;}
.home .callouts .callout:nth-of-type(1) .callout-content-container{ width: 40%;}
.home .callouts .callout:nth-of-type(2){ background-color: #d72229; width: 30%; float: right;}
.home .solutions{ background-color: #fff; margin: 60px 0 -200px; columns: 3; column-gap: 80px; text-align: center; padding: 80px; box-sizing: border-box; font-size: 16px; line-height: 24px; border-bottom: 5px solid #e4e5e4;}
.home .solutions img{ max-width: 90px; max-height: 90px; width: auto; height: auto;}
.home .solutions h3{ font-size: 21px; text-transform: uppercase; margin-top: 30px;}
.home .solutions p{ margin: 15px 0 45px;}
.home .cta-container{ background-color: rgba(215,34,41,.85); color: #fff; padding: 80px 0; font-weight: 400; position: relative;}
.home .cta-container h6{ position: absolute; bottom: 0; right: 5%; color: #fff; font-size: 100px; line-height: 91px; font-weight: 700; text-transform: uppercase;}
.home .cta-container .column{ width: 48%; float: left;}
.home .cta-container .column:nth-of-type(2){ float: right; margin-left: 4%;}
.home .gform_wrapper, .home .cta-container .gform_wrapper .ginput_container input, .home .cta-container .gform_wrapper textarea, .home .cta-container .ginput_container, .home .cta-container .gform_wrapper li, .home .cta-container .gform_footer{ margin: 0 !important; border: none;}
.home .cta-container .gform_wrapper .ginput_container input, .home .cta-container .gform_wrapper textarea{ padding: 10px !important; margin-bottom: 10px !important;}
.home .cta .gform_button{ background: none; border: 3px solid #fff; color: #fff;}
.home .cta .gform_button:hover{ background-color: #fff; color: #d72229;}



/* Flexible Content */

.flexible-page{ margin-top: 30px;}
.img-text-content{ display: flex; align-items: center;}
.img-text-content .image-column{ width: 40%; background-size: cover; background-position: center center;}
.img-text-content .image-column:after{ padding-bottom: 100%; display: block; content: "";}
.img-text-content .content-column{ width: 60%; padding: 0 5%;}
.img-text-content.imgright{ flex-direction: row-reverse;}
.img-text-content h2, .slider-content h2{ font-size: 48px; text-transform: uppercase; margin: 0; border-bottom: 1px solid #e4e5e4;}
.img-text-content h3{ font-size: 30px; color: #e4e5e4; text-transform: uppercase; margin: 0;}
.testimonial-content{ text-align: center; background-color: #f4f4f4; color: #333; padding: 80px 0 100px; font-family: "Oswald", Helvetica, Arial, sans-serif; font-size: 24px; line-height: normal;}
.testimonial-content img{ max-width: 40px; margin-bottom: 30px;}
.testimonial-content h4{ font-family: "Lato", Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;}
.testimonial-content p, .slider-content p{ max-width: 800px; margin: 15px auto;}
.testimonial-content .quote-author{ font-size: 21px; font-family: "Lato", Helvetica, Arial, sans-serif; margin-top: 30px;}
.basic-content{ padding: 80px 0 100px;}
.basic-content.bkg-dkgray, .home .basic-content.bkg-red, .home .basic-content.bkg-dkgray a, .home .basic-content.bkg-red a{ color: #fff;}
.basic-content.bkg-dkgray{ background-color: #333;}
.basic-content.bkg-red{ background-color: #d72229;}
.basic-content.bkg-ltgray{ background-color: #f4f4f4;}
.half-content{ padding: 60px 0;}
.half-content .column{ width: 48%; float: left;}
.half-content .column:nth-of-type(2){ float: right;}
.thirds-content .column{ width: 30%; float: left;}
.thirds-content .column:nth-of-type(2){ margin: 0 5%;}
.half-content, .thirds-content{ margin-bottom: 60px;}
.cta-content{ background-color: #d72229; padding: 30px 0; color: #fff; font-size: 18px; line-height: 24px;}
.cta-content .wrapper{ display: flex; align-items: center;}
.cta-content .cta-text{ float: left;}
.cta-content h3{ text-transform: uppercase; font-size: 48px; color: #fff;}
.cta-content .button{ float: right; margin: 0 0 0 auto; border: 2px solid #fff; background: none; color: #fff;}
.cta-content .button:hover{ background-color: #fff; color: #d72229;}
.slider-content{ padding: 60px 0; text-align: center;}
.slider-content .slider{ margin-top: 30px;}
.slider-content .slider .slide img{ margin: 0 auto; max-height: 400px; width: auto;}
.carousel{ margin-top: 30px;}
.carousel .slide .slide-content{ display: flex; justify-content: center; align-items: center; text-align: center; height: 250px;}
.carousel .slide img{ max-width: 250px; max-height: 100px; width: auto; height: auto; margin: 0 auto;}
.slick-dots{ margin-left: 0;}
.carousel .slick-prev, .carousel .slick-next{ top: 30%;}
hr{ border: none; background: none; background-color: #ccc; width: 100%; height: 1px; margin: 30px auto;}
.wrapper + .basic-content{ padding-top: 0;}
.color-white, .color-white h2{ color: #fff;}


/* Product Categories */

.product-category-content{ margin-top: 30px;}
.product-category-content h1{ font-size: 48px; text-transform: uppercase; margin: 0; border-bottom: 1px solid #e4e5e4;}
.product-category-content h2{ font-size: 30px; color: #e4e5e4; text-transform: uppercase; margin: 0; border: none;}
.product-grid{ margin-top: 60px;}
.product-grid-container:after{ clear: both; display: table; content: "";}
.product-grid:after, .product-cta:after{ clear: both; display: table; content: "";}
.product-grid h3{ font-size: 30px; text-transform: uppercase; text-align: center; position: relative; z-index: 1; margin-bottom: 60px;}
.product-grid h3::before{ border-top: 1px solid #e4e5e4; content:""; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; width: 100%; z-index: -1;}
.product-grid h3 span{ padding: 0 40px; background-color: #fff;}
.product-grid .product{ width: 42%; float: left; margin-bottom: 60px; line-height: normal; min-height: 450px;}
.product-grid .product:nth-of-type(even){ float: right;}
.product-grid .product:after{ clear: both; display: table; content: "";}
.product-grid .product p{ margin-top: 15px;}
.product-grid .product h4{ font-size: 24px; text-transform: uppercase;}
.product-grid .product h5{ font-size: 18px; text-transform: uppercase; margin-top: 15px;}
.product-grid .product .product-category{ font-size: 14px; margin-top: 5px;}
.product-grid .product .column{ width: calc(100% - 130px);; float: left; padding-right: 5%;}
.product-grid .product .specs{ font-size: 14px; margin-top: 15px;}
.product-grid .product .specs p{ margin-top: 5px; width: 48.5%; display: inline-block;}
.product-cta{ background-color: #d72229; color: #fff; padding: 40px 0 50px; font-size: 18px; display: flex; justify-content: center;}
.product-cta .cta-content{ float: left;}
.product-cta h3{ font-size:; text-transform: uppercase; font-size: 48px; color: #fff; font-weight: 700;}
.product-cta .button{ float: right; background: none; border: 3px solid #fff; color: #fff; margin-top: 25px;}
.product-cta .button:hover{ background-color: #fff; color: #d72229;}
.product-filters{ background-color: #f4f4f4; padding: 30px 0;}
.product-filters .number-range{ width: 25%; float: left;}
.product-filters button{ background-color: #f4f4f4; padding: 10px 25px; margin-top: 10px;}
.product-filters button:hover{ background-color: #d72229;}
.product-filters .facetwp-facet{ margin-bottom: 15px;}
.facetwp-pager{ text-transform: uppercase; margin-bottom: 60px; clear: both; text-align: center; font-size: 18px;}
.facetwp-pager a{ text-decoration: none;}
.facetwp-type-fselect .fs-wrap, .facetwp-type-fselect .fs-dropdown{ width: 400px !important;}
.lity-container{ background-color: #fff;}
.product-details{ width: 75%; float: left;}
.product-images{ width: 25%; float: right;}
.product-primary-image{ position: relative; overflow: hidden; width: 100%; height: 500px; background-size: contain; background-repeat: no-repeat; background-position: center center; transform: rotate(-90deg); transform-origin: 50% 50%; top: -100%;}
.product-image-container{ height: 180px; overflow: hidden;}


/* Media queries */

@media (max-width: 960px) {
	#header .nav, #header .switcher{ display: none;}
	.home .callouts .callout:nth-of-type(1), .home .callouts .callout:nth-of-type(2){ width: 100%; float: none;}
	.home .solutions{ columns: 1; padding: 80px 5%;}
	.home .solutions .solution{ margin-bottom: 60px;}
	.home .solutions p{ margin-bottom: 30px;}
	.home .solutions .button{ margin-top: 0;}
	.img-text-content{ display: block;}
	.img-text-content .image-column{ width: 100%; height: 350px; float: none; margin-bottom: 30px;}
	.img-text-content .image-column::after{ display: none;}
	.img-text-content .content-column{ width: 90%; float: none; margin: 0 auto 60px;}
	.home .cta-container .column{ width: 100%; float: none; margin-bottom: 45px;}
	#footer .footer-links, #footer .footer-contact{ columns: 1; text-align: center; border: none; float: none;}
	#footer .column{ margin-bottom: 30px;}
	.subfooter p{ float: none !important; width: 100% !important; text-align: center;}
	.half-content .column, .thirds-content .column{ width: 100% !important; float: none;}
}

@media (max-width: 768px) {
	.home .callouts .callout .callout-content-container{  width: 90%;}
	.home .callouts .callout .callout-image{ width: 100%; position: relative; height: 320px; margin: 20px 0 230px;}
	.home .callouts .callout p, .home .callouts .callout h2{ margin-right: 8%;}
	.home .callouts .callout{ height: auto; display: block;}
	.home .callouts .callout:nth-of-type(1) .callout-content-container{ width: 90%;}
	#footer .footer-links, #footer .footer-contact{ width: 100%;}
	#footer .wrapper, #footer .footer-contact .column{ display: block;}
	.product-grid .product{ width: 100% !important; margin: 0 0 60px; float: none !important; border: none !important; padding: 0 !important; min-height: 0;}
	.product-filters .number-range{ width: 100%; float: none;}
	.cta-content .wrapper{ display: block; text-align: center;}
	.cta-content{ padding-bottom: 45px;}
	.cta-content .cta-text, .cta-content .button{ float: none;}
	.cta-content .button{ margin-top: 30px;}
	.product-grid .product{ display: block; border-bottom: 1px solid #e4e5e4 !important; padding-bottom: 30px !important;}
	.product-grid .product .column{ float: none; width: 100%; padding: 0;}
	.product-grid .product .images-column{ width: 100%; float: none; padding-left: 0; margin-top: 15px;}
	.product-grid .product .product-images .product-image{ display: inline-block;}
}

@media (max-width: 600px) {
	body, html{ overflow-x: hidden;}
	.product-grid .product .column{ width: 100% !important; float: none !important; margin: 0 0 15px !important; padding: 0 !important; border: none !important; box-sizing: border-box;}
	.product-grid .specs-column p{ display: inline-block; margin-right: 10px;}
	.product-grid .product .product-category{ font-size: 16px;}
	.product-grid .product .product-images .product-image img{ max-height: 100px;}
	.home .cta-container h6{ font-size: 60px; line-height: 54px;}
	.product-primary-image{ width: 80%; background-position: center bottom 10%;}
}

@media (max-width: 400px) {
	.product-primary-image{ width: 80%; background-position: center center;}
}