@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i'); /* others if needed light: 300, 300i; semi-bold: 600, 600i; extra-bold: 800, 800i; */ 
* { margin: 0; padding: 0; }
html, body {font-family: 'Open Sans', sans-serif; font-weight: normal; margin: 0; padding: 0; color: #425563; background-color: #fff;}

/*
colours:
MSI logo blue: 0090D3
text: 252525
bottom grey: 666666
some sub heads: 666666

*/

/* general tags */
p {  font-weight: normal; color: #666666;}
h1 { font-weight: bold; font-size: 2em; text-align: center; margin-bottom: .5em; color: #666666; letter-spacing: 0em; }
h2 { font-weight: normal; color: #666666;}
h3 { font-weight: normal; font-size: 1.0em; text-align: left; color: #0090D3; }
h4 { font-weight: normal;}
h5 { font-weight: normal;}
h6 { font-weight: normal;}
a { color: #0090D3; text-decoration: none;}
a:hover { color: #666666; text-decoration: underline;}
nav { clear: both; }
img { border: none; max-width: 100%; }
sup { font-size: 0.65em; height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; bottom: 1ex; }
	
#container { width: 100%; min-height: 100%; margin: 0 auto; }
#head_section { float: left; width: 100%;}
#head_section_inner { max-width:1000px; width: 100%; margin: auto; padding: 0.5em 0; }
#identity { float: left; width: 100%; color: #666666; letter-spacing: 0.2em; font-size: 0.75em; }
#identity img { max-width: 100%; margin: 10px 0; vertical-align: middle; }
#identity_logo { float: left;  }
#identity_company { float: left; width: 90%; margin-left: 10px;}
#action_call { float: left; width: 95%; margin: 1em 2%; }
#action_call p { float: right; color: #666666; font-size: 0.85em; letter-spacing: 0.1em; }
#action_call span { font-size: 2em; color: #0090D3; margin-right: 0.2em; vertical-align: -0.2em;}
#thin_line { border-bottom: 1px solid #0090D3; width: 100%;  float: left; }
#banner
{
	width: 100%;
	float: left;
	position: relative;
	background-color: #000000;
	background-size: cover;
	min-height: 150px;
	max-height: 350px;
}

#menu_trigger { background-color:transparent; position: absolute; right: 20px; top: 40px; display: none; cursor:pointer; }
#menu_trigger img { max-width: 100%;}
#menu_trigger span { font-size: 2em; color: #0090d3;}
#menu { max-width:1000px; width: 100%; margin: auto; }
#menu_inner { clear: both; width: 100%;}
#menu ul { float: left; padding: 0%; width: 100%; list-style-type: none; font-size: 0.9em; font-weight: bold; background-color: #0090D3;}
#menu li { float: left; margin: 0; padding: 10px 0 10px 4%; background-color: transparent; width: 96%; border-top: 1px solid #ffffff;}
#menu li:first-child { border-top: none;}
#menu li a { color: #ffffff; }
#menu li a:hover { color: #666666; text-decoration: none;}
#menu li.withdrop { cursor:pointer; background-image:url('/images/structural/menu-arrow.png'); background-repeat: no-repeat; background-position: right 20px; color: #ffffff;}
#menu li.withdrop:hover { color: #666666; text-decoration: none;}
#menu li ul { width: 95%;border-top: none;}
/*#menu li ul {  position: absolute;  clear: both; z-index: 20; background-color: #ffffff; padding: 0 1.5em 1em 1.0em; margin: 0; font-size: 1em;font-weight: normal; -webkit-box-shadow: 9px 6px 6px 0px rgba(0,0,0,0.2);
box-shadow: 9px 6px 6px 0px rgba(0,0,0,0.2);
border-bottom-right-radius: 5px; 
border-bottom-left-radius: 5px;} */
#menu li ul li {  float: left; clear: both; margin: 1em 0; padding: 5px 0;border-top: none; } 
#menu li ul li a { color: #dddddd; }
#menu li.live ul li a { color: #000000; }
#menu li.live ul li a:hover { color: #666666; }
#menu li.live ul li.live a { color: #666666;  }
#menu li ul li i { color: #666666; font-size: 1.5em; }
#menu li ul li.second { margin: 0.5em 0 0 0; border-top: none; }
#menu li ul li.third { margin: 0.1em 1.5em; font-size: 0.9em;border-top: none; }

#menu .sub_menu { display: none; }

#bg_holder {    position: absolute; margin: 0px; padding: 0px; width: 100%;  height: 100%; overflow: hidden;  }
.banner_bkgrnd { position: absolute; width: 100%; height:350px; background-size: cover; background-repeat: no-repeat; background-position: center center; left: 150%;}
#bg_1 { background-image: url('/images/structural/banner-image-1.jpg'); left: 0%; }
#bg_2 { background-image: url('/images/structural/banner-image-2.jpg'); }
#bg_3 { background-image: url('/images/structural/banner-image-3.jpg'); }
#bg_4 { background-image: url('/images/structural/banner-image-4.jpg'); }
#bg_5 { background-image: url('/images/structural/banner-image-5.jpg'); }

#banner_inner_tint { float: right; width:90%; max-width: 300px; height: 100%; background-color: #ffffff; opacity: 0.6; padding: 5% 3% 5% 3%; }
#banner_inner_tint p { font-size: 1.2em; color: #000000; font-weight: bold; text-align: left;}

#fat_line {  width: 100%;  float: left; background-color: #0090D3;  }
#strap_line { max-width:1000px; width: 90%; margin: auto; padding: 0.5em; }
#strap_line p { font-size: 1em; text-align: center; letter-spacing: 0.3em; color: #ffffff; }

/* end of the top sections */

/* content settings */
#content { width:100%; max-width: 1000px; margin: auto;  }
#content h1 { font-weight: bold; font-size: 1.5em; color: #666666; text-align: left; margin: 1em 0; }
#content .special_col_left { float: left; width: 90%; }
#content .special_col_right { float: right; width: 90%; }
#content .std_col { float: left; width: 90%; margin: 0 5%; }
#content .std_col_left { float: left; width: 90%; margin:1em 5%; }
#content .std_col_right { float: left; width: 90%; margin-left:5%; }
#content .two_one_col_left { float: left; width: 90%; margin-left:5%;}
#content .two_one_col_right { float: right; width: 90%; margin-left:5%; }
#content .std_3col_left { float: left; width: 90%; margin-left:5%;}
#content .std_3col_middle { float: left; width: 90%; margin-left:5%; }
#content .std_3col_right { float: left; width: 90%; margin-left:5%;}
#content .std_4col_ll { float: left; width: 45%; margin-left: 5%; }
#content .std_4col_lr { float: left; width: 45%; margin-left:4%; }
#content .std_4col_rl { float: left; width: 45%; margin-left:4%; clear: left; }
#content .std_4col_rr { float: right; width: 45%; margin-left: 5%; }
#content .caption { float: left; width: 100%; }
#content .caption_left { float: right; width:90%; }
#content .caption_right { float: left; }

/*
.std_col h2, .std_col_left h2, .std_col_right h2, .two_one_col_left h2 { font-weight: bold; color: #999; font-size: 0.85em; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.5em 0;}
.std_col h3, .std_col_left h3, .std_col_right h3 { font-weight: bold; color: #999; font-size: 0.9em; letter-spacing: 0.05em; margin: 0.5em 0;}
.std_col h4, .std_col_left h4, .std_col_right h4 { font-weight: bold; color: #0090D3; font-size: 0.9em; letter-spacing: 0.05em; margin: 0.5em 0;}
.std_col p, .std_col_left p, .std_col_right p { font-size: 0.9em; line-height: 175%;  }
.std_col ul, .std_col_left ul, .std_col_right ul { font-size: 0.9em; line-height: 175%; list-style: square inside url('/images/structural/bullet.png'); margin: 0.2em 1em; }
*/
#content .col h1 { font-weight: bold; font-size: 1.5em; color: #666666; text-align: left; margin: 1em 0 0.5em 0; }
#content .col h2 { font-weight: bold; color: #999; font-size: 0.85em; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.5em 0;}
#content .col h3 { font-weight: bold; color: #999; font-size: 0.9em; letter-spacing: 0.05em; margin: 0.5em 0;}
#content .col h4 { font-weight: bold; color: #0090D3; font-size: 0.9em; letter-spacing: 0.05em; margin: 0.5em 0;}
#content .col p { font-size: 0.9em; line-height: 175%; margin-bottom: 1em;  }
#content .col ul { font-size: 0.9em; line-height: 175%; list-style: square outside url('/images/structural/bullet.png'); margin: 0.2em 1em 1em 1em; padding-left: 2em;}
#content .col li {  line-height: 125%; margin-top: 0.3em; }


.caption_left p, .caption_right p { font-size: 0.8em; }
p.caption { font-size: 0.75em; font-style: italic;}


#news_block { border: 1px solid #0090D3; }
#news_block .news_header { background-color: #0090D3;float: left; width: 100%; padding: 0;}
#news_block .news_header h3  { float: left; width:40%; font-weight: normal; color: #ffffff; font-size: 1.0em; margin: 0.2em 1em;}
#news_block .news_header p { float: right; width:40%; text-align: right; color: #ffffff; font-size: 0.75em; margin: 0.3em 1em;}
#news_block .news_header i .fa { color: #ffffff; }
#news_block .news_header a { color: #ffffff; }
#news_block .news_header a:hover { color: #ffffff; }
#news_block .news_item { width: 90%; padding: 1em; float: left; } 
#news_block .news_item h1 { color: #0090D3; font-size: 0.9em; text-align: left; margin: 0; } 
#news_block p.news_date, #news_block p.news_venue { font-size: 0.75em; line-height: 120%;}
#news_block p.news_detail {  font-size: 0.8em; line-height: 140%; margin: 0.5em 0 0 0;}
#contact_block { border: 1px solid #0090D3; max-width: 350px; min-width: 280px; float: right; }
#contact_block .contact_header { background-color: #0090D3;float: left; width: 100%; padding: 0;}
#contact_block .contact_header h3  { float: left; font-weight: normal; color: #ffffff; font-size: 1.0em; margin: 0.2em 1em;}
#contact_block p.address { font-size: 0.75em; line-height: 120%; margin: 10px; }
#contact_block p.regoffice { font-size: 0.65em; line-height: 120%; margin: 10px; }

#distributor .dist_block { float: left; clear: both; width: 100%; border-top: 1px solid #0090D3; padding-top:1em;}
#distributor .dist_block_inner { float: left; clear: both; width: 100%; line-height: 100%; margin: 0; padding: 0;}
#distributor .dist_block .dist_label { float: left; width: 50px; font-size: 0.85em; font-style: italic; text-align: right; padding-right: 1em; }
#distributor .dist_block .dist_content { float: left; margin-bottom: 0.5em;}
#distributor .dist_block .dist_content h2 { margin: 0;}
#distributor .dist_block .dist_content p { line-height: 120%; font-size: 0.85em; margin: 0;}

/* end of content sections */

#bottom_fat_line {  width: 100%;  float: left; background-color: #0090D3;  }

#bottom_content {width:90%; max-width: 1000px; margin: auto; }
#bottom_logos { width: 90%; float:left; font-size: 0.9em; color: #ffffff; font-weight: normal;}
#bottom_logos img { max-width: 100%; margin: 10px 0; vertical-align: middle; }
#bottom_logos a { color: #ffffff; }
#bottom_logos a:hover { color: #cccccc; text-decoration: none; }
#bottom_menu {width: 90%; float: right;}

#bottom_menu ul { color: #ffffff; padding: 0; list-style: none; margin: 1em 0; max-width: 600px; float: left; }
#bottom_menu li { margin: 0; color: #ffffff; font-size: 0.85em; padding: 0.5em ; background-color: transparent;} 
#bottom_menu li a { color: #ffffff; }
#bottom_menu li a:hover { color: #cccccc; text-decoration: underline; }

#footer {  width: 100%;  float: left; background-color: #666666;  }
#small_print { margin: auto; max-width: 1000px; width: 90%; padding: 1em; }
#small_print #copyright { font-size: 0.7em; text-align: center; color: #ffffff; }
#small_print #footer_menu { color: #ffffff; }
#small_print #footer_menu .site_menu { float: left; width: 45%; min-width: 200px; }
#small_print #footer_menu ul {list-style-type: none; font-size: 0.9em; font-weight: bold; }
#small_print #footer_menu a {color: #ffffff; }
#small_print #footer_menu ul li ul { margin-left: 0.5em; font-size: 0.8em; font-weight: normal;} 
#small_print #footer_menu ul li ul li.second { margin-top: 0.5em;}
#small_print #footer_menu ul li ul li.third { margin-left: 1em; }

/* control classes */
.clear { clear: both; }
.height_20 { height: 20px;}
.height_50 { height: 50px;}
.gap_20 { margin-top: 20px; }
.gap_50 { margin-top: 50px; }

/* cookie control stuff */
#cookie_control { position: fixed; bottom: 0; -webkit-box-shadow: 0px 0px 4px 4px rgba(134,134,134,0.9); -moz-box-shadow: 0px 4px 4px 4px #666;  box-shadow: 0px 0px 4px 4px rgba(134,134,134,0.9); width: 100%; background-color: #425563; z-index: 200;  }
#cookie_control .cookie_bar { margin: 10px 20px; }
#cookie_control .bar_left { float: left; }
#cookie_control .bar_right { float: right; }
#cookie_control .cookie_bar p { color: #ffffff; margin: 0; font-size: 0.85em; padding: 1em 0; }
#cookie_control .cookie_bar a { color: #ffffff; text-decoration: none; }
#cookie_control .cookie_bar a:hover { text-decoration: underline; }
#cookie_control .cookie_bar p img {margin: 0 1em; vertical-align: middle; }
#cookie_dismiss { cursor: pointer; }