:root{
  --mapWidth:100%;
  --mapHeight:calc(var(--mapWidth)/1.1618);
  
  --contWidth: 500px;
	--contHeight: 400px;
}

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html {
  width: 100%;
  height:calc(var(--vh) * 100);
  scroll-behavior: smooth;
}
body {
  width: 100%;
  height:calc(var(--vh) * 100);
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background: #ffffff;  
  position:relative;

  font-weight: 300;
  font-size: 16px;

}





.sup{
  opacity:0;
  transform:translateY(50px);
  transition: all 0.3s ease-out;
}
.smotted{
  opacity:1!important;
  transform:translateY(0px)!important;
}

.op{
opacity:0;
transition: all 0.2s ease-out;
}
.opop{
  opacity:1;
}


.osup{
  transform:translateY(70px);
  transition: all 0.3s ease-out;
}
.osmotted{
  transform:translateY(0px)!important;
}
@media (max-width: 900px) {
  .osup{
    transform:translateY(0px)!important;
    transition: all 0.3s ease-out;
  }
}



.sleft{
  opacity:0;
  transform:translateX(-70px);
  transition: all 0.3s ease-out;
}
.sleff{
  opacity:1;
  transform:translateX(0px);
}


.sright{
  opacity:0;
  transform:translateX(70px);
  transition: all 0.3s ease-out;
}
.srr{
  opacity:1;
  transform:translateX(0px);
}

.backtomainbutton{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: black;
  background-image: url("../.././img/icons/slide_balra.svg");
  background-position: center center;
  position: absolute;
  margin-top: 1rem;
  margin-left: 1rem;
  transform-origin: center;
}

.backtomainbutton:hover{
opacity:0.9;
transform: scale(1.05);
}

.backtomainbutton:active{
  transform: scale(1.02);
}