﻿


/* Advanced Checkbox Hack */
body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}


input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: none;
  cursor: pointer;
  user-select: none;
}

/* background for li / select */
/* custom-dropdown */
nav[role="custom-dropdown"] {
  height:45px;
	width: 100%;
	
	background:#0066FF; 
	opacity:.90;
  -moz-opacity:.90; 
  filter:alpha(opacity=90); 
	font-size: 11pt;
	font-family: MyriadProRegular,Helvetica,Arial,sans-serif;
	
	position:fixed;
     
    text-transform:uppercase;
    box-shadow: rgb(0,0,0) 0px 0px 5px black;
    z-index:9999;
     box-sizing: border-box;
}
nav[role="custom-dropdown"] a,
nav[role="custom-dropdown"] label {
  color:#FFFFFF;
  text-decoration: none;
  font-size: 11pt;
	font-family: MyriadProRegular,Helvetica,Arial,sans-serif;
  transition: color .3s ease-in-out;
  padding-top:0px;
  width:100%;
background-color:#0066FF;
 box-sizing: border-box;

}
nav[role="custom-dropdown"] ul {
  padding: 0;
  margin: 0 auto;
  width: 600px;
  list-style: none;
  background-color:#0066FF;
box-sizing: border-box;

  
}
nav[role="custom-dropdown"] ul > li {
  float: left;
   
  padding: .90em .55em;
  width: 19%;
  background-color:#0066FF;
  text-align: center;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: box-shadow, color;
  box-sizing: border-box;

  

  cursor: pointer;
  *box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35);
}
li#mb {
	display:none
}

nav[role="custom-dropdown"] ul > li:hover {
  *background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  *box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2em rgba(0, 0, 0, 0.3);
}
nav[role="custom-dropdown"] ul > li:hover > a {
  color:gray;
}

/* small screens */
@media screen and (max-width: 800px) {
  nav[role="custom-dropdown"] ul {
    display: none;
    height: 100%;
    width:100%
  }
  nav[role="custom-dropdown"] label {
    position: relative;
    display:inline-block;
    width: 100%;
    min-height: 2.25em;
    padding: .45em;
    font-size: 1.1em;
    margin: 0;
     background-color:#0066FF;
     padding-top:13px;
      padding-left:13px;
 
    
    
  }
  nav[role="custom-dropdown"] label:after {
    position: absolute;
    right: .35em;
    top: 0;
    content: "\2261";
    font-size: 2.3em;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after {
   content: "\03A7";
   font-size: 1.7em;
    top: 3px;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul {
    display:inline-block;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li {
    width: 100%;
    opacity: 1;
    text-align: left;
     border-top:thin #FFFFFF solid;
      padding: .55em .55em;
  }
  li#fullsite {
	display:none
}
li#mb {
	display:inline-block
}
nav[role="custom-dropdown"] a {
	display:inline-block;
	padding-left:15px
}
    
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li:after {
    position: absolute;
    right: .25em;
    content: "\203A";
    font: bold 1.1em MyriadProRegular,Helvetica,Arial,sans-serif;
  }
}
