/******************************
RESPONSIVE STYLES 
******************************/
@media screen and (max-width: 1200px){
	.about-wrapper .cell:first-child{
		width: 27%;
	}
}

@media screen and (max-width:1150px) { /* Target Screen Width */
	.slick-arrow.slick-prev{
		left: -20px;
	}
	.slick-arrow.slick-next{
		right: -20px;
	}
}
@media screen and (max-width:1100px) { /* Target Screen Width */
	.search-btn{
		right: 0;
		margin-left: 15px;
	}
	.banner .slider-dots{
		right: 20px;
	}
	.header-menu .cell:first-child{
		width: 300px;
	}	
	.nav-menu > li > a{
		padding: 45px 10px 15px;
	}
	.about-wrapper .cell:last-child{
		padding: 30px 30px 10px;
	}
	.social-wrapper .slick-slider{
		padding: 0 20px;
	}
	.slick-arrow.slick-prev{
		left: -10px;
	}
	.slick-arrow.slick-next{
		right: -10px;
	}
	.bar-callout .cell:first-child{
		text-align: center !important;
		padding: 0 20px;
	}
}
@media screen and (max-width:1000px) {
	.header-menu .cell:first-child {
	    width: 260px;
	    padding: 0 15px;
	}
	.nav-menu > li > a{
		padding: 45px 5px 15px;
	}
	.nav-menu > li:last-child .sub-menu{
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		transform: translateX(0);
		left: inherit;
		right: 0;
	}
	.about-wrapper .cell:first-child{
		width: 260px;
	}
	.ql-box .img-box{
		height: 380px;
	}
	.ql-box .btn{
		min-width: 220px;
	}
	.soc-box .img-box{
		height: 400px;
	}
}

@media screen and (max-width:900px) {
	#header{
		height: 70px;
		transition: none;
	}
	.top-bar{
		height: 70px;
	}
	.top-bar .relative{
		padding: 0 60px 0 20px;
	}
	.header-menu .page{
		height: 0 !important;
		display: block;
		transition: none;
	}
	.header-menu .page .cell{
		display: block;
		width: auto;
	}
	.header-menu .logo{
		position: absolute;
		left: 0;
		top: -70px;
		background: #ffffff;
		z-index: 2;
		width: 260px;
		height: 70px;
		padding: 8px;
		transition: none;
	}
	.logo img{
		position: static;
	}
	.top-bar .search-btn{
		font-size: 20px;
	}
	.top-bar .fa-facebook{
		font-size: 22px;
	}
	.search-btn.close{
		width: 35px;
		height: 35px;
	}
	.search-btn.close:before{
		font: 20px/38px 'Metropolis-Bold';
	}
	.search-box.open{
		height: 70px;
		padding: 12px 0 15px;
	}
	#nav-btn {
		display: block;
		width: 35px;
		position: absolute;
		top: 0px;
		bottom: 0;
		height: 27px;
		margin: auto;
		right: 10px;
		transition: none;
	}
	#nav-btn span {
		width: 35px;
		height: 4px;
		background-color: #ffffff;
		display: block;
		margin: 0 auto 5px;
	}
	#nav-close-btn{
		display: block;
	}
	#inner.fixed .main-nav,
	.fixed .main-nav {
	    padding-top: 0;
	}
	.main-nav {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		font-size: initial;
		z-index: 130;
		max-width: 60%;
		overflow: hidden;
		overflow-y: auto;
		width: 0;
		-webkit-transition: all 0.6s ease 0s;
		   -moz-transition: all 0.6s ease 0s;
				transition: all 0.6s ease 0s;
		background-color: #211e1f;
		padding-top: 0;
		margin: 0;
	}
	.nav-menu {
		display: block;
	}
	.open .main-nav {
		width: 100%;
		transition: all 0.8s ease 0s;
	}
	.main-nav nav {
		padding: 150px 0 40px 0;
		text-align: left !important;
		min-width: 450px;
	}
	.main-nav nav > *:not(.close-btn) {
    padding-right: 80px;
    padding-left: 50px
  }
	.main-nav .top-menu{
		display: block;
	}
	.main-nav li,
	.main-nav .top-menu li {
		display: block;
		text-align: left;
		padding: 0;
		margin: 0;
	}
	.main-nav, .main-nav nav, .nav-menu,
	.nav-menu > li, .nav-menu li a{
		height: auto;
	}
	.main-nav nav{
		min-width: 400px;
		position: relative;
	}
	.fixed .nav-menu > li > a,
	.nav-menu > li > a,
	.main-nav .top-menu li a{
		display: block;
		box-shadow: 0px 1px #3a3535;
    	border-bottom: 1px solid #000000;
		color: #ffffff !important;
		padding: 13px 30px 13px 15px;
		text-transform: capitalize;
		font-size: 24px;
		text-transform: uppercase;
	}
	.nav-menu > li.active > a,
	.nav-menu > li.has-child:hover > a,
	.nav-menu > li > a:hover{
		background: none;
	}
	.sub-ctrl {
		width: 30px;
		height: 40px;
		background: url(../images/arrows/sub-menu.png) center no-repeat;
		position: absolute;
		right: 0;
		top: 7px;
		cursor: pointer;
		z-index: 1;
		display: block;
	}
	.sub-ctrl.show{
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
		background: none;
		padding: 5px 0;
		width: auto;
		display: none;
		transition: none;
	}
	.sub-menu li {
		padding-left: 30px;
	}
	.nav-menu .sub-menu a {
		font-size: 18px !important;
		padding: 6px 0 !important;
	    letter-spacing: 0.5px;
		background: none;
		text-transform: lowercase;
		text-transform: capitalize;
		border-bottom: none;
		background: none !important;
	}
	.nav-menu > li.active > a:after, 
	.nav-menu > li > a:after{
		content: none !important;
	}
	.sub-menu li a:after{
		content: none !important;
	}
	.ql-box .img-box{
		height: 320px;
	}
	.ql-box span[class^="ico"]:before{
		width: 100px;
		height: 100px;
	}
	.ql-box .btn{
		font-size: 18px;
		min-width: 175px;
	}
	.products-wrapper .top-text h2:before,
	.products-wrapper .top-text h2:after{
		content: none;
	}
	.bar-callout .cell:last-child{
		width: 360px;
	}
	.social-inner{
		padding-bottom: 0;
	}
	.main-content > .table,
	.main-content .col-left,
	.main-content .col-right{
		display: block;
	}
	.main-content .col-left{
		padding-right: 30px;
	}
	.main-content .col-right{
		width: 100%;
		margin: 30px auto !important;
		margin: 0 auto;
		text-align: center;
		padding: 0;
	}
	.main-content .col-right > div{
		max-width: 263px;
		margin: 0 auto 40px;
	}
	.main-content{
		padding: 30px 25px;
	}
	.sub-banner .large-text{
		font-size: 60px;
		line-height: 62px;
	}
	.main-nav nav > a:not(.close-btn){
		display: block;
		font-size: 18px;
		padding: 13px 110px 13px 65px;
	}
  .main-nav a[href^="tel:"] {
    font-family: 'Metropolis-Bold';	
	}
	
	.main-nav a[href^="tel:"] .fa{
		margin-right: 10px;
	}
	.main-nav [class*="facebook"] {
  	margin-top: 15px;
	}
	
	.main-nav [class*="facebook"]:before,
	.main-nav a[href^="tel:"] .fa {
  	font-size: 26px;
  	vertical-align: middle;
	}
	.main-nav [class*="facebook"]:after{
	  content: "Follow Us on Facebook";
	  display: inline-block;
	  margin-left: 12px;
	  font-size: inherit;
	  color: inherit;
	  line-height: inherit; 
	  font-family: 'Metropolis-Bold';	
	  text-transform: uppercase;
	  font-size: 18px;
	  font-weight: bold;
	  vertical-align: middle;
	  width: 148px;
	}
	.main-nav .btn-blue {
  	display: block;
  	margin-bottom: 6px;
  	font-size: 24px !important;
  	text-align: left;
  	padding-top: 18px !important;
  	padding-bottom: 18px !important;
  	position: relative; 
	}
	
	#section-tabs > div {
  	display: block;
  	position: static;
  	width: 100%;
	}
	
	#section-tabs > div + div {
    margin-top: 15px;
	}
	
	#section-notes .icon-set li {
  	width: 50%;
	}
	
  #section-notes .icon-set li:nth-child(n+3) {
    padding-top: 30px;
  }
  
  .main-content aside h2:after {
    margin: 5px auto 10px;
  }
}

@media screen and (max-width:770px) { /* Tablet View */
	/* iOS Clicking Fix */
	body {
		cursor: pointer;
	}
	.about-wrapper .cell:first-child{
		width: 180px;
		padding: 20px 10px;
	}
	.about-wrapper .large-text{
		font-size: 23px;
	}
	.products-wrapper .top-text h2{
		font-size: 28px;
		line-height: 34px;
	}
	.product-box .img-box{
		width: 118px;
		height: 118px;
	}
	.product-box .img-box:before{
		width: 142px;
	    height: 142px;
	    border: 3px solid #ff0000;
	    left: -12px;
	    top: -12px;
	}
    .product-box .img-box .relative{
    	padding-top: 45px;
    }
    .product-box .img-box .more {
	    font-size: 14px;
	}
	h3{
		font: 18px/26px 'Fremont Bold';
	}
  .quick-links-wrapper > .table,
  .quick-links-wrapper > .table > .cell{
	display: block;
  }
  .bar-callout{
  	height: auto;
  }
  .bar-callout .cell{
  	display: block;
  	text-align: center;
  	height: auto;
  	width: 100%;
  }
  .btn-cta{
  	display: inline-block;
  	width: auto;
  	height: auto;
  	padding: 12px 20px;
  	transform: none;
  	margin: 20px 0 30px;
  }
  .cta-text{
  	padding-top: 20px;
  }
  .btn-cta .more{
  	transform: none;
  }
  .btn-cta:after{
	content: none;
  }
  .bar-callout .cell:last-child .inner-box{
  	padding: 0;
  }
  .bar-callout .cell:last-child{
  	width: auto;
  }
  .footer-wrapper .table,
  .footer-wrapper .cell{
  	display: block;
  	text-align: center;
  }
  .footer-wrapper {
  	padding: 20px 0;
  }
  .footer-wrapper .cell:last-child{
  	width: 100%;
  	text-align: center !important;
  	padding-top: 10px;
  }
  .main-content .col-left{
  	padding-right: 0;
  }
  
  a.grid-item::after,
  a.grid-item::before {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width:670px) {
	/* Phone View */
	.main-nav{
		max-width: 80%;
	}
	.open .main-nav {
		transition: all 0.6s ease 0s;
	}
	.main-nav nav{
		min-width: 350px;
	}
	.search-btn{
		margin-left: 0;
	}
	.top-bar .fa-facebook{
		margin-right: 10px;
	}
	.top-bar a[href^="tel:"]{
		display: none;
	}
	.search-btn.close {
	    width: auto;
	    height: auto;
	    background: none;
	}
	.logo-name{
		width: 250px;
	}
	.banner-text{
		padding-left: 0;
		padding-right: 20px;
	}
	.about-wrapper .table{
		height: auto;
	}
	.about-wrapper .table,
	.about-wrapper .cell{
		display: block;
	}
	.about-wrapper .cell:first-child{
		width: 100%;
	}
	.about-wrapper .large-text span{
		display: inline-block;
	}
	.about-wrapper .large-text span:after, 
	.about-wrapper .large-text span:before{
		content: none;
	}
	.about-wrapper .about-text{
		text-align: center;
	}
	.products-wrapper .table,
	.products-wrapper .row,
	.products-wrapper .cell{
		display: block;
	}
	.products-wrapper .table{
		font-size: 0;
	}
	.products-wrapper .row{
		display: inline-block;
		vertical-align: top;
		width: 50%;
	}
	.products-wrapper .row .cell,
	.products-wrapper .row:last-child .cell{
		padding-bottom: 10px;
	}
	#home .product-box h3{
		min-height: 52px;
	}
	.social-wrapper .top-text{
		padding-top: 40px;
	}
	.social-wrapper h2{
		font: 40px/44px 'Fremont Bold';
	}
	.footer-wrapper p{
		font-size: 12px;
	}
	.footer-wrapper p span,
	.footer-wrapper .cell:first-child a{
		margin: 0;
	}
	#inner .products > .container > .more{
		margin-top: 0;
		white-space: normal;
	}
	#inner .products{
		padding-bottom: 30px;
	}
	.breadcrumbs{
		padding-bottom: 20px;
	}
	.sub-banner .large-text {
    font-size: 11vw;
    line-height: 12vw;
  }
	.sub-banner p{
		font-size: 18px;
		line-height: 26px;
	}
	.banner-data > .cell {
  	text-align: center;
  	padding: 20px;
	}
	.banner-data > .cell > * {
  	margin-left: auto;
  	margin-right: auto
	}
	.banner-text {
  	padding-right: 0px;
	}
	#inner-banner .slick-dots {
  	top: auto;
  	bottom: 20px;
  	width: 100%;
  	display: block !important;
  	right: 0;
  	left: 0;
	}
  #inner-banner .slick-dots > li {
    display: inline-block !important;
    margin: 0;
    height: 22px;
    width: 22px;
  }
  #inner-banner .slick-dots > li + li {
    margin-left: 15px;
  }
  .banner-content .cell {
    padding-top: 0;
  }
  .main-content {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .faq header {
    font: 22px/29px 'Metropolis-Bold';
  }
  #section-tabs {
    padding: 0 20px;
  }
  .grid-item { width:280px };
}

@media screen and (max-width:560px) {
  #section-tabs a[href*="pdf"] + a[href*="xls"]:before,
  #section-tabs a[href*="xls"] + a[href*="pdf"]:before {
    display: none;
  }
  #section-tabs a[href*="pdf"] + a[href*="xls"],
  #section-tabs a[href*="xls"] + a[href*="pdf"] {
    display: block;
    margin: -12px 0 16px;
    padding-left: 45px;
  }
  
}

@media screen and (max-width:480px){
	.main-nav{
		max-width: 100%;
	}
	.main-nav nav{
		min-width: 100%;
		padding: 100px 0 40px 0 !important;
	}
	
	.main-nav nav > :not(.close-btn) {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
  .main-nav nav > a:not(.close-btn) {
    padding-right: 60px !important;
    padding-left: 45px !important;
  }
	.close-btn{
		top: 20px;
		right: 20px;
	}
	.fixed .nav-menu > li > a, .nav-menu > li > a, .main-nav .top-menu li a{
		font-size: 22px;
	}
	#header{
		height: 50px;
	}
	.top-bar {
	    height: 50px;
	}
	.header-menu .logo{
		width: 180px;
		padding-top: 10px;
		height: 50px;
		top: -50px;
	}
	.top-bar .btn-blue{
		padding: 0;
		width: 24px;
		background-size: 100%;
		margin-right: 7px;
	}
	.top-bar .fa-facebook{
		margin-right: 7px;
	}
	#nav-btn,
	#nav-btn span{
		width: 28px;
	}
	.top-bar .relative{
		padding-right: 50px;
	}
	.logo-name{
		width: 200px;
		margin-bottom: 20px;
	}
	.banner-text .large-text{
		font-size: 30px;
		line-height: 30px;
	}
	.social-wrapper h2 {
	    font: 26px/32px 'Fremont Bold';
	}
	.social-wrapper h2:after{
		content: none;
	}
	.social-wrapper .top-text{
		padding: 30px 0;
	}
	.social-wrapper .social-inner{
		padding: 0;
	}
	.social-inner{
		top: 0;
	}
	.social-wrapper .slick-slider,
	.soc-box {
		padding: 0;
	}
	.slick-arrow.slick-next{
		right: 5px;
		background: url(../images/arrows/arr-slider-right-lt.png) no-repeat;
	}
	.slick-arrow.slick-prev{
		left: 5px;
		background: url(../images/arrows/arr-slider-left-lt.png) no-repeat;
	}
	.soc-box .text-overlay{
		opacity: 1;
		visibility: visible;
		padding: 15px 50px;
	}
	.soc-box .text-overlay .ico-fb {
  	margin-bottom: 10px;
	}
	.soc-box .img-box > a[class^="ico"]{
		display: none;
	}
	.cta-text{
		font-size: 20px;
	}
	.product-box h3{
		min-height: initial;
	}
	.product-box .img-box{
		margin-bottom: 20px;
	}
	.search-box input[type="text"]{
		height: 34px;
		padding-left: 15px;
	}
	.search-box .search-form{
		padding-left: 45px;
	}
	.search-box.open {
	    height: 56px;
	    padding: 11px 0 9px;
	}
	.stamp-banner a{
		width: 220px;
		height: 220px;
		margin: 0 auto;
		background-size: 100%;
	}
	.soc-box .text-overlay p {
  	font-size: 14px;
  	line-height: 18px;
	}
	.footer-wrapper p strong span {
  	display: block;
  	width: 100%;
  	font-size: 0;
  	line-height: 0;
  	text-indent: -9999px;
  	height: 4px;
	}
  .footer-wrapper p strong {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
  }
  
  .footer-wrapper p strong + br {
    display: none;
  }
  .footer-wrapper .cell:first-child a:not([href^="tel:"]) {
    margin-left: 0;
  }
  #section-notes .icon-set li {
  	width: 100%;
	}
	
  #section-notes .icon-set li + li {
    padding-top: 30px;
  }
  .grid-item {
    height: 350px !important;
  }
  a.grid-item::after {
	  font-size: 20px;
    line-height: 24px;
    padding: 0 40px;
  }
  .all-jobs header {
    font-size: 22px;
    line-height: 26px;
  }
}

@media screen and (max-width:380px) {
	.banner-text{
		padding-right: 0;
	}
	.products{
		padding: 30px 0;
	}
	.products-wrapper .row{
		display: block;
		width: 100%;
	}
		.products-wrapper .row .cell, .products-wrapper .row:last-child .cell{
		padding-bottom: 20px;
	}
	.ql-box .img-box {
	    height: 280px;
	}
	.ql-box .img-box .cell{
		padding-top: 0;
	}
	
	#inner-banner .slick-dots {
  	bottom: 10px;
	}
	.table.overlay > .cell {
  	padding-bottom: 30px;
	}
	#section-tabs a[href*="pdf"],
  #section-tabs a[href*="xls"] {
    text-align: center;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 0 6px 0 !important;
  }
  
  #section-tabs a[href*="pdf"]:first-child:before,
  #section-tabs a[href*="xls"]:first-child:before {
    display: block;
    margin: 0 auto 10px !important;
  }

  #section-tabs a[href*="pdf"] + span, 
  #section-tabs a[href*="xls"] + span {
    padding: 8px 0 0 0;
    margin: 0 auto !important;
    text-align: center;
  }
  
  #section-tabs a[href*="pdf"] + span:after, 
  #section-tabs a[href*="xls"] + span:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #292627;
    margin:20px auto 0;
  }
}

@media screen and (max-width:340px) {
  
  .main-nav nav > :not(.close-btn) {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .main-nav nav > a:not(.close-btn) {
    padding-right: 45px !important;
    padding-left: 30px !important;
  }
}