/* ============================================================================================
 *
 * Designed & Developed by Lukasz Koczocik
 * 
 * ============================================================================================
 *
 * URL: 					http://www.centraspec.com
 * LinkedIn: 				linkedin.com/in/lukasz-koczocik
 * Date: 					19th of June 2019
 *
 * ============================================================================================ */


/* ============================================================================================ */
/* ==========================================  RESET  ========================================= */
/* ============================================================================================ */


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;
}

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;
}

*{box-sizing:border-box}


/* ============================================================================================ */
/* ==========================================  FONT  ========================================== */
/* ============================================================================================ */


/* ==========================================  AXIS  ========================================== */

@font-face {
    font-family: 'Axis';
    src:url('../fonts/axis/axis.woff') format('woff'),
        url('../fonts/axis/axis.woff2') format('woff2'),
        url('../fonts/axis/axis.eot'),
        url('../fonts/axis/axis.eot?#iefix') format('embedded-opentype'),
        url('../fonts/axis/axis.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================  POPPINS  ======================================== */




/* ============================================================================================ */
/* ========================================  GENERAL  ========================================= */
/* ============================================================================================ */


body{
	background:#fff;
	font-family: 'Axis', sans-serif;
	line-height: 1.2;
}

h1,h2,h3,h4,h5,h6{
	font-weight:700;
	text-transform:uppercase;
}

h1{
	color:#222;
	font-size:15vw;
	letter-spacing:5px;
	line-height:13vw
}

h2{
	color:#222;
	font-size:15vw;
	letter-spacing:5px;
	line-height:13vw
}

h3{
	font-size:3.6vw;
	letter-spacing:5px;
	color:#222;
	position: relative;
	z-index:10
}


.header-paragraph{
	position:relative;
	font-weight:400;
	letter-spacing:.8px;
}

.container{
	padding:0 calc(6vw + 115px);
	margin:0 auto;
	position:relative;
	z-index:2;
}

.col-5{
	width:50%;
	display:inline-block;
}

/*.btn{
	font-size:14px;
	text-transform:uppercase;
	display:inline-block;
	padding:16px 70px;
	margin-top:30px;
	border-width:2px;
	border-style: solid;
	text-decoration:none;
	letter-spacing:.8px;
	font-weight: 500;
	cursor:pointer;
	position:relative;
	overflow:hidden;
}

.btn > div{position: relative}

.btn > div > div:last-child{
	position: absolute;
	left: 0;
	color:#1e2a37;
	z-index:15;
	top:0;
}

.btn:hover > div > div:last-child span{
	top:0;
	opacity: 1
}

.btn:after{
	content:'';
	width:calc(100% + 40px);
	height:100%;
	transform:skew(-20deg);
	background:#fff;
	position: absolute;
	right:calc(100% + 20px);
	top: 0;
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.btn:hover:after{
	right:-20px;
}*/

.floating-txt-bg{
	position: fixed;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);
	font-size:1000px;
	text-transform:uppercase;
	font-weight:800;
	opacity:.015;
	-webkit-text-stroke-width: 30px;
	-webkit-text-stroke-color: #fff;
	-webkit-text-fill-color: transparent	
}

.btn{
	background:rgba(0,0,0,.06);
	z-index:10;	
	padding:16px 70px;
	font-size:14px;
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	border:0;
	cursor: pointer;
}
.btn:hover{
	background:#222;
}

.btn span{
	position: relative;
	display:inline-block;
	padding-right:35px;
	color:#222;
	text-transform:uppercase;
	font-weight:500;
	text-decoration: none;
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	white-space: nowrap;
}

.btn:hover span{
	color:#fff;
	padding-right:45px;
}

.btn span:before{
	content:'';
	width:25px;
	height:2px;
	position: absolute;
	right:0;
	top:50%;
	margin-top:-1px;
	background:#4AB19D;
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.btn:hover span:before{
	width:35px;
}

.btn span:after{
	content:'';
	height:7px;
	width:7px;
	border-right:2px solid #4AB19D;
	border-top:2px solid #4AB19D;
	transform:rotate(45deg) translateY(-50%);
	margin-top:-2px;
	position: absolute;
	top:50%;
	right:2px;
}

/* Sidebar Background */

.sidebar-bg{
	position: fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	z-index:-2;
	display: flex;
}

.sidebar-bg > div:first-child{
	width:10vw;
	height:100%;
	background: #f0f0f0;
}

.sidebar-bg > div:nth-child(2){
	width:20vw;
	height:100%;
	background:#f7f7f7
}

.sidebar-bg > div:nth-child(3){
	position:absolute;
	height:100%;
	left:20vw;
	width:2px;
	background:#f0f0f0
}

.sidebar-bg > div:nth-child(4){
	position:absolute;
	height:100%;
	left:30vw;
	width:2px;
	background:#f0f0f0
}

.sidebar-bg > div:nth-child(5){
	position:absolute;
	height:100%;
	left:40vw;
	width:2px;
	background:#f0f0f0
}

.sidebar-bg > div:nth-child(6){
	position:absolute;
	height:100%;
	left:50vw;
	width:2px;
	background:#f0f0f0
}

.sidebar-bg > div:nth-child(7){
	position:absolute;
	height:100%;
	left:60vw;
	width:2px;
	background:#f0f0f0
}

.sidebar-bg > div:nth-child(8){
	position:absolute;
	height:100%;
	left:70vw;
	width:2px;
	background:#f0f0f0
}

.sidebar-bg > div:nth-child(9){
	position:absolute;
	height:100%;
	left:80vw;
	width:2px;
	background:#f0f0f0
}

.sidebar-bg > div:nth-child(10){
	position:absolute;
	height:100%;
	left:90vw;
	width:2px;
	background:#f0f0f0
}

p{
	font-size:0;
	color: #222;
	font-family: 'Inconsolata', monospace;
}

textarea,input{
	font-family: 'Inconsolata', monospace;
	font-size:14px
}

textarea:invalid,input:invalid{
	box-shadow: none;
	outline:none;
	background:rgba(235,77,75,0.1) !important;
	border-bottom-color: rgb(235,77,75) !important
}

p > span{
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.2;
}

.bigger-para{
	font-size:1.05rem;
}

p > span:not(.highlight-paragraph){
	opacity:.8;
}

.highlight{color:#9a12b3}

.bold{font-weight:bold}

.highlight-paragraph{
	position: relative;
	margin-right:6px !important;
	display: inline-block;
	height:27px;
}

.bigger-para.highlight-paragraph{
	height:30px;
}

.highlight-paragraph + .highlight-paragraph{
	margin-right:0;
}

.highlight-paragraph:before{
	content:'';
	bottom:-2px;
	width:calc(100% + 7px);
	height:10px;
	left:-3.5px;
	z-index:-1;
	position: absolute;
	background: #2ecc71;
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.nav-item a:hover:before{
	
}

.grey{  
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%)
}

/* Section Header Paragraph */

.section-header p{
	max-width:300px;
	position: absolute
}


/* ============================================================================================ */
/* =======================================  NAVIGATION  ======================================= */
/* ============================================================================================ */


nav{
	position:fixed;
	width:100%;
	z-index:9000;
	background: #fff;
	border-bottom: 2px solid #f0f0f0;
}

nav > div{
	display: flex;

	padding:0 3vw
}

nav > div:before, .nav-logo-cont, .main-nav {
	content: '';
	flex-basis: 100%;
  }

.nav-logo-cont{
	text-align: center;
}

.nav-logo{
	margin-top:20px;
	margin-bottom: 18px;
	font-size:18px;
	color:#fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight:500;
	display:inline-block;
	text-align:center;
}

.nav-logo span{
	padding:4px 6px;
	text-align: center;
	display:inline-block;
}

.main-nav{
	text-align: right;
	display:flex;
	margin-top:20px;
	justify-content: flex-end;
}

.nav-item{
	margin-left:30px;
	overflow: hidden;
}

.nav-item a{
	text-decoration: none;
	color:#222;
	font-weight: 500;
	font-size:15px;
	margin-top:9px;
	position: relative;
	display: block;
	padding:0 3px;
}

/*.nav-item a:first-letter{
	color:red !important;
}*/

.nav-item a:before{
	content:'';
	bottom:-2px;
	width: calc(100% + 6px);
	height:50%;
	z-index:-1;
	position: absolute;
	background: #2ecc71;
	left:calc(-100% - 6px);
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.nav-item a:hover:before{
	left:-3px;
}

/* ==================================  SECTION NAVIGATIONS  =================================== */

.navigation-bottom,.navigation-top{
	position:fixed;
	left:50%;
	z-index:9000
}

.navigation-bottom a,.navigation-top a{
	font-size:6vw;
	text-transform:uppercase;
	font-weight:800;
	letter-spacing: 10px;
	color:#fff;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #fff;
	-webkit-text-fill-color: transparent;
	display: block;
	opacity:.05;
	transform:scale(1);
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.navigation-bottom a:hover{
	opacity:.1;
	transform:scale(1.05);
}

/* ===================================  BOTTOM NAVIGATION  ==================================== */

.navigation-bottom{
	transform:translate(-50%, -60%);
}

/* =====================================  TOP NAVIGATION  ===================================== */




/* ============================================================================================ */
/* =====================================  SIDE NAVIGATION  ==================================== */
/* ============================================================================================ */


.side-navigation{
	position: fixed;
	left:3vw;
	top:50%;
	transform:translateY(-50%);
	z-index:9000
}

.side-navigation li{display: block}

.side-navigation a{
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding:20px 0;
	position: relative;
	display: block;
}

.side-navigation a > div{
	width:2px;
	height: 0px;
	background:#222;
	margin: 0 auto;
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.side-navigation a:hover > div{
	height:20px;
}

.side-navigation a.active > div{
	height:30px;
}

.side-navigation span{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.8px;
	font-weight:500;
	color:#222;
	display: block;
	text-align: center;
}



/* ============================================================================================ */
/* =====================================  FRONT SECTION  ====================================== */
/* ============================================================================================ */


.front-section{
	height: 100vh;
	position:relative;
	overflow:hidden;
	display: flex;
	align-items: center;
}

.home-wrapper{
	position:relative;
	left:0;
	display: inline-block
}

.header-main{
	left:8.8vw;
	position: relative;
}

.header-main h1 div:last-child,
.header-main h2 div:last-child{
	padding-left:11vw;
}

/* Home Text */

.front-section h1,
.front-section h2{
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #fff;
}	

.front .highlight{
	position: relative;
	z-index:1;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #9a12b3;
	-webkit-text-fill-color: transparent
}

.rear .highlight{
	position: relative;
	z-index:-1;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #9a12b3;
	-webkit-text-fill-color: #9a12b3
}

/* Home Text Front */

.home-text-front{
	position:relative;
	z-index:11;
	opacity:1;
}

.home-text-front h1,.home-text-front h2{
	-webkit-text-fill-color: transparent
}

/* Home Text Rear */

.home-text-rear{
	top:0;
	left:0;
	position:absolute;
	z-index: 9;
	text-align:center;
}

.home-text-rear h1,
.home-text-rear h2{
	-webkit-text-fill-color:#222;
	display:inline-block;
	text-align:left;
	margin: 0 auto;
}

/* Home Side Image */

.home-img{
	position: absolute;
	width:63vw;
	max-height:80vh;
	z-index:10;
	bottom:0;
	right:0;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,.07);
	-moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,.07);
	box-shadow: 0px 0px 15px 10px rgba(0,0,0,.07);	
}

.home-img:before{
	content:'';
	width:100%;
	height:100%;
	position: absolute;
	left:0;
	top:0;
	background: #222;
	opacity:.2;
	z-index:1;
}
.home-img:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/static.gif);
	background-size: 200px;
	opacity: .25
}

.home-img img{
	width:100%;
	display: block;
}


/* ============================================================================================ */
/* ==========================================  ABOUT  ========================================= */
/* ============================================================================================ */


.about-paragraphs{
	float:left
}

.about p{
	max-width:300px;
}

.about p:first-of-type{
	margin:11vw 0 0 10.5vw;
}

.about p:nth-of-type(2){
	margin:12vw 0 0 18vw
}

.skills{
	writing-mode: sideways-lr;
	padding: 50px 0;
}

.skills{
	float: right;
}


/* ============================================================================================ */
/* ========================================  PROJECTS  ======================================== */
/* ============================================================================================ */


.projects{
	width:100%;
	width:100%;
	position: relative;
	z-index:1;
	padding-top:150px;
	overflow: hidden;
}

.projects .section-header{
	padding-left:9vw;
	position: relative;
}

.projects .section-header h2 > div:last-child{
	padding-left:12vw;
}

.projects .section-header p{
	position: absolute;
	bottom:0;
	right:12.2vw;
}

.project{
	margin-bottom:250px;
	width:50vw;
	align-content:center;
	position: relative;
}

.project:nth-child(even){
	clear:both;
	left:20vw
}

.project:nth-child(odd){
	left:40vw
}

.projects .section-header{
	margin-bottom:400px
}

/* Project Header */

.project-header{
	position: absolute;
	font-size:4vw;
	text-transform:uppercase;
	letter-spacing:10px;
	font-weight:700;
	text-align: left;
	transform:translateY(-50%);
	top:50%;
}

.project:nth-child(2n) .project-header{
	right: calc(-20.1vw + 115px);
	text-align:left;
}

.project:nth-child(2n + 1) .project-header{
	left: calc(-16.1vw + 115px);
	text-align:right;
}

.project-header.front{
	z-index:10;
	-webkit-text-stroke-width: 2px;
	-webkit-text-fill-color: transparent
}

.project-header.front .highlight{
	position: relative;
	z-index:10;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #9a12b3;
	-webkit-text-fill-color: transparent
}

.project-header.rear{
	z-index:-1;
	-webkit-text-stroke-width: 2px
}

.project-header.front .highlight{
	position: relative;
	z-index:-1;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #9a12b3;
	-webkit-text-fill-color: #9a12b3
}

/* Light Background */

.project-header.lightbg.front{
	-webkit-text-stroke-color: #222;
}

.project-header.lightbg.back{
	-webkit-text-stroke-color: #222;
	-webkit-text-fill-color: #222
}

/* Dark Background */

.project-header.darkbg.front{
	-webkit-text-stroke-color: #fff;
}

.project-header.darkbg.back{
	-webkit-text-stroke-color: #fff;
	-webkit-text-fill-color: #fff
}

/* Project Image */

.project-image{
	position: relative;
	width:100%;
	margin:0 auto;
}

.project-banner{
	width:100%;
	display: block
}

.project-image-container{
	display:inline-block;
	width:100%;
	padding-top: 70%;
	box-sizing:border-box;
	position:relative;
	background-position: center;
  }
  
  .column, .blind, .blindImg{
	position:absolute;
	top:0;
	height:100%;
	box-sizing:border-box;
  }
  
  .blind{
	overflow:hidden;
  }
  
  .blindImg{
	width:100%;
	background-size:cover;
  }
  

/* Project Button */

.project .btn{
	position: absolute;
	bottom:10%;
	margin-top:15px;
}

.project:nth-child(2n) .btn{
	left:100%;
	transform:translateX(-30%);
}

.project:nth-child(2n + 1) .btn{
	right:100%;
	transform:translateX(30%);
}

/* Project type text */

.project-type{
	position: absolute;
	top:0;
	color:#4AB19D;
	font-size:24px;
	font-weight:700;
	white-space: nowrap;
	letter-spacing:1.5px;
	writing-mode: sideways-rl;
}

.project:nth-child(2n) .project-type{
	writing-mode: sideways-lr;
	right: 100%;
	margin-right:10px;
}

.project:nth-child(2n + 1) .project-type{
	writing-mode: sideways-rl;
	left: 100%;
	margin-left:10px;
}

/* Project more info */




.contact .section-header{
	position: relative;
}

.contact h2{
	text-align:right;
	padding-right:21vw
}

.contact h2 div:nth-child(2){
	padding-right:13.2vw;
}

.contact-info{
	margin-left:12vw;
	width:26vw;
	bottom:20px;
	left:40px;
	position: absolute;
}

.contact-info p{
	position: relative;
	max-width:100%;
	display: block;
	margin-bottom:40px
}

.contact-details a{
	color:#222;
	font-weight:700;
	font-size:12px;
	display: block;
	margin-top:5px;
	text-decoration: none;
}

.contact-form{
	margin:200px auto;
	width:60vw;
}

.contact-form h2{
	padding-left:25px;
	margin-bottom:60px;
}

.contact-form h2 > div:nth-child(2){
	padding-left:80px;
}

.contact-form input, .contact-form textarea{
	font-family: 'Inconsolata', monospace;
	border-bottom: 2px solid #2ecc71;
	outline: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	-moz-transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	font-weight:600;
	line-height:2.2;
	color:#222;
	background: transparent;
}

.contact-form input{
	display: inline-block;
	width:calc(33.3333% - 50px);
	margin:0 25px;
	border:0;
}

.contact-form textarea{
	margin:25px;
	height:200px;
	width:calc(100% - 50px);
	resize:none;
}

.contact-form textarea:focus,.contact-form input:focus,
.contact-form textarea:not(:placeholder-shown),.contact-form input:not(:placeholder-shown){
	background: rgba(0,0,0,.03);
	padding:0 20px;
}

.contact-form .btn{
	float: right;
	margin-right:25px;
}


footer{
	color:#222;
	font-size:12px;
	text-align: center;
	margin:30px 0;
	left:0;
	width: 100%;
	opacity:.5;
}