@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300);
.bkgdCover {
  -webkit-background-size: 100% 100%;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-out {
  from {
    opactiy: 1;
  }
  to {
    opactiy: 0;
  }
}
@-moz-keyframes fade-out {
  from {
    opactiy: 1;
  }
  to {
    opactiy: 0;
  }
}
@-ms-keyframes fade-out {
  from {
    opactiy: 1;
  }
  to {
    opactiy: 0;
  }
}
@keyframes fade-out {
  from {
    opactiy: 1;
  }
  to {
    opactiy: 0;
  }
}
@-webkit-keyframes subnavi-slide-in {
  from {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
}
@-moz-keyframes subnavi-slide-in {
  from {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
}
@-ms-keyframes subnavi-slide-in {
  from {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
}
@keyframes subnavi-slide-in {
  from {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
}
@-webkit-keyframes subnavi-slide-out {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
  to {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
}
@-moz-keyframes subnavi-slide-out {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
  to {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
}
@-ms-keyframes subnavi-slide-out {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
  to {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
}
@keyframes subnavi-slide-out {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
  }
  to {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
  }
}
.icon {
  display: block;
  background-repeat: repeat;
  background-image: url(../assets/imgs/awards/spritesheet-black.png);
  width: 60px;
  height: 60px;
}
.icon.white {
  background-image: url(../assets/imgs/awards/spritesheet-white.png);
}
.icon.icon-academy-awards {
  background-size: 900% 800%;
  background-position: 0.29585799% 0.33783784%;
}
.icon.icon-ad {
  background-size: 900% 800%;
  background-position: 12.72189349% 0.33783784%;
}
.icon.icon-ad-age {
  background-size: 900% 800%;
  background-position: 25.14792899% 0.33783784%;
}
.icon.icon-adc {
  background-size: 900% 800%;
  background-position: 37.5739645% 0.33783784%;
}
.icon.icon-adce {
  background-size: 900% 800%;
  background-position: 50% 0.33783784%;
}
.icon.icon-addys {
  background-size: 900% 800%;
  background-position: 62.4260355% 0.33783784%;
}
.icon.icon-adobe {
  background-size: 900% 800%;
  background-position: 74.85207101% 0.33783784%;
}
.icon.icon-adtech {
  background-size: 900% 800%;
  background-position: 87.27810651% 0.33783784%;
}
.icon.icon-adweek {
  background-size: 900% 800%;
  background-position: 0.29585799% 14.52702703%;
}
.icon.icon-aice {
  background-size: 900% 800%;
  background-position: 12.72189349% 14.52702703%;
}
.icon.icon-aicp {
  background-size: 900% 800%;
  background-position: 25.14792899% 14.52702703%;
}
.icon.icon-ana {
  background-size: 900% 800%;
  background-position: 37.5739645% 14.52702703%;
}
.icon.icon-andys {
  background-size: 900% 800%;
  background-position: 50% 14.52702703%;
}
.icon.icon-asc {
  background-size: 900% 800%;
  background-position: 62.4260355% 14.52702703%;
}
.icon.icon-award {
  background-size: 900% 800%;
  background-position: 74.85207101% 14.52702703%;
}
.icon.icon-awwwards {
  background-size: 900% 800%;
  background-position: 87.27810651% 14.52702703%;
}
.icon.icon-big {
  background-size: 900% 800%;
  background-position: 0.29585799% 28.71621622%;
}
.icon.icon-british-arrows {
  background-size: 900% 800%;
  background-position: 12.72189349% 28.71621622%;
}
.icon.icon-cannes-lions {
  background-size: 900% 800%;
  background-position: 25.14792899% 28.71621622%;
}
.icon.icon-clios {
  background-size: 900% 800%;
  background-position: 37.5739645% 28.71621622%;
}
.icon.icon-communication-arts {
  background-size: 900% 800%;
  background-position: 50% 28.71621622%;
}
.icon.icon-creativity {
  background-size: 900% 800%;
  background-position: 62.4260355% 28.71621622%;
}
.icon.icon-css-design-awards {
  background-size: 900% 800%;
  background-position: 74.85207101% 28.71621622%;
}
.icon.icon-design-licks {
  background-size: 900% 800%;
  background-position: 87.27810651% 28.71621622%;
}
.icon.icon-dga {
  background-size: 900% 800%;
  background-position: 0.29585799% 42.90540541%;
}
.icon.icon-emmy {
  background-size: 900% 800%;
  background-position: 12.72189349% 42.90540541%;
}
.icon.icon-epica {
  background-size: 900% 800%;
  background-position: 25.14792899% 42.90540541%;
}
.icon.icon-eurobest {
  background-size: 900% 800%;
  background-position: 37.5739645% 42.90540541%;
}
.icon.icon-fitc {
  background-size: 900% 800%;
  background-position: 50% 42.90540541%;
}
.icon.icon-fom {
  background-size: 900% 800%;
  background-position: 62.4260355% 42.90540541%;
}
.icon.icon-fox {
  background-size: 900% 800%;
  background-position: 74.85207101% 42.90540541%;
}
.icon.icon-fwa {
  background-size: 900% 800%;
  background-position: 87.27810651% 42.90540541%;
}
.icon.icon-fwam {
  background-size: 900% 800%;
  background-position: 0.29585799% 57.09459459%;
}
.icon.icon-glaad {
  background-size: 900% 800%;
  background-position: 12.72189349% 57.09459459%;
}
.icon.icon-globe {
  background-size: 900% 800%;
  background-position: 25.14792899% 57.09459459%;
}
.icon.icon-google {
  background-size: 900% 800%;
  background-position: 37.5739645% 57.09459459%;
}
.icon.icon-horizon {
  background-size: 900% 800%;
  background-position: 50% 57.09459459%;
}
.icon.icon-huga-award {
  background-size: 900% 800%;
  background-position: 62.4260355% 57.09459459%;
}
.icon.icon-lia {
  background-size: 900% 800%;
  background-position: 74.85207101% 57.09459459%;
}
.icon.icon-lovies {
  background-size: 900% 800%;
  background-position: 87.27810651% 57.09459459%;
}
.icon.icon-mashies {
  background-size: 900% 800%;
  background-position: 0.29585799% 71.28378378%;
}
.icon.icon-mcm {
  background-size: 900% 800%;
  background-position: 12.72189349% 71.28378378%;
}
.icon.icon-mobius {
  background-size: 900% 800%;
  background-position: 25.14792899% 71.28378378%;
}
.icon.icon-mtv-o {
  background-size: 900% 800%;
  background-position: 37.5739645% 71.28378378%;
}
.icon.icon-mtv-vma {
  background-size: 900% 800%;
  background-position: 50% 71.28378378%;
}
.icon.icon-mvpa {
  background-size: 900% 800%;
  background-position: 62.4260355% 71.28378378%;
}
.icon.icon-namic-emma {
  background-size: 900% 800%;
  background-position: 74.85207101% 71.28378378%;
}
.icon.icon-new-york-festivals {
  background-size: 900% 800%;
  background-position: 87.27810651% 71.28378378%;
}
.icon.icon-nytimes {
  background-size: 900% 800%;
  background-position: 0.29585799% 85.47297297%;
}
.icon.icon-promax {
  background-size: 900% 800%;
  background-position: 12.72189349% 85.47297297%;
}
.icon.icon-promo {
  background-size: 900% 800%;
  background-position: 25.14792899% 85.47297297%;
}
.icon.icon-rushes {
  background-size: 900% 800%;
  background-position: 37.5739645% 85.47297297%;
}
.icon.icon-shoot {
  background-size: 900% 800%;
  background-position: 50% 85.47297297%;
}
.icon.icon-show {
  background-size: 900% 800%;
  background-position: 62.4260355% 85.47297297%;
}
.icon.icon-sia {
  background-size: 900% 800%;
  background-position: 74.85207101% 85.47297297%;
}
.icon.icon-soundbutlers {
  background-size: 900% 800%;
  background-position: 87.27810651% 85.47297297%;
}
.icon.icon-spikes {
  background-size: 900% 800%;
  background-position: 0.29585799% 99.66216216%;
}
.icon.icon-strategies {
  background-size: 900% 800%;
  background-position: 12.72189349% 99.66216216%;
}
.icon.icon-sxsw {
  background-size: 900% 800%;
  background-position: 25.14792899% 99.66216216%;
}
.icon.icon-t1o2o3l4 {
  background-size: 900% 800%;
  background-position: 37.5739645% 99.66216216%;
}
.icon.icon-tech-crunch {
  background-size: 900% 800%;
  background-position: 50% 99.66216216%;
}
.icon.icon-the-bessies {
  background-size: 900% 800%;
  background-position: 62.4260355% 99.66216216%;
}
.icon.icon-the-mark-awards {
  background-size: 900% 800%;
  background-position: 74.85207101% 99.66216216%;
}
.icon.icon-the-one-show {
  background-size: 900% 800%;
  background-position: 87.27810651% 99.66216216%;
}
.icon.icon-the-webby-awards {
  background-size: 900% 800%;
  background-position: 99.70414201% 0.33783784%;
}
.icon.icon-time {
  background-size: 900% 800%;
  background-position: 99.70414201% 14.52702703%;
}
.icon.icon-vimeo {
  background-size: 900% 800%;
  background-position: 99.70414201% 28.71621622%;
}
.icon.icon-welovead {
  background-size: 900% 800%;
  background-position: 99.70414201% 42.90540541%;
}
.icon.icon-wma {
  background-size: 900% 800%;
  background-position: 99.70414201% 57.09459459%;
}
.icon.icon-yda {
  background-size: 900% 800%;
  background-position: 99.70414201% 71.28378378%;
}
/*
//  Fonts
// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
*/
@font-face {
  font-family: 'TrumpGothicEastBold';
  src: url('../assets/fonts/trump_bold/TrumpGotEasBol-webfont.eot');
  src: url('../assets/fonts/trump_bold/TrumpGotEasBol-webfont.eot?iefix') format('eot'), url('../assets/fonts/trump_bold/TrumpGotEasBol-webfont.woff') format('woff'), url('../assets/fonts/trump_bold/TrumpGotEasBol-webfont.ttf') format('truetype'), url('../assets/fonts/trump_bold/TrumpGotEasBol-webfont.svg#webfontca5KkFOq') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TrumpGothicEastMedium';
  src: url('../assets/fonts/trump_medium/TrumpGotEasMed-webfont.eot');
  src: url('../assets/fonts/trump_medium/TrumpGotEasMed-webfont.eot?iefix') format('eot'), url('../assets/fonts/trump_medium/TrumpGotEasMed-webfont.woff') format('woff'), url('../assets/fonts/trump_medium/TrumpGotEasMed-webfont.ttf') format('truetype'), url('../assets/fonts/trump_medium/TrumpGotEasMed-webfont.svg#webfont9JD8bKhs') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TrumpGothicEastRegular';
  src: url('../assets/fonts/trump_regular/TrumpGotEasReg-webfont.eot');
  src: url('../assets/fonts/trump_regular/TrumpGotEasReg-webfont.eot?iefix') format('eot'), url('../assets/fonts/trump_regular/TrumpGotEasReg-webfont.woff') format('woff'), url('../assets/fonts/trump_regular/TrumpGotEasReg-webfont.ttf') format('truetype'), url('../assets/fonts/trump_regular/TrumpGotEasReg-webfont.svg#webfontbqAut62J') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'LetterGothicStd';
  src: url('../assets/fonts/letter_gothic/lettergothicstd.eot');
  src: url('../assets/fonts/letter_gothic/lettergothicstd.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/letter_gothic/lettergothicstd.woff') format('woff'), url('../assets/fonts/letter_gothic/lettergothicstd.ttf') format('truetype'), url('../assets/fonts/letter_gothic/lettergothicstd.svg#lettergothicstd') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'LetterGothicStd-Bold';
  src: url('../assets/fonts/letter_gothic/lettergothicstdbold.eot');
  src: url('../assets/fonts/letter_gothic/lettergothicstdbold.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/letter_gothic/lettergothicstdbold.woff') format('woff'), url('../assets/fonts/letter_gothic/lettergothicstdbold.ttf') format('truetype'), url('../assets/fonts/letter_gothic/lettergothicstdbold.svg#lettergothicstdbold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'LetterGothicStd-BoldSlanted';
  src: url('../assets/fonts/letter_gothic/lettergothicstdboldslanted.eot');
  src: url('../assets/fonts/letter_gothic/lettergothicstdboldslanted.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/letter_gothic/lettergothicstdboldslanted.woff') format('woff'), url('../assets/fonts/letter_gothic/lettergothicstdboldslanted.ttf') format('truetype'), url('../assets/fonts/letter_gothic/lettergothicstdboldslanted.svg#lettergothicstdboldslanted') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'LetterGothicStd-Slanted';
  src: url('../assets/fonts/letter_gothic/lettergothicstdslanted.eot');
  src: url('../assets/fonts/letter_gothic/lettergothicstdslanted.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/letter_gothic/lettergothicstdslanted.woff') format('woff'), url('../assets/fonts/letter_gothic/lettergothicstdslanted.ttf') format('truetype'), url('../assets/fonts/letter_gothic/lettergothicstdslanted.svg#lettergothicstdslanted') format('svg');
  font-weight: normal;
  font-style: normal;
}
#vr360 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: black;
}
#vr360 a {
  color: #e74c4c;
  cursor: pointer !important;
}
#vr360 a * {
  cursor: pointer !important;
}
#vr360 section {
  position: relative;
  width: 100%;
  padding: 120px 0;
  background-size: cover;
  background-position: center;
}
#vr360 section .content {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#vr360 section.about {
  background-image: url(../assets/imgs/vr360/vr360-about.jpg);
}
#vr360 section.contact {
  background-image: url(../assets/imgs/vr360/vr360-contact.jpg);
}
#vr360 section.reel {
  background-image: url(../assets/imgs/vr360/vr360-reel.jpg);
}
#vr360 section.projects {
  background-image: url(../assets/imgs/vr360/vr360-projects.jpg);
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#vr360 .about header {
  text-transform: uppercase;
}
#vr360 .about header h1 {
  font-family: "TrumpGothicEastMedium", Arial, Helvetica, sans-serif;
  color: #e74c4c;
  font-size: 2em;
  letter-spacing: 5px;
}
#vr360 .about header h2 {
  font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
  color: white;
  font-size: 4em;
  line-height: 1;
  letter-spacing: 1px;
}
#vr360 .about p {
  width: 580px;
  max-width: 100%;
  color: white;
  line-height: 2;
  margin-top: 20px;
  font-family: "LetterGothicStd-BoldSlanted", "Lucida Console", Monaco, monospace;
}
#vr360 .contact {
  position: relative;
  padding: 240px 0 290px;
}
#vr360 .contact .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
#vr360 .contact .content div {
  border-top: 2px solid #333;
  display: inline-block;
  float: left;
  position: relative;
  padding: 28px 0;
  margin-right: .5%;
  font-family: "LetterGothicStd-Bold", "Lucida Console", Monaco, monospace;
  font-size: 1.2em;
  width: 19%;
}
#vr360 .contact .content div.name {
  text-transform: uppercase;
  font-size: 2.4em;
  font-family: "TrumpGothicEastMedium", Arial, Helvetica, sans-serif;
  letter-spacing: 3px;
  width: 59%;
}
#vr360 .contact .content div.name:before {
  content: 'CONTACT';
  position: absolute;
  color: #333;
  top: -56px;
}
@media (max-width: 1100px) {
  #vr360 .contact .content div {
    width: 32% !important;
  }
}
@media (max-width: 850px) {
  #vr360 .contact .content div {
    width: 100% !important;
  }
}
#vr360 .reel {
  color: white;
  font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#vr360 .reel h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}
#vr360 .reel .play {
  position: relative;
  font-size: 1.5em;
  width: 150px;
  padding: 15px;
  overflow: hidden;
  z-index: 1;
  border: 3px solid white;
  cursor: pointer;
  transition: all .3s;
}
#vr360 .reel .play:hover {
  color: black;
}
#vr360 .reel .play:hover:after {
  transform: translateX(-10%) skew(-15deg);
  z-index: -1;
}
#vr360 .reel .play:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  transform: translateX(-130%) skewX(-15deg);
  background-color: white;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#vr360 .projects .content:before {
  content: 'WORK';
  position: relative;
  width: 100%;
  display: block;
  color: #333;
  font-size: 2.4em;
  font-family: "TrumpGothicEastMedium", Arial, Helvetica, sans-serif;
  letter-spacing: 3px;
  border-bottom: 2px solid #333;
  line-height: 2.2;
  margin-bottom: 1em;
}
#vr360 .projects .content > h1 {
  color: #333;
  line-height: 2;
  width: 100%;
  display: block;
  text-transform: uppercase;
  font-size: 2.4em;
  font-family: "TrumpGothicEastMedium", Arial, Helvetica, sans-serif;
  letter-spacing: 3px;
}
#vr360 .projects .project {
  display: inline-block;
  position: relative;
  margin-bottom: 30px;
  width: 30.9%;
}
#vr360 .projects .project:nth-of-type(3n-1) {
  margin-left: 3%;
  margin-right: 3%;
}
@media (max-width: 900px) {
  #vr360 .projects .project {
    width: 47%;
  }
  #vr360 .projects .project:nth-of-type(3n-1) {
    margin-left: 0;
    margin-right: 0;
  }
  #vr360 .projects .project:nth-of-type(2n-1) {
    margin-right: 5%;
  }
}
@media (max-width: 680px) {
  #vr360 .projects .project {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}
#vr360 .projects .project header {
  position: absolute;
  bottom: 15px;
  left: 15px;
  line-height: 20px;
  text-transform: uppercase;
  transition: transform .3s;
  z-index: 1;
}
#vr360 .projects .project header h1 {
  color: white;
  letter-spacing: 1px;
  font-size: 20px;
  font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
}
#vr360 .projects .project header h2 {
  font-size: 12px;
  font-family: "LetterGothicStd-Bold", "Lucida Console", Monaco, monospace;
  font-weight: bold;
  color: #e74c4c;
  -webkit-text-stroke: 1px #e74c4c;
  display: none;
}
#vr360 .projects .project header h2:first-child {
  display: block;
}
#vr360 .projects .project .image {
  background-color: black;
}
#vr360 .projects .project .image img {
  width: 100%;
  opacity: .5;
  transition: opacity .3s;
}
#vr360 .projects .project:hover header {
  transform: translateY(-10px);
}
#vr360 .projects .project:hover .image img {
  opacity: .8;
}
#reel-video {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
  background: black;
  z-index: 10000;
  overflow: hidden;
}
#reel-video.active {
  display: block;
  opacity: 1;
  width: 100%;
  height: 100%;
  -webkit-animation: fade-in 0.5s both;
  -ms-animation: fade-in 0.5s both;
  -moz-animation: fade-in 0.5s both;
  animation: fade-in 0.5s both;
}
#reel-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade-out-display {
  0% {
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  99.999% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  100% {
    width: 0;
    height: 0;
  }
}
@-webkit-keyframes fade-out-display {
  0% {
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  99.999% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  100% {
    width: 0;
    height: 0;
  }
}
@keyframes fade-out-display {
  0% {
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  99.999% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  100% {
    width: 0;
    height: 0;
  }
}
div.close-button {
  position: fixed;
  top: 70px;
  right: 50px;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  background-image: url('../assets/imgs/work/close.png');
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
}
div.close-button:hover {
  cursor: pointer;
  background-image: url('../assets/imgs/work/close-hover.png');
}