@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Roboto+Slab|Roboto:400,700&display=swap');

html, body { height:100%; margin:0; padding:0;}

body { /*display: table;*/ width: 100%;}

.group:before,
.group:after {
  content: "";
  display: table;
} 
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.bR {border:1px solid red;}
.shadowBox {box-shadow: 1px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

#container { width:100%; z-index:-1; }

.loginHeader {
    width:100%;
    height:8em;
    background-color: #1C9038; /*#1C9038;  0A6535;*/
}

.loginHeaderTitle {
    display:block;
    float:left;
    margin-left:5%;
    margin-top: 0.5em;
    color:white;
    font-size:3em;
    font-family: 'Bree Serif', serif;
}

.loginHeaderLogo {
    display:inline-block;
    width:auto;
    float:right;
    margin-right:5%;
    margin-top:10px;
}

.loginHeaderLogo img {
    display:block;
    width:100px;
    border-radius:5px;
}

.loginContent {
  width:80%;
  height:auto;
  margin:1em auto;
  overflow: auto;
}

.lcImage {
  display: block;
  float:left;
  width:50%;
  padding:1em;
}

.lcImage img {
 
  margin:2em auto;
  max-width:100%;
  height:auto;
  border-radius:5px;
}

.lcLogin {
  display: block;
  float:right;
  width:40%;
  padding:2em;
}

.loginBox {
  width:95%;
  margin:0px auto;
  border:1px solid lightgray;
  border-radius:5px;
}

.loginTable{
    border-collapse:separate;
    border-spacing: 5px;
    margin: auto;
    color: #ffffff;
    margin-top:2em;
}


.loginFooter {
  position: absolute;   /* absolute */
  width:100%;
  bottom:0px;
  left:0px;
  height:15vh;
  background-color: #1C9038; /*#1C9038;   0A6535;*/
}

.loginFooter span {
  display:block;
  width:90%;
  margin:0px auto;
  color:white;
  text-decoration:none;
  font-size:1.1em;
  padding-top:2em;
  text-align:left;

}

.loginFooter .social {
  float:right;
}

.loginFooter span a {color:white;}

.loginIP {font-size:0.8em; display:block; margin:0px auto; margin-top:0.7em; text-align:center; width:95%;}
.loginIP b { color:CadetBlue;}
.loginIP, .loginIP span { color:gray;}
.loginIP span:hover {cursor:pointer; text-decoration: underline; color:#5E5E5E;}

 /*==================================================
 * Sirka okna do 1010px
 *==================================================
*/
@media only screen and (max-width: 1010px) {
  .lcLogin { width:45%;}
}

 /*==================================================
 * Sirka okna do 950px
 *==================================================
*/
@media only screen and (max-width: 950px) {
  
  .loginContent { width:95%;}
  .lcLogin { width:45%;}
}

 /*==================================================
 * Sirka okna do 700px
 *==================================================
*/
@media only screen and (max-width: 700px) {
  .lcImage {width:45%;}
  .lcLogin img {margin-top:5%;}
  .lcLogin { width:55%;}
}

 /*==================================================
 * Sirka okna do 450px
 *==================================================
*/
@media only screen and (max-width: 450px) {
  
  .loginHeaderTitle {
    font-size:2.5em;
    margin-top:0.7em;
    margin-left:6%;
  }
  .loginFooter span {font-size:1.2em; text-align:center;   height:4vh;}
  .lcImage {display: none;}
  .lcLogin, .loginBox {display:block; width:100%;margin:0px auto;}
}

/*
 *==================================================
 * Sirka okna do 400px
 *==================================================
*/
@media only screen and (max-width: 400px) {
  .loginHeaderTitle {
    font-size:2.1em;
    margin-top:1.2em;
  }
  .loginFooter {height:4em;}
  .loginFooter span {font-size:1em; }
  .lcLogin {padding: 15px;}
}

/*
 *==================================================
 * Sirka okna do 330px
 *==================================================
*/

@media only screen and (max-width: 360px) {
  
  .loginHeaderTitle {
    font-size:1.8em;
    margin-top:0em;
  }
}




.form-control:focus {
    /*border-color:green;*/
    -webkit-box-shadow: none;
    box-shadow: none;
}