/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

html, body{
	font-family: 'Roboto', 'Helvetica', 'Segoe UI', sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
header, footer{
	color: #fff;
	display: block;
	padding: 2vh;
	text-align: center;
	position: relative;
}
footer{
	font-size: 10pt;
	background-color: #1e2327;
	color: rgba(255,255,255,0.8)
}
header{
	padding: 20vh 4vw;
	padding-bottom: calc(20vh + 4vh);
	overflow: hidden;
	box-sizing: border-box;
	z-index: 1;
	background-color: #1e2327;
}
header h1{
	font-weight: 100;

}

p{
	text-align: justify;
}
header .contacts{
	background: rgba(0,0,0,0.2);
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100vw;
	box-shadow: 0 -4px 6px -1px #000 inset;
}
header .contacts a{
	display: inline-flex;
	align-content: center;
	color: #fff;
	padding: 10px;
	font-weight: 300;
	letter-spacing: 0.4pt;
	font-size: 11pt;
}
header .contacts a:nth-child(2){
	margin-left: 20px;
	margin-right: 20px;
}
header .bg{
	width: 100vw;
	height: 120%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #1e2327;
	background-image: url('../img/bg.jpg');
	background-size: cover;
	background-position: center;
	z-index: -1;
}
.with-icon{
	display: flex;
	align-items: center;
}
footer .with-icon{
	display: flex;
	justify-content: center;
}
.with-icon i{
	margin-left: 5px;
	margin-right: 5px;
}
h1, h2, h3, h4{
	font-weight: normal;
}
.wrapper{
	display: flex;
	flex-direction: column;
}
section#content,
section#resume{
	align-self: center;
	max-width: 960px;
	margin: 4vw auto;
	margin-top: 8vh;
	margin-bottom: 8vh;
}
section#content h2 > span,
section#resume h2 > span{
	line-height: 50px;
}
a{
	color: #00a859;
	cursor: pointer;
	text-decoration: none;
	border-radius: 4px;
	align-items: center;
}
a.button{
	color: #fff;
	background: #00a859;
	padding: 10px 20px;
	display: inline-flex;
	font-size: 10pt;
	text-transform: uppercase;
	text-transform: uppercase;
	align-items: center;
	margin-bottom: 5px;
}
a i{
	margin-right: 10px;
}
.profile-pic{
	width: 40vw;
	max-width: 150px;
	box-shadow: 0 3px 10px -5px #000;
	border-radius: 40vw;
}
hgroup h1, hgroup h2, hgroup h3, hgroup h4{
	padding: 0;
	margin: 0;
}
hgroup h2{
	font-size: 10pt;
	letter-spacing: 2px;
	font-weight: normal;
	text-transform: uppercase;
	opacity: 0.7;
}
hgroup{
	margin-bottom: 20px;
}
.box{
	background: #1e2327;
	border: solid thin #1e2327;
	padding: 10px 30px;
	color: #fff;
	border-radius: 3px;
	font-size: 10pt;
	margin-bottom: 30px;
}
hr{
	border: none;
	border-top: solid thin #fff;
	opacity: 0.1;
}
.tech-stack{
	opacity: 0.6;
}
@media screen and (max-width: 767px) {
	*{
		box-sizing: border-box;
	}
	a{
		/*display: flex;*/
		width: 100%;
		box-sizing: border-box;
		text-align: left;
		margin-bottom: 3px;
		margin-right: 0 !important;
		margin-left: 0 !important;
		/*padding: 10px 4vw !important;*/
	}
	header{
		padding-bottom: calc(20vh + 20vh);
	}
	.box{
		padding: 10px 20px;
	}
}
small{
	font-size: 10pt;
	opacity: 0.7;
}
.right{
	float: right;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.bold{
	font-weight: bold;
}
.small{
	font-size: 0.8em;
}
.no-wrap{
	white-space: nowrap;
}
.accent{
	color: #00a859;
}
.grayscale{
	filter: grayscale(100%);
}
.faded{
	opacity: 0.7;
}
.clearfix{
	clear: both;
	display: block;
}
.code-heading{
	display: block;
	color: #00a859;
	padding-top: 1em;
	font-weight: bold;
}
.uppercase{
	text-transform: uppercase;
}
.hidden{
	opacity: 0;
}
.relative-pos{
	position: relative;
}
.padded-y{
	padding-top: 0.5em;
	padding-bottom: 0.1em;
}
/* Vue transitions */
.slide-fade-enter-active {
  transition: all .3s ease .3s;
}
.slide-fade-leave-active {
  transition: all .3s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateY(20px);
  opacity: 0;
}


.slide-fade-scale-enter-active {
  transition: all .2s ease .2s;
}
.slide-fade-scale-leave-active {
  transition: all .2s ease;
}
.slide-fade-scale-enter, .slide-fade-scale-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateY(0px) scale(1,0);
  /*opacity: 0;*/
}
#content-wrapper{
	padding: 0 1rem;
	font-size: 11pt;
}

/*resume styling*/
.content-box{
	margin: 3em 0;
	padding-bottom: 1rem;
	border-bottom: solid thin rgba(0,0,0,0.2);
}
.content-box::after{
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	opacity: 1;
	margin-top: 14px;
	position: relative;
	float: right;
	margin-right: -5px;
}
.content-box::before{
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	opacity: 1;
	margin-top: -3.2em;
	position: relative;
	float: left;
	margin-left: -5px;
}
#whoami.content-box::before,
#education.content-box::before,
#sports.content-box::before,
#clubs.content-box::before
{
	background: none;
}
#whois.content-box::before{
    margin-top: -4.6em;
    margin-left: -49px;
}
.content-box h2 {
	display: inline-block;
	border: solid thin #333;
	color: #333;
	padding: 5pt 10pt;
}
.content-box h2~hr {
	width: 100%;
    border-bottom: solid thin #333;
    opacity: 1;
	margin-top: -15.5pt;
}
.content-box h2~hr::after{
	content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #333;
    opacity: 1;
    margin-top: -2.5px;
    position: relative;
	float: right;
	margin-right: -5px;
}
#whoami {
	font-size: 11pt;
}
#whoami hgroup{
    display: flex;
    align-items: flex-end;
}
@media screen and (max-width: 640px) {
	#whoami hgroup{
		flex-direction: column;
		align-items: flex-start;
	}
}

#whoami h1{
    color: #00a859;
    font-size: 3.5rem;
    padding-right: 1rem;
    font-weight: 100;
    line-height: 0.9;
    margin-top: 0.1em;
}
#whoami h3{
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1;
}

.terminal .content-box{
	margin: 0.2em 0;
}
.terminal ul{
	padding: 0;
	margin-bottom: 0;
	list-style: none;
}
.terminal ul li{
	list-style: none;
	padding: 0.4em 0;
}
.small-talk{
	vertical-align: top;
	display: inline-block;
	margin-bottom: 0;
	border-bottom: none;
	width: 33%;
	box-sizing: border-box;
	padding: 0 1em;
	margin-top: 0.2em;
}
.small-talk::after{
	display: none;
}
.small-talk li{
	margin: 0;
	padding: 0.1em 0;
}
#whois ul li{
	display: flex;
	align-items: center;
}
#whois ul li a{
	color: #fff;
}
#whois ul li a:hover{
	color: #fff;
	text-decoration: underline;
}
#whois ul li span{
	width: 16px;
	text-align: right;
	display: inline-block;
	padding-right: 1em;
	padding-left: 0;
}
#whois ul li span img{
	display: inline;
	height: 16px;
}
#skills_list td{
	padding: 0.6em 0;
	border-top: rgba(0,0,0,0.1) thin solid;
}
#skills_list td.skill_title{
	text-align: right;
	width:30% !important;
	vertical-align: top;
	padding-right: 1rem;
	opacity: 0.8;
	font-weight: normal;
	padding-top: 0.9em;
}
#skills_list td.skill_list{
	text-align: left;
}
#skills_list h3{
	color: #00a859;
	margin-bottom: 0.2em;
}
#skills_list p{
	margin-top: 0.1em;
}
#experience hr{
	margin-top: -1.4em;
}
#experience h3{
	margin-bottom: 0.2em;
	text-transform: uppercase;
	margin-top: 1.5em;
}
#experience p{
	margin-top: 0.4em;
}

span.skill{
	display: inline-block;
	padding: 5px 9px;
	margin-right: 2px;
	margin-bottom: 2px;

    background:#00a859;
    color: #fff;
    /*cursor: pointer;*/
    border-radius: 2px;
    align-items: center;
}
.timeline{
	width: 100%;
	border-spacing: 0;
}
.timeline span.dot{
    background:#00a859;
	display: block;
	width: 30px; 
	height: 30px; 
	border-radius: 30px;
	margin: 0 1rem;
}
.timeline tr.expanding-button:hover{
	cursor: pointer;
}
.timeline span.dot.dot-hidden{
	box-sizing: border-box;
	border: solid 2px #00a859;
	background: #fff;
	cursor: pointer;

    text-align: center;
    line-height: 2.1em;
    font-size: 0.85em;
    font-weight: bold;
}
.timeline span.dot.dot-outline{
	box-sizing: border-box;
    border: dotted 2px #00a859;
    margin-top: 1.8em;
    margin-bottom: 4em;
    background: #fff;
    text-align: center;
    line-height: 2.2em;
    font-size: 0.85em;
    font-weight: bold;
    opacity: 1;
    transform: scale(1,1);
    transition: all .1s;
    color: #555;
}
.timeline tr.expanding-button:hover span.dot.dot-outline{
	color: #333;
}
.timeline tr td.hint{
	vertical-align: top;
	padding-top: 1.5em;
}
.timeline tr.expanding-button td.hint span.hint-tip{
	background: rgba(0,0,0,0.1);
	padding: 0.6em 1em;
	opacity: 0.8;
	display: inline-block;
	border-radius: 2px;
	transition: all .3s;
	text-transform: uppercase;
	transform: translateX(20px);
    font-size: 10pt;
}
.timeline tr.expanding-button td.hint{
	position: relative !important;
}
.timeline tr.expanding-button td.hint span.hint-tip{
}
.timeline tr.expanding-button:hover td.hint span.hint-tip{
	opacity: 1;
	transform: translateX(10px);
}
.timeline tr.expanding-button td.hint span.hint-tip::before{
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    border-top: 10pt solid transparent;
    border-bottom: 10pt solid transparent;
    border-right: 10pt solid rgba(0,0,0,0.1);
    position: absolute;
    top: 2pt;
    left: -10pt;
}

.timeline tr th.left-padded{
	padding-left: 1em;
}
.timeline tr th{
	text-transform: uppercase;
	font-weight: normal;
	padding-top: 1rem;
	padding-bottom: 1rem;
	opacity: 0.7;
}
.timeline td.date{
	width: 65px;
	text-align: right;
	font-size: 0.8em;
	vertical-align: top;
	padding-top: 6px;
}
.timeline td.date span{
	opacity: 0.7;
}
.timeline tr td.dot-td{
	vertical-align: top;
}
.timeline td.title{
	vertical-align: top;
}
.timeline tr td.url-skills a.desc-secondary,
.timeline tr td.award-skills span.desc-secondary{
    display: inline-flex;
    align-items: center;
    line-height: 1.6rem;
    vertical-align: middle;
    white-space: nowrap;
}
.timeline tr td span.desc-secondary img.award-skills{
	height: 26px;
	padding-right: 0.5em;
}
.timeline tr td a.desc-secondary img.url-skills{
	height: 16px;
	padding-right: 0.5em;
}
.timeline tr td.title{
	font-size: 1.05em;
	font-weight: bold;
}
.timeline tr td.title span{
	display: inline-block;
	margin-left: -1px;
	padding-right: 1em;
}
.timeline tr td.description{
	padding-bottom: 1em;
}
.timeline tr td.description span{
	position: relative;
	top: -0.2em;
	opacity: 0.8;
}
.timeline tr td span.desc-secondary,
.timeline tr td a.desc-secondary{
	padding-right: 1em;
	padding-left: 1em;
}
.timeline tr td div.right{
	padding-left: 1em;
}
.timeline tr.line-horizontal{
	background: url('/img/icons/line-h.svg') repeat-x 10px 12px;
	background-size: 4px;
}
.timeline tr td.date,
.timeline tr td.dot-td,
.timeline tr td.title span,
.timeline tr td a.desc-secondary,
.timeline tr td span.desc-secondary,
.timeline tr td div.right
{
	background: #fff;
}
.timeline tr td.dot-td{
	padding-top: 0;
	padding-bottom: 0;
	background: url('/img/icons/line-v.svg') repeat-y 30px 0px #fff;
	background-size: 4px 4px; 
}
.timeline tr td.dot-td.dot-td-outline{
	height: 60px;
	background: url('/img/icons/line-v-dashed.svg') repeat-y 31px #fff;
	background-size: 4px 4px; 
}
.timeline tr td.dot-td.end-dot{
	background: #fff;
}
.fixed-icon{
	position: absolute;
	top: 9pt;
}
.skill-list-tested{
	text-align: center;
}
.skill-component-div{
	width: 160px;
	height: 160px;
	margin: 1em;
	margin-bottom: 8em;
	display: inline-block;
	position: relative;
	background: #fff;
}
.skill-component-div *{
	pointer-events: none;
}
.skill-component-div img{
	left: 50%;
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}
.skill-component-div .score,
.skill-component-div .ranking,
.skill-component-div .date{
	display: block;
	width: 50%;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.skill-component-div .score{
	font-size: 1.4em;
}
.skill-component-div .ranking{
	background: #f34;
	font-weight: bold;
	padding: 4pt 5pt;
	border-radius: 2px;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 1pt;
	margin-top: 3pt;
}
.skill-component-div .ranking.class10{ background: #00a80e }
.skill-component-div .ranking.class20{ background: #33BA29 }
.skill-component-div .ranking.class30{ background: #6dba29 }
.skill-component-div .date{
	opacity: 0.7;
}
#notification_area{
	display: block;
	width: 100%;
	height: 100px;
	position: fixed;
	background: url(/img/bg.jpg) #000;
	background-size: cover;
	z-index: 9999;
	box-shadow: 0 3px 10px -5px #000;
	opacity: 1;
	perspective: 200px;
	transform: translate3d(0px, -10px, 0px);
	transition: all .3s cubic-bezier(0.54, 0.04, 0, 0.93) 0s;
}
#notification_area.not-visible{
    opacity: 0;
	transform: translate3d(0px, -100px, 0px);
}
#notification_area .profile-pic{
	width: 110px;
	margin: 0.8em 1em;
	display: inline-block;
	float: left;
}
#notification_area hgroup{
	display: inline-block;
	color: #fff;
	margin-top: 1.5em;
	vertical-align: baseline;
	float: left;
	transform: scale(0.9,0.9);
	transform-origin: left;
}
#notification_area *{
	font-weight: 100 !important;
}
#notification_area .contacts{
	position: absolute;
	float: right;
	right: 1em;
	display: block;
	color: #fff;
	margin: 1em;
	margin-top: 1.7em;
	letter-spacing: 0.4pt;
}
#notification_area .contacts a{
	display: flex;
	align-items: center;
	padding: 0.1em 0;
	font-size: 0.8rem;
	color: #fff;

}
@media screen and (max-width: 980px) {
	#notification_area .contacts{
		display: none;
	}
	.timeline td.award-skills,
	.timeline td.url-skills{
		display: block;
		background: #fff !important;
		text-align: left;
		margin: 0.5em 0;
		padding-left: 1em;
		vertical-align: top;
		margin-top: -6px;
	}
	.desc-secondary{
		display: block;
		margin-top: 0.2em;
		padding-left: 0 !important;
		vertical-align: middle;
	}
	.desc-secondary img{
		display: inline-block;
		padding-top: 0.3em;
	}
	p{
		text-align: justify;
	}
}
@media screen and (max-width: 820px) {
	.small-talk{
		width: 100%;
	}

	#whois ul li span{
		display: inline-block;
		margin-right: 1em;
	}

	#whoami > hgroup > h1{
		margin-top: 0.2em;
		font-size: 5vw;
	}
	span.desc-secondary,
	a.desc-secondary{
		display: flex;
		align-items: center;
	}
}
@media screen and (max-width: 640px) {
	#whoami > hgroup > h1{
		font-size: 10vw;
		margin-bottom: 0.4rem;
	}
}
@media screen and (max-width: 520px) {
	#notification_area{
		text-align: left;
	}
	#notification_area .profile-pic{
		display: block;
		float: none;
		margin: 1em auto;
	}
	#notification_area hgroup{
		display: none;
	}
	.timeline td.date{
		width: 50px;
		height: 12px;
	}
	
}
svg#artwork{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

@media screen and (max-width: 960px) {
	svg#artwork{
		display: none;
		visibility: hidden;
	}
	
}
@keyframes loading-anim{
	0%{
		opacity: 0;
		transform: scale(0.5,0.5);
	}
	50%{ opacity: 1 }
	100%{
		opacity: 0;
		transform: scale(1,1);
	}
}
#loader{
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 9999;
	opacity: 1;
	transition: opacity .5s ease, display .5s ease .5s;
}
#loader span{
	padding-top: 0.2em;
	font-size: 8pt;
}
#loader.loaded{
	opacity: 0;
}
#loader svg.loader{
	transition: all 1s;
}
#loader.loaded svg.loader{
	transform: scale(1.5,1.5);
	opacity: 0;
}
#loader svg.loader{
	width: 50px;
	height: 50px;
}
#loader svg.loader circle{
	transform-origin: 50% 50%;
	animation: loading-anim 0.3s ease infinite;
}

#header,
#parallax,
#profile{
	transition: all 1s cubic-bezier(0.01, 1.29, 0.59, 0.99)
}