*{
  margin: 0;
  padding: 0;
  outline: none;
}

/* ====================FONT==================== */
@font-face {
  font-family: title-font;
  src: url(../font/SourceSansPro-ExtraLight.otf);
}
@font-face {
  font-family: codes-font;
  src: url(../font/SourceCodePro-Regular.otf);
}
@font-face {
  font-family: read-font;
  src: url(../font/MerriweatherSans-Light.otf);
}

/* ====================HEADER==================== */

#header {
  width: 100%;
  position: fixed;
  opacity: .95;
  top: -40px;
  height: 40px;
  background-color: #00395e;
  transition: all ease-in-out .5s;
  box-shadow: 0px 1px 2px #000;
  text-align: center;
  z-index: 3;
}

/* ==========MENUITEMS========== */

.menuitem {
  color: #FFF;
  cursor: pointer;
  transition: all ease-in-out .3s;
  font-family: codes-font;
  text-transform: lowercase;
}
.menuitem:hover {
  color: #000;
}
.menuitemimg {
  width: 18px;
  filter: invert(100%);
  cursor: pointer;
  transition: opacity ease-in-out .4s, transform 1s, filter .3s;
}

.menuitemimg:hover {
  filter: invert(0%);
}
#datefilter {
  display: none;
  opacity: 0;
  position: absolute;
  top: 9px;
  left: 50%;
  margin: 0 0 0 -50px;
}

#dateback {
  display: none;
  opacity: 0;
  position: absolute;
  top: 9px;
  left: 50%;
  margin: 0 0 0 -235px;
}
#about {
  position: absolute;
  top: 9px;
  left: 50%;
  margin: 0 0 0 -160px;
}
#reseticon {
  position: absolute;
  top: 9px;
  left: 50%;
  margin: 0 0 0 150px;
}
#allgroup {
  position: absolute;
  top: 9px;
  left: 50%;
  margin: 0 0 0 -75px;
}
#allcat {
  position: absolute;
  top: 9px;
  left: 50%;
  margin: 0 0 0 35px;
}
#projects {
  position: absolute;
  top: 7px;
  left: 20%;
}
#codes {
  position: absolute;
  top: 7px;
  left: 60%;
}
#web {
  position: absolute;
  top: 7px;
  left: 20%;
}
#notweb {
  position: absolute;
  top: 7px;
  left: 60%;
}

/* ==========DROPDOWNS========== */

.filter {
  width: 250px;
  height: 30px;
  left: 50%;
  margin: 0 0 0 -125px;
  text-align: center;
  background-color: #00395e;
  position: fixed;
  opacity: .95;
  border-radius: 5px;
  box-shadow: 0px 1px 2px #000;
  z-index: 2;
  transition: top ease-in-out .4s;
}

/* ====================ABOUTSECTION==================== */
#aboutclose {
  display: none;
  position: relative;
  top: 9px;
  opacity: 0;
  transition: all ease-in-out .3s;
}
#aboutsection {
  text-align: left;
  width: 95%;
  margin: 20px 2.4% 20px 2.4%;
  display: none;
  opacity: 0;
  transition: opacity ease-in-out .4s;
}
#abouttitle {
  color: #c8d400;
  font-family: title-font;
  font-size: 25pt;
}
.aboutleft {
  width: 90%;
  margin: 20px auto;
}
.aboutp {
  color: #FFF;
  font-size: 14pt;
  font-family: read-font;
}
.aboutlinks {
  list-style-type: none;
  margin: 2% 0 0 75px;
}
.aboutlinks li {
  margin: 10px 0;
}
.aboutlink:hover {
  color: #c8d400;
}
.aboutlink {
  text-decoration: none;
  color: #FFF;
  font-family: read-font;
  font-size: 13pt;
  transition: all ease-in-out .3s;
}
.aboutlinkicon {
  width: 32px;
}
.aboutright {
  width: 100%;
}
.viewresume {
  cursor: pointer;
}

/* ==========RESUME========== */

#resume {
  display: none;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ebeff0;
  z-index: 5;
  transition: all ease-in-out .5s;
  text-align: center;
}
#closeresume {
  color: #606070;
  position: relative;
  top: 9px;
}
#closeresume:hover {
  color: #000;
}
#cv {
  text-align: left;
  margin: 0 35px;
}
#resumename {
  color: #606070;
  font-family: title-font;
  font-size: 25pt;
  margin: 0 -2px;
}
.resumecontact {
  text-decoration: none;
  color: #a4a4bf;
  font-family: read-font;
  font-size: 12pt;
  transition: color ease-in-out .2s;
}
.resumecontact:hover {
  color: #000;
}
.resumetitle {
  font-family: title-font;
  font-size: 22pt;
}
.experience {
  margin: 0 20px;
  width: 90%;
  border-bottom: solid 1px #a4a4bf;
  transition: all ease-in-out .3s;
}
.resumecompany {
  font-size: 20pt;
  color: blue;
  font-family: title-font;
}
.resumedate {
  float: right;
  font-family: read-font;
  font-size: 10pt;
  margin: 5px 0 0 0;
}
#resumecompany-nolink {
  color: #000;
  cursor: default;
}
.resumeposition {
  font-family: read-font;
  font-size: 13pt;
  color: #a4a4bf;
}
.resumedes {
  font-size: 13pt;
  font-family: read-font;
  margin: 10px 10px;
}
.resumeskills {
  list-style-type: circle;
  margin: 10px 10px;
  display: inline-block;
  vertical-align: top;
}
.resumeskills li {
  font-size: 13pt;
  margin: 5px 5px;
  font-family: read-font;
}

/* ====================CONTENT==================== */

#content {
  position: absolute;
  top: 80px;
  left: 0;
  display: none;
  opacity: 0;
  margin: 0 auto;
  width: 95%;
  margin: 0 2.5% 0 2.5%;
  transition: opacity ease-in-out .4s, left ease-in-out 1s;
}

#loadgif {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -250px;
  width: 500px;
}

/* ==========LIST========== */

.listwrapper {
  width: 95%;
  margin: 0 0 0 4.5%;
}

.listitem {
  width: 60%;
  padding: 5px 5px;
  margin: 5px 0 125px 19%;
  display: inline-block;
  vertical-align: top;
}

.listthumbnail {
  width: 100%;
  cursor: pointer;
  transition: all ease-in-out .2s;
}

.listutil {
  width: 100%;
  background-color: #ecf2f8;
  vertical-align: bottom;
}

.listicon {
  width: 12px;
  opacity: .8;
  cursor: pointer;
}

#listfiltericon {
  cursor: default;
}

.listlink {
  text-decoration: none;
  color: #000;
}

.listutillink {
  font-family: title-font;
  text-transform: lowercase;
  font-weight: bold;
  opacity: .7;
  font-size: 10pt;
  margin: 0 5px;
  transition: all ease-in-out .2s;
  vertical-align: top;
  cursor: pointer;
}

.listutillink:hover {
  opacity: 1;
}

.listtitle {
  font-family: title-font;
  font-weight: bold;
  font-size: 20pt;
  cursor: pointer;
  transition: color ease-in-out .3s;
}
.listtitle:hover {
  color: #606070;
}

.listdes {
  margin: 10px 0 0 0;
  font-family: read-font;
  color: #606070;
}

/* ==========PREVIEW========== */

#previewfield {
  width: 100%;
  transition: left ease-in-out .4s;
}
.arrowbar {
  width: 100%;
  height: 50px;
  vertical-align: top;
}
#nextitemdiv {
  cursor: pointer;
  width: auto;
  float: left;
}
#previtemdiv {
  float: right;
  cursor: pointer;
}
.hide {
  display: none;
}
.arrows {
  font-family: title-font;
  font-size: 13pt;
  transition: all ease-in-out .3s;
}
.arrows:hover {
  color: #606070; 
}
.previewitemicon {
  width: 10px;
  opacity: .5;
  cursor: pointer;
}
#previtemicon {
  transform: rotate(180deg);
}