﻿/* Important styles */

@media screen and (min-width: 1200px)			{
	#toggle,
	#menu 	 									{ display: none !Important; }
}

#toggle											{ width: 100px; height: 100px; top: 0px; right: 0; margin: 0 30px; margin-right: 0; padding: 0; padding-top: 10px; border: 0px solid #003594; transition: all 0.3s; background: transparent; position: fixed; display: block; z-index: 1031; }

#toggle span:after,
#toggle span:before								{ top: -10px; left: 0; content: ""; position: absolute; }

#toggle span:after								{ top: 4px; }

#toggle span									{ display: block; position: relative; }

#toggle span,
#toggle span:after,
#toggle span:before								{ width: 45px; height: 4px; margin: 24px auto; background-color: #003594; transition: all 0.3s; backface-visibility: hidden; border-radius: 2px; }

#toggle:hover span,
#toggle:hover span:before,
#toggle:hover span:after						{ background-color: #003594; transition: all 0.3s; backface-visibility: hidden; border-radius: 2px; }

/* on activation */
#toggle.on										{ background-color: #CBCBCB; transition: all 0.3s; }

#toggle.on span									{ transform: rotate(90deg) translate(16px, -13px); }

#toggle.on + #menu								{ opacity: 1; transition: all 0.4s; z-index: 1031; }

/* menu appearance*/
#menu											{ width: 100%; max-width: 380px; right: 0; margin: 100px 0px 30px 0px; padding: 10px; padding-top: 20px; padding-bottom: 20px; position: fixed; color: #003594; text-align: center; background: #CBCBCB; z-index: -1;
												  opacity: 0; transition: all 0.4s; }
							  
ul,
li,
li a											{ margin: 0; margin-right: -12px; padding: 0; font-size: 18px; line-height: 28px; text-transform: none; list-style: none; display: block; }

li a											{ padding: 5px; padding-right: 46px; color: #003594; font-family: "Eurostile-LT-Std-Roman", Arial, sans-serif; font-weight: 700; text-align: right; text-decoration: none !Important; transition: all .3s; }

li a:hover,
li a:focus										{ color: #FFFFFF; }


@media screen and (max-width: 575px)			{
	#toggle										{ padding-top: 20px; }
	#toggle span,
	#toggle span:after,
	#toggle span:before							{ width: 36px; height: 4px; margin: 20px auto; }
	#toggle span:after							{ top: 0px; }
	#toggle.on span								{ transform: rotate(90deg) translate(10px, -11px); }
}

@media screen and (max-width: 480px)			{
}

