.clear {clear: both;}
.white {color: #fff!important;}
.black {background: #000!important;}

/***** PRIMARY NAV ******/

#display-mobile {display:none}
#display-mobile label {
	width: 40px;
	height: 30px;
	position: absolute;
	right: 0;
	top: 20px;
	background-size: 100%;
	cursor: pointer;
	display: block;
}

nav.primary {
	display:block;
	width:100%;
	position:relative;
	z-index: 999;
	text-align: right;
	margin-top: 2em;
}
nav.primary ul {
    margin:0; 
    padding:0;
}
nav.primary ul li {
    display:inline-block;
	list-style-image:none;
}
nav.primary ul li a {
    color:#000;
    font-size:18px;
	letter-spacing: 1px;
    display:block;
	padding: 0 10px;
	font-weight: 700;
    position:relative;
    font-family:'Roboto', sans-serif;
    text-align:center;
	text-transform: uppercase;
    -webkit-transition:.4s ease-in;  
    -moz-transition:.2s ease-in;  
    -o-transition:.2s ease-in;  
    transition:.2s ease-in;	
}		
nav.primary ul li a.click{
    cursor: pointer;
    z-index: 12;
    top: 0;
    right: 0;
    width: auto;
    height: auto
}

/* sub level */
nav.primary ul ul {
    background:#fff;
    box-shadow: 1px 1px 10px -5px rgba(0,0,0,0.40);
    position: absolute; 
    z-index: 9999;
    padding: 5px;
	right: 0;
	display: none;
}
nav.primary ul ul li {
	width:175px; 
	padding: 0; 
	line-height: normal; 
	right: 0;
}
nav.primary ul ul li a { 
    font-size:16px;
    color:#000;
	text-transform: capitalize;
	text-align: right;
}
nav.primary ul ul li a:hover {color: #000;}
nav.primary ul li:hover > ul {display:block;}


/******** MEDIA QUERIES ***************/


@media screen and (max-width: 1200px) {
  nav.primary ul li a {font-size: 15px;}
}


@media screen and (max-width: 1090px) {
  nav.primary ul li a {font-size: 14px;}
}


@media screen and (max-width: 1090px) {	
	/*==============================
		Mobile Nav Styles
	================================*/
	nav.primary{display:none;}
	#display-mobile {display: block; position: absolute; z-index: 999; width: 100%; right: 40px; top: 30px;}
	#display-mobile input {display: none;}

	.open {
	  background: #fff;
	  width: 40px;
	  height: 2px;
	  display: block;
	  cursor: pointer;
	  position: relative;
	}
	.open.black {background: #000!important;}
	.open:before {
	  content: "";
	  background: #fff;
	  width: 40px;
	  height: 2px;
	  display: block;
	  position: relative;
	  top: -5px;
	  transform: rotate(0deg);
	  transition: all 0.3s ease;
	}
	.open.black:before {background: #000!important;}
	.open:after {
	  content: "";
	  background: #fff;
	  width: 40px;
	  height: 2px;
	  display: block;
	  position: relative;
	  top: 3px;
	  transform: rotate(0deg);
	  transition: all 0.3s ease;
	}   
	.open.black:after {background: #000!important;}
	/*.menuOpen {
	  display: block;
	  cursor: pointer;
	  position: absolute;
	  right: 0;
	}    */
	.mobilemenu {
	  position: fixed;
	  z-index: 99;
	  width: 100vw;
	  height: 100vh;
	  top: 0;
	  left: 0;
	  background: rgba(0, 0, 0, 0.95);
	}
	nav.mobile {
	  position: relative;
	  top: 10%;
	  font-size: 16px;
	  text-align: center;
	  width:100%;
	  margin:0 auto;
	  box-sizing: border-box;
	  padding:0 50px;
	}    
	nav.mobile ul {
	  list-style: none;
	  padding: 0;
	  margin: 0 auto;
	}
	nav.mobile ul li {
		list-style-image: none;
		padding: 0;
	}
	nav.mobile ul li a {
	  display: block;
	  color: #fff;
	  text-decoration: none;
	  transition: color 0.5s;
	  padding: 15px 0;
	  font-size: 22px;
	  font-family: 'Roboto', sans-serif;
	}
	nav.mobile ul li a:hover {color: #d3daf3;}

	.menuEffects {
	  opacity: 0;
	  z-index:99;
	  visibility: hidden;
	  transition: opacity 0.5s, visibility 0.4s;
	}	
	#menuToggle:checked ~ .menuEffects {
	  opacity: 1;
	  visibility: visible;
	  transition: opacity 0.5s;
	}
	#menuToggle:checked ~ .menuOpen .open {background-color: #fff!important;}
	#menuToggle:checked ~ .menuOpen .open:before {
	  content: "";
	  background: #fff!important;
	  width: 40px;
	  transform: rotate(45deg);
	  position: absolute;
	  top: 0;
	  right: 0;
	  z-index: 999;
	}
	#menuToggle:checked ~ .menuOpen .open:after {
	  content: "";
	  background: #fff!important;
	  width: 40px;
	  transform: rotate(-45deg);
	  position: relative;
	  top: 0;
	  right: 0;
	  z-index: 999;
	}

}

@media screen and (max-width:490px) {
	#display-mobile {right: 20px;}
}