@font-face {
  font-family: 'PrimusSpecial';
  src: URL('PrimusSpecial.ttf') format('truetype');
}

@font-face {
    font-family: 'PrimusSpecial';
    src: url('primusspecial.woff2') format('woff2'),
         url('primusspecial.woff') format('woff'),
		 url('PrimusSpecial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}



/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	margin-top:10px;
	padding: 0;
	background-color: #c0272d;
	font-size:35px;	
	font-family:PrimusSpecial;
	height: 50px;	
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */
nav:after {
	content:"";
	display:table;
	clear:both;
}


 nav label span{ 
	 padding:0px 10px 0px;
	
 }

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	padding:0px;
	margin: 0;
	list-style: none;
    position: relative;
	text-align:center;
	height:100%;
}


/* Positioning the navigation items inline */
nav ul li {
	margin: auto;
	display:inline-block;
	background-color: #c0272d;
	margin-right: auto;
	text-align:left;
}


/* Styling the links */
nav a {
	display:block;
	padding:0px 5px 0px;	
	color:#FFFFFF;
	text-decoration:none;
	height:50px;
}

nav img{
	width: auto; 
	height: 35px; 
	position: relative;
	top:2px;
}


/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 50px; 	
}
	
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:block;	
	z-index:100;
	animation: growDown 300ms ease-in-out forwards;
	transform-origin: top center;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
	float:none;
	display:list-item;
	position: relative;
	background-color: #555;	
}
nav ul ul li:hover { background: #c0272d; }

nav ul ul img{
	display:block;
}


nav a, nav a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

nav a:hover {
	color:#F2EAEA;
	border: none;
	text-decoration: none;
}

.header {	
  text-align: center;
}
.header img{
 margin-top:10px;
}

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 980px) {

	nav{
		margin-top:0px;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  Checkbox*/
	.toggle + a,
	.menu {
		display: none;
	}
	
	/* Stylinf the toggle label */
	.toggle {
		display: block;
	/*	padding:5px 20px 0px;	*/
		color:#FFFFFF;
		text-decoration:none;
		border:none;
		text-align:left;
		font-size:35px;
		padding-left:10px;
		
	}
	
	nav a:hover,
	.toggle:hover {
		background-color: #c0272d;
		color: #F2EAEA;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
		top: 6px; 
		z-index: 100;
		animation: growDown 300ms ease-in-out forwards;
		transform-origin: top center;
	}
	
	/* Change menu item's width to 100% */
	nav ul li {
		background-color: #555;
		display: block;
		width: 100%;
	}
	
	nav ul li img{
		display: block;		
	}
		
	 .NavArrowDown{ 
		float:right;
		/* position:relative; */
	 } 
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		background-color: #444;
		display: block;
		width: 100%;
		max-width: nons;
		border-style:none;
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
	
	nav ul li ul li .toggle{
		color: #FFFFFF;
	}

	nav ul ul li img{
		display: block;
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #FAFAFA;
		/* has to be the same number as the "line-height" of "nav a" */
	}
}





@media all and (max-width : 500px) {
	.headercards, .copyright, .header{
		display:none;
	}
}

@keyframes growDown {
	0% {transform: scaleY(0)}
	100% {transform: scaleY(1)}
}