/*---------------------------------------------------
	Basics
---------------------------------------------------*/

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;
	position: relative;
}

article, aside, details, div, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}

body {
	background: #fff !important;
    font-family: "futura-100", sans-serif;
	color:#444;
	letter-spacing: 0.01em;
	line-height: auto;
	font-weight: 400!important;
	/*font-size: 0.3em;
	overflow-x: hidden;*/
}

h1, h2, h3, h4, h5, h6 {text-transform: uppercase}

h1 {color: rgba(84,100,37,0.40); font-weight: 700!important; font-size: 9rem!important; line-height: 0.65em!important; letter-spacing: 0.06em;}

h2 {font-size: 1.3em!important; line-height: auto!important; letter-spacing: 0.05em; font-weight: 700!important}

h3 {font-size: 1em!important}

h4 {font-size: .8em!important; color: #888}

h5 {font-size: .4em!important}

h6 {font-size: 1em!important; line-height: 1.5em!important; letter-spacing: 0em!important}

hr {width:100%; margin: 10px 0}

.right {float: right}

.left {float: left} 

.rotate {writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;}

.button {
	text-align: center;
	text-decoration: none;
  	position: relative;
  	padding: 2% 5%;
  	letter-spacing: 0.2em;
  	color: #444;
	line-height: 0;
	align-content: center;
  	font-weight: 300;
  	text-transform: uppercase;
  	/* -- z-index: 2; -- */
	cursor: pointer;
}

.button:hover {color: #444;}

.button::before {
  	content: "";
  	position: absolute;
  	top: 0;
  	right: auto;
 	bottom: auto;
  	left: 0;
  	border: 2px solid rgba(84,100,37, 0.4);
  	display: block;
  	width: 100%;
  	height: 100%;
}

.button .lineTop {
  	display: block;
  	width: 0%;
  	height: 2px;
  	position: absolute;
  	top: 0;
  	right: auto;
 	bottom: auto;
  	left: 0;
}

.button .lineBottom {
 	display: block;
  	width: 0%;
  	height: 2px;
  	position: absolute;
  	top: auto;
  	right: 0;
  	bottom: 0;
  	left: auto;
}

.button .lineLeft {
  	display: block;
  	width: 2px;
  	height: 0%;
  	position: absolute;
  	top: 0;
  	right: auto;
 	bottom: auto;
  	left: 0;
}

.button .lineRight {
  	display: block;
	width: 2px;
  	height: 0%;
  	position: absolute;
  	top: auto;
  	right: 0;
  	bottom: 0;
  	left: auto;
}

.button .lineTop,
.button .lineBottom,
.button .lineLeft,
.button .lineRight {background-color: rgba(84,100,37,1)}

.hide-mobile {display: block}

/*---------------------------------------------------
	Sidebar
---------------------------------------------------*/

#sidebar {
	float: right;
    height: 100vh;
	width: 15%;
	margin: 2%;
}

#sidebar nav {position: fixed;}

#sidebar nav .logo {
	background-image: url( "../../images/svg/logo_schwarz.svg"); 
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 300px;
	height: 300px;
	margin: 0px -10%;
}

#sidebar ul {margin: 0}

#sidebar a {
	display: block;
	padding: 0;
	margin: 10px 0;
	font-size: 1.3em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 1;
	color: rgba(84,100,37,1.0);
	transition:all 200ms linear;
}

#sidebar .nav a:hover {color: rgba(84,100,37,0.6)}

#sidebar .icons {display: flex;}

#sidebar .icons a {
	display: flex;
	color: rgba(84,100,37,1.6);
	transition: color 1s ease;
	text-decoration: none;
}

#sidebar .icons a span {margin: 0 5px}

#sidebar .icons a:hover {color: rgba(84,100,37,0.6)}

#sidebar .active {text-decoration: underline; font-weight: 700!important;}

/*---------------------------------------------------
	Section: BASIC MAIN
---------------------------------------------------*/

#main {width: 75%}

#main section {padding: 40px 0}

#main section .title {
	display: block;
	position: relative;
	width: 60px;
	padding: 0;
	margin: 0;
	z-index: -1;
	pointer-events: none
}

/* ---------- section slide effect --------------- */

section.fadeRight {
	opacity: 1;
	transform: translateX(0);
    transition: opacity 1s ease, transform 1s ease;
} 

section.fadeRight.inactive,
body.all-loaded section.fadeRight {
    opacity: 0;
	transform: translateX(-3em);
}

section.fadeLeft {
	opacity: 1;
	transform: translateX(0);
    transition: opacity 1s ease, transform 1s ease;
} 

section.fadeLeft.inactive,
body.all-loaded section.fadeLeft {
    opacity: 0;
	transform: translateX(3em);
}

/* ---------- title slide effect --------------- */

.fadeIn .title .fadeInLeft{
	position: absolute;
	transform: translateX(0);
	opacity: 1;
	transition: opacity 1s ease .5s, transform 1s ease .5s;
}

.fadeIn.inactive .title .fadeInLeft,
body.is-preload .fadeIn .title .fadeInLeft {
	transform: translateX(-1em);
	opacity: 0;
}

.fadeIn  .title  .fadeInRight{
	position: absolute;
	transform: translateX(0);
	opacity: 1;
	transition: opacity 1s ease .5s, transform 1s ease .5s;
}

.fadeIn.inactive  .title  .fadeInRight,
body.is-preload .fadeIn  .title  .fadeInRight{
	transform: translateX(-1em);
	opacity: 0;
}

/*---------------------------------------------------
	Section: INTRO
---------------------------------------------------*/

#intro img {width: 100%}

/*---------------------------------------------------
	Section: ABOUT
---------------------------------------------------*/

#about .title {transform: rotate(180deg); height: 520px}

#about .wrapper {
	width: calc(40% - 60px);
	background: #d6cdc4;
	padding: 40px 20px;
	margin: 0;
	color: #444;
}

#about .content {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 2% ;
}

#about .handwriting {
	width: 100%;
	margin: 0;
	white-space: nowrap; 
	font-family: "carrotflower", sans-serif;
	text-align: center;
	font-size: 2em;
	font-weight: 400;
	line-height: 1.9em!important;
}

/*---------------------------------------------------
	Section: RESUME
---------------------------------------------------*/

#resume .experience {width: 60%; flex-wrap: wrap; float: left; margin: 0}

#resume .education {width: calc(45% - 80px); float: right; margin-right: 2%}

#resume .content {margin: 0; padding: 0}

#resume .content:first-child {padding: 0}

#resume ul{list-style:inherit}

#resume span {letter-spacing: 0px}

#resume .date {
	font-family: futura-100-book, sans-serif;
	font-weight: 400;
	letter-spacing: .08em;
	color: rgba(84,100,34,1);
	font-size: 0.95em;
}

#resume .experience .date {
	transform: rotate(180deg);
	display: block;
	text-align: center;
	margin: 0 20px 0 15px;
}


/*---------------------------------------------------
	Section: SKILLS & WORKS
---------------------------------------------------*/
#skills .title.symbol {position: relative; height: 100px; width: 100px; margin: -50px auto; z-index: 3; color: rgba(84,100,37,1)!important}

#skills .title.rotate.skill {transform: rotate(180deg); margin: -15% 0}
#skills .title.rotate.works {margin:-20% 0}

#skills .skills-container.d-flex, #skills .works-container.d-flex {width: calc(100% - 0px)}
#skills .skills-container.d-flex {margin-right: 53px}
#skills .works-container.d-flex {margin-left: 53px}

#skills .skills-content.d-flex, #skills .works-content.d-flex {width: 97.7%}

#skills .picture {width: 100%; margin:0px 0px}

#skills img {width:100%; object-fit: cover}

#skills .skills-content, #skills .works-content {
	width: 50%;
	flex-wrap: wrap;
	background: #d6cdc4;
	padding: 10px;
	margin: 0;
}

#skills .webdevelope-svg, #skills .adobe-svg {
	display: block;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80%;
	width: 100%;
	height: 130px;
	margin-top:-50px;
}

#skills .webdevelope-svg {background-image: url( "../../images/svg/web_schwarz.svg");}

#skills .adobe-svg {background-image: url( "../../images/svg/adobe_schwarz.svg"); }

#skills .skills-progress-bar {width: 100%; flex-wrap: wrap; justify-content: space-around}


#skills h6 {letter-spacing: 0.1em!important; font-weight: 300}


#skills .progress-bar {background-color: rgba(84,100,37,1) !important; }

#skills .progress {height:10px !important; background-color: rgba(255,255,255,0.4); border-radius: 10px;}

#skills .more-content {padding: 0; color: #444}

#skills .more-content .progress-bar {background-color: rgba(84,100,37,1.4) !important; color: #444 !important; border-radius : 10px 10px}

#skills .more-content .progress {height:10px !important; background-color: rgba(84,100,37,0.2); border-radius : 10px}

#skills .button {text-align: center; margin: 30px auto}

/*---------------------------------------------------
	Section: CONTACT
---------------------------------------------------*/

section#contact {padding-bottom: 0;}

#contact .title {transform: rotate(180deg); height: 476px}

#contact .block {
	position: relative;
	width: calc( 60% - 90px);
	padding: 20px;
	margin: 0;
	height: 300px;
}

#contact textarea.form-control {min-height: calc(12.5em + .75rem + 2px) !important}

#contact .block button:hover {
	background: #fff;
	color: #444;	
}

#contact .form-control:focus {
	border-color: #fff !important;
    box-shadow: 0 0 .1em .2rem rgba(255,255,255,.25) !important;
}

#contact .card {
	background: none !important;
	width: 100% !important;
	font-weight: 300;
	border: none !important;
}

#contact ul {margin: 10px 0}

#contact .list-group-item {
	background: none !important;
	margin: 5px 0 !important;
}

.card-img-top {
	border-radius: 10px !important;
	border: solid #fff thin;
	margin: 0;
}

/*---------------------------------------------------
	BACKGROUND CIRCLES
---------------------------------------------------*/

body > .circle {
	position: absolute;
	z-index: -1;
 	height: 1250px;
  	width: 1250px;
	border: solid thick rgba(84,100,37,.5);
  	border-radius: 50%;
}

body > .circle:nth-child(2){
	top: 600px;
	right: -600px;
}

body > .circle:nth-child(3){
	top: 2300px;
	left: -700px;
}

body > .circle:nth-child(4) {
 	height: 700px;
  	width: 700px;
	border: solid thick hsla(0,0%,100%,0.05);
	border-right: none;
	border-bottom: none;
  	border-radius: 100% 0 0 0;
	bottom: 0;
	right: 0px;
}


/*---------------------------------------------------
	SKILLS OVERLAY
---------------------------------------------------*/

#web.overlay, #adobe.overlay {
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	background-color:rgba(0,0,0,.5);
}

.overlay .content {
	float:right;	
	width: 40%;
	height: 100%;
	background: #d6cdc4;
	padding: 20px;
	text-align: center;	
	color:#444;
	z-index: 3;
}

.animate-right {position:relative; animation:animateright 1s}
@keyframes animateright{from{opacity:0; transform: translateX(100%)} to{opacity:1; transform: translateX(0)}}

.overlay #close {float:left}

.overlay .close-btn {float: right; width: 40px; height: 40px; padding: 15px; margin: 0; cursor: pointer;}

.overlay .portfolio-tittle {display: block; width:100%;}

.overlay object {display: flex; justify-content: center; width: 100%; height: inherit; margin: auto;}


/*-- PORTFOLIO FILTER -----------------------------*/

.overlay .filter {padding: 0; margin: 0 auto; cursor: pointer;}

.overlay li {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin: 5px 0px;
	font-weight: 400;
	font-size: .75em; 
	text-decoration: none;
	text-transform: uppercase;
	transition:all 200ms linear;
	color:#444
}

/*-- PORTFOLIO GALLERY ---------------------------*/

.overlay .portfolio {width:100%; margin: 10px auto; flex-wrap: wrap;}

.overlay .itemBox {
	position: relative;
	width: calc(50% - 20px);
	height: 33%;
	border: rgba(84,100,37,.6) solid thin;
	margin: 10px;
}

.overlay .itemBox img {
	position: relative;
	display: block;
	width: 100%;
}