html, body {
    font-family: 'Sawarabi Mincho', sans-serif;
    padding: 0;
	margin: 0;
	box-sizing: border-box;
    width: 99.98%;
}

/*** Header ***/

.header {
    background-color: #cc0000;
    color: white;
    text-align: center;
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 16px;
}

#veg_logo{
    width: 200px;
    padding: 16px;
}

/*** Home ***/

.home {
    hyphens: auto;
    text-align: justify;
    padding: 1em;
     box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 16px;
    z-index: 2;
}

.hometext {
    padding-left: 2em;
    padding-right: 2em;
    font-size: 21px;
    hyphens: auto;
    text-align: justify;
}

/*** Arrow Down ***/

.downpos {
    text-align: center;
}

.down {
    border-radius: 50%;
    color: black;
    border: 2px solid gray;
    font-size: 35px;
    padding: 5px;
    transition: .2s ease-in;
    transform: rotate(-360deg);
}

.down:hover {
    background-color: #cc0000;
    border-color: white;
    color: white;
    transition: .2s ease-out;
    transform: rotate(360deg);

}

/*** Hauptcontent ***/

.hauptcap {
    text-align: center;
}

.text {
    font-size: 21px;
    hyphens: auto;
    text-align: justify;
}
/*** Navbar ***/

.navbar {
    font-size: 42px;
    position: fixed;
    top: 27.5%;
    left: 92%;
    z-index: 3;
}

.navlist  {
    text-decoration: none;
    list-style-type: none;
    background-color: white;
    padding: 10px;
}

.iconbar {
    transition: 0.5s ease-out;
    transform: scale(1);
    display: inline-block;
    color: #333;
}

 .tooltiptext {
    visibility: hidden;
    width: 225px;
    background-color: white;
    color: #333;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    top: -5px;
    right: 105%;
    position: absolute;
    z-index: 1;
    border-bottom: 1px solid #333;
}
.iconbar:hover .tooltiptext {
    visibility: visible;
}
.iconbar:hover {
    transition: 0.5s ease-in;
    transform: scale(1.2);
}
.rpNav {
    display: none;
    
}
/*** Philsophie ***/
.philo {
    text-align: center;
     box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 16px;
    
}
#phtx {
    
}
/*** Single Images ***/ 
.images {
    padding: 16px;
}

/*** Footer ***/
footer {
    text-align: center;
    background-color: #cc0000;
    color: white;
    font-size: 35px;
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 16px;
}
.up {
    border-radius: 50%;
    color: white;
    border: 2px solid white;
    font-size: 35px;
    padding: 5px;
    background-color: #cc0000;
    transition: .2s ease-in;
    transform: rotate(-360deg);
}
.up:hover {
    background-color: white;
    border-color: #cc0000;
    color: #cc0000;
    transition: .2s ease-out;
    transform: rotate(360deg);

}

/*** News ***/

.news {
    text-align: center;
}
/*** Spinner ***/
.spinner:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60px;
    width: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border: 3px solid lightgray;
    border-top-color: #cc0000;
    animation: spin 0.7s ease-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/***Features***/

/***Scrollbar***/
::-webkit-scrollbar {
    width: 15px;
}
/* Spur */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: coral; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cc0000; 
}*/
/******/
/***Markierungsfarbe***/
::-moz-selection {
 background-color: #333;
 color: white;
}
::selection {
 background-color:#333;
 color: white;
}
/******/