/* ---------------------------------------------------------------------------------------------------------------------------------HEADER */


#header {
	display: table;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
	position: absolute;
	top: 40px;
	z-index:999;
}
#header img {
	max-width: 30%;
	max-height: 68px;
	height: auto;
	padding: 0;
	margin-top:-10px;
	float: left;
}




/* ---------------------------------------------------------------------------------------------------------------------------------HEADER */


/* ---------------------------------------------------------------------------------------------------------------------------------FOOTER */



#Footer {
	height: auto;
	display: table;
	width: 100%;
	margin: 3% auto 0 auto;
	text-align:center;
    border-top:1px solid #355ab5;
    background: #F5F5F5;
}

.Footer-Box{
	display:table;
	width:80%;
	margin:5% auto;
	height:auto;
	background:#FFF;
	border-radius:25px;
}

.Footer-Box-Left{
	display:table;
	width:15%;
	margin:5%;
	height:auto;
	float:left;
}

.Footer-Box-Left img{
	width: 80%;
	max-width: 100px;
	height: auto;
}


.Footer-Box-Right{
	display:table;
	width:75%;
	margin:2% 0;
	height:auto;
	float:right;
}

.Footer-Container {
	display:table;
	width:21%;
	padding:2% 4% 2% 0;
	float:left;
	text-align:left;
}

.Footer-Container li{

	list-style-type:none;
	padding: 1% 0;
}


.Footer-Container a{
}

.Footer-Header{
	font-size: 1.1vw;
	font-family: 'Typewriter Bold', serif;
	color: #355ab5;
}


.Footer-Container li:hover {
	font-weight: bolder;
}



/* ---------------------------------------------------------------------------------------------------------------------------------FOOTER */


/* ---------------------------------------------------------------------------------------------------------------------------------MENU */


 .toggle, [id^=drop] {
 display: none;
}


.hidden-desktop {
    display: none !important;
  }
  
  

/* Giving a background-color to the nav container. */
nav {
	width: auto;
	display: table;
	margin: 0;
	z-index: 10;
	text-align: left;
	float: right;
}

nav li {
	list-style-type: none;
}

/* 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;
	
}
/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:relative" */
nav ul {
	float: left;
	display: table;
	padding:  0;
	list-style: none;

}

/* Positioning the navigation items inline */
nav ul li {
	margin: 3px 0 0px 0;
	display: inline-block;
	float: left;
}

/* DESKTOP MAIN MENU */
nav ul li a {
	font-size: 1.2rem;
	font-family:  'Typewriter Bold', serif;
	padding:11px 20px;
	border-radius:5px;
	transition-duration:.5s;
}

/* Styling the links */
nav a {
	display: block;
	padding: 14px 20px;
	color: #FFF;
	text-decoration: none;
	z-index: 99;
	
}
nav ul li ul li:hover {
	background: none;
}
/* Background color change on Hover */
nav a:hover {
	background-color: ;
	color: ;

}
/* 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: 46px;
	z-index: 99;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display: inherit;
	z-index: 99;

}
/* Fisrt Tier Dropdown */
nav ul ul li {
	width: 200px;
	float: none;
	display: list-item;
	
}
/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top: -60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left: 210px;
	
}

/* DESKTOP DROPDOWN MENU TEXT */

nav ul li ul li a {
	font-family: 'Typewriter', serif;
	font-size: 1.2rem;
	padding: 3px 20px;
	line-height: 1.4rem;
	color:#FFF;
}

nav ul li ul li a:hover {
	font-size: 1.4rem;
	font-family: 'Typewriter Bold', serif;
}

/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
	content: '';
}
li > a:only-child:after {
	content: '';
}


/* ---------------------------------------------------------------------------------------------------------------------------------MENU */


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------RESPONSIVE1 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------RESPONSIVE1 */

@media all and (max-width : 1100px) {
	
	
	
/* ---------------------------------------------------------------------------------------------------------------------------------HEADER */



#header {
	border-right: none;
	border-left: none;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	background:#F5F5F5;
	border-bottom: 1px solid #355ab5;
	border-top: 0px solid #FFF;
	position: relative;
	top: 0;
}
#header img {
	max-width: 45%;
	min-width: 100px;
	height: auto;
	padding: 20px 0 10px 20px;
	margin: 0 0 -15px 0;
	float: left;
}


/* ---------------------------------------------------------------------------------------------------------------------------------HEADER */





/* ---------------------------------------------------------------------------------------------------------------------------------MENU */


.hidden-mobile {
    display: none !important;
}

.hidden-desktop {
    display: block !important;
  }
  
nav {
	margin: 0 auto -10px auto;
	padding: 2% 5% 2% 5%;
	width: 90%;
}
/* Hide the navigation menu by default */
	/* Also hide the  */
.toggle + a,  .menu {
	display: none;
	padding: 5vh 0 7vh 0;
	background-color: FFF;
}

/* MAINMENU TEXT */
/* Styling the toggle label */
.toggle {
	display: table;
	width: 100%;
	padding: 0;
	margin:0;
	color: #355ab5;
	font-size: 2rem;
	text-decoration: none;
	font-family: 'Typewriter', serif;
	line-height:3rem;
	text-align:center;	
}

.toggle p{
	 font-size:36px; 
	 float:right; 
	 margin-top:-42px; 
	 color: #000;
}

.toggle:hover {
	background-color:none;
	
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
	display: block;
}
nav ul {
	margin: 0 auto;
	width: 100%;
	padding:0;
	
	
}
/* Change menu item's width to 100% */
nav ul li {
	display: block;
	width: 100%;
	margin-left: 0px;
	padding:0;
	line-height:60px;
	
	
}

nav ul li a {
	font-family: 'Myriad Pro Regular', serif;
}

nav ul ul .toggle,  nav ul ul a {
	padding: 0 20px;
	color: #000;
}

nav ul ul ul a {
	padding: 0 80px;
}

/* SUBMENU TEXT */


nav ul li ul {
	margin-top:15px;
	margin-bottom:10px;
	padding-top:5px;
	padding-bottom:15px;
	border-top:1px dashed #355ab5;
	border-bottom:1px dashed #355ab5;
}

nav ul li ul li a {
	margin:0%;
	font-size: 1.2rem;
	line-height:1.4rem;
	text-align:center;
	color:#666;
}


nav a:hover,  nav ul ul ul a {
	background-color: #355ab5;
	color: #FFF;
}
nav ul li ul li .toggle,  nav ul ul a,  nav ul ul ul a {
	color: #FFF;


}
nav ul li ul li .toggle,  nav ul ul a {
	background-color: none;
}
/* Hide Dropdowns by Default */
nav ul ul {
	float: none;
	position: static;
	color: #ffffff;
	border: none;
	margin-left: 0px;/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,  nav ul li:hover > ul {
	display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
	display: block;
	width: 100%;
}
nav ul ul ul li {
	position: static;/* has to be the same number as the "width" of "nav ul ul li" */ 

}
.gg-menu-boxed {
	display: table;
	float: right;
}
.gg-menu-boxed::before {
	float: right;
	display: table;
}

/* ---------------------------------------------------------------------------------------------------------------------------------MENU */

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------RESPONSIVE2 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------RESPONSIVE2 */


 @media all and (max-width : 600px) {
#header img {
	max-width: 70%;
	min-width: 100px;
	height: 40px;
	padding:0;
	margin:15px 0 -0px 20px;
	float: left;
}


#Footer-Symbol {
	display:table;
	width:25%;
	max-width:25%;
	max-height:25%;
	padding:5% 0 5% 5%;
	height: auto;
	float: left;
}


nav ul li {
	display: block;
	width: 100%;
}


nav ul li ul {
}

nav ul li ul li a {
	width:90%;
	padding:2% 5% 2% 5%;
	font-size: 1.4rem;
	line-height:1.4rem;
	text-align:center;
}

/* ---------------------------------------------------------------------------------------------------------------------------------FOOTER */


#Footer{
}

.Footer-Box{
	display:table;
	width:90%;
	margin:5% auto;
	height:auto;
	background:#FFF;
	border-radius:25px;
}

.Footer-Box-Left{
	width:90%;
	margin:5% 5% 1% 5%;
	padding-bottom:5%;
	border-bottom:0px dashed #355ab5;
}

.Footer-Box-Left img{
	width:50%;

}


.Footer-Box-Right{
	width:90%;
	margin:5%;
	float:left;
}


.Footer-Container {
	width: 100%;
	padding:1% 0 3% 0;
	text-align:left;
	float:left;
}

.Footer-Container ul{
	margin:2% 0;
columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	 column-gap: 8%;
	
}

.Footer-Container li{
	padding:2% 0;
	width: 100%;
	
}


.Footer-Header{
	margin:2% 0 5% 0;
	font-size: 5vw;
}


/* ---------------------------------------------------------------------------------------------------------------------------------FOOTER */


}