/**********************  nav formatting  **********************/

/*********** The ul in the header is class= headerContainer    *******/
.headerContainer {
  /* border: 5px solid #ffcc5c; */
  display: flex;
  align-items: center;
  width: 100vw;
}

.headerContainer li {
  padding: 10px;
  text-align: center;
  font-size: 1em;
  font-weight: 400;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  /* box-sizing: border-box; */
  /* background-color: #96ceb4; */
  list-style-type: none;
  padding: 1% 2%;
}

.logo {
  height: 35px;
  align-self: flex-start;
}

.search {
  /* flex: 1; */
}

/****************** used to move login over to right ************/
/*** and give a bit of space between 'more...' and 'login' links ***/
.login {
  margin-left: auto;
}

.search-input {
  background: #ff6e68;
  border: 0;
  width: 100%;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid #ffeead;
  color: #ffeead;
}
:placeholder {
  color: #ffeead;
}

.search-input:focus {
  outline: none;
}
/********************** end of basic nav formatting ******************/

/****************** Start of nav bar dropdown added ****************/
.headerContainer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #8bd4eb;
  /* border: 5px solid #ffcc5c; */
}

.headerContainer li {
  float: right;
}

.products li a,
resources li a,
articles li a,
more li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 1px solid black;
}

.dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  font-weight: 750;
  padding: 14px 16px;
  text-decoration: none;
  /* border: 1px solid black; */
}

@media (max-width: 1000px) {
  .dropbtn{
  font-size: .75rem; 
  }
}

@media (max-width: 750px) {
  /* .dropbtn{
  font-size: 10px; 
  font-style: normal;
  } */
}




li a:hover,
.dropdown:hover .dropbtn {
  background-color: hsla(39 73% 99%);
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
/*  background-color: #f9f9f9;  */
background-color: wheat;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/**** end of nav dropdown styling ************/

/*********************** end of full screen navigation *****************/

/********************************************************************/
/*******************   Tablet sized *********************************/
@media all and (max-width: 800px) {
}



/**************************************************************/
/********************* responsive small ****************************/
@media all and (max-width: 640px) {
  /**************** Nav not-bar area ***************/
  /* Nav */
  #flex-nav {
    display: none;
  }

  /*************** Beginning of flyout *************/
  /* We remove the margin, padding, and list style of UL and LI components */
  #mobileNavDiv ul,
  #mobileNavDiv ul li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* We apply background color and border bottom white and width to 150px */
  #mobileNavDiv ul li {
    background-color: #7f95db;
    border-bottom: solid 1px white;
    width: 150px;
    cursor: pointer;
  }

  /* We apply the background hover color when user hover the mouse over of the li component */
  #mobileNavDiv ul li:hover {
    background-color: #6679e9;
    position: relative;
  }

  /* We apply the link style */
  #mobileNavDiv ul li a {
    padding: 5px 15px;
    color: #ffffff;
    display: inline-block;
    text-decoration: none;
  }

  /**** SECOND LEVEL MENU ****/
  /* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
  #mobileNavDiv ul li ul {
    position: absolute;
    display: none;
  }

  /* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
  #mobileNavDiv ul li:hover ul {
    left: 150px;
    top: 0px;
    display: block;
  }

  /* we apply different background color to 2nd level menu items*/
  #mobileNavDiv ul li ul li {
    background-color: #cae25a;
  }

  /* We change the background color for the level 2 submenu when hovering the menu */
  #mobileNavDiv ul li:hover ul li:hover {
    background-color: #b1b536;
  }

  /* We style the color of level 2 links */
  #mobileNavDiv ul li ul li a {
    color: #454444;
    display: inline-block;
    width: 120px;
  }

  /****************** /flyout **/



}