html{  touch-action: manipulation;  -webkit-text-size-adjust: none;}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
    -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}


body {
  background-color: #ffffff;
  color: #000;
  font-family:  'Raleway', sans-serif;
  font-size: 17px;
  height: 4000vh;

}

#preload{
  height: 0;
  opacity: 0;
  overflow: hidden;
}



#lottie {
  background: #F7F6F3;
  height: 100vh;
  position: fixed;
  width: 100vw;
  overflow: hidden;
  text-align: left;
  z-index: 10
}
#lottie svg {
}
@media (min-width: 1240px) and (orientation:landscape) {  
#lottie svg defs + g{
    transform: scale( 0.8 );
    transform-origin: center;
  }
}


@media (max-width: 1024px) and (orientation:portrait) {  
  #lottie svg {
	min-width: 112vw;
	transform: translate3d(-50%, 0px,  0px)!important;
	margin-left: 50vw;
	
  }
}
 


#navDiv{
  position: fixed;
  left: 8px;
  top: 8px;
  right: 8px;
  z-index: 15;
  font-weight: 700;
  font-size: 15px;
  color: #000000;
  max-width: 1250px;
  margin: auto;
}

#navDiv .right{
position: absolute;
right: 0;
height: 38px;
z-index: 16;
}
#navDiv a{
  cursor: pointer;
  color: #000000;
  opacity: 0.5;
  text-decoration: none;
 padding: 0 12px 0 33px;
  border-radius: 40px;
  background: rgba(247, 246, 243, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  height: 38px;
  line-height: 38px;
  margin-left: 6px;
  display: inline-block;
  position: relative
}

#navDiv a:hover{
opacity: 1
}

#navDiv a:before{
width: 17px;
height: 17px;
content: "";
position: absolute;
left: 10px;
transition: ease-in all 0.15s;
z-index: 1;
top: 11px;
 transform: rotate(-2deg) scale(0.9)
}
#rsume:before{
background: url("assets/file.svg") no-repeat center;
}
#cntct:before{
background: url("assets/mail.svg") no-repeat center;
}
#navDiv a:hover:before{
  transform: rotate(6deg)
}
.input__active:before {
  transform: rotate(90deg)
}
.input {
  display: inline-block;
  width: auto;
  opacity: 0.5;
  cursor: pointer;
}

.input:before{
width: 12px;
height: 12px;
content: "";
background: url("assets/arrow.svg") no-repeat center;
position: absolute;
left: 12px;
transition: ease-in-out all 0.15s;
z-index: 1;
top: 13px;
transform: scale(0.9)
}

.input:active:before, .input__active:before {
  transform: rotate(90deg)
}

.input__placeholder {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}

.input:hover {
  opacity: 1
}

.placeholder {
  background: rgba(247, 246, 243, 0.7);
  padding: 0 16px 0 30px;
  border-radius: 40px;
  height: 38px;
  line-height: 38px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: calc(100vw - 250px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input__selected {
}

/* Dropdown styling */
.structure {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 200px;
  max-height: 80vh;
  width: 260px;
  overflow: auto;
  background-color: white;
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  border-radius: 10px;
  margin: 0 0 5px 5px;
  font-weight: 500;
  font-size: 15px;
}

.structure div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  font-size: 0.93em
}

.structure div:hover {
  font-weight: 600;

  cursor: pointer;
}



.hide {
  display: none;
}

#mButton, #ARtest{ cursor: pointer;}
#mButton{opacity: 0.8;}
#mButton:hover{  opacity: 1; }

#scrlDown{
z-index: 100;
position: fixed;
right: 7vw;
bottom: 5vh;
width: 3.5vw;
height: 3.5vw;
min-height: 52px;
min-width:  52px;
cursor: pointer;
border-radius: 40px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
margin-bottom: env(safe-area-inset-bottom);
}
#scrlDown:active{  margin-bottom: -3px}
#scrlDown:hover{
transform: scale(1.1);
}
//@media (max-width: 1024px) and (orientation:portrait) and (hover: none) {


  #scrlDown.scroll{opacity: 0.4!important;}
  #scrlDown.scroll div{
  border: 12px solid transparent;
 
//}
  #scrlDown:active{ margin-bottom: env(safe-area-inset-bottom) }
  #scrlDown:hover{
  transform: scale(1.3);
  }
  #scrlDown{
    left: 7vw;
    margin-left:  auto ; margin-right:  auto;
  }
}


#scrlDown div{
width: 100%;
height: 100%;
background: url("assets/scroll.svg") no-repeat center;
background-size: contain;
opacity: 0.8;
transition: opacity 0.3s ease;
 border-radius: 80px;
}
#scrlDown:hover{
transform: scale(1.1);
}
#scrlDown div:hover{
  opacity: 1;
}

#scrlDown div:active{
  opacity: 0.8;
}

.wobble {
  animation: wobble 2s ease infinite;
  animation-delay: 0.5s;
}
@keyframes wobble {
  0% { transform: translateY(0%); }
  15% { transform: translateY(-25%) rotate(-5deg); }
  30% { transform: translateY(20%) rotate(3deg); }
  45% { transform: translateY(-15%) rotate(-3deg); }
  60% { transform: translateY(10%) rotate(2deg); }
  75% { transform: translateY(-5%) rotate(-1deg); }
  100% { transform: translateY(0%); }
}