



main header {
 	position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 5;
   width: 100%;
   height: 90px;
   background-color: rgba(200, 110, 20, 0.9);       	 	    
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 0 3rem 0 3rem;     /* links rechts cviomn Logo register Platz  */
   
}

@media (max-width:  1100px) {main header {height: 110px; padding: 0 5rem 0 5rem;}}
@media (min-width:  2400px) {main header {height: 110px; padding: 0 6rem 0 6rem;}}


.ComingSoonPic {
}


#NavLinks  {
    height: 100%;
}

#NavLinks  ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100%;
}

#NavLinks ul li  {
   list-style: none;
   height: 100%;
   transition: 300ms all;
   display: flex;
   flex-direction: row;
   white-space: nowrap;
   justify-content: space-between;
   align-items: center;
   text-shadow: 3px 3px 4px #777;
}


#NavLinks ul li a.NavLink, #NavLinks ul li a.NavLink:visited  {
	  text-decoration: none;
     color: #ffffff;   
}     
#NavLinks ul li a.NavLink:hover {
   cursor: pointer;
   transform: translate(0, -0.5rem);
   text-decoration: underline; 
   text-underline-offset: 2rem; 
   text-decoration-thickness:5px;
   color: #0000ff;         
}

#NavLinks ul li:last-child {
          margin: 0 0 0 0;
}





main header .login {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    XXXwidth: 20rem;
}


main header .login button {
      color: #ffffff;
      background-color: #000000;
      border: none;
      border-radius: 1rem;
      padding: 1rem;
      min-width: 8rem;
      box-shadow: 0 1px 3px #cccccc;      
}


.loginswap  {
  font-size: 100%;
  animation-name: head;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
      
#LoginB{
    animation-delay: 2s;
}


@keyframes head {
    0% {font-size:100%; opacity:1;}
    50% {font-size:0; opacity:0;}
    100% {font-size:100%;opacity:1;}
}



#NavBurger { 
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 3rem;
}



#NavBurger ul          {   margin:0;   padding:0;   list-style:none;   text-shadow: 3px 3px 4px #777; }
#NavBurger ul li ul li {   background-color: #999;   float:left; display: inline-block; position: relative; left: -350px; }
#NavBurger ul li a     {   float: left;   color:#ddd;   padding: 10px 30px;   text-decoration:none;   border-left: 1px solid rgba(255, 255, 255, 0.05);   border-right: 1px solid rgba(0,0,0,0.2);}
#NavBurger li ul       {   left: -999em;   margin: 0px 0 0;   position: absolute;   width: 450px;   z-index: 9999;        }
#NavBurger li ul a     {   border: 0 none;   margin-right: 0;   width: 450px;   border-bottom: 1px solid transparent;   border-top: 1px solid transparent;}

/*2. ebene anzeigen und stylen*/
#NavBurger ul li a:hover,#NavBurger ul li:hover > a {  background:#f33;   font-size: 105%;}
#NavBurger li ul a:hover,
#NavBurger ul li li:hover > a  {              border-bottom: 1px solid rgba(0,0,0,0.6);        border-top: 1px solid #000;}
/*3. ebene anzeigen und stylen*/
#NavBurger li:hover ul    {  left: auto; }
#NavBurger li li ul       {  margin: -1px 0 0 160px;        visibility:hidden; }
#NavBurger li li:hover ul {  visibility:visible;  }



#main header .DinoMailLogo {    width: 30rem;	}

@media (max-width:  1100px) { main header .DinoMailLogo {    width: 20rem;	};}
@media (min-width:  1100px) { main header .DinoMailLogo {    width: 15rem;	};}
@media (min-width:  1900px) { main header .DinoMailLogo {    width: 20rem;	};}
@media (min-width:  2400px) { main header .DinoMailLogo {    width: 20rem;	};}

@media (max-width:  1100px) { #NavLinks, .login  { visibility: hidden;  };}
@media (max-width:  1100px) { .NavFooter      { display: none; };}	
@media (max-width:  1100px) { .NavFooterShort { visibility: visible; };}	

@media (min-width:  1100px) { #NavLinks, .NavFooter, .login  { visibility: visible; };}
@media (min-width:  1100px) {.NavFooterShort { display: none; };}	

	
@media (max-width:  1100px) { #NavBurger  { visibility: visible; }}
@media (min-width:  1100px) { #NavBurger  { display: none;}}


@media (max-width:  1100px) { #AddPic01  { display: none;; }}
@media (min-width:  1100px) { #AddPic01  { visibility: visible;}}

@media (max-width:  1100px) { #MobileVisible  { visibility: visible;}}
@media (min-width:  1100px) { #MobileVisible  { display: none; }}
@media (max-width:  1100px) { #PCVisible  { display: none; }}
@media (min-width:  1100px) { #PCVisible  { visibility: visible;}}


@media (max-width: 1100px) { #NavLinks ul li {    font-size: 0rem;  padding: 0;}}
@media (min-width: 1100px) { #NavLinks ul li {    font-size: 1.6rem;  padding: 2rem 2.2rem 2rem 2.2rem; }}  /*  4:3      */
@media (min-width: 1900px) { #NavLinks ul li {    font-size: 2.1rem;  padding: 2rem 2.2rem 2rem 2.2rem; }}  /* 16:9  24" */
@media (min-width: 2400px) { #NavLinks ul li {    font-size: 3.0rem;  padding: 2rem 2.2rem 2rem 2.2rem; }}  /* 16:9  27" */


          


main footer {
	
   display: flex;
   flex-direction: row;
   justify-content: space-between;
	
	 width: 95%;
	 max-width: 100rem;
    
 	 margin-top: 1rem;
 	 padding-top: 5px; 	 
	 border-top-style: solid;
}


main footer ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100%;
}
main footer ul li, footer ul li a.IntLink, footer ul li a.IntLink:visited, #AccountData a.IntLink, #AccountData a.IntLink:visited  {
        list-style: none;
        height: 100%;
        transition: 300ms all;
        display: flex;
        flex-direction: row;
        white-space: nowrap;
        justify-content: space-between;
        align-items: center;
        padding-left: 3px;
        padding-right: 3px;        
        text-decoration: none;
        color: #444444;      
}
main footer ul li:last-child {
        padding-right: 0px;        	
}

main footer ul li a.IntLink:hover, #AccountData a.IntLink:hover {
		color: #000066;
		text-decoration: underline overline #444444;
}


main footer .AIScms  {
        justify-content: flex-start;
        XXXwhite-space: nowrap;
}






main footer a.AISlink, main footer a.AISlink:visited {
		color: #888888;
		text-decoration: none;
}
      
main footer a.AISlink:hover {
		color: #444444;
}


main footer IntLink a, main footer IntLink a:visited {
		color: #888888;
		text-decoration: none;
}
      
main footer IntLink a:hover {
		color: #ff6666;
}





