@font-face { font-family: 'jurnson';
             src: url('../fonts/jurnson-m.ttf') format('truetype'); }

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600');

.html
{
    width: 100%;
    height: 100%;

}

.start_preload { 
background-color: #efefef;
      width: 100%;
    height: 100%;
 
}

.start { 
  background: url(../img/Start_19zu9_clean.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
      width: 100%;
    height: 100%;
    margin:0px;
 
}
.uebermich { 
  background: url(../img/uebermich_16zu9_startimg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.us_kontakt { 
height:100%;
}
.us_impressum { 
height:100%;
}

.topnav {
width: 100%;
text-align: right;
padding-right:20px;
padding-top:10px;
margin:0px;
background: transparent;
}

.topnav ul {
list-style:none;  
    
}
.topnav li {
display: inline;
    
}
.topnav a {
font-family: 'Montserrat', sans-serif;
font-weight:350;
    color: #000;
    text-align: center;
    margin-top: 25px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 0.5px;
    margin-right:40px;
}
.topnav a:hover {
color:#000;
}

.logo  {
text-align: center;    
width:100%;
}

.logotitle {
margin-top:15px;
text-align: center;    
width:100%;
            font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight:400;
}
.claim {
    margin-top:5px;
    text-align: center;    
width:100%;
        font-family: 'Playfair Display', serif;
        font-style:italic;
        font-size:13px;

    
}

/* ÜBER MICH */

.us_uebermich_container {
    width:100%;
  align-items: center;
  justify-content: center; 
    
}
.us_uebermich_content {
    margin-top:20px;
           margin-left: auto;
  margin-right: auto;
  width:380px;

  padding:20px;
font-family: 'Montserrat', sans-serif;
font-weight:300;
      line-height:200%;
hyphens: auto; 
        text-align:justify; 
        font-size:16px;
}

#traudich {
font-family: 'Montserrat', sans-serif;
font-weight:600;
text-align:center;
 margin-top:10px;
 margin-bottom:15px;
}

/* TEXT */

.us_text_container  {
width:50%;
height:100vh;
float:left;

}
.us_text_content  {
background-color:rgba(255, 255, 255, 0.9);
    width:85%;
    height:auto;
    float:right;
   padding:30px;
font-family: 'Montserrat', sans-serif;
font-weight:300;
      line-height:180%;
hyphens: auto; 
        text-align:justify; 
        margin-top:15%;

}



.us_text_container_img  {
position:fixed;
right:0;
bottom:0;
width:100%;
height:100%;
  background: url(../img/text_bg.jpg) no-repeat right bottom fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
    margin:0px;
float:right;
z-index:-1;
  justify-content: center;

}


#content_txt {
width:85%;
font-size:16px;
padding-top:30px;

}

#icon_text_img {
margin-top:10px;
width:95%;
}


/* KONZEPTION */


.us_konzeption_content  {
background-color:rgba(255, 255, 255, 0.9);
    width:85%;
    height:auto;
    float:right;
   padding:30px;
font-family: 'Montserrat', sans-serif;
font-weight:300;
      line-height:180%;
hyphens: auto; 
        text-align:justify; 
        margin-top:8%;

}

.us_konzeption_container_img  {
position:fixed;
right:0;
bottom:0;
width:100%;
height:100%;
  background: url(../img/konzeption_bg.jpg) no-repeat right bottom fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
    margin:0px;
float:right;
z-index:-1;
  justify-content: center;
}

#content_konzeption {
width:85%;
font-size:16px;
padding-top:30px;

}

#icon_kontakt_img {
margin-top:10px;
margin-bottom:60px;
width:80%;
font-size:16px;
line-height:160%;   
}


/* KONTAKT */



.us_kontakt_container  {
width:50%;
float:left;
display:block;
}

.us_kontakt_content  {
width:85%;

    height:auto;
    float:right;
   padding:30px;
font-family: 'Montserrat', sans-serif;
font-weight:300;
      line-height:180%;
hyphens: auto; 
        text-align:justify; 
        margin-top:8%;
        
}

.us_kontakt_container_img  {
position:fixed;
right:0;
bottom:0;
width:100%;
height:100%;
  background: url(../img/kontakt_bg.jpg) no-repeat right bottom fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
    margin:0px;
z-index:-1;
  justify-content: center;
  }




.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px;background-color:#0066ff;}

.w3-animate-opacity{
    animation:opac 0.5s;
    }
    @keyframes opac{
        from{
            opacity:0.3
            }
             to{
                opacity:1
                }
                }
w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
/* Add a color to the active/current link */

video.bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
 
    background-size: cover; 
margin:0px;
padding:0px;

}

.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }




 #contact{
width:90%;
margin-left:-18px;
  }
  
  
   #thankyou{
width:90%;
margin-left:0px;
padding-top:30px;
color:#cc0066;
  }

  .contact-text{
    margin:45px auto;
  }

  .mail-message-area{
    width:100%;
    padding:0 15px;
  }

  .mail-message{
    width: 100%;
    background:rgba(255,255,255, 0.8) !important;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
    margin:0 auto;
    border-radius: 0;
  }

  .not-visible-message{
    height:0px;
    opacity: 0;
  }

  .visible-message{
    height:auto;
    opacity: 1;
    margin:25px auto 0;
  }

/* Input Styles */

  .form{
    width: 100%;
    padding: 10px;
    background:#f8f8f8;
    border:1px solid #f8f8f8;
    margin-bottom:25px;
    color:#333 !important;
    font-size:15px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }



  .textarea{
    height: 200px;
    max-height: 200px;
    max-width: 100%;
  }
  
/* Generic Button Styles */

  .button{
    padding:8px 12px;
    background:#0A5175;
    display: block;
    width:180px;
    margin:10px 0 0px 0;
    border-radius:3px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    text-align:center;
    font-size:0.8em;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

@media only screen and (max-width: 2000px) {
	.navbar-collapse {
		border-color: white;
		background-color: black;
	} 
}
 
  .button:hover{
    background:#8BC3A3;
    color:white;
  }

/* Send Button Styles */

  .form-btn{
    width:180px;
    display: block;
    height: auto;
    padding:15px;
    color:#fff;
    background:#333;
    border:none;
    border-radius:3px;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin:auto;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .form-btn:hover{
    background:#000;
    color: white;
    border:none;
  }

  .form-btn:active{
    opacity: 0.9;
  }
center{
  margin-top:330px;
}
input {
    position: relative;
    z-index: 9999;
}




.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #666;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#preloadOverlay {
   z-index:199;
   top: 0px;
   left: 0px;
   height:100%;
   width:100%;
   display:none;

      }
      

    @-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}
#spin{
 position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

#footer {
position: fixed; 
  left: 5px;
  bottom: 10px; 
    width: 100%;
    font-size:7pt;

    text-align:left;

    margin:0px;
  }

    #footer a {
	
 font-family: 'Montserrat', sans-serif;
font-weight:350;
    color: #000;
    text-decoration: none;	
	
}