* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}



/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: white;
  padding: 30px 10px;
  font-family: sans-serif;
  margin-top: 0px;
  box-shadow: 0 5px 10px 0 rgba(116, 116, 116, 0.534);
  /* transition: 0.5s; */
  /* position: fixed; */
  width: 100%;
  margin-top: 43px;
  z-index: 100;
}

/* .header:hover {
  transform: scale(1.01);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.534);
} */

/* Style the header links */
.header a {
  background-color: rgb(25, 146, 251);
  color: white;
  float: left;
  text-align: right;
  margin-right: 12px;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
  font-family: sans-serif;
  border-radius: 40px;
  transition: 0.25s;
  
}

/* Change the background color on mouse-over */
.header a:hover {
  /* background-color: rgb(255, 212, 104); */
  background-color: rgb(57, 162, 253);
  /* transform: scale(1.05); */
  cursor: pointer;
  /* box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.534); */
}

/* Float the link section to the right */
.header-left {
  float: left;
  padding-left: 12px;
}

.header-right {
  float: left;
}

.dropbtn {
  background-color: rgb(25, 146, 251);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 40px;


  text-align: right;
  margin-right: 12px;
  padding: 13px 20px 13px 20px;
  /* padding-left: 12px; */
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
  font-family: sans-serif;
  z-index: 100;
  display: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  /* border-radius: 40px; */
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 5px 10px 0 rgba(116, 116, 116, 0.534);
  z-index: 50;
  /* border-radius: 40px; */
}

.dropdown-content a {
  color: rgb(25, 146, 251);
  border-radius: 0px;
  background-color: #f9f9f9;
  text-decoration: none;
  display: block;
  /* margin-right: 1000px; */
  float: left;
  clear: left;
  border-radius: 40px;

  text-align: right;
  margin-right: 12px;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
  font-family: sans-serif;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  border-radius: 40px;
}

.dropdown:hover .dropdown-content {
  display: block;
  border-radius: 40px;
}

.dropdown:hover .dropbtn {
  background-color: rgb(57, 162, 253);
  border-radius: 40px;
}



img[src="Logo/ODDO Logo (15).png"] {
    opacity: 1;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none;
    float: left;
    height: 100%; 
    width: 56px;

    object-fit: contain;

    position: relative;
    animation-name: moveLogo;
    animation-duration: 1s;
}

@keyframes moveLogo {
  0%   {left:-72px; top:0px;}
  /* was left -35 */
  100% {left:0px; top:0px;}
}

img:hover[src="Logo/ODDO Logo (15).png"] {
    opacity: 1;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}


/* Tablet view Moving header down to allow room for navbar to take over space */
@media screen and (max-width: 1200px){
  .header {
    width: 100%;
    margin-top: -130px;
    /* margin-top: 85px; */
    position: fixed;
  }
  .header-right {
    display: none;
  }
  .dropbtn {
  padding: 13px 20px 13px 20px;
  margin-left: 4px;
  /* was 5 last */
  display: block;
}
}

      /* Smallest (Iphone) Monitor Sizing */
      @media screen and (max-width: 800px) {
        .header {
          width: 100%;
          z-index: 50;
          /* margin-top: -110px; */
          /* position: fixed; */
        }
        .header a {
          /* width: 440px; */
          /* display: block; */
          text-align: center;
        }
      }


/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header {
    width: 100%;
    z-index: 50;
    /* margin-top: -110px; */
    position: fixed;
    margin-top: -135px;
    /* was 110 then 120 now 115 Trying to fix space between slide show and header on mobile */
  }
  .header a {
    /* width: 345px; */
    /* display: block; */
    text-align: center;
    padding: 13px;

    margin-left: 4px;
    /* was 5 last */
    /* margin-left: 20px; */
    /* border: 2px rgb(25, 146, 251); */
    /* background-color: rgb(25, 146, 251); */
  }
  .header-left {
  /* padding-left: -12px; */
  
  margin-left: -10px;
  /* was at -7 last */
}

  .dropbtn {
  padding: 13px;
  margin-left: 4px;
  /* was 5 last */
}


.dropdown-content {
  z-index: 100;
}

.header-right {
  padding-left: -12px;
  margin-left: -15px;
}

img[src="Logo/ODDO Logo (15).png"] {
    width: 14.9%;
    margin-left: -2px;
    /* Was at 15.2 last */
}

}