/* --- Typography --- */
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700,300|Ubuntu+Condensed);
body {
    font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
}

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

h1, h2, h3 {
	font-family: 'Ubuntu Condensed', sans-serif;
	margin-bottom: 1.5rem;
}

h4, h5, h6 {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
}

h1 {
    font-size: 5rem;
}
h2 {
    font-size: 4rem;
}

p, li {
	color: #666;
}
/*
.identity, .subtitle {
	font-family: 'Shadows Into Light', cursive;
	text-transform: none!Important;
}
*/
/* --- Layout --- */
body {
	position: relative;
}
.container {
	max-width: 960px;
}

.section {
	padding: 110px 0 80px;
}

.section-alt {
	background: #f4f4f4;
}

/* --- Element --- */
img {
	max-width: 100%;
}
.thumbnail {
	border-radius: 0;
	margin-top: 15px;
	margin-bottom: 15px;
}
.section ul {
	list-style-type: square;
	padding-left: 20px;
}
.section li {
	margin-bottom: 10px;
}
.section .list-line {
	list-style-type: none;
	padding: 0;
}
.section .list-line li {
	border-bottom: 1px dotted #ccc;
	padding: 0 0 10px;
}
.section .list-line li:last-child {
	border: none;
}
.section .list-tick {
	list-style-type: none;
	padding-left: 0;
}
.section .list-tick li {
	padding-left: 20px;
}
.section .list-tick li:before {
	content: "\f00c";
	margin-left: -20px;
	margin-right: 10px;
	
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 80%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.hr-short-right {
	border-color: rgba(0,0,0,0.1);
	width: 60%;
	float: right;
	margin: 0 0 20px;
}
.icon-contact {
	width: 16px;
	display: inline-block;
	text-align: center;
	color: #aaa;
}

/* --- Navigation Menu --- */
#wrapper {
	position: relative;
    z-index: 1;
    background: #fff;
}
#wrapper #navbar-main {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	border-radius: 0;
	font-family: 'Ubuntu Condensed', sans-serif;
	text-transform: uppercase;
	font-size: 1.5rem;
}
#wrapper #navbar-main.sticky {
	position: fixed;
}
#wrapper #navbar-main .navbar-brand {
	font-size: 2rem;
    letter-spacing: 0px;
    color: #000000;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    border-bottom: 2px solid #000000;
    background: none;
}

/* --- Magnific Popup --- */
.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}


/* --- Section - Hero --- */
#section-hero {
  text-align: center;
  /*background: #444 url(../img/bg-top.jpg);
  background-size: cover;*/
  color: #fff;
  height:100vh;
  position: relative;
	z-index: 2;
}

.parallax-window {
    min-height: 60vh;
    background: transparent;
}

#section-hero h1 {
  color: white;
}

#profile-image-eunice {
    /*width: 140px;*/
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}



.headline { 
    border: 1px solid #ffffff;
    border-bottom: none;
    display: inline-block;
    padding: 20px 30px 0;
    position: relative;
}

.headline:before, .headline:after {
    content: "";
    height: 1px;
    width: 85px;
    background: white;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

.headline:after {
    right: 0;
    left: auto;
}
.headline h1 { margin: 0 0 10px; }
.headline h5.subtle { margin: 0px 0px -7px 0px; }

#header-content-wrapper {
    display: table;
    width: 100%;
    height: 100vh;
}

#header-content {
    display: table-cell;
    vertical-align: middle;
}


.arrows, #scroll-down {
	cursor: pointer;
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
}

.arrows path {
	stroke: #fff;
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari ? Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari ? Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari ? Chrome */
}

/*--- Section ---*/
.section .section-title {
	display: inline-block;
	margin: 0 auto 80px;
	border: 1px solid #222;
	padding: 0 40px 20px;
	text-transform: uppercase;
	position: relative;
}
.section .section-title .subtitle {
	margin: 0;
	background: #fff;
	padding: 0 10px;
	position: relative;
	top: -12px;
	display: inline-block;
}
.section-alt .section-title .subtitle {
	background: #f4f4f4;
}
.section .section-title .title {
	margin: 0;
}

.time-stamp {
	
	padding-top: 20px;
}
.time-stamp h2 {
	font-size: 5rem;
	letter-spacing: -4px;
	margin-top: 7px;
}
.time-stamp h2 span {
	position: relative;
}
.time-stamp h2 small {
	position: absolute;
	top: -4px;
	left: 2px;
	font-size: 10px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
}

.role {
	
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: 10px;
}
.site {
	margin-bottom: 10px;
	color: #777;
}
.time-block {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-bottom: 60px;
	margin-bottom: 60px;
}
.container .time-block:last-child {
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.description-wrapper {
}
.description {
	padding-left: 40px;
	padding-bottom: 10px;
	padding-top: 20px;
	border-left: 1px solid rgba(0,0,0,0.1);
}

/* --- Section - Personal Details --- */
.padding-b30 {
    padding-bottom: 30px;
}

/* --- Section - Skills --- */
.sw-block {
	position: relative;
}
.progress {
	border-radius: 0;
	box-shadow: none;
	background: #777;
	height: 6px;
}
.progress-bar {
	background: #222;
}
.sw-block .tooltip {
	display: block;
	opacity: 1;
	position: absolute;
	top: -2px;
    z-index: 1;
}
.tooltip-inner  {
	background: #222;
	border-radius: 0;
}
.tooltip.top .tooltip-arrow {
	border-top-color: #222;
}

/* --- Section - Contact --- */

#section-contact {
    color: #fff;
    height:80vh;
    position: relative;
	overflow: hidden;
}
#section-contact .overlay{
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	
	
    background: #333 url(../img/bg-top.jpg);
    background-size: 100% auto;
	background-position: center;
	transform: translateZ(0);
	-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
   	backface-visibility: hidden;
	transition: all 30s linear;
}

#section-contact:hover .overlay {
	transform: scale(1.4);
}
/*#section-contact .layer{
    margin-top: -110px;
    padding-top: 100px;
    background: url(../img/bg-pattern.png) repeat, rgba(0, 0, 0, 0.8);  
    height: 60vh;
}*/

#section-contact a {
    color: #fff;
    border-bottom: 1px dotted #fff;
    text-decoration: none;
}
#section-contact a:hover {
    border-bottom-style: solid;
    text-decoration: none;
}
#section-contact .subtitle {
	background: transparent;
}
#section-contact p, #section-contact h1, #section-contact h2, #section-contact h3, #section-contact h4, #section-contact h5, #section-contact h6 {
	color: #fff;
}

#section-contact .section-title {
	color: #fff;
	border-color: #fff;
	border-top: none;
}

#section-contact .section-title:before {
    content: "";
    height: 1px;
    width: 50px;
    background: white;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#section-contact .section-title:after {
    content: "";
    height: 1px;
    width: 50px;
    background: white;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

@media (max-width: 1200px) {

}

@media (max-width: 992px) {

}

@media (max-width: 768px) {
    
    #section-contact {
        height: 100vh;
    }

    #section-contact .layer{
        height: 100vh;
    }
    
    #section-contact p { 
        text-align: center;
    }
    
    #section-education .time-block .time-stamp, #section-education h5, #section-education h6, #section-experience .time-block .time-stamp, #section-experience h5, #section-experience h6{ 
        text-align: left;
    }
    
    .hr-short-right {
        border-color: rgba(0,0,0,0.1);
        width: 60%;
        float: left;
        margin: 0 0 20px;
    }
    
    .description {
	padding-left: 20px;
    }
    
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        border-bottom: none;
        background: #e6e6e6;
    }
    
    .navbar-nav>li>a {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

}

@media (max-width: 480px) {
    
    #section-contact {
        height: 80vh;
    }

    #section-contact .layer{
        height: 80vh;
    }
    
    #section-contact p { 
        text-align: center;
    }
    
    #section-education .time-block .time-stamp, #section-education h5, #section-education h6, #section-experience .time-block .time-stamp, #section-experience h5, #section-experience h6{ 
        text-align: left;
    }
    
    .hr-short-right {
        border-color: rgba(0,0,0,0.1);
        width: 60%;
        float: left;
        margin: 0 0 20px;
    }
    
    .description {
	padding-left: 20px;
    }
    
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        border-bottom: none;
        background: #e6e6e6;
    }
    
}






/* BG */
body {
	background: #000;
}
	#bg {
		-moz-transition: opacity 2s ease-in-out;
		-webkit-transition: opacity 2s ease-in-out;
		-ms-transition: opacity 2s ease-in-out;
		transition: opacity 2s ease-in-out;
		height: 100%;
		left: 0;
		opacity: 0.5;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1;
	}

		#bg div {
			-moz-transition: opacity 3s ease, visibility 3s;
			-webkit-transition: opacity 3s ease, visibility 3s;
			-ms-transition: opacity 3s ease, visibility 3s;
			transition: opacity 3s ease, visibility 3s;
			background-size: cover;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			visibility: hidden;
			width: 150%;
		}

			#bg div.visible {
				-moz-animation: bg 45s linear infinite;
				-webkit-animation: bg 45s linear infinite;
				-ms-animation: bg 45s linear infinite;
				animation: bg 45s linear infinite;
				opacity: 1;
				visibility: visible;
				z-index: 1;
			}

				#bg div.visible.top {
					z-index: 2;
				}

				@media screen and (max-width: 1280px) {

					#bg div.visible {
						-moz-animation: bg 29.25s linear infinite;
						-webkit-animation: bg 29.25s linear infinite;
						-ms-animation: bg 29.25s linear infinite;
						animation: bg 29.25s linear infinite;
					}

				}

				@media screen and (max-width: 736px) {

					#bg div.visible {
						-moz-animation: bg 18s linear infinite;
						-webkit-animation: bg 18s linear infinite;
						-ms-animation: bg 18s linear infinite;
						animation: bg 18s linear infinite;
					}

				}

			#bg div:only-child {
				-moz-animation-direction: alternate !important;
				-webkit-animation-direction: alternate !important;
				-ms-animation-direction: alternate !important;
				animation-direction: alternate !important;
			}

		body.is-loading #bg {
			opacity: 0;
		}

	@-moz-keyframes bg {
		0% {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-moz-transform: translateX(-25%);
			-webkit-transform: translateX(-25%);
			-ms-transform: translateX(-25%);
			transform: translateX(-25%);
		}
	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-moz-transform: translateX(-25%);
			-webkit-transform: translateX(-25%);
			-ms-transform: translateX(-25%);
			transform: translateX(-25%);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-moz-transform: translateX(-25%);
			-webkit-transform: translateX(-25%);
			-ms-transform: translateX(-25%);
			transform: translateX(-25%);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-moz-transform: translateX(-25%);
			-webkit-transform: translateX(-25%);
			-ms-transform: translateX(-25%);
			transform: translateX(-25%);
		}
	}