@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,600,900|Righteous|Source+Sans+Pro:300,400");

body {
	background-color: #111212;
  color: #dedee1;
  font-weight: 400;
  font-size: 14px;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: url(../img/main_bg.png) fixed;
	background-attachment: fixed;
	background-position: 50% 0px;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	overflow-y: scroll;
}
html, body {
	height: 100%;
	overflow-x: hidden;
}
a {
  color: #ffa532;
	cursor: pointer;
	-webkit-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	transition:all .2s ease-out;
	text-decoration: none;
	outline: 0;
}
a:hover, a:active, a:focus {
  outline: 0;
}
a:hover {
	/*text-decoration: underline;*/
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0px;
}


@media (max-width: 1000px) {
	.adaptext {
		font-size: 4vw !important;
		letter-spacing: 35px !important;
	}
}
@media (max-width: 600px) {
	.adaptext {
		font-size: 6vw !important;
		letter-spacing: 10px !important;
	}
}
img {
	width: 100%;
}
.page-loader {
	position: fixed;
	background: #fff;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: 9998;
}
.fadeInDown.slow {
  -webkit-animation: fadeInDown 5s; /* Safari 4+ */
  -moz-animation:    fadeInDown 5s; /* Fx 5+ */
  -o-animation:      fadeInDown 5s; /* Opera 12+ */
  animation:         fadeInDown 5s; /* IE 10+, Fx 29+ */
}
.fadeInUp.slow {
  -webkit-animation: fadeInUp 4s; /* Safari 4+ */
  -moz-animation:    fadeInUp 4s; /* Fx 5+ */
  -o-animation:      fadeInUp 4s; /* Opera 12+ */
  animation:         fadeInUp 4s; /* IE 10+, Fx 29+ */
}
.swing.slow {
  -webkit-animation: swing 5s; /* Safari 4+ */
  -moz-animation:    swing 5s; /* Fx 5+ */
  -o-animation:      swing 5s; /* Opera 12+ */
  animation:         swing 5s; /* IE 10+, Fx 29+ */
}
.loader {
	position: absolute;
	border-left: 2px solid #b2b2b2;
	border-top: 2px solid rgba(245, 245, 245, 0.8);
	border-right: 2px solid rgba(245, 245, 245, 0.8);
	border-bottom: 2px solid rgba(245, 245, 245, 0.8);
	height: 46px;
	width: 46px;
	left: 50%;
	top: 50%;
	margin: -23px 0 0 -23px;
	text-indent: -9999em;
	font-size: 10px;
	z-index: 9999;
	-webkit-animation: load 0.8s infinite linear;
	   -moz-animation: load 0.8s infinite linear;
		 ms-animation: load 0.8s infinite linear;
		  o-animation: load 0.8s infinite linear;
			animation: load 0.8s infinite linear;
}

.loader,
.loader:after {
	border-radius: 50%;
	width: 46px;
	height: 46px;
}

@-webkit-keyframes load {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes load {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes titleline {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes titleline {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.white_bg {
	background: #FFF;
}
.gray_bg {
	background: #f6f6f7;
}
.black_bg {
	background: #222;
}

.m-t-xs {
	margin-top: 10px;
}
.m-t-sm {
	margin-top: 20px;
}
.m-t-md {
	margin-top: 40px;
}
.m-t-lg {
	margin-top: 60px;
}
.m-t-xl {
	margin-top: 80px;
}
.m-b-xs {
	margin-bottom: 10px;
}
.m-b-sm {
	margin-bottom: 20px;
}
.m-b-md {
	margin-bottom: 40px;
}
.m-b-lg {
	margin-bottom: 60px;
}
.m-b-xl {
	margin-bottom: 80px;
}


.p-t-xs {
	padding-top: 10px;
}
.p-t-sm {
	padding-top: 20px;
}
.p-t-md {
	padding-top: 40px;
}
.p-t-lg {
	padding-top: 60px;
}
.p-t-xl {
	padding-top: 80px;
}
.p-b-xs {
	padding-bottom: 10px;
}
.p-b-sm {
	padding-bottom: 20px;
}
.p-b-md {
	padding-bottom: 40px;
}
.p-b-lg {
	padding-bottom: 60px;
}
.p-b-xl {
	padding-bottom: 80px;
}

.position-relative {
	position: relative;
}
.position-absolute {
	position: absolute;
}
.rotateme {
  animation: rotationme 10s infinite linear;
}
@keyframes rotationme {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

span.icon-bar {
  background-color: #666;
}

.navbar-custom .navbar-collapse {
	margin-top: 0px;
}

.navbar-custom {
	position: relative;
  -webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
  background: #191a1a;
	z-index: 1000;
	width: 100% !important;
	margin-bottom: 0;
	border: 0px solid transparent;
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
	-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
}
.navbar-custom.aligntop {
  top: 0;
}
.navbar-custom.aligntop .navbar-brand {
  opacity: 1;
}
.navbar-custom .navbar-brand {
	position: relative;
	font-family: 'Righteous', cursive;
  opacity: 1;
  color: #ddd;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 4px;
	height: 60px;
	padding: 20px 15px;
	line-height: 20px;
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
}

.navbar-custom .navbar-brand fra {
	display: inline-block;
}
.navbar-custom .navbar-brand:after {
	content: attr(data-content);
	position: absolute;
	left: 16px;
	top: 16px;
	display: inline-block;
  transform: scaleY(-1);
  transform-origin: bottom;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navbar-custom .navbar-brand .blink_line {
	display: inline-block;
	content: " ";
	width: 10px;
	height: 2px;
	border-bottom: 2px solid #ffa532;
	-webkit-animation: titleline 0.8s infinite linear;
	   -moz-animation: titleline 0.8s infinite linear;
		 ms-animation: titleline 0.8s infinite linear;
		  o-animation: titleline 0.8s infinite linear;
			animation: titleline 0.8s infinite linear;
}
.navbar-custom .navbar-brand:hover {
  color: #FFF;
}
.navbar-custom li a {
	position: relative;
	color: #eee;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
	padding-top: 20px;
	padding-bottom: 20px;
}
.navbar-custom li a:hover {
  background: none !important;
  color: #ffa532;
}
.navbar-custom li a:hover::after {
	font-family: "FontAwesome";
	position: absolute;
	right: calc(50% - 5px);
	bottom: 100%;
	font-size: 20px;
	content: "\f107";
	color: #ffa532;
	-webkit-animation: bounce 0.8s infinite linear;
	   -moz-animation: bounce 0.8s infinite linear;
		 ms-animation: bounce 0.8s infinite linear;
		  o-animation: bounce 0.8s infinite linear;
			animation: bounce 0.8s infinite linear;
}
.navbar-custom li a:active, .navbar-custom li a:focus, .navbar-custom li a.active {
  background: none !important;
  color: #ffa532;
}


#spiderbg-canvas {
	position: absolute;
}
.site_title_box {
  position: absolute;
	text-align: center;
  top: 40%;
  right: 0;
  bottom: 0;
  left: 0;
	opacity: 1;
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
	z-index: 250;
}
.site_title_box .site_title {
  display: block;
  color: #f8f8f9;
  font-weight: 400;
  font-size: 50px;
  letter-spacing: 40px;
  text-transform: uppercase;
  cursor: default;
	letter-spacing: 53px;
	text-shadow: -4px 8px 2px rgba(0, 0, 0, 0.2);
	font-family: 'Source Sans Pro';
}
.site_title_box > .site_title > fra {
  display: inline-block;
  color: #ffa532;
}
.site_title_box > .sub_site_title {
  display: block;
  color: #f8f8f9;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 10px;
  text-transform: uppercase;
  cursor: default;
	text-shadow: -4px 4px 1px rgba(0, 0, 0, 0.2);
}
.sticky-wrapper {
	margin-bottom: -10px;
}


.pagebox_top {
	position: relative;
	display: block;
  width: 100%;
	min-height: calc(100% - 58px);
	margin: 0 auto;
	background: rgba(0,0,0, 0.7);
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
	z-index: 200;
}
.pagebox_bottom {
	position: relative;
	display: block;
  width: 100%;
	min-height: 0%;
	margin: 0 auto;
	background: rgba(17, 18, 18, 1);
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
	z-index: 300;
}
.pagebox_top:after, .pagebox_bottom:after {
	clear: both;
	content: " ";
	display: table;
}
.pagebox_bottom_content, .pagebox_top_content {
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
}
.footer {
	position: relative;
	display: block;
	width: 100%;
	padding: 20px 0;
	background: rgba(38, 41, 46, 0.9);
	display: none;
}
.footer_base {
	font-size: 10px;
	text-transform: uppercase;
	position: relative;
	display: block;
	width: 100%;
	padding: 12px 0;
	background: #191a1a;
	color: #777;
}
.footer_base a {
	color: inherit;
}

.table {
	margin: 0;
}
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
	padding: 10px 0px;
	border: none;
	border-bottom: 1px solid #efefef;
}

.container {
  max-width: 1300px;
	width: 100%;
}

#image_preview {
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.8);
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease-in-out;will-change:
	transform;cursor:pointer;
}
#image_preview > div {
	padding: 60px 20px 40px 20px;
	height: 100%;
	width: 100%;
}
#image_preview > div > img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}


/* ============================================ Light pages === */
body.light .pagebox_top {
	background: rgba(255, 255, 255, 1);
	color: #9597a9;
}
body.light .navbar-custom {
	border: 0px solid transparent;
	border-top: 0px solid #ccc;
	border-bottom: 0px solid #ccc;
	background: #FFF;
}
body.light .navbar-custom .navbar-brand {
	color: #888;
  opacity: 1;
}
body.light .navbar-custom .navbar-brand:after {
	content: attr(data-content);
	position: absolute;
	left: 15px;
	top: 11px;
	display: inline-block;
  transform: scaleY(-1);
  transform-origin: bottom;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.light .navbar-custom .navbar-brand .blink_line {
	border-bottom: 2px solid #25cbf5;
}
body.light .navbar-custom li a {
	position: relative;
	color: #999;
}
body.light .navbar-custom li a:hover, body.light .navbar-custom li a.active {
	color: #111;
}
body.light .navbar-custom li a:hover::after, body.light .navbar-custom li a.active::after {
	color: #222;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: inline-block;
	content: " ";
	height: 2px;
	border-bottom: 2px solid #25cbf5;
	-webkit-animation: titleline 0.8s linear;
	   -moz-animation: titleline 0.8s linear;
		 ms-animation: titleline 0.8s linear;
		  o-animation: titleline 0.8s linear;
			animation: titleline 0.8s linear;
}
body.light .pagebox_bottom {
	background: rgba(255, 255, 255, 1);
	color: #9597a9;
}
body.light .pagebox_bottom footer {
	border-top: 1px solid #ccc;
	background: #f8f8f9;
}
body.light .footer_base {
	border-top: 1px solid #ccc;
	background: #f8f8f9;
}



/* ============================================ aboutme Styles === */
body.page_aboutme .pagebox_top {
	min-height: 0px;
	
}
body.page_aboutme .pagebox_bottom {
	min-height: 100%;
}


/* ============================================ mywork Styles === */
body.page_mywork .pagebox_top {
	background: rgba(17, 18, 18, 1);
	min-height: 0%;
	
}
body.page_mywork .pagebox_bottom {
	min-height: 100%;
}


/* ============================================ resume Styles === */
body.page_resume .pagebox_top {
	min-height: 0px;
}
body.page_resume .pagebox_bottom {
	min-height: calc(100% - 0px);
}


/* ============================================ getintouch Styles === */
body.page_getintouch .pagebox_top {
	background: rgba(17, 18, 18, 1);
	min-height: 400px;
}
body.page_getintouch .pagebox_bottom {
	min-height: calc(100% - 400px);
}