body {
  height: 100%;
  width: 100%;
  background-color: #000;
}

.intro-header {
  background-image: url("images/edges1.png");
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
}

.row{
  margin: 0px;
  padding: 0px;
  width: 100%;
}

/*Header Content*/

nav {
  background-color: transparent;
  width: 100%;
  padding-top: 15px;
  position: relative;
}
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

.logo {
  width: 50px;
  height: 50px;
}

.logo h1 {
  color: #fff;
  text-align: center;
  border: 4px solid #fff;
  margin: 0px;
}

.logo-container h2 {
  font-size: 16px;
  margin: 3px;
  margin-left: 6px;
  color: #fff;
}

.logo-container p {
  margin: 3px;
  margin-left: 6px;
  font-size: 16px;
  color: #fff;
}

.links {
  height: 80px;
  padding: 30px 80px 0px 30px;
}

.links  ul{
  margin: 0px;
  list-style: none;
  position:relative;
  float: right;

}

.links li{
  padding: 5px 0px 5px 0px;
  margin: 0px 15px 0px 15px;
  font-size: 16px;
  display: inline;
  position: relative;
  color: #fff;
}

.links li:hover{
  position: relative;
  border-bottom: 2px solid #fff;
  border-top: 2px solid #fff;
  transition: all 100ms ease-in-out;
}

.links a{
  color: #fff;
}

/*Hamburger*/

.menu  a{
  text-decoration: none;
  transition: text-decoration 1s;
}

.menu a:hover{
  text-decoration: none;
  text-underline-position: below;
  transition: text-decoration 1s;
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*----------------------------------------*/


/*Intro Content*/

main , .intro {
  height: calc(90vh - 100px);
  /*background-image: url("images/edges.svg");
  background-repeat: no-repeat;
  background-size: cover;*/
}

.intro {
  text-align: center;
  flex-direction: column;
  color: #fff;
  padding: 150px 80px 200px 80px;
}

.intro h1 {

}

.intro ul {

}

.intro li {
  display: inline;
  margin: 15px;
}


/*-----------------------------------------*/

/*Portfolio Content*/

.protfolio {
width: 100%;
padding-left: 0px;
padding-right: 0px;
}

.pbox {
  background: grey;
  height: 329px;
  transition: padding 1s, opacity 1s;
  position: relative;
  overflow: hidden;
}

.pbox #overlay {
  position: absolute;
  visibility: hidden;
  text-align: center;
  color: #fff;
  background-color: rgba(51, 54, 59, 0.9);
  padding: 20px;
  margin: 0px;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 1s;
  transform: translateY(100%) translateZ(0);
}

.pbox p {
  font-size: 18px;
  text-align: left;
  padding-left: 4px;
  padding-right: 4px;
  margin-top: 10px;
}

/*Portfolio Hover Effects*/

.pbox:hover img{
  padding: 30px;
  transition: padding 1s;
 }

 .pbox:hover #overlay {
   transform: translateX(0) translateY(0) translateZ(0);
   visibility: visible;
 }
/*----------------------------------*/

.portfolio a {
  height: 100%;
}

.portfolio .pbox img{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.snake {
  font-family: 'Righteous';
}

.voice {
  height: 200px;
}

/*--------------------------------------*/

/*Professional Experience Content*/

.experience {
  text-align: center;
  background-color: grey;
  width: 100vw;
  padding: 0px 0px 100px 0px;
  /*height: calc(100vh - 100px);*/
  color: #fff;
  background-image: url("images/letters.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.exp-header{
  width: 100%;
  background-color: #4F5052;
}
.experience h1 {
  padding: 20px 0px 20px 0px;
  margin-top: 0px;
  margin-bottom: 90px;
  position: relative;
  /*text-shadow: 6px 6px 5px rgba(33, 26, 35, 0.5);*/
}

.experience .under-line {
  margin: 0 auto;
  margin-top: 15px;
  width: 280px;
  /*box-shadow: 6px 6px 5px rgba(33, 26, 35, 0.5);*/
}

.exp {
  box-shadow: 6px 6px 5px rgba(33, 26, 35, 0.5);
  background-color: #F9F9F9;
  height: auto;
  margin-top: 0px;
  text-align: center;
  display: none;
}

.exp-button {
  width: 100%;
  box-shadow: 6px 6px 5px rgba(33, 26, 35, 0.5);
  background: #045f8c;
  padding: 10px 0px 10px 0px;
  margin: 10px 0px 10px 0px;
}

.exp-button:hover {
  background-color: #2098D1;
  color: #fff;
  font-size: 16px;
  transition: background-color 0.5s;
}

.exp-button:hover h3 {
  font-size: 26px;
}

.exp-button h3 {
  padding: 10px 10px 0px 10px;
  margin: 0px;
}

.exp ul {
  padding: 20px;
  margin: 10px;
  text-align: left;
  height: 0 auto;
  position: relative;

}

.exp li {
  margin: 5px;
  position: relative;
  border-bottom: 1px solid #045f8c;
  color: #045f8c
}

.slide-down {
  display:block;
}


/*--------------------------------------*/

/*About Content*/

.about {
  background: #211A23;
  /*height: calc(100vh - 100px);*/
  height: auto;
  /*min-height: 500px;*/
  width: 100%;
  padding: 125px 50px 125px 50px;
}

.about-img{
  height: 100%;
  text-align: center;
}


.about img {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  border: 8px solid #045f8c;
}

@media (max-width: 425px) {
  .about img{
    height: 150px;
    width: 150px;
  }
}

.about-desc {
  font-size: 18px;
  color: #fff;
}

.about-desc h1 {
  margin-top: 10px;
}

.about-desc p {
  margin-top: 20px;
}

/*-----------------------------------------*/


/*Footer Content*/

footer {
  background-color: #F9F9F9;
}

.contact {
  color: #2098D1;
  text-align: center;
  padding: 40px;
}

.contact h1 {
  font-size: 34px;
  margin-bottom: 20px;
  margin-top: 0px;
}

.contact p {
  font-size: 18px;
}

.btn {
  background-color: #2098D1;
  width: 150px;
  font-size: 18px;
  margin-top: 15px;
  font-style: none;
}

.btn a {
  color: #fff;
  text-decoration: none;
}

.btn:hover {
  background-color: #045f8c;
  color: #fff;
  font-size: 19px;
  transition: background-color 0.5s;
  height: 39.5px;
}

.social {
  background-color: #fff;

}

footer ul {
  text-align: center;
  padding: 15px;
}

footer li{
  display: inline;
  list-style: none;
  margin: 15px;
}

.social a {
  text-decoration: none;
}

.social img {
  height: 50px;
  width: 50px;
}

/*------------------------------------*/

/*Assets*/

.under-line {
  width: 150px;
  height: 8px;
  background-color: #045f8c;
  margin-left: 6px;
}

/*-------------------------------------*/

/* Media Queries */



/*Laptop Down To Tablet*/
@media only screen and (max-width: 600px) {

  /*Intro Content*/

  .intro {
    padding: 60px 0px 80px 0px;
  }

}
  /*Portfolio Squares*/
@media (max-width: 1040px) {
  .pbox{
    width: 33.3%;
  }
}

@media (max-width: 540px) {
  .pbox{
    width: 50%;
  }
}

@media (max-width: 480px) {
  .pbox{
    width: 100%;
  }
}