body {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.5em;
    -webkit-text-size-adjust: none;
}
/*@media only screen and (orientation:landscape) {
  body {
    height: 100vw;
    transform: rotate(90deg);
  }
}*/
/* Structure */

#page {
    padding-top: 1.9em;
    margin: 0.5em;
}
#mid_panel {
    margin: 0;
}
#txt_name {
   margin-left:auto;
  margin-right:auto;
  display: block;
   border:4px solid blue;
  font-size: 30px;
  width:65vw;
  
}
#closetweb{
 
  width:170vw;
    max-height: unset;
max-width: unset;
}
#closetimg{
  background-image: url('../img/Closet.png');
  height: 127vw;
background-size: cover;
background-position-y: -3vw;
  position:relative;
  z-index: -1;
 width:170vw;
     max-height: unset;
max-width: unset;
 
}
#closetimg2{
  position:fixed;
  display:unset;
  z-index: -2;
 width:170vw;
     max-height: unset;
max-width: unset;
 bottom:1vw;
 left:-35vw;
}
#closetclose{
   width:170vw;
 display:none;
     max-height: unset;
max-width: unset;
 
}
#closetwrap{
  position:relative;
  overflow:unset;
  left:-31.5%;
}
#closetgrid{
    position: absolute;
  left: 85vw;
  top: unset;
  transform: translate(-50%,-50%);
   max-width: 560px;
  max-height: 622px;
  height: 106vw;
  width: 100vw;
  opacity: 30%;
  bottom:-44vw;
display: flex;
flex-direction: column;
  
}
#closetmenu{
  position: fixed;
bottom: 3vh;

 
text-align: center;
display: none;

  height:auto;
  width:100vw;
  left:-3.5vw;
  
}
@media screen and (min-width: 120px) and (max-width: 600px) and (orientation: landscape) { 
  html { 
    transform: rotate(-90deg); 
    transform-origin: left top;
    width: 100vh; 
    overflow-x: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
  }
}
.grid { margin:1em auto; border-collapse:collapse; width:80vw; height:80vw;}
/* Title */
#title {
    margin-top: -1.5em;
    padding: 1.0em 0.5em;
}
.toolsicon2{
  width:10vw;
 
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
   text-align:center;
}

.toolsicon3{
  width:10vw; 
  
  margin-left: auto;
  margin-right: auto;
  display: block;
   text-align:center;
   
}
#clothingiconbottom {
  position:absolute;
  right:2%;
  display:inline;
}
#clothingicontop {
  opacity:0;
  position:fixed;
   right:2%;
     display:inline;
/*  -webkit-transition: opacity 2s ease-out;
  -moz-transition: opacity 2s ease-out;
  -o-transition: opacity 2s ease-out;
  transition: opacity 2s ease-out;*/
}
#crossfade {
  

}

#crossfade img {
  

}

/*#clothingicontop:hover {
  opacity:1;
}*/
#title .label  {
    font-size: 0.65em;
    max-width: 25em;
    padding: 2.0em;
}

/* Side panels */
#tools_wrapper {
    position: relative;
}

.tools {
    background-image: url("../img/text_bg.jpg");
    position: relative;
    width: auto;
}
#character_panel {
    display: none;
}
#tools_portrait{
    display:none;
    position:fixed;
   
    top:auto;
    right:auto;
            direction:unset;
    z-index:-1;
    width:100vw;
    
}

/*#tools_portrait{
    display:none;
    position:fixed;
    height:98vh;
    right:0.5vw;
        top:0.5vw;
            direction:rtl;
    z-index:-1;
    width:auto;
    
}*/
#info_panel {
    display: none;
}
#tools_wrapper {
    display: block;
}

/* Main content */
#content_wrapper {
    width: auto;
    padding: 2.0em;
}
#content {
    font-size: 16px;
    line-height: 1.5em;
}
.toolsicon{
  width:15%;
  height:15%;
  
}
/* Toolbar and menu */
#toolbar {
    position: fixed;
    z-index: 300;
    left: 0;
    right: 0;
    top: 0;
    background: transparent url("../img/toolbar_bg.png") repeat-x top left;
    background-size: cover;
    height: 10vw;
    padding: 8px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.75);
    box-shadow: 0 0 16px rgba(0,0,0,0.75);
}
#toolbar h1 {
    float: left;
    font-weight: normal;
    font-size: 16px;
    margin: 8px 0 0 0;
    padding: 0 10px;
    color: #fc6;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
#toolbar .nav {
    float: right;
    margin: 0;
}
#toolbar .nav a {
    font-size: 16px;
    line-height: 20px;
    color: white;
    padding: 4px 16px;
    float: right;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    -webkit-border-radius: 6px;
    background-image: -webkit-gradient(linear, left top, left bottom,
                                       from(#C00), color-stop(0.45, #a00),
                                       color-stop(0.55, #900), to(#900));
    border: 2px solid #600;
}
#mobilediapercheck{
  
 
  
}
#timeofdayicon{
  left: 17%;
  position: fixed;
  
}
#diapercheckicon{
  left: 60%;
  position: fixed;
  width: 12vh;
  box-shadow: 1px 2.2px 10px rgba(12, 0, 0, 0.6);
}
#foodicon{
  
   left: 27%;
  position: fixed;
}
#qicon{
  
   left: 2%;
  position: fixed;
}
#qiconimg{
  display:none;
  position: fixed;
  width: 100%;
  top: 8%;
  right: -1%;

  
}
#diapercapicon{
  
   left: 38%;
  position: fixed;
}
.ddr {
  position:fixed;
  bottom: 3vh;
  width:94vw;
  left:0;
}
#menu {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    font-size: 16px;
    background-image: url("../img/tools_bg.jpg");
    z-index: 200;
    list-style-type: none;
    padding: 10px 0 0 0;
    margin: 0;
    opacity: 0.95;
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.75);
    box-shadow: 0 0 16px rgba(0,0,0,0.75);
}
#menu li {
    border-bottom: 1px solid rgba(0,0,0,0.25);
}
#menu li:last-child {
    border-bottom: none;
}
#menu a {
    display: block;
    padding: 10px 20px;
}
#salonmenu {
  line-height: 0;
  direction:rtl;
  position:fixed;
  height:67.13vw;
width:100vw;
  bottom: 10vh;
/*  background: #c2b3da;*/
  z-index:30000;
/*  left:15vw;*/
/*  border:4px solid blue;*/
  display: none;
/*  border-collapse:collapse;*/
  margin:1em auto;
/*  background-image:url("../img/salonmenu.png");*/
  background-size:contain;
  background-repeat:no-repeat;

  background-size:100% 100%;
}
#salonclose{
  position: fixed;
  
}
#salonimg{
  height:inherit;
  
}
#salonbuttonarea{
  flex:1;
 width:58%;
    position:absolute;
    top:0;
    bottom:0;
}
#salonnoraarea{
  flex:1;
 width:58%;
 
    position:absolute;
    top:50%;
    left:0;
    bottom:0;
    background-color: pink;
    opacity:50%;
    
}
.salonbuttonset{
  position:absolute;
  display:flex;
  flex-direction: column;
  gap:2vw;
 
  width: 26.9%;
  height: 23.2%;
  background: blueviolet;
  
}
#salontext{
  
    position:absolute;
  display:flex;
  flex-direction: column;
 
 
  width: 80%;
  height: 25%;
  background: blueviolet;
    top: 4%;
  right: 10%;
}
#salonslide{
  
    position:absolute;
  display:flex;
  flex-direction: column;
 
 
  width: 40%;
  height: 10%;
  background: blueviolet;
    bottom: 6%;
  right: 30%;
}
#salonslideright{
  
    position:absolute;
  display:flex;
  flex-direction: column;
 
 
  width: 40%;
  height: 100%;
  background: blue;
    bottom: 0%;
  right: 0%;
}
#salonslideleft{
  
    position:absolute;
  display:flex;
  flex-direction: column;
 
 
  width: 40%;
  height: 100%;
  background: blue;
    bottom: 0%;
  right: 60%;
  
}
#salonnorabuttons{
  
    position:absolute;
  display:flex;
  flex-direction: column;
 
 
  width: 40%;
  height: 10%;
  background: blueviolet;
    bottom: 6%;
  right: 30%;
}
#salonfinish{
  
    position:absolute;
  display:flex;
  flex-direction: column;
 
 
  width: 40%;
  height: 100%;
  background: blue;
    bottom: 0%;
  right: 0%;
}
#salonpurchase{
  
    position:absolute;
  display:flex;
  flex-direction: column;
 
 
  width: 40%;
  height: 100%;
  background: blue;
    bottom: 0%;
  right: 60%;
  
}
#salonbutton1{
  top: 30.5%;
  right: 52.1%;
}
#salonbutton2{
top: 30.9%;
  right: 21.4%;
}
#salonbutton3{
 top: 57.4%;
  right: 52.1%;
}
#salonbutton4{
 top: 57.4%;
  right: 21.4%;
}
#shopmenu {
  position:fixed;
  height:33vw;
  width: 33vw;
  bottom: 10vh;
  background: pink;
  z-index:30000;
  left:10vw;
  border:4px solid blue;
  display: none;
  border-collapse:collapse;
    margin:1em auto;
}


@media (max-width: 900px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
  :root {
    --sca: 3;
    --vw66: 97vw;
    --vw33: 33vw;
    --vw11: 32vw;
  }

  #shopmenu {
    position:fixed;
    height: 100vw ;
    width: var(--vw66);
    bottom: 10vh;
    background: #c2b3da;
    z-index: inherit;
    left:-1vw;
    border:4px solid blue;
    display:none;
    border-collapse:collapse;
    margin:1em auto;
    background-image:url("../img/shopantonfull.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position: right;
    background-size:200% 100%;
  }
  #shopclose{
    float:right;
    font-size: 48px;
    position:absolute;
    z-index: 101;
  }
  #shopdesc{
    z-index: inherit;
    position:absolute;
    float:right;
    top:75vw;
    right:47.5vw;
    width:calc( 13vw * var(--sca) );
    background-image:url("../img/fancybox.png");
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    background-size:100% 100%;
    padding:calc( 1vw * var(--sca) );
    background-color:aliceblue;
    color:darkblue;
    font-family:Source Sans Variable;
    font-size: calc( 1vw * var(--sca) );
    line-height: calc( 1.5vw * var(--sca) );

  }
  #shopdetail{

    position:absolute;
    float:right;
    top:3vw;
    right:38vw;
    width:calc( 14vw * var(--sca) );
    color:#595651;
    background-image: url("../img/Word_Bubble_Tan.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: calc( 1vw * var(--sca) );
    font-family: Gadugi;
    font-size:calc( 1vw * var(--sca) );
    line-height: calc( 1.4vw * var(--sca) );

  }
  .smtableholder{
    line-height: 0;

    border-collapse:collapse

  }
  .shoppic{
    display: inline-block;
    position: absolute;
    width: inherit;
    height: inherit;
    float: right;
     z-index: 70;
      background-image:url("../img/shopantonfull.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position: right;
    background-size:200% 100%;
     
     
     
  }
  #smtable{
    position:absolute;
    float:left;
    width:var(--vw66);
    display:block;
    z-index: 10;
    line-height: 0;
    background-image:url("../img/shopantonfull.png");
        background-size:contain;
    background-repeat:no-repeat;
    background-position: left;
    background-size:200% 100%;
    
    

  }
  #shopbuy{
    display: inline-block;
    position: absolute;
    width: calc( 14vw * var(--sca) );
    height: calc( 5vw * var(--sca) );
    float: right;
    bottom:4vw;
    right:1vw;

  }
  .smtable {

    line-height: 0;

    border-collapse:collapse;
    position:relative;
    
    
    
    
  }
  .smtablea {
    display:inline-block;
    line-height: 0;

  }
  .smtable:hover {
    background-color: rgba(153,136,119,0.2);
    cursor: pointer;

  }
  .shopicon{
    width:var(--vw11);
    line-height: 0;

  }

  .shoptxt{
    font-size: 20px;
    bottom:-6px;
    position:absolute;
    color:blue;
  }
  #smpic{
   

  }
  .shoppicselect{
 background-position: left;
 z-index: 1;
  }






}

.rad-label {
display: flex;
align-items: center;
border-radius: 100px;
padding: 2vw 2.5vw;
cursor: pointer;
transition: .3s;
font-size: 4vw;
}

.rad-label:hover,
.rad-label:focus-within {
  background: hsla(0, 0%, 80%, .14);
}

.rad-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
}
.gmap { margin:1em auto;  width:40vw; height:40vw;

        /*border-collapse:collapse;*/
        border:4px solid black;
        background-image: url("../img/pexe.png");


        background-size: cover;
/*        background-position-y: -7vw;*/
        background-position-x: -16vw;

}
.rad-design {
width: 5vw;
height: 5vw;
border-radius: 100px;
background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));
position: relative;
font-size: .5vw;
}

.rad-design::before {
  content: '';

  display: inline-block;
  width: inherit;
  height: inherit;
  border-radius: inherit;

  background: hsla(329.1, 100%, 80%, 0.69);
  transform: scale(1.1);
  transition: .3s;
}

.rad-input:checked+.rad-design::before {
  transform: scale(0);
}

.rad-text {
color: hsl(0, 0%, 60%);
margin-left: .5vw;
letter-spacing: 0.2vw;
text-transform: uppercase;
font-size: 5vw;
font-weight: 900;
transition: .3s;
}

.rad-input:checked~.rad-text {
  color: hsl(0, 0%, 40%);
}
.radside{
  display: flex;
  line-height: 2;
  flex-wrap: wrap;
  border: solid 1.5px white;
  border-radius: 12px;

}
.newport3{
  width: 31vh;
margin: auto;
  display: flex;
}
#underportmenu{
flex: 3;

height: 30vh;
width: 95vw;
background-image: url("../img/closetbg.png");
display: none;
direction: ltr;
left: 0;
position: absolute;
overflow:auto;
}
h1 {
  font-size: 2.0em;
  text-transform: uppercase;
  letter-spacing: 2px;
 
  color: #d84762;
  text-align: center;
  line-height: 1.4em;
}
#yaycircle{
  width: 13vw;
  position: absolute;
 z-index: 10;
 float: left;

 position: relative;
top: -10vw;
}
#yaycircle4{
  width: 16vw;
float: left;
position: absolute;
left: 0;
opacity: 80%;
cursor: pointer;
bottom: -17vw;
margin: auto;
left: -49%;
right: -50%;
  
}
#closetwrap{
  left:-33%
  
}
#radfix{
  
  
}
.xeyport2{
  width: inherit;
  position:fixed;
  display: inline-block;
  height: 62vh;
}