body {
  background-color: #000;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}

.box {
  position: fixed;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.box.preloader {
  background-image: url('../images/pre-loader.gif');
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.frame {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.frame_img {
  width: 100%;
  height: auto;
}

.frame_img.hidden {
  display: none;
}

.scroll_down {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 120px;
  height: 60px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}

.scroll_down.hidden {
  display: none;
}

.icon {
  font-family: 'Materialicons regular', sans-serif;
  color: #f7f7f7;
  font-size: 44px;
}

.icon.cont_icon_next {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  font-size: 100px;
  cursor: pointer;
}

.icon.cont_icon_next.inactive {
  opacity: 0.09;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
  transition: opacity 200ms ease, -webkit-transform 200ms ease;
  transition: opacity 200ms ease, transform 200ms ease;
  transition: opacity 200ms ease, transform 200ms ease, -webkit-transform 200ms ease;
  cursor: not-allowed;
}

.icon.cont_icon_next.inactive:hover {
  background-color: hsla(0, 0%, 100%, 0);
}

.scroll_txt {
  width: 100%;
  text-align: center;
}

.body_jarvis {
  background-image: url('../images/jarvis.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
}

.controls {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 5%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.cont_next {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 140px;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
}

.cont_progress {
  position: relative;
  top: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 0%;
  height: 1px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #3d7500;
}

@font-face {
  font-family: 'Materialicons regular';
  src: url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}