body{
	margin: 0;
	font: normal 17px 'Roboto Condensed', sans-serif;
}	
@font-face {
font-family: "HARCHENKO_2022"; 
src: url("/site3d/css/font.ttf") format("truetype"); 

}
.art_layerlogo {
 	position: absolute;
	left: 30px;
	top: 0px;
		z-index : 999;
}

.art_text2{
	color : #fff;
	position : absolute;
	z-index : 2;
	top : 55%;
	left : 50%;
	transform: translate(-50%, -50%);
	
}
.close{
 	position: absolute;
	right: 10px;
	top: 10px;
	z-index : 999;	
}
.close:hover{
 cursor: pointer;
 filter: invert(75%);
}

.txt  {
	z-index: 1;
    display : block;
    position: relative;
	}

h1 {
	font-family: 'HARCHENKO_2022';
	font-size: 36px;
	color: #000;
	margin: 0; 
	
}
h2 {
	font-family: 'Roboto Condensed', sans-serif;
	font-stretch: extra-expanded;
	font-size: 22px;
	margin: 0; 
}
h3{
	font-family: 'HARCHENKO_2022';
	color: #fff !important;
	font-size: 48px;
	margin: 0; 
	margin-bottom: -35px;
	text-shadow: -1px 0 rgba(0, 0, 0, 0.1),
	0 1px rgba(0, 0, 0, 0.1),
	1px 0 rgba(0, 0, 0, 0.1),
	0 -1px rgba(0, 0, 0, 0.1);
}



.art_loading {
	margin : auto;
	width : 50px;
	height : 50px;
	position : absolute;
	left : 48%;
	top : 43%;
	background-image: url('/site3d/loading.gif');
	background-size : 100% 100%;
	z-index : 2;
}

.art_preload {
	z-index: 2;
	background-color: rgba(10, 10, 10, .6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color : #fff;
}

.buttons{
	z-index: 1;
    display : block;
    position : absolute;
    width : 100%;
    height : 90px;
    bottom: 0px;
	display: flex;
	justify-content: center;
	background-color: rgba(255, 255, 255, .4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-top: 1px solid #a0a0a0;
}

.button {
    display: block;
    position: relative;
    width: 80px;
    height: 65px;
    border: 0px;
    padding: 5px;
	cursor: pointer;
    cursor: hand;    
}
.button:hover{
 border: 0px solid #000;
 cursor: pointer;
 filter: invert(75%);
}
.but{
height: 65px;
width: 80px;
}

.buttonss::-webkit-scrollbar {
  width: 15px;
  background-color: #f9f9f9;
   border-radius: 10px;
}

.buttonss::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #535353;
    border-radius: 10px;
}

.buttonss::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.2);
  border-radius: 10px;
  background-color: #f9f9f9;
}



@media (max-width: 1050px){
h1 {
	font-size: 25px;
}
h2 {
	font-size: 15px;
}
}

@media (max-width: 650px){
h3{
	font-size: 36px;
	} 
.buttons{

    width : 100%;
    height : 75px;
	bottom: 0px;
	flex-wrap: wrap;
	justify-content: center;
}

.button {
    display: block;
    position: relative;
    width: 60px;
    height: 70px;
    border: 0px;
    padding-left: 10px;
	padding-right: 10px;
}
.buttonss{
	left: 5px;
    width : 97%;
    height : 85px;
    bottom: 0px;
	display: flex;
	justify-content: left;
	background-color: rgba(255, 255, 255, .3);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	overflow-x: scroll;
	overflow-y: hidden;
}
.buttonss::-webkit-scrollbar {
  height: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

.buttonss::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #535353;
  border-radius: 10px;
}

.buttonss::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.2);
  border-radius: 10px;
  background-color: #f9f9f9;
}

.but {
height: 60px;
width: 60px;
}
  #panGo.button{
display: none;
}
  #panOut.button{
display: none;
}
  #panReset.button{
display: none;
}

}

@media (max-width: 499px){
h3{
	font-size: 36px;
	} 
.buttons{

    width : 100%;
    height : 150px;
	bottom: 0px;
	flex-wrap: wrap;
	justify-content: center;
}
}