@charset "utf-8";
/* CSS Document */
/*Mobile specific css to make the website responsive on small width screens */

/* How to read document */
/* CSS styling is divided up into multiple parts indicated by the UPPERCASE titles */

/*Media queries*/
@media (max-width: 730px) {

/*--HTML TAG DEFINITIONS--*/
h1{
	font-size:24px;
	line-height:23px;
}

/*--MAIN LAYOUT--*/
/*This changes the general layout of the page which includes position of content, headers, footers and block elements. This does not change specific element styling which is done in the Elements section*/
/* h = header, f = footer, b = main content body, m = menu */
#h_container, #h_container_spl{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	height: 50px;
	background: #4D5261;
	-webkit-box-shadow: 0px 2px 15px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 2px 15px 2px rgba(0,0,0,0.4);
	box-shadow: 0px 2px 15px 2px rgba(0,0,0,0.4);
}
#b_container{
	margin-top:60px;
	width: auto;		
}

#f_container, .page-wrap:after{
	height: 590px;
}
#m_container{
	height: 100%;
	width: 69%;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	background: #000;
	opacity: 0.9;
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
	transition: transform 0.5s ease-in-out;
	transform: translate3d(-100%,0,0);
	-webkit-transform: translate3d(-100%,0,0);
}
.page-wrap {
	/*Has to equal to #f_containter height with margin-top*/
	margin-bottom: -590px;
}
/*STANDARD FLOAT LAYOUT*/

.fl_container .fl_left55{
	float:none;
	width:auto;
}

.fl_container .fl_right45{
	float:none;
	width:auto;
	margin-top:40px;
}
.fl_container .fl_left70{
	float:none;
	width:auto;
}

.fl_container .fl_right30{
	float:none;
	width:auto;
	margin-top:40px;
}
.fl_container .fl_tricolumn{
	float: none;
	width: auto;
	margin-right: 0px !important;
	margin-top: 40px;
}
/*--SHOWCASE LAYOUT--*/
/*The showcase layout/container is used to represent something along with an image/map for example an address or hotel description */
.showc_container .showc_left{
	float: none;
	width: auto;
}
.showc_container .showc_right{
	float: none;
	width: auto;
}
	
/*----- SPECIFIC CONTENT LAYOUT ELEMENTS ----- */

/*--HEADER SECTION--*/
/*Defines the container and parts of the header of the page*/
.h_incontainer{
	width: auto;
}
.h_incontainer .munlogo{
	position:absolute;
	height:30px;
	width:100px;
	left:55px;
	top: 10px;
	background:url(/img/fixed/name_logo_mob.png) no-repeat;
	background-size: 100px 30px;
}
.h_incontainer .munlogo_spl{
	position:absolute;
	height:30px;
	left:55px;
	top: 10px;
	background-size: 100%;
}
.h_incontainer .datehold{
	display:none;
}
.h_incontainer .menutoggle{
	visibility:visible;
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	left: 5px;
	top: 5px;
	background:url(/img/buttons/menu.png) no-repeat;
	background-size: 40px 40px;
}
.h_incontainer .menutoggle.clicked{
	background-color: #30333D;
}
.h_incontainer .searchbutton{
	visibility:visible;
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 5px;
	top: 5px;
	background:url(/img/buttons/search.png) no-repeat;
	background-size: 40px 40px;
}
.h_incontainer .livebutton{
	visibility:visible;
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 45px;
	top: 5px;
	background:url(/img/buttons/live.png) no-repeat;
	background-size: 40px 40px;
}


/*---MENU SECTION---*/
/*The menu shown on all pages is defined by the following style*/
#m_container.expand{
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}

#m_container .m_incontainer{
	width: auto;
	margin-top:60px;
	font-size:15px;
	-webkit-overflow-scrolling:  touch;
	overflow-y: auto;
}
#menu_item{
	margin-bottom:100px;
}
#menu_item ul li{
	float: none;
}

#menu_item ul li a.dropdown{
	width: 90%;
	color: #FFF;
	font-weight:700;
	text-align:left;
	padding-left:9%;
	border-right: 0px;
}
#menu_item ul:first-child li a.dropdown{
	border-left: 0px;
}
#menu_item ul:last-child li a.dropdown{
	display: none;
}
#menu_item ul li a.dropdown:hover{
	background: none;
}

#menu_item ul li.sublinks{
	display:block;
	background: none;
	font-weight: 300;
	font-size: 13px;
}

#menu_item ul li.sublinks a{
	width: 85%;
	height: 35px;
	line-height:34px;
	padding-left: 14%;
	text-align:left;
}
#menu_item ul li.sublinks a:hover{
	background: none;
}

/*--SECTION MENU--*/
/*Section menus are based on just normal buttons*/
.section_menu_container{
	margin-top: 50px;
}
.section_menu_incontainer{
	width: 100%;
}
.section_menu_incontainer .buttonmenu{
	margin-bottom: 0.5em;
	margin-left: 10px;
}

/*--FOOTER SECTION--*/
/*Defines the container and parts of the footer of the page*/
#f_container .f_incontainer{
	width: auto;
}
.f_incontainer .float_column{
	float: none;
	width: auto;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:20px;
}
.f_incontainer .float_column:last-child{
	width: auto;
	padding-top:30px;
	border-top: 2px solid #333;
}

/*--SLIDER--*/
/*Defines container and elements for homepage slider*/
#b_slider{
	margin-top: 50px;
	overflow: hidden;
}

#b_slider h1{
	font-size: 30px !important;
}

/*--SPONSOR or HIGHLIGHT SECTION--*/
/*Defines container for sponsors or any content singled out in a coloured box*/
.highlight_container .sponsors .entry_sponsor {
	width: auto;
}

/*--AGENDA--*/
/*Defines the styling for the agenda/calendar*/
.calendar_event .time{
	width: 95%;
}
.calendar_event .title{
	width: 95%;
	padding-left:0em;
}

/*--FACE AND TEXT FOR BOARD OF DIRECTORS--*/
/*Defines the styling for the board of director images and their associated text descriptions*/
.bod_container .bod_single{
	width:100%;
}

/*--ALERT ANNOUNCE--*/
/*Used to style urgent messages on website homepage*/
.alert_container{
	margin-top: 50px;
}
.alert_incontainer{
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 80%;
	text-indent: 0px;
	padding-left: 40px;
	height: auto;
	line-height: 22px;
	background-position: 5px 50%;
}
.alert_incontainer.custom{
	width: 80% !important;
}

}