*:focus {
      outline: none;
}
body {
      background-color: rgba(34, 41, 113, 1);
      font-family:'Muli',Helvetica,Arial,Lucida,sans-serif;
      margin: 0;
}
.container {
      margin:auto;
      padding: 10rem 0;
      max-width: 90%;
}
@media screen and (max-width: 700px) {
      h2 {
            font-size: 30px;
      }
}
h1, h2, h3 {
      font-weight: 300;
      margin-top: 0px;
      margin-bottom: 40px;
      color: #a36e1e;
}
h1 {
      font-size: 54px;
}
h2 {
      font-size: 42px;
      font-family: zektonbo;
      text-align: center;
}
h3 {
      font-size: 28px;
      color: #8D8273;
}
h4 {
      font-size: 20px;
      color: #8D8273;
      font-weight: 400;
      margin-bottom: 0;
}
p {
      margin: 20px 0;
      line-height: 24px;
}
img {
      margin: 20px 0;
      width: 100%;
}
button {
      outline: none;
      border: none;
      margin: 18px 0;
      padding: 20px 40px;
      letter-spacing: 2px;
      font-weight: 800;
      text-transform: uppercase;
}
i {
      font-size: 42px;
      letter-spacing: 14px;
}

/* Navigation */

@font-face{
      font-family: "zektonbo";
      src: url("../font/zektonbo.ttf");
}
nav {
      font-family: "zektonbo";
      height: 90px;
      width: 100%;
      background-color: rgba(34, 41, 113, 1);
      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30), 0 2px 10px 0 rgba(0,0,0,0.16);
      position: fixed;
      z-index: 999;
}
nav ul {
      padding: 15px;
      margin: 0;
}
nav li {
      display: inline;
      color: white;
}
nav a {
      font-family: zektonbo;
      display: inline-block;
      width: auto;
      font-weight: bolder;
      text-align: center;
      text-decoration: none;
      padding: 20px;
      color: #a36e1e;;
      transition: 1s;
}
nav a:hover {
      color: #6C6C6C;
}
nav a#toggle-btn {
      display: none;
}
.logo {
      float: left;
}
.logo img {
      margin: 10px;
      width: 70%;
}
.logo a {
      padding: 0;
      text-align: left;

}
/*Language switch*/

.languageFrameSelect {
      float: right;
      padding: 1%;
}
.languageFrameSelect select {
      background-color: transparent;
      color: #a36e1e;
      border: none;
      font-weight: bolder;
      font-family: zektonbo;
      cursor: pointer;
}
@media screen and (max-width: 1050px) {
      nav {
            height: auto;
            border-bottom: 0;
      }
      nav ul {
            display: none;
            height: auto;
      }

      nav li {
            width: 100%;
            float: left;
            position: relative;
      }

      nav a {
            text-align: center;
            width: 100%;
            text-indent: 25px;
            color: #a36e1e;
            padding: 20px 0;
      }

      .languageli a {
            width: 100%;
            text-indent: 25px;
            color: black;
            padding: 20px;
      }

      nav a:hover {
            color: #6C6C6C;
      }
      nav a#toggle-btn:after {
            content: "|||";
            transform: rotate(-90deg);
            width: 40px;
            height: 40px;
            display: inline-block;
            position: absolute;
            right: 5px;
            top: 40px;
      }
      nav a#toggle-btn {
            display: block;
            color: white;
            width: 100%;
            position: relative;
      }
      .menu:before, .menu:after {
            content: "";
            display: table;
      }

      .menu:after {
            clear: both;
      }

      .menu {
            zoom: 1;

      }
}
/* Navigation end */

/* Home section */

#home .container {
      padding: unset;
      height: 100vh;
}
#home .brick {
      padding: 0;
      margin: 0;
}
#home .block {
      display: flex;
      width: 100%;
}
#home .left {
      flex-shrink: 0; /* shrinks to 0 to apply 70% width*/
      flex-basis: 50%; /* sets initial width to 70%*/
      margin-top: 20vh;
      width: 50%;
      height: 72vh;
      background: url(/images/backgroundhome.jpg);
      background-repeat: no-repeat;
      background-size: cover;
}
#home .home-text {
      margin-top: 30%;
}
#home .right {
      text-align: center;
      margin-top: 20vh;
      width: 50%;
      background-color: rgba(34, 41, 113, 1);
      height: 72vh;
}
#home .right h1, p {
            color: #a36e1e;
}
#home .right p {
            margin: 0 15%;
}
@media only screen and (max-width: 900px) {
  #home .block {
      padding-bottom: 10rem;
      flex-direction: column;
  }
  #home .right {
      margin-top: unset;
      width: unset;
      height: unset;
  }
  #home .left {
      flex-basis: unset;
      width: unset;
      height: 30vh;
  }
  #home {
      height: unset;
  }
  #home .container {
      height: unset;
  }
}
/* Home section end */

/* Services section */
#services  .container {
      height: 90vh;
      background-color: RGBA(103,103,103,0.6);
}
#services h2 {
      color: white;
}

#services h3 {
      color: black;
      text-align: center;
}
#services p {
      clear: both;
      text-align: center;
      font-weight: bold;
      color: black;
      margin: 50px 0;
}
#services .service-secretary {
      background: rgba(255, 0, 0, 0.2);
      padding: 40px;

}
#services .service-secretary h3 {
      text-align: left;
}
#services .service-secretary p {
      text-align: justify;
}
.service secretary {
      width: 17%;
      background: rgba(80, 211, 141, 0.3);
      padding: 40px;

}
.service secretary img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: -120px;
      width: 175px;
      height: 175px;
      border: 6px solid #aeaeae;
      border-radius: 50%;
      margin-bottom: 10px;
      -webkit-background-size: cover;
}
.header-text {
      margin: 20px 0; 
      font-size: 24px;
      font-weight: 500;
      line-height: 48px;
}
#services section {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
}
.service-list {
      margin-top: 25%;

}
.service {
      width: 21%;
      background: white;
}
.service img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: -120px;
      height: 175px;
      margin-bottom: 10px;
      box-shadow: 8px 0px 10px 0px rgb(0 0 0 / 50%);
      -webkit-background-size: cover;
}
.secretary {
      background: white;
}
.document {
      background: white;  
}
.finance {
      background: white;
}
@media screen and (max-width: 700px) {
      #services h2{
            padding-top: 30px;
            font-size: 35px;
      }
      #services  .container {
            height: auto;
            padding: 4rem 0;
}
      #services {
            height: auto;
      }
      #services .service {
        width: 75%;
      }
      .service img {
            margin-top: 0px;
      }
      #services .administration {
        margin-top: inherit;
      }
      #services .finance {
        margin-top: inherit;
        margin-bottom: 40px;
      }
      #services .document {
        margin-top: inherit;
      }
}
@media screen and (min-width: 700px) and (max-width: 1050px) {
      #services .service {
        width: 33%;
      }
      .service img {
            margin-top: 0px;
      }
      #services .finance {
        margin-top: inherit;
      }
      #services.document {
        margin-top: inherit;
      }
}

/* Services section end */

/* References section */
#references  {
}
#references h2 {
}
#references .row {
      margin-top: 15%;
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  /*padding: 0 4px;*/
}

/* Create four equal columns that sits next to each other */
#references .column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  /*max-width: 25%;*/
  padding: 0 4px;
}

#references .column img {
  margin: 5px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
      #references .column img {
      margin: 5px 0;
}
  #references .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  #references .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.wrapper {
      margin-top: 10%;
}
.row {
  display: flex;
  flex-direction: row;
  min-height: 100px;
  }
.content p {
      color: #a36e1e;
      text-align: left;
}
p.name {
      text-align: right;
}
 .content {
    height: 100%;
    padding: 5px;
}
  
 .column1 {
    flex-basis: 40%;
}
  .content {
      
    }
} 
    
 .column2 {
    flex-basis: 60%;
}


/* References section end */

/* About section */

#about {
}
#about p {
      text-align: justify;
      color: #a36e1e;
      margin: 130px 15px;
}
#about .flex-container {
      margin-top: 10%;
            display: flex;
            /*flex-direction: row;*/
              width: 100%;
        }
#about .flex-img {
      text-align: center;
      margin: 40px 0;
      flex-shrink: 0;
            flex-basis: 30%;
            /*width: 50%;*/
            /*background: url(/images/udvardi.jpeg);*/
            background-repeat: no-repeat;
        }
#about img {
      width: unset;
}
#about .flex-text {
            text-align: justify;
            height: 72vh;
}
@media only screen and (max-width: 900px) {
      #about p {
      /*padding: unset;*/
      margin: 8%;
}
  #about .flex-container {
      padding-bottom: 30px;
    flex-direction: column;
  }
  #about .flex-img {
      /*margin-top: unset;*/
      width: unset;
      height: unset;
  }
  #about .flex-text {
      flex-basis: unset;
      width: unset;
      height: auto;
  }
}

/* About section end */


/* Contact section */

#contact {
}
#contact .section {
}
#contact h2 {
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: 0px;
      margin-bottom: 1em;
      font-size: 35px;
}
#contact p {
      text-align: justify;
      color: #a36e1e;
}
#contact a {
      text-decoration: none;
}
#contact span {
      margin: 20px 0;
      color: #a36e1e;
      line-height: 24px;
      text-decoration: none;
}
.material-icons {
      margin: 0 30px 10px 0;
      color: #a36e1e;
}

@media screen and (min-width: 700px) {
      #contact {
                  /*height: 80vh;*/
      }
      #contact h2 {
                  letter-spacing: 7px;
      }
      #contact input {
            /*width: 300px;*/
      }
      #contact textarea {
        /*width: 300px;*/
      }

}
@media screen and (min-width: 1050px) {
      #contact .section {
                  display: flex;
                  padding-bottom: 2em;
            }
      #contact .contact-content {
                  margin-top: 90px;
                  flex: 0 0 50%;
            }
      #contact .emailform {
                  flex: 0 0 50%;
                  padding-left: 10em;
                  padding-top: 1em;
            }
      #contact h2 {
                  text-transform: uppercase;
                  font-weight: 800;
                  letter-spacing: 7px;
                  margin-bottom: 1em;
                  font-size: 42px;
            }
      button.send-btn {
                  float: right;
            }
}

/* Email form */

.emailform {
      margin-top: 5em;
}
.group { 
  position: relative; 
  margin-bottom: 25px; 
}
.emailform a {
  color: #a36e1e;
}
input {
  font-size: 15px;
  height: 25px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  border-bottom: 1px solid #a36e1e;
  color: #a36e1e;
  background: rgba(0,0,0,0);
  opacity: 0.5;
  transition: 0.2s ease;
}
input:focus {
  outline: none;
  opacity: 1;
}
textarea {
  font-size: 15px;
  height: 80px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  border-bottom: 1px solid #a36e1e;
  color: #a36e1e;
  background: rgba(0,0,0,0);
  opacity: 0.5;
  transition: 0.2s ease;
}
textarea:focus {
  outline: none;
  opacity: 1;
}
label {
      color: #a36e1e;
  font-size: 15px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 15px;
  /*opacity: 0.5;*/
  transition: 0.2s ease all; 
  -moz-transition: 0.2s ease all; 
  -webkit-transition: 0.2s ease all;
}

/* active state */

input:focus ~ label, input:valid ~ label        {
  top: -10px;
  font-size: 15px;
  color: #a36e1e;
  opacity: 1;
}
textarea:focus ~ label, textarea:valid ~ label        {
  top: -10px;
  font-size: 15px;
  color: #a36e1e;
  opacity: 1;
}
.highlight {
  position: absolute;
  height: 60%; 
  width: 100px; 
  top: 25%; 
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */

input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}
textarea:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */

@-webkit-keyframes inputHighlighter {
  from { background: #a36e1e; }
  to  { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background: #a36e1e; }
  to  { width:0; background:transparent; }
}
@keyframes inputHighlighter {
  from { background: #a36e1e; }
  to  { width:0; background:transparent; }
}
.checkbox {
  /*width: 310px;*/
}
.checkbox input {
    width: 15px !important;
    float: left;
    height: 13px;
    margin-right: 10px;
}
button.send-btn {
  /*float: right;*/
  color: #8D8273;
  transition: 0.2s ease;
}
button.send-btn:hover {
  cursor: pointer;
}
.success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.facebook {
  /*margin-top: 30px;*/
}

/* Email form end */

/* Contact section end */

/* Impressum page*/

.impressum-content {
      padding: 8rem 0 8rem;
}
#impressum h2 {
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: 7px;
      margin-bottom: 1em;
}
@media screen and (max-width: 1050px) {
      #impressum h2 {
                  text-transform: uppercase;
                  font-weight: 800;
                  letter-spacing: 0px;
                  font-size: 35px;
                  text-align: left;
                  }
      #impressum .container {
                  padding-bottom: 2em;
                  }
}

/* Impressum page end*/

/* Datenschutz page*/
.datenschutz li {
      margin: 5px 50px;
      color: #8D8273;
}
.datenschutz-content {
      padding: 8rem 0 8rem;
}
#datenschutz h2 {
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: 7px;
      margin-bottom: 1em;
}
@media screen and (max-width: 1050px) {
      #datenschutz h2 {
                  text-transform: uppercase;
                  font-weight: 800;
                  letter-spacing: 0px;
                  font-size: 35px;
                  text-align: left;
                  }
      #datenschutz .container {
                  padding-bottom: 2em;
                  }
}

/* Datenschutz page end*/

/* Footer section */

footer {
      background-color: black;
      color: white;
      text-align: center;
      padding: 60px;
}
a.footerlink {
      color: #a36e1e;
      font-weight: 600;
      text-decoration: none;
      margin: 15px;
}
p.footerlink {
  font-weight: 600;
}

/* Footer section end */

/* Cookie bar */

#cookie-bar {
  background-color: red;
}