/*

	Style.css

	01. Basics
	02. Sidebar menu
	03. Horizontal menu
	04. Home
	05. Intro
	06. Services
	07. Pricing boxes
	08. Process
	09. Work
	10. Work subpages
	11. Call to action
	12. about
	13. Quotes
	14. Contact
	15. Credits and back to top button
	16. 404

*/


/* ==================== 01. Basics ==================== */
::selection {
	background: none;
	color: #bbbbbb;
}

::-moz-selection {
	background: none;
	color: #bbbbbb;
}

body {
	
	font-family:'Playfair Display', serif;
	font-size: 13px;
	font-weight: normal;
	font-weight: 400;
	line-height: 25px;
	color: #777777;
}

p {
	margin-bottom: 25px;
}

p:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 480px) {

	p:last-child {
		margin-bottom: 5px;
	}

}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-style: normal;
	font-weight: bold;
	font-weight: 700;
	color: #222222;
}

h1, .h1 {
	font-size: 24px;
	line-height: 36px;
	margin-bottom: 25px;
}

h2, .h2 {
	font-size: 18px;
	line-height: 30px;
	margin-bottom: 25px;
}

h3, .h3 {
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 0;
}

h4, .h4 {
	font-size: 14px;
	line-height: 25px;
	margin-bottom: 0;
}

h5, .h5 {
	font-size: 13px;
	line-height: 25px;
	margin-bottom: 0;
}

h6, .h6 {
	font-size: 13px;
	line-height: 20px;
	margin-bottom: 0;
}

/* Links */
a {
	color: inherit;
	text-decoration: none;
}

.no-touch a:hover {
	color: #222222;
}

a.big-underline {
	color: #222222;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
}

.no-touch a.big-underline:hover {
	padding-bottom: 0px;
	border-bottom: 2px solid #444444; 
}

a.underline {
	padding-bottom: 1px;
	border-bottom: 1px dotted #cccccc;
}

.no-touch a.underline:hover {
	border-bottom: 1px dotted #111111;
}

a.read-more {
	color: #aaaaaa;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.no-touch a.read-more:hover {
	color: #222222;
}

a.read-more:after {
	font-family: 'Playfair Display', serif;
	font-size: 14px;
	content: '\f178'; /* 105 */
	color: transparent;
	margin-left: 1px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch a.read-more:hover:after {
	color: #222222;
	margin-left: 10px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.about-link a {
	cursor: pointer;
}

/* Smooth hover effects */
a,
button,
input[type="submit"] {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

a:hover,
button:hover,
input[type="submit"]:hover {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Cursor styling for icons */
i {
	cursor: default;
}

a i,
button i {
	cursor: pointer;
}

/* Bigger text for headers */
.bigtext h1, .bigtext .h1, h1.bigtext, .h1.bigtext {
	font-size: 40px;
	font-style: normal;
	font-weight: bold;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 44px;
	text-transform: uppercase;
}

.bigtext sup {
	font-size: 50%;
	font-weight: normal;
	font-weight: 400;
	vertical-align: middle;
}

@media only screen and (max-width: 768px) {

	.bigtext h1, .bigtext .h1, h1.bigtext, .h1.bigtext {
		font-size: 32px;
		line-height: 36px;
	}

}

@media only screen and (max-width: 480px) {

	.bigtext h1, .bigtext .h1, h1.bigtext, .h1.bigtext {
		font-size: 22px;
		line-height: 25px;
	}

}

/* Responsive text for normal use, h1 and h2 only */
@media only screen and (max-width: 768px) {

	h1.responsive-txt, .h1.responsive-txt {
		font-size: 24px;
		line-height: 1.5em;
	}

	h2.responsive-txt, .h2.responsive-txt {
		font-size: 18px;
		line-height: 1.5em;
	}


}

@media only screen and (max-width: 480px) {

	h1.responsive-txt, .h1.responsive-txt {
		font-size: 18px;
		line-height: 1.5em;
	}

	h2.responsive-txt, .h2.responsive-txt {
		font-size: 16px;
		line-height: 25px;
	}

}

/* Typographic styles */
.italic, em {
	font-style: italic;
}

.bold, b, strong {
	font-weight: bold;
	font-weight: 600;
}

.thin {
	font-weight: normal;
	font-weight: 300;
}

.x-thin {
	font-weight: normal;
	font-weight: 100;
}

.serif {
	font-family: 'Lora', Georgia, serif;
	font-weight: normal;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.uber {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Text colors */
.text-color,
.text-color h1,
.text-color h2,
.text-color h3,
.text-color h4,
.text-color h5,
.text-color h6,
.text-color p {
	color: #D4BCA1;
}

.text-light,
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light p {
	color: #999999;
}

.text-dark,
.text-dark h1,
.text-dark h2,
.text-dark h3,
.text-dark h4,
.text-dark h5,
.text-dark h6,
.text-dark p {
	color: #222222;
}

.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p {
	color: #ffffff;
}

.bg-color {
	background: #D4BCA1;
}

.bg-light {
	background: #999999;
}

.bg-dark {
	background: #222222;
}

.bg-grey {
	background: #f5f5f5;
}

.bg-white {
	background: #ffffff;
}

/* Dropcap */
.dropcap {
	float: left;
	color: #222222;
	font-size: 50px;
	line-height: 50px;
	padding-right: 8px;
	padding-left: 3px;
}

/* Quotes */
blockquote {
	font-family: 'Lora', Georgia, serif;
	font-style: italic;
	font-weight: normal;
	font-weight: 400;
	font-size: 1.25em;
	padding: 25px;
	background: #f7f7f7;
	border-left: 2px solid #222222;
	margin-bottom: 25px;
}

blockquote small {
	display: block;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 0.75em;
	font-weight: normal;
	font-weight: 400;
	font-style: normal;
}

blockquote small:before {
	content: '\2014 \00A0';
}

q {
	quotes: "\"" "\"" """ """;
}

q:before {
	content: '\201C';
}

q:after {
	content: '\201D';
}

/* Buttons */
/* Buttons styling */
.btn,
button,
input[type="submit"] {
	-webkit-appearance: none;
	display: inline-block;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 24px;
	padding: 12px 24px;
	color: #ffffff;
	background: #222222;
	text-decoration: none;
	-webkit-border-radius: 25px;
			border-radius: 25px;
}

.no-touch a.btn:hover,
button:hover,
.no-touch input[type="submit"]:hover,
.no-touch a .icon:hover {
	color: #ffffff;
	background: #111111;
	text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
a i:hover {
	cursor: pointer;
}

/* Icon inside a button */
.btn > i {
	font-size: 14px;
	margin-right: 0.5em;
}

/* Button outline style */
.btn.outline {
	color: #222222;
	background: none;
	border: 2px solid #eeeeee;
	padding: 10px 23px;
}

.no-touch a.btn.outline:hover {
	color: #ffffff;
	background: #111111;
	border-color: #111111;
	text-decoration: none;
}

/* Button colors */
.btn.color {
	background: #D4BCA1;
}

.btn.outline.color {
	color: #D4BCA1;
	background: none;
	border-color: #D4BCA1;
}

.btn.light {
	color: #ffffff;
	background: #cccccc;
	background: rgba(255,255,255,0.3);
}

.btn.outline.light {
	color: #ffffff;
	background: none;
	border-color: #cccccc;
	border-color: rgba(255,255,255,0.3);
}

.btn.dark {
	color: #222222;
	background: #aaaaaa;
	background: rgba(17,17,17,0.3);
}

.btn.outline.dark {
	color: #222222;
	background: none;
	border-color: #aaaaaa;
	border-color: rgba(17,17,17,0.3);
}

.btn.white {
	color: #222222;
	background: #ffffff;
}

.btn.outline.white {
	color: #ffffff;
	background: none;
	border-color: #ffffff;
}

.btn.black {
	color: #ffffff;
	background: #222222;
}

.btn.outline.black {
	color: #222222;
	background: none;
	border-color: #222222;
}

/* Buttons reset */
button,
input[type="submit"] {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
}

input[type="submit"] {
	border: 0;
	width: auto;
}

/* Fixing the broken lineheight model in FF */
input::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
	margin-top: 5px; 
	margin-bottom: 5px; 
}

@-moz-document url-prefix() { 
	input[type="submit"] {
		line-height: 15px;
	}
}

/* Lists */
.ol {
	list-style-type: decimal-leading-zero;
	list-style-position: outside;
	margin-left: 2em;
	margin-bottom: 25px;
}

.ol ol,
.ul ol {
	list-style-type: decimal-leading-zero;
	list-style-position: outside;
}

.ul {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 1em;
	margin-bottom: 25px;
}

.ol ul,
.ul ul {
	list-style-type: disc;
	list-style-position: outside;
}

.ol ol,
.ol ul,
.ul ol,
.ul ul {
	margin-left: 2em;
}

/* Simple icons to use in a row */
.row-icons i {
	font-size: 14px;
	text-align: center;
	line-height: 28px;
	width: 30px;
	height: 30px;
	color: #aaaaaa;
	border: 1px solid #eeeeee;
	display: inline-block;
	margin-left: 3px;
	-webkit-border-radius: 15px;
			border-radius: 15px;
}

.no-touch .row-icons i:hover {
	color: #ffffff;
	background: #D4BCA1;
	border-color: #D4BCA1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Icon list */
.icon-list {
	display: block;
}

.icon-list i {
	float: left;
	font-size: 24px;
	color: #cccccc;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.il-text {
	padding-left: 45px;
}

.il-text hr {
	text-align: left;
	display: block;
	width: 30px;
	height: 2px;
	background: #dddddd;
	margin: 15px 0;
}

.no-touch .icon-list:hover i {
	color: #D4BCA1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

@media only screen and (max-width: 480px) {

	.center-small .icon-list i {
		float: none;
		margin-bottom: 10px;
	}

	.center-small .il-text {
		padding-left: 0;
	}

	.center-small .il-text hr {
		text-align: center;
		margin: 15px auto;
	}

}

/* Points list */
ul.points li:before {
	font-family: 'FontAwesome';
	font-size: 14px;
	line-height: 25px;
	content: '\f00c';
	color: #aaaaaa;
	display: inline-block;
	float: left;
	margin-left: -25px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

ul.points li {
	text-align: left;
	display: block;
	margin-left: 25px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch ul.points li:hover:before {
	color: #D4BCA1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Random icons list */
ul.random li i {
	font-size: 14px;
	line-height: 25px;
	color: #aaaaaa;
	display: inline-block;
	float: left;
	margin-left: -25px;
}

ul.random li {
	text-align: left;
	display: block;
	margin-left: 25px;
}

/* Circle icons list */
ul.circle li i {
	font-size: 14px;
	text-align: center;
	line-height: 28px;
	width: 30px;
	height: 30px;
	color: #aaaaaa;
	background: transparent;
	border: 1px solid #eeeeee;
	display: inline-block;
	float: left;
	margin-left: -40px;
	-webkit-border-radius: 15px;
			border-radius: 15px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

ul.circle li {
	text-align: left;
	display: block;
	line-height: 28px;
	padding-left: 40px;
	margin-bottom: 10px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch ul.circle li:hover i {
	color: #ffffff;
	background: #D4BCA1;
	border-color: #D4BCA1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Add margin below list items */
ul.li-bottom li {
	margin-bottom: 25px;
}

ul.li-bottom li:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 480px) {

	ul.li-bottom li:last-child {
		margin-bottom: 5px;
	}

}

/* Headers */
.header {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

/* Header with centered content */
.header-container {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	width: 100%;
	max-width: 740px;
	min-width: 300px;
	display: inline-block;
	padding: 20px;
	text-align: center;
	zoom: 1;
}

.z-fix .header-container {
	z-index: 60;
}

/* Subheader */
.subheader {
	position: relative;
	height: 480px;
}

.header .btn,
.subheader .btn {
	margin: 40px 10px 0;
}

@media only screen and (max-width: 480px) {

	.subheader {
		height: 320px;
	}

	.header .btn,
	.subheader .btn {
		margin: 25px 5px 0;
	}

}

/* Arrow down button to use on headers */
a.arrow-down {
	display: inline-block;
	position: absolute;
	bottom: -75px;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	height: 50px;
	text-align: center;
	font-size: 28px;
	color: #ffffff;
	border-top: 3px solid #ffffff;
}

.no-touch a.arrow-down:hover {
	color: #ffffff;
	border-top: 3px solid #ffffff;
}

/* Background image */
.bg-img {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
	background-position: center center;
}

/* Fixed backgrounds only on non-touch devices */
.no-touch .bg-img.fixed {
	background-attachment: fixed;
}

.touch .bg-img.fixed {
	background-attachment: scroll;
}

/* Background images */
.bg-one {
	background-image: url('../images/background.jpg');
}

.bg-two {
	background-image: url('../images/background.jpg');
}

.bg-three {
	background-image: url('../images/background.jpg');
}

.bg-four {
	background-image: url('../images/background.jpg');
}

.bg-five {
	background-image: url('../images/background.jpg');
}

/* Background images for large high resolution screens */
@media
only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-width: 1025px) and (	min--moz-device-pixel-ratio: 2),
only screen and (min-width: 1025px) and (	  -o-min-device-pixel-ratio: 2/1),
only screen and (min-width: 1025px) and (		 min-device-pixel-ratio: 2),
only screen and (min-width: 1025px) and (				 min-resolution: 192dpi),
only screen and (min-width: 1025px) and (				 min-resolution: 2dppx) {

	.bg-one {
		background-image: url('../images/background_1.jpg');
	}

	.bg-two {
		background-image: url('../images/background_1.jpg');
	}

	.bg-three {
		background-image: url('../images/background_1.jpg');
	}

	.bg-four {
		background-image: url('../images/background_1.jpg');
	}

	.bg-five {
		background-image: url('../images/background_1.jpg');
	}

}

/* Title */
.title {
	text-align: center;
	margin-bottom: 75px;
}

.title h1,
.title h2 {
	font-size: 16px;
	line-height: 25px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #cccccc;
	margin-bottom: 0;
}

.title h1:before,
.title h2:before {
	content:'';
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 4px;
	width: 5px;
	height: 5px;
	background: #dddddd;
}

.title h1:after,
.title h2:after {
	content:'';
	display: inline-block;
	margin-left: 15px;
	margin-bottom: 4px;
	width: 5px;
	height: 5px;
	background: #dddddd;
}

.title h3 {
	font-family: 'Lora', Georgia, serif;
	font-weight: normal;
	font-weight: 400;
	font-size: 30px;
	line-height: 45px;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 0;
}

.title h4 {
	font-family: 'Lora', Georgia, serif;
	font-weight: normal;
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0;
	text-transform: none;
	color: #aaaaaa;
}

@media only screen and (max-width: 768px) {

	.title {
		margin-bottom: 50px;
	}

	.title h1,
	.title h2 {
		font-size: 13px;
	}

	.title h1:before,
	.title h2:before {
		margin-right: 10px;
		margin-bottom: 3px;
		width: 4px;
		height: 4px;
	}

	.title h1:after,
	.title h2:after {
		margin-left: 10px;
		margin-bottom: 3px;
		width: 4px;
		height: 4px;
	}

	.title h3 {
		font-size: 18px;
		line-height: 30px;
	}

	.title h4 {
		font-size: 16px;
		line-height: 25px;
	}

}

/* Horizontal rulers */
hr.divider {
	background: #eeeeee;
	width: 100%;
	height: 2px;
}

hr.small {
	display: block;
	width: 30px;
	height: 2px;
	background: #dddddd;
	margin: 15px 0;
	text-align: left;
}

.center-small hr.small {
	margin: 15px 0;
	text-align: left;
}

.zigzag {
	background: -webkit-linear-gradient(135deg, #ffffff 33%, transparent 33%) -8px 0, -webkit-linear-gradient(225deg, #ffffff 33%, transparent 33%) -8px 0, -webkit-linear-gradient(315deg, #ffffff 33%, transparent 33%), -webkit-linear-gradient(45deg, #ffffff 33%, transparent 33%);
	background: -moz-linear-gradient(135deg, #ffffff 33%, transparent 33%) -8px 0, -moz-linear-gradient(225deg, #ffffff 33%, transparent 33%) -8px 0, -moz-linear-gradient(315deg, #ffffff 33%, transparent 33%), -moz-linear-gradient(45deg, #ffffff 33%, transparent 33%);
	background: -ms-linear-gradient(135deg, #ffffff 33%, transparent 33%) -8px 0, -ms-linear-gradient(225deg, #ffffff 33%, transparent 33%) -8px 0, -ms-linear-gradient(315deg, #ffffff 33%, transparent 33%), -ms-linear-gradient(45deg, #ffffff 33%, transparent 33%);
	background: -o-linear-gradient(135deg, #ffffff 33%, transparent 33%) -8px 0, -o-linear-gradient(225deg, #ffffff 33%, transparent 33%) -8px 0, -o-linear-gradient(315deg, #ffffff 33%, transparent 33%), -o-linear-gradient(45deg, #ffffff 33%, transparent 33%);
	background: linear-gradient(135deg, #ffffff 33%, transparent 33%) -8px 0, linear-gradient(225deg, #ffffff 33%, transparent 33%) -8px 0, linear-gradient(315deg, #ffffff 33%, transparent 33%), linear-gradient(45deg, #ffffff 33%, transparent 33%);
	background-size: 16px 16px;
	background-color: #D4BCA1;
	display: block;
	margin: 40px auto;
	width: 64px;
	height: 16px;
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		 -o-transform: rotate(180deg);
			transform: rotate(180deg);
}

.touch .zigzag {
	background: #D4BCA1;
	height: 3px;
}

@media only screen and (max-width: 768px) {

	.zigzag {
		margin: 25px auto;
	}

}

/* Center text on small devices */
@media only screen and (max-width: 480px) {

	.center-small {
		text-align: center;
	}

	.center-small hr.small {
		margin: 15px auto;
		text-align: center;
	}

}

/* Sections */
.section {
	padding-top: 100px;
	padding-bottom: 100px;
}

.section-grey {
	padding-top: 100px;
	padding-bottom: 100px;
	background: #f5f5f5;
}

.section-white {
	padding-top: 100px;
	padding-bottom: 100px;
	background: #ffffff;
}

.section-mb-fix {
	padding-bottom: 40px;
}

@media only screen and (max-width: 1024px) {

	.section-mb-fix {
		padding-bottom: 60px;
	}

}

@media only screen and (max-width: 768px) {

	.section,
	.section-grey,
	.section-white {
		padding-top: 75px;
		padding-bottom: 75px;
	}

	.section-mb-fix {
		padding-bottom: 45px;
	}

}

@media only screen and (max-width: 480px) {

	.section,
	.section-grey,
	.section-white {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.section-mb-fix {
		padding-bottom: 30px;
	}

}


/* ==================== 02. Sidebar menu ==================== */
.menu-left,
.menu-right {
	position: fixed;
	top: 0;
	width: 280px;
	height: 100%;
	z-index: 61;
	-webkit-transform: translate3d(0,0,0);
}

.menu-left {
	left: -220px;
}

.menu-right {
	right: -220px;
}

.menu-right.menu-open {
	right: 0px;
}

.menu-left.menu-open {
	left: 0px;
}

/* The menu wrap with all the content inside */
.menu-wrap {
	position: absolute;
	top: 0;
	left: 60px;
	background: #222222;
	width: 220px;
	height: 100%;
	text-align: left;
}

.menu-left .menu-wrap {
	left: 0;
}

/* The logo */
.menu-wrap .logo {
	font-size: 16px;
	font-weight: bold;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 30px 25px;
}

.no-touch .menu-wrap .logo a:hover {
	color: #D4BCA1;
}

.menu-wrap img.logo {
	margin: 20px 25px;
	max-width: 150px;
}

/* Menu items */
.menu-items {
	margin: auto 25px;
}

.menu-items a  {
	display: block;
	color: #777777;
	font-size: 11px;
	font-weight: bold;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.no-touch .menu-items a:hover {
	color: #ffffff;
}

/* Icons inside the menu */
.menu-icons {
	padding: 25px 10px;
	margin-top: 25px;
	border-top: 1px dotted #444444;
}

.menu-icons i  {
	float: left;
	display: inline-block;
	margin: 2px;
	width: 40px;
	height: 40px;
	line-height: 39px;
	text-align: center;
	font-size: 14px;
	color: #777777;
	border: 1px solid #222222;
	-webkit-border-radius: 20px;
			border-radius: 20px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .menu-icons i:hover {
	color: #ffffff;
	border: 1px solid #444444;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Close button */
.menu-left .menu-close {
	display: none;
}

.menu-close {
	cursor: pointer;
	display: block;
	position: absolute;
	top: 20px;
	right: 5px;
	font-size: 16px;
	color: #777777;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .menu-close:hover {
	color: #ffffff;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Push the body to the right or left after clicking the menu toggle */
.body-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.body-push-toright {
	left: 220px;
}

.body-push-toleft {
	left: -220px;
}

.menu-right,
.menu-left,
.body-push {
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}

/* The menu toggle */
#toggle-left i,
#toggle-right i {
	cursor: pointer;
}

#toggle-left,
#toggle-right {
	position: absolute;
	top: 20px;
	display: block;
	text-align: center;
	font-size: 14px;
	color: #cccccc;
	color: rgba(0,0,0,0.25);
	border: 2px solid #cccccc;
	border: 2px solid rgba(0,0,0,0.25);
	width: 40px;
	height: 40px;
	line-height: 36px;
	cursor: pointer;
	z-index: 62;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

#toggle-left {
	right: 0;
}

#toggle-right {
	left: 0;
}

.no-touch #toggle-left:hover,
.no-touch #toggle-right:hover {
	color: #222222;
	color: rgba(0,0,0,0.9);
	border-color: #222222;
	border-color: rgba(0,0,0,0.9);
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

#toggle-left.toggle-light,
#toggle-right.toggle-light {
	color: rgba(255,255,255,0.25);
	border: 2px solid rgba(255,255,255,0.25);
}

.no-touch #toggle-left.toggle-light:hover,
.no-touch #toggle-right.toggle-light:hover {
	color: rgba(255,255,255,0.9);
	border-color: rgba(255,255,255,0.9);
}

/* Scrollable menu on smaller devices */
@media only screen and (max-height: 480px) {

	.menu-wrap {
		overflow-y: scroll;
		overflow-x: hidden;
	}

}

/* White menu */
.menu-left .menu-wrap.menu-white {
	border-right: 2px solid #eeeeee;
}

.menu-right .menu-wrap.menu-white {
	border-left: 2px solid #eeeeee;
}

.menu-wrap.menu-white {
	background: #ffffff;
}

.menu-wrap.menu-white .logo {
	color: #222222;
}

.no-touch .menu-wrap.menu-white .logo a:hover {
	color: #D4BCA1;
}

.menu-white .menu-items a  {
	color: #999999;
}

.no-touch .menu-white .menu-items a:hover {
	color: #222222;
}

.menu-white .menu-icons {
	border-top: 1px dotted #dddddd;
}

.menu-white .menu-icons i  {
	color: #999999;
	border: 1px solid #ffffff;
}

.no-touch .menu-white .menu-icons i:hover {
	color: #222222;
	border: 1px solid #dddddd;
}

.menu-white .menu-close {
	color: #999999;
}

.no-touch .menu-white .menu-close:hover {
	color: #222222;
}


/* ==================== 03. Horizontal menu ==================== */
.menu-horizontal {
	position: fixed;
	top: 0;
	width: 100%;
	background: #222222;
	z-index: 120;
	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.07);
			box-shadow: 0 2px 0 0 rgba(0,0,0,0.07);
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
		-ms-transition: all .3s;
		 -o-transition: all .3s;
			transition: all .3s;
}

/* Showing and hiding the menu */
.mh-show {
	filter: alpha(opacity=100);
	opacity: 100;
	visibility: visible;
}

.mh-hide {
	filter: alpha(opacity=0);
	opacity: 0;
	visibility: hidden;
}

/* Typographic logo for the horizontal menu */
.mh-logo h1 {
	float: left;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 40px;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 10px;
	margin-bottom: 0;
}

.mh-logo h1 a {
	text-decoration: none;
	color: #ffffff;
}

.no-touch .mh-logo h1 a:hover {
	color: #D4BCA1;
}

/* Image logo for the horizontal menu */
.mh-logo img {
	float: left;
	text-align: left;
	width: auto;
	max-height: 41px;
	margin: 9px 10px 0 0;
}

/* Hiding and showing the submenu items */
.menu ul ul {
	display: none;
}

.menu ul li:hover > ul {
	display: block;
}

/* Styling for the main menu items */
.menu {
	float: right;
	text-align: left;
	font-size: 11px;
	font-weight: bold;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 25px;
	color: #777777;
}

.menu ul {
	position: relative;
	display: table-cell;
	list-style: none;
}

.menu ul:after {
	content: "";
	clear: both;
	display: block;
}

.menu ul li {
	float: left;
}

/* Hover effect */
.no-touch .menu ul li:hover a {
	color: #ffffff;
}

.menu ul li a {
	display: block;
	padding: 17px 20px 18px;
	color: #777777;
	text-decoration: none;
}

/* Less padding on smaller screens */
@media only screen and (max-width: 1024px){

	.menu ul li a {
		padding: 15px 10px;
	}

}

/* Styling for the sub menu items */
.menu ul ul {
	position: absolute;
	top: 100%;
	background: #222222;
	padding: 0 0 10px 0;
	min-width: 175px;
	-webkit-box-shadow: 0 1px 0 1px rgba(0,0,0,0.07);
			box-shadow: 0 1px 0 1px rgba(0,0,0,0.07);
}

.menu ul ul li {
	float: none; 
	position: relative;
}

.menu ul ul li a {
	padding: 10px 20px;
	color: #777777!important;
}

.no-touch .menu ul ul li a:hover {
	color: #ffffff!important;
}

.menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Hiding the toggle */ 
#toggle,
.toggle {
	display: none;
}

/* Responsive settings for the menu */
@media only screen and (max-width: 768px) {

	/* Typographic logo */
	.mh-logo h1 {
		font-size: 16px;
		line-height: 30px;
		margin-top: 10px;
	}

	/* Image logo */
	.mh-logo img {
		max-height: 30px;
		margin: 10px 10px 0 0;
	}

	/* The toggle */
	.toggle {
		display: block;
		position: relative;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		color: #777777;
		float: right;
		font-family: 'FontAwesome';
		text-align: center;
		font-size: 14px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		-webkit-transition: all .2s;
		   -moz-transition: all .2s;
			-ms-transition: all .2s;
			 -o-transition: all .2s;
				transition: all .2s;
	}

	.no-touch .toggle:hover {
		color: #ffffff;
		-webkit-transition: all .2s;
		   -moz-transition: all .2s;
			-ms-transition: all .2s;
			 -o-transition: all .2s;
				transition: all .2s;
	}

	.toggle:after {
		content: '\f0c9';
	}

	#toggle:checked ~ .menu {
		display: block;
		filter: alpha(opacity=100);
		opacity: 1;
	}

	#toggle:checked + .toggle:after {
		content: '\f077';
	}

	/* The menu items */
	.menu {
		display: none;
		filter: alpha(opacity=0);
		opacity: 0;
		margin-top: 50px;
		width: 100%;
		position: absolute;
		right: 0;
		height: auto;
		text-align: left;
		background: #222222;
		padding-bottom: 10px;
		padding-left: 20px;
		-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.07);
				box-shadow: 0 2px 0 0 rgba(0,0,0,0.07);
	}

	.menu ul li {
		display: block;
		width: 100%;
		line-height: 30px;
		margin: 0;
	}

	.menu ul li a {
		display: block;
		width: 100%;
		padding: 0;
	}

	/* Styling for the sub menu items */
	.menu ul ul {
		display: block;
		position: relative;
		top: 0;
		left: 10px;
		background: none;
		padding: 0;
		-webkit-box-shadow: none;
				box-shadow: none;
	}

	.menu ul ul li a {
		padding: 0;
	}

	.menu ul ul ul {
		position: relative;
		top: 0;
		left: 20px;
	}

}

@media only screen and (max-width: 480px) {

	.menu {
		padding-left: 10px;
	}

	.toggle {
		margin-right: -10px;
	}

}

/* White menu */
.menu-horizontal.menu-white {
	background: #ffffff;
}

.menu-white .mh-logo h1,
.menu-white .mh-logo h1 a {
	color: #222222;
}

.no-touch .menu-white .mh-logo h1 a:hover {
	color: #D4BCA1;
}

.menu-white .menu {
	color: #999999;
}

.no-touch .menu-white .menu ul li:hover a {
	color: #222222;
}

.menu-white .menu ul li a {
	color: #999999;
}

.menu-white .menu ul ul {
	background: #ffffff;
}

.menu-white .menu ul ul li a {
	color: #999999!important;
}

.no-touch .menu-white .menu ul ul li a:hover {
	color: #222222!important;
}

@media only screen and (max-width: 768px) {

	.menu-white .toggle {
		color: #999999;
	}

	.no-touch .menu-white .toggle:hover {
		color: #222222;
	}

	.menu-white .menu {
		background: #ffffff;
	}

}


/* ==================== 04. Home ==================== */
.home {
	position: relative;
	width: 100%;
	height: 100%;
}

.home .btn {
	margin: 40px 10px 0;
}

@media only screen and (max-width: 480px) {

	.home .btn {
		margin: 25px 5px 0;
	}

}

/* The play button */
a.btn-play {
	cursor: pointer;
	display: block;
	margin: 40px auto 0;
	width: 70px;
	height: 70px;
	line-height: 66px;
	text-indent: 2px;
	font-size: 28px;
	color: #ffffff;
	border: 3px solid #ffffff;
	border: 3px solid rgba(255,255,255,0.25);
	-webkit-border-radius: 35px;
			border-radius: 35px;
}

.no-touch a.btn-play:hover {
	color: #ffffff;
	border-color: #ffffff;
}

.text-black a.btn-play {
	color: #222222;
	border: 3px solid #222222;
	border: 3px solid rgba(0,0,0,0.25);
}

.no-touch .text-black a.btn-play:hover {
	color: #222222;
	border-color: #222222;
}

@media only screen and (max-width: 480px) {

	a.btn-play {
		margin: 25px auto 0;
		width: 50px;
		height: 50px;
		line-height: 46px;
		font-size: 20px;
		border: 2px solid #ffffff;
		border: 2px solid rgba(255,255,255,0.25);
		-webkit-border-radius: 25px;
				border-radius: 25px;
	}
	
	.text-black a.btn-play {
		border: 2px solid #222222;
		border: 2px solid rgba(0,0,0,0.25);
	}

}

/* Video controls below the video */
.video-controls {
	filter: alpha(opacity=0);
	opacity: 0;
	visibility: hidden;
	position: absolute;
	width: 100px;
	height: 40px;
	bottom: 25px;
	left: 50%;
	margin-left: -50px;
	text-align: center;
}

@media only screen and (max-width: 480px) {

	.video-controls {
		bottom: 10px;
	}

}

.video-controls i {
	display: inline-block;
	margin: auto 3px;
	width: 40px;
	height: 40px;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	line-height: 36px;
	padding: 0;
	color: #ffffff;
	background: none;
	border: 2px solid #ffffff;
	border: 2px solid rgba(255,255,255,0.25);
	-webkit-border-radius: 20px;
			border-radius: 20px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .video-controls i:hover {
	cursor: pointer;
	color: #ffffff;
	background: none;
	border-color: #ffffff;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}


/* ==================== 05. Intro ==================== */
.intro .zigzag {
	margin: 40px auto 0;
}


/* ==================== 06. Services ==================== */
.service-item {
	display: block;
}

.service-item i {
	font-size: 28px;
	color: #cccccc;
	margin-bottom: 15px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .service-item:hover > i {
	color: #D4BCA1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .service-item:hover a.read-more {
	color: #222222;
}


/* ==================== 07. Pricing boxes ==================== */
.pricing-box {
	background: #ffffff;
	border: 2px solid #eeeeee;
	padding: 40px 30px;
	text-align: center;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.price p {
	font-size: 72px;
	line-height: 80px;
	margin: 10px auto 40px;
	color: #aaaaaa;
}

.price sub,
.price sup {
	font-size: 16px;
	color: #aaaaaa;
}

.price sup {
	vertical-align: 22px;
	margin-right: 5px;
}

.price sub {
	vertical-align: 4px;
	margin-left: 5px;
	color: #bbbbbb;
}

.pricing-box hr {
	border: none;
	height: 2px;
	background: #eeeeee;
}

.pricing-box ul {
	margin-top: 40px;
	margin-bottom: 40px;
}

.no-touch .pricing-box:hover .btn {
	border-color: #222222;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}


/* ==================== 08. Process ==================== */
.process .title {
	margin-bottom: 50px;
}

.process-steps {
	text-align: center;
	margin-bottom: 50px;
}

.process-steps p.digit {
	display: block;
	margin: 0 auto -75px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	color: #dddddd;
	font-size: 90px;
}

.process-steps h3 {
	line-height: 50px;
	margin-bottom: 50px;
}

.process-icons {
	text-align: center;
}

.process-icons a {
	position: relative;
	display: inline-block;
}

.process-icons a.active:before {
	position: absolute;
	top: -9px;
	left: 50%;
	margin-left: -8px;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #222222 transparent;
}

.process-icons i {
	display: inline-block;
	margin: -2px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 28px;
	color: #cccccc;
	border-top: 2px solid #eeeeee;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .process-icons a:hover > i,
.process-icons a.active > i {
	color: #222222;
	border-color: #222222;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

@media only screen and (max-width: 768px) {

	.process .title {
		margin-bottom: 25px;
	}

	.process-steps {
		margin-bottom: 50px;
	}

	.process-icons i {
		width: 75px;
		height: 75px;
		line-height: 75px;
	}

}

@media only screen and (max-width: 480px) {

	.process-steps {
		margin-bottom: 25px;
	}

	.process-icons i {
		width: 50px;
		height: 60px;
		line-height: 60px;
		font-size: 22px;
	}

}


/* ==================== 09. Work ==================== */
.work-item {
	position: relative;
}

.work-item .wi-txt {
	display: block;
	position: absolute;
	top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	color: #ffffff;
	filter: alpha(opacity=0);
	opacity: 0;
}

.work-item b {
	display: block;
	font-size: 16px;
	font-weight: bold;
	font-weight: 700;
}

.work-item em {
	display: block;
	font-family: 'Lora', Georgia, serif;
	font-style: normal;
}

.work-item .wi-view {
	display: block;
	position: absolute;
	bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	color: #ffffff;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.work-item .wi-view i {
	font-size: 14px;
	color: transparent;
	margin-left: 1px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .work-item .wi-view:hover i {
	color: #ffffff;
	margin-left: 10px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.work-item .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #222222;
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .work-item a:hover > .wi-txt,
.no-touch .work-item a:hover > .wi-view {
	display: block;
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .work-item a:hover > .overlay {
	filter: alpha(opacity=75);
	opacity: 0.75;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

@media only screen and (max-width: 480px) {

	.work-item .wi-txt,
	.work-item .wi-view,
	.work-item .overlay,
	.no-touch .work-item a:hover > .wi-txt,
	.no-touch .work-item a:hover > .wi-view,
	.no-touch .work-item a:hover > .overlay {
		display: none;
	}

}


/* ==================== 10. Work subpages ==================== */

@media only screen and (max-width: 768px) {

	.project-slider {
		margin-bottom: 50px;
	}

}

/* Styles for the mixitup filter */
#mix-container .mix {
	display: none;
}

#mix-container img {
	width: auto;
	height: auto;
	min-width: 2px;
	min-height: 2px;
}

.filter {
	cursor: pointer;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 24px;
	padding: 10px 23px;
	color: #222222;
	background: transparent;
	border: 2px solid transparent;
	text-decoration: none;
	-webkit-border-radius: 25px;
			border-radius: 25px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .filter:hover {
	border-color: #eeeeee;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.filter.active {
	border-color: #eeeeee;
}

.project-filters {
	position: relative;
	top: -20px;
}

/* Thumbnails */
.thumb {
	position: relative;
}

.thumb .plus {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -40px;
	margin-left: -40px;
	display: block;
	width: 80px;
	height: 80px;
	line-height: 78px;
	text-align: center;
	font-size: 100px;
	font-weight: normal;
	font-weight: 100;
	color: #ffffff;
	border: 2px solid rgba(255,255,255,0.25);
	-webkit-border-radius: 40px;
			border-radius: 40px;
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.thumb .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #222222;
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .thumb a:hover > .plus {
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .thumb a:hover > .overlay {
	filter: alpha(opacity=75);
	opacity: 0.75;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Project navigtaion */
.project-nav {
	position: relative;
	padding-top: 25px;
	padding-bottom: 25px;
	background: #222222;
	border-bottom: 2px solid #444444;
	text-align: center;
}

.project-prev,
.project-back,
.project-next {
	display: inline-block;
	text-align: center;
	font-size: 14px;
	color: #444444;
	border: 2px solid #444444;
	width: 40px;
	height: 40px;
	line-height: 36px;
	cursor: pointer;
	margin: 0 -1.5px;
}

.project-prev {
	border-right: 2px solid #222222;
}

.project-next {
	border-left: 2px solid #222222;
}

.no-touch .project-prev:hover,
.no-touch .project-back:hover,
.no-touch .project-next:hover {
	color: #ffffff;
	border-color: #ffffff;
	z-index: 24;
}


/* ==================== 11. Call to action ==================== */
.cta .btn {
	margin: 40px 10px 0;
}

@media only screen and (max-width: 480px) {

	.cta .btn {
		margin: 25px 5px 0;
	}

}


/* ==================== 12. about ==================== */
.about-header {
	margin-bottom: 100px;
}

.about-text {
	text-align: center;
	margin-bottom: 50px;
}

.employee img {
	margin-bottom: 25px;
}

.employee-icon i {
	font-size: 14px;
	color: #bbbbbb;
	margin-right: 10px;
}

/* about me */
.about-me-circle {
	position: relative;
	top: -68px;
	left: 50%;
	margin-left: -68px;
	margin-bottom: -120px;
	width: 136px;
	height: 136px;
	background: #ffffff;
	-webkit-border-radius: 68px;
			border-radius: 68px;
}

.about-me-avatar {
	position: absolute;
	top: 8px;
	left: 8px;
	max-width: 120px;
	max-height: auto;
	-webkit-border-radius: 60px;
			border-radius: 60px;
}

/* Polaroids */
.polaroids {
	position: relative;
}

.polaroids img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 10px solid #ffffff;
}

.polaroid-a {
	position: relative;
	width: 75%;
	height: 75%;
	z-index: 22;
	-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.5);
			box-shadow: 0 1px 4px 0 rgba(0,0,0,0.5);
}

.no-touch .polaroid-a:hover {
	-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.8);
			box-shadow: 0 1px 4px 0 rgba(0,0,0,0.8);
}

.polaroid-b {
	position: relative;
	margin-top: -90%;
	margin-left: 25%;
	width: 75%;
	height: 75%;
	z-index: 21;
	-webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.4);
			box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.4);
	-webkit-transform: rotate(5deg);
	   -moz-transform: rotate(5deg);
	    -ms-transform: rotate(5deg);
		 -o-transform: rotate(5deg);
			transform: rotate(5deg);
}

.no-touch .polaroid-b:hover {
	-webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.8);
			box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.8);
}

.polaroid-a,
.no-touch .polaroid-a:hover,
.polaroid-b,
.no-touch .polaroid-b:hover {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

@media only screen and (max-width: 768px) {

	.about-header {
		margin-bottom: 75px;
	}

	.about-text {
		margin-bottom: 25px;
	}

}


/* ==================== 13. Quotes ==================== */
.quotes {
	text-align: center;
}

.quotes p {
	margin-top: 25px;
	margin-bottom: 0;
}

.quotes b {
	color: #222222;
}

.quote-avatars {
	margin-top: 35px;
	text-align: center;
}

.quote-avatars img {
	margin: 0 3px;
	width: auto;
	height: auto;
	max-width: 60px;
	max-height: 60px;
	-webkit-border-radius: 30px;
			border-radius: 30px;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .quote-avatars a:hover > img,
.quote-avatars a.active > img {
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}


/* ==================== 14. Contact ==================== */
.contact {
	position: relative;
	padding-top: 80px;
	padding-bottom: 80px;
	background: #222222;
}

/* Contact links */
.c-links {
	margin-bottom: 35px;
}

.c-links h3,
.c-links a {
	color: #ffffff;
}

.no-touch .c-links a:hover {
	color: #D4BCA1;
}

/* Contact details */
.c-details {
	margin-bottom: 50px;
}

.c-details p {
	color: #888888;
	margin-bottom: 0;
}

.c-details p.serif {
	color: #ffffff;
}

.c-details a {
	color: #888888;
}

.no-touch .c-details a:hover {
	color: #ffffff;
}

/* Contact icons */
.c-icons i {
	display: inline-block;
	margin: 0 3px;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 39px;
	font-size: 14px;
	color: #888888;
	border: 1px solid #222222;
	-webkit-border-radius: 20px;
			border-radius: 20px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .c-icons i:hover {
	color: #ffffff;
	border: 1px solid #444444;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

/* Form modal */
.c-form-modal {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 700px;
	background: #ffffff;
	padding: 50px;
	text-align: center;
}

/* Form */
.c-form input:not([type]),
.c-form input[type="text"],
.c-form textarea {
	color: #222222;
	border: 1px solid #dddddd;
	background: #ffffff;
	margin-bottom: 10px;
}

.c-form input:not([type]):focus,
.c-form input[type="text"]:focus,
.c-form textarea:focus {
	color: #222222;
	border-color: #444444;
	background: #ffffff;
}

.c-form textarea {
	height: 170px;
}

/* Form feedback */
.error_message {
	text-align: center;
	color: red;
	margin-bottom: 25px;
}

@media only screen and (max-width: 768px) {

	.contact {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.c-links,
	.c-details {
		margin-bottom: 25px;
	}

}

/* Loader image after submitting the form */
.loader {
	display: block;
	width: 32px;
	height: 32px;
	margin: 25px auto 0;
	background: url('../images/loader.gif');
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (	min--moz-device-pixel-ratio: 2),
only screen and (	  -o-min-device-pixel-ratio: 2/1),
only screen and (		 min-device-pixel-ratio: 2),
only screen and (				 min-resolution: 192dpi),
only screen and (				 min-resolution: 2dppx) {

	.loader {
		background: url('../images/loader@2x.gif');
	}

}


/* ==================== 15. Credits and back to top button ==================== */

/* Credits */
.credits {
	padding-top: 25px;
	padding-bottom: 30px;
	
	border-top: 2px solid #444444;
	text-align: center;
}

.credits p {
	margin-bottom: 0;
	color: #999;
	font-size: 15px;
	letter-spacing: 0.1em;
}

.no-touch .credits a:hover {
	color: #444444;
}

/* Back to top button */
a.backtotop {
	position: absolute;
	bottom: 20px;
	display: block;
	text-align: center;
	font-size: 14px;
	color: #444444;
	border: 2px solid #444444;
	width: 40px;
	height: 40px;
	line-height: 36px;
	cursor: pointer;
	z-index: 63;
}

.no-touch a.backtotop:hover {
	color: #D6BEA3;
	border-color: #D6BEA3;
}

a.backtotop.left {
	left: 20px;
}

a.backtotop.right {
	right: 20px;
}

@media only screen and (max-width: 768px) {

	/* Credits */
	.credits {
		padding-bottom: 75px;
	}

	/* Back to top button */
	a.backtotop {
		left: 50%;
		margin-left: -20px;
	}

}


/* ==================== 16. 404 ==================== */
.fourofour {
	position: relative;
	width: 100%;
	height: 100%;
}

p.digits {
	font-size: 160px;
	font-weight: bold;
	font-weight: 700;
	line-height: 160px;
	text-indent: -10px;
}

.fourofour hr {
	width: 100%;
	max-width: 140px;
	height: 8px;
	background: #ffffff;
	margin: 25px auto;
}

.fourofour i {
	display: inline-block;
	margin: auto 3px;
	width: 40px;
	height: 40px;
	font-size: 14px;
	line-height: 36px;
	color: #ffffff;
	background: none;
	border: 2px solid #ffffff;
	border: 2px solid rgba(255,255,255,0.25);
	-webkit-border-radius: 20px;
			border-radius: 20px;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

.no-touch .fourofour i:hover {
	color: #ffffff;
	background: none;
	border-color: #ffffff;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
			transition: all .2s;
}

@media only screen and (max-width: 480px) {

	p.digits {
		font-size: 100px;
		line-height: 100px;
		text-indent: -8px;
	}

	.fourofour hr {
		width: 100%;
		max-width: 100px;
		height: 5px;
	}

}

/* IE */
.ie8 a.read-more:after {
	color: inherit;
	margin-left: 10px;
}

.ie8 .header-container {
	margin-left: -370px;
	margin-top: -150px;
}

.ie8 .zigzag,
.ie9 .zigzag {
	height: 3px;
}

.ie8 .body-push-toright {
	left: 0;
}

.ie8 .body-push-toleft {
	left: 0;
}

.ie8 .work-item .wi-view i {
	color: inherit;
	margin-left: 10px;
}

.titoli{
	 font-size: 24.5px;}
	 
.testi {
	color: #999;
	font-size:15px;}
.ringraziamenti {
	color: #999;
	font-size:15px;
	font-style:italic;}
.titoloni {
	color: #d4bca1;
    font-size: 36px;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-transform: uppercase;}
	
.txt-sponsor {
	color: #999;
	font-size:12px;
	}

                        
.loghi
{
float: left;
margin: 11px;
}

                        
.loghi1
{
float: left;
}