* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}


html { height: 100%;}


ul.mainnavigation { margin: 50px 0px; padding: 0px; text-align: left; width: 500px;}
ul.mainnavigation li { display: inline; margin: 0px; padding: 0px; font-size: 18px; margin-left: 55px; height: 100px}
ul.mainnavigation li a { color: #666666; }
ul.mainnavigation li a:hover, ul.mainnavigation li a:active, ul.mainnavigation li a.active { color: #000000; text-decoration: none; font-weight: bold;}




body { font-family: "Oxygen", sans-serif; 
       font-size: 19px; 
       display:inline-block;
/*       display: flex;*/
       -ms-transition: background 3.8s ease 0s;
       -moz-transition: background 3.8s ease 0s;
       -o-transition: background 3.8s ease 0s;
       -webkit-transition: background 3.8s ease 0s;
       transition: background 3.8s ease 0s; 
       justify-content: center;
	align-items: center;
	flex-direction: row;
	height: 100vh;
	margin: 0;
}

/*.content { margin-top: 130px; }*/

.hidden { display: none; }

body { font-family: "Oxygen", sans-serif; font-size: 19px; color: #333333; display:grid;}

h1, h2, h3, h4, h5 { font-family: "Oxygen", sans-serif; }

h1 { color: #193B95; font-weight: 600; }

h2 { font-weight: 300; font-size: 28px; border-bottom: 1px solid #333333; padding-bottom: 10px; margin-bottom: 24px; }
h2.highlight { color: #193B95; border-bottom: none; margin-bottom: 12px; padding-bottom: 0px; }

h3 { color: #3c3c3c; font-size: 28px; font-weight: 400; }
h3.gray { clear: both; margin-top: 50px; font-size: 25px; font-weight: 600; color: #333333; border-bottom: 1px solid #ababab; padding-bottom: 8px; margin-bottom: 22px; }

a { color: #193B95; outline: none; }
a.small { font-size: 0.7em; cursor: pointer; }
a.small:hover { text-decoration: none; }

a:focus { outline: none; text-decoration: none; }

:focus { outline: none; text-decoration: none; }

::-moz-focus-inner { border: 0; }

h1, h4 { color: #193B95; font-weight: 600; }

h2 { font-weight: 300; font-size: 28px; border-bottom: 1px solid #333333; padding-bottom: 10px; margin-bottom: 24px; }
h2.highlight { color: #193B95; border-bottom: none; margin-bottom: 12px; padding-bottom: 0px; }

p { color: #193B95; font-weight: 600; }

body.splash {
  background: #404040;
}

body.normal {
 background: white; 
}

.container { max-width: none !important;text-align: center; width: 936px;}

.fullwidth-container.fullwidth-container-gray { background-color: #f5f5f5; }

#splash {
    position:relative;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    background-color:white;
}



#maincontent  {
 display: none; 
}

.word {
/*        font-family: 'Roboto Condensed', sans-serif; */
/*         font-family: 'Poppins', sans-serif;  */
/*         font-family: 'Arimo', sans-serif; */
/*         font-family: 'Muli', sans-serif; */
/*         font-family: 'Fira Sans', sans-serif; */
/*         font-family: 'Nunito', sans-serif; */
/*         font-family: 'Nunito', sans-serif; */
         font-family: 'Oxygen', sans-serif; 
	perspective: 1000px; 
	perspective-origin: 200px 140px;  
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 8vw;
	user-select: none;
	line-height: .8;
        color: #404040;
}

#letter_1 {
        animation: toplong 0.5s linear;
        animation-fill-mode: both;
        animation-delay: 0.15s;
}

#letter_2 {
        animation: toplong 0.5s linear;
        animation-fill-mode: both;
        animation-delay: 1.15s;
}

#letter_3 {
        animation: toplong 0.5s linear;
        animation-fill-mode: both;
        animation-delay: 2.15s;
}

#letter_4 {
        animation: toplong 0.5s linear;
        animation-fill-mode: both;
        animation-delay: 3.15s;
}

#letter_5 {
        animation: toplong 0.5s linear;
        animation-fill-mode: both;
        animation-delay: 4.15s;
}

#letter_7 {
        color: 	#404040;
}

.word span:nth-child(1).active {
        animation: toplong 1.5s linear;
        animation-fill-mode: both;
}

@keyframes body_fade_out {
	0% {
            opacity: 1;
	}
        
        25% {
            opacity: 0.75;
	}
        
        50% {
            opacity: 0.5;
	}
        
        75% {
            opacity: 0.25;
	}
	
	100% {
            opacity: 0;
	}  

}

@keyframes toplong {
	0% {
            color:gainsboro; 
            transform: translateY(-60vh);
	}
	
	100% {
            color:gainsboro; 
            transform: translateY(-5vh);
	}  

}

@keyframes totheleft {
	0% {
            color:gainsboro; 
            transform: translateY(-5vh);
	} 
	
	100% {
            color:gainsboro; 
            transform: translateX(-4.5vw) translateY(-5vh);
	} 
}

@keyframes totheright {
	0% {
            color:gainsboro; 
            transform: translateX(-3vw) translateY(-5vh);
	} 
	
	100% {
            color:gainsboro; 
            transform: translateX(-1.6vw) translateY(-5vh);
	} 
}

@keyframes word {
	0% {
            color:gainsboro; 
	} 
	
	100% { 
            text-shadow: #333333 5px 5px 2px, #666666 4px 4px 2px, #999999 3px 3px 2px, #cccccc 2px 2px 2px, #ffffff 1px 1px 2px;
	} 
}

/* Other styles */


.fixed {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	letter-spacing: 1px;
        opacity: 0;
}


footer { padding-top: 10px; 
         height:80px;  
         margin-bottom: 0; 
         padding:0; 
}
footer .container { background-color: #666666; 
            min-height: 130px; 
            display: table;
}

footer nav { font-size: 14px; font-weight: normal; margin-top: 15px; display: inline-block; }
footer nav a { color: #fff; }
/* footer nav a:hover, footer nav a:active, footer nav a:focus, footer nav a.active { color: #eb4d00; text-decoration: none; } */
footer nav a:hover, footer nav a:active, footer nav a:focus, footer nav a.active { color: #193B95; text-decoration: none; }
footer .menu-leiste { font-size: 14px; margin-top:15px;}
footer .menu-leiste .copyright { display: inline-block; margin-left:30px; margin-right: 20px; font-weight: 400; color: white;}
footer .menu-leiste .links { display: inline-block; margin-right: 30px; font-weight: 400; text-align:right; }
footer .footerlink { color: black;}

.closex {
	background: #000000; /* #193B95; #606061 */
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;

}

.closex:hover { background: #ffffff; text-decoration: none; color:#000; }

.modal-laufstall .modal-title { font-weight: bold; font-size: 20px; }
.modal-laufstall p { font-size: 16px; margin-bottom: 20px; color: black; }
.modal-laufstall ul { font-size: 16px; }
.modal-laufstall h2 { font-size: 25px; }
.modal-laufstall #register_full_form { margin-top: 20px; background-color: #f5f5f5; margin-left: 0px; margin-right: 0px; padding: 20px; }
.modal-laufstall #register_full_form .form-box { background-color: #fff; margin: 20px -20px; padding: 20px; }

.modal.modal-picture .modal-dialog .modal-content .modal-header {
    padding:9px 15px;
    border-bottom:1px solid #aaa;
    background-color: #aaa;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
}

.modal.modal_noie.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

header { justify-content: center; 
         -moz-box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.15); 
         -webkit-box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.15); 
         box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.15); 
         opacity: 0; 
         display: none; 
        }
header nav { display: inline-block; width: 400px; }
header .container { position: relative; min-height: 130px; display: table; }
header p.logo-text { font-size: 40px;}
header a.logo-text { font-size: 40px; color: #666; text-decoration: none; text-align: left; display:table-cell; vertical-align:middle}
header img.logo { display: inline; width: 50px}

.menubar {
    text-align:left;
    display:table-cell; vertical-align:middle
}