@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100;
    src: local("Roboto Thin"), local("Roboto-Thin"), url("http://fonts.gstatic.com/l/font?kit=QrUE-w9Q5KaJGU8ZCFvZHHgShx1I3EQEk3P0UXxV4G1dxlT5RfGIy95sQWGkHIXZT_wDREvo4O6_6v9ljamcpjDjNODm32iLRYw2SNTAhDi20L9efk2PUOdb5H1Th4EY") format("woff2"), url("http://fonts.gstatic.com/l/font?kit=-l0Ns948hNYIy2F0QzsfEXgShx1I3EQEk3P0UXxV4G1dxlT5RfGIy95sQWGkHIXZT_wDREvo4O6_6v9ljamcpjDjNODm32iLRYw2SNTAhDi20L9efk2PUOdb5H1Th4EY") format("woff");
}

* { margin: 0; padding: 0;  font-family: sans-serif;}

a {  text-decoration: none; }
html,body{
  height:100%;
}
body {  font-size: 15px; } 
#pageWrapper { height: 100%;}
#headWrapper {  
	background: #475665;
    height: 60px;
    position: fixed;
	top: 0;
	left:0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 99999;


}
#headWrapper h1 {float: left; font-size: inherit;}
#headWrapper h1  a{
	font-weight: 900;
    margin: 0 65px 0 20px;
    padding: 0;
}
#headWrapper a {
	color: #fff;
    display: inline-block;
    line-height: 60px;
    transition: all 0.5s ease 0s;
}

#head {  font-family: sans-serif;
    font-weight: 700;
    margin: 0 auto;
    max-width: 1160px;
    text-transform: uppercase;
    width: 100%;
}

.navList { float: left;  list-style: outside none none;}
.navList li { float: left; }
.navList li a { 
	color: #fff;
    display: inline-block;
    line-height: 60px;
    padding: 0 15px;
    transition: all 0.5s ease 0s;
}
.navList li a:hover { background: #2C343E;}	
.navList li a.clicked {background: #2C343E; }
.bottom{ position: absolute; bottom: 0;  display: block; width: 100%:}
#welcomeWrapper {
	position: relative;
    height:100%;
    min-height:500px;
	margin:auto;
	background: #6686A5; 
}
#headerTextContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
	
}
#welcomeContainer{
	background: #6686A5; 
    height: 100%;
    width: 100%;
	position: absolute;
	bottom: 0;
}

#welcomeElement{
	height: 100%;
	color: #fff;
    margin: 0 auto;
    max-width: 1160px;
	
    clear: both;
    width: 100%;
}
#welcomeElement .grid { margin: 0;}
#welcomeElement h2 {
    font: 100 60px/1 Roboto,sans-serif;
    font-size: 60px;
    line-height: 64px;
	text-align: center;
}
#welcomeElement h3{
	font: 100 30px/1 Roboto,sans-serif;
    font-size: 30px;
    line-height: 64px;
	text-align: center;
	font-weight: bold;
}
#toolbar {display: none;}


#mainContentWrapper{
	background: #E9F0F5;
}
.mainContent {    
	margin: 0 auto;
    max-width: 1160px;
	padding-bottom: 1em;
}
	
.experienceContainer {
	position: relative;
}	
	
	
.heading {
	/*background-image: url("/images/texture.png");
	background-repeat: repeat-y repeat-x;
	background-attachment: fixed;
	background-position: 50% -97px; */
	background : #2C343E;
}
.heading  div{
	text-align: center;
	font-size: 30px;
    padding-top: 10px;
	font: 100 60px/1 Roboto,sans-serif;
	color: #fff;
}
 .heading:after {
    content: "";
    height: 1px;
	display: block;
	margin-bottom: 10px;
    margin-top: 10px;
}

.subheading {
	text-align: center;
	font-size: 20px;
   margin-bottom: 10px;
}
 .subheading:after {
    content: "";
    height: 1px;
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(179,170,179,1) 50%,rgba(0,0,0,0) 100%);
	display: block;
	margin-bottom: 10px;
    margin-top: 10px;
}

.contactContainer { height: 500px; padding-top: 3em; text-align: center;}
.contactContainer a { color: #6686A5; font-size: 45px;}

.designImages img { max-height: 260px;}
/******************* Education **************/


.img-responsive{
  display: block;
    height: auto;
    max-width: 100%;
	}
.bannerImage {
	display: block; 
	margin:0 auto;
	width: 100%;
		height: 100%;
}


/*  Here are the building blocks 
--------------------------------------------------------*/

.grid {
  padding: 0; /* Remove if you already reset paddings */
 clear: both;
  list-style: none; /* Works with ul & ol */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  margin-top: 1em;
}

.unit,
.field-unit {
  margin: 0; /* Remove if you already reset margins */
  float: left;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  padding: 0 1em; /* Can be set in em, % or px (must match .ingrid negative margins) */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.field-unit  {
  display: block;
} 
.unittext {
			min-height: 80px;
}




#word-cloud {
	
	/*height: 300px;*/
	/*float: right;*/
	padding: 2em 0;
	font: 100% 'Yanone Kaffeesatz', Arial, sans-serif;
	position: relative;
	margin-top: 120px;
}

#word-cloud span {
 position: absolute;
}

#word-cloud .word-1 {
 bottom: 0.86em;
 left: 0.3em;
 font-size: 100px;
 color: #626262;
  display:none;
}

#word-cloud .word-2 {
 top: -0.3em;
 left: 1em;
 font-size: 80px;
 color: #906060;
}

#word-cloud .word-3 {
 top: 0.6em;
 left: 1.3em;
 font-size: 60px;
 color: #c5c5c5;
}

#word-cloud .word-4 {

 left: 0;
 font-size: 40px;
 color: #511c1c;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

#word-cloud .word-5 {
 top: 1.5em;
 left: 2.2em;
 color: #A5C5E2;
 font-size: 70px;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

#word-cloud .word-6 {
 top: 0.64em;
 left: 1.1em;
 color: #5e0000;
 font-size: 120px;
  -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

#word-cloud .word-7 {
 top: 0.6em;
 left: 0;
 color: #A5C5E2;
 font-size: 28px;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

#word-cloud .word-8 {
  color: #906060;
    font-size: 40px;
    left: 0.5em;
    top: 2.7em;
}
#word-cloud .word-9 {
 top: 0.85em;
 left: 0.3em;
 color: #C5C5C5;
 font-size: 120px;
}
#word-cloud .word-10 {
 bottom: 0;
 left: 1em;
 color: #5e0000;
 font-size: 120px;
 display:none;
}
#word-cloud .word-11 {
 bottom: 0;
 left: 1em;
 color: #5e0000;
 font-size: 120px;
  display:none;
}
#word-cloud .word-12 {
 bottom: 0;
 left: 1em;
 color: #5e0000;
 font-size: 120px;
  display:none;
}
#word-cloud .word-13 {
 top: 4.1em;
 left: 3.6em;
 color: #A5C5E2;
 font-size: 23px;
}
#word-cloud .word-14 {
 top: 3.36em;
 left: 1.3em;
 color: #5e0000;
 font-size: 60px;
  -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

/********** SKILLS ************/
.skilsContainer {padding-bottom: 2em;}
.bar-holder{
	background-color: #ecf0f1;
    border-radius: 30px;
    box-shadow: 0 2px 0 #d2dfdf;
	-webkit-box-shadow: 0 2px 0 #d2dfdf;
    height: 18px;
    width: 100%;
	margin-bottom: 5px;
}
.bar-holder:nth-child(2n) .bar {
background-color: #6686A5;
}

.bar{
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
	-webkit-box-shadow:0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #fff;
    float: left;
    font-size: 12px;
	padding-left: 10px;
    line-height: 20px;
    text-align: left;
	font-weight: bold;
    transition: width 0.6s ease 0s;
	background-color: #34495e;
    border-radius: 30px;
    height: 18px;
}

.barGraph {
	position: relative; 
	width: 100%; 
	display: block;
	height: 28px;
	border-bottom: 4px solid #d7e4ed;
	margin-bottom: 15px;
}

.basic{position: absolute; left: 0;}
.skilled {position: absolute; left:42.5%;}
.expert { position: absolute;  right: 0;}


.skill-img.skill-picture {
    background: none repeat scroll 0 0 #475665;
    box-sizing: border-box;
}
.skill-img {
    border-radius: 100px;
    box-shadow: 0 0 0 4px white, 0 2px 0 rgba(0, 0, 0, 0.08) inset, 0 3px 0 4px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 0 0 4px white, 0 2px 0 rgba(0, 0, 0, 0.08) inset, 0 3px 0 4px rgba(0, 0, 0, 0.05);
	position: absolute;
    /*height: 5px; */
    left: 43%;
    padding: 5px;
   /* width: 5px;*/
	bottom: -15px;
}
.designWrap {
background: #E9F0F5;
margin-top:-10px;
padding-top: 10px;
}
.selector { margin: 0 auto; width: 320px;}
.days:after {clear:both; display: block; width: 100%; }
.days li { cursor: pointer; float: left; list-style: none; padding: 5px 10px; margin:5px; background: #2C343E; color: #fff;}
.days li.active { background : #475665;}
.weather  .unit{ 
	padding: 0.2em; color: #475665;
}
.weather .date{
	background: #D7E4ED;
	text-align: center;
}
.weather .icon {font-size: 70px; color: #475665;}
.datetime {font: 400 20px/2 Roboto,sans-serif; font-weight: bold;}
.temperature {  font-weight: bold; font-size: 28px;padding-bottom: 5px;}

/* UNITS 
   These divider classes are set on container
--------------------------------------------------------*/

.in-halves .unit   { width: 50%; } 
.in-thirds .unit   { width: 33.33333%; } 
.in-fourths .unit   { width: 25%; } 
.in-fifths .unit   { width: 20%; } 
.in-sixths .unit   { width: 16.66666%; }
.in-sevenths .unit   { width: 14.28571%; }
.in-eighths .unit { width: 12.5%; }
/* SPATIALS
--------------------------------------------------------*/

/* Spatial units in thirds */
.in-thirds  .span-two   { width: 66.66666%; }

/* Spatial units in fourths */
.in-fourths .span-two   { width: 50%; }
.in-fourths .span-three { width: 75%; }

/* Spatial units in fifths */
.in-fifths .span-two   { width: 40%; }
.in-fifths .span-three { width: 60%; }
.in-fifths .span-four  { width: 80%; }

/* Spatial units in sixths */
.in-sixths .span-two   { width: 33.33333%; }
.in-sixths .span-three { width: 50%; }
.in-sixths .span-four  { width: 66.66666%; }
.in-sixths .span-five  { width: 83.33333%; }

/* Spatial units in sevenths */
.in-sevenths  .span-two   { width: 28.57142%; }
.in-sevenths  .span-three { width: 42.85714%; }
.in-sevenths  .span-four  { width: 57.14285%; }
.in-sevenths  .span-five  { width: 71.42857%; }
.in-sevenths  .span-six   { width: 85.71428%; }

@media only screen and (max-width:768px) {
	
	#welcomeElement h2 {font-size: 35px; line-height: 40px; padding-bottom: 1em;}
	#welcomeElement h3{ font-size: 20px; line-height: 25px; }
	.heading div{ font: 100 30px/1 Roboto,sans-serif; }
	#word-cloud { display: none;}
	#toolbar { display: block; float :right; margin-bottom: 0;  }
	#toolbar.clicked  a{background: #2C343E; } 
	#toolbar ul { list-style : none; }
	#menubtn { padding: 0 10px}
	#menubtn:hover { background: #2C343E;}
	#nav { clear:both;  display: none; background: #2C343E;}
	#nav li { width; 100%; float: none;}
	#nav li a { width: 100%;}
	#nav li a:hover { background: #6686A5; } 

	
	.navList { float: none;}

	.timeline-block i {
		color: #fff;
		font-size: 22px;
		text-align: center; box-sizing: border-box; 
		padding: 9px;
	}
	.timeline-block:after {
		clear: both;
		content: "";
		display: table; box-sizing: border-box;
	}
	.timeline-block {
		margin: 0 0 2em 0;
		position: relative; box-sizing: border-box;
	}
	.timeline {
		margin: 2em 1em;

		position: relative;box-sizing: border-box;
	}
	.timeline:before {
		background: none repeat scroll 0 0 #d7e4ed;
		content: "";
		height: 100%;
		left: 18px;
		position: absolute;
		top: 0;
		width: 4px;box-sizing: border-box;
	}

	.timeline-img.timeline-picture {
    background: none repeat scroll 0 0 #475665;box-sizing: border-box;
	}
	.timeline-img {
	
		border-radius: 100px;
		box-shadow: 0 0 0 4px white, 0 2px 0 rgba(0, 0, 0, 0.08) inset, 0 3px 0 4px rgba(0, 0, 0, 0.05);
		-webkit-box-shadow: 0 0 0 4px white, 0 2px 0 rgba(0, 0, 0, 0.08) inset, 0 3px 0 4px rgba(0, 0, 0, 0.05);
		height: 40px;
		left: 0;
		position: absolute;
		top: 0;
		width: 40px;
		box-sizing: border-box;
	}
	.timeline-content:before {
		-moz-border-bottom-colors: none;
		-moz-border-left-colors: none;
		-moz-border-right-colors: none;
		-moz-border-top-colors: none;
		border-color: transparent white transparent transparent;
		border-image: none;
		border-style: solid;
		border-width: 7px;
		content: "";
		height: 0;
		position: absolute;
		right: 100%;
		top: 16px;
		width: 0;box-sizing: border-box;
	}
	.timeline-content {
		background: none repeat scroll 0 0 white;
		border-radius: 0.25em;
		box-shadow: 0 3px 0 #d7e4ed;
		-webkit-box-shadow: 0 3px 0 #d7e4ed;
		margin-left: 60px;
		padding: 1em;
		position: relative; box-sizing: border-box;
	}
	.timeline-content ul { margin-left: 12px; }
	.timeline-content li {
		padding-bottom: 6px;
		font-size: 12px;
	}
	.company {
		font-size: 17px;
		color: #475665;
		
	}

	.jobTitle {
		font-size: 14px;
		color: #7F8C97;
		padding-bottom:5px;
	}
	.in-eighths .unit {width: 25%;}
	.in-fourths .unit { width: 50%; }
	.in-halves  .unit{ width :100%; } 
	.primary li { width: 50%; margin-left: -1px;}

	
	#toolbar li div { margin-bottom: 0;}
	.primary {display: none;}
	.active { display: block;  }
	
}
@media only screen and (max-width: 480px) {
.unittext { min-height: 40px; }
	.grid .unit { display: block; }
	.primary li { width: 100%; float: none;}
	#toolbar { display: block;  margin-bottom: 0;}
	#toolbar li div { margin-bottom: 0;}
	.nav { margin-top: 0;}
	.primary {display: none;}
	.active { display: inline; }
	
	.bannerImage {
	display: block; 
	margin:0 auto;

}
	.in-fourths .unit { width: 100%; }
	.in-eighths .unit { width: 50%; }
} 

@media only screen and (min-width: 769px) {

.timeline {
    margin: 0 1em;
	position: relative; box-sizing: border-box;
}
.timeline:before {
    left: 50%;
    margin-left: -2px;
	background: none repeat scroll 0 0 #d7e4ed;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 4px; box-sizing: border-box;
}
.timeline-block:after {
    clear: both;
    content: "";
    display: table; box-sizing: border-box;
}
.timeline-block {
    margin: 2em 0;
    position: relative; box-sizing: border-box;
}

.timeline-block i {
	color: #fff;
	font-size: 32px;
	text-align: center; box-sizing: border-box;
}
.timeline-img.timeline-picture {
    background: none repeat scroll 0 0 #475665; box-sizing: border-box;
}
.timeline-img {
    height: 60px;
    left: 50%;
    margin-left: -30px;
    width: 60px;
	padding: 14.4px; box-sizing: border-box;
}
.timeline-img {
    border-radius: 100px;
    box-shadow: 0 0 0 4px white, 0 2px 0 rgba(0, 0, 0, 0.08) inset, 0 3px 0 4px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: 0 0 0 4px white, 0 2px 0 rgba(0, 0, 0, 0.08) inset, 0 3px 0 4px rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 0; box-sizing: border-box;
}
.timeline-content:before {
    border-color: transparent transparent transparent white;
    left: 100%;
    top: 24px; box-sizing: border-box;
}
.timeline-content:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
   
    border-image: none;
    border-style: solid;
    border-width: 7px;
    content: "";
    height: 0;
    position: absolute;
    right: 100%;
    top: 16px;
    width: 0; box-sizing: border-box;
}
.timeline-content:after {
    clear: both;
    content: "";
    display: table; box-sizing: border-box;
}
.timeline-block:nth-child(2n) .timeline-content:before {
  border-color: transparent white transparent transparent;
    left: auto;
	right: 100%;
    top: 24px; box-sizing: border-box;
}

.timeline-block:nth-child(2n) .timeline-content {
	float: right;
}

.timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%; box-sizing: border-box;
}
.timeline-content {
    background: none repeat scroll 0 0 white;
    border-radius: 0.25em;
    box-shadow: 0 3px 0 #d7e4ed;
	-webkit-box-shadow:0 3px 0 #d7e4ed;
    position: relative; box-sizing: border-box;
}

.timeline-block:nth-child(2n) .timeline-content .date {
    left: auto;
    right: 122%;
    text-align: right;
}
.timeline-content .date {
    font-size: 1rem;
    left: 122%;
    position: absolute;
    top: 6px;
    width: 100%;
    float: left;
    opacity: 0.7;
    padding: 0.8em 0;
    display: inline-block;
}
.timeline-content ul { margin-left: 12px; }
.timeline-content li {
	padding-bottom: 6px;
	font-size: 12px;
}
.company {
	font-size: 25px;
	color: #475665;
	
}

.jobTitle {
	font-size: 18px;
	color: #7F8C97;
	padding-bottom:5px;
}

}