@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,700&subset=greek,latin);
html { 
  background: url(../../images/2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}
body{
  padding-bottom:50px;
  background:rgba(255,255,255,0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 550px;
  font-family: 'Fira Mono';
  font-weight: 400;
}

.msgGreen{color:darkgreen;}
.msgBlue{color:darkblue;}
.msgYellow{color:yellow;}
.msgRed{color:red;}


.panel-heading-custom {
  background-color:rgba(0,0,0,0.8);
  color:#ffffff;
  padding:15px;
}


.btn-custom { 
color: #ffffff; 
background-color: rgba(0,0,0,0.8);
border-color: rgba(0,0,0,0.8);
} 

.btn-custom:hover, 
.btn-custom:focus, 
.btn-custom:active, 
.btn-custom.active, 
.open .dropdown-toggle.btn-custom { 
color: #ffffff; 
background-color: #666666; 
border-color: #000000; 
} 

.btn-custom:active, 
.btn-custom.active, 
.open .dropdown-toggle.btn-custom { 
background-image: none; 
} 

.btn-custom.disabled, 
.btn-custom[disabled], 
fieldset[disabled] .btn-custom, 
.btn-custom.disabled:hover, 
.btn-custom[disabled]:hover, 
fieldset[disabled] .btn-custom:hover, 
.btn-custom.disabled:focus, 
.btn-custom[disabled]:focus, 
fieldset[disabled] .btn-custom:focus, 
.btn-custom.disabled:active, 
.btn-custom[disabled]:active, 
fieldset[disabled] .btn-custom:active, 
.btn-custom.disabled.active, 
.btn-custom[disabled].active, 
fieldset[disabled] .btn-custom.active { 
background-color: #000000; 
border-color: #000000; 
} 

.btn-custom .badge { 
color: #000000; 
background-color: #ffffff; 
}


.panel {
width: 530px;
}

.formreg {
width: 500px;
}

.mobileversion {
display: none;
}

@media screen and (max-width: 529px) {
  .panel  {
     width: 100%;
     overflow: hidden;
     margin: 0 -150px 0 -150px;
  }
  .formreg  {
     width: 100%;
     overflow: hidden;
     margin: 0 -150px 0 -150px;
     font-size: 12px;
  }
  #footer {
    display: none;
  }
  #navrow {
    font-size:10px;
    text-align: center;
  }

  .mobileversion {
    display: block;
 }
}

@media (min-width: 530px) and (max-width: 739px) {

  .panel  {
     width: 70%;
     overflow: hidden;
     margin: 0 -150px 0 -150px;
  }
  .formreg  {
     width: 70%;
     overflow: hidden;
     margin: 0 -150px 0 -150px;
  }

  #navrow {
    font-size:11px;
  }

   #footer {
    display: none;
  }
  .mobileversion {
    display: block;
 }

}

@media (min-width: 739px) and (max-width: 900px) {

  .panel  {
     width: 60%;
     overflow: hidden;
     margin: 0 -150px 0 -150px;
  }
  .formreg  {
     width: 60%;
     overflow: hidden;
     margin: 0 -150px 0 -150px;
  }


}