html{
  height: 100%;	
}

body{
  font-family: 'Open Sans', Arial, sans-serif;
  height: 100%;
  background-color: #000000; 
}


h1{  
  color: #f8f8f8;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: normal;
  font-size: 3em;	
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;  
}

h2{
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cccccc;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.6em;
  text-align: center;	
  padding-bottom: 1em;
  letter-spacing: .4em;
  text-transform: uppercase;
}

h3{
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1.8em;
  text-align: left;
  line-height: 1.2em;
}

/* ANIMATED MINUS */
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(1) {
	transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(2) {
	transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(3) {
	transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus .icon-bar:nth-of-type(1) {
	transform: translate3d(0,6px,0);
}

.navbar-toggle.minus .icon-bar:nth-of-type(3) {
	transform: translate3d(0,-6px,0);
}
/* END ANIMATED MINUS */

/* ANIMATED SCROLL ARROW */
.scroll-downs {  
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 4px;
  margin: auto;  
  width :10px;
  height: 55px;  
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;  
}
.scroller {  
  color: #FFFFFF;
  font-size: 30px;
  text-align: center;
  width: 10px;
  height: 20px;
  border-radius: 25%;  
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
@-webkit-keyframes scroll {  
  0% { -webkit-opacity: 0; opacity: 0; }
  10% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-opacity: 1; opacity: 1; }
  100% { -webkit-transform: translateY(15px); transform: translateY(15px); -webkit-opacity: 0; opacity: 0; }
}
/* END ANIMATED SCROLL ARROW */

.navbar-fixed-top{
  border-bottom: none;	
}

.navbar{
  background-color: transparent;
  height: 64px; 
  margin: 10px 30px 10px 30px;
}

.nav {  	  
  float: right;  
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: .8em;
  letter-spacing: .2em;
  padding: 8px 0 0 0;  
}

.navbar-inverse .navbar-nav > li > a{	
  color: #0da8e2;
}

.brand-logo{
  width: 250px;
  height: 28px;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #FFFFFF;
  background-color: transparent;
}

a:active.contact-nav, a:focus.contact-nav{
	color:#0da8e2 !important;
}



.section-link, .section-link a:link, .section-link a:visited, .section-link a:active {
	color: #0da8e2;
	letter-spacing: .2em;
	text-align: center;
	text-decoration: none;	
    text-transform: uppercase;	
}

.section-link a:hover {
	color: #FFFFFF;
}

.text-center{
  text-align: center;	
}

.text-about{
  color: #999999;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1em;
  font-weight: lighter;
  line-height: 1.6em;
  text-align: center;	
  padding-bottom: 1.5em;
}

.text-full-screen{
  color: #999999;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1em;
  font-weight: lighter;
  line-height: 1.6em;
  text-align: center;	
  padding-bottom: 1.5em;	
}

.wrapper{	
	margin: 0;
	height: 100%; 	
}

.vertical-middle{
  height: 100%;	
  width: 100%;
  display: table;
  padding: 0;  
}

.vertical-middle-inner{	  	
  display: table-cell;
  vertical-align: middle;	
}

.intro{ 
  height: 100%;
  background: url(../img/home_bg.jpg) no-repeat top center;  
  background-size: cover;
  background-attachment: cover;
}

.bg-work{ 
  height: 100%;
  background: url(../img/work_bg.jpg) no-repeat top center;  
  background-size: cover;
  background-attachment: cover;
}

.fireflies{    
position: absolute;  
display: block;  
top: 0;  
left: 0;  
z-index: 0;	
}

.featured{ 
  height: auto;
}


.experience{   
  height: auto;
  background-color: #111111;
}

.circle {
	width: 1.7em;
	height: 1.7em;
	border:1px solid #0da8e2;
	background: #111111;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	position: absolute;
	top: 0;
	left: -.85em;
	
}

.timeline-pad{	
	padding-left: 1.5em;
}

.experience-container {	
    margin-bottom: -1.8em;
}


.experience-box {	
    position: relative;
	left: -.6em;
	top: -1.4em;
	text-align: right;
	
}

.experience-box2 {	
    position: relative;
	top: -1.7em;
	border-left: solid #333333 1px;
	padding-left: 3em;
	padding-right: 2em;
	padding-bottom: 30px;
}

.experience-title{
	color: #FFFFFF;
	font-size: 1.2em;
	font-family: 'Open Sans', Arial, sans-serif;
	letter-spacing: .1em;
}

.experience-sub{
	color: #999999;
	font-size: 1em;
	font-family: 'Open Sans', Arial, sans-serif;
	letter-spacing: .1em;
}
.experience-text{
	color: #999999;
	font-size: .9em;
	font-family: 'Open Sans', Arial, sans-serif;	
}

.contact{  
    height: 100%;
	padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(../img/contact_bg.jpg) no-repeat center center;
    background-size: cover;	
}

.contact-icon-box, .contact-icon-box a:link, .contact-icon-box a:visited, .contact-icon-box a:active  {
	color:#0da8e2;
	padding-top: 40px;	
	font-size: 14px;
	text-align: center;
	font-family: 'Open Sans', Arial, sans-serif;
}

.contact-icon-box a:hover{
	text-decoration: none;
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}

.contact-icon-box img{
	width: 100px;
	height: auto;
}

.footer {  
  background-color: #000000;
  font-size: .8em;
  position: relative; 
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px; 
}

.footer-content{
  padding-top: 20px;	
  text-align: center;
}

@media(max-width:480px)
{

h1{  
  font-size: 2em;	
}
	
h2{  
  font-size: 1em;
}
	
.navbar-brand{
  width: 70%;	
}
	
.brand-logo{
  width: 100%;
  height: auto;
}
	
.navbar-toggle{ 
	padding: 5px;		
}

.fireflies{    
  height: 600px;
}	
	
.intro{ 
  height: 600px;
  background: url(../img/home_bg.jpg) no-repeat center center;  
  background-size: cover;
  background-attachment: cover;	
}
	
.bg-work{ 
  height: 600px;
  background: url(../img/work_bg.jpg) no-repeat center center;  
  background-size: cover;
  background-attachment: cover;	
}
	
.profile-pic{
  width: 50%;
  height: auto;
}
	
.contact{
  height: auto;
}

.contact-icon-box img{
	width: 75px;
	height: auto;
}
	
.text-about{  
  font-size: 1.1em;
  font-weight: normal;
  line-height: 1.4em;
  padding-bottom: 1.6em;
}
	
.featured{
  height: auto;
}

}

@media(min-width:480px) and (max-width:767px)
{
.contact{  
  height: auto;	
}
	
}

@media (max-width: 767px) {
	

.navbar-toggle{
  margin-top: 14px;	
}

.nav { 
  float: none;
  padding: 15px;
  margin-top: 0px;  
  text-align: center; 
  background-color: #000000;
  border: solid 1px #0da8e2;
}

.navbar-header{
  
}

.circle {
	position: absolute;
	top: -1.65em;
	left: -.85em;
	
}	

.experience-container {	
    margin-bottom: 0;
}	
	
.experience-box{
	position: relative;
	left: 0;
	top: 0;
	/*border-left: solid #333333 1px;*/
	padding-left: 3.5em;
	text-align: left;
}
.experience-box2{
	position: relative;
	top: 0;	
}	

.contact{ 
  height: auto;
  background: url(../img/contact_bg.jpg) no-repeat top center;
  background-size: cover;	
}


	
}


@media(max-width:992px){

.experience{
  height: auto;	 
}

	
}