/* ––––––––––––––––––––––––––––––––––––––––––––––––––

Screen style's

–––––––––––––––––––––––––––––––––––––––––––––––––– */



<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 



.menu-container {

	border-bottom: 2px solid #000; border-top:1px solid #000;

	border-right: none;

	border-left: none;

	background:#e9ebe9;

	background: -moz-linear-gradient(top, rgba(253,254,253,1) 0%, rgba(234,236,234,1) 47%, rgba(229,230,230,1) 100%);

	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(253,254,253,1)), color-stop(47%, rgba(234,236,234,1)), color-stop(100%, rgba(229,230,230,1)));

	background: -webkit-linear-gradient(top, rgba(253,254,253,1) 0%, rgba(234,236,234,1) 47%, rgba(229,230,230,1) 100%);

	background: -o-linear-gradient(top, rgba(253,254,253,1) 0%, rgba(234,236,234,1) 47%, rgba(229,230,230,1) 100%);

	background: -ms-linear-gradient(top, rgba(253,254,253,1) 0%, rgba(234,236,234,1) 47%, rgba(229,230,230,1) 100%);

	background: linear-gradient(to bottom, rgba(253,254,253,1) 0%, rgba(234,236,234,1) 47%, rgba(229,230,230,1) 100%);

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfefd', endColorstr='#e5e6e6', GradientType=0 );

	z-index: 999;

}

.menu-mobile {

	display: none;

	padding: 20px;

}

.menu-mobile:after {

	content: "";

	background:url(../img/mobile-menu-icon.png) no-repeat;

	font-size: 2.5rem;

	padding: 0;

	float: right;

	position: relative;

	top: 50%;

	-webkit-transform: translateY(-25%);

	-ms-transform: translateY(-25%);

	transform: translateY(-25%);

}

.menu-dropdown-icon:before {

	content: "+";

	display: none;

	cursor: pointer;

	float: right;

	padding: 13px 25px;

    background: #fff;

    color: #333;

    font-size: 21px;

}

.menu > ul {

	margin: 0 auto;

	width: 100%;

	list-style: none;

	padding: 0;

	position: relative;

	/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */

	box-sizing: border-box;

}

.menu > ul:before, .menu > ul:after {

	content: "";

	display: table;

}

.menu > ul:after {

	clear: both;

}

.menu > ul > li {

	float: left;

	padding: 0;

	margin: 0;

}

.menu > ul > li a {

	    text-decoration: none;

    display: block;

    color: #505050;

    padding: 16px 64px;

    border-right: 1px solid #cdcece;

    text-transform: uppercase;
	
	font-family: "Oswald", sans-serif;

    font-size: 15px;

    font-weight: normal;

}

.menu > ul > li a:hover {

	background-color: #cc0000 !important;

	color: #fff;

}

.menu > ul > li > ul {

	display: none;

	width: 100%;

    background: #fff;

    padding: 40px 80px;

    position: absolute;

    z-index: 99;

    left: 0;

    margin: 0;

    list-style: none;

    box-sizing: border-box; border-bottom:2px solid #a32390;

}

.menu > ul > li > ul:before, .menu > ul > li > ul:after {

	content: "";

	display: table;

}

.menu > ul > li > ul:after {

	clear: both;

}



/*.menu > ul > li > ul > li:first-child {

	width:28%; }*/



.menu > ul > li > ul > li {

	margin: 0;

	padding-bottom: 0;

	list-style: none;

	width: 20%;

	background: none;

	float: left; line-height:20px;

}

.menu > ul > li > ul > li a {

	color: #505050;

    padding: 0px;

    width: 95%;

    display: normal;

    border-bottom: none;

    border-right: none;

    font-size: 12px;

     font-family: 'robot', sans-serif; font-weight:normal;

}

.menu > ul > li > ul > li a:hover {

	background-color: transparent !important;

	color: #cc0000 !important; font-weight:bold;

}

.menu > ul > li > ul > li > ul {

	display: block;

	padding: 0;

	margin: 10px 0 0;

	list-style: none;

	box-sizing: border-box;

}

.menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after {

	content: "";

	display: table;

}

.menu > ul > li > ul > li > ul:after {

	clear: both;

}

.menu > ul > li > ul > li > ul > li {

	float: left;

	width: 100%;

	padding: 2px 0;

	margin: 0;

	font-size: .8em;

}

.menu > ul > li > ul > li > ul > li a {

	border: 0;

}

.menu > ul > li > ul > li > ul > li a:hover {

	background-color: transparent !important;

	color: #e51b24 !important;

}

.menu > ul > li > ul.normal-sub {

	width: 300px;

	left: auto;

	padding: 10px 20px;

}

.menu > ul > li > ul.normal-sub > li {

	width: 100%;

}

.menu > ul > li > ul.normal-sub > li a {

	border: 0;

	padding: 1em 0;

}

/*========================= sub-menu css =============================

*/

/* ––––––––––––––––––––––––––––––––––––––––––––––––––

Mobile style's

–––––––––––––––––––––––––––––––––––––––––––––––––– */



@media only screen and (max-width: 959px) {

.menu-container {

	width: 100%;

}

.menu-mobile {

	display: block;

	color:#000;

	font-size:18px;

}

.menu-dropdown-icon:before {

	display: block;

}

.menu > ul {

	display: none;

}

.menu > ul > li {

	width: 100%;

	float: none;

	display: block;

}

.menu > ul > li a {

	padding: 20px;

	width: 100%;

	display: block;

}

.menu > ul > li > ul {

	position: relative;

	padding: 20px 20px;

}

.menu > ul > li > ul.normal-sub {

	width: 100%;

}

.menu > ul > li > ul > li {

	float: none;

	width: 100%;

	margin-top: 20px;

}

.menu > ul > li > ul > li:first-child {

	margin: 0;

	width:100%;

}

.menu > ul > li > ul > li > ul {

	position: relative;

}

.menu > ul > li > ul > li > ul > li {

	float: none;

}

.menu .show-on-mobile {

	display: block;

}

}