@charset "UTF-8";

.global-wrapper { background-size: 400px; }
h1, h2, h3 { font-size: 40px; line-height: 45px; }

header { width: 250px; padding: 40px 20px; }
section { width: calc(100% - 250px); margin-left: 250px; }

.container { padding: 50px 3em 2em; }

/*Header */
.header-logo { text-align: center; }
.header-logo img { max-width: 130px; }

/* Banners */
.banner { height: 460px; }
.medium-banner { height: 360px; }
.contact-banner { height: 220px; }
.banner-txt { padding-right: 0; }
.banner-txt h2 { margin: 0; font-size: 40px; line-height: 40px; }

/* List */
.product-list li { width: calc(92%/2); margin: 0 8% 5% 0; }
.product-list li:nth-of-type(2n) { margin-right: 0; }
.product-list li:last-child { margin-right: 0 !important; }
.product-list li:nth-of-type(3n) { margin-right: 8%; }
.product-list li span { font-size: 20px; }

.product-list.product li { width: calc(92%/2); margin: 0 8% 5% 0; }
.product-list li:nth-of-type(2n) { margin-right: 0; }

/* CTA */
.home-cta li { height: 270px; }
.home-cta li span,
.home-catalog span { font-size: 24px; }

/* Products */
.wrap-filters,
.wrap-product-list { float: left; width: 100%; margin-right: 0; }
.wrap-filters { position: relative; }
.wrap-filter-product {
	display: none;
	z-index: 1;
	position: absolute;
	top: 49px;
	left: 0;
	width: 100%;
	padding: 1em;
	background: #e7e9e9;
	box-shadow: 0px 3px 8px #888;
}
.wrap-filter-product.show { display: block; }
.filter-title.active .main-filter { display: none; }
.filter-title.active .close-filter { display: inline-block; }
.filter-title.active .close-filter:before { top: 50%; width: 18px; height: 18px; background-image: url('../../img/icons/icon-close.svg'); }

/* Product info */
.product-img { width: 40%; margin-right: 5%; }
.product-info { width: 55%; padding-right: 0; }
.product-info .product-number li { display: block; margin-bottom: .5em; border: none; }
.product-info .product-number li:last-child { margin-bottom: 0; }

/* Custom design */
.custom-design-list li { float: left; width: calc(96% / 2); margin: 0 4% 4% 0; }
.custom-design-list li:nth-of-type(2n) { margin-right: 0; }

/* Contact */
.wrap-contact .wrap-form { width: 50%; margin-right: 5%; }
.wrap-contact .wrap-contact-info { width: 40%; }

/* About */
.logo-ampak img { max-width: 160px; }
.wrap-logo-ampak .logo-ampak-txt p { font-size: 18px; }
.company-logos { margin: 2em 0; padding: 2em 0; background: #ecf0f1; }
.company-logos li { margin-right: 0; }
.company-logos li a img { max-width: 120px; }
.company-logos li a .special { max-width: 160px; }

/* Footer */
.footer { padding: 2.5em 3em 5.5em 250px; }
.footer-info .footer-logo { margin-right: 3em; }
.footer-info .footer-info-left { margin-bottom: 2em; }
.footer-info .footer-info-right,
.footer-info .footer-info-left { padding-top: 0; }
.copyright .wrap-copyright { width: inherit; padding: 1em 3em 1em 250px; }

/* Small tablet */
@media only screen and (min-width : 768px) and (max-width : 1023px) {
	h1, h2, h3 { font-size: 35px; line-height: 40px; }

	header { width: 105px; padding: 20px; }
	header.open { z-index: 1; }
	section { width: calc(100% - 105px); margin-left: 105px; }
	.global-wrapper { background: none; }

	/* Header */
	.nav-icon { display: block; }
	.header-logo { margin-bottom: 1.5em; }
	.header-logo img { max-width: 65px; }
	.header-menu {
		opacity: 0;
		width: 240px;
		position: absolute;
		top: 0;
		left: -240px;
		height: 100vh;
		min-height: 100vh;
		padding: 220px 30px 20px;
		background: #1d252c;
		transition-property: all;
		transition-duration: 1s;
		transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	}
	.header-menu.show {
		opacity: 1;
		left: 0;
		transition-property: all;
		transition-duration: 1s;
		transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	}

	/* Banners */
	.banner { height: 380px; }
	.medium-banner { height: 300px; }
	.small-banner { height: 180px; }

	/* CTA */
	.home-catalog { background-size: cover; }
	.home-catalog span { margin-bottom: 1em; }
	.home-cta li a { padding: 5em 2em; }

	/* Contact */
	.wrap-contact .wrap-form,
	.wrap-contact .wrap-contact-info { width: 100%; margin-right: 0; }
	.wrap-contact .wrap-form { margin-bottom: 4em; }

	/* About */
	.wrap-logo-ampak { margin-bottom: 1em; }
	.wrap-logo-ampak .logo-ampak-txt { padding: 3em 1em; }
	.company-logos { margin: 0; padding: 0; background: transparent; }
	.company-logos li { width: 30%; margin-bottom: 2em; }

	/* Footer */
	.footer { padding: 2.5em 3em 5.5em 105px; }
	.footer-info,
	.footer-quote { width: 100%; }
	.footer-info { margin-bottom: 5em; }
	.footer-info .footer-logo { margin-right: 4em; }
	.footer-quote { text-align: left; }
	.copyright .wrap-copyright { width: inherit; padding: 1em 3em 1em 105px; }
}