html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold; }
a:focus, input:focus{ outline-style: none; }
*{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* clear */
.clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clear { display: inline-block; width: 100%; }
html[xmlns] .clear { display: block; }
* html .clear { height: 1%; }

a{ color: #a34339; text-decoration: none; }
	a:hover{ text-decoration: underline; }

.mob{ display: none; }

body{ background: url('marble-pattern.gif'); font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 21px; text-align: center; color: #1b1b1b; }
.width{ max-width: 1140px; min-width: 960px; margin: auto; }

.sub{ font-size: 1px; background: #a34339; height: 3px; width: 30px; display: inline-block; }

.btn{ background: #da5c4f; font-family: 'Lora', serif; text-transform: uppercase; color: #fff; border-radius: 100px; display: inline-block; line-height: 1; font-size: 13px; letter-spacing: 2px; text-decoration: none; padding: 15px 25px; border: 0; }
	.btn:hover{ background: #a34339; text-decoration: none; }

.col{ float: left; display: inline; }
	.col.half{ width: 50%; }
		.col.half:first-child{ padding-right: 40px; }
		.col.half:last-child{ padding-left: 40px; }

header{ padding: 0; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2); }
	header .width{ display: block; }
	header h1{ float: left; display: inline; padding: 0; background: #fff; }
		header h1 a{ text-decoration: none; }
		header h1 img{ height: 110px; width: auto; display: block; }
		header h1 span{ font-family: 'Lora', serif; font-size: 12px; color: #a3a3a3; display: block; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; }
	header .menu{ float: left; display: inline; width: calc(50% - 60px); background: #f8f5ef; }
		header .menu > ul{ border-left: #ebe9e3 1px solid; display: block; }
			header .menu > ul > li{ float: left; display: inline; width: 33%; width: 33.333%; text-align: center; border-right: #ebe9e3 1px solid; position: relative; }
				header .menu > ul > li a{ text-transform: uppercase; color: #000; letter-spacing: 1px; font-weight: 500; text-decoration: none; font-size: 13px; padding: 44px 0 42px 0; border-bottom: #f8f5ef 2px solid; display: block; }
					header .menu > ul > li.active a{ border-bottom-color: #a34339; }
					header .menu > ul > li:not(.active) a:hover{ background: #f3eee5; border-bottom-color: #f3eee5; }
				header .menu > ul > li > ul{ display: none; }
				header .menu > ul > li:hover ul{ display: block; position: absolute; top: 109px; left: 0; z-index: 30; background: #f8f5ef; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4); }
					header .menu > ul > li:hover ul li{ float: none; display: block; min-width: 200px; border-top: #ebe9e3 1px solid; }
					header .menu > ul > li:hover ul a{ text-decoration: none; letter-spacing: 0; font-weight: 400; text-align: left; padding: 10px; border: 0; }
						header .menu > ul > li:hover ul a:hover{ background: #f3eee5; }

.page{ padding: 40px 0; }

.samples{ text-align: center; }
	.samples h2{ font-size: 24px; text-transform: uppercase; letter-spacing: 4px; font-family: 'Lora', serif; margin-bottom: 15px; }
	.samples .cols{ margin-top: 20px; display: block; }
	.samples .description{ font-size: 16px; line-height: 30px; margin: 10px 0 20px 0; font-family: 'Lora', serif; }
	.samples .col{ width: calc(25% - 30px); margin-left: 40px; background: #fff; margin-bottom: 40px; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); padding: 20px; height: 265px; }
		.samples .col:nth-child(4n+1){ margin-left: 0; }
	.samples .name{ text-transform: uppercase; display: block; margin-top: 10px; line-height: 1; font-size: 13px; }

.text-page{ text-align: center; }
	.text-page h2{ font-size: 24px; text-transform: uppercase; letter-spacing: 4px; font-family: 'Lora', serif; margin-bottom: 15px; }
	.text-page .content{ text-align: left; font-size: 16px; line-height: 30px; font-family: 'Lora', serif; }
		.text-page .content p{ margin-top: 20px; }
		.text-page .cols .col{ float: left; display: inline; }
		.text-page .cols .col-half{ width: 50%; text-align: left; }
		.text-page .cols .col-half:first-child{ padding-right: 20px; }
		.text-page .cols .col-half:last-child{ padding-left: 20px; }

.contact{ padding-top: 30px; }
	.contact .inner{ background: #fff;  padding: 40px; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); }
	.contact .inner h3{ text-transform: uppercase; font-family: 'Lora', serif; font-size: 18px; letter-spacing: 2px; padding-bottom: 10px; }
	.contact .inner .sub{ margin-bottom: 30px; }
	.contact iframe{ width: 100%; height: 265px; margin-top: 40px; }

.form label{ display: block; width: 100%; }
.form input[type="text"], .form input[type="email"], .form textarea{ display: block; width: 100%; font-size: 16px; padding: 10px; border: #ccc 1px solid; }
	.form input[type="text"]:focus, .form input[type="email"]:focus, .form textarea:focus{ border-color: #aaa; }
.form div.input{ margin-top: 20px; }
	.form div.input:first-child{ margin-top: 0; }
.form .submit{ margin-top: 20px; }

.jobs{ margin-top: 20px; }
	.jobs .job{ margin-top: 20px; padding-top: 20px; border-top: #ddd 1px solid; text-align: left; font-size: 16px; line-height: 30px; }
		.jobs .job:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
		.jobs .job h3{ font-family: 'Poppins', serif; font-size: 24px; font-weight: 500; }

.heroic{ position: relative; }
	.heroic .slider{ position: relative; height: 500px; }
	.heroic .img{ width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
	.heroic .text{ width: 770px; position: absolute; top: 50%; left: 50%; margin: -90px 0 0 -385px; z-index: 20; background: rgba(0,0,0,0.5); border: #fff 1px solid; padding: 30px 50px; color: #fff; text-transform: uppercase; font-weight: 400; font-size: 30px; line-height: 1.5em; letter-spacing: 6px; }
	
.home{ padding: 70px 0 50px 0; }
	.home .inner{ background: #fff;  padding: 40px; }
	.home h3{ font-size: 18px; line-height: 1; margin-bottom: 15px; font-family: 'Lora', serif; letter-spacing: 2px; text-transform: uppercase; }
	.home p{ color: #626262; font-size: 16px; line-height: 28px; padding: 0 20px 20px 20px; font-family: 'Lora', serif; }

.footer{ font-size: 13px; }
	.footer .width{ position: relative; text-align: left; padding: 30px 0; border-top: #ddd 1px solid; }
	.footer .cols{ width: 80%; display: block; }
	.footer .cols .col{ width: 25%; }
	.footer .cols li{ margin-top: 5px; }
	.footer .social{ position: absolute; top: 30px; right: 0; }
		.footer .social img{ width: 30px; height: 30px; }
		.footer .social a{ display: inline-block; margin-left: 5px; }
			
@media screen and (max-width: 900px){
	.mob{ display: initial; }
	.width{ min-width: 0; }

	.col.half{ display: block; float: none; width: 100%; padding: 0; margin: 20px 0 0 0; }
		.col.half:first-child{ padding: 0; margin-top: 0; }
		.col.half:last-child{ padding: 0; }

	header{ position: fixed; top: 0; left: 0; width: 100%; padding: 50px 0 0 0; background: #fff; position: relative; }
		header .toggle-mob-menu{ position: absolute; top: 15px; left: 20px; color: #000; font-size: 14px; z-index: 1; }
		header h1{ display: block; float: none; position: absolute; top: 0; left: 0; text-align: center; width: 100%; padding: 16px 0 0 0; }
			header h1 span{ display: none; }
			header h1 a{ display: inline-block; }
			header h1 img{ width: 200px; }
		header .menu{ width: 100%; display: none; background: #fff; }
			.mob-menu-open header .menu{ display: block; }
		header .menu ul{ display: block; width: 100%; }
		header .menu > ul > li{ display: block; float: none; width: 100%;}
		header .menu > ul > li a{ padding: 10px 20px; text-align: left; text-transform: none; letter-spacing: 0; border: 0; font-size: 13px; line-height: 1; font-weight: 400; border-top: #eee 1px solid; }
			header .menu > ul > li > ul{ display: block !important; position: static !important; }
				header .menu > ul > li:hover ul{ box-shadow: none; background: #fff; }
					header .menu > ul > li:hover ul li{ border: 0; min-width: 0; border-top: #eee 1px solid; }
					header .menu > ul > li:hover ul a{ padding: 10px 20px 10px 40px; }
			header .menu > ul > li > ul li a{ padding-left: 40px; }

	.heroic .slider{ height: 200px; }
	.heroic .text{ width: 90%; padding: 20px; margin: 0; left: 5%; top: 60px; font-size: 14px; letter-spacing: 2px; }

	.home{ padding: 20px; }
		.home .inner{ padding: 20px; }

	.footer .width{ padding: 20px 0; }
	.footer .cols{ display: none; }
	.footer .social{ text-align: center; position: static; }

	.page{ padding: 40px 20px; }

	.samples .col{ width: calc(50% - 20px); margin-left: 20px; padding: 10px; }
		.samples .col:nth-child(even){ margin-left: 0; }
		.samples .col img{ max-width: 100%; }
	.footer .social a{ margin: 0 10px; }

	.text-page .cols .col-half{ width: 100%; float: none; display: block; }
		.text-page .cols .col-half:first-child{ padding: 0; }
		.text-page .cols .col-half:last-child{ padding: 0; margin-top: 20px; }

	.contact { padding: 10px 0 0 0; }
		.contact .inner{ padding: 20px; }
	
}