@charset "utf-8";

/* global */
body { -webkit-font-smoothing: antialiased; font-family: 'Poppins', sans-serif; height: 100% }
a { text-decoration: none !important }
.navbar-default { background: #FFF; border: none; margin: 0; min-height: 100px; padding: 15px }
	.navbar-default .navbar-header button { display: none }
	.navbar-default .navbar-collapse { float: left; margin-top: 10px; text-transform: uppercase; width: 65% }
		.navbar-default .navbar-collapse li a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #4A4A49; transition: 0.3s }
		.navbar-default .navbar-collapse li a:hover, .navbar-default .navbar-collapse li.active a, .navbar-default .navbar-collapse li.active a:hover { background: none; color: #000 }
		.navbar-default .navbar-collapse li.active a { font-weight: 600 }
	.navbar-default #navbar-logo { color: #000; display: block; float: right; font-family: 'Lobster', cursive; font-size: 36px; margin-top: -2px; padding-right: 15px; text-align: right; width: 35% }
		.navbar-default #navbar-logo small { display: block; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 300; padding-right: 5px }
#loading { background-color: #FFF; display: table; height: 100%; margin: -100px 0 -50px 0; position: fixed; text-align: center; width: 100%; z-index: 1000 }
	#loading i { display: table-cell; vertical-align: middle }
#page-wrapper { margin: 100px 0 50px 0 }
#project-wrapper { padding: 4px; margin: 0 10%; }
.project-box { display: block; float: left; padding: 6px; position: relative; width: 14.2857142%; z-index: 2 }
	.project-box .project-box-hover { overflow: hidden; position: relative; width: 100% }
		.project-box .project-box-hover div { -moz-transition: 1; -o-transition: 1s; -webkit-transition: 1s; background-color: rgba(0, 0, 0, 0.65); bottom: 0; color: #FFF; left: 0; opacity: 0; overflow: hidden; position: absolute; right: 0; text-align: center; top: 0; transition: 1s }
		.project-box .project-box-hover div:hover { opacity: 1 }
		.project-box .project-box-hover div.touch { left: auto !important; opacity: 1 !important; padding: 10px 0 !important; right: auto !important; top: auto !important; width: 100% !important }
		.project-box .project-box-hover img { -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out }
		.project-box .project-box-hover:hover img { -moz-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1) }
			.project-box .project-box-hover div h2 { display: table; font-weight: 300; height: 100%; margin: 0; text-transform: uppercase; width: 100% }
				.project-box .project-box-hover div h2 span { display: table-cell; vertical-align: middle }
footer { background-color: #ff7900; padding: 15px 30px; text-align: center; width: 100%; z-index: 1030 }
	footer a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #fff; font-size: 20px; padding: 0 6px; transition: 0.3s }
	footer a:hover { color: #000 }

#footer-inside { background-color: #ff7900; color: #fff; padding: 15px 30px; text-align: center; }
	#footer-inside a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #fff; font-size: 20px; padding: 0 6px; transition: 0.3s }
	#footer-inside a:hover { color: #000 }
.footer-title { font-size: 24px; margin: 15px 0 10px 0; font-weight: 400; }
.footer-text-links { margin-bottom: 20px; }
.footer-text-links a { display: inline-block; margin: 0 4px; font-size: 14px!important; line-height: 30px!important; white-space: nowrap; }

/* project */
#project-nav { margin-top: 42px; position: fixed; right: 30px; z-index: 1 }
	#project-nav a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #4A4A49; font-size: 40px; transition: 0.3s }
	#project-nav a:hover { color: #000 }
#project-information { left: 30px; margin: 50px 0; position: absolute; width: 300px }
	#project-information h1 { font-size: 32px; font-weight: 300; margin: 0 0 20px 0 }
	#project-information h2 { font-size: 12px; font-weight: 400; margin: 25px 0 5px 0; text-transform: uppercase }
	#project-information p { margin: 0 }
	#project-information p+p { margin: 20px 0 0 0 }
	#project-information #share-buttons a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #4A4A49; font-size: 20px; padding: 0 11px 0 0; transition: 0.3s }
	#project-information #share-buttons a:hover { color: #000 }
#project-images { margin: 0 30px 0 360px; padding-top: 50px; position: relative }
	#project-images img { margin-bottom: 30px }

#share-wrapper { margin-left: 30px; margin-top: -100px; }
	#share-wrapper h2 { font-size: 12px; font-weight: 400; margin: 25px 0 5px 0; text-transform: uppercase }
	#share-wrapper #share-buttons a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #4A4A49; font-size: 20px; padding: 0 11px 0 0; transition: 0.3s }
	#share-wrapper #share-buttons a:hover { color: #000 }
.sm-title { font-size: 11px; margin-bottom: 12px; }
.coming-soon { background-color: #ff7900; color: #fff; padding: 30px 0; font-size: 46px; text-align: center; }

/* project image compare */
.cd-image-container { max-width: 1000px; position: relative }
	.cd-image-container img { display: block; max-width: 100% }
.cd-image-label { text-transform: uppercase; background-color: rgba(0, 0, 0, 0.75); font-weight: 600; position: absolute; bottom: 0; right: 0; color: #FFF; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s }
	.cd-image-label.is-hidden { visibility: hidden }
.is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
.cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden }
	.cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none }
	.cd-resize-img .cd-image-label { right: auto; left: 0 }
.is-visible .cd-resize-img { border-right: 2px solid #FFF; width: 10%; -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s }

@-webkit-keyframes cd-bounce-in {
	0% { width: 0 }
	60% { width: 15% }
	100% { width: 10% }
}
@-moz-keyframes cd-bounce-in {
	0% { width: 0 }
	60% { width: 15% }
	100% { width: 10% }
}
@keyframes cd-bounce-in {
	0% { width: 0 }
	60% { width: 15% }
	100% { width: 10% }
}

.cd-handle { position: absolute; height: 26px; width: 26px; left: 9.85%; top: 50%; margin-left: -13px; margin-top: -13px; background: #FFF url('/img/layout/cd-arrows-2.svg') no-repeat center center; cursor: move; opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0) }
	.cd-handle.draggable { background: #4A4A49 url('/img/layout/cd-arrows.svg') no-repeat center center }
.is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s }

/* page */
#page-information { left: 30px; margin: 50px 0; position: absolute; width: 300px }
	#page-information h1 { font-size: 32px; font-weight: 300; margin: 0 0 20px 0 }
	#page-information h2 { font-size: 12px; font-weight: 400; margin: 25px 0 5px 0; text-transform: uppercase }
	#page-information p { margin: 0 }
	#page-information p+p { margin: 20px 0 0 0 }
	#page-information a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #4A4A49; transition: 0.3s }
	#page-information a:hover { color: #000 }
	#page-information #share-buttons a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #4A4A49; font-size: 20px; padding: 0 11px 0 0; transition: 0.3s }
	#page-information #share-buttons a:hover { color: #000 }
#page-images { margin: 0 30px 0 360px; padding-top: 50px; position: relative }
	#page-images img { margin-bottom: 30px }

/* shop */
.shop-box { display: block; float: left; position: relative; width: 33.33333333%; z-index: 2 }
	.shop-box .shop-box-hover { overflow: hidden; position: relative; width: 100% }
		.shop-box .shop-box-hover div { -moz-transition: 1; -o-transition: 1s; -webkit-transition: 1s; background-color: rgba(0, 0, 0, 0.65); bottom: 0; color: #FFF; left: 0; opacity: 0; overflow: hidden; position: absolute; right: 0; text-align: center; top: 0; transition: 1s }
		.shop-box .shop-box-hover div:hover { opacity: 1 }
		.shop-box .shop-box-hover div.touch { left: auto !important; opacity: 1 !important; padding: 10px 0 !important; right: auto !important; top: auto !important; width: 100% !important }
		.shop-box .shop-box-hover img { -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out }
		.shop-box .shop-box-hover:hover img { -moz-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1) }
			.shop-box .shop-box-hover div h2 { display: table; font-weight: 300; height: 100%; margin: 0; text-transform: uppercase; width: 100% }
				.shop-box .shop-box-hover div h2 span { display: table-cell; vertical-align: middle }

/* contact us */
#map-contact { margin-bottom: 30px; max-width: 1000px }


@media (max-width: 2937px) {
	/* global */
	.project-box { width: 16.66666667% }
}

@media (max-width: 2519px) {
	/* global */
	.project-box { width: 20% }
}

@media (max-width: 2099px) {
	/* global */
	.project-box { width: 25% }
}

@media (max-width: 1589px) {
	/* global */
	.project-box { width: 33.33333333% }
}

@media (max-width: 1490px) {
	/* project */
	#project-nav { display: none }
}

@media (max-width: 1199px) {
	/* global */
	.project-box { width: 50% }
	
	/* shop */
	.shop-box { width: 50% }
}

@media (max-width: 991px) {
	/* global */
	.project-box .project-box-hover img { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none }
	.project-box .project-box-hover:hover img { -moz-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1) }
	
	/* project */
	#project-information { left: 0; margin: 0 0 30px 0; padding: 50px 30px 0 30px; position: relative; width: 100% }
	#project-images { margin: 0; padding: 0 }
	
	/* page */
	#page-information { left: 0; margin: 0 0 30px 0; padding: 50px 30px 0 30px; position: relative; width: 100% }
	#page-images { margin: 0; padding: 0 }
	
	/* shop */
	.shop-box .shop-box-hover img { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none }
	.shop-box .shop-box-hover:hover img { -moz-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1) }
}

@media (max-width: 767px) {
	/* global */
	.navbar-default { position: relative }
		.navbar-default .navbar-header button { background: none; border: none; display: block; outline: none; padding: 10px 0 20px 0; text-align: center; text-transform: uppercase; width: 100% }
		.navbar-default .navbar-collapse { -moz-box-shadow: none; -webkit-box-shadow: none; border: none; box-shadow: none; float: none; margin-top: 0; width: 100% }
			.navbar-default .navbar-collapse li a { text-align: center }
		.navbar-default #navbar-logo { float: none; padding: 0; text-align: center; width: 100% }
	#page-wrapper { margin: 0 }
	.project-box { width: 100% }
	footer { position: relative; text-align: center }
		footer a { padding: 0 8px }
	
	/* project */
	#project-information { padding: 50px 15px 0 15px }
	#project-images img { margin-bottom: 15px }
	
	/* page */
	#page-information { padding: 50px 15px 0 15px }
	#page-images img { margin-bottom: 15px }
	
	/* shop */
	.shop-box { width: 100% }
	
	.footer-text-links br { display: none; }
	#project-wrapper { margin: 0; }
}