* { margin: 0; padding: 0;box-sizing: border-box }
html { overflow-y: scroll;}
body { background-image: linear-gradient(42deg,#2e3644, #000, #262c37); font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ul{ margin:1%;}
ol, ul { list-style: none; margin: 5px;}
ul li { margin: 5px; padding: 5px;}
h1 { margin-bottom: 10px; color: #444444;}
a, img {}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}

.aside { font-style: italic; font-size: 0.9em; color: rgba(255, 255, 255, 0.95)
}
div{

}
h2,h3,h1{
    margin-bottom: 0;
    margin-top: 35px;

}
h1{
    margin:1%;
    text-align: center;
    padding: 1.75%;
}
li{
    margin-left: 2px;
}
h3{
    color: rgba(255, 255, 255, 0.8);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(0, 60, 111, 0.98);
    padding: 1.65%;
    margin-bottom:0.6em;
    font-size: 1.675em;
}
h2{
    color: rgba(0, 60, 111, 0.98);
    color: rgba(238, 243, 255, 0.99);
    -webkit-text-fill-color: rgba(238, 243, 255, 0.99) !important;
    padding: 1.75%;
    font-weight: bold;
    font-size: 3em;

}

p{
	font-size: 1.4em;
}
.map{
	width:50%;
	height:10px;
	background-color: #888888;
}
.navi-div{
    width:96%;
    background-color: #eff6ff;
    float:left;

    margin-inside: auto;
    /*border-radius: 0.5em;*/
   
   
    margin-left:2%;
    border: solid 1px #c6c6c6 ;

    max-width: 1200px;

    margin-right: 2%;
    box-shadow: 2px 4px 8px #9a9a9a;


}
.header-div{
    float:left;
    /*margin-top: 2em;*/
}
.nav2{
    width:94%;
    float:left;
    background-color:#eff9ff;
    /*border-radius: 0.5em;*/
    margin:1%;
    margin-left:2%;
    margin-inside: auto;


}
.navigation{
    float:left;
    margin:1%;
    margin-inside: auto;
    margin-left:2%;


}

.h-1{
    font-size: 4em;
    color:#00669e;
    font-family:Palatino Linotype,Swiss, Futura,sans-serif;
}

.logo-div{

    float:left;
    width: 9%;
    margin-left:2%;
    font-size: 0.9em;
    text-align: center;
    font-family:  Helvetica, Swiss, Futura, sans-serif;
    color: #0b224f;
}
.wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0% auto;
	background-color: #00000000;
	/*border-radius: 0.5em;*/
	/*box-shadow: 0px -4px 0 0 #a1cfef;*/
}


.footer{
    width:96%;
       background-color: #eff6ff;
    background: rgba(253, 251, 255, 0.62);
    box-shadow: 0px -4px 7px 0 #e6e6e6;
       margin-inside: auto;
       /*border-radius: 0.5em;*/


    max-width: 1200px;
    margin: 0% 2% 0 2%;
    position: sticky;
    float: left;
    bottom: 0;
    border: solid 1px #c6c6c62e;
}

.telfield{
    float:right;
    font-style: oblique;
    margin-top:5px;
    margin-bottom:1%;

    margin-left:20px;
    box-shadow: 2px 4px 8px #9a9a9a;
    background-color: #f2edec;
    padding:0.4em;
    border-radius: 4px;
    -webkit-opacity: 1.0 !important;
    color: rgba(0, 0, 0, 0.92) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.89) !important;
    /*margin:auto;*/
    margin-top: 7px;
    margin-right: 11px;
    font-size: 1.4em;
    background-image: linear-gradient(42deg, #eaf0ff, #b8becc, #eaf0ff);
}

.float-left{
    float: left;
}

.main{
    color:#fffffff7;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.93);
    /*color: #ffffff;*/
    width:62%;
    float:left;
    /*margin-left:5px;*/
    /*margin-right:5px;*/
    /*margin-top:5px;*/
    padding:1.75%;
    background-color: #4f93cf;
    /*border-radius: 0.3em;*/



}
.aside {
	float: right;
    width:38%;
    padding:1.75%;
    background-color: #00669e;
    height:100%;
    /*margin-left:5px;*/
    /*margin-right:5px;*/
    /*margin-top:5px;*/
    /*border-radius: 0.3em;*/
   

		}
img {
    margin-inside: auto;
    display: block;
    width: 100%;
   
    


}
.logo{
    width:100%;
    /*float:left;*/
    margin:auto;

}
a{
    text-decoration: none;
    color: #eaf0ff;
    font-size: 1.1em;
}
.button-link{
    padding: 0.2em;
    margin: 0.3em;

    border: solid 1px white ;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: #00669e;
    box-shadow: 3px 8px 10px #888888;

    /*background-image: linear-gradient(42deg, #0b224f, #003e5a, #0b224f);*/



}
#menu  a{
    font-size: 0.9em;
    padding:0.15em;
    margin-left:0.9em;
}
.button-link:hover{

    background-image: linear-gradient(42deg, #00669e, #003c6f);
    box-shadow: 2px 8px 10px rgb(73, 36, 3);
    color: #eaf0ff;

}
.special-button-link{
    background-image: linear-gradient(42deg,#43526c, #278dce, #43526c);
    text-transform: uppercase;
    padding:0.6em;
    margin-left:1.8em;
    margin-right: auto;
    margin-top:auto;
    margin-bottom: auto;

    border: solid 1px white ;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 4px;
    font-size: 1.0em;

    font-weight: bolder;
    box-shadow: 5px 4px 8px #9a9a9a;


}
.special-button-link:hover{

    background-image: linear-gradient(42deg, #1f66c9, #285187);
    box-shadow: 5px 4px 8px rgb(73, 36, 3);

}
.contactform{
    box-shadow: 2px 4px 8px #9a9a9a;
    background-color: #fcfcfc;
    padding:1em;
    border-radius: 1px;


}
.submit{
    background-color: #0f91a6;
    background-image: linear-gradient(42deg, #0b224f, #2196c5, #0b224f);
    color:white;
    margin:0.5em;
    padding:0.75em;
    box-shadow: 2px 4px 8px #888888;
    border-radius: 1px;
}
.submit:hover{
    transition: all 1s ease-in;
       background-image: linear-gradient(42deg, #1f66c9, #0b2687);
       box-shadow: 5px 10px 10px rgb(73, 36, 3);
}

textarea{
    overflow: auto;
    width:28%;


}
.img-big{
    float:left;
    width:50%;
    /*border-radius: 0.5em;*/
}
.pics{
    width:96%;
    margin-inside: auto;


    margin-left:2%;


    max-width: 1200px;

    margin-right: 2%;
}
.clearfix{
    clear: both;
}

.content{
    border: solid 1px #c6c6c6 ;
    /*border-radius: 0.5em;*/
    background-color: #4f93cf;
    float:left;
    width:96%;
    margin-inside: auto;

  
    margin-left:2%;


    max-width: 1200px;

    margin-right: 2%;
    box-shadow: 2px 4px 8px #9a9a9a;
    margin-top:20px;
}
.half-div{
    width:47%;
    text-align: center;
}
li .baufilead_zinstableau div
{
color: rgba(0, 0, 0, 0.89);
-webkit-text-fill-color: rgba(0, 0, 0, 0.89) !important;

}
/**********************************************************************/

.burgerc{
    display: none;


}

#menuToggle
{

  display: block;
  position: relative;
  top: 111px;




  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
    margin-left:85%;

  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
    margin-left:85%;
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #cdcdcd;
  border-radius: 1px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{

  position: absolute;
  width: 310px;
  margin: -90px 0 0 -60px;
  padding: 50px;
  padding-top: 125px;
    box-shadow: 2px 4px 8px #9a9a9a;

  background: rgba(253, 251, 255, 0.57);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
    border-radius: 1px;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.56s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding-bottom:  0.45em;
  font-size: 1.3em;

}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}
@media screen and (max-width: 944px) {
    .special-button-link {
        padding: 0.45em;
        margin-bottom: 0.5em;
        font-size: 0.9em;


    }

}

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

    .telfield {
        padding: 0.5em;

        /*margin: 0;*/
        margin-top: 1em;
        font-size: 0.9em;



    }

    .special-button-link {
        padding: 0.5em;
        margin-bottom: 0.5em;
        font-size: 0.9em;


    }

    .button-link {
        padding: 0.3em;
        font-size: 0.9em;
        margin: 0;
    }
    ul li { margin: 3px; padding: 4px;}
}

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

   p,img,  .main,.aside {

    		margin: 0 0 10px;
    		width: 100%;
    		}
    .logo-div{

    }
   .pics{

   }
   .pics .img-big{


   }
   .telfield{
     float: right;
   }
    .float-left{

    }
    .special-button-link{
        padding:0.3em;
        margin-bottom: 1.5em;
        font-size: 0.9em;

}
    nav{
        margin-left:9%;
        margin-top:2%;
    }
    .footer{
        display: none;
      }
    .burgerc{
        display: block;
        }
}



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

    p, li, .main,.img-big,.aside {

        margin: 0 0 10px;
        width: 100%;
    }
    .float-left{
        clear: both;
        margin-top:3px;
    }
    nav{
        margin-left:5%;
        margin-top:2%;
    }

    .logo-div{
        width: 9%;
    }
    .footer{
        display: none;
      }
    .burgerc{
        display: block;
        }
    .telfield{


    }
    .half-div{
        width: 96%;

    }

}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {

    p,img,  .main,.aside {

        margin: 0 0 10px;
        width: 100%;
    }
    .logo-div{
        width: 46%;
        font-size: 1.3em;
        font-weight: bold;
        margin-left:27%;
        margin-right: 27%;
    }

    .float-left{
        clear: both;
    }
    .special-button-link{
        /*margin-left:auto;*/
        margin-right: auto;
        font-size: 1.0em;
    }
    .telfield{

    }
    .logo,.logo-div,nav{
        /*float: left;*/
        margin-top:3px;

    }
    nav{
        margin-left:20%;
        margin-top:0;
    }
    .footer{
        display: none;
    }
    .burgerc{
        display: block;
    }
}
@media only screen
and (max-device-width : 420px)
 {

    p,img,  .main,.aside {

        margin: 0 0 10px;
        width: 100%;
    }
    .logo-div{
        width: 46%;
        font-size: 1.2em;
        font-weight: bold;
        margin-left:27%;
        margin-right: 27%;
    }

    .float-left{
        clear: both;
    }
    .special-button-link{
        margin-left:4px;
        margin-right: auto;
        font-size: 1.0em;
    }
    .telfield{

    }
    .logo,.logo-div,nav{
        /*float: left;*/
        margin-top:3px;

    }
    nav{
        margin-left:20%;
        margin-top:0;
    }
    .footer{
        display: none;
    }
    .burgerc{
        display: block;
    }

}
.ce-google-maps {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 1x1 */
}

.ce-google-maps > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.ce-google-maps .gmap-opt-in-wrap {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(GoogleMaps_1x1.jpg);
}
.gmap-opt-in-button div{

    color: #000000f7;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.93) !important;
    /* color: #ffffff;
}

@media screen and (min-width:481px) {
    .ce-google-maps {
        padding-bottom: 66.6666%; /* 3x2*/
    }
    .ce-google-maps .gmap-opt-in-wrap {
        background-image: url(GoogleMaps_3x2.jpg);
    }
}

@media screen and (min-width:769px) {
    .ce-google-maps {
        padding-bottom: 56.25%; /* 16x9*/
    }
    .ce-google-maps .gmap-opt-in-wrap {
        background-image: url(GoogleMaps_16x9.jpg);
    }
}

@media screen and (min-width:1280px) {
    .ce-google-maps {
        padding-bottom: 42.8571%; /* 21x9*/
    }
    .ce-google-maps .gmap-opt-in-wrap {
        background-image: url(GoogleMaps_21x9.jpg);
    }
}

.ce-google-maps .gmap-opt-in-button-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.3);
}

.ce-google-maps .gmap-opt-in-button {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    cursor: pointer;
    width: 80%;
    max-width: 20em;
    color: rgb(20%,20%,20%);
    background-color: rgba(255,255,255,0.9);
    padding: 0.5em;
    /*border-radius: 0.5em;*/
}

.ce-google-maps .gmap-opt-in-button div:first-child {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
}

.ce-google-maps .gmap-opt-in-button div:last-child {
    font-size: 80%;
    line-height: 1.3;
}