/* -------General HTML element styles------- */

a:-webkit-any-link {
    text-decoration: none;
}

body{
  font-family: 'Dosis', sans-serif;
  background-color: #FFF;
}

button {
  padding: 1em;
  font-size: .75em;
  color: white;
  border: none;
}

button:hover {
  cursor: pointer;
}

div {
  box-sizing: border-box;
}

h1{
  color: #302A1A;
  font-size: 5.0rem;
}

h4{
  color: #302A1A;
  font-size: 3.0rem;
}

h5{
  color: #C45B16;
  font-size: 2.4rem;
}

li {
    display: inline-block;
    color: #302A1A;
    font-size: 3.0rem;
}

li > a {
    color: #302A1A;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 24px;
    margin-right: 24px;
    text-decoration: none;
}

li a:hover:not(.active) {
    color: #C45B16;
}

li a:hover {
    border-width: thin;
    border-bottom: solid .25rem #C45B16;
}

p{
  height: auto;
  font-size: 2.4rem;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  padding-top: 1.5rem;
  margin-left: 17%;
  margin-right: 17%;
}

span{
  font-size: 2.4rem;
}

ul {
    display: inline-block;
    list-style-type: none;
    /*overflow: hidden;*/
    /*background-color: #333;*/
}

ul > li {
  letter-spacing: -0.1rem;
  font-weight: 300;
}





                          /* -------General HTML class styles------- */

.aboutme{
  margin-left: 13%;
  margin-right: 13%;
  margin-top: 3rem;
  text-align: center;
}

.iconcircle{
  margin-top: 4rem;
  height: 12.8rem;
  border-radius: 50%;
  background-color: #16AD9D;
  text-align: center;
}

.contactinfo{
  font-size: 1.8rem;
  margin-top: 2rem;
  text-align: center;
}

.contacticon{
  color: #FFF;
  line-height: 1rem;
  margin-top: -0.5rem;
  padding-top: 50%;
}

.contacticon:hover{
  color: #B9E3C7;
}

.contactlink{
  color: #C45B16;
}

.contactlink:hover{
  color: #16AD9D;
}

.contactrow{
  text-align: center;
}

.header{
  position: relative;
  top: 3rem;
  vertical-align: middle;
}

.htags{
  display: inline-block;
}

.iconpad{
  margin-top: 4rem;
  background-color: #FFF;
  text-align: center;
}

.icon{
  background: #FFF; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#FFF, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#FFF, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#FFF, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#FFF, #B9E3C7); /* Standard syntax */
  text-align: center;
  font-size: 2.4rem;
}

.iconname{
  margin-top: 0;
}

.mainpage{
  margin-left: 15px;
}

.nav-links{
  display: inline-block;
  float: right;
  position: relative;
  top: 7.5rem;
}

.name-tag{
  margin: 0 auto;
  display: inline-block;
  float: left;
}

.pagehead{
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
  font-size: 3.6rem;
  margin-top: 6rem;
  color: #FFF;
  text-align: center;
  border-radius: 12px;
  padding: 3rem;
  margin-left: 17%;
  margin-right: 17%;
}

.profpic{
  margin-right: 1.5rem;
  display: inline-block;
}

.projecthead{
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
  font-size: 3.6rem;
  margin-top: 6rem;
  color: #FFF;
  text-align: center;
  border-radius: 12px;
  padding: 3rem;
  margin-left: 17%;
  margin-right: 17%;
}

.projectbuttons{
  background: #16AD9D;
  margin-top: 4rem;
  color: #FFF;
  /*margin-left: 17%;
  margin-right: 17%;*/
  text-align: center;
}

.randquote{
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
  font-size: 4.2rem;
  margin-top: 6rem;
  color: #FFF;
  text-align: center;
  border-radius: 12px;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  margin-left: 17%;
  margin-right: 17%;
}

.resumeinfo1{
  height: auto;
  font-size: 2.4rem;
  margin-top: 1rem;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  margin-left: 17%;
  margin-right: 17%;
}

.resumeinfo2{
  height: auto;
  font-size: 2.4rem;
  margin-top: 1rem;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  margin-left: 17%;
  margin-right: 17%;
}

.resumebuttons1{
  text-align: center;
  padding-bottom: 1.5rem;
  margin-left: 17%;
  margin-right: 17%;
}

.resumebuttons2{
  margin-top: 2.5rem;
  text-align: center;
  padding-bottom: 1.5rem;
  margin-left: 17%;
  margin-right: 17%;
}

.skillrow1{
  margin-bottom: 1rem;
}

/*.skillrow2{
  height: 1rem;
}*/





                          /* -------General HTML id styles------- */

#githubmain{
  color: #C45B16;
}

#pdfbtn{
  border: none;
  font-size: 1.4rem;
  font-family: 'Dosis', sans-serif;
  background: #C45B16;
  margin-left: 1.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  color: #FFF;
}

#pdfbtn:hover {
  border: none;
  color: #FFF;
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
}

#viewbtn{
  border: none;
  font-size: 1.4rem;
  font-family: 'Dosis', sans-serif;
  background: #C45B16;
  margin-right: 1.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  color: #FFF;
}

#viewbtn:hover {
  border: none;
  color: #FFF;
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
}





                          /* -------Modal class and id element styles------- */

#modal1 {
  top: 0;
  left: 0;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 173, 157, .7);
}

#close-modal1 {
  /*position: absolute;*/
  /*top: 1rem;*/
  /*left: 31rem;*/
  float: right;
  z-index: 2;
  font-size: 1.5em;
  font-family: 'Dosis', sans-serif;
  height: 1em;
  width: 1em;
  font-weight: bolder;
  text-align: center;
  color: white;
  visibility: visible;
}

#close-modal1:hover {
  cursor: pointer;
}

#modal2 {
  top: 0;
  left: 0;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 173, 157, .7);
}

#close-modal2 {
  /*position: absolute;*/
  /*top: 1rem;*/
  /*left: 31rem;*/
  float: right;
  z-index: 2;
  font-size: 1.5em;
  font-family: 'Dosis', sans-serif;
  height: 1em;
  width: 1em;
  font-weight: bolder;
  text-align: center;
  color: #FFF;
  visibility: visible;
}

#close-modal2:hover {
  cursor: pointer;
}

#modal3 {
  top: 0;
  left: 0;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 173, 157, .7);
}

#close-modal3 {
  /*position: absolute;*/
  /*top: 1rem;*/
  /*left: 31rem;*/
  float: right;
  z-index: 2;
  font-size: 1.5em;
  font-family: 'Dosis', sans-serif;
  height: 1em;
  width: 1em;
  font-weight: bolder;
  text-align: center;
  color: white;
  visibility: visible;
}

#close-modal3:hover {
  cursor: pointer;
}

#modal4 {
  top: 0;
  left: 0;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 173, 157, .7);
}

#close-modal4 {
  /*position: absolute;*/
  /*top: 1rem;*/
  /*left: 31rem;*/
  float: right;
  z-index: 2;
  font-size: 1.5em;
  font-family: 'Dosis', sans-serif;
  height: 1em;
  width: 1em;
  font-weight: bolder;
  text-align: center;
  color: white;
  visibility: visible;
}

#close-modal4:hover {
  cursor: pointer;
}

.modal-button1 {
  background: url(../images/tile_Music.png);
  height: 19rem;
  border-radius: 12px;
}

.modal-button2 {
  background: url(../images/tile_Philo.png);
  height: 19rem;
  border-radius: 12px;
}

.modal-button3 {
  background: url(../images/tile_Vibe.png);
  height: 19rem;
  border-radius: 12px;
}

.modal-button4 {
  background: url(../images/tile_Rest.png);
  height: 19rem;
  border-radius: 12px;
}

.content{
  color: #FFF;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  background-color: rgba(196, 91, 22, 0.8);
}

.content:hover {
  cursor: pointer;
  color: #FFF;
}

.modal-content {
  position: relative;
  margin: 0 37%;
  background-color: white;
  top: 10%;
  /*width: 40%;*/
}

.modal-body {
  /*position: absolute;*/
  border-radius: 12px;
  width: auto;
  height: 42rem;
  top: 10px;
  z-index: 3;
  padding-top: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

.projectname1{
  text-align: center;
  font-size: 3rem;
  font-weight: lighter;
  border-width: thin;
  border-bottom: solid .25rem #FFF;
}

.projectname2{
  text-align: center;
  font-size: 3rem;
  font-weight: lighter;
  border-width: thin;
  border-bottom: solid .25rem #FFF;
}

.projectname3{
  margin-bottom: 2rem;
  text-align: center;
  font-size: 3rem;
  font-weight: lighter;
  border-width: thin;
  border-bottom: solid .25rem #FFF;
}

.projectname4{
  text-align: center;
  font-size: 3rem;
  font-weight: lighter;
  border-width: thin;
  border-bottom: solid .25rem #FFF;
}

.projectdesc1{
  padding-top: 3rem;
  text-align: center;
  padding-left: 4rem;
  padding-right: 4rem;
  font-size: 1.8rem;
}

.projectdesc2{
  padding-top: 2rem;
  text-align: center;
  padding-left: 4rem;
  padding-right: 4rem;
  font-size: 1.8rem;
}

.projectdesc3{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-top: 2rem;
  text-align: center;
  padding-left: 4rem;
  padding-right: 4rem;
  font-size: 1.8rem;
}

.projectdesc4{
  padding-top: 3rem;
  text-align: center;
  padding-left: 4rem;
  padding-right: 4rem;
  font-size: 1.8rem;
}

.projpic1 {
  background: url(../images/modal_Music.png);
  height: 42rem;
  border-radius: 12px;
}

.projpic2 {
  background: url(../images/modal_Philo.png);
  height: 42rem;
  border-radius: 12px;
}

.projpic3 {
  background: url(../images/modal_Vibe.png);
  height: 42rem;
  border-radius: 12px;
}

.projpic4 {
  background: url(../images/modal_Rest.png);
  height: 42rem;
  border-radius: 12px;
}

.projectlink1 {
    margin-top: 3rem;
    text-align: center;
    border: none;
    font-size: 1.4rem;
    font-family: 'Dosis', sans-serif;
    background: #C45B16;
    margin-right: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    color: #FFF;
}

.projectlink2 {
    margin-top: 2rem;
    text-align: center;
    border: none;
    font-size: 1.4rem;
    font-family: 'Dosis', sans-serif;
    background: #C45B16;
    margin-right: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    color: #FFF;
}

.projectlink3 {
    margin-top: 3rem;
    text-align: center;
    border: none;
    font-size: 1.4rem;
    font-family: 'Dosis', sans-serif;
    background: #C45B16;
    margin-right: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    color: #FFF;
}

.projectlink4 {
    margin-top: 4rem;
    text-align: center;
    border: none;
    font-size: 1.4rem;
    font-family: 'Dosis', sans-serif;
    background: #C45B16;
    margin-right: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    color: #FFF;
}

.projectlink1:hover {
  border: none;
  color: #FFF;
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
}

.projectlink2:hover {
  border: none;
  color: #FFF;
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
}

.projectlink3:hover {
  border: none;
  color: #FFF;
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
}

.projectlink4:hover {
  border: none;
  color: #FFF;
  background: #16AD9D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#16AD9D, #B9E3C7); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#16AD9D, #B9E3C7); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#16AD9D, #B9E3C7); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#16AD9D, #B9E3C7); /* Standard syntax */
}





                          /* -------Mobile Responsivity------- */
                       /* -------Currently in development------- */

@media (max-width: 400px) {
  li {
    font-size: 2.5rem;
    display: block;
  }
  .name-tag{
    width: inherit;
  }
  .profpic{
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .htags{
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .name-tag{
    width: inherit;
  }
  .profpic{
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .htags{
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

/* Larger than phablet (also point when skeleton grid becomes active) */
@media (max-width: 549px) {
  .container{
    width: 100%;
  }
  .name-tag{
    width: inherit;
  }
  .profpic{
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .htags{
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .nav-links{
    width: inherit;
    position: relative;
    top: 2rem;
  }
}

/* Resume button fix */
@media (max-width: 680px) {

}

/* Larger than tablet */
@media (max-width: 750px) {
  .nav-links{
    width: inherit;
    position: relative;
    top: 2rem;
  }
  ul{
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

/* Nav fix */
@media (max-width: 900px) {
  .container{
    width: 100%;
  }
  .name-tag{
    width: inherit;
  }
  .profpic{
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .htags{
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .nav-links{
    width: inherit;
    position: relative;
    top: 2rem;
  }
  ul{
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

/* Larger than desktop */
@media (max-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}