/* Navigation */


.navi {
  height: 75px;
  background-color: var(--main-color);
  border-bottom: ;
}

.nav-logo:after {
  content: '';
  font-size: 11px;
  position: relative;
  margin-left: 5px;
  top: 3px;
}

.navbutton {
  font-size: 0.9em;
  line-height: 1em;
  font-weight: 400;
  height: 1.875em;
  background-color: var(--bg-main-color);
  color: var(--color-white);
}

.navbutton.navstart path {
  fill: var(--white-color);
}


.navbutton.navstart:hover {
  color: var(--white-color);
  background-color: var(--accent1-color);
}

.navbutton.navstart:hover path {
  fill: var(--main-color);
}

.navbutton.navfind:hover {
  background-color: var(--accent2-color);
}


.navbutton.navhowto:hover {
  color: var(--accent1-color);
  background-color: var(--main-color);
}

.navbutton.navhowto:hover path {
  fill: var(--accent1-color);
}

.navbutton svg path {
  fill: var(--color-white);
}



.navshop span.shopitems {
  background-color: var(--alert-color);
  font-size: .6em;
}


.navbuttonsmall {
  font-size: 0.9em;
  line-height: 1em;
  font-weight: 400;
  background-color: var(--bg-main-color);
  color: var(--color-white);
}


.navbuttonsmall.navshop:hover ,
.navbuttonsmall.navuser:hover {
  color: var(--accent1-color);
  background-color: var(--main-color);
}

.navbuttonsmall:hover path {
  fill: var(--accent1-color);
}

.navbuttonsmall.navshop:hover span {
  color: var(--white-color);
}

.navbuttonsmall span.loggedin {
  background-color: var(--alert-color);
}

.loggedin-navi {
  background: var(--accent1-color);
  color: var(--white-color);
  top: 52px;
}

.loggedin-navi ul li {
  color: var(--main-color);
}

.loggedin-navi ul li:hover {
  background-color: var(--main-color);
  color: var(--accent1-color);
}

.navbutton img, .navbuttonsmall img {margin-left: 4px;}



/* Modul: Footernavi */

.footernavi-item {
  border-right: 1px solid var(--main-75-color);
}

.footernavi-links li a {
  line-height: 2.25;
  border-bottom: 1px solid var(--main-color);
}

.footernavi-links li a:hover {
  color: var(--accent1-color);
  border-bottom: 1px solid var(--accent1-color);
}





/* Menu Mobile Hamburger */

@media only screen and (min-width: 150px) and (max-width: 1024px) {

  #menuToggle {top: 30px;}

  #menuToggle span {
    background: var(--main-color);
  }

   #menuToggle input:checked ~ span {
    background: var(--main-color);
  }

  #menu {
    background-color: var(--white-color);
    color: var(--main-color);
  }

  #menu ul li {
    border-bottom: 1px solid var(--main-75-color);
  }

  #menu .mobilenav-inner ul li a {
    font-size: 16px;
  }
  #menu .mobilenav-inner ul.user {
    border-bottom: 1px solid var(--main-75-color);
  }

  .mobile-logo:after {
    content: '';
    font-size: 11px;
    margin-left: 5px;
    top: 3px;
    color: var(--white-color);
  }

  .mobile-logo-inner {
    border-bottom: 1px solid var(--main-75-color);
    height: 75px!important;
  }

}




/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

}


/* Tablet Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}


/* Mobile Portrait */
@media only screen and (max-width: 767px) {

}



/*Änderungen/Anpasssungen*/
.navi {
  background-color: var(--white-color);
}
.navbutton, .navbutton.navstart:hover, .navbutton.navhowto:hover,.navbuttonsmall, .navbuttonsmall.navshop:hover, .navbuttonsmall.navuser:hover, .navbutton.navfind:hover {
  color: var(--main-color);
  background-color: var(--white-color);
}

.nav-logo {background: url(https://www.fairplaid.org/files/images-toyota/Toyota-Ellipse.png)left center no-repeat transparent;
    overflow: hidden;
    text-indent: -200px;
    background-size: 40%;
    width: 220px;
    margin-top: 0px;
    height: 75px;
    margin-left: 3%;
}

.mobile-logo {background: url(https://www.fairplaid.org/files/images-toyota/Toyota-Ellipse.png)left center no-repeat transparent;
    overflow: hidden;
    text-indent: -200px;
    background-size: 40%;
    width: 200px;
    margin-top: 0px;
    height: 75px;
    margin-left: 3%;
}

.loggedin-navi {background-color: var(--lightgrey-color);color: var(--main-color);}
.loggedin-navi ul li:hover {background-color: var(--white-color);color: var(--accent1-color);}


@media only screen and (max-width:900px){
    .footernavi{
        display:block;
    }
    .footernavi-item:first-child,.footernavi-item:nth-child(2) {
      height:290px;
    }
    .footernavi-item{
        width:50%;
        float:left;
        font-size:12px;
        padding:0 1em;
        border:none;
    }
    .footernavi-headline h3{
        font-size:13px !important;
    }
}





.nav-user .navbuttonsmall .loggedin img {max-width: 35px!important;}