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, main {
	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;
}

@charset "UTF-8";
/* CSS Document */

* {
	margin: 0; 
	padding: 0; 
	border: 0; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}

/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::after, *::before {
  content: '';
}

html, body {
  height: 100%;
}

body{
	font-size: 16px;
	font-family: 'Nixie One', cursive;
	background: #F1F2F2;
}

a {
  text-decoration: none;
}



h1{
	 font-family: 'arhaicregular';
	text-transform: uppercase;
	font-size: 4em;
	
}

h2 {
	font-size: 3em;
	font-family: 'Nixie One', cursive;
	text-transform: uppercase;
	color: #F20A45;
	letter-spacing: 2px;
	
}

h3 {
	font-size: 1.7em;
	font-family: 'Nixie One', cursive;
	text-transform: uppercase;
	letter-spacing: 1px;
}

p {
	font-size: 1.3em;
}

header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3;
	border-bottom: 1px solid #d6d6d6;
	background: #fafafa;
}

.logo {
	margin: auto;
	max-width: 250px;
	padding: 15px 0 10px 0;
}

.content {
  z-index: 1;
  margin-top: 85px;
}


.wrapper {
	padding: 0 9em;
	margin-top: 20px;
	position: relative;
}

.svg-container {
	margin-top: -16px;
}

img {
	width: 100%;
	height: auto;
}

.box_third {
	width: 32%;
	display: inline-block;
	padding: 1em;
}

.box_half {
	width: 50%;
	display: inline-block;
	position: relative;
	left: 0;
	padding: 15px;
	vertical-align: middle;
}

.box_full{
	width: 100%;
	padding: 15px;
}

.text {
	max-width: 960px;
	margin: -50px auto 100px;
	padding: 1em;
	font-size: 1.5em;
}

.text img {
	margin-bottom: 22px;
}

.portfolio {
	text-align: center;
	margin-bottom: 100px;
	display: block;
}

.ornament {
	width: 100px;
	margin:0 auto 50px;
}

.portfolio {
	max-width: 1400px;
	margin: 100px auto;
}


.portfolio h2 {
	margin: 0 auto 50px;
	display: block;
}

.portfolio h2:before {
	content: url(../img/left-branch.png);
	padding-right: 20px;
	max-width: 60px;
}

.portfolio h2:after {
	content: url(../img/right-branch.png);
	padding-left: 20px;
	max-width: 60px;
}

.portfolio h3 {
	text-transform: lowercase;
	margin-top: 33px;
}

.portfolio a {
	text-decoration: none;
	color: #F20A45;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.portfolio a:hover {
	color: #FFDE17;
}

.portfolio .box_third {
	padding: 0;
}

.portfolio .box_third img {
	width: 87%;
	height: auto;
}

footer {
	background: #fafafa;
	clear: both;
	padding-top: 1em;
	font-family: 'Nixie One', cursive;
}

footer a {
	text-decoration: none;
	font-size: 1.1em;
	color: #000;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
	
footer a:hover {
	color: #F20A45;
}
		
footer img {
	width: 87%;
	margin-bottom: 10px;	
}

.footer_info {
	color: #939598;
}


.foot_contact {
	max-width: 560px;
	margin: 50px auto 0;
	text-align: center;
}

.foot_head {
	padding: 0 3em;
	text-transform: uppercase;
	font-family: 'arhaicregular';
}

.foot_contact ul {
	padding: 0 3em ;
}

.foot_contact li {
	width: 33.333%;
	float: left;
	list-style: none;
}

.foot_contact li:nth-child(1) {
	text-align: left;
}

.foot_contact li:nth-child(3) {
	text-align: right;
}
.footer_info {
	clear: both;
	border-top: 1px solid #d6d6d6;
	margin: 100px 0 0 0;
	padding: 0 2em;
	line-height: 2em;
	background-color: #fff;
	
}

.rights {
	position: relative;
	left: 20px;
	top: 15px;
}

.by {
	position: relative;
	text-align: right;
	top: -20px;
}


  /* reach me page */

.text_reach {
	max-width: 960px;
	margin: 50px auto 100px;
	padding: 1em;
	font-size: 1.5em;
}

.text_reach img {
	margin-bottom: 22px;
}

.contact {
	width: 100%;
	margin-top: 100px;
}

.contact p {
	margin: 10px 0;
}

.contact a {
	color: #F20A45;
	text-decoration: none;
}

.contact_text {
	float: right;
}

	/*    project pages    */
	
.text_project {
	max-width: 660px;
	margin: 150px auto 100px;
	padding: 1em;
	position: relative;
}

.text_project h2 {
	text-align: center;
	margin-bottom: 33px;
}

.text_project h2:before {
	content: url(../img/project-branch-left.png);
	position: absolute;
	left: 9px;
}

.text_project h2:after {
	content: url(../img/project-branch-right.png);
	position: absolute;
	right: 30px;
}

.text_project p {
	font-size: 1.5em;
	letter-spacing: 1px;
	line-height: 28px;
}

.gallery {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto 100px;
	font-size: 0;
}

.back , .next {
	position: fixed;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.back a, .next a {
	text-decoration: none;
	color: #000;
	font-size: 1.4em;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.back a:hover, .next a:hover {
	color: #F20A45;
}

.back {
	left: 0;
	text-align: left;
}

.back a::after {
	content: url(../img/arrow-left.png);
	position: relative;
	top: 25px;
	left: -61px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.back a:hover:after {
	content: url(../img/arrow-left.png);
	position: relative;
	top: 25px;
	left: -65px;
}

.next {
	right: 0;
	text-align: right;
}

.next a::before {
	content: url(../img/arrow-right.png);
	position: relative;
	top: 25px;
	right: -57px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.next a:hover:before {
	content: url(../img/arrow-right.png);
	position: relative;
	top: 25px;
	right: -65px;
}

.arrows {
	width: 100%;
}
.menu {
    color:#FFF;
    height:2em;
    padding:.5em;
    position:absolute;
    top:900px;
    width:100%;
}
.fixed {
    position:fixed;
    top:400px;
}

.mob_arroows {
	display: none;
}
.nav-trigger {
  position: fixed;
  display: inline-block;
}

.nav-trigger {
  top: 18px;
  right: 5%;
  height: 44px;
  width: 44px;
  z-index: 5;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.nav-trigger .icon {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  width: 18px;
  height: 3px;
  background-color: #ffffff;
  z-index: 10;
}

.nav-trigger .icon::before, .nav-trigger .icon:after {
  /* upper and lower lines of the menu icon */
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /* Force Hardware Acceleration in WebKit */
  -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;
  /* apply transition to transform property */
  -webkit-transition: -webkit-transform .3s;
  -moz-transition: -moz-transform .3s;
  transition: transform .3s;
}

.nav-trigger .icon::before {
  -webkit-transform: translateY(-6px) rotate(0deg);
  -moz-transform: translateY(-6px) rotate(0deg);
  -ms-transform: translateY(-6px) rotate(0deg);
  -o-transform: translateY(-6px) rotate(0deg);
  transform: translateY(-6px) rotate(0deg);
}

.nav-trigger .icon::after {
  -webkit-transform: translateY(6px) rotate(0deg);
  -moz-transform: translateY(6px) rotate(0deg);
  -ms-transform: translateY(6px) rotate(0deg);
  -o-transform: translateY(6px) rotate(0deg);
  transform: translateY(6px) rotate(0deg);
}

.nav-trigger::before, .nav-trigger::after {
  /* 2 rounded colored backgrounds for the menu icon */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  /* Force Hardware Acceleration in WebKit */
  -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;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}

.nav-trigger::before {
  background-color: #F20A45;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.nav-trigger::after {
  background-color: #002661;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  transition-duration: 0s;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}

.nav-trigger.close-nav::before {
  /* user clicks on the .nav-trigger element - 1st rounded background disappears */
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.nav-trigger.close-nav::after {
  /* user clicks on the .nav-trigger element - 2nd rounded background appears */
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.nav-trigger.close-nav .icon {
  /* user clicks on the .nav-trigger element - transform the icon */
  background-color: rgba(255, 255, 255, 0);
}

.nav-trigger.close-nav .icon::before, .nav-trigger.close-nav .icon::after {
  background-color: white;
}

.nav-trigger.close-nav .icon::before {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}

.nav-trigger.close-nav .icon::after {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}

.primary-nav {
  /* by default it's hidden */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  padding: 80px 5%;
  z-index: 3;
  background-color: #F20A45;
  overflow: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity 0.3s;
  -moz-transition: visibility 0s, opacity 0.3s;
  transition: visibility 0s, opacity 0.3s;
}

.primary-nav h5 {
	font-size: 33px;
	font-family: 'Nixie One', cursive;
	color: #ffde17;
	padding: 0 0 20px 0;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 2px solid #fff;
	max-width: 238px;
	margin: auto;
}


.primary-nav a h5 {
	color: #fff;
}

.primary-nav a h5:hover {
	color: #FFDE17;
}

.first_head h5{
	margin: -7px auto -19px;
	border-bottom: none;
}

.primary-nav li {
  margin: 1.6em 0;
  text-align: center;
  text-transform: uppercase;
}

.primary-nav a  {
  text-decoration: none;
  color: #fff;
  font-size: 25px;
  text-transform: lowercase;
}

.no-touch .primary-nav a:hover {
  color: #FFDE17;
}

.primary-nav.fade-in {
  /* navigation visible at the end of the circle animation */
  visibility: visible;
  opacity: 1;
}

.primary-nav  img {
	width: 33px;
	margin: 10px auto;
	display: block;
}

.top_img img{
	width: 90px;
	display: block;
	margin-bottom: 50px;
	
}



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

	body {
		font-size: 16;
		padding: 0;
	}
	
	h2 {
		font-size: 2em;
	}
	
	h3 {
		font-size: 1.4em;
	}
	
	header {
		height: 80px;
		position: absolute;
	}
	
	.logo {
	position: relative;
	top: 11px;
	left: 10px;
	max-width: 170px;
	margin: 0;
	
	}
	
	.svg-container {
		margin-top: -21px;
	}
	
	.content {
		margin-top: 85px;
	}
		
	.wrapper {
		padding: 2em;
	}
	
	.box_third ,.box_half  {
		margin: 0 ;
		width: 100%;
		display: block;
	}
	
	.text {
		margin: -50px auto 50px;
		padding: 1em;
		font-size: 0.8em;
		text-align: center;
	}
		
	.primary-nav {
		padding: 0px 5%;
	}
	
	.primary-nav li {
	  margin: 1.6em 0;
	}
	
	.primary-nav a {
	}
	
	.portfolio {
		
	}
	
	.portfolio .box_third {
		padding: 2em;
	}
	
	.portfolio h2 {
		margin: 0 auto 50px;
		display: block;
		font-size: 1.7em;
	}
	
	
	.portfolio h2:before {
		content: url(../img/left-branch-small.png);
		padding: 0;
	}
	
	.portfolio h2:after {
		content: url(../img/right-branch-small.png);
		padding: 0;
	}
	
	.top_img img {
		display: none;
	}
	
	.foot_contact {
	max-width: 459px;
	padding: 2em;
	}
	
	.footer_info {
		clear: both;
		font-size: 0.8em;
		
		
	}
	
	.rights {
		position: inherit;
		text-align: center;
		
	}
	
	.by {
		position: inherit;
		text-align: center;
	}
	
	/*   reach me page 	*/
	
	.text_reach {
		padding: 1em;
		font-size: 1em;
		margin: -50px auto 50px;
		
	}
	
	.contact {
		font-size: 0.8em;
		margin-top: 50px;
	}
	
	.mob_arroows {
		display: block;
		width: 90%;
		margin: 10px auto;
		font-size: 1.2em;
	}
	
	.bck, .nxt {
		display: inline-block;
		width: 47%;
	}	
	
	.nxt {
		text-align: right;
	}
	/*   projects me page 	*/
	.text_project {
	max-width: 660px;
	margin: 0px auto 10px;
	padding: 0; 
	position: relative;
	text-align: center;
	font-size: 0.8em;
	}
	
	.text_project h2:before {
		content: "";
	}
	
	.text_project h2:after {
		content: "";
	}
	
	.menu {
		display: none;
	}			

}

@media only screen and (min-width: 1170px) {
  .primary-nav li {
    margin: 1.6em 0;
  }
  .primary-nav a {
  }
}

.overlay-nav, .overlay-content {
  /* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
  position: fixed;
  top: 18px;
  right: 5%;
  height: 4px;
  width: 4px;
  -webkit-transform: translateX(-20px) translateY(20px);
  -moz-transform: translateX(-20px) translateY(20px);
  -ms-transform: translateX(-20px) translateY(20px);
  -o-transform: translateX(-20px) translateY(20px);
  transform: translateX(-20px) translateY(20px);
}
.overlay-nav span, .overlay-content span {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  /* Force Hardware Acceleration in WebKit */
  -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;
  will-change: transform;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.overlay-nav.is-hidden, .overlay-content.is-hidden {
  /* background fades out at the end of the animation */
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.overlay-nav {
  /* main rounded colored bg 1 */
  z-index: 2;
}
.overlay-nav span {
  background-color: #F20A45;
}

.overlay-content {
  /* main rounded colored bg 2 */
  z-index: 4;
}
.overlay-content span {
  background-color: #002661;
}

@media screen and (max-width: 1025px) {
	.menu {
		display: none;
	}
}