@media only screen and (min-width:768px){

.box{
  width:100%;
  height: 70%;
  left:50%;
  top:10%;
  position:fixed;
  display:inline-block;
  background:white;
  background-size: 100%;
  box-shadow:0 0 10px rgba(0,0,0, .4);
  font-family: Georgia, "Times New Roman", Times, serif;
  border:1px solid #b4b1b1;
  visibility:hidden;
  z-index: 10000;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
   -webkit-transition:opacity .5s, top .5s;
     -moz-transition:opacity .5s, top .5s;
      -ms-transition:opacity .5s, top .5s;
       -o-transition:opacity .5s, top .5s;
  transition:opacity .5s, top .5s;
}

.medium-box{
  width: 50%; 
  height: auto; /*auto*/
  overflow: hidden;
  left:50%;
  top:10%;
  padding:15px;
  position:fixed;
  display:inline-block;
  background:white;
  background-size: 100%;
  box-shadow:0 0 10px rgba(0,0,0, .4);
  font-family: Georgia, "Times New Roman", Times, serif;
  border:1px solid #b4b1b1;
  visibility:hidden;
  overflow: hidden;
  z-index: 10000;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
   -webkit-transition:opacity .5s, top .5s;
     -moz-transition:opacity .5s, top .5s;
      -ms-transition:opacity .5s, top .5s;
       -o-transition:opacity .5s, top .5s;
  transition:opacity .5s, top .5s;
}


.short-box{
  width:40%;
  min-height: 220px; /*auto*/
  left:50%;
  top: 0;
  padding: 15px;
  position:fixed;
  display:inline-block;
  background:white;
  background-size: 100%;
  box-shadow:0 0 10px rgba(0,0,0, .4);
  font-family: Georgia, "Times New Roman", Times, serif;
  border:1px solid #b4b1b1;
  visibility:hidden;
  z-index: 10000;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
   -webkit-transition:opacity .5s, top .5s;
     -moz-transition:opacity .5s, top .5s;
      -ms-transition:opacity .5s, top .5s;
       -o-transition:opacity .5s, top .5s;
  transition:opacity .5s, top .5s;
}

.overlay:target+.short-box{
    top: 15%;
    opacity: 1;
    visibility: visible;
}

}


.query{
    font-size:8px;
    line-height: 30px;
    cursor: pointer;
    color: #999;
}



@media only screen and (max-width:768px){

.box{
  width: 100%; 
  height: 100%; /*auto*/
  overflow-y: scroll;
  left:50%;
  padding:15px;
  position:fixed;
  display:inline-block;
  background:white;
  background-size: 100%;
  box-shadow:0 0 10px rgba(0,0,0, .4);
  font-family: Georgia, "Times New Roman", Times, serif;
  border:1px solid #b4b1b1;
  visibility:hidden;
  z-index: 10000;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
   -webkit-transition:opacity .5s, top .5s;
     -moz-transition:opacity .5s, top .5s;
      -ms-transition:opacity .5s, top .5s;
       -o-transition:opacity .5s, top .5s;
  transition:opacity .5s, top .5s;
}


.medium-box{
  width: 100%;
  height: auto;
  left:50%;
  top:10%;
  padding: 15px;
  position:fixed;
  display:inline-block;
  background:white;
  box-shadow:0 0 10px rgba(0,0,0, .4);
  font-family: Georgia, "Times New Roman", Times, serif;
  border:1px solid #b4b1b1;
  visibility:hidden;
  z-index: 10000;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
   -webkit-transition:opacity .5s, top .5s;
     -moz-transition:opacity .5s, top .5s;
      -ms-transition:opacity .5s, top .5s;
       -o-transition:opacity .5s, top .5s;
  transition:opacity .5s, top .5s;
}



.short-box{
  width:100%;
  height: 250px; /*auto*/
  left:50%;
  top: 0;
  padding: 15px;
  position:fixed;
  display:inline-block;
  background:white;
  box-shadow:0 0 10px rgba(0,0,0, .4);
  font-family: Georgia, "Times New Roman", Times, serif;
  border:1px solid #b4b1b1;
  visibility:hidden;
  z-index: 10000;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
   -webkit-transition:opacity .5s, top .5s;
     -moz-transition:opacity .5s, top .5s;
      -ms-transition:opacity .5s, top .5s;
       -o-transition:opacity .5s, top .5s;
  transition:opacity .5s, top .5s;
}

.overlay:target+.short-box{
    top: 15%;
    opacity: 1;
    visibility: visible;
}

}



.small-box{
  width: 330px; 
  height:auto; /*auto*/
  left:50%;
  top:10%;
  padding:15px;
  position:fixed;
  display:inline-block;
  background:white;
  background-size: 100%;
  box-shadow:0 0 10px rgba(0,0,0, .4);
  font-family: Georgia, "Times New Roman", Times, serif;
  border: 0;
  border-radius: 10px;
  visibility:hidden;
  overflow: hidden;
  z-index: 10000;
  -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
     -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
   -webkit-transition:opacity .5s, top .5s;
     -moz-transition:opacity .5s, top .5s;
      -ms-transition:opacity .5s, top .5s;
       -o-transition:opacity .5s, top .5s;
  transition:opacity .5s, top .5s;
}


.overlay{
  background-color:rgba(0, 0, 0, 0.6);
  bottom:0;
  cursor:default;
  left:0;
  opacity:0;
  position:fixed;
  right:0;
  top:0;
  visibility:hidden;
  z-index:1;
  font-family: Georgia, "Times New Roman", Times, serif;
  -webkit-transition:opacity .5s;
   -moz-transition:opacity .5s;
    -ms-transition:opacity .5s;
     -o-transition:opacity .5s;
  transition:opacity .5s;
}

.overlay:target{
   visibility:visible;
   opacity:1;
}

.overlay:target+.box,.overlay:target+.small-box,.overlay:target+.medium-box{
   top:50%;
   opacity:1;
   visibility:visible;

}



.close{
   position: absolute;
   top: 10px;
   font-size: 34px;
   right: 10px;
   z-index: 1000;
}


.close:hover,.log-off:hover,.logoff:hover{
   color: #ff9900;
}


@media only screen and (min-width:768px){
    .spacer{
        padding: 80px;
    } 

}

@media only screen and (max-width:768px){
    .spacer{
        padding: 80px 20px;
    }
    
}

.box::-webkit-scrollbar{
    width: 0px;
    background: transparent;
}

.box::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background: #ff0000;
}

.box::-moz-scrollbar{
    width: 0px;
    background: transparent;
}

.box::-moz-scrollbar-thumb{
    border-radius: 4px;
    background: #ff0000;
}

.barless::-moz-scrollbar{
    width: 0px;
    background: transparent;
}

.barless::-moz-scrollbar-thumb{
    border-radius: 4px;
    background: #ff0000;
}

.barless::-webkit-scrollbar{
    width: 0px;
    background: transparent;
}

.barless::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background: #ff0000;
}

.reload{
   height: 30px;
   width: 30px;
   background: #fff;
   opacity: 1.0;
   position: absolute;
   border: 0;
   box-shadow: 0;
   border-radius: 50%;
   font-size: 20px;
   color: #ddd;
   left: 20px;
   top: 10px;
   z-index: 1000;
}


.close:hover,.log-off:hover,.logoff:hover,.reload:hover{
   opacity: 0.7;
}