html,body,div,span,h1,h2,h3,h4,h5,h6,p,
img,ul,footer,header,nav,section {
  left: 0;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
  scroll-behavior: smooth;
  transition-timing-function: ease-in;
}

body {
  font-family: "Lato", Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.8em;
  color: #32021f;
}

.row {
  width: 96%;
  max-width: 75%;
  display: flex;
  margin: auto;
}

h1,h2,h3,h4,h5,h6 {
  color: #313131;
  font-family: "Amaranth", Arial, Helvetica, sans-serif;
  font-weight: normal;
}

h1 {
  font-size: 7em;
  line-height: 1.5em;
  margin-bottom: auto;
}

h2 {
  font-size: 6em;
  margin-bottom: 3em;
}

h3 {
  font-size: 5em;
  margin-bottom: 1.5em;
}

h4 {
  font-size: 4em;
  margin-bottom: 1.5em;
}

h5 {
  font-size: 2em;
  font-weight: bold;
  line-height: 2em;
  padding-bottom: 1em;
}

h6 {
  font-size: 1.5em;
  font-weight: bold;
}

p { margin: 0.5em 0 0.5em 0;}

li { list-style: none;}

a:hover {color: #ff3c38;}

img {
  max-width: 100%;
  height: auto;
}

.button,
.button:visited,
button {
  display: inline-block;
  text-decoration: none;
  padding: 0.7em 1em;
  margin-bottom: 1.2em;
  border: none;
  cursor: pointer;
  height: auto;
  transition: all .2s ease-in-out;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

@-ms-viewport{
  width: device-width;
}

@media only screen and (min-width: 1160px) {
  /* For Deskstop and large screens*/

  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  #about p { text-align: justify;}
  
  #about .download { width: 58.33333%;}

  #skills .row { justify-content: space-between;}

  #resume .row { max-width: 60vw;}

  #portfolio .row {
    max-width: 55vw;
    justify-content: space-around;
  }

 .portfolio-item .item-wrap .link-icon {display: block;} 

  .portfolio-item .portfolio-item-meta p {
    display: block;
    visibility: visible;
  }
}

@media only screen and (max-width: 1160px) {
  /* For tablets and desktops: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 18%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

  #navbar li a, .menu {
    display: inline-block;
 }
 #about h5 {
 text-align: center;
}

 #about .row, #resume .row { 
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

  #skills .row {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  
  }
  #skills .row {
    justify-content: space-around;
  }
  
  #portfolio .row {
    max-width: 80vw;
    justify-content: center;
  }

  #portfolio .portfolio-item .item-wrap .link-icon, .portfolio-item-meta p{
    display: none;
    visibility: hidden;
  }
}

@media only screen and (min-width: 584px) {
  /* For large screen mobile */
  h1 {font-size: 6em}
}

@media only screen and (max-width: 460px) {
  /* For mobile */

  [section] {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  [class*="col-"] {
    width: 100%;
    padding: 0;
    margin: auto;  
  }

  .col-s-3 {width: 25% !important;}

  #about p {
    padding-right: 0em;
    text-align: left;
  }

  #about .download {
    width: 100% !important;
  }

  #about h5 {
    text-align: center;
  }

  .hero .banner-text {
    font-size: 60%;
    margin: 2em;
  }

  #about .row, #skills .row, #resume .row { 
    display: block;
    flex-direction: column;
    width: auto; 
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
  }
 
  #resume h5 {
    text-align: center !important;
    padding-bottom: 1em;
  }

  #resume .row {
    max-width: 80vw;
  }

  #resume p {
    font-size: 80%;
  }
}