/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */

body {
    margin: 0px;
    overflow: hidden;
}

#v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


/*.button1 {
    position: absolute;
    bottom: 20px;
    left: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}
.button2 {
    position: absolute;
    bottom: 20px;
    left: 180px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.button3 {
    position: absolute;
    bottom: 20px;
    left: 310px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.button4 {
    position: absolute;
    bottom: 20px;
    left: 440px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.button5 {
    position: absolute;
    bottom: 20px;
    left: 570px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.button6 {
    position: absolute;
    bottom: 20px;
    left: 700px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}*/

.button7 {
    position: absolute;
    bottom: 120px;
    left: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.button8 {
    position: absolute;
    bottom: 170px;
    left: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.button9 {
    position: absolute;
    bottom: 220px;
    left: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.button10 {
    position: absolute;
    bottom: 290px;
    left: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
}

.fullscreen-open {
    background-image: url('media/fullscreen_open.svg');
}

.fullscreen-close {
    background-image: url('media/fullscreen_close.svg');
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

.head1 {
	top: 0px;
    left: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 300;
	padding-bottom: 30px;

}

.menu {
	position: absolute;
    top: 0px;
    left: 0px;
    background: #ffffffbf;
    width: 270px;
    height: 100%;
    border-radius: 0px;
    padding: 30px;
	font-family: 'Roboto', sans-serif;
}

.model {
	width: 100%;
    height: 120px;
    position: absolute;
    bottom: 50px;
    left: 0;
    overflow: auto;
}

.transform {
	display: inline-block;
	margin-bottom: 10px;
	margin-top: 10px;
}

.color-ob {
	margin-bottom: 10px;
}

.color-mod {
	margin-bottom: 20px;
}

.button {
	cursor: pointer;
    background: #038dee;
    padding: 10px 25px;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
	font-size: 15px;
}

.button:hover {
	    background: #087fd3; 
}

.btn-color {
	background-size: cover;
    width: 120px;
    height: 35px;
    border-radius: 5px;
    cursor: pointer;
	margin: 0 10px 10px 0;
	float: left;	
}

.btn-color2 {
	width: 120px;
    height: 49px;
    cursor: pointer;
	margin: 0 10px 10px 0;
	float: left;	
}

.c01 {
background: url(./images/c01.png) no-repeat;
    }
.c02 {
background: url(./images/c02.png) no-repeat;
    }
.c03 {
background: url(./images/c03.png) no-repeat;
    }
.c04 {
background: url(./images/c04.png) no-repeat;
    }
.eliot {
    background: url(./images/eliot.png) no-repeat;
	background-size: contain;
}
.stark {
    background: url(./images/stark.png) no-repeat;
	background-size: contain;
}
.tomas {
    background: url(./images/tomas.png) no-repeat;
	background-size: contain;
}

.otstup {
	margin-bottom: 10px;
	font-weight: 500;
}



@media screen and (max-width: 800px) {
     .menu {display:none;}
   }

.holder {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.preloader {
  /* size */
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  animation: rotatePreloader 2s infinite ease-in;
}

@keyframes rotatePreloader {
  0% {
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
  }
}
.preloader div {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.preloader div:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0%;
  width: 10%;
  height: 10%;
  background-color: #038DEE;
  transform: translateX(-50%);
  border-radius: 50%;
}

.preloader div:nth-child(1) {
  transform: rotateZ(0deg);
  animation: rotateCircle1 2s infinite linear;
  z-index: 9;
}

@keyframes rotateCircle1 {
  0% {
    opacity: 0;
  }
  0% {
    opacity: 1;
    transform: rotateZ(36deg);
  }
  7% {
    transform: rotateZ(0deg);
  }
  57% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(2) {
  transform: rotateZ(36deg);
  animation: rotateCircle2 2s infinite linear;
  z-index: 8;
}

@keyframes rotateCircle2 {
  5% {
    opacity: 0;
  }
  5.0001% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  12% {
    transform: rotateZ(-36deg);
  }
  62% {
    transform: rotateZ(-36deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(3) {
  transform: rotateZ(72deg);
  animation: rotateCircle3 2s infinite linear;
  z-index: 7;
}

@keyframes rotateCircle3 {
  10% {
    opacity: 0;
  }
  10.0002% {
    opacity: 1;
    transform: rotateZ(-36deg);
  }
  17% {
    transform: rotateZ(-72deg);
  }
  67% {
    transform: rotateZ(-72deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(4) {
  transform: rotateZ(108deg);
  animation: rotateCircle4 2s infinite linear;
  z-index: 6;
}

@keyframes rotateCircle4 {
  15% {
    opacity: 0;
  }
  15.0003% {
    opacity: 1;
    transform: rotateZ(-72deg);
  }
  22% {
    transform: rotateZ(-108deg);
  }
  72% {
    transform: rotateZ(-108deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(5) {
  transform: rotateZ(144deg);
  animation: rotateCircle5 2s infinite linear;
  z-index: 5;
}

@keyframes rotateCircle5 {
  20% {
    opacity: 0;
  }
  20.0004% {
    opacity: 1;
    transform: rotateZ(-108deg);
  }
  27% {
    transform: rotateZ(-144deg);
  }
  77% {
    transform: rotateZ(-144deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(6) {
  transform: rotateZ(180deg);
  animation: rotateCircle6 2s infinite linear;
  z-index: 4;
}

@keyframes rotateCircle6 {
  25% {
    opacity: 0;
  }
  25.0005% {
    opacity: 1;
    transform: rotateZ(-144deg);
  }
  32% {
    transform: rotateZ(-180deg);
  }
  82% {
    transform: rotateZ(-180deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(7) {
  transform: rotateZ(216deg);
  animation: rotateCircle7 2s infinite linear;
  z-index: 3;
}

@keyframes rotateCircle7 {
  30% {
    opacity: 0;
  }
  30.0006% {
    opacity: 1;
    transform: rotateZ(-180deg);
  }
  37% {
    transform: rotateZ(-216deg);
  }
  87% {
    transform: rotateZ(-216deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(8) {
  transform: rotateZ(252deg);
  animation: rotateCircle8 2s infinite linear;
  z-index: 2;
}

@keyframes rotateCircle8 {
  35% {
    opacity: 0;
  }
  35.0007% {
    opacity: 1;
    transform: rotateZ(-216deg);
  }
  42% {
    transform: rotateZ(-252deg);
  }
  92% {
    transform: rotateZ(-252deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(9) {
  transform: rotateZ(288deg);
  animation: rotateCircle9 2s infinite linear;
  z-index: 1;
}

@keyframes rotateCircle9 {
  40% {
    opacity: 0;
  }
  40.0008% {
    opacity: 1;
    transform: rotateZ(-252deg);
  }
  47% {
    transform: rotateZ(-288deg);
  }
  97% {
    transform: rotateZ(-288deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}
.preloader div:nth-child(10) {
  transform: rotateZ(324deg);
  animation: rotateCircle10 2s infinite linear;
  z-index: 0;
}

@keyframes rotateCircle10 {
  45% {
    opacity: 0;
  }
  45.0009% {
    opacity: 1;
    transform: rotateZ(-288deg);
  }
  52% {
    transform: rotateZ(-324deg);
  }
  102% {
    transform: rotateZ(-324deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

}