/*---------------------------------------------------------*/
/*The dropdown element
/*---------------------------------------------------------*/


.dropdown {
 top:100%;
}

.dropdown:focus-within > span > .dropbtn {
 pointer-events: none;
}


/*---------------------------------------------------------*/
/*The drop button
/*---------------------------------------------------------*/


.dropbtn{
    z-index:1013;
    position:relative;
}

/*-----------------------------*/
/*The mobile hamburger button 
/*special width/style/contents*/
/*-----------------------------*/
#hamburger_drop > span > .dropbtn {
  height:60px;
  width: 60px;
  padding:0;
  background-image:url("../im/hamburger.png");
  background-size: 50% 50%;
  background-repeat: no-repeat; 
  background-position: center;
}

/*-----------------------------*/
/*The More/Less button 
/*special width/style/contents*/
/*-----------------------------*/
#more_drop > span > .dropbtn {
  width:125px;
}
#more_drop > span > .dropbtn:before {
   content: 'More';
}
#more_drop:focus-within  > span > .dropbtn:before {
   content: 'Less';
}

/*---------------------------------------------------------*/
/*The contents of the dropdown
/*---------------------------------------------------------*/


/*Show menus on hover by default. This is overridden below if the browser supports focus-within*/
/*-----------------------------------------------------------------------------*/
.dropdown-content {
	display:none;
        z-index:1009;
}
.dropdown-content_i {
	display:none;
}


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

.dropbtn_i-wrap  {
  display:none;
}


/*-----------------------------------------------------------------------------*/
/*This is a crude check if the browser supports :focus-within!*/

/*If it does, the below will always be true if the cursor is on the page*/
/*This then counteracts the above hover command making the menu NOT*/
/*display on hover. Because it comes after in the CSS*/ 

/*If the browser does not support focus-within, */
/*the countermeasure will not be applied because the browser will bail*/
/*on seeing :focus-within and subsequently ignore the reversal*/

/*-----------------------------------------------------------------------------*/
html:focus-within .dropdown-content,
html:hover .dropdown-content {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  display:block;
  z-index:1009;
}

html:focus-within dropdown-content_i,
html:hover .dropdown-content_i {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  display:block;
}

html:focus-within > body > header > .top-wrap .dropbtn_i-wrap,
html:hover > body > header > .top-wrap .dropbtn_i-wrap {
  display:block;
}




html:focus-within #moredrop-1 > .dropdown_i,
html:hover #moredrop-1 > .dropdown_i {
  margin-bottom:0px;
}
html:focus-within #moredrop-2 > .dropdown_i,
html:hover  #moredrop-2 > .dropdown_i {
  margin-bottom:0px;
}
html:focus-within  #moredrop-3 > .dropdown_i,
html:hover  #moredrop-3 > .dropdown_i {
  margin-bottom:0px;
}
html:focus-within  #moredrop-4 > .dropdown_i,
html:hover  #moredrop-4 > .dropdown_i {
  margin-bottom:0px;
}
html:focus-within  #moredrop-5 > .dropdown_i,
html:hover  #moredrop-5 > .dropdown_i {
  margin-bottom:0px;
}
html:focus-within  #moredrop-6 > .dropdown_i,
html:hover  #moredrop-6 > .dropdown_i {
  margin-bottom:0px;
}
html:focus-within  #moredrop-7 > .dropdown_i,
html:hover  #moredrop-7 > .dropdown_i {
  margin-bottom:0px;
}


/*-----------------------------------------------------------------------------*/


/*Preferred method! Drop on focus-within*/
.dropdown:focus-within > .dropdown-content {
  -webkit-transform: translateY(0) !important;
  -moz-transform: translateY(0) !important;
  -ms-transform: translateY(0) !important;
  -o-transform: translateY(0) !important;
  transform: translateY(0) !important;
	display:block;
  z-index:1009;

}


/*Fix for Safari because it loses focus on the dropdown_i "unset" button for some reason*/
.dropdown-content:hover {
  -webkit-transform: translateY(0) !important;
  -moz-transform: translateY(0) !important;
  -ms-transform: translateY(0) !important;
  -o-transform: translateY(0) !important;
  transform: translateY(0) !important;
	display:block;
}






.dropdown-content {

  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;
  top: 60px;

  position: fixed;
  width:250px;

  background-color: inherit;
  color: inherit;
 


  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;

  max-height:calc(100% - 60px);
  overflow-y: auto;

}



/*-----------------------------*/
/*The mobile hamburger dropdown 
/*special borders and size*/
/*-----------------------------*/
#hamburger_drop > .dropdown-content {

	right:0;
	width:100%;
  	border-left: none;
 	border-right: none;
	border-bottom:1px solid black;
}


/*This is here because for some reason, the links in the dropdowns have transparent background and can't inherit*/
.dropdown-content > div  {
	background-color:inherit;
}




/*---------------------------------------------------------*/
/*Internal dropdown (inside another dropdown)
/*---------------------------------------------------------*/

.dropdown_i {
  top:100%;
  position:relative;
  background-color: inherit;
  color: inherit;
  vertical-align: middle;
  width:100%;
  transition: margin-bottom 0.5s;
  transition-delay: 0.1s;

}


.dropbtn_i-wrap {
  width:100%;
  position:absolute;
  z-index:1008;
}


.dropbtn_i {
  position:absolute;
  width:100%;
  z-index:1009;
}


.dropdown_i:focus-within > .dropdown-content_i {
  -webkit-transform: translateY(0) !important;
  -moz-transform: translateY(0) !important;
  -ms-transform: translateY(0) !important;
  -o-transform: translateY(0) !important;
  transform: translateY(0) !important;
	display:block;
}

.dropdown-content_i {
  width:100%;

  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;

  transition-delay: 0.1s;
  position: absolute;
  background-color: inherit;
  color: inherit;
  top:100%;

}



.dropdown-content_i > a:before
{
	white-space: pre;
	content:'       ';
}





.dropbtn_i:focus {
  pointer-events: none;
}




.dropdown_i:focus-within {
  pointer-events: none;
}

.dropdown_i:focus-within a {
  pointer-events: all;
}


/*Add space between button title and arrow*/
.dropbtn_i:after {
   content:'  ';
   white-space: pre;
}





/*---------------------------------------------------------*/
/*Wrappers
/*---------------------------------------------------------*/


.droparrow-wrap {

  height: 24px; 
  background-color: inherit; 
  float:right; 
  margin:0; 
  text-align:right; 
  vertical-align:middle;
}


.downarrow {
  display:inline-block;
  height:5px;
  width:5px;
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;
  transition-delay: 0.1s;
  transform-origin: 65% 73%;


  float:right;
  margin-left:20px;
  border: solid white;
  border-width: 0 3px 3px 0;
  border-radius:0 0 20% 0;
  display: inline-block;
  padding: 3px;

  -webkit-transform: rotate(45deg) translateY(25%);
  -moz-transform: rotate(45deg) translateY(25%);
  -ms-transform: rotate(45deg) translateY(25%);
  -o-transform: rotate(45deg) translateY(25%);
  transform: rotate(45deg) translateY(25%);
    
}


.dropdown:focus-within > .dropbtn-wrap > .dropbtn > i {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}



.dropdown_i:focus-within > .dropbtn_i > i{
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


.dropdown_i:focus-within > .dropbtn_i > p{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}


.dropbtn-wrap
{
  display:inline-block;
  height:60px;
  line-height:60px;
  background-color: inherit; 
  cursor:pointer;
  position:relative;
  z-index:1012;
}

#hamburger_drop > .dropbtn-wrap
{
  position:fixed; 
  right:0; 
}


.dropbtn-wrap:hover > .dropbtn
{
  background-color: #004362;
}

.dropbtn_i-wrap:hover + .dropdown_i > .dropbtn_i
{
  background-color: #004362;
}


/*---------------------------------------------------------*/