@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);
* { box-sizing: border-box; animation-timing-function: cubic-bezier(0,0,0,1); animation-fill-mode: forwards; transition: all 0.3s; }

body {
  font-family: 'Roboto';
  font-size:16px; margin:0 0px;
  font-weight:400;
  color:#7a7a7a;
  overflow-x: hidden;
  -webkit-font-smoothing:antialiased;
}

.fade_ani { animation-name: fade; animation-duration:0.5s }

a { text-decoration:none; color:black; }
a:hover { color:#b7b7b7 }
h1,h2,h3 { margin:0; color:black }
h1 { font-size:30px; font-weight:700; display:inline; }
h2 { font-size:52px; line-height:130%;  animation-duration: 3s; margin-top:-40px; }
h3 { font-size: 49px; font-weight:700; margin-bottom:20px; }
h4 { font-size: 24px; margin: 10px 0;}
p { line-height:150%; margin:0; }
img { border-radius:4px }

#container {
  margin:0 auto;
  max-width:1134px;
  position: relative;
}

#hero {
  height:100vh;
  display: table-cell;
  vertical-align: middle;
  margin:0 auto;
}

#main_image {
  width:520px;
  position:absolute;
  right:0;
  top:calc( 50vh - 300px );
  z-index:-100;
  opacity:1;
  animation-name: main_image;
  animation-duration: 3s;
  transition: none;
}

#main_content {
  position: relative;
  height:634px;
  display: table-cell;
  vertical-align: middle;
}

#header {
  z-index: 999;
  top:0;
  position: absolute;
  width:100%;
  padding: 10px 0;
}

#header .social {
  opacity:0;
  right:50px;
  left: auto;
  top:12px;
}

#header .social a {
  padding-right:0;
  padding-left:50px;
}

#header .social img {
  width:30px;
}

#header .social .count {
  display:none;
}

#header.sticky {
  position: fixed;
  background-color:rgba(255,255,255,0.9);
  z-index:200;
  width: 100%;
  border-bottom:1px solid #ececec;
}

#menu {
  display:inline;
  margin-left:20px;
  position: relative;
  top:-4px
}

#menu a {
  margin-left:20px;
  cursor:pointer;
}

.project {
  width:1134px;
  margin:0 auto;
  margin-bottom:100px;
}

.grid {
  display:grid;
  grid-template-columns: 560px 266px 266px;
  grid-template-rows: 200px 200px;
  grid-gap: 20px;
  margin-top:20px;
}

.grid img {
  grid-column: 2 | 3;
  grid-row: 1 | 2;
  height: 200px;
  display: inline-block;
  box-sizing:border-box;
  spacing:0;

}

.grid img:first-of-type {
  grid-row: 1 / 3;
  height: 420px;
}

.grid.three {
  grid-template-columns: 364.6px 364.6px 364.6px;
  grid-template-rows: auto;
}

.grid.three img:first-of-type {
  grid-row: auto;
  height:273px;
}

.grid.three img {
  grid-column: auto;
  grid-row: auto;
  height:273px;
}

img.dark {
  filter: brightness(97%);
}

#blog {
  margin-bottom:100px;
}

#blog .item {
  padding-left:384px;
  height:190px;
  margin-top:30px;
}

#blog img {
  width:364px;
  position: absolute;
  left:0;
}

#contact p {
  margin: 20px 0;
}

.social { position: absolute; bottom:0; left:-20px; font-size:14px;}
.social a { padding-right:80px; height:80px; display:table-cell; border:0; text-align: center; vertical-align: middle; position: relative}
.social img { position: absolute; top:0; left:0; right:0; margin:auto; transition: all 0.3s; filter: brightness(0%); width:40px }
.social .count { position: absolute; bottom:0; left:0; right:0; margin:auto; transition: all 0.5s }
.social a:hover img { filter: brightness(100%); transform: translateY(-4px) }
.social a:hover .count { color:black; opacity:0.5 }

#footer {
  width:100vw;
  left:0;
  position: absolute;
  transition: none;
  overflow: hidden;
  padding-top:100px;
  margin-top:-300px;
  z-index:-1;
}

#footer img {
  position: absolute;
  width:100vw;
  bottom:0;
  left:0;
  transition: none;
  transform-origin: bottom;
}

#footer img:first-of-type {
  position: static;
}

.fade {
  opacity:0;
}

@keyframes main_image {
  from { transform: translateY(40px); opacity:0;  }
  top: { opacity: 0.9 }
}

@keyframes fade {
    0% { transform: translateY(20px); opacity:0; }
    100% { opacity:1 }
}

@media screen and (max-width: 1180px) {
  #hero { height: 1000px; width:100vw; text-align:center; margin:0 auto; }
  #main_content { width:100vw; height: auto; }
  #menu { display:none }
  #header { width:100%; }
  h1 { font-size:44px; }
  #header.sticky { width:100%; left:0; }
  #header .social { display:none }
  #main_image { right:auto; margin: 0 auto 50px; width:400px; position: static; }
  h2 { text-align:center; font-size:34px; margin-top:100px; font-weight:400 }
  h3 { font-size:30px; }
  h4 { font-size:22px }
  .social { width:100%; position: static; margin:50px 0 }
  .social a { width: calc(100vw / 6); }
  input, .button {
    height:60px;
    line-height:60px;
    display:block;
    margin: 20px 0;
    width:100%;
    font-size:16px;
  }
  .project { width:560px }
  #about p { max-width: 560px }
  #about { margin-bottom:100px; }
  .grid {
    grid-template-columns: 270px 270px;
    grid-template-rows: 420px 210px 210px;
  }
  .grid img:first-of-type {
    grid-column: 1 / 3;
    grid-row: auto;
  }
  .grid.three {
    grid-template-columns: 270px 270px;
    grid-template-rows: 420px 210px;
  }
  .grid.three img:first-of-type {
    grid-column: 1/3;
    width:560px;
    height:auto;
  }
  .grid.three img {
    width:270px;
    height:auto;
  }
  #blog .item {
    padding-left:0;
    height:auto;
    margin-bottom:60px;
  }
  #blog img {
    width:100%;
    position: static;
    display:block;
    margin-bottom:20px;
  }
  #about img {
    display:none;
  }
  #footer {
    margin-top:-100px;
  }
}

/*
     FILE ARCHIVED ON 10:45:36 Oct 04, 2018 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 14:01:22 Sep 18, 2019.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  PetaboxLoader3.resolve: 851.294
  load_resource: 1587.716
  esindex: 0.014
  LoadShardBlock: 114.68 (3)
  PetaboxLoader3.datanode: 167.196 (4)
  exclusion.robots: 0.259
  exclusion.robots.policy: 0.242
  CDXLines.iter: 19.226 (3)
  RedisCDXSource: 33.846
  captures_list: 172.143
*/

div.timeline-info{
  box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-top: 0;
    margin-bottom: .5em;
    margin-right: 0;
    margin-left: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

h3.timeline-title{
  box-sizing: border-box;
    color: #3D4351;
    margin-top: 0;
    line-height: inherit;
    font-family: inherit;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 24px;
}

/*----- TIMELINE MARKER -----*/
.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}
.timeline-marker:before {
  background: #000;
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
  content: "";
  width: 3px;
  background: #000;
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
  content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
  background: transparent;
  border: 3px solid #000;
}

/*#about {
  @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
}*/

.timeline{
  line-height: 1.4em; list-style: none; margin: 0; padding: 0; width: 100%;
}
.timeline-item{
  padding-left: 40px; position: relative;
}
.timeline-info{
  font-size: 12px; font-weight: 700; letter-spacing: 1px; margin: 0 0 .5em 0; text-transform: uppercase; white-space: nowrap;
}
.timeline-marker{
  position: absolute; top: 0; bottom: 0; left: 0; width: 15px;
}
.timeline-content{
  padding-bottom: 20px;
}
.timeline-title{
  color: #3D4351; margin-top: 0; margin-bottom: 1px;
}
.timeline-content > p{
  margin-bottom: 0;
  font-size: 12px
}