/* Global */
/* Colors
#F46036
#DCDDE5
#B4C7D8
#878787
#413C4B

*/
body, html{
  margin:0;
  background-color: #F4F4F4;
  height: 100%;
  font-family: Montserrat, sans-serif;
  line-height: 1.6;
}
.h1{

}
.container{
  width:80%;
  margin:auto;
  height: auto;
  overflow: auto;
}
.hcontainer{
  width:80%;
  margin:auto;
  height: auto;
}
section{
  padding-top:50px;
  padding-bottom:50px;
  height: auto;
}
.row{
  width: 90%;
  height: auto;
}
.button{
  color: white;
  text-decoration: none;
  border: 2px #F46036 solid;
  border-radius: 50px;
  padding: 10px;
  font-weight: 700;
}
.button:hover{
  color: white;
  text-decoration: none;
  border: 2px #F46036 solid;
  border-radius: 50px;
  padding: 10px;
  font-weight: 700;
  background-color: #F46036;
}




/* Header */
header{
  background: url("./resources/atl.png");
  height: 100%;
  background-size: cover;
  text-align: center;
  border-bottom: 3px #F46036 solid;
}
.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5);
}
header h1{
  margin-top: 0;
  color: white;
  padding-bottom: 20px;
  font-size: 3.4rem;
}
#staticText{
  padding-top: 20%;
  padding-bottom: 0;
  margin-bottom: 0;
}
#addon{
  display: inline;
  padding-top:0;
}
#scroll{
  padding-top: 10%;
}


/* About */
#about{
  background-color: #DDDDDD;
  text-align: center;

}
#aboutMe{
  width:70%;
  margin:auto;
}

/* Expertise */
#expertise .container{
  width:90%;
  overflow: hidden;
}
#expertise{
  text-align: center;
  background-color: #F4F4F4
  height:auto;
  width:100%;

}
#intro{
  margin-top: 0;
  margin:auto;
}
#gallery{
  margin: auto;
}
#gallery img{
  padding: 20px;
  max-height: 100px;
}

.box{
  display: inline-block;
  width:27%;
  padding: 25px;
  padding-bottom: 10px;
}
.box p{
  padding:1px;
}

/* Education */
#education{
  display: inline-block;
  background-color: #DDDDDD;
  width:100%;

}
#edutext{
  text-align: center;
}
#education img{
  max-width: 100%;
  height: auto;
}
#education .row{
  width: 90%;
  margin: auto;
  height: auto;
}

#education .left{
  width: 45%;
  display: block;
  margin:auto;
  float: left;
}
#education .right{
  width:55%;
  display: inline-block;
  margin:auto;
  float: right;
}
#education .list{
  height: 100%;
  width: 100%;
  display: block;
}
.edushowcase{
  border-bottom: 1px #CDCDCD solid;
}


/* Projects */
#projects{
  text-align: center;
}

#logo{
  border-radius: 10px;
}

/* Experience */
#experience{
  background-color: #DDDDDD;
}
#experience .under{
  display: block;
}
#work-intro{
  text-align: center;
}
#experience .row{
  width: 100%;
  margin: auto;
}
#experience .left{
  width: 49%;
  display: block;
  margin:auto;
  float: left;
}
#experience .right{
  width:50%;
  display: block;
  margin:auto;
  float: right;
  overflow: hidden;
  padding-left: 2px;
}
#experience img{
  width: 100%;
  max-width: 241px;
  padding: 20px;
}
#experience .h4{
  display: block;
}
/* Contact */
#contact{
  text-align: center;
  background-color: #F46036;
}

#contactText{
  padding-bottom:50px;
}
#contactButton{
  border: 2px black solid;
  display: inline-block;
}
#contactButton:hover{
  background-color: black;
}

/* Footer */
footer .container{
  color: #DDDDDD;
  width: 100%;
  background-color: #2D2D2C;
  padding-top:15px;
  padding-bottom:15px;
}
footer .row{
  width:75%;
  margin:auto;
}
footer p{
  display: inline;
  text-decoration: none;
  color:inherit;
}
footer, a{
  display: inline;
  text-decoration: none;
  color:inherit;
}
.flright{
  display: inline-block;
  float:right;
  text-decoration: none;
  color: inherit;
}

/* Media */
@media only screen and (max-width: 700px) {
  /* Global */
  .under{
    display: inline-block;
  }
  /* Header */
  header h1{
    font-size: 1.5rem;
  }
  /* About */

  /* Expertise */
    .box {
        display: block;
        margin:auto;
        width: 80%;
    }
    .container{
      width:95%;
      margin:auto;
      height: auto;
      overflow: auto;
    }
  /* Experience */
    #experience .row{
      width: 100%;
      display: block;
    }
    #experience img{
      width: 100%;
    }
    #experience .under{
      display: inline-block;
    }
}