/*!
 *
 * Copyright Stripelight B.V. Nethlerlands
 * author: r redpath
 * 
 */
body {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
-webkit-font-smoothing: antialiased; 
  font-family: 'Arial', sans-serif !important;
}


#ipadplay {
   border-radius: 50px; 
   position: absolute; 
   left: calc(50% - 30px); 
   top:  30%;
   z-index: 200; 
   cursor: pointer;
   display: block; 
   border: 2px  solid white;
   padding: 5px 15px 5px 15px;
}


#unmuteButton{
 background-image: url('../images/MuteOn.png');
 position: absolute;
top: 60px;
xtop: 90vh;
 left: 30px;
 width: 20px; 
 height: 19px;
 visibility: hidden;
 background-size: cover;
 background-repeat: no-repeat;
}



#container { display:block; }
@media only screen and (orientation:xportrait){
  #container {
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    transform-origin: left top; 
    width: 100vh; 
    overflow-x: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
  }

}

@media only screen and (orientation:landscape){
  #container {
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    transform-origin: left top; 
    width: 100%; 
    overflow-x: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
  }

}

.xrotate {
    transform: rotate(-90deg); 
    transform-origin: left top; 
    width: 100vh; 
    overflow-x: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
}


.loading-icon {
    background-image: url('../images/loadingtorchtestweb.png');
    margin-left: -44px;
    width: 88px;
    height: 192px;
}

.blue {
  width: 88px; 
  border: 2px solid #3366ff; 
 animation: animatewidth 1.8s infinite; 
}

@keyframes animatewidth
{
  0% {
       width: 0px;
       margin-left: 44px;
     }
  100% {
      width: 400px;
      margin-left: -150px;
     }
}


.loading{
 width: 100%;
 height: 100%;
 z-index: 400000;

}

video { 
    object-fit: cover;
    transition: 1s opacity;
//    visibility: hidden;
    margin-top: 0;
    top: 0;
    position: relative;
    height: auto;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    z-index: 1;
}

.mycontainer {
xmax-height: 1080;
xborder: 1px solid red;
   overflow: hidden; 
   margin: 0px 0px 0px 0px;
}

.mysection {
   xborder: 1px solid red;
   overflow: hidden; 
   margin: 0px 0px 0px 0px;
}

@media only screen and (min-width: 100vw){
    .mysection { 
      max-width: 100vw;
      xborder: 1px solid red;
    }
}


.menuribs {
  background-color: black;
}


.bar1, .bar2, .bar3 {
  width: 25px;
  height: 2px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 6px);
  transform: rotate(-45deg) translate(-8px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -4px);
  transform: rotate(45deg) translate(-6px, -4px);
}

.menuitem{
  cursor: pointer; 
  text-shadow: none; 
  text-decoration: none; 
  color:  white !important; 
  opacity: 1.0 !important; 
  font-size: 1.7em; 
  font-family: 'Montserrat', sans-serif !important; 
  font-style: regular !important; 
  -webkit-font-smoothing: antialiased 
}

.bartext {
  position: relative;
display: inline-block;
color: white;
}
.bartext:after {
  content: "";
  position: absolute;
  left:0;
  top: 100%;
  width: 0;
  height: 2px;
  background-color: #48c1ef;
  transition: width .3s ease-in-out;
}
.bartext:hover:after {
  width: 100%;
}

a:hover, a:visited, a:link, a:active{
    text-decoration: none !important;
   -webkit-box-shadow: none!important;
    box-shadow: none!important;
  color: white !important; 
}

.box{
  position:fixed;
  bottom:-100%;
  height:100%; 
  width: 17em;
  display: block;
//background-image: url('water.png'); 
// background-repeat: repeat; 
z-index:999999;
}

.box-inner {
position: absolute;
    width:100%;
//background-color: rgba(0, 128, 255, 0.4);
background-color: rgba(0,0,0, 0.4);
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

