/* colours:

https://color.adobe.com/create/color-wheel/?base=2&rule=Triad&selected=4&name=My%20Kuler%20Theme&mode=rgb&rgbvalues=0.4980392156862745,0.12622969187670033,0.019607843137254867,0.5260477834545082,0.8333333333333334,0.20179738562091507,0.8,0.26666666666666666,0.11372549019607843,0.2824943833489604,0.34976965149583883,0.6000000000000001,0.2948899185722344,0.3383500496818105,0.5&swatchOrder=0,1,2,3,4

https://kuler.adobe.com/create/color-wheel/?base=0&rule=Analogous&selected=0&name=My%20Kuler%20Theme&mode=rgb&rgbvalues=0.36187429518425596,0.4624610409383056,0.6431372549019608,0.2074799755048547,0.28627450980392166,0.15347465315985362,0.3758577682591498,0.7331372549019608,0.6189718874631056,0.5913062582292534,0.3758577682591498,0.7331372549019608,0.6931372549019609,0.36099095030886313,0.3553509523391534&swatchOrder=0,1,2,3,4

https://kuler.adobe.com/create/color-wheel/?base=2&rule=Shades&selected=3&name=My%20Kuler%20Theme&mode=rgb&rgbvalues=0.6219771241830065,0.6940904139433449,0.973529411764706,0.46225490196078434,0.5158496732026068,0.723529411764706,0.27058823529411763,0.30196078431372547,0.4235294117647059,0.30253267973856207,0.3376089324618686,0.4735294117647059,0.20669934640522875,0.23066448801742578,0.3235294117647059&swatchOrder=0,1,2,3,4

https://kuler.adobe.com/create/color-wheel/?base=2&rule=Compound&selected=3&name=My%20Kuler%20Theme&mode=rgb&rgbvalues=0.13690446273145473,0.24032549350687535,0.625,0.27116467508519876,0.3037603590396027,0.42500000000000004,0.19637848693009163,0.6604285533989614,0.8250000000000001,0.846875,0.5731576513967311,0.4133042422653592,0.8,0.26666666666666666,0.11372549019607843&swatchOrder=0,1,2,3,4

#454D6C

*/

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #eee;
  font-family: "alverata-pe";
}
.background {
  top: 0;
  position: fixed;
  color: #ddd;
  z-index: -1;
  font-size: 5vw;
  overflow: hidden;
  height: 100%;
  speak: none;
}
.container {
  margin: auto;
  padding: 0;
  width: 80%;
  background-color: rgba(75, 86, 127, 0.85);
  clear: both;
}
.container:before, .container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}
.light h1, .light h2 {
  text-align: center;
}
#manifesto {
  top: 5vh;
  position: relative;
  text-align: center;
  padding-bottom: 2.5vw;
}
#me {
  width: 25vw;
  margin-bottom: 2.5vw;
  height: 25vw;
  border-radius: 500px;
  overflow: hidden;
  background-color: #4D5679;
  margin: auto;
}
#me img {
  max-width: 100%;
  height: auto !important;
  display: block;
  position: relative;
}
#myimage {
  top: -2.5vw;
}
.col-2-5 {
  float: left;
  width: 40%;
  margin-bottom: 2.5vw;
}
.col-1-5 {
  float: left;
  width: 20%;
  margin-bottom: 2.5vw;
}
.portfolio {
  width: 25vw;
  height: 25vw;
  border-radius: 500px;
  position: relative;
  text-align: center;
  overflow: hidden;
  margin: auto;
}
.portfolio img {
  max-height: 100%;
  width: auto !important;
  display: block;
  position: absolute;
  display: block;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  opacity: 0.85;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.portfolio:hover img {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 1.0;
}
.portfolio h3 {
  position: absolute;
  z-index: 1;
  top: 9vw;
  width: 100%;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.button {
  padding: 1.5vw 2vw;
  font-family: "alverata-pe";
  background-color: #CC441D;
  border-radius: 1vw;
  display: block;
  position: relative;
  width: 15vw;
  margin-top: 4vw;
  font-size: 3vw;
  text-decoration: none;
  color: #fff;
}
.button:hover {
  background-color: #D89269;
}
.left {
  float: left;
  clear: left;
  margin-left: 5vw;
}
.right {
  float: right;
  margin-right: 5vw;
}
.menu {
  background-color: #CC441D;
  width: 100%;
  padding-left: 15vw;
  position: fixed;
  margin: 0;
  z-index: 10;
}
.menu ul {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  float: left;
  text-align: center;
}
.menuitem {
  display: block;
  font-family: "alverata-pe";
  padding: 1.3vw 2vw 1vw 2vw;
  color: #eee;
  font-size: 2vw;
  height: 4vw;
  line-height: 4vw;
}
.menuitem:link:hover {
  background-color: #D89269;
  color: #fff;
}
.menuitem h2 {
  font-family: "ff-market-web";
  font-size: 3vw;
  margin: 0;
  margin-right: 2vw;
  padding-top: 0;
}
.current {
  background-color: #4B567F;
}
.content {
  margin: 8vw 5vw 1vw 5vw;
}
#manifesto h1 {
  font-size: 15vw;
  font-family: "ff-market-web";
  text-align: center;
  color: #eee;
  padding: 0px;
  margin: 0px;
}
.content p {
  margin: 1vw 0;
  text-align: justify;
  font-size: 1.5vw;
  color: #eee;
}
h1 {
  font-size: 3vw;
  font-family: "alverata-pe";
  font-weight: normal;
  color: #fff;
  padding: 0;
  margin: 1vw 0;
}
h2 {
  font-size: 2.5vw;
  font-family: "alverata-pe";
  font-weight: normal;
  color: #fff;
  padding: 0;
  margin: 1vw 0;
}
h3 {
  font-size: 2.2vw;
  font-family: "alverata-pe";
  font-weight: normal;
  color: #fff;
  padding: 0;
  margin: 1vw 0;
}
.resume p {
  text-align: left;
}
.title {
  font-size: 2vw;
  font-family: "alverata-pe";
  font-weight: normal;
  color: #fff;
}
.aside {
  text-align: right;
  position: relative;
  float: right;
}
a {
  text-decoration: none;
  color: #fff;
}
.content ul {
  margin-bottom: 1vw;
}
.content li {
  font-size: 1.5vw;
  color: #eee;
  margin-left: 35px;
  padding-left: 5px;
}
.content .important {
  font-weight: bold;
}
table {
  padding: 0;
  border-collapse: collapse;
  border: 0.5vw solid #60BB9E;
  color: #fff;
  background-color: #454D6C;
}
td, th {
  padding: 1vw 1vw 1vw 2vw;
  font-size: 1.5vw;
}
th {
  background-color: #60BB9E;
  color: #fff;
  font-size: 1.6vw;
}
tr:nth-child(even) {
  background-color: #4D5679;
}
footer {
  padding: 0.5vw 0;
  margin-top: 2vw;
  text-align: center;
  color: #fff;
  background-color: #CC441D;
  width: 100%;
  clear: both;
}
footer a:hover i {
  color: #CC441D;
  /*background-color: #fff;*/
}
footer a:hover .fa-square {
  color: #fff;
}
.fa-stack {
  margin: 0 1vw;
}
.fa-square {
  color: #CC441D;
}