body, html {
 overflow-x: hidden;
 font-family: 'Rubik', sans-serif;
 font-size: 16px;
 font-weight: 300;
 font-style: normal;
 font-stretch: normal;
 line-height: 1.62;
 letter-spacing: 1px;
}

.is-mobile .hidden-mobile {
 display: none !important;
}

.is-mobile .display-mobile {
 display: block !important;
}

.container-fluid {
 max-width: 1400px;
 margin-right: auto;
 margin-left: auto;
 padding-left: 15px;
 padding-right: 15px;
}

.vert-align {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 width: 100%;
 left: 0;
 right: 0;
}

a {
 text-decoration: none !important;
}

#interactive-demo-masthead {
 position: fixed;
 top:0;
 left:0;
 width:100%;
 height:52px;
 background-color: #112435;
 z-index: 9999;
}
#interactive-demo-masthead-offset {
 display: block;
 height:52px;
 width:100%;
}
.orchard-logo-wrapper {
 position: relative;
 width:115px;
 height:43px;
 overflow: hidden;
}

#orchard-logo {
 opacity: 1;
 visibility: visible;
 width:115px;
 height:43px;
}

#orchard-logo-green {
 opacity: 0;
 visibility: hidden;
 width:115px;
 height:43px;
}

#orchard-logo, #orchard-logo-green {
 cursor: pointer;
 transition: ease all 0.25s;
}

#orchard-logo-green {
 position: absolute;
 top: 0;
 left: 0;
}

.orchard-logo-wrapper:hover #orchard-logo {
 opacity: 0;
 visibility: hidden;
}

.orchard-logo-wrapper:hover #orchard-logo-green {
 opacity: 1;
 visibility: visible;
}

@media screen and (max-width:1200px) {
 #interactive-demo-masthead .vert-align {
  top: auto;
  transform: none;
  -moz-transform: none;
  -webkit-transform: none;
  -ms-transform: none;
  position: relative;
 }
 #interactive-demo-masthead {
  padding: 10px 0;
 }
 #interactive-demo-footer {
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
 }
}

.is-mobile #interactive-demo-masthead {
 padding: 10px 0;
}

.is-mobile #interactive-demo-masthead .vert-align {
 top: auto;
 transform: none;
 -moz-transform: none;
 -webkit-transform: none;
 -ms-transform: none;
 position: relative;
}

.select-demo {
 list-style-type: none;
 margin: 0;
 padding: 0;
 font-size: 0;
 text-align: right;
}

.select-demo>li {
 display: inline-block;
 vertical-align: top;
 text-align: center;
 margin: 0;
 padding: 0;
}

.select-demo>li>a {
 color: #fff;
 display: block;
 width: 100%;
 padding: 15px 30px;
 transition: ease all .25s;
 background-color: #112435;
 -webkit-transition: ease all .25s;
 -moz-transition: ease all .25s;
 -ms-transition: ease all .25s;
 font-size: 14px;
}

.select-demo>li.active>a, .select-demo>li:hover>a {
 background-color: #429B87;
}

.select-demo>li:first-of-type {
 margin-right: -2px;
}

#interactive-demo-hero {
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 height: 40vh;
 width: 100%;
 position: relative;
}

.interactive-demo-hero-image-wrapper {
 position: relative;
}

.interactive-demo-hero-image-wrapper {
 position: relative;
}

.interactive-demo-film-logo img {
 max-width: 300px;
}

#reactRoot, #reactRoot p {
 font-size: 14px;
}

.container {
 border-left: 2px solid #E5DFDD;
 border-right: 1px solid #E5DFDD;
 max-width: 1140px !important;
}

#interactive-demo-footer {
 padding: 50px 0;
 background-color: #112435;
}

#interactive-demo-footer p {
 color: #fff;
 font-size: 14px;
}

#interactive-demo-footer p:last-of-type {
 margin-bottom: 0;
}


/* -- preloader -- */

@keyframes changeColor {
 0% {
  color: #fff;
 }
 100% {
  color: #FF893E;
 }
}

.preloader {
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 visibility: hidden;
 opacity: 0;
 transition: ease all 0.25s;
 background-color: #031225;
 color: #fff;
 z-index: 9999999;
 text-align: center;
 animation: changeColor 10s infinite;
}

.preloader.active {
 opacity: 1;
 visibility: visible;
}

.preloader>.inner {
 position: fixed;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
}

.not-supported-wrapper {
 padding: 0;
 background-color: #f2f2f2;
 position: fixed;
 top:-52px;
 left:0;
 height:100vh;
 width:100vw;
}

.not-supported-wrapper h3 {
 font-size: 24px;
 font-weight: bold;
 line-height: 1.08;
 letter-spacing: 1.5px;
 color: #419b86;
 margin: 25px 0 15px 0;
}

.not-supported-wrapper p {
 font-weight: normal;
}

@media screen and (max-width:650px) {
.not-supported-wrapper br {
 display:none;
}
}