body {
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

section#one div img {
    height: auto;
    width: 100%;
}

.logo img {
    width: 200px;
}

.flag-icon li a img {
    width: 30px;
}

section#login, section#logout {
    background-color: #f0f0ed;
    color: #08c;
}

section#two .card-body {
    background-color: #f0f0ed;
}

.box {
    background-color: #000000;
    width: 450px;
    height: 260px;
}
p {
    color: #6c6a6a;
}

p strong, h1, h2, h3, h4, h5, h6{
    color: #484848;
}

section#login h2, section#logout h2 {
    color: #024261;
}
section#login p, section#login label, section#logout p, section#logout label  {
    color: #024261;
}

.footer {
    border-top: 15px solid #f0f0f0;
}

#contact .info {
    padding-left: 7em;
}
#login input {
    background-color: #fffffc;
    border-color: #ccc;
    color: #024261;
}

.map iframe {
    width: 100%;
    height: 260px;
}

#submit.logout-btn {
    padding: 0.50em 2.5em;
}


#form .container-form {
    width: 45%;
    margin-left: 170px;
    padding-top: 60px;
    padding-bottom: 70px;

}

.form-group.required .control-label:after {
  content: " *";
  color: red;
  vertical-align: middle;
  display: inline-block;
  line-height: 0;
}

.btn-primary {
  color: #fff;
  background-color: #004364;
  border-color: #004364;
}

.btn-primary:hover {
  color: #fff;
  background-color: #155daa;
  border-color: #155daa;
}

#login .btn.btn-login, #form .btn.btn-send, #submit.logout-btn{
    color: #ffffff;
    background-color: #024261;
    border: none;
}

#login .btn.btn-login:hover, #form .btn.btn-send:hover, #submit.logout-btn:hover {
    background-color: #166f9b;
    color: #ffffff;
}

#login-form-btn {
  float: right;
}
#form .container-form {
    width: 60%;
    margin-left: 20%;
    padding-top: 60px;
    padding-bottom: 70px;
}

.alert.alert-success {
    background-color: #7ced5d;
}
.alert {
    line-height: 100px;
    font-size: 30px;
    font-weight: bold;
}

/*responsive*/

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

  #login-form-btn {
    margin-right: 34px;
  }

}


@media only screen and (min-width: 992px) and (max-width: 1199px){

  #login-form > div {
    width: 100%;
  }

  #login-form > div > input {
    width: 82%;
  }

}

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

  #login label {
    width: 60px;
    justify-content: left;
  }

  #login form .form-group.grp-email {
    margin-bottom: 1em;
  }

}


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

  #form .container-form {
    width: 60%;
  }

  #login-form > div {
    width: 100%;
  }

  #login-form > div > input {
    width: 75%;
  }

}

@media only screen and (min-width: 576px) and (max-width: 767px){
  #login-form > div {
    width: 100%;
  }

  #login-form > div > input {
    width: 81%;
  }
}

@media only screen and (min-width: 530px) and (max-width: 575px){
  #login-form-btn {
    margin-right: 1rem !important;
  }

}

@media only screen and (max-width: 530px){
  #login-form > div {
    width: 100%;
  }

  #login-form > div > input {
    width: 100%;
  }
  #login-form-btn {
    margin-right: 1rem !important;
  }

}

@media only screen and (max-width: 575px){
  #login form input.btn {
    margin-bottom: 1.1em;
  }
}

@media only screen and (max-width: 767px){
  #form .container-form {
    width: 100%;
    margin-left: 0;
  }
  #submit.logout-btn {
    margin-top: 10px;
  }

  #login form {
    margin-top: 1em;
  }
}

@media only screen and (max-width: 479px){
  #contact .col-md-6.info {
    padding-left: 15px;
  }

  #contact .row {
    padding: 0 !important;
  }

}

@media only screen and (min-width: 320px) and (max-width: 479px){

}