.one-em{
  /* for testing what is em */
  height: 1em;
  width: 1em;
  background-color: red;
}

* {
  box-sizing: border-box;
}

img:hover {  /* For all images brighter when hover */
  filter: brightness(1.4);
}

[class*="col-"] { /* This is for all columns */
  float: left;
  padding: 15px;
  display: table-cell;
  overflow: auto;
}
/* For for mobile phones only: */
[class*="col-"] {
  width: 100%;
}
.row {
}
.row::after {
  content: "";
  clear: both;
  display: table;
}

body {
  background-color: #ccffff;
}

/* CONTACT PAGE CSS: */
div#formContainer {
  clear:both;
  /* Background image specified in computeCssAddition */
  background-repeat: no-repeat;
  background-attachment: cover;
  background-size: 100% 100%;
}
.in-form-row {
  border-color: darkblue;
  border-style:double;
  border-width:thick;
  border-radius: 2em;
  z-index: 100;
  opacity: 80%;
  display: inline-block;
}
form.formForInputFields {   /* contains everytthing on left (center) side */
  display:inline-block;
  float:left;
  clear:both;
  overflow: hidden;
  margin: 0;
  margin-left: -15px;
  font-size: 14px;
  padding: 1.56em;
  position:absolute;
  color:white;
  text-shadow: 3px 4px 0px black;
  height: auto;
}
.form-row {}

.in-form-row{
  height: 700px;
}


/* -------------------------------------------------------------------------------- */
.heaven{
  padding-left: 0;
  }

img.siteLogo{}

div.headline1 {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  padding: 0;
  }
div.headline2 {
  text-align: center;
  font-size: 20px;
  font-weight: 550;
  padding: 0;
  padding-top: 7px;
  }
div.headline3 {
  text-align: center;
  font-size: 14px;
  font-weight: 550;
  padding: 0;
  padding-top: 5px;
  }
p {
  font-size: 14px;
  font-family: sans-serif;
  line-height: 2;
  text-align: justify;
  font-size: 18px;
}
p:first-of-type {
  margin-top: 0;
}
img.main-image{
  margin-right: 30px;
  margin-bottom: 30px;
  min-width: 300px;
  min-height: 300px;
  max-width: 100%;
  max-height: 450px;
  height:auto;
  float:left;
  object-fit:contain;
}

div.contactFormHeadline1{
  text-align: center;
  font-size: 1.7em;
  font-weight: 400;
  background-color: black;
  opacity: 80%;
}
div.contactFormHeadline2{
  text-align: center;
  font-size: 2.2em;
  font-weight: 650;
  background-color: black;
  opacity: 90%;
}
.containerTextboxFields{
  margin: 0; padding: 0;
}
div.contact_checkbox {
  font-size: 14px;
  text-align: left;
  margin-top: .375em;
  opacity: 75%;


  /* opacity: 50%; */
}
.contact_checkbox_label{
  opacity: 100%;
  color:#5cf311;
  color: white;
  color: #99F900;
  background-color: transparent;
    background-color: black;
  text-shadow: none;
  font-weight: 900;
  font-family: "Arial Black";
}
input[type="checkbox"]:checked + label.contact_checkbox_label {
  background-color: white;
  color: black;
}
label.contact_checkbox_label:hover {
  background-color: #99F900;
  color: black;
}
input[type="checkbox"]:checked:hover + label.contact_checkbox_label {
  background-color: black;
  color: white;
}


label.label_smaller{
  font-size: .8em;
  align-self: center;
  display: inline-block;
  padding-bottom: 0.1875em;
}



.formForInputFields input[type="text"],
.formForInputFields input[type="email"],
.formForInputFields input[type="tel"],
.formForInputFields input[type="submit"],
.formForInputFields textarea,
#emailasdg
/* ,div.error */
{
  width: 100%;
  height:2.5em;
  margin-top:.625em;
  font-size: 1em;
  background-color: white;
  border-color: darkgreen;
  border-color: green;
  border-style: solid;
  border-width: medium;
  border-radius: .3125em;
  opacity: 85%;
}

div.error{
  display: inline-block;
  text-shadow: none;
  /* height: 1em; */
  position: relative;
  top:-6px; left: 15px;
  color:red;
  background-color: yellow;
  opacity: 100%;
}
.formForInputFields input[type="text"]:focus,
.formForInputFields input[type="email"]:focus,
.formForInputFields input[type="tel"]:focus,
.formForInputFields input[type="submit"]:focus,
.formForInputFields textarea:focus
{
  /* opacity: 95%; */
}

.formForInputFields input[type="text"]:hover,
.formForInputFields input[type="email"]:hover,
.formForInputFields input[type="tel"]:hover,
.formForInputFields input[type="submit"]:hover,
.formForInputFields textarea:hover
{
  /* opacity: 95%; */

}
div.containerCheckboxFields {

}

div.containerCheckboxFields:focus-within{

  /* background-color: grey; */
  /* opacity: 85%; */
}

.formForInputFields input[type="submit"]{
  height: 3.75em;
  background-color: darkgreen;
  color:white;
  border-radius: 1em;
  margin-top: 1.5em;
  font-weight: 600;
  font-size: 1.25em;
  opacity: 90%%;
}
.formForInputFields input[type="checkbox"] {
  height: 1em;
  width: 1em;
  font-size: 1em;
  position:relative;
  top:0.125em;
}
textarea{
  min-height: 7em;
}

/* div.containerBottomPhoneAndMail */
div.contact-right {
  float: left;
  background-color: #b3ffff;
  display: table-cell;
  font-size: 24px;
  padding-top: 0px;
}

.contact_right-head{
  font-weight: bold;
  font-size: 1.45em;
  margin-top: 40px;
  margin-bottom: 10px;
}
.contact_right-info a, .contact_bottom-info a{  /* contact information about me, right side */
  /* color:black; */
  font-weight: 500;
  text-decoration: none;
  font-size: inherit;
}
div.containerBottomPhoneAndMail{
  /* display: flex;
  flex-direction: column; */
  /* font-weight: 800; */
  font-size: 26px;
  clear:both;
}




a#requestBottomOfPage {
  clear:both;
  float: none;
  display: block;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  font-weight: 600;
  background-color: #fc9d1d;
  color: #0c4ca4;
  color: green;
  font-size: 1.8em;
  font-size: 1.2em;
  font-size: 30px;
  font-weight: 600;
  max-width: 100%;
  width: 15em;
}
a#requestBottomOfPage:hover{
 background-color:#fc9d1d;
 color: #0c4ca4;
 text-align: center;
 font-weight: 700;
 color:#fc9d1d;
 background-color: #0c4ca4;

}

.ohnohoney,#email,#name,#label_email,#label_name{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -100;

    /* background-color: red; */
}

/* --------------------------------------------------------------------------------- */

@media only screen and (max-width: 500px) {
  /* Corrections for very tiny width */
  img.imgLogo{
    max-height: 100%;
    max-width: 100%;
  }
  .mainText{ }
  p {
    font-size: 14px;
    font-family: sans-serif;
    line-height: 1.8;
    text-align: justify;
    font-size: 16px;
    display: table;
  }
  img.main-image {
    width: 100%;
  }
  div.languages {
    display: none;
  }
}
/* The above setting are for all sizes especially for tiny */
@media only screen and (max-width: 599px) {
  /* Formatting only for tiny */
  .tinyHide {display: none;}
  .smallHide {display: none;}
  .tinyCenter,.smallCenter{text-align: center;}
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.30%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

  .smallHide {display: none;}
  .smallCenter{text-align: center;}
  .tinyCenter{text-align: left;}
  form.formForInputFields {
    width: 50%;
  }
}

@media only screen and (min-width: 768px) {     /* this is for desktop meaning (768px) and wider */

  .smallHide {display: table;}

  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  .smallHide {display: table;}
  .tinyCenter{text-align: left;}
  .smallCenter{text-align: left;}
  form.formForInputFields {
    width: 375px;
  }
  .mainText {
    padding-top: 40px;
    padding-right: 55px;
    padding-left: 55px;
  }
  body {  }
  img.main-image{
    min-width: 400px;
    min-height: 400px;
    max-width: 100%;
    max-height: 520px;
    height:auto;
    float:left;
    object-fit:contain;
}