@font-face {
    font-family: 'Dince';
    src: url('../Fonts/Dince/DINCE-Light.eot');
    src: url('../Fonts/Dince/DINCE-Light.eot?#iefix') format('embedded-opentype'), 
         url('../Fonts/Dince/DINCE-Light.woff') format('woff'), 
         url('../Fonts/Dince/DINCE-Light.woff2') format('woff2'), 
         url('../Fonts/Dince/DINCE-Light.ttf') format('truetype'), 
         url('../Fonts/Dince/DINCE-Light.svg#dince-lightlight') format('svg');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'Dince';
    src: url('../Fonts/Dince/DINCE-Medium.eot');
    src: url('../Fonts/Dince/DINCE-Medium.eot?#iefix') format('embedded-opentype'), 
         url('../Fonts/Dince/DINCE-Medium.woff') format('woff'), 
         url('../Fonts/Dince/DINCE-Medium.woff2') format('woff2'), 
         url('../Fonts/Dince/DINCE-Medium.ttf') format('truetype'), 
         url('../Fonts/Dince/DINCE-Medium.svg#dince-lightlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Dince';
    src: url('../Fonts/Dince/DINCE-Bold.eot');
    src: url('../Fonts/Dince/DINCE-Bold.eot?#iefix') format('embedded-opentype'), 
         url('../Fonts/Dince/DINCE-Bold.woff') format('woff'),  
         url('../Fonts/Dince/DINCE-Bold.woff2') format('woff2'), 
         url('../Fonts/Dince/DINCE-Bold.ttf') format('truetype'), 
         url('../Fonts/Dince/DINCE-Bold.svg#dince-lightlight') format('svg');
  font-weight: bold;
  font-style: normal;
}

body {
    margin: 0;
    font-family: 'Dince', Arial;
    background-image:url(../images/hra_bgr_texture.png);
    background-repeat:repeat;
}

.fb {position:absolute; top:5px; left:40px; background:none; z-index:2;}

#startDB {display:none; width:32vmin; height:39vmin; 
          background-color:white; margin:15vmin auto 0px auto; position:relative;
          border-bottom-left-radius:3vmin; border-bottom-right-radius:3vmin;}

#start-dialog-header {display:block; text-align:center; padding: 1.5vmin; /*position:absolute;  left:60px; top:50px;*/
                      color:#000; font-size:4vmin; font-weight:bold; cursor:default;}
#start-dialog-content {color:#000; font-size:3vmin; text-align:center; cursor:default; padding:2vmin;}

.txtInput { width:20vw; max-width:250px; position:absolute; display:none; color:#000;
            font-family: 'Dince', Arial; font-size:2.5vmin; font-weight:bold; 
            border:1px solid #000; cursor:default; padding:0.5vw 1vw; z-index:100; 
            cursor:pointer;
               -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
                -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
                box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75); }

#end-dialog-header {position:absolute; display:block; left:80px; top:60px;
                    color:#000; font-size:60px; cursor:default;}
#end-dialog-content {position:absolute; display:block; left:60px; top:150px;
                     color:#000; font-size:32px; cursor:default;}
#end-dialog-result {position:absolute; display:block; left:100px; top:190px;
                    color:#000; font-size:60px; text-align:center; cursor:default;}

.btn {
  width: 24.92vmin;  
  height: 5vmin;
  display: block;
  font-size:2.5vmin;
  color:#fff;
  font-weight:bold;
  background: url("../images/hra_start.png");
  background-size: cover;
  border:none;
  margin: 1vmin auto;
  outline:none;
  cursor:pointer;
  z-index:15;
  
}
    .btn:hover {
        background-position: bottom;
    }

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.not_visible{display:none;}