*{
  box-sizing: border-box;
}

header {
  /*background-color: black;*/
  background-image: url("../img/square.jpg");
  width: 100%;
  top:0;
  margin-bottom: 5em;
  display: flex;
  height: 12em;
  justify-content: flex-end;
  align-items: flex-end;
}
header h1 {
  font-size: 6em;
  color: #FFF5C3;
  text-shadow:.01em .01em .2em grey;
  text-align: right;
}

header p {
  display: none;
  color: #2C085E;
  font-size: 2em;
  font-weight: 800;
}

main {
  width: 80%;
  margin: 0 auto;
}
body {
   font-family: 'Open Sans', sans-serif;
/*   background: fixed,
    linear-gradient(to bottom, #29BAAF 20%,#2C085E 80%);*/
    background-color: rgb(37,146,150); ;
    color: #FFF5C3;
    text-transform: uppercase;
    margin: 0em 0em;
  }

.stats, .navwrapper ,.portfolioWrapper, .formContainer, .reWrapper, .acWrapper{
  background-color: #FFF5C3;
  border-radius: 1em;
  padding: 1em 1em;
  margin-top: 0em;
  margin-bottom: 2em;
  position: relative;
  height: 20em;
}



/*TOP NAV*/
.navigation a, .navigation a:visited {
  text-decoration: none;
  color: #FFF5C3;
}
.navigation a:hover, .navigation a:active {
  color: #FFF5C3;
   text-shadow:.1em .1em .1em black;

}

.navigation p{
    color: #FFF5C3;
}

#aboutMe:hover, #contactMe:hover , #portfolio:hover, #socialMedia:hover, #recommendations:hover {
  background-color: #505050;
}

 h1 {
  font-weight: 800px;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: -.3em;
  margin-left: 1em;
  font-size: 4em;
  color:  #FFF5C3;
  margin-top: 0em;
  width:100%;

}

.navWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  height: 27em;
}

.emptyDiv  {
  background-color: #694624;
    margin:.5em .5em;
  border-radius: .5em;
  padding: .5em .5em;
  height: auto;
}

#aboutMe, #contactMe , #portfolio, #socialMedia, #recommendations, #summary {
  background-color: orange;
  margin:.5em .5em;
  border-radius: .5em;
  padding: .5em .5em;
  text-align: center;
}

#summary {
  padding: 1.61em 1.61em;
  font-weight: 0em;
  width: 35%;
      text-align: left;

}

.navWrapper>* {
  flex: auto;
    }

/*TOP NAV*/

/*STATS SECTION*/

.stats {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  height: auto;
}
#badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width:25%;
  margin-left: 1.6em;
}
.fa-id-badge {
  font-size: 15em;
  color: #694624;
}
.picStat div{
  width: 0;
  height: 1.5em;
  margin-bottom: .2em;
  background-color: green;
  border-radius: .5em;
  flex-wrap: wrap;

}
.stats p{
  font-size: .9em;
  color: #FFF5C3;
  padding-left: 1em;
  margin-top: .3em;
  letter-spacing: .75em;
  font-weight: 800;
  font-family: 'Open Sans', sans-serif;
}

.statsWrapper {
  width:80%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 1em 1em;
}

.picStat {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/*END OF STATS*/

/*START OF PORTFOLIO*/
.portfolioWrapper img{
  width: 9em;
  height: 14em;
  border-radius: .5em;
}

.portfolioWrapper {
  width: 100%;
  height: 25em;
}

.projectPanel {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 1em 1.61em;
  position: relative;
}

.projectDescription {
width: 70%;
}

.projectDescription section{
  display: none;
  /*height: 40%;*/
  /*transition: all 2s linear;*/
  background-color: #694624;
  align-items: stretch;
  margin: 1em 1em;
  border-radius: .5em;
  padding: 1em 1em;
  /*height: 100%;*/
}

.projectDescription p{
color: #FFF5C3;
margin: 0em 1em;

}
.description {
  width:100%;
  padding-top: 0em;
  margin-left: 1em;
}

.description p {
    font-size: 1em;
    /*font-weight:0px;*/
        font-family: 'Hind', sans-serif;
    margin-top: 0em;
    margin-left: .5em;
}

.gitContainer{
  /*text-align: right;*/
  margin-top: 0em;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  /*cursor: pointer;*/
}


#gitstyle a{
  color: orange;
  cursor: pointer;
}
#gitstyle a:hover{
  color: #FFF5C3;
  cursor: pointer;
}

.description h3 {
  width:100%;
  margin-bottom: .5em;
  margin-top: 0em;
  font-size: 1.5em;
  /*font-weight: 800px;*/
  color: #FFF5C3;
  text-align: center;
  background-color: orange;
  border-radius: .5em;
}
.projectSelector {
  width: 30%;
}
.projectSelector p{
 display: flex;
 justify-content: center;
 align-items: center;
 }
.projectSelector div p{
  text-align: center;
  color: white;
  font-weight: 800px;
  font-family: 'Open Sans', sans-serif;
  color: #FFF5C3;
  background-color: #29BAAF;
  border-radius: .5em;
  cursor: pointer;
  height: 8%;

}
.projectSelector div p:active {
  background-color: orange;
    border-radius: .5em;
  text-shadow:.1em .1em .1em grey;
  border: .2em dashed #29BAAF;
}

.projectSelector div p:hover {
  background-color: orange;
    border-radius: .5em;
  text-shadow:.1em .1em .1em grey;
}
.project {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: flex-start;
}


/*END OF PORTFOLIO*/


/*START OF CONTACTFORM*/
.formContainer {
 display: flex;
 align-items: center;
justify-content: center;
height: auto;
}
.formWrapper {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 70%;
}
.buttons{
  margin-top: .5em;
}

.formWrapper input, .formWrapper textarea{
  margin-top: 0em;
  width: 100%;
  font-size: 1em;
  padding:.5em .5em;
  border: 0em;
  border-radius: 1em;
  background-color: orange;
  color: #FFF5C3;
}


.formWrapper p {
  margin-bottom: -.3em;
  padding-left: 1em;
  font-size: 1.2em;
  margin-top: .2em;
  width:100%;
  text-align: left;
  font-weight: 800;
  color: orange;
}


.error{
  /*color: red;*/
  border: .2em solid pink;
}

#insertSomething {
  display: none;
   text-align: right;
   width:100%;
   /*float:right;*/
  font-size: .5em;
  color: #29BAAF;
}

.buttons {
  display: flex;
  justify-content: space-around;
  flex-direction: row;

}
/*END OF CONTACTFORM*/

/*RECOMMENDATIONS*/
/*.slider { position:relative; width:auto; height:auto;
}*/

.reWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 26em;
}
.hidden{
  display: none;
}
.reveal {
  display: block;
}

.slider {
  width:80%;
  display: flex;
  justify-content: center;
  /*text-align: center;*/
  align-items: center;
  background-color: orange;
  border-radius: 1em;
  margin: 1em 1.61em;
  padding: 1em 2em;
  height: 22em;
}
.slider p {
  text-align: center;
}
#recFrom {
  text-align: right;
}
.rightButton, .leftButton {
  display: flex;
  align-items: center;
}
/*END OF RECOMMENDATIONS*/

/*ACHIEVEMENTS*/
.show {
  display: block;
}
.hide {
  display: none;
}

 img#loo{
  height: 12em;
  width: 16em;
}
 img#ga{
  height: 12em;
  width: 20em;
}

.acWrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 27em;
  padding: 1.61em 1em;
}

.aslider {
  width:80%;
  height: 22em;
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: orange;
  border-radius: 1em;
  margin:auto 1em;
  padding: 1em 1em;
}

.fa-angle-left, .fa-angle-right{
  color: #29BAAF;
}

.fa-briefcase{
  font-size: 8em;
  color:#694624;
}

.aslider p{
  background-color: #694624;
  border-radius: 1em;
  padding:.2em .5em;
}
.companylogo img{
  margin: 1em 1em;
}

#conti {
  height: 6em;
  width:6em;
  margin: .5em;
}
#mobis {
  height: 6em;
  width: 12em;
  margin: .5em;
}
#scotia {
  height: 6em;
  width: 6em;
  margin: .5em;
}
#randstad {
  height: 6em;
  width: 6em;
    margin: .5em;
}
/*END OF ACHIEVEMENTS*/

/*FOOTER*/
footer {
  /*background-color: #29BAAF;*/
  width: 100%;
  padding: .2em 1.6em;
  margin-bottom: 0em;
  /*margin-top: 5em;*/
  height:2em;
  /*position:fixed;*/
  left:0;
  bottom:0;
}
footer p{
  text-align: right;
  font-family: 'Hind', sans-serif;
  margin-bottom: 0em;
}
footer nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;s
  /*background-color: red;*/
}

footer nav a{
  margin-right: 2em;
  text-decoration: none;
  color: #FFF5C3;

}
footer nav a:hover{
  text-shadow:.1em .1em .1em black;
  font-size: 1.1em;
}
footer nav a:active-link>a{
  text-shadow:.1em .1em .1em black;
  font-size: 1.1em;
  text-decoration: underline;
}

/*END OF FOOTER*/

/*Hamburger*/
.menu{
  background-color: purple;
  width: 100%;
  padding: .2em 1.6em;
  margin-bottom: 0em;
  height:2.5em;
  position:fixed;
  top:-10em;
  padding-left: .4em;
  padding-right: .4em;
  transition: .3s all;
  z-index: 30;
}

header nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: flex-start;
}

header nav a{
  margin-right: 2em;
  text-decoration: none;
  color: #FFF5C3;
}
header nav a:hover{
  color: orange;
}

.fa-bars {
  color: #29BAAF;
}
.hamburger{
  position: absolute;
  left: .5em;
  top: .5em;
  display: none;
}
.menuShow {
  left: 0em;
  top: 0em;
}
/*end of hamburger*/


/*MODAL */
.modal {
    display: none;
    position: fixed; /* Stay in place */
    z-index: 30; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9);
    }
/* Modal Content (image) */
.modal-body button{
  font-size: 5em;
  color: white;
  text-align: center;
  background-color: transparent;
  border: none;
}
/*end of MODAL*/
#mobile{
  display: none;
}


/*media query*/
@media screen and (max-width: 1000px) {
#summary p{
  font-size: .7em;
}
.fa-id-badge {
  font-size: 12em;
}
.projectDescription img{
  display: none;
}
}

@media screen and (max-width: 725px) {
.emptyDiv{
  display: none;
}

.fa-id-badge {
  font-size: 11em;
}
.projectDescription p{
  display: none;
}
}

@media screen and (max-width: 700px) {
h1 {
  font-size: 3em;
}
#top h1{
  font-size: 5em;
}
.fa-id-badge {
  display: none;
}
.statsWrapper{
  width: 100%
}
#badge {
  width:0em;
}

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

.mobileBody{
  display: none;
}
#mobile{
  display: block;
}


.hamburger{
  display: block;
}
#summary {
  display: none;
}
.statsWrapper{
  width: 100%;
}
h1{
  margin-left: 0em;
}
.aslider p{
  display: none;
}
img#ga{
  width: 10em;
  height: 7em;
}
#hr{
  display: block;
}
img#conti, img#mobis, img#scotia, img#randstad {
  display: none;
}

.proSelector div  {
  padding-top: 0em;
 padding-bottom: 0em;
}
.proSelector div p  {
  padding-top: 0em;
 padding-bottom: 0em;
}

.slider p {
  font-size: .8em;
}
footer {
  font-size: .9em;
}
footer nav{
  display: none;
}
.menu {
  font-size: .9em;
  border-radius: .5em;
}
h1 {
  font-size: 2.5em;
}
}