/* ==========================================================================
    Reset
   ========================================================================== */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
		}
	
	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* ==========================================================================
    Generics
   ========================================================================== */


	body {
		background: url("../images/bg.png");
		font-family: Arial, sans-serif;
		font-size: 12px;
		color: #f9fadc;
		margin: 0 0;
		padding: 0 0;
	}
	
	a:link, 
	a:visited {
		color: #15ffaf;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

	img {
		border: none;
	}

	#wrapper {
		background: url("../images/top.png");
		background-repeat: no-repeat;
		background-position: top center;
		width: 100%;
	}

	#container {
		margin: 0 auto;
		width: 960px;
	}

	p {
		line-height: 20px;
	}


/* ==========================================================================
    Header
   ========================================================================== */
   
   
	header {
		height: 400px;
		position: relative;
	}

	#logo {
		width: 180px;
		height: 225px;
		font-family: 'Raleway', Arial, sans-serif;
		font-size: 34px;
		text-align: right;
		padding-top: 66px;
		line-height: 20px;
		float: left;
	}


/* ==========================================================================
    Menu
   ========================================================================== */
   

	nav {
		width: 960px;
		margin-top: 273px;
		float: left;
		position: absolute;
	}

	nav ul {
		width: 960px;
		list-style: none;
		display: block;
		margin: 0 0 0 28px;
		padding: 0;
		font-size: 14px;
		z-index: 5;
		position: absolute;
	}	

	nav ul li {
		background: url("../images/menu-slash.png");
		background-repeat: no-repeat;
		height: 47px;
		display: block;
		white-space: nowrap;
		 float: left; 
		padding-left: 20px;
		margin-left: 105px;
	}

	nav ul li:nth-child(3) {
		margin-left: 55px;
	}

	nav ul li:nth-child(4) {
		margin-left: 45px;
	}

	nav ul li:nth-child(5) {
		margin-left: 45px;
	}

	nav ul li:first-child {
		margin-left: 0px;
		background: none;
		padding-left: 10px;
	}

	#last-child {
		float: right;
		margin-left: 40px;
		margin-right: 62px;
		background: none;
	}

	nav a:link, 
	nav a:visited {
		color: #f9fadc;
		text-decoration: none;
		transition: color 0.1s ease-in 0.1s;
	}

	nav a:hover {
		color: #15ffaf;
	}
	nav ul li a span {display:none;}

	#home {
		background: url("../images/home.png");
		width: 14px;
		height: 14px;
		display: block;
		float: left;
	}

	#home:after {
		background: url("../images/home.png");
		content: "";
		position: absolute;
		width: 14px;
		height: 14px;
		opacity: 0;
		-webkit-transition: opacity 0.2s ease-in 0.1s;
  		-moz-transition: opacity 0.2s ease-in 0.1s;
  		transition: opacity 0.2s ease-in 0.1s;
	}

	#home:hover:after {
		opacity: 1;
		background-position: 0 14px;
	}

	#contact {
		background: url("../images/mail.png");
		width: 24px;
		height: 26px;
		display: block;
		float: left;
	}	

	#contact:after {
		background: url("../images/mail.png");
		content: "";
		position: absolute;
		width: 24px;
		height: 26px;
		opacity: 0;
		-webkit-transition: opacity 0.1s ease-in 0.1s;
  		-moz-transition: opacity 0.1s ease-in 0.1s;
  		transition: opacity 0.1s ease-in 0.1s;
	}

	#contact:hover:after {
		opacity: 1;
		background-position: 0 26px;
	}


/* ==========================================================================
    Content
   ========================================================================== */
   

	#content {
		width: 960px;
		margin: 20px auto;
	}

	section strong {
		font-weight: 700;
	}

	section p {
		margin-bottom: 25px;
	}

	article {
		width: 645px;
		min-height: 300px;
		border-right: #545248 1px solid;
		padding-right: 25px;	
		text-align: left;
		line-height: 22px;
		float: left;
		margin-bottom: 50px;
	}

	article h1 {
		font-family: 'Raleway', Arial, sans-serif;
		font-size: 34px;
		font-weight: 100;
		margin-top: 0;
		margin-bottom: 40px;
		line-height:1.2;
	}

	.row-3 {
		width: 28%;
		float: left;
		padding: 0 15px 0 15px;
	}

	.row-3:first-of-type {
		padding: 0 30px 0 0;
	}

	.row-3:last-child {
		float: right;
	}

	.row-2 {
		width: 45%;
		float: left;
		padding: 0 15px 0 15px;
	}

	.row-2:first-of-type {
		padding: 0 30px 0 0;
	}

	.row-2:last-child {
		float: right;
	}

	.row-1 {
		width: 100%;
		float: left;
		padding: 0 30px 0 0;
	}


	article ul li { 
		list-style-type: disc;
		margin-left: 10px;
	}

	.ul-child li {
		list-style-type: circle;
	}

	.name {
		font-size: 14px;
	}

	.contact-phone {
		font-size: 17px;
	}


/* ==========================================================================
    Contact Box
   ========================================================================== */
   

	aside {
		float: right;
		width: 250px;
		margin-bottom: 50px;
	}

	aside h3 {
		font-family: 'Raleway', Arial, sans-serif;
		font-size: 34px;
		font-weight: 100;
		margin: 0 0 30px 0;
		line-height: 1.2;
	}

	aside input {
		width:calc(100% - 10px);
		height: 28px;
		background: #25221d;
		border: none;
		border-bottom: #3e3931 1px solid;
		margin-bottom: 10px;
		padding-left: 10px;
		font-family: Arial, sans-serif;
		font-size: 12px;
		color: #f9fadc;
	}

	aside textarea {
		width: calc(100% - 10px);
		height: 73px;
		background: #25221d;
		border: none;
		border-bottom: #3e3931 1px solid;
		margin-bottom: 10px;
		padding-left: 10px;
		padding-top: 5px;
		font-family: Arial, sans-serif;
		font-size: 12px;
		color: #f9fadc;
		resize: none;
	}

	aside ul li {
		list-style-type: disc;
		line-height: 20px;
	}

	input {
		color: #d4ceaa
	}

	textarea {
		color: #d4ceaa;
		overflow: hidden;
	}

	input:focus,
	textarea:focus {
		outline: none;
	}

	#buttons {
		width: 75px;
		height: 33px;
		float: right;
		margin: 0;
	}

	#reset {
		width: 33px;
		height: 33px;
		background: url("../images/reset.png");
		border: none;
		margin-right: 10px;
	}

	#reset:hover {
		background-position: 0 33px;
	}	

	#submit {
		width: 32px;
		height: 33px;
		background: url("../images/submit.png");
		border: none;
	}

	#submit:hover {
		background-position: 0 33px;
	}

	em, 
	#form label {
		color: red;
		width: 270px;
		display: block;
		margin-bottom: 10px;
		padding-left: 10px;
		height: 15px;
  		animation: height 1s 1;
  		-webkit-animation: height 1s 1;
  		-moz-animation: height 1s 1;
	}

	@keyframes height {
      from { height: 0px; margin: 0; opacity: 0; }
      to { height: 15px; margin-bottom: 10px; opacity: 1; }
    }

	@-webkit-keyframes height {
      from { height: 0px; margin: 0; opacity: 0; }
      to { height: 15px; margin-bottom: 10px; opacity: 1; }
    }

	aside p {
		text-align: center;
		width: 270px;}




/* ==========================================================================
    Footer
   ========================================================================== */
   

	#footShadow {
		width: 100%;
		height: 20px;
		background: url("../images/foot-shadow.png");
		clear: both;
	}

	footer {
		width: 100%;
		min-height: 260px;
		background: #1f1C18;
		clear: both;
	}

	#foot {
		width: 960px;
		margin: 0 auto;
	}

	#foot-1 {
		width: 80px;
		height: 260px;
		background: url("../images/foot-1.png");
		float: left;
		background-repeat:  no-repeat;
	}

	#up {
		background: url("../images/up.png");
		width: 24px;
		height: 24px;
		display: block;
		margin: 40px 0 0 30px;
	}

	#up:after {
		background: url("../images/up.png");
		content: "";
		position: absolute;
		width: 24px;
		height: 24px;
		opacity: 0;
		-webkit-transition: opacity 0.1s ease-in 0.1s;
  		-moz-transition: opacity 0.1s ease-in 0.1s;
  		transition: opacity 0.1s ease-in 0.1s;
	}

	#up:hover:after {
		opacity: 1;
		background-position: 0 24px;
	}

	#foot {
		background: url("../images/foot-3.png");
		background-repeat: no-repeat;
		background-position: 100% 0;
	}

	#foot-2 {
		width: 220px;
		height: 200px;
		border-left: #2b271f 1px solid;
		border-right: #2b271f 1px solid;
		float: left;
	}

	#foot-2 ul {
		list-style: none;
		margin-left: 30px;
		margin-top: 40px;
		font-size: 13px;
		line-height: 21px;
	}

	#foot-2 a:link, 
	#foot-2 a:visited {
		text-decoration: none;
	}

	#foot-2 a:hover {
		color: #f9fadc;
		transition: color 0.1s ease-in 0.1s;
	}

	#foot-3 {
		width: 650px;
		height: 200px;
		float: left;
	}

	#foot-info {
		margin-top: 40px;
		height: 200px;
		margin-left: 30px;
		color: #d4ceaa;
	}

	#foot-info section {
		height: 200px;
		float: left;
		line-height: 20px;
	}

	#phone {
		float: right;
		margin: 0 -20px 0 0;
	}

	@media screen and (max-width:1024px) {
		#wrapper {width:100%;}
		#container, #foot {width:92%; padding-left:4%; padding-right:4%;}
		nav, #content {width:100%;}
		article {width: 70%; padding-right:4%;}
		aside {width:21%;}
		nav ul {width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0;}
		nav ul li, nav ul li:first-child, nav ul li:nth-child(3), nav ul li:nth-child(4), nav ul li:nth-child(5) {margin:0;}
		#last-child {padding:0; margin:0 0 0 100px;}
		#wrapper {background-position: calc(100% + 190px) 0;}
		#foot-1 {width: 10%;}
		#foot-2 {width: calc(20% - 2px);}
		#foot-3 {width: 70%;}
		.row-2, .row-2:first-of-type {width:48%; padding:0;}
		.row-3:first-of-type, .row-3 {width:30%; padding:0;}
		.row-3:first-of-type {margin-right:5%;}
	}

	@media screen and (max-width:781px) {
		article {width: 60%; padding-right:4%;}
		aside {width:31%;}
		.row-2, .row-2:first-of-type, .row-3:first-of-type, .row-3, .row-3:first-of-type, #foot-1, #foot-2, #foot-3 {width:100%; height:auto; margin:15px 0; padding:0;}
		#foot-info {height:auto;}
		.navigation {z-index:501; margin:0; top:0;}
		.navigation::before {content:" "; position:fixed; top:0; left:0; bottom:0; background-color:rgba(0, 0, 0, 0); transition: background-color 200ms ease;}
		.navigation.show::before {right:0; background-color:rgba(0, 0, 0, 0.4);}
		.navigation .menuIcon {width:25%; height:80px; position: absolute; z-index:501; right:-5vw; cursor:pointer; transition: all .4s ease-in-out;}
		.navigation .menuIcon .square {width:45px; height:20px; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
		.navigation .menuIcon .line {background-color:#f9fadc; display:block; transition:all .4s ease-in-out; position:absolute; height:3px; width:100%;}
		.navigation .menuIcon .line.top {top:0;}
		.navigation .menuIcon .line.middle {top:50%;}
		.navigation .menuIcon .line.bottom {top:100%;}
		.navigation .menuIcon.active {right:0; top:0; transition:all 400ms ease-in-out; background-color:transparent; position: fixed;}
		.navigation .menuIcon.active .line.top, .menuIcon.active .line.bottom {top:50%; background-color:#15ffaf; transition: all .4s ease-in-out;}
		.navigation .menuIcon.active .line.top {transform: rotate(-135deg);}
		.navigation .menuIcon.active .line.middle {opacity:0; transition:.4s ease;}
		.navigation .menuIcon.active .line.bottom {transform:rotate(-45deg);}
		.navigation .menuWrapp {width:calc(100vw - 25vw); right:calc(-100vw - 25vw); height:100vh; position:fixed; z-index:501; top:0; transition:all .4s ease-in-out; padding-right:25vw; color:#15ffaf; background:#2b271f;}
		.navigation .menuWrapp ul {margin-top:50px;}
		.navigation .menuWrapp ul li {list-style-type:none; text-align: right; display:block; width:calc(100vw - 25vw); padding:10px 0; transition:all .2s ease;}
		.navigation .menuWrapp ul li a {padding:0; text-decoration:none; color: #15ffaf; font-family:'Raleway', sans-serif; font-weight:100; font-size:20px; line-height:1.3; overflow: hidden;}
		.navigation .menuWrapp ul li a:hover {letter-spacing: 0;}
		.navigation .menuWrapp.show {right:0; transition:all .4s ease-in-out;}
		nav ul li a span {display:block;}
		#contact:after, #home:after {display:none; }
		nav ul {width:100%;}
		nav ul li {height:auto; float:none; white-space: normal; background:none;}
		#contact, #home {width:auto; height:auto; float:none; width:auto; height:auto; background:none;}
		#last-child {margin:0;}
		.navigation .menuWrapp ul li#last-child {padding:10px 0;}
		#wrapper {background-position: 15% 0;}
		#foot-2 ul, #foot-info, #up {margin-left:0;}
		#foot-2 {border:0;}
		#foot-1 {background:none;}
	}

	@media screen and (max-width:480px) {
		#container, #foot {width:80%; padding-left:10%; padding-right:10%;}
		#foot-info section, #phone {float:none; height:auto;}
		#foot-info section {margin-bottom:30px;}
		#phone {margin:0 0 20px 0;}
		article, aside {width: 100%; padding:0; margin:0; border:0;}
		aside {margin-top:30px;}
		section p:last-of-type {margin-bottom:0;}
		#buttons {margin-bottom:30px;}
		#wrapper {background-position: 15% 0;}
		header {height: 360px;}
	}