/*
  ========================================
  Grid
  ========================================
*/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html{
  position:relative;
  min-height:100%;
}

body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight:300;
  background-color:#FAFAFA;
  font-size: 0.9em;
}

.container{
  max-width:1060px;
  margin:0 auto;
}

img{
  max-width:100%;
}

a{
  text-decoration: none;
  color: #000;
}

a:hover{
  color:rgb(85,26,139);
}

h1{
  font-size: 1.5em;
}

/*****************************************
HEADER + Background Image
*****************************************/


#background{
/*linear-gradient(#000,transparent 70%),*/
  width:100%;
  height:100vh;
  background:
  linear-gradient(0deg,#000,transparent),
  url(/static/img/background.jpg) no-repeat center;
  background-size:cover;
  background-attachment: fixed;
}


#job-role{
  position: absolute;
  top:8%;
  left:0;
  color:#fff;
  z-index: 134;
  text-align: center;
  width:100%;
}





/*#job-role h3{
  font-size: 1em;
}*/

header{
  position: fixed;
  width:100%;
  height:70px;
  background-color:#7f8c8d;
  box-shadow: 0px 0px 5px #888;
  z-index: 2000;
}

header .wrapper{
  width:100%;
  padding:0;
  margin-top:10px;
}

#logo{
  float:left;
  margin-left:20px;
}

.icon {
  float: right;

  margin-top:25px;
  /*top:50%;
  left:50%;
  transform: translate(-50%,-50%);*/
  width:80px;
  /*height:50px;*/
  cursor:pointer;


}

.hamburger{
  /*margin-top:50px;*/
  width: 30px;
  height:3px;
  background:#000;
  cursor:pointer;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: .5s;
  float:right;

}

.hamburger:before,
.hamburger:after{
  content:'';
  position:absolute;
  width:30px;
  height:3px;
  background:#000;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  transition: .5s;


}

.hamburger:before{
  top: -10px;
}
.hamburger:after{
  top: 10px;

}


.icon.active .hamburger{
  background: rgba(0,0,0,0);
  box-shadow: 0 2px 5px rgba(0,0,0,0);
}

.icon.active .hamburger:before{
  top:0;
  transform:rotate(45deg);

}

.icon.active .hamburger:after{
  top:0;
  transform:rotate(135deg);

}



header nav ul{
  overflow: hidden;
  background:#505050;
  height:0;
  padding:0;
  margin:0;


}

header nav ul.open{
  height:auto;
  clear:both;


}

header nav ul li{
  width:100%;
  text-align: center;
  margin:0;
  float:none;

}

header nav ul li a{
  border-bottom:1px solid #404040;
  color:#fff;
  padding:10px;
  display:block;
  margin:0;
  width:100%;
}

/***************************************
Header styles for different tabs (links)
***************************************/
.title{
  text-align: center;
  margin-top:50px;
}

/***************************************
Portfolio
****************************************/

.portfolio{
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

}

.port-items{

  margin: 0 10px 20px 10px;
  background-color:#7f8c8d;

}




.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}



.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 90%;
	position: relative;
	margin: 30% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

.site-links{
  display: flex;
  flex-direction: row;
  width:65%;
  margin: 0 auto;
}

.site-link-items{
  margin-right:10px;
}

.overlay{
  display:none;
}


/****************************************
ABOUT
****************************************/
#about{
  background-color:#EAEAEA;
  margin-top:20px;
}

#about h1{
  text-align: center;
}


#about-container{
  padding-top:8px;
}

.about-flex{
  display: flex;
  flex-direction: column;
  text-align: center;
  padding:0 5px;
}

.about-flexer img{
  border-radius: 50%;
  width:40%;
}

#contact-text{
  width:90%;
  margin:0 auto;
}


/********************************
Contact
********************************/
#contact-info{
  text-align:center;
  padding:0 5px;
}

.social-media{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width:50%;
  margin:0 auto;
}