/* General */
#page h2 { margin: 0; text-align: center; font-weight: 300; max-width: 100%; font-size: 22pt; letter-spacing: 7px; }
#page h3 { line-height: 1.2; margin: 0 0 10px; font-weight: 100; max-width: 100%; font-size: 19pt; }
.container > p { line-height: 1.4; margin: auto; max-width: 90%; font-size: 12pt; text-align: center; }
hr { margin: 52px auto 96px; max-width: 620px;  height: 2px; background: #cdcdcd; }
hr.less { margin: 27px auto; max-width: 78px; background: #696969; height: 3px; }
#promo hr { max-width: 100%; }

/* Banner */
#banner { cursor: pointer; padding: 0; margin: 0; }
#banner img { width: 100%; }

#fourths { font-size: 0; text-align: center; margin: 93px -15px 0; }
#fourths img { display: inline-block; vertical-align: top; margin: 0 15px 30px; }

#first { padding: 0 0 98px; }
#first hr:first-of-type { margin: 45px auto; }
#first > p { width: 780px; }
#first iframe { display: block; width: 100%; max-width: 660px; height: 365px; margin: 50px auto 0; }
#first a { letter-spacing: 0; margin: 42px auto 0; font-size: 14pt; cursor: pointer; text-align: center; border: 1px solid #00b2a9; text-transform: uppercase; width: 155px; padding: 13px 0 12px; display: block; text-decoration: none; color: #00b2a9; font-weight: 700; }
#first a:hover { background: #00b2a9; color: #FFF; }

#second { padding: 106px 0 90px; background: #f0f0f0; }
#second .container > p:first-of-type { width: 340px; }
#second .container > p:last-of-type { width: 750px; }
#second .container > hr:not( .less ) { margin: 88px auto; }

#third { padding: 89px 0; }
#third .container > p { width: 887px; }

.thirds { font-size: 0; text-align: center; margin: 64px -13px 0; }
.thirds div { display: inline-block; vertical-align: top; width: calc( ( 100% - 78px ) / 3 ); margin: 0 13px; font-size: 12pt; text-align: left; color: #767676; }
.thirds img { display: block; }
.thirds hr { max-width: 240px; margin: 40px 0 25px; height: 1px; background: #767676; }
.thirds h3 { color: #414549; }
.thirds p { max-width: 80%; line-height: 1.4; font-size: 11pt; margin: 0; }

.effect { background: url( '../images/bg/permarite-adhesive.jpg' ) center center/cover no-repeat; box-sizing: content-box; height: 315px; color: #5d5d5d; }
.effect div:not( .clear ) { width: 410px; max-width: 90%; padding: 98px 0 0 88px; text-align: left; }
.effect b { margin: 0 0 3px; font-size: 12pt; display: block; text-transform: uppercase; font-weight: 900; }
#page .effect h3 { font-size: 25pt; margin: 0 0 8px; }
.effect p { line-height: 1.2; margin: 0; font-size: 11.6pt; }

.effect.two { background: url( '../images/bg/micro-links.jpg' ) center center/cover no-repeat; }
.effect.two div:not( .clear ) { text-align: right; float: right; width: 449px; padding: 98px 88px 0 0; }
#page .effect.two h3 { text-align: right; }

#fourth { padding: 81px 0; }
#fourth .container > p { width: 510px; }

.two-sided { background: #e8e8e8; }
.two-sided img { float: left; width: 50%; display: block; }
.two-sided > div:not( .clear ) { position: relative; float: left; width: 50%; height: 659px; padding: 72px 98px 0; text-align: right; box-sizing: border-box; background: #e8e8e8; color: #696969; }
.two-sided > div:not( .clear ) > span { margin: 0 0 20px; line-height: 1; display: block; font-size: 52pt; font-weight: 100; }
.two-sided p { text-transform: uppercase; margin: 0 0 44px; font-size: 15pt; line-height: 1.1; font-weight: 100; }
.two-sided p b { font-weight: 900; }
.two-sided table { margin: 0 0 55px; width: 100%; }
.two-sided td { font-size: 11pt; border: 0; border-top: 1px solid #c1c1c1; padding: 16px 0; line-height: 1; }
.two-sided tr:last-of-type td { border-bottom: 1px solid #c1c1c1; }
.two-sided tr td:first-of-type { text-transform: uppercase; font-weight: 100; }
.two-sided tr td:last-of-type { text-align: right; }
.two-sided div div:not( .absolute ) { color: #696969; font-size: 57pt; font-weight: 300; letter-spacing: -8px; line-height: .8; }
.two-sided div div span { text-transform: uppercase; font-weight: 300; font-size: 25pt; letter-spacing: 0; }
.two-sided sup:first-of-type { position: relative; top: -9px; right: -27px; font-weight: 100; font-size: 17pt; letter-spacing: 0; }
.two-sided sup:last-of-type { font-weight: 100; font-size: 29pt; }
.absolute { position: absolute; bottom: 14px; right: 14px; z-index: 2; font-size: 10pt; }

#consultation { text-align: left; background: #1e1e1e; padding: 80px 0; color: #FFF; }
#consultation-holder { max-width: 800px; margin: auto; }
#form-header { float: left; width: 40%; text-transform: uppercase; font-size: 12pt; line-height: 1.3; letter-spacing: 2px; }
#form-header div { font-weight: 900; font-size: 20pt; color: #FFF; line-height: 1.2em; margin: 4px 0; }
#form-header span { text-transform: none; margin: 13px 0 0; display: block; font-size: 13pt; line-height: 1.3; max-width: 77%; letter-spacing: 1px; }
#form-header span b { display: block; font-weight: 900; }
#form-1 { width: 52%; float: right; }
.input-holder { margin: 0 16% 0 0; float: left; width: 42%; }
.input-holder.no-margin { margin-right: 0; }
#consultation label { color: #FFF; }
#consultation [type="text"], #consultation select { background: #757575; border-color: #757575; color: #FFF; cursor: pointer; }
#consultation ::-webkit-input-placeholder { color: #FFF; }
#consultation :-moz-placeholder { color: #FFF; opacity: 1; }
#consultation ::-moz-placeholder { color: #FFF; opacity: 1; }
#consultation :-ms-input-placeholder { color: #FFF; }
.input-holder.submit-holder { margin: 6px 0 27px; }
#consultation [type="submit"] { background: #ff8d2d; }
#consultation [type="submit"]:hover { opacity: 0.8; }
#disclaimer { color: #FFF; font-size: 8.4pt; letter-spacing: 1px; line-height: 1.3; }
#disclaimer a { color: #FFF; text-decoration: underline; font-weight: 600; }

#faq { margin: 98px 0 0; text-align: center; font-size: 0; }
#faq hr { margin-bottom: 108px; }
#faq > div { width: 380px; height: 170px; margin: 0 40px 60px; line-height: 1.3em; display: inline-block; vertical-align: top; }
#faq h3 { font-size: 18pt; text-align: center; font-weight: 300; line-height: 1.1; }
#faq p { letter-spacing: 1px; font-size: 11.6pt; line-height: 1.3; }

#fixed-bar { position: fixed; bottom: 0; padding: 10px 0; background: #00b2a9; width: 100%; left: 0; z-index: 7; color: #FFF; text-align: center; display: block; text-transform: uppercase; font-weight: 100; font-size: 12pt; cursor: pointer; transition: all 0.4s; line-height: 1em; }
#fixed-bar:hover { opacity: .8; }

@media (max-width: 1200px) {
	.two-sided img, .two-sided > div:not( .clear ) { height: 50vw; }
	.two-sided > div:not( .clear ) { padding-top: 3vw; }
	.two-sided table { margin: 0 0 20px; }
}

@media (max-width: 1075px) {
	.thirds p { max-width: 100%; }
}

@media (max-width: 1056px) {
	#page h2 { letter-spacing: 0; }
	
	#fourths { width: 522px; margin: 60px auto 0; max-width: 100%; }
	#fourths img { width: calc( ( 100% - 60px ) / 2 ); }
	
	.effect div:not( .clear ) { width: 38%; padding: 98px 0 0 3%; }
	.effect.two div:not( .clear ) { width: 38%; padding: 98px 3% 0 0; }
	
	.two-sided img { display: none; }
	.two-sided table { margin: 0 auto 55px; max-width: 300px; }
	.two-sided td { text-align: right; }
	.two-sided > div:not( .clear ) { float: none; width: 100%; height: auto; text-align: center; padding: 50px 10%; }
	
	#third, #fourth { padding: 50px 0; }
	
	#consultation { padding: 50px 0; }
	#form-header { float: none; margin: 0 auto 20px; width: 96%; text-align: center; }
	#form-header > div { width: 500px; margin: 14px auto; max-width: 90%; }
	#form-header span { max-width: 100%; margin: 0; }
	#form-1 { float: none; margin: auto; }
	.input-holder.submit-holder { margin: 0 auto 30px; }
}

@media (max-width: 1036px) {
	#first hr:first-of-type { margin: 45px auto 80px; }
}

@media (max-width: 920px) {
	#faq { margin: 56px 10px 0; }
	#faq hr { margin: 27px auto; }
	#faq > div { width: 90%; height: auto; margin: 0 auto 40px; display: block; max-width: 380px; }
}

@media (max-width: 834px) {
	.effect { height: auto; }
	.effect.two { background-position: center left; }
	.effect div:not( .clear ), .effect.two div:not( .clear ) { width: 400px; max-width: 90%; padding: 40px 0; margin: auto; text-align: center; }
	.effect.two div:not( .clear ) { color: #FFF; float: none; }
	#page .effect h3 { text-align: center; }
	#page .effect.two h3 { color: #FFF; text-align: center; }
	
	.two-sided > div:not( .clear ) { padding: 50px 10% 68px; }
}

@media (max-width: 750px) {
	#first hr:first-of-type { margin: 45px auto 40px; }
	
	#form-1 { width: 100%; max-width: 300px; }
	.input-holder { width: 100%; float: none; }
	.input-holder.submit-holder { margin: 0 0 22px; }
	#submit { margin: auto; display: block; }
	#disclaimer { text-align: center; }
}

@media (max-width: 677px) {
	#first iframe { height: 54vw; }
	
	.thirds h3 { letter-spacing: -1px; }
	.thirds br { display: none; }
}

@media (max-width: 560px) {
	#page h3 { margin: 10px 0; }
	
	#second { padding: 43px 0 24px; }
	#second .container > hr:not( .less ) { margin: 18px auto 43px; }
	
	.thirds { text-align: left; margin: 40px -8px 0; }
	.thirds div { width: calc( ( 100% - 32px ) / 2 ); margin: 0 8px 26px; }
	.thirds hr { display: none; }
	
	.two-sided table { margin: 0 auto 32px; }
}

@media (max-width: 465px) {
	h2 { letter-spacing: 0; }
	
	#slider { margin: 0 0 30px; }
	
	#first { padding: 0 0 30px; }
	#first hr:first-of-type { display: none; }
	
	#fourths img { margin: 0 6px 12px; width: calc( ( 100% - 24px ) / 2 ); }
	
	#consultation { padding: 40px 20px; }
	
	#faq { margin: 30px 10px 0; }
	#faq p { letter-spacing: 0; }
}

@media (max-width: 380px) {
	#page .effect h3 { font-size: 21pt; }
	
	#form-header div:first-of-type { font-size: 20pt; }
	#form-header span { margin: 8px 0 0; }
	#form-1 { width: 90%; }
}