*
{
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}

body, html
{
  width: 100%;
  height: 100%;
}

body
{
  overflow: hidden;
  background: #F5F5F5;
  font-family: "Calibri", sans-serif;
  color: #333333;
}

a
{
  color: #333333;
}


.mask { overflow: hidden; }
.no-mask { overflow: visible; }

.np { pointer-events: none; }
.btn
{
  cursor: pointer;
  pointer-events: all;
}
.abs { position: absolute; }
.fixed { position: fixed; }
.rel { position: relative; }
.flex { display: flex; }
.flex-v { align-items: center; }
.fs
{
  top: 0; left:0;
  width: 100vw; height: 100vh;
}
.stretch
{
  top: 0; left:0;
  width: 100%;
  height: 100%;
}
.origin
{
  top: 0; left: 0;
}
.ns
{
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.null {display: none !important; }
.hidden{ visibility: hidden; }
.centered
{
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.cx
{
  left: 50%;
  transform: translateX(-50%);
}
.cy
{
  top: 50%;
  transform: translateY(-50%);
}

.frame-left {left: 50px; }
.frame-top {top: 50px; }
.frame-right {right: 50px; }
.frame-btm {bottom: 50px; }

.webgl
{
  z-index: -2;
}

h1
{
  font-size: 72px;
  font-weight: bold;
  line-height: 0.9;
}

h2
{
  font-size: 32px;
  font-weight: normal;
  display: inline-block;
  margin-bottom: 25px;
  position: relative;
}

h2:after
{
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  left: 0;
  bottom: -2px;
  background: rgba(0,0,0, 0.06);
}

h3
{
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 35px;
}

h4
{
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 24px;
}

p
{
  font-size: 18px;
  max-width: 360px;
}

p.small
{
  font-size: 16px;
}

p.small-print
{
  font-size: 12px;
}

.btn-primary
{
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  background: white;
  border-radius: 4px;
  height: 55px;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  line-height: 0;
  transition: background 0.1s ease-out, color 0.1s ease-out, transform 0.3s ease-out;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
  color: #333333;
}

.btn-primary:hover
{
  background: #009F4F;
  color: white;
}

.btn-buy-now
{
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  background: #ff5700;
  border-radius: 4px;
  height: 55px;
  text-transform: uppercase;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  line-height: 0;
  transition: background 0.1s ease-out, color 0.1s ease-out, transform 0.3s ease-out;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
  color: #fff;
}

.btn-buy-now:hover
{
  background: #fff;
  color: #333333;
}

.btn-primary:hover .stroke
{
  stroke: white;
}

.btn-secondary
{
  background: rgba(0,0,0,0.06);
  width: 55px;
  height: 55px;
  border-radius: 4px;
  transition: background 0.1s ease-out;
}

.btn-secondary:hover
{
  background: rgba(0,159,79,1.0);
}

.btn-secondary .fill,
.btn-secondary .stroke
{
  transition: fill 0.1s ease-out, stroke 0.1s ease-out;
}

.btn-secondary:hover .fill
{
  fill: white;
}
.btn-secondary:hover .stroke
{
  stroke: white;
}

.btn-hotspot
{
  background: rgba(30,30,30,0.8);
  color: white;
  border-radius: 35px;
  height: 35px;
  position: absolute;
  top: 0; left: 0;
  line-height: 36px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px;
  letter-spacing: 2px;
  transition: background 0.2s ease-out;
}

.btn-hotspot img
{
  margin-right: 10px;
  transform: translateX(-5px);
  flex-shrink: 0;
}

.btn-hotspot:hover
{
  background: #009F4F;
}

.top-bar
{
  background: white;
  width: 100%;
  height: 4px;
  top: 0px;
  z-index: 99;
  position: fixed;
}

.back-btn
{
  opacity: 0;
  pointer-events: none;
  transform: translateX(-15px);
}
.back-btn.active
{
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

.back-btn svg
{
  margin-right: 15px;
}

.rocol-logo
{
  top: 0px;
  width: 133px;
}

.preload
{
  right: 12%;
}

/*
.ui
{
  overflow-y: scroll;
}
*/

.content
{
  /*left: 20%;*/
  width: 100%;
  height: 100%;
}

.load-status
{
  margin-bottom: 45px;
}

.content-frame
{
  position: absolute;
  opacity: 0;
  width: 33%;
  left: 20%;
  transform: translate(-30px, 0px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.content-frame.active
{
  opacity: 1;
  transform: translate(0px, 0px);
}

/*
.content-index
{
  top: 50%;
  transform: translate(-30px, -50%);
}

.content-index.active
{
  transform: translate(0px, -50%);
}
*/


.content-index
{
  top: 15%;
}

.content-wheels
{
  top: 15%;
}

.content-line-width
{
  top: 15%;
}

.content-masking
{
  top: 15%;
}

.content-airflow
{
  top: 15%;
}

.content-paint
{
  top: 15%;
}


.content-index .btn
{
  margin-right: 15px;
}
.content-index a
{
  margin-bottom: 15px;
}


.linkedin
{
  margin-left: 12px;
}

.hotspots
{
  top: 0; left:0;
  width: 100%;
  opacity: 0;
  transform: translateX(15px);
  transition: opacity 0.2s ease-out, transform 0.3s ease-out;
}
.hotspots .btn-hotspot
{
  pointer-events: none;
}

.hotspots.active
{
  transform: translateX(0px);
  opacity: 1;
}

.hotspots.active .btn-hotspot
{
  pointer-events: all;
}

.feature-list
{
  margin-left: 35px;
  margin-bottom: 65px;
}

.feature-list div
{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.feature-list .dot
{
  width: 6px;
  height: 6px;
  background: #333333;
  border-radius: 6px;
  margin-right: 26px;
  margin-left: 10px;
  flex-shrink: 0;
}

.play-btn
{
  width: 26px;
  height: 26px;
  margin-right: 15px;
  flex-shrink: 0;
}
.play-btn .progress
{
  opacity: 0;
}

.feature-list div:hover .play-btn .bg
{
  fill: #009F4F;
  opacity: 1;
}
.feature-list div:hover .play-btn .arrow
{
  stroke: white;
}


@keyframes whom
{
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

.feature-list div.active .play-btn .bg
{
  fill: #009F4F;
  animation: whom 1s infinite;
}
.feature-list div.active .play-btn .arrow
{
  stroke: white;
}

.video-modal
{
  background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.video-modal video
{
  width: 80%;
}

.video-close
{
  background: black;
width: 50px;
height: 50px;
right: 50px;
top: 50px;
cursor: pointer;
}

.video-close:hover
{
  background: #009F4F;
}

.video-close svg
{
  fill:none;
  stroke:white;
  stroke-linecap:round;
  stroke-width:7px;
}