/* UbuntuMono font */
@font-face { font-family: UbuntuMono; src: url('fonts/UbuntuMono-R.ttf'); } 
@font-face { font-family: UbuntuMono; font-weight: bold; src: url('fonts/UbuntuMono-B.ttf');}
@font-face { font-family: UbuntuMono; font-style: italic; src: url('fonts/UbuntuMono-RI.ttf');}

/* Inconsolata font */
@font-face { font-family: Inconsolata; src: url('fonts/Inconsolata-Regular.ttf'); } 
@font-face { font-family: Inconsolata; font-weight: bold; src: url('fonts/Inconsolata-Bold.ttf');}


/* fade in effect */

html {
 /*background-color:#dac6c2;*/
  background-color:  #dedede;
}

body {
    opacity: 1;
    transition: 1s opacity;
    background:	#fff;
    width:100%;
    height:100%;
    overflow: hidden;
}
    
body.fade-out {
    opacity: 0;
    transition: none;
    }
 
 
    
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* scrollbox */
  
.scroll-box {
z-index:80;
	position: absolute;
	height: 59px;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: hidden;
    overflow-x: hidden;
    margin-top: 42px;
}

.image {
z-index:80;
    cursor: pointer;
    color: #000;
    background: #transparent;
    border: 1px solid #fff;
    margin-left:8px;
    margin-right:8px;
    outline: none; 
    outline: 0;
}

.scroll-arrows {
z-index:80;
    text-align: center;
}

.scroll-arrows div {
z-index:80;
    display: inline-block;
    margin-top:15px;
    width: 41px;
    padding: 0px;
    cursor: pointer;
    color: #000;
    background: #transparent;
}



#text1 {
  z-index:100;
  position: absolute;
  width:82px;
  text-align: center;
  color:#000;
  top: 0px;
  opacity:0.5;
  font-family: Inconsolata;  
  font-size:20px;
  font-weight:normal;
  outline: none;
}

#text0 {
z-index:90;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
top: 19.1%;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  text-align: center;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
}

#text000 {
z-index:90;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
top: 19.1%;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  text-align: center;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
}

#text01 {
z-index:90;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
top: 19.1%;
margin-top: 82px;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  text-align: center;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
}

#text010 {
z-index:90;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
top: 19.1%;
margin-top: 82px;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  text-align: center;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
}


#text02 {
z-index:90;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
top: 19.1%;
margin-top: 41px;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  text-align: center;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
}


#text00 {
 text-align: center;
}

.text11 {
  z-index:100;
  color:#fff;
  font-family: Inconsolata;  
  font-size:20px;
  font-weight:normal;
  outline: none;
}

.marker {
  z-index:100;
  position: absolute;
  width:82px;
  text-align: center;
  color:#000;
  top: -21px;
  opacity:1.0;
  font-family: Inconsolata;  
  font-size:20px;
  font-weight:normal;
  outline: none;
}


#text2 {
z-index:100;
margin-bottom: 20px;
bottom:0px;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none;
}

#text6 {
z-index:100;
margin-bottom: 20px;
bottom:0px;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none;
}

#text3 {
z-index:89;
margin-bottom: 20px;
bottom:0px;
right: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none;
}

#text4 {
z-index:89;
margin-bottom: 20px;
bottom:0px;
left: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:123px;
  font-family: UbuntuMono;  
  font-size:40px;
  font-weight:normal;
  outline: none;
}


/* toggle clean view */

.show0 {
z-index:89;
margin-left: 0px;
top: 19.1%;
left: 1.0vw;
position: absolute;
  color:#cbcbcb;
  opacity:1.5;
  height:82px;
  width:41px;
  font-family: UbuntuMono;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
  margin-top:0;
  margin-bottom:0;
}

.hide0 {
z-index:89;
margin-left: 0px;
top: 19.1%;
left: 1.0vw;
position: absolute;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: UbuntuMono;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
}

.show {
z-index:89;
margin-left: 0px;
top: 19.1%;
left: 1.0vw;
position: absolute;
  color:#000;
  opacity:1.0;
  height:41px;
  width:41px;
  font-family: UbuntuMono;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
}

.hide {
z-index:89;
margin-left: 0px;
top: 19.1%;
left: 1.0vw;
position: absolute;
  color:#000;
  opacity:1.0;
  height:41px;
  width:41px;
  font-family: UbuntuMono;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
}



/* page forward / backward */

.arrow-right {
z-index:89;
position: absolute;
right: 1.0vw;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
  bottom: 49%;
  display: none;
}

.arrow-left {
z-index:89;
position: absolute;
left: 1.0vw;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
  bottom: 49%;
  display: none;
}

.arrow-right0 {
z-index:89;
position: absolute;
right: 1.0vw;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
  bottom: 49%;
}

.arrow-left0 {
z-index:89;
position: absolute;
left: 1.0vw;
  color:#fff;
  opacity:1.5;
  height:41px;
  width:41px;
  font-family: Inconsolata;  
  font-size:40px;
  font-weight:normal;
  outline: none; 
  text-align: center;
  bottom: 49%;
}

/* scrollbar navigation */

#arrow-up {
z-index:80;
position:absolute;
color: #fff;
opacity:1.5;
left:1.0vw;
  font-family: Inconsolata;  font-size:40.0px;
  font-weight:normal;
}
#arrow-down {
z-index:80;
position:absolute;
color: #fff;
opacity:1.5;
right:1.0vw;
  font-family: Inconsolata;  font-size:40.0px;
  font-weight:normal;
}

/* fullscreen toggle */

#tfull {
z-index:80;
position:absolute;
color: #000;
bottom: 1.0vw;
right: 1.0vw;
  font-family: Inconsolata;  font-size:40.0px;
  font-weight:normal;
}

/* main image settings */

.mainimg0 {
position: absolute;
max-width: 100%;
max-height: 100%;
background: linear-gradient(to right, #feecd8, #efd5c7);
border: 1px solid #fff;
/*border-bottom: 1px solid #000;
border-left:  1px solid #c3bbc6;
border-top:  1px solid #c3bbc6;
border-right:  1px solid #c3bbc6;*/
object-fit:contain;
}

#mainimgdiv0 {
z-index:0;
position: absolute;
width: 100%;
height: 100%;
object-fit:contain;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow:hidden;
}

#mainimgdiv {
/*width:98vmin;
height:65.44vmin;*/
width:98%;
height:98%;
z-index:0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#mainbody {
z-index:0;
position: absolute;
max-width: 100%;
max-height: 100%;
}


.mainimg {
z-index:0;
background-clip: padding-box;
position: absolute;
max-width: 98.0%;
max-height: 98.0%;
border-bottom: 1px solid #000;
border-left:  1px solid #c3bbc6;
border-top:  1px solid #c3bbc6;
border-right:  1px solid #c3bbc6;
object-fit:contain;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:none;
background: linear-gradient(to right, #cab5a5, #b4a599);
}