* { box-sizing: border-box;}

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

body {
    margin:0;
    padding: 0;
    height:100%; /* needed for container min-height */
    width: 100%;
    font-family: Arial;
}

/* header */
header {
    display: flex;
    border: 2px solid rgb(135, 135,135);    
    height: 15%;
    min-height: 100px;
    width: 100%;
    position: fixed;
}

header img {    
    height: 100%;
    width: auto;       
}

header div {    
    height: 100%;   
    width: auto;      
}

header h1{
    margin: auto;
    text-shadow: 2px 2px 4px #000000;
    color: white;
    text-align: center;
}

#HeaderContainer{ 
    width: 100%;
    background: white;
}

.HeaderBackground{  
    z-index: 1;
    height: 100%;
    background: rgb(135, 135,135);
    
    transform-origin: left top;  
    transform: skew(32deg);    
}

.TopBox{    
    display:flex; 
    flex-direction: row-reverse;
    justify-content: flex-start;
    transform-origin: right top;    
    transform: skew(-32deg);
    position: relative;

    width: 100%;
    height: 40%;   
    align-items: center;    
}

.TopColumn{
    display: flex;    
    height: 90%;    
    flex-direction: column;           
}

.TopColumn .BPlog{     
    max-height: 100%;
}

.TopColumn span{
    display: flex;
    height: 100%;    
    flex-direction: column;    
    padding-left: 5px;
    padding-right: 5px;    
    color: white;
    text-decoration: none;
    text-align: center;
    font-size: smaller;
    justify-content: center; /* alignement vertical */  
    min-width: 80px;
}

/* Style the top navigation bar */
.navbar {
    z-index: 2;
    display: flex;    
    position: relative;

    top: -59%;     
    height: 60%;    
    flex-direction: row-reverse;
    
    background-color:rgb(200, 0,0);     
    box-shadow: 0px 0px 20px -1px black;
    transform-origin: left bottom;   
    transform: skew(-32deg);
}

/* Style the navigation bar links */
.navbar a {    
    display: flex;
    height: 100%;    
    flex-direction: column;    
    padding-left: 15px;
    padding-right: 15px;    
    color: white;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    justify-content: center; /* alignement vertical */ 
    transform: skew(32deg);
}

.navbar .BPmenu {    
    display: flex;
    height: 100%;    
    flex-direction: column;    
    padding-left: 15px;
    padding-right: 15px;    
    color: white;
    background-color: rgb(200, 0, 0);
    border: none;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    justify-content: center; /* alignement vertical */ 
    transform: skew(32deg);
    cursor: pointer;
    font-family: Arial;
    opacity: 1;
}


/* Change color on hover */
.navbar a:hover {
    background-color:rgb(150, 0, 0);
}

/* Change color on hover */
.navbar button:hover {
    background-color:rgb(150, 0, 0);
    color: white;
    opacity: 1;
}


/* dropdown hamburger */
.dropdown {
    display: none;
    position: absolute;
    top: 5%;
    right: 30px;                
    height: 90%;     
    transform: skew(32deg);
}

.dropbtn {
    background-color:rgb(200, 0, 00);
    background-image: url("/Img/Ham.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 105px ;
   
    height: 100%;  
    width: 51px;    
    border: none;
    cursor: pointer;
}
      
.dropdown-content {
    
    display: none;
    position: absolute;      
    min-width: 160px;
    overflow: visible;      
    z-index: 10;
    right: 0;    
}
  
.dropdown-content a {
    display: block;
     /*flex-direction: column;  */
    color: white;    
    background-color:rgb(150, 0, 0); 
    transform: skew(0deg);
    padding: 12px 16px;
    text-decoration: none;
    box-shadow: -8px 8px 16px 0px rgba(0,0,0,0.4);
}
  
.dropbtn:hover, .dropbtn:focus {
    background-position: center right;    
}

.dropdown a:hover {background-color:rgb(200, 0, 00);}
  
.show {display: block;}
  
.main {
    /*border: 2px solid rgb(0, 0, 0);*/
    height: 50%; 
    position: static;   
}

footer {
    padding: 7px;
    margin: 0px;
    color: white;
    background-color: rgb(135, 135, 135);
    border: 2px solid rgb(0, 0, 0);;
    clear: left;
    text-align: center;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 4%;
    min-height: 40px;
}

/* media */
@media only screen and (max-width: 850px) 
{
    .navbar a
    { display: none; }
    .navbar .BPmenu
    { display: none; }
    #MainTitle
    { display: none; }
    .dropdown
    { display: block; }
    .dropdown a
    { display: block; }
}