@import url('https://fonts.googleapis.com/css?family=Vollkorn+SC');

@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Ubuntu+Condensed|Neuton');


/***********************************************************************/
/********************************  Header  *****************************/
/***********************************************************************/

body {
	background: #fdfdfd;
}

#headerTop {
	background: #248f24;
	padding: 0;
	margin: 0;
}

#headerTop p {
	font-size: 15px;
	color: #f2f9ff;
	margin: 0;
	padding: 10px 20px;
	font-family: 'Ubuntu Condensed',Serif;
	text-transform: uppercase;
	line-height: 10px;
}

#headerMiddle {
	background: #ffff66;
	padding: 5px 20px;
}

#headerMiddle .logo img {
	margin-top: 20px;
	width: 120px;
	height: auto;
}

#headerMiddle .brandName h1 {
	font-size: 30px;
	color: #248f24;
	text-align: center;
	font-family: 'Neuton';
	text-transform: uppercase;
	line-height: 25px;
}

#headerMiddle .brandName h4 {
	font-size: 16px;
	color: #453427;
	text-align: center;
	font-family: 'Bree Serif',Serif;
	line-height: 5px;
	/*text-transform: uppercase;*/
}

#headerMiddle .brandName p {
	font-size: 15px;
	color: #321704;
	text-align: center;
	font-family: 'Vollkorn SC',Serif;
	line-height: 25px;
	/*text-transform: uppercase;*/
}

.bg-headerMiddle {
	background: #ffff66;
}

#specialLink ul li {
	list-style: none;
	/*text-align: right;*/
	color: #d41f00;
	font-size: 13px;
}

#specialLink ul li:hover {
	background: rgba(0,0,0,0.0);
	color: #d41f00;
	cursor: pointer;
}

#specialLink ul li .fa {
	font-size: 15px;
	line-height: 8px;
}

#specialLink ul li:hover .fa {
	text-align: right;
	animation: arrow 1s;
	transform: rotate(180deg);
}

@-webkit-keyframes arrow {
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

@keyframes arrow {
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

.container-fluid,.container {
	padding: 0;
}

#headerBottom {
	/*margin: 5px 0;*/
	border-radius: 15px;
	background: #248f24;
	/*background: linear-gradient(45deg , rgba(255,255,255,0.7) 40%,rgba(255,255,255,0.9));*/
	padding: 5px 0;
}

#headerBottom ul {
	margin: 0;
}

#headerBottom ul li {
	list-style: none;
	display: inline;
	line-height: 0;
	margin: 0;
	padding: 7px 10px;
	font-size: 13px;
	text-transform: uppercase;
}

#headerBottom ul a li {
	color: #fff;
}

#headerBottom ul a li:hover {
	border-top: 2px solid #77c995;
	background: rgba(0,0,0,0.5);
	color: #77c995;
}


.footer {
	background: #ffff66;
}

.footer h3 {
	font-family: 'Quicksand',Serif;
	font-size: 20px;
	color: #248f24;
}

.footer a {
	font-family: 'Quicksand',Serif;
	font-size: 20px;
	color: #6b0411;
}
	#headerBottom #closeMenu {
		display: none;
	}
	#showMenu {
		display: none;
	}
.affix {
	top: 0;
	width: 100%;
	z-index: 9999 !important;
	border-radius: 0;
	animation: topMenu 3s;
}

.affix + .container-fluid {
	padding-top: 70px;
}

@keyframes topMenu {
    0%   {top: -50px;}
    /*50% {top: 10px;}*/
    100% {top: 0px;}
}
@media (min-width: 200px) and (max-width: 1080px) {
	#specialLink {
		display: none;
	}
	#headerMiddle .logo img {
		width: 60px;
		height: auto;
	}

	#headerMiddle .brandName h1 {
		font-size: 20px;
		color: #d41f00;
		text-align: center;
		font-family: 'Neuton';
		text-transform: uppercase;
		line-height: 25px;
	}
	#headerBottom #closeMenu {
		display: inline-block;
	}

	#headerBottom {
		width: 200px;
		position: absolute;
		z-index: 999999 !important;
		animation: leftMenu 2s;
		right: 0;
		margin-top: 5px;
		background: #efcd86;
		border-radius: 0px;
		display: none;
	}

	#showMenu {
		display: inline-block;
		width: 100%;
	}
	.container-fluid {padding: 0;}
	.container {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.fa {
		color: inherit;
	}
	#headerBottom ul {
		padding: 0;
		margin: 0;
		/*display: none;*/
	}
	#headerBottom ul a li {
		width: 100%;
		padding: 15px 15px;
		display: block;
		border-radius: 0px;
		color: #6b0411;
	}
	#headerBottom ul a li:hover {
		background: #6b0411;
		color: #f2f9ff;
	}

	@keyframes leftMenu {
	    0%   {right: -260px;}
	    25% {right: 0px;}
	    50% {right: 10px;}
	    100% {right: 0px;}
	}

	.affix {
		
	}

	.affix + .container-fluid {
	}
	#headerBottom ul li .showOnMobile {display: inline;}
	#headerBottom ul li .hideOnMobile {display: none;}
	#headerBottom ul li:first-child {
		border-radius: 0px;
	}
}

.bg-white {
	background: #f2f9ff;
}