@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Lato');

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

html {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  color:#49484D;
}


/* -------- Navigation Bar -------- */


div.navbar {
  background-color: ;
  overflow: hidden;
  margin-right: 3vw;
  display:flex;
  justify-content:space-between;
}

@media only screen and (max-width: 555px) {
  div.navbar {
    display:block;
  }
}


div.leftside{
  margin-bottom: 1rem;
  padding-top:1rem;
}

div.rightside{
  margin-top: 2rem;
}

@media only screen and (max-width: 555px) {
  div.rightside {
    text-align:center;
  }
}

a.nav{
  color: #c5cac8;
  text-align:center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

a.navactive{
  color:#49484D;
  text-align:center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

a.titlename{
  color: black;
  text-align:center;
  text-decoration: none;
  font-size: 17px;
}


.navbar a:hover {
  background-color: ;
  color: ;
}


/* -------- Title Lines -------- */


h1{
  margin-left: 3rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
}

@media only screen and (max-width: 555px) {
  h1 {
    margin-left:0rem;
  }
}

h2{
  margin-left:3.8rem;
  line-height: 2rem;
  color:#4DB69F;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
}

@media only screen and (max-width: 555px) {
  h2 {
    margin-left:0rem;
  }
}


/* -------- Work Gallery -------- */


div.gallerycontainer{
  padding: 5vw 2vw 2vw 2vw;
}


div.gallery {
  margin:2vw;
}

div.galleryimage{
  background-color: #49484D;
line-height: 0;
position:relative;

} /*https://stackoverflow.com/questions/31444891/mystery-white-space-underneath-image-tag/31445364#31445364*/


div.gallery img {
  width: 100%;
  height: auto;
  opacity: 1;
  transition: .5s ease;
} /*https://www.w3schools.com/howto/howto_css_image_overlay.asp*/

div.gallery:hover img{
  opacity: 0.05;
}

div.desc {
  padding: 10px 15px 15px 15px;
  text-align: center;
  font-size: 22px;
}

@media only screen and (max-width:555px){
  div.desc{
    font-size:14px;
  }
}


p.desc{
  color: #c5cac8;
  font-size:0.8rem;
  margin-top:0.3rem;
  font-size: 18px;
}

@media only screen and (max-width:555px){
  p.desc{
    font-size:12px;
  }
}

.responsivegallery {
  width: 70%;
  display: block;
  margin:auto;
  padding-bottom:1rem;

}

@media only screen and (max-width:555px){
  .responsivegallery {
    width: 95%;
  }
}


div.overlay {
  opacity: 0;
  position: absolute;
  top:0;
  left: 0;
line-height: 1.3rem;
padding: 10%;
margin:auto;
}

p.overlay{
}


div.gallery:hover .overlay{
  opacity: 1;
}

div.gallery:hover a:link{
  color:white;
}
div.gallery:hover a:visited{
  color:white;
}
div.gallery:hover a:hover{
  color:white;
}
div.gallery:hovera:focus{
  color:white;
}
div.gallery:hover a:active{
  color:white;
} /*https://stackoverflow.com/questions/4383460/dont-change-link-color-when-a-link-is-clicked*/



/* -------- Text By Image -------- */


div.textbyimagecontainer{
  display: flex;
  flex-wrap:wrap;
  padding: 5vw 2vw 2vw 2vw;
}

@media only screen and (max-width: 700px) {
  div.textbyimagecontainer {
    flex-direction:column-reverse;
    align-items: center;
  }
}

div.responsivetext{
  width: 40%;
  display:flex;
  align-items: center;
}/*the display and align-items are to display the text vertically in the div*/

@media only screen and (max-width: 700px) {
  div.responsivetext {
    width: 80%;

  }
}

div.responsiveimage{
  width: 60%;
}

@media only screen and (max-width: 700px) {
  div.responsiveimage {
    width: 80%;

  }
}

div.textleft{
  margin:2vw;
}

div.imageright{
  margin:2vw;
}

div.imageright img {
  width: 100%;
  height: auto;
}

img.doubleimageright{
  padding-top:4vw;
}

ul{
  margin-left:2vw;

}

/* -------- Image Only -------- */

div.imageonlycontainer{
  display: flex;
  flex-wrap:wrap;
  padding: 0vw 2vw 7vw 2vw;
}

div.imagecenter{
margin:2vw;
}

img.imagecenter  {
width:80%;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

@media only screen and (max-width: 555px) {
  img.imagecenter {
width:100%;
}
}

/* -------- About Me -------- */

div.textonlycontainer{
  display: flex;
  flex-wrap:wrap;
  padding: 5vw 2vw 2vw 2vw;
}

div.textcenter{
margin:1rem;
}

h1.textonlycontentheader{
  text-align: center;
  margin:auto;
  margin-top:1rem;
}

@media only screen and (max-width: 555px){
  h1.textonlycontentheader{
    font-size:1.5rem;
  }

}

p.textcenter  {
width:80%;
  margin-left:auto;
  margin-right:auto;
  display:block;
line-height:1.5rem;
}


@media only screen and (max-width: 555px) {
  img.textcenter {
width:100%;
}
}

img.profilepic {
  border-radius: 50%;
  width: 20vw;
  margin: auto;
  display: block;
}

@media only screen and (max-width:555px){
  img.profilepic{
    width:40vw;
  }
}

/* -------- Contact Form -------- */


div.contactform{
  padding: 5vw 2vw 2vw 2vw;
}



h1.contentheader{
  text-align: center;
  margin:0;
  padding-bottom:1.5rem;
  margin-top:1rem;
}

@media only screen and (max-width: 555px){
  h1.contentheader{
    font-size:1.5rem;
  }

}

fieldset{
  text-align: left;
  width:auto;
  border:none;
  margin-left: 13%;
  margin-right: 13%;
}

input.shortinput{
  width:100%;
  height:2rem;
  border:0.09rem solid #49484D;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-family:"Montserrat";
  padding:0.5rem;
  border-radius:4px;
}

input.form-email{
  width:100%;
  height:2rem;
  box-sizing: border-box; /* box-sizing property allows you to include the padding and border in an element's total width and height */
  border:0.09rem solid #49484D;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-family:"Montserrat";
  padding:0.5rem;
  border-radius:4px;

}

input.form-subject{
  width:100%;
  height:2rem;
  box-sizing: border-box; /* box-sizing property allows you to include the padding and border in an element's total width and height */
  border:0.09rem solid #49484D;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-family:"Montserrat";
  padding:0.5rem;
  border-radius:4px;

}

textarea.longinput{
  width:100%;
  height:6rem;
  box-sizing: border-box;
  border:0.09rem solid #49484D;
  font-size: 0.9rem;
  font-family:"Montserrat";
  padding:0.5rem;
  border-radius:4px;

}

textarea.form-message{
  width:100%;
  height:10rem;
  box-sizing: border-box;
  border:0.09rem solid #49484D;
  font-size: 0.9rem;
  font-family:"Montserrat";
  padding:0.5rem;
  background-color: #;
  border-radius:4px;

}

input.submitbutton{
background-color: #4DB69F/*#c78e77*/;
border: none;
color: white;
padding: 0.55rem 1.4rem;
margin-top: 2%;
text-decoration: none;
cursor: pointer;
font-size: 0.9rem;
font-family:"Montserrat";
border-radius:4px;

}

input.submitbutton:hover{
  animation-name:swell;
  animation-duration:2s;
  animation-iteration-count: 2;
}

@keyframes swell{
  50%{
    transform:scale(1.075);
    background-color: #30a02c;
  }
  100%{
    transform:scale(1);
  }
}

div.submitwrapper{
  text-align: center;
  margin-top:1.5%;
}


/* -------- Footer -------- */

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 5rem;    }

.footer-container {
  position: absolute;
  bottom:0;
  width:100vw;
  height: 5rem;
  display:flex;
  align-items: center;
}

div.footercenter{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  }
  /* Remember: HTML <img> elements are inline level elements, so they are affected by the text-align property. Apply the property to the div containing the image. */

img.linkedinicon{
  width:1rem;
  height: auto;
  margin-bottom:0.5rem;
  margin-left: 0.25rem;
  margin-right:0.25rem;
}

img.behanceicon{
  width:1.5rem;
  height: auto;
  margin-bottom:0.5rem;
  margin-left: 0.25rem;
  margin-right:0.25rem;
}

p.footer{
  color: #c5cac8;
  font-size:0.8em;
}

/* -------- Footer -------- */

input.submitbutton{
background-color: #4DB69F/*#c78e77*/;
border: none;
color: white;
padding: 0.55rem 1.4rem;
margin-top: 2%;
text-decoration: none;
cursor: pointer;
font-size: 0.9rem;
font-family:"Montserrat";

}


/* -------- Resume Button -------- */


div.resumebutton{
}

button{
  margin:auto;
  border-radius:4px;
background-color: #4DB69F/*#c78e77*/;
border: none;
color: white;
padding: .55rem 1.4rem;
text-decoration: none;
cursor: pointer;
font-size: 0.9rem;
font-family:"Montserrat";
display:block;
}

/* -------- App Title -------- */

h1.apptitle{
  text-align: center;
  margin:auto;
  padding-bottom:1.5rem;
  padding-top:1.5rem;
  font-family: 'Montserrat', sans-serif;
}

@media only screen and (max-width: 555px) {
  h1.apptitle {
font-size: 1.5rem;
  }
}

h1.apptitlewithsubtitle{
  text-align: center;
  margin:auto;
  padding-top:1.5rem;
  font-family: 'Montserrat', sans-serif;
} /*this removes the space below for when there's a subtitle*/

h2.apptitle{
  color:#c5cac8;
  text-align: center;
  margin:auto;
}

/* -------- Card Title -------- */

h2.cardtitle{
  text-align: center;
  margin:auto;
  color: #49484D;
  font-weight: 700;
}