/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/


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

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

@import url('https://fonts.googleapis.com/css?family=Rozha+One&subset=latin-ext');
@font-face {
font-family: 'Main';
src: url('fonts/main.otf') format('opentype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Main';
src: url('fonts/main-semibold.otf') format('opentype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Main';
src: url('fonts/main-bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Main';
src: url('fonts/main-heavy.otf') format('opentype');
font-weight: 800;
font-style: normal;
}
:root {
	--Omain: 2068;
	--ObackgroundColor: #F4F3F1;
	--OfontColor: #303133;
	--OframeColor: #FFF;
	--OlinesColor: #D9D9D9;
	--OaccentColor: #827D72;
	--OfontUndelineUnactive: #D9D9D9;

	--main: 2068;
	--backgroundColor: #272727;
	--fontColor: #FFF;
	--frameColor: #FFF;
	--linesColor: #404040;
	--accentColor: #E6ECC1;
	--fontUndelineUnactive: #404040;
	
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,x
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;
	font-family: 'Main','Arial';
	vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
}
strong {
	font-weight: 900;
}
/* 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;
}
div {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
body.unscroll {
	overflow: hidden;
}
::-moz-selection {
    text-shadow: none;
    background-color: var(--accentColor);
    color: var(--fontColor);
}
::selection {
    text-shadow: none;
    background-color: var(--accentColor);
    color: var(--backgroundColor);
}

.mainFrame .top, .mainFrame .bottom {
	width: 100vw;
	height: 20px;
	background: var(--frameColor);
	left: 0;
	z-index: 99999999;
	position: fixed;
}
.mainFrame .top {
	top: 0;
}
.mainFrame .bottom {
	bottom: 0;
}
.mainFrame .left, .mainFrame .right {
	width: 20px;
	height: 100vh;
	background: var(--frameColor);
	top: 0;
	z-index: 99999;
	position: fixed;
}
.mainFrame .left {
	left: 0;
}
.mainFrame .right {
	right: 0;
}
.videoBackground {
	position: fixed;
    width: 100%;
    height: 100%;
}
.videoBackground video {
	width: 100vw;
    position: relative;
}

.burgerMenu {
    cursor: pointer;
}

.newMenu {
	margin-top: 75px;
	position: relative;
    display: block;

}
.mobileMenu{
	display: none;
}
.menuPos {
	padding: 0px 80px 0 0;
	color: var(--fontColor);
	font-size: 24px;
	text-decoration: none;
	font-weight: bold;
}
.indo {
	display: block;
	width: 32px;
	height: 4px;
	background-color: var(--accentColor);
	position: absolute;
	top: 32px;
	left: 0px;
	transition: all ease-in-out .2s;

}

.burgerMenu .top, .burgerMenu .middle, .burgerMenu .bottom {
	height: 4px;
	overflow: hidden;
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
}


/** TOP BURGER **/

.burgerMenu .top:before {
	content: '';
	display: block;
	height: 4px;
	width: 30px;
	-webkit-transform: translateX(-30px);
	    -ms-transform: translateX(-30px);
	        transform: translateX(-30px);
	background: var(--fontColor);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.20s;
	     -o-transition-delay: 0.20s;
	        transition-delay: 0.20s;
}
.burgerMenu .top:after {
	content: '';
	display: block;
	height: 4px;
	width: 30px;
	background: var(--fontColor);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.30s;
	     -o-transition-delay: 0.30s;
	        transition-delay: 0.30s;
	-webkit-transform: translate(0, -4px);
	    -ms-transform: translate(0, -4px);
	        transform: translate(0, -4px);
}
/* .burgerMenu:hover .top:after {
	-webkit-transform: translate(30px, -4px);
	    -ms-transform: translate(30px, -4px);
	        transform: translate(30px, -4px);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
}
.burgerMenu:hover .top:before {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.05s;
	     -o-transition-delay: 0.05s;
	        transition-delay: 0.05s;
} */
.burgerMenu.active .top {
	-webkit-animation-name: burgerTop;
	        animation-name: burgerTop;
	-webkit-animation-duration: 0.3s;
	        animation-duration: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-transform-origin: 50% 12px;
	    -ms-transform-origin: 50% 12px;
	        transform-origin: 50% 12px;
	width: 30px;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
.burgerMenu .top {
	-webkit-animation-name: burgerTopRev;
	        animation-name: burgerTopRev;
	-webkit-animation-duration: 0.3s;
	        animation-duration: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-transform-origin: 50% 12px;
	    -ms-transform-origin: 50% 12px;
	        transform-origin: 50% 12px;
}
/*** END TOP BURGER ***/

/** MIDDLE BURGER **/
.burgerMenu .middle {
	-webkit-transition-delay: 0.15s;
	     -o-transition-delay: 0.15s;
	        transition-delay: 0.15s;
	opacity: 0 !important;
}
.burgerMenu .middle:before {
	content: '';
	display: block;
	height: 4px;
	width: 15px;
	-webkit-transform: translateX(-15px);
	    -ms-transform: translateX(-15px);
	        transform: translateX(-15px);
	background: var(--fontColor);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.05s;
	     -o-transition-delay: 0.05s;
	        transition-delay: 0.05s;
}
.burgerMenu .middle:after {
	content: '';
	display: block;
	height: 4px;
	width: 15px;
	background: var(--fontColor);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.15s;
	     -o-transition-delay: 0.15s;
	        transition-delay: 0.15s;
	-webkit-transform: translate(0, -4px);
	    -ms-transform: translate(0, -4px);
	        transform: translate(0, -4px);
}
/* .burgerMenu:hover .middle:after {
	-webkit-transform: translate(15px, -4px);
	    -ms-transform: translate(15px, -4px);
	        transform: translate(15px, -4px);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.1s;
	     -o-transition-delay: 0.1s;
	        transition-delay: 0.1s;
}
.burgerMenu:hover .middle:before {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.15s;
	     -o-transition-delay: 0.15s;
	        transition-delay: 0.15s;
} */
.burgerMenu.active .middle {
	-webkit-transform: translate(0, 0px) scaleX(0);
	    -ms-transform: translate(0, 0px) scaleX(0);
	        transform: translate(0, 0px) scaleX(0);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.15s;
	     -o-transition-delay: 0.15s;
	        transition-delay: 0.15s;
}
.burgerMenu.active .middle:before {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.15s;
	     -o-transition-delay: 0.15s;
	        transition-delay: 0.15s;
}

/*** END MIDDLE BURGER ***/

/** BOTTOM BURGER **/
.burgerMenu.active .bottom {
	-webkit-animation-name: burgerBottom;
	        animation-name: burgerBottom;
	-webkit-animation-duration: 0.3s;
	        animation-duration: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-transform-origin: 50% -8px;
	    -ms-transform-origin: 50% -8px;
	        transform-origin: 50% -8px;
	width: 30px;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
.burgerMenu .bottom {
	-webkit-animation-name: burgerBottomRev;
	        animation-name: burgerBottomRev;
	-webkit-animation-duration: 0.3s;
	        animation-duration: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-transform-origin: 50% -8px;
	    -ms-transform-origin: 50% -8px;
	        transform-origin: 50% -8px;
}

.burgerMenu .bottom:before {
	content: '';
	display: block;
	height: 4px;
	width: 25px;
	-webkit-transform: translateX(-25px);
	    -ms-transform: translateX(-25px);
	        transform: translateX(-25px);
	background: var(--fontColor);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
.burgerMenu .bottom:after {
	content: '';
	display: block;
	height: 4px;
	width: 30px;
	background: var(--fontColor);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.05s;
	     -o-transition-delay: 0.05s;
	        transition-delay: 0.05s;
	-webkit-transform: translate(0, -4px);
	    -ms-transform: translate(0, -4px);
	        transform: translate(0, -4px);
}
/* .burgerMenu:hover .bottom:after {
	-webkit-transform: translate(25px, -4px);
	    -ms-transform: translate(25px, -4px);
	        transform: translate(25px, -4px);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.20s;
	     -o-transition-delay: 0.20s;
	        transition-delay: 0.20s;
}
.burgerMenu:hover .bottom:before {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all ease-in-out .1s;
	-o-transition: all ease-in-out .1s;
	transition: all ease-in-out .1s;
	-webkit-transition-delay: 0.25s;
	     -o-transition-delay: 0.25s;
	        transition-delay: 0.25s;
} */

/*** END BOTTOM BURGER ***/

.burgerMenu .top {
	width: 30px;
}

.burgerMenu .middle {
	width: 15px;
	margin: 6px 0;
}
.burgerMenu .bottom {
	width: 25px;
}

.topHolder {
	position: relative;
	display: block;
	width: 100%;
	z-index: 9999;
	background-color: var(--backgroundColor);
	border-bottom: 1px solid var(--linesColor);
	padding-left: calc(100% / 5 + 15px);
	padding-right: calc(100% / 5 + 15px);
	padding-top: 120px;
	padding-bottom: 50px;
}
/** MENU **/



.menuEntrance .row::after {
    content: '';
    display: block;
    width: 100%;
    border-right: 1px solid var(--accentColor);
    height: 30vh;
    background: var(--accentColor);
    bottom: -30vh;
    position: absolute;
}
/** MENU COLAPS **/


.menuEntrance {
    position: absolute;
    width: calc(100vw - 40px);
    top: 20px;
}


.contactDetails .drake {
	-webkit-box-shadow: 17px 23px 45px 0 rgba(0,0,0,0.27);
	        box-shadow: 17px 23px 45px 0 rgba(0,0,0,0.27);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	width: 100%;
}
.contactDetails .simpson {
	width: 240px;;
	margin-top: -25px;
	position: relative;
	display: block;
	-webkit-box-shadow: 18px 16px 55px 0 rgba(0,0,0,0.16);
	        box-shadow: 18px 16px 55px 0 rgba(0,0,0,0.16);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	opacity: 0;
}
.contactDetails .simpsonHolder.active {
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: translateY(-10px);
	    -ms-transform: translateY(-10px);
	        transform: translateY(-10px);
}
.contactDetails .simpsonHolder.active img {
	opacity: 1;
}
.contactDetails .simpsonHolder {
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	margin-left: calc(50% - 120px);
}
.contactDetails .simpsonHolder.active .simpson {
	-webkit-box-shadow: 20px 22px 55px 0 rgba(0,0,0,0.3);
	        box-shadow: 20px 22px 55px 0 rgba(0,0,0,0.3);
}
.contactDetails .drakeHolder.active img {
	-webkit-box-shadow: 20px 26px 45px 0 rgba(0,0,0,0.35);
	        box-shadow: 20px 26px 45px 0 rgba(0,0,0,0.35);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.contactDetails .drakeHolder.active {
	-webkit-transform: translateY(-10px);
	    -ms-transform: translateY(-10px);
	        transform: translateY(-10px);
}
.contactDetails .drakeHolder {
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
}
.contactDetails .simpson::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
}
.contactDetails .cntTitle {
	font-size: 14px;
	color: var(--accentColor);
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}
.contactDetails .cntPosition {
	font-size: 34px;
	color: var(--fontColor);
	letter-spacing: 0.75px;
	font-weight: 700;
	display: block;
	position: relative;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding-bottom: 2px;
}
.contactDetails .phoneHolder, .contactDetails .mailHolder {
	margin: 40px 0;
}
.contactDetails .cntPosition span {
	font-size: 20px;
}
div.undeline {
	width: 100%;
	height: 20px;
	background: var(--fontUndelineUnactive);
	-webkit-transform: translateY(16px);
	    -ms-transform: translateY(16px);
	        transform: translateY(16px);
	z-index: -1;
	position: absolute;
	-webkit-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.mailHolder .cntPosition.active div.undeline, .phoneHolder.active div.undeline {
	background: var(--accentColor);
	-webkit-transform: translateY(30px) scaleY(0.2);
	    -ms-transform: translateY(30px) scaleY(0.2);
	        transform: translateY(30px) scaleY(0.2);
	-webkit-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}

.contactDetails.active .content .row-6:first-child {
		-webkit-transition-delay: .5s;
		     -o-transition-delay: .5s;
		        transition-delay: .5s;
}

.contactDetails .active .content .row-6:last-child {
		-webkit-transition-delay: .3s;
		     -o-transition-delay: .3s;
		        transition-delay: .3s;
}

.contactDetails .content .row-6 {
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
a.simpsonHolder {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: 0;
    background: var(--accentColor);
    position: relative;
}
a.drakeHolder {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background: var(--accentColor);
    position: relative;
	margin-left: 25%;
    margin-top: 50px;
	width: 50%;
}
a.drakeHolder img.unactive {
	opacity: 0 !important;
}
.mainMenu ul {
	line-height: 89px;
	margin-left: calc(33% - 2px);
}
.mainMenu ul li.big a {
	font-size: 72px;
	color: var(--fontColor);
	letter-spacing: 2.98px;
	line-height: 127px;
	text-decoration: none;
	font-weight: 800;
	position: relative;
}
.mainMenu ul li.big a::after {
	content: '';
	display: block;
	width: 100%;
	z-index: -1;
	height: 34px;
	background: var(--fontUndelineUnactive);
	position: relative;
	margin-top: -66px;
	margin-bottom: 66px;
	margin: -66px 0px 66px 4px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.mainMenu ul li.big a:hover::after {
	-webkit-transform: translateY(20px) scaleY(0.2);
	    -ms-transform: translateY(20px) scaleY(0.2);
	        transform: translateY(20px) scaleY(0.2);
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	background: var(--accentColor);

}
.mainMenu li.big {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.mainMenu ul li.mini a {
	-webkit-transform: translateX(300%);
	    -ms-transform: translateX(300%);
	        transform: translateX(300%);
	color: var(--accentColor);
	text-decoration: none;
	font-weight: 700;
	margin-left: -54px;
}

img.myFace {
    position: absolute;
    right: 0;
    bottom: 0;
    height: calc(100vh * 0.9);
}

svg.triOne {
    position: absolute;
    bottom: -140px;
    right: 22%;
}

.triTwo {
    position: absolute;
    top: 190px;
    left: -150px;
}
.triThree {
	position: absolute;
	bottom: -200px;
	left: 0;
	opacity: 0.3;	
}
.triFour {
	position: absolute;
	top: -50px;
	left: 35%;
	opacity: 0.3;	
}


.sayHello {/* Wstęp: */
    font-family: 'Rozha One', serif;
    font-size: 100px;
    color: var(--fontColor);
    letter-spacing: 0;
    line-height: auto;
}
.myName a {
	padding: 8px;
}
.myDetails h2 {
    font-weight: 600;
    font-size: 18px;
	color: var(--accentColor);
}
.myDetails {
	display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

/* .sayHello .textHolder h2.myName {
    font-size: 35px;
    color: var(--fontColor);
    letter-spacing: 0.39px;
    font-weight: 700;
    margin-top: 30px;
}

.sayHello .textHolder p.mySkil {
    font-size: 14px;
    color: var(--accentColor);
    letter-spacing: 0.5px;
    margin: 20px 0 20px 50px;
    text-decoration: underline;
    font-weight: 700;
}

.sayHello .textHolder p.personalDesc {
	max-width: 720px;
    font-size: 18px;
    color: var(--fontColor);
    letter-spacing: 0.5px;
    line-height: 32px;
    font-weight: 500;
    text-align: justify;
} */

.topHolder .logo {
    margin: 15px;
}

.personalDesc span::after {
    content: '';
    display: block;
    width: inherit;
    height: 2px;
    background: var(--accentColor);
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

.personalDesc span {
    display: inline-block;
}

section.myCV {
    position: relative;
    background-color: var(--backgroundColor);
    padding: 0 20px;
    z-index: 0;
    padding-bottom: 300px;
}
section.portfolio {
    position: relative;
    background-color: var(--backgroundColor);
    padding: 0 20px;
    z-index: 0;
    padding-bottom: 300px;
}
section.contact {
    position: relative;
    background-color: var(--backgroundColor);
    padding: 0 20px;
    z-index: 0;
    padding-bottom: 300px;
}
.contactDetails {
	display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: calc(100% * 1/5);
	margin-right: calc(100% * 1/5);
    width: 100%;
	padding-top: 20px;
}
.contactDetails .row-6 {
	width: calc(100% * 2/5);
}

.lineHolder .row-2 {
    width: 20%;
    border-right: 1px solid var(--linesColor);
}
.lineHolder .row-2:last-child {
	border-right: none;
}
.portfolioProject .lineHolder .row-2 {
	border-right: 1px solid #efefef;
}
body.blueFrame .mainFrame .top, body.blueFrame .mainFrame .bottom, body.blueFrame .mainFrame .left, body.blueFrame .mainFrame .right {
	background-color: var(--fontUndelineUnactive);
}
.description a {
	color: var(--accentColor);
    font-weight: 900;
}

.lineHolder {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: -2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}


.cvIntro h2.bigHeading {
    font-size: 130px;
    margin-left: calc((100%)/6 - 13px);
    z-index: 2;
    margin-top: -528px;
    position: relative;
}

.cvIntro img.roundFace {
    margin-left: calc((100%) / 6 - 187px);
    margin-top: 120px;
	border-radius: 24px;
}

.cvIntro p.myName {
    text-align: right;
    margin-top: -21px;
    margin-right: calc((100% * 5/6 ) + -2px);
/* Jakub Kalitowski: */
    font-size: 28px;
    color: var(--fontColor);
    letter-spacing: 0.64px;
    line-height: 28px;
    font-weight: 700;
    z-index: 1;
    position: relative;
}

.cvIntro p.myBDate {
    text-align: right;
    margin-right: calc(100% - (100% / 6) + 2px);
/* 30.09.1991r.: */
    font-family: Averta-Semibold;
    font-size: 16px;
    color: var(--accentColor);
    letter-spacing: 0.5px;
    margin-top: 12px;
}

.cvIntro a.linkedIn {
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin-left: calc(100% / 6);
	margin-top: 40px;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	-webkit-transform: translateX(-20px);
	    -ms-transform: translateX(-20px);
	        transform: translateX(-20px);
}
.cvIntro a.linkedIn:hover {
	-webkit-transform: scale(1.15) translateX(-18px);
	    -ms-transform: scale(1.15) translateX(-18px);
	        transform: scale(1.15) translateX(-18px);
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.cvIntro a.linkedIn:hover img {
	-webkit-box-shadow: 0px 7px 30px rgba(0,0,0,0.2);
	        box-shadow: 0px 7px 30px rgba(0,0,0,0.2);
	border-radius: 100px;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.cvIntro a.linkedIn img {
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
	        box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
	border-radius: 100px;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.triangles svg * {
	mix-blend-mode: soft-light !important;
}

.cvExperiance {
 padding-top: 80px;
}

h3.cvMainTitle {
	font-family: 'Rozha One', serif;
	font-size: 50px;
	color: var(--fontColor);
	display: inline-block;
	margin-bottom: 20px;
	visibility: hidden;
	opacity: 0;
	width: fit-content;
}
.cvMainTitle.asDate {
	margin-left: calc(100% * 1 / 6);
    margin-bottom: 110px;
	margin-top: 120px;
}
.cvMainTitle::after {
	content: '';
	display: block;
	width: 100%;
	z-index: -1;
	height: 20px;
	background: var(--fontUndelineUnactive);
	position: relative;
	margin: -24px 0px 14px 2px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.cvMainTitle:hover::after {
	-webkit-transform: translateY(20px) scaleY(0.2);
	    -ms-transform: translateY(20px) scaleY(0.2);
	        transform: translateY(20px) scaleY(0.2);
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background: var(--accentColor);
}

.cvPosition {
	margin-right: calc(100% * 1/5);
	margin-right: calc(100% * 1/5);

}

.cvExperiance .cvPosition.exPosition {
    margin-left: calc((100%) * 1 / 5);
}

.cvPosition .date {
    text-align: right;
    margin-right: 66.6%;
/* 2014-2017: */
    font-size: 18px;
    color: var(--accentColor);
    letter-spacing: 0.64px;
    font-weight: 700;
}

.cvPosition h4.title {
    margin-left: 33%;
    font-size: 32px;
    color: var(--fontColor);
    font-weight: 600;
    letter-spacing: 0;
    padding: 26px 0 19px;
}

.cvPosition ul li {
	margin-left: calc(33.333% + 13px);
    list-style: disc;
    color: var(--fontColor);
}
.cvPosition > p.description {
	margin-left: calc(33.333% - 1px);
}
.cvPosition p.description {
    font-size: 16px;
    color: var(--fontColor);
    letter-spacing: 0.5px;
    line-height: 28px;
    text-align: justify;
}

.cvPosition {
    margin-top: 110px;
}

.cvExperiance h3.cvMainTitle {
    margin-left: calc(100% * 2/5 + -3px);
}

.cvEducation {
    margin: 180px 20% 0 20%;
}

.cvEducation h3.cvMainTitle {
    margin-left: -2px !important;
}
.cvEducation .cvPosition p.extraInfo, .cvEducation .cvPosition h4.title, .cvEducation .cvPosition p.description {
    margin-left: -2px !important;
}
.cvEducation .cvPosition .date {
	margin-left: calc(-100% * 1/3);
	width: calc(100% * 1/3);
}
.cvEducation .cvPosition {
	margin-right: calc(100% * 1/3);
}

.cvPosition p.extraInfo {
    margin-left: 33.2%;
/* Transport // Wydział: */
    font-size: 18px;
    color: var(--accentColor);
    letter-spacing: 0.64px;
    font-weight: 700;
    padding-bottom: 19px;
}
.skillsBig::before {
	content: '';
	display: block;
	width: 104px;
	height: 104px;
	/* padding: 1px; */
	background-image: url(img/podzialka.svg);
	background-size: 104px 104px;
}

.skillsBig svg {
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
}
.skillsBigDesc span {
	font-size: 14px;
	color: var(--fontColor);
	letter-spacing: 0.3px;
	line-height: 28px;
	background-color: var(--fontUndelineUnactive);
	padding: 7px 11px;
	-webkit-box-shadow: 0 24px 50px #00000036;
	        box-shadow: 0 24px 50px #00000036;
	text-align: center;
}
.skillsBigDesc {
    width: 290px;
    margin: 0 auto;
    padding-top: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
            transform: translateY(-20px);
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    position: absolute;
    left: 50%;
    margin-left: -140px;
    text-align: center;
}
.skillHolder:hover .skillsBigDesc {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.skillHolder {position: relative;margin-left: calc(16.666% - 53px);margin-right: calc(16.666% - 53px);width: 106px;display: inline-block;/* transform: translateX(-53px); */}

.skillsBig img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.skillHolder:hover .skillsBig {
	background-color: var(--linesColor);
	-webkit-box-shadow: 0 20px 56px rgba(0,0,0,0.18);
	        box-shadow: 0 20px 56px rgba(0,0,0,0.18);
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-transform: scale(1.1) rotate(3deg);
	    -ms-transform: scale(1.1) rotate(3deg);
	        transform: scale(1.1) rotate(3deg);

}
.cvSkills {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.cvSkills h3.cvMainTitle {
    margin-left: calc((100%) * 2/5 - 3px);
    margin-top: 120px;
    margin-bottom: 40px;
}

h4.minHeading {/* Web Development: */
    font-size: 26px;
    color: var(--fontColor);
    letter-spacing: 1.5px;
    font-weight: 700;
    display: inline-block;
    margin-left: calc(50% - 2px);
	width: 50%;
}

.cvSkills .pograms {
    width: 100%;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.pograms .secondRow {
	padding: 30px 0;
}
.cvSkills .firstRow {
    width: 100%;
    position: relative;
    height: 106px;
    margin: 96px 0 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.cvSkills .secondRow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.skillHolder:nth-child(2), .skillHolder:nth-child(3)  {
	margin-left: calc(16.666% - 53px);
}

.secondRow .skillHolder:first-child {
    margin-left: calc(33.333% - 53px);
}

.cvSkills .pograms > div:nth-child(2) {
	margin-top: 96px !important;
	z-index: 4;
}
.cvSkills .pograms > div:nth-child(3) {
	z-index: 3;
	position: relative;
}
.cvSkills .pograms > div:nth-child(4) {
	margin-top: 0 !important;
	z-index: 0;
	position: relative;
}
.cvSkills .languages {
	width: calc(100% * 2/5);
}
.cvSkills .interestings {
	width: calc(100% * 3/5);
}
.cvSkills .interestings, .cvSkills .languages {
	margin-top: 170px;
	vertical-align: top;
	display: inline-block;
}
.languages h4.minHeading {
	margin-left: 50%;
}
.miniTitle {
	font-size: 18px;
	color: var(--accentColor);
	letter-spacing: 0.56px;
	font-weight: 700;
	text-align: left;
	width: 100%;
}
.miniDesc {
	font-size: 14px;
	color: var(--fontColor);
	letter-spacing: 0.44px;
	font-weight: 500;
	text-align: left;
	width: 100%;
	line-height: 20px;
	margin-top: 5px;
}

.langCol {
	width: 50%;
}
.row > div {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.langLevel {
	border-radius: 100px;
	background-color: transparent;
	border: 1px solid var(--linesColor);
	width: 55px;
	height: 55px;
	z-index: -2;
	margin-left: calc(50% - 85px);
	margin-top: -15px;
}
.langLevel svg {
		margin: -1px 0 0 -1px;
}
.languages .row {
	margin-top: 45px;
}
.minHeading {
	margin-bottom: 36px;
}
.langCol::after {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background-color: var(--linesColor);
	position: absolute;
	top: -4px;
	left: -21px;
	z-index: -1;
}
.langFlag {
	position: absolute;
	padding: 11px;
}
.interestings h4.minHeading {
	margin-left: 25%;
	display: block;
}
.interestings .row {
	width: calc(50% - 2.5px);
	margin-top: 45px;
	display: inline-block;
}
.pograms .row {
	width: calc(100% * 1/5);
    margin-top: 75px;
    display: inline-block;
    margin-left: calc(100% * 1/5 - 2px);
}
.pograms .langCol {
    width: calc(100%);
	padding-top: 10px;
}
.interestings .langLevel, .pograms .langLevel {
	border: none !important;
	width: 80px;
	position: absolute;
	margin-left: -110px;
    margin-top: auto;
}
.interestings .langLevel::before, .pograms .langLevel::before  {
	display: none !important;
}

.interestings .row:nth-child(2):hover img {
	-webkit-animation: driver 1.2s ease-in-out;
	        animation: driver 1.2s ease-in-out;
}

.extraSkills {
    width: calc(33.33333% - 2px);
    display: inline-block;
    margin-top: 170px;
    vertical-align: top;
}
.personalAttr {
    width: 40%;
    display: inline-block;
    margin-top: 170px;
    vertical-align: top;
}
.extraSkills .row {
	width: calc(50% - 3px);
	display: inline-block;
	margin-top: 43px;
}
.extraSkills .row .langCol {
	width: 100%;
	padding-left: 40%;
}
.personalAttr .row {
	display: inline-block;
	width: calc(33.333% - 5px);
	margin-top: 43px;
}
.personalAttr .row .langCol, .extraSkills .row .langCol {
	width: 100%;
	padding-left: 40%;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
.personalAttr h4.minHeading {
	padding-right: 30%;
}
.personalAttr .miniDesc, .extraSkills .miniDesc {
	margin-top: 0;
}
.personalAttr .langCol::after, .extraSkills .langCol::after {
	top: -1px;
}
body.menuActive .topHolder.scroll {
	background: transparent !important;
}
.interestings .langLevel img.intIcon, .pograms .langLevel img.intIcon {margin: 0 auto;position: relative;display: block;}

footer .col1 {
	width: calc(100% * 1/3);
}
footer .col2 {
	width: calc(100% * 2/3);
}
footer .col1 {
	margin-left: 0%;
}
footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 200px 20% 0 20%;
}
footer .imOpen {
	font-size: 72px;
	color: var(--fontColor);
	letter-spacing: 0;
	line-height: 96px;
	font-weight: 700;
	margin-bottom: 70px;
}
footer .myCondition {
	padding: 22px 0;
    font-size: 18px;
    color: var(--fontColor);
    letter-spacing: 0;
    font-weight: 600;
}
footer .myCondition span {
	color: var(--accentColor);
}
footer .col2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
footer .col2 a {
	width: 50%;
	height: 179px;
	font-size: 23px;
	letter-spacing: 0.75px;
	line-height: 36px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	padding: 21px 40px 0 37px;
	-webkit-transition: .35s ease-in-out;
	-o-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
footer .col2 a:first-child {
	background-color: var(--linesColor);
	color: var(--fontColor);
	-webkit-transform: translateY(170px);
	    -ms-transform: translateY(170px);
	        transform: translateY(170px);
}
footer .col2 a:last-child {
	background-color: var(--linesColor);
	color: var(--fontColor);
	-webkit-transform: translateY(-30px);
	    -ms-transform: translateY(-30px);
	        transform: translateY(-30px);
}
footer .col2 a::after {
	content: '';
	display: block;
	width: 88px;
	height: 10px;
	background-image: url(img/arrow.svg);
	background-size: 88px 10px;
	margin-top: 55px;
	-webkit-transition: .35s ease-in-out;
	-o-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	margin-left: -60px
}
footer .col2 a:hover {
	background-color: var(--accentColor);
	color: var(--backgroundColor);
}
footer .col2 a:hover::after {
	-webkit-transform: translateX(60px);
	    -ms-transform: translateX(60px);
	        transform: translateX(60px);
}
.portfolioIntro {
	position: relative;
	padding-top: 270px;
	left: 16.6666%;
	width: 50%;
	padding-bottom: 160px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.portfolioDesc {
	width: 66.6666%;
	color: var(--fontColor);
	font-size: 14px;
	line-height: 26px;
	text-align: justify;
	margin-top: 60px;
}
.projects {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	flex-direction: column;
	margin: 0 20% 0 20%;
	padding-top: 180px;
	gap: 180px;
}
.singleProject {
	width: 100%;
	background: var(--backgroundColor);
	border: 1px solid var(--linesColor);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin-bottom: -1px;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-decoration: none;
}
.singleProject:hover {
 	-webkit-box-shadow: 0 20px 50px rgba(0,0,0,0.2);
 	        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
	z-index: 99;
	background: var(--fontUndelineUnactive);
}
/* .singleProject:nth-child(3n+2) {
	margin-left: -1px;
	margin-right: -1px;
	width: calc(33.333% + 1px);
	margin-top: 329px;
} */
.singleProject > div {
	width: 50%;
	position: relative;
}
.singleProject img {
	max-width: 500px;
	width: 100%;
	height: auto;
	-webkit-transform: translate(0,-46px);
	    -ms-transform: translate(0,-46px);
	        transform: translate(0,-46px);
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.singleProject:hover img {
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	-webkit-transform: translate(10px,-56px);
	    -ms-transform: translate(10px,-56px);
	        transform: translate(10px,-56px);
}
.singleProject .lSide {
	padding: 40px;
	position: relative;
}

.hTag {
	font-size: 14px;
	color: var(--accentColor);
	letter-spacing: 0.26px;
	font-weight: 600;
}
.projectTitle {
	font-size: 28px;
	color: var(--fontColor);
	letter-spacing: 0.3px;
	font-weight: 800;
	padding: 35px 0;
	/* text-transform: uppercase; */
}
.projectSlogan {
	font-size: 14px;
	color: var(--fontColor);
	letter-spacing: 0.92px;
	font-weight: 600;
	line-height: 20px;
}
.projecrDesc {
	font-size: 14px;
	color: var(--fontColor);
	letter-spacing: 0.3px;
	line-height: 23px;
	text-align: left;
	position: absolute;
	bottom: 40px;
	padding-right: 40px;
}
.seeProject {
	color: var(--fontColor);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.0px;
	position: absolute;
	bottom: 45px;
}
.seeProject::after {
    content: '';
    display: inline-block;
    width: 48px;
    height: 10px;
    background-image: url(img/arrow.svg);
    background-size: 88px 10px;
    -webkit-transition: .35s ease-in-out;
    -o-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    margin-left: 30px;
    background-position: top right;
}
.singleProject:hover .seeProject::after {
	-webkit-transform: translateX(15px);
	    -ms-transform: translateX(15px);
	        transform: translateX(15px);
}


svg.start g.percent80 {
    stroke-dasharray: 266.27, 66.568;
	-webkit-animation: dash80 0.8s ease-in-out;
	        animation: dash80 0.8s ease-in-out;
	-webkit-animation-delay: .6s;
	        animation-delay: .6s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}


svg.start g.percent60 {
    stroke-dasharray: 199.7,133.14;
	-webkit-animation: dash60 0.8s ease-in-out;
	        animation: dash60 0.8s ease-in-out;
	-webkit-animation-delay: .6s;
	        animation-delay: .6s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
/*.langLevel g.percent40 {
    stroke-dasharray: 69.08,103.62;
}
*/

svg.start g.percent40 {
    stroke-dasharray: 133.14,199.7;
	-webkit-animation: dash40 0.8s ease-in-out;
	        animation: dash40 0.8s ease-in-out;
	-webkit-animation-delay: .6s;
	        animation-delay: .6s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}


svg.start g.percent20 {
    stroke-dasharray: 66.57,266.27;
	-webkit-animation: dash20 0.8s ease-in-out;
	        animation: dash20 0.8s ease-in-out;
	-webkit-animation-delay: .6s;
	        animation-delay: .6s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

svg.start g.percent10 {
    stroke-dasharray: 36.04,324.37;
	-webkit-animation: dash10 0.8s ease-in-out;
	        animation: dash10 0.8s ease-in-out;
	-webkit-animation-delay: .6s;
	        animation-delay: .6s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.portfolioIntro h2.bigHeading {
    margin-left: -9px;
}
.portfolioProject {
	position: relative;
	padding: 0 20px 100px;
}
.langLevel {
	z-index: 99;
}
.noLineHolder {
	width: calc(100% - 1px);
	background-color: var(--fontColor);
	padding: 60px 0;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
}
/* loader */ 

		.loader {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: 9999;
			visibility: hidden;
		}

		.loader .lineHolder .row-2 {
			border: none !important;
			overflow: hidden;
		}
		.loader .lineHolder .row-2::after {
			content: '';
			display: block;
			background-color: var(--accentColor);
			height: 100vh;
			-webkit-transform: translateX(-100%);
			    -ms-transform: translateX(-100%);
			        transform: translateX(-100%);
			-webkit-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}
		.loader {
			background: #018fff;
		}
		.loader.active {
			visibility: visible;
		}
		.loader.active .lineHolder .row-2::after {
			-webkit-transform: translateX(0);
			    -ms-transform: translateX(0);
			        transform: translateX(0);
			-webkit-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

/** Moj Orange **/
.moEntrance {
	background-color: #000000;
	height: 1480px;
	position: relative;
}
.moEntrance img.logo {
    margin: 0 auto;
    position: relative;
    display: block;
    padding-top: 236px;
}
.moEntrance img.main {
    display: block;
    max-width: 865px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin-top: 24px;
}

/** JAN-PRO **/
.jpEntrance {
	background-color: #00387b;
	background-image: url(http://www.files.kalitowski.pl/wp-content/uploads/2017/07/jp-prez-bg.png);
	background-size: 1920px;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
}
.jpEntrance img.logo {
    margin: 0 auto;
    position: relative;
    display: block;
    padding-top: 70px;
}
.jpEntrance img.main {
	text-align: center;
	display: block;
	margin: 0 auto;
	margin-top: -58px !important;
	max-width: 1447px;
	width: 100%;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	position: absolute;
	bottom: 0;
}
.projectHolder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	padding: 80px 16.666666% 0;
	position: relative;
}
.projectHolder .row1 {
	width: calc(100% / 12);
	padding-right: 30px;
}
.projectHolder .row2 {
	width: calc(100% / 6);
	padding-right: 30px;
}
.projectHolder .row3 {
	width: calc(100% / 4);
	padding-right: 30px;
}
.projectHolder .row4 {
	width: calc(100% / 3);
	padding-right: 30px;
}
.projectHolder .row5 {
	width: calc(100% * 5 / 12);
	padding-right: 30px;
}
.projectHolder .row6 {
	width: calc(100% / 2);
	padding-right: 30px;
}
.projectHolder .row7 {
	width: calc(100% * 7 / 12);
	padding-right: 30px;
}
.projectHolder .row8 {
	width: calc(100% * 8 / 12);
	padding-right: 30px;
}
.projectHolder .row9 {
	width: calc(100% * 9 / 12);
	padding-right: 30px;
}
.projectHolder .row10 {
	width: calc(100% * 10 / 12);
	padding-right: 30px;
}
.projectHolder .row11 {
	width: calc(100% * 11 / 12);
	padding-right: 30px;
}
.projectHolder .row12 {
	width: calc(100%);
	padding-right: 30px;
}

.projectDescText {
    font-size: 16px;
    line-height: 28px;
    color: #3a3a3a;
    text-align: justify;
}

.projectDate {
    font-size: 14px;
    font-weight: 700;
    letter-spacing:  0.3px;
    color: var(--fontUndelineUnactive);
}

.projectTtile {
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 10px 0 30px 0;
    color: #3e3e3e;
}

p.projectTtile::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--fontUndelineUnactive);
    margin-top: 18px;
}

.projectDescText.extraRow {
    margin-top: 104px;
}

.specTitle {
    font-weight: 700;
    color: #3e3e3e;
    font-size: 18px;
    margin-bottom: 30px;
    width: 100%;
    margin-top: 36px;
}

.specTitle::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--fontUndelineUnactive);
    margin-top: 18px;
}

.specList li {
    padding-left: 20px;
    padding-bottom: 12px;
	font-size: 16px;
}

.specList li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: #e6e6e6;
    margin-left: -23px;
    position: absolute;
    margin-top: 5px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    border-radius: 2px;
}

.jpText img {
    max-width: 340px;
    margin-top: 22px;
}

.jpColor img {
    max-width: 730px;
}

.jpWeb img {
    margin-top: 50px;
    max-width: 900px;
    display: block;
    margin: 50px auto 0;
    -webkit-box-shadow: -1px 0px 100px rgba(0, 0, 0, 0.18);
            box-shadow: -1px 0px 100px rgba(0, 0, 0, 0.18);
}

.bfTitle {
    font-weight: 900;
    color: #00387b;
    font-size: 37px;
    margin-bottom: 30px;
    width: 100%;
    margin-top: 36px;
    text-align: center;
}

.bfTitle::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--fontUndelineUnactive);
    margin: 0 auto;
    margin-top: 18px;
}

.jpWeb::after {
    content: '';
    display: block;
    width: 100%;
    height: 1501px;
    position: absolute;
    bottom: 0;
    background: #f4f7f9;
    z-index: -1;
    left: 0;
}
.mainButton {
	text-decoration: none;
    margin: 0 auto;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 20px 40px;
    color: var(--backgroundColor);
    background: var(--accentColor);
    margin-top: 40px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.mainButton:hover {
	-webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
	        box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
}
.webPrez {
	padding-bottom: 60px;
}
.jpWarranty .row7 {
	padding-right: 0px !important;
}

.toRight.imgDesc {
	padding-left: 60px;
	padding-right: 0 !important;

}
.toLeft.imgDesc {
	padding-left: 0;
	padding-right: 60px !important;

}
.imgDesc {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.imgDesc .specTitle {
	margin-top: 0;
	font-size: 22px;
}

.jpWarranty .bfTitle {
    margin-bottom: 130px;
}
.contraSection {
	margin-bottom: 30px;
	overflow: hidden;
	padding-bottom: 140px;
}
.contraSection::before {
	content: '';
	display: block;
	height: 700px;
	z-index: 0;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
}
.contraSection.jpSlick::before {
	background-color: #003a79;
	background-image: url(http://www.files.kalitowski.pl/wp-content/uploads/2017/07/jp-dirty-bg.svg);
	background-repeat: no-repeat;
	background-size: 1474px;
	background-position: center bottom 200px;
}
.contraSection .portfolioSlider {
	margin-bottom: -100px !important;
}
.contraSection .bfTitle {
	color: var(--fontColor) !important;
	z-index: 1;
}
.portfolioSlider.partials .slick-list.draggable {
	overflow: visible !important;
}
.portfolioSlider.partials .slick-slide {
	margin: 0 180px;
	opacity: 1;
	-webkit-box-shadow: 0 14px 42px rgba(0,0,0,0.19);
	        box-shadow: 0 14px 42px rgba(0,0,0,0.19);
}
.portfolioSlider.partials .slick-slide.slick-active {
	opacity: 1;
}
/** MK-TRAMPING **/
.mktpEntrance {
	background-color: #263122;
	background-image: url(http://www.files.kalitowski.pl/wp-content/uploads/2017/07/intro-bg.png);
	background-size: 1920px;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
}
.mktpEntrance img.logo {
    margin: 0 auto;
    position: relative;
    display: block;
}
.mktpEntrance img.main {
	text-align: center;
	display: block;
	margin: 0 auto;
	margin-top: -58px !important;
	max-width: 1447px;
	width: 100%;
	position: absolute;
	bottom: 0;
}

.mktpPlayer {
    margin: 0 auto;
    background: url('http://www.files.kalitowski.pl/wp-content/uploads/2011/07/mbp-bg-1.png');
    background-size: 1187px;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 710px;
}

.mktpPlayer iframe {
    margin: 0 auto;
    position: relative;
    display: block;
    padding-top: 143px;
}
.mktpWeb img {
    margin-top: 50px;
    max-width: 900px;
    display: block;
    margin: 50px auto 0;
    -webkit-box-shadow: -1px 0px 100px rgba(0, 0, 0, 0.18);
            box-shadow: -1px 0px 100px rgba(0, 0, 0, 0.18);
}
.mktpWeb::after {
    content: '';
    display: block;
    width: 100%;
    height: 624px;
    position: absolute;
    bottom: 0;
    background: #f4f7f9;
    z-index: -1;
    left: 0;
}
.squareElem::after {
	    content: '';
    display: block;
    width: 1300px;
    height: 458px;
    position: absolute;
    bottom: 160px;
    left: 50%;
    margin-left: -650px;
    background-color: #f4f7f9;
	z-index: -1;
}
.contraSection.mktpSlick {
	background: transparent !important;
}
.contraSection.mktpSlick .slick-next, .contraSection.mktpSlick .slick-prev {
	stroke: var(--fontColor) !important;
}
.contraSection.mktpSlick .bfTitle::after {
	background: var(--fontColor);
}
.contraSection.mktpSlick::before {
	background-color: #91917c;
}
.slick-next, .slick-prev {
	z-index: 99 !important; 
}

/** TRAVEL-MED **/
.trmdEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/travel-med/img/bg.png);
	background-size: 1920px;
	background-position: center top;
	height: 933px;
	position: relative;
	margin-bottom: 80px;
}
.trmdEntrance img.logo {
    margin: 0 auto;
    position: relative;
    display: block;
}
.trmdEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1150px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}

.logo-holder {
    width: 100%;
    padding: 150px 0;
    background-color: var(--fontColor);
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}

.logo-holder img {
    margin: 0 auto;
    display: block;
}
.fullPortfolio img {
	    position: relative;
	    max-width: 1071px;
	    height: auto;
	    margin: 0 auto;
	    display: block;
}
.fullPortfolio {
	padding-right: 0 !important;
}
.jpWeb.trmdWeb::after {
	height: 1273px !important;
}
.portfolioProject.trmdProject {
	padding-bottom: 0 !important;
}

/** EMOB **/

.emobEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/emob/img/main-bg.png);
	background-size: 1920px;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
}
.emobEntrance img.logo {
    margin: 0 auto;
    position: relative;
    display: block;
    padding-top: 74px;
}
.emobEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1150px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.jpWeb.emobWeb::after {
    height: 956px !important;
}

/** IDEO **/

.ideoEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/ideo/img/bg.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
}
.ideoEntrance img.logo {
    margin: 0 auto;
    position: relative;
    display: block;
    padding-top: 125px;
}
.ideoEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1250px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.jpWeb.ideoWeb::after {
    height: 861px !important;
}

/** MUSCLE CLINIC **/

.muscleEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/muscle/img/bg.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
}
.muscleEntrance img.logo {
    margin: 0 auto;
    position: relative;
    display: block;
    padding-top: 65px;
	height: auto;
}
.muscleEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1160px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.jpWeb.musmainWeb::after {
    height: 1215px !important;
}
.jpWeb {
	padding-right: 0 !important;
}
/** SOCIAL TIME **/

.stimeEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/stime/img/bg@2x.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
	overflow: hidden;
}
.stimeEntrance img.logo {
    position: absolute;
    display: block;
    padding-top: 105px;
    height: auto;
    width: 950px;
    left: 50%;
    margin-left: -90px;
}
.stimeEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1006px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
/** FADREW **/

.fadrewEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/fadrew/img/bg@2x.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
	overflow: hidden;
}
.fadrewEntrance img.logo {
    position: absolute;
    display: block;
    padding-top: 105px;
    height: auto;
    width: 180px;
    left: 50%;
    margin-left: -90px;
}
.fadrewEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1100px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.jpWeb.fadrewWeb::after {
    height: 857px !important;
}
/** UNIPLAST **/

.uniplEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/uniplast/img/bg@2x.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
	overflow: hidden;
}
.uniplEntrance img.logo {
    position: absolute;
    display: block;
    padding-top: 105px;
    height: auto;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}
.uniplEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1100px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.jpWeb.fadrewWeb::after {
    height: 857px !important;
}

/** ZIELONE TARASY **/

.ztkEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/zielone-tarasy/img/bg@2x.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
	overflow: hidden;
}
.ztkEntrance img.logo {
    position: absolute;
    display: block;
    padding-top: 105px;
    height: auto;
    width: 220px;
    left: 50%;
    margin-left: -110px;
}
.ztkEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1100px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.jpWeb.ztkWeb::after {
    height: 589px !important;
}
.portfolioHeader {
	margin-left: calc((100% / 3) - 2px);
}
.portfolioHeader .description {
	color: var(--fontColor);
	font-size: 16px;
	line-height: 24px;
	text-align: justify;
	font-weight: 600;
}

/** Soller **/
.sollerEntrance {
	background-color: #232323;
	padding-top: 120px;
	/* padding-bottom: 100px; */
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgb(234, 234, 234);
}
.sollerEntrance img.logo {
    display: block;
    height: auto;
    width: 312px;
	margin: 0 auto;
}
.sollerEntrance img.intro {
	width: 90%;
	max-width: 1178px;
	margin: 0 auto;
	margin-top: 40px;
	display: block;
}

.sollerEntrance .entranceHead {
    color: var(--fontColor);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: bold;
    padding-top: 72px;
    line-height: normal;
}
.tokensSoller img {
	width: 100%;
	max-width: 828px;
	display: block;
	margin: 0 auto;
	margin-top: 32px;
	margin-bottom: 50px;
}
.sollerImg img {
	display: block;
	margin: 0 auto;
	/* margin-top: 32px; */
	/* margin-bottom: 50px; */
}
/* nju mobile */
.screenShadow {
	box-shadow: 0 4px 32px rgba(0,0,0,0.12);
}

/** WEB DESIGN **/

.wbdEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/web-design/img/bg@2x.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
	overflow: hidden;
}
.wbdEntrance img.logo {
    position: absolute;
    display: block;
    padding-top: 145px;
    height: auto;
    width: 312px;
    left: 50%;
    margin-left: -156px;
}
.wbdEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1100px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.jpWeb.rochWeb::after {
    height: 832px !important;
}
.mainButton.centerButton {
	display: block;
    width: 130px;
    text-align: center;
	margin-bottom: 60px;
}

/** DTP **/

.dtpEntrance {
	background-color: #37b1e4;
	background-image: url(/portfolio/dtp/img/bg@2x.png);
	background-size: cover;
	background-position: center top;
	height: 933px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 80px;
	overflow: hidden;
}
.dtpEntrance img.logo {
    position: absolute;
    display: block;
    padding-top: 345px;
    height: auto;
    width: 395px;
    left: 50%;
    margin-left: -197.5px;
}
.dtpEntrance img.main {
	text-align: center;
	display: block;
	margin-top: -58px !important;
	max-width: 1100px;
	width: 100%;
	bottom: 0;
	position: absolute;
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
/*
.phoneHolder, .kontaktPage {
	opacity: 0 !important;
}
.myCondition {
	display: none !important;
}
*/

/** Mod in 2022 **/

.aboutDesc {
    font-size: 18px;
    color: var(--fontColor);
    margin-left: calc(100% * 3/6 + -2px);
    line-height: 26px;
    margin-bottom: 70px;
    width: calc(100% * 1/3 + 2px);
}
.pageLoader {
	opacity: 0;
	display: block;
	position: absolute;
	bottom: -9px;
	left: 0;
	width: 100%;
	height: 8px;
	background: linear-gradient(-90deg, #FF3778, #FF907F, #FC8C30, #CAEF6c, #67E587, #9AF7f7, #FF907F, #FF3778);
	animation: gradient 3s ease infinite;
	background-size: 200% 400%;
	transition: ease-in-out 0.4s;
	/* transform: translateY(-8px); */
	/* width: 0px; */
}
.pageLoader.load {
	opacity: 100%;
	/* transform: translateY(8px); */
}
/* #content {
	background-color: var(--backgroundColor);
} */
.portfolioProject {
	opacity: 100%;
	transition: ease-in-out 0.2s;
	transition-delay: .3s;
}
.portfolioProject.load {
	opacity: 0%;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 200% 50%;
	}
}