html {
  font-size: 100%;
}

body {
  background-image: url(../img/bgt.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 5px;
  margin: 0px;
  padding: 0px;
}

div#container {
  background-color: white;
  max-width: 600px;
  margin: 30px auto;
  border-radius: 10px;
}

h1 {
  font-weight: 600;
  padding: 25px 5px 5px 4.3rem;
  color: #26343f;
  font-size: 2.12rem;
  margin: 0px;
}

h2 {
  font-weight: 300;
  padding: 0px 5px 20px 4.3rem;
  color: #5a5a5a;
  font-size: 1.5rem;
  margin: 0px;
}

div#header {
  border-bottom: 2px solid #ddd;
  margin-bottom: 15px;
}

div#bottom {
  height: 20px;
}

.item-title {
  padding: 1rem 10px 2px 4.3rem;
  color: #1f1f1f;
  font-size: 1.19rem;
  margin: 0px;
}

.item-subtitle {
  padding: 0px 10px 1rem 4.3rem;
  color: #26343f;
  font-size: 1rem;
  margin: 0px;
}

a.item {
  text-decoration: none;
  display: block;
  position: relative;
}

a.item:hover {
  background: #eee;
}

hr.gray {
  border: none;
  border-top: 1px solid #d6d6d6;
  margin: 0px 70px;
}

hr.graystrong {
  border: none;
  border-top: 2px solid #d6d6d6;
  margin: 20px 0px 10px 2rem;
}

.sectiontitle {
  padding: 0px 10px 2px 2rem;
  color: #767676;
  font-size: 1rem;
  margin: 0px;
}

.sectionsubtitle {
  padding: 0px 10px 5px 4.3rem;
  color: #888;
  font-size: .8rem;
  margin: 0px;
  font-style: italic;
}

.light {
  font-weight: 100;
}

#caption {
  font-size: 1rem;
  color: white;
  font-weight: 400;
  text-align: center;
  background: #26343f;
  padding: 7px 0px;
}

#caption a,
#caption a:link,
#caption a:hover,
#caption a:visited {
  text-decoration: none;
  color: white;
}

hr.subline {
  margin: 10px 0px 5px 4.2rem;
}

a.item:before {
  content: "";
  display: block;
  position: absolute;
  background-image: none;
  background-size: cover;
  width: 24px;
  height: 24px;
  top: 23%;
  left: 2.3rem;
}

a.icon-vcard {
  content: "";
  display: block;
  position: absolute;
  background-image: none;
  background-size: contain;
  width: 65px;
  height: 48px;
  top: 23%;
  right: 2.3rem;
  background-image: url('../img/LOGO-POLI-NEGRO.png');
  font-size: .8rem;
  text-decoration: none;
  color: #666;
  padding-top: 49px;
  text-align: center;
  background-repeat: no-repeat;
}

a.icon-vcard:hover,
a.icon-vcard:active {
  color: #cb443a;
}

a.item.icon-web:before {
  background-image: url('../img/icon-web.png')
}

a.item.icon-mail:before {
  background-image: url('../img/icon-mail.png');
  top: 24%;
}

a.item.icon-mailgray:before {
  background-image: url('../img/icon-mailgray.png');
  top: 24%;
}

a.item.icon-github:before {
  background-image: url('../img/icon-github.png')
}

a.item.icon-linkedin:before {
  background-image: url('../img/icon-linkedin.png')
}

a.item.icon-youtube:before {
  background-image: url('../img/icon-youtube.png')
}

@media only screen and (max-width: 600px) {
  html {
    font-size: 90%;
  }
}

@media only screen and (max-width: 500px) {
  html {
    font-size: 82%;
  }

  a.item:before {
    width: 20px;
    height: 20px;
  }
}

@media only screen and (max-width: 400px) {
  html {
    font-size: 75%;
  }

  a.item:before {
    top: 21%;
    left: 2.1rem;
  }

  a.icon-vcard {
    width: 55px;
    font-size: 0.9rem;
    padding-top: 42px;
  }

  h1 {
    padding: 25px 5px 5px 2.3rem;
  }

  h2 {
    padding: 0px 5px 20px 2.3rem;
  }
}