@font-face {
   font-family: "INGMe";
   src: url("../fonts/INGMeWeb-Regular.woff") format("woff");
   src: url("../fonts/INGMeWeb-Regular.woff") format("woff"), url("../fonts/INGMe-Regular.otf") format("opentype");
   font-weight: normal
}

@font-face {
   font-family: "INGMe";
   src: url("../fonts/INGMeWeb-Bold.woff");
   src: url("../fonts/INGMeWeb-Bold.woff") format("woff"), url("../fonts/INGMe-Bold.otf") format("opentype");
   font-weight: bold
}

html {
   font-size: 15px;
   line-height: 24px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility
}

body {
   max-width: 850px;
   margin: 0 auto;
   font-family: INGMe, Arial;
   font-weight: normal;
   color: #333333;
   overflow:hidden;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

h1, h2, h3 {
   font-family: INGMe, Arial, sans-serif;
   font-weight: bold;
   font-style: normal;
   font-size: 15px;
}

/*ELEMENTS AND CLASSES*/

button {
   border: none;
   padding: 0;
   margin: 0;
   background: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   cursor: pointer;
   font-size: inherit;
   display: inline;
}

button:active, button:focus{
   outline: 0;
}

.noselect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.orange {
   font-weight: bold;
   color: #FF6200;
}

/*INFOGRAPHIC*/

.infographic-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
}

/*INFOGRAPHIC TEXT SIDE*/

.text-container {
   width: 60%;
   margin:0;
}

.facts {
   width:100%;
   height:100%;
   overflow: hidden;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-pack: distribute;
   justify-content: space-around;
}

.single-fact-container {
   display: none;
   width: 100%;
   height: 100%;
}

.single-fact {
   background-color: rgba(255, 255, 255, 0.8);
   width:100%;
   height: 100%;
   border-radius: 10px;
   overflow-x:hidden;
}

.single-fact::-webkit-scrollbar {
   background: transparent;
   height: 10px;
   width: 5px;
}

.single-fact::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.4);
   -webkit-border-radius:5px;
}
.single-fact::-webkit-scrollbar-thumb:hover{
   background-color: rgba(0, 0, 0, 0.6);
}
.single-fact::-webkit-scrollbar-corner {
   background: transparent;
}

.close-fact {
   display: none;
   float: right;
   position:relative;
   top:12px;
   left:10px;
}

/*slider*/
.slider-arrow {
   display:none;
   margin:0 4px;
}

/*slider - dot navigation*/

.slide-buttons {
   text-align: center;
}

.slide-btn {
   display:none;
   border: none;
   background: none;
   color:  rgba(255, 255, 255, 0.8);
   font-size: 400%;
   line-height: 1em;
}

.slide-btn.active {
   color: #ff6200;
   cursor: pointer;
}

/*BELLY*/

.fact-screen {
   display: none;
}

.fact-screen img, .screen img {
   margin: 0 16%;
   position: absolute;
   top: -5%;
   left: -20%;
   z-index: -1;
}

/*belly screen for mobile*/
.screen-mobile {
   height: 15%;
   margin:0 auto;
   margin-top: 10%;
   display: none;
}

.screen-mobile h2, .screen h2 {
   color: #333333;
   font-size: 85%;
   line-height: 85%;
   letter-spacing: .1em;
   text-align: center;
   font-weight: normal;
   margin: 0;
   margin-top: 11%;
}

/*BELLY GRAPHS*/

.graph {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   margin: 0 auto;
   margin-top:11%;
   -ms-flex-pack: distribute;
   -webkit-box-pack: center;
           justify-content: center;
}

.graph div p {
   margin: 0;
}

.orange-frame {
   height: 100%;
   border: 2px solid #ff6200;
   border-radius: 15%;
   display: inline-block;
   text-align: center;
   overflow: hidden;
}

.graph-separator {
   height: 100%;
   padding: 2px 0;
   border-radius: 15%;
   display: inline-block;
}

.orange-frame p {
   -webkit-animation-name: downer;
   animation-name: downer;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   font-size: 24px;
   border: 2px solid transparent;
   border-radius: 5px;
   line-height: 130%;
   padding:0 2px;
}

.graph-separator p{
   line-height: 130%;
   font-size: 24px;
   padding:2px;
}

/*fact3*/
.fact3-graph {
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   -ms-flex-pack: distribute;
       justify-content: space-around;
}

.fact-screen-mobile .fact3-graph {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.air {
   height:15px;
}

.hilton {
   height:45px;
}

.bar {
   border-radius: 4px;
   background-color: #ff6200;
   width:25px;
   -webkit-animation-name:grow;
   animation-name:grow;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
}

/*fact4*/
.fact4-screen{
   display: none;
}

.fact4slides {
   display:none;
}

/*fact5*/

.fact5-graph .orange-frame p{
   -webkit-animation-iteration-count: 0;
           animation-iteration-count: 0;
}
.counter {
   margin:0 auto;
   border-radius: 5px;
}


/*fact6*/
.fact6-graph {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}


/*INFOGRAPHIC MACHINE SIDE*/
.machine-container {
   position: relative;
   top: 0;
   left: 0;
   width: 40%;
}

#canvas {
   position: absolute;
   top: -22.5%;
   left: -15.5%;
   width: 130%;
   height: 39%;
   z-index: -1;
}

#smokeparticle {
   display: none;
   display: none;
}

.machine {
   position: relative;
   max-width: 254px;
   margin-right: 5%;
   margin-top: 5%;
   margin-left: auto;
}

/*machine parts*/

.machine-body {
   max-width: 254px;
   width: 100%;
}

.part {
   width: 100%;
   height: 100%;
}

.touch {
   width:105%;
   height:105%;
}

.machine-body-img {
   margin: 0 auto;
   display: block;
   width: 100%;
}

/*gears*/

.big-gear {
   position: absolute;
   top: 46%;
   left: 47%;
   width: 52%;
   height: auto;
   z-index: -2;
}

.small-gear {
   position: absolute;
   top: 29%;
   left: 46%;
   width: 42.5%;
   height: auto;
   z-index: -2;
}

.big-gear-img {
   -webkit-animation-name: rotate;
   animation-name: rotate;
   -webkit-animation-duration: 10s;
   animation-duration: 10s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
}

.small-gear-img {
   -webkit-animation-name: rotate;
   animation-name: rotate;
   -webkit-animation-duration: 10s;
   animation-duration: 10s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
}

/*valves*/
.valve {
   position: absolute;
   top: 0;
   left: 7%;
   width: 14.5%;
   height: auto;
}

.top-valve {
   position: absolute;
   top: 1%;
   left: 39%;
   width: 21%;
   height: auto;
}


.valve img:hover {
   -webkit-animation-name: rotate;
   animation-name: rotate;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
}

.valve1 {
   top: 19%;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.valve2 {
   top: 27%;
}

.valve3 {
   top: 35%;
}

.valve4 {
   top: 44%;
}

.valve5 {
   top: 52.7%;
}

.valve6 {
   top: 60%;
}

.indicator-container {
   position: absolute;
   top: 29.7%;
   width: 15%;
}

.indicator1 {
   left: 34.5%;
}

.indicator2 {
   left: 50%;
}

.belly {
   position: absolute;
   top: 45%;
   left: 29%;
   width: 45%;
   z-index: -1;
}

.screen {
   position: absolute;
   top: 45%;
   left: 29.5%;
   width: 44%;
   height: 15%;
   z-index: -1;
}


/*MEDIA QUERIES*/

@media screen and (max-width:768px) {
   .infographic-container {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
   }

   .text-container {
      width:100%;
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1000;
      overflow: auto;
   }

   .slider-arrow {
      display:block;
   }

   .slider{
      height:70%;
      width:90%;
      position: relative;
   }

   .slide-viewer {
      position: relative;
      height:100%;

   }

   .slide-btn {
      display:inline;
   }

   .single-fact-container{
      display: none;
      position: absolute;
      margin-top:-5%;
   }

   .machine-container {
      width: 100%;
   }

   .machine {
      margin: 0 auto;
      ;
   }

   .fact-screen {
      display: none;
   }

   .close-fact {
      display: block;
   }
   .fact-content {
      margin: 10%;
   }

   .air {
      margin-left: 10px;
   }
   .hilton {
      margin-right: 10px;
   }

   .graph {
      margin-top: 30px;
   }
}

/*KEYFRAMES AND ANIMATION CLASSES*/

@-webkit-keyframes pop {
   from {
      top: 1%;
   }
   to {
      top:-20%;
   }
}

@keyframes pop {
   from {
      top: 1%;
   }
   to {
      top:-20%;
   }
}

.pop {
   -webkit-animation-name:pop;
   animation-name:pop;
   -webkit-animation-duration:0.3s;
   animation-duration:0.3s;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}


@-webkit-keyframes rotate {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}


@keyframes rotate {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

.rotate {
   -webkit-animation-name: rotate;
   animation-name: rotate;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
}

@-webkit-keyframes shaking {
   0% {
      -webkit-transform: translate(2px, 1px) rotate(0deg);
      transform: translate(2px, 1px) rotate(0deg);
   }
   10% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
      transform: translate(-1px, -2px) rotate(-1deg);
   }
   20% {
      -webkit-transform: translate(-3px, 0px) rotate(1deg);
      transform: translate(-3px, 0px) rotate(1deg);
   }
   30% {
      -webkit-transform: translate(0px, 2px) rotate(0deg);
      transform: translate(0px, 2px) rotate(0deg);
   }
   40% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
      transform: translate(1px, -1px) rotate(1deg);
   }
   50% {
      -webkit-transform: translate(-1px, 2px) rotate(-1deg);
      transform: translate(-1px, 2px) rotate(-1deg);
   }
   60% {
      -webkit-transform: translate(-3px, 1px) rotate(0deg);
      transform: translate(-3px, 1px) rotate(0deg);
   }
   70% {
      -webkit-transform: translate(2px, 1px) rotate(-1deg);
      transform: translate(2px, 1px) rotate(-1deg);
   }
   80% {
      -webkit-transform: translate(-1px, -1px) rotate(1deg);
      transform: translate(-1px, -1px) rotate(1deg);
   }
   90% {
      -webkit-transform: translate(2px, 2px) rotate(0deg);
      transform: translate(2px, 2px) rotate(0deg);
   }
   100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
      transform: translate(1px, -2px) rotate(-1deg);
   }
}

@keyframes shaking {
   0% {
      -webkit-transform: translate(2px, 1px) rotate(0deg);
      transform: translate(2px, 1px) rotate(0deg);
   }
   10% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
      transform: translate(-1px, -2px) rotate(-1deg);
   }
   20% {
      -webkit-transform: translate(-3px, 0px) rotate(1deg);
      transform: translate(-3px, 0px) rotate(1deg);
   }
   30% {
      -webkit-transform: translate(0px, 2px) rotate(0deg);
      transform: translate(0px, 2px) rotate(0deg);
   }
   40% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
      transform: translate(1px, -1px) rotate(1deg);
   }
   50% {
      -webkit-transform: translate(-1px, 2px) rotate(-1deg);
      transform: translate(-1px, 2px) rotate(-1deg);
   }
   60% {
      -webkit-transform: translate(-3px, 1px) rotate(0deg);
      transform: translate(-3px, 1px) rotate(0deg);
   }
   70% {
      -webkit-transform: translate(2px, 1px) rotate(-1deg);
      transform: translate(2px, 1px) rotate(-1deg);
   }
   80% {
      -webkit-transform: translate(-1px, -1px) rotate(1deg);
      transform: translate(-1px, -1px) rotate(1deg);
   }
   90% {
      -webkit-transform: translate(2px, 2px) rotate(0deg);
      transform: translate(2px, 2px) rotate(0deg);
   }
   100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
      transform: translate(1px, -2px) rotate(-1deg);
   }
}

.shake {
   -webkit-animation:shaking 0.4s linear 1;
   animation:shaking 0.4s linear 1;
   -webkit-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
}

@-webkit-keyframes downer {
   from {
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
   }
   to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }
}

@keyframes downer {
   from {
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
   }
   to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }
}

@-webkit-keyframes grow {
   0% {
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
   }
   100% {
      -webkit-transform: scaleY(10%);
      transform: scaleY(10%);
   }
}

@keyframes grow {
   0% {
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
   }
   100% {
      -webkit-transform: scaleY(10%);
      transform: scaleY(10%);
   }
}

@-webkit-keyframes indicator1move {
   from {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
   }
   to {
      -webkit-transform:rotate(250deg);
      transform:rotate(250deg);
   }
}

@keyframes indicator1move {
   from {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
   }
   to {
      -webkit-transform:rotate(250deg);
      transform:rotate(250deg);
   }
}

@-webkit-keyframes indicator2move {
   from {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
   }
   to {
      -webkit-transform:rotate(225deg);
      transform:rotate(225deg);
   }
}

@keyframes indicator2move {
   from {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
   }
   to {
      -webkit-transform:rotate(225deg);
      transform:rotate(225deg);
   }
}

.indicator1-move {
   -webkit-animation: indicator1move 0.2s linear infinite alternate;
   animation: indicator1move 0.2s linear infinite alternate;
}

.indicator2-move {
   -webkit-animation: indicator2move 0.2s linear infinite alternate;
   animation: indicator2move 0.2s linear infinite alternate;
}

@-webkit-keyframes rotate180 {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
   }
}

@keyframes rotate180 {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
   }
}

.rotate180 {
   -webkit-animation: rotate180 1s 1 forwards;
   animation: rotate180 1s 1 forwards;
}

@-webkit-keyframes rotate225 {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
   }
}

@keyframes rotate225 {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
   }
}

.rotate225 {
   -webkit-animation: rotate225 1s 1 forwards;
   animation: rotate225 1s 1 forwards;
}

@-webkit-keyframes pulse {
   from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   50% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
      transform: scale3d(1.2, 1.2, 1.2);
   }
   to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

@keyframes pulse {
   from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   50% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
      transform: scale3d(1.2, 1.2, 1.2);
   }
   to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

.pulse {
   -webkit-animation-name: pulse;
   animation-name: pulse;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
}