body,

div,

ul,

li,

p,

h1,

h2,

h3,

h4,

h5,

h6 {

  margin:0;

  font-family: Geneva, sans-serif;

}

#clearDiv{

	clear:both;

}

.clear-fix {

  overflow: auto;

}

.prjImgUrl {

	position:relative;

	max-width:100%;

	max-height:100%;

	float:left;

}

.education-entry,

.work-entry,

.project-entry,

.online-entry,

.vol-entry {

	position:relative;

	width:90%;

	left:5%;

	height:auto;

	margin-bottom: 0;

}

.project-entry img{

	padding:10px;

}

#workDesc{

	position:relative;

	width:79%;

	left:1%;

	float:left;

	margin-bottom:10px;

	margin-right:1%;

	display:inline-block;

}

#pbopod{

	position:relative;

	width:200px;

	float:right;

	padding:1%;

}

h1 {

  font-size: 40px;

  color: #23d5f5;

  line-height: 48px;

  display:block;

}

h2 {

  font-weight: bold;

  font-size: 24px;

  color: #dcdcdc;

  line-height: 29px;

  padding: 10px;

}

h3 {

  font-style: italic;

  font-size: 20px;

  color: #000;

  line-height: 22px;

}

h4 {

  font-weight: bold;

  font-size: 14px;

  color: #4a4a4a;

  line-height: 17px;

}

h2,

h3,

h4,

h5 {

  padding:10px 5%;

}

.date-text-bright {

  font-style: italic;

  font-size: 14px;

  color: #c3c3c3;

  line-height: 16px;

  float: right;

}

.date-text-dark {

  font-style: italic;

  font-size: 14px;

  color: #636363;

  line-height: 16px;

  float: right;

}

.date-text-left {

  font-style: italic;

  font-size: 14px;

  color: #636363;

  line-height: 16px;

  float: left;

}

.location-text {

  font-style: italic;

  font-size: 14px;

  color: #636363;

  line-height: 16px;

  float: left;

}

.jobTitle{

	float:left;

	font-weight:bold;

	font-style:italic;

}

.online-academy {

  font-style: italic;

  font-size: 16px;

  color: #0061b3;

  line-height: 16px;

  float: right;

}

p {

  font-size: 14px;

  color: #333;

  line-height: 21px;

}

a {

  color: #0061b3;

  text-decoration: none;

  margin-top: 10px;

  display: block;

}

.welcome-message {

  position:relative;

  font-style: italic;

  font-size: 18px;

  color: #e1e1e1;

  line-height: 28px;

  top:5px;

}

#skills-h3 {

  color: #1fbfdc;

  display: none;

}

#companyName {

	float:right;

	color:#333;

	font-style:italic;

	font-size:13px;

	font-weight:bold;

}

#online-h3 {

  color: #dcdcdc;

}

.cLogo {

	position:relative;

	width:20%;

	height:auto;

	float:right;

}

.cLogo img{

	max-width:100%;

	float:right;

}

.wBanner {

	position:relative;

	width:auto;

	height:auto;

	overflow:hidden;

	display:inline;

}

.wBanner img{

	max-width:200px;

	max-height:200px;

}

.cyan {

	background-color:#23d5f5;

}

.darkCyan {

	background-color:#1996ac;

}

.cyan-text {

	font-weight:bold;

	color: #1ebfd2;

}

.white-text {

  font-weight: bold;

  color: #d2d2d2;

}

.gray {

  background-color: #bcbcbc;

}

.gray2 {

  background-color: #919191;

}



.dark-gray {

  background-color: #323232;

}

#header {

  background-color: #323232;

}

#role {

	font-size:20px;

	color:#CCC;

}

#prevRole {

	color:#CCC;

	font-size:14px;

	font-style:italic;

}

#phr {

	position:relative;

	background-color: #CCC;

	width: 100%;

	height: 1px;

	margin:10px 0;

}

.flex-box {

  display: -webkit-flex;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: space-around;

  padding: 10px;

}

.center-content {

  padding: 1% 5%;

}



ul {

  list-style-type: none;

}



.biopic {

  float: left;

  padding: 10px;

  width: 150px;

  -webkit-filter: grayscale(80%);

  transition:all .5s ease-out;

  -webkit-transition:all .5s ease-out;

  -moz-transition:all .5s ease-out;

  -o-transition:all .5s ease out;

  display: none;

}

.biopic:hover {

	-webkit-filter: grayscale(0%);

}



.projectImages {

  max-width: 150px;

  -webkit-filter: grayscale(80%);

  transition:all .2s ease-out;

  -webkit-transition:all .2s ease-out;

  -moz-transition:all .2s ease-out;

  -o-transition:all .2s ease out;

}



.projectImages:hover {

  -webkit-filter: grayscale(25%);

}

span {

  padding: 5px;

}



#lets-connect {

  text-align: center;

}



/* Media queries to handle various device widths */



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

#mapDiv{

	height: 350px;

	padding-bottom: 15%;



}



#pbopod{

	width:150px;

}

}





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

  .biopic {

    width: 125px;

}



}



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



  .biopic {

    width: 150px;

  }

  .welcome-message {

    display: none;

  }

}



#map {

  display: block;

  height: 100%;

  margin: 0 5%;

}



#pmap {

  display: block;

  height: 100%;

  margin: 0 5%;

}



#mapDiv {

  height: 400px;

  width: 100%;

  padding-bottom: 8%;

}



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

  #skills-h3,

  #pbopod,

  .biopic {

    display: block;

  }

}