@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700');
@font-face {font-family: Museo100; src: url(../fonts/Museo100.otf);}

/*
	Text Font color : #231f20
	Second Text Font color : #333333
	Third Text Font color : #999999
	Space : 20px or 15px;
	border:#CCCCCC or #ebebeb
	overlay z-index - 99
	header z-index - 90
	Mnavbar - 90
	Margin - 10px,15px,20px
	
	Grey link color: #7E7E7E;
	
	Corporate color/ Text Link: #009fD4;
	Button background color: #009fD4;
*/
/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1000px) {
	/*Desktop Common Text & Header CSS*/
	body {font-size: 16px; line-height: 1.5em;}
	h1{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:28px;padding:0px; margin:0px 0px 15px 0px;line-height:1.4em;clear:both;}
	h2{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:24px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h3{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:20px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h4{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:17px;padding:0px; margin:0px 0px 15px 0px;line-height:1.2em;clear:both;}


	/*Desktop - Header*/
	div.mainheader{position:relative;width:1000px;margin:0 auto; }
	div.mainlogo{float:left;}

	/*Desktop - Fix header. Hide Nav bar when scroll down. Show nav bar when scroll up. Turn on from main_viewport_navigation.js Need to adjust scroll anchor 
	div.mainheaderwrapperflow{position:fixed;z-index:90;float:left;width:100%; background-color:#FFF;box-shadow: 0px 5px 6px -2px rgba(0,0,0,0.2);}
	div.mainheaderwrapper{width:100%;box-shadow: 0px 5px 6px -2px rgba(0,0,0,0.2);}
	div.mainbannerwrapper {margin-top:152px !important;}*/
	
	/*Desktop - For Flow Header and Body*/
	div.mainheaderwrapperflow{z-index:90;position:relative;float:left;width:100%;background-color:#FFF;box-shadow: 0px 5px 6px -2px rgba(0,0,0,0.2);}
	
	/*Desktop header - animation navigation*/
	.mainheaderanimatenavon{position:fixed;margin:0px 0px 0px 0px;transition: margin 0.2s ease-out ;background-color:#FFF;z-index:90;}
	.mainheaderanimatenavoff{position:fixed;margin:-105px 0px 0px 0px;transition: margin 0.2s ease-out;background-color:#FFF;z-index:90;}

	/*Desktop - Content Body*/
	div.maincontentwrapper{position:relative; float:left; width:100%; padding:0px 0px 0px 0px;} 
	div.maincontentboxwithbgimg{float:left;width:100%; background-repeat:no-repeat; background-size:cover;}
	div.maincontentboxwithshade{float:left;width:100%;background-color:#CCC;}
	div.maincontentbox{position:relative; float:left; left:50%; margin-left:-500px; width:1000px;padding:40px 0px 20px 0px; }
	/*	For background with color, use this code to align content box to center instead.  Therefore the div height will stretch with the content.
			div.maincontentbox{position:relative;width:1000px;margin:0 auto; padding:20px 0px 20px 0px;}
			div.maincontentboxwithbgcolor{background-color:#FFF !important; padding:20px !important;}
	*/

	/*Desktop - Right and Left Col*/
	div.maincontentleftcol{float:left; width:75%;}
	div.maincontentrightcol{float:right; width:22%;}
	div.maincontentrightcolnav{float:right; width:22%; padding:15px; border-radius:10px;}
	div.maincontentrightcolnav ul,div.maincontentrightcolnav li{margin:0px; padding:0px;}
	div.maincontentrightcolnav ul{ list-style:none;}
	div.maincontentrightcolnav li{ float:left; width:100%; padding:5px 0px 5px 0px;}

	/*Desktop - Footor*/
	div.mainfootorwrapper{position:relative;float:left;width:100%;font-size:14px;border-top:#CCCCCC solid 1px;margin:60px 0px 0px 0px; padding:20px 0px 30px 0px;}
	div.mainfootorbox{position:relative; width:1000px; margin:0 auto;}
	div.mainfootorleft{float:left;text-align:left;}
	div.mainfootorright{float:right;}
	div.mainfootorleft a,div.mainfootorright a{text-decoration: underline; font-weight: normal; font-style: normal;}
	div.mainfootorleft a:hover,div.mainfootorright a:hover {text-decoration: none;}
	
	/*Desktop - Color footor with three columns content*/
	div.mainfootorcolorbgwrap{width:100%; background-color:#000;padding:0px 0px 20px 0px; color:#FFF;}
	div.mainfootorcol1{float:left;width:50%; padding:30px 50px 0px 0px;}
	div.mainfootorcol2{float:left;width:35%;padding:72px 50px 0px 0px; font-size:14px;}
	div.mainfootorcol3{float:left;width:15%;padding:72px 0px 0px 0px; font-size:10px;}
	div.mainfootorcol1 strong,div.mainfootorcol2 strong{font-size:18px !important;}
	div.mainfootorcol2 a,div.mainfootorcol2 a:hover{color:#696969; font-size:14px;}
	div.mainfootorcol2 img {display:inline-block; margin:10px 5px 0px 0px;}
	div.mainfootorcol3 img{margin:0px 0px 8px 0px;}

	/*Desktop - Overlay iframe*/
	div.mainovbg{position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:#000; opacity:0.6; z-index:98; }
	div.mainovinfowrap{position:fixed; margin:0 auto; width:950px; top:40px; left:50%; background-color:#FFF; margin:0px 0px 0px -475px; padding:20px;z-index:99; }
	div.mainovtitle{float:left; width:90%; font-size:20px; font-weight:bold; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; line-height:1.5em;}
	div.mainovclosebtn{float:right; width:8%;}
	div.mainovclosebtn img{float:right; width:25px; height:25px; }
	div.mainoviframebox{float:left;position:relative; width:100%; height:100%; margin:15px 0px 0px 0px;}
	.mainoviframe{width:100%; height:100%;}
	div.mainovwrapon,.mainovwrapon{display:block; opacity:1;} /*Fix "X" flashing on screen during page load*/
	div.mainovwrapoff,.mainovwrapoff{display:none; opacity:0;} /*Fix "X" flashing on screen during page load*/
	div.mainovcontentwrapper{float:left; width:100%;} /*For CMS Overlay*/
	div.mainovcontentwrapper img{max-width:100%; height:auto;} /*For CMS Overlay*/

	/*Desktop - Overlay Local*/
	div.mainovlocalwrap{position:fixed; width:100%; height:100%; top:0px; overflow:auto;-webkit-overflow-scrolling: touch; z-index:99; background-color:rgba(0,0,0,0.6)}
	div.mainovlocalshow{display:block;}
	div.mainovlocalhide{display:none;}
	div.mainovlocalscroll{float:left; width:100%;}
	div.mainovlocalbox{position:relative; top:0px; left:50%; width:950px; padding:25px; margin:30px 0px 30px -475px; background-color:#FFF; }
	div.mainovlocaltitle{float:left; font-size:22px; line-height:1.2em; width:95%; font-weight:bold; padding:0px 0px 30px 0px; }
	div.mainovlocalclosebtn{float:right;}
	div.mainovlocalclosebtn img{width:25px; height:auto;}

	/*Desktop - Page Column Layout*/
	div.mainpagecolmobileinforowwrap{} /*Table Row*/
	div.mainpagecolinforowgreywrap{ float:left; width:100%; padding:15px; background-color:#f2f2f2; margin:15px 0px 15px 0px;} /*Wrap for hidden content*/
	div.mainpagecolinforowgreymobilebox{} /*Wrap for hidden content each row*/
	div.mainpagecolmobilefullwidth{}

	/*Desktop - Commom Element*/
	.mainrowspace{float:left; width:100%; height:20px;} /*Space between section*/
	.maindesktopshowonly{}
	.mainmobileshowonly{display:none !important;}
	img.mainimgmobilefullwidth{}
	.mainmobilenomargin{}
	
	.maindesktoppaddingtop{padding-top:15px !important;}
	.maindesktoppaddingbottom{padding-bottom:15px!important;}
	.maindesktoppaddingleft{padding-left:15px !important;}
	.maindesktoppaddingright{padding-right:15px !important;}

	.maindesktopnopadding{padding:0px !important;}
	.maindesktopnopaddingleft{padding-left:0px !important;}
	.maindesktopnopaddingright{padding-right:0px !important;}
	.maindesktopnopaddingtop{padding-top:0px !important;}
	.maindesktopnopaddingbottom{padding-bottom:0px !important;}

	.maindesktopmargintop{margin-top:15px !important;}
	.maindesktopmarginbottom{margin-bottom:15px !important;}
	.maindesktopmarginleft{margin-left:15px !important;}
	.maindesktopmarginright{margin-right:15px !important;}

	.maindesktopnomargin{margin:0px !important;}
	.maindesktopnomarginleft{margin-left:0px !important;}
	.maindesktopnomarginright{margin-right:0px !important;}
	.maindesktopnomargintop{margin-top:0px !important;}
	.maindesktopnomarginbottom{margin-bottom:0px !important;}

	.maindesktopalignright{float:right;}
	.maindesktopalignleft{float:left;}

	.maindesktoptextalignright{text-align:right;}
	.maindesktoptextaligncenter {text-align:center;}
	
	/* ==========================================================================
	   Desktop Navigation Start
	   ========================================================================== */
	
	div.maintextnavbar{float:left;width:100%;margin:10px 0px 10px 0px;line-height:1.3em; display:flex; justify-content:flex-end; /*flex-end: Align right. flex-start: Align left*/}
	div.maintextnavbar ul, div.maintextnavbar li{padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;list-style-type:none;} 
	div.maintextnavbar li{float:left;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/*Important for IE hack*/
	div.maintextnavbar li a{display:block;color: #000000; text-decoration: none; font-weight: normal; font-style: normal; font-size:14px; padding:5px 12px 5px 12px; }
	div.maintextnavbar li a:hover { display:block;color: #FFFFFF; text-decoration: none; font-weight: normal; font-style: normal; font-size: 14px; background-color:#000000;padding:5px 12px 5px 12px;}
	div.maintextnavbar li.textnavon, .maintextnavbar li.textnavon a{background-color:#000000;color:#FFFFFF;}
	div.maintextnavbar li.textnavdivider{width:5px; height:12px; border-left:dotted 1px #000; margin:8px 0px 0px 5px;}
	
	/*Desktop Drop down menu CSS*/
	li.mainnavdropdown ul{display:none; position:absolute;z-index:99;list-style-type:none;margin:0px; padding:0px; /*Space between nav text and drop down menu*/width:230px; /*Change this to set drop down area. */}
	li.mainnavdropdown:hover ul{ display:block;/* Display the dropdown on hover */}
	li.mainnavdropdown ul li{list-style-type:none;float:left;width:100%;z-index:99;display:block;background:#FFFFFF;color:#333333;border-bottom:#cccccc solid 1px;box-shadow:0px 2px 3px #dbdada; padding:0px !important;}
	
	span.mainnavdropdowntext{padding-right:15px; /*Space between the nav text and the drop down arrow*/}
	li.mainnavdropdown a.mainnavdropdowntag{background-image:url(../images_svg/main_nav_arrowdown_black.svg);background-size:13px 13px;background-repeat:no-repeat;background-position:95% center;} /*Before roll over nav Text with drop down - Black arrow*/
	li.mainnavdropdown:hover a.mainnavdropdowntag{background-color:#000000;color:#FFFFFF;background-size:13px 13px;background-image:url(../images_svg/main_nav_arrowdown_white.svg);background-repeat:no-repeat;background-position:95% center;} /*Roll over nav text. Change Nav text arrow and color - white arrow*/
	li.mainnavdropdown a.mainnavdropdowntaghighlight{background-color:#000000;color:#FFFFFF;background-size:13px 13px;background-image:url(../images_svg/main_nav_arrowdown_white.svg);background-repeat:no-repeat;background-position:95% center;} /* Highlight tab on actual page*/
	li.mainnavdropdown ul li a{padding:10px 4% 10px 4%!important;width:100%;display:block;} /*drop down menu */
	li.mainnavdropdown ul li a:hover{ background-color:#F00; /*Rollover color*/color:#FFFFFF;}/* drop down menu Rollover */
	
	li.mainnavdropdownright{position:relative;} /*Make drop menu menu align to right*/
	li.mainnavdropdownright ul{right:0px !important;} /*Make drop menu menu align to right*/
	
	/*Desktop Drop down Area*/
	li.mainnavdropdown ul.mainnavdropdownarea{position:absolute;left:0px;width:100%;display:none;margin:0px;background-color:#FFFFFF;box-shadow:0px 2px 3px #dbdada;}
	li.mainnavdropdown:hover ul.mainnavdropdownarea{ display:block;/* Display the dropdown on hover */}
	div.mainnavdropdownareacol{float:left; width:21%; min-height:100px; margin:20px 2% 20px 2%;} /* drop down area col menu Rollover */
	div.mainnavdropdownareacol img {width:100%; height:auto;}
	div.mainnavdropdownareacol strong{font-size:12px;}
	div.mainnavdropdownareacol a{float:left !important; width:100% !important; padding:3px 0px 3px 0px !important; display:block !important; color:#000000!important; text-decoration: none!important;font-weight: normal!important;font-style: normal!important;font-size:12px!important;background-color:transparent!important;}/*Overwrite by textnavbar*/
	div.mainnavdropdownareacol a:hover{ color: #000000!important;text-decoration: underline!important;font-weight: normal!important ;font-style: normal!important ;font-size: 12px!important ;background-color:transparent!important;}/*Overwrite by textnavbar*/
	
	/*Desktop Drop down Third Level*/
	li.mainnavdropdown ul li ul{top:-1000px;} /*Move third menu out of the screen instead of set display to none.*/
	li.mainnavdropdown ul li:hover ul,ul.mainnavdropdownthirdkeytabshow{position:absolute !important;display:block !important;left:231px !important;top:auto !important;margin-top:-39px !important; }/*Third layer align with second layer. Add mainnavdropdownthirdkeytabshow class for key control*/
	li.mainnavdropdown ul li:hover a.mainnavdropdownthirdtag{color:#FFF !important;background-color:#36F !important;}
	li.mainnavdropdown ul li a.mainnavdropdownthirdtag{background-image:url(../images_svg/main_nav_arrowright_black.svg) !important;background-repeat:no-repeat!important;background-size:12px 12px!important;background-position:95% center!important;}
	li.mainnavdropdown ul li:hover a.mainnavdropdownthirdtag{background-image:url(../images_svg/main_nav_arrowright_white.svg) !important;background-repeat:no-repeat!important;background-size:12px 12px!important;background-position:95% center!important;}

	div.mainsidenav{position:relative; float:right; width:25px; z-index:92; margin:30px 0px 0px 0px;}
	div.mainsidenav a.mainsidenavtag{float:left;width:25px; height:25px; /*To set focus outline*/}
	div.mainsidenav img{position:absolute;top:0px; right:0px; width:25px; height:auto;z-index:94;}
	div.mainsidenav ul,div.mainsidenav li {padding:0px; margin:0px;}
	div.mainsidenav ul {position:absolute; top:25px; right:-10px;display:none;}
	div.mainsidenav:hover ul{display:block; box-shadow:0px 2px 3px #dbdada; background-color:#FFF;  /*When the header is fixed.	max-height:300px; overflow-y:scroll; overflow-x:hidden;*/}
	div.mainsidenav li {list-style-type:none;}
	div.mainsidenav li a{display:block; width:250px; padding:8px 4% 8px 4%; background-color:#FFF; color:#333; text-decoration:none;}
	div.mainsidenav li a:hover{background-color:#F00; color:#FFF;}

	/*Desktop Alert Msg*/
	div.mainalertmsg{position:fixed; width:500px; bottom:0px; left:50%; margin-left:-250px; font-size:14px; text-align:center; background-color:#999999; color:#FFFFFF; padding:10px; border-radius:10px; z-index:99;}	
	div.mainalertmsgon{bottom:40px; transition: all 0.2s;}
	div.mainalertmsgoff{bottom:-150px; transition: all 0.2s;}

}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	/*Mobile Common Text & Header CSS*/
	body {font-size: 16px; line-height: 1.5em;-webkit-text-size-adjust: none;} 	/*iphone hack to prevent font too small*/
	h1{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:24px;padding:0px; margin:0px 0px 15px 0px;line-height:1.4em;clear:both;}
	h2{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:20px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h3{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:18px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h4{ font-family:'Roboto',Arial, Helvetica, sans-serif;font-weight:bold; font-size:16px;padding:0px; margin:0px 0px 15px 0px;line-height:1.2em;clear:both;}

	/*Mobile - Header*/
	div.mainheaderwrapper{display:none;}
	div.mainheader{display:none;}
	div.mainlogo{display:none;}
	div.mainheaderwrapperflow{display:none;}

	/*Mobile - Content Body*/
	div.maincontentwrapper{float:left;width:100%; margin:42px 0px 0px 0px; }/*50px margin top on page*/
	div.maincontentboxwithbgimg{float:left;width:100%; background-repeat:no-repeat; background-size:cover;}
	div.maincontentboxwithshade{float:left;width:100%;background-color:#CCC;}
	div.maincontentbox{float:left; width:100%; margin:0px 0px 0px 0px; padding:20px 15px 20px 15px;}/*Left right padding on mobile content*/
	/*div.maincontentboxwithbgcolor{background-color:#FFF !important;}*/

	/*Mobile - Right and Left Col*/
	div.maincontentleftcol{float:left; width:100%;}
	div.maincontentrightcol{float:right; width:100%;}
	div.maincontentrightcolnav{float:left;width:100%; padding:15px; margin:8px 0px 15px 0px; border-radius:10px;}
	div.maincontentrightcolnav ul,div.maincontentrightcolnav li{margin:0px; padding:0px;}
	div.maincontentrightcolnav ul{ list-style:none;}
	div.maincontentrightcolnav li{ float:left; width:50%; padding:5px 5px 5px 0px; font-size:12px !important; }

	/*Mobile - Footor*/
	div.mainfootorwrapper{float:left;width:100%;font-size:14px; color:#696969;border-top:#CCCCCC solid 1px; margin:20px 0px 0px 0px; padding:10px 0px 30px 0px;}
	div.mainfootorbox{float:left; width:100%;}	/*padding-bottom:50px; Fix iphone bug that unable to scroll until the bottom and top of the page*/
	div.mainfootorleft{float:left;width:100%;text-align:center;}
	div.mainfootorright{float:left;width:100%;text-align:center;}
	div.mainfootorleft a,div.mainfootorright a{color: #696969; text-decoration: underline; font-weight: normal; font-style: normal;}
	div.mainfootorleft a:hover,div.mainfootorright a:hover {text-decoration: none;}

	/*Mobile - Color footor with three columns content*/
	div.mainfootorcolorbgwrap{float:left;width:100%; background-color:#000; padding:0px 3% 20px 3%; color:#FFF;}
	div.mainfootorcol1{float:left;width:100%; padding:20px 0px 50px 0px;}
	div.mainfootorcol2{float:left;width:100%;padding:0px 0px 50px 0px; font-size:14px;}
	div.mainfootorcol3{float:left;width:100%;padding:0px 0px 0px 0px; font-size:10px;}
	div.mainfootorcol1 strong,div.mainfootorcol2 strong{font-size:18px !important;}
	div.mainfootorcol2 a,div.mainfootorcol2 a:hover{color:#696969;}
	div.mainfootorcol2 img {display:inline-block; margin:10px 5px 0px 0px;}
	div.mainfootorcol3 img{margin:0px 0px 8px 0px;}

	/*Mobile - Overlay iframe*/
	div.mainovbg{position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:#000; opacity:0.5;z-index:98;}
	div.mainovinfowrap{position:fixed; width:94%; min-height:400px; top:30px; left:3%; background-color:#FFF; padding:15px;z-index:99;}
	div.mainovtitle{float:left; width:85%; font-size:18px; font-weight:bold;white-space: nowrap;overflow: hidden; text-overflow: ellipsis; line-height:1.5em;}
	div.mainovclosebtn{float:right; width:10%}
	div.mainovclosebtn img{float:right;width:20px; height:20px;}
	div.mainoviframebox{float:left;position:relative; width:100%; height:90%; margin:10px 0px 0px 0px;-webkit-overflow-scrolling: touch;overflow-y: scroll; /*Need to include overflow-y and webkit scrolling touch to avoid iphone bug*/ }
	.mainoviframe{width:100%; height:100%;}
	.mainovwrapon{display:block; opacity:1;}  /*Fix "X" flashing on screen during page load*/
	.mainovwrapoff{display:none; opacity:0;}  /*Fix "X" flashing on screen during page load*/
	div.mainovcontentwrapper{float:left; width:100%;} /*For CMS Overlay*/
	div.mainovcontentwrapper img{max-width:100%; height:auto;} /*For CMS Overlay*/


	/*Mobile - Overlay Local*/
	div.mainovlocalwrap{position:fixed; width:100%; height:100%; top:0px; overflow:auto;-webkit-overflow-scrolling: touch; z-index:99; background-color:rgba(0,0,0,0.6);}
	div.mainovlocalshow{display:block;}
	div.mainovlocalhide{display:none;}
	div.mainovlocalscroll{float:left; width:100%;}
	div.mainovlocalbox{position:relative; top:0px; left:5%; width:90%; padding:25px; margin:20px 0px 20px 0px; background-color:#FFF; }
	div.mainovlocaltitle{float:left; font-size:20px;line-height:1.2em; width:94%; font-weight:bold; padding:0px 0px 20px 0px; }
	div.mainovlocalclosebtn{float:right; width:4%;}
	div.mainovlocalclosebtn img{width:100%; min-width:20px; height:auto;}

	/*Mobile Page Column Layout with sub content*/
	div.mainpagecolmobileinforowwrap{float:left; width:100%; padding:10px 10px 10px 10px; border: solid 1px #CCCCCC; line-height:1.4em; margin:10px 0px 0px 0px;}
	div.mainpagecolinforowgreywrap{float:left; width:10px!important; min-width:100% !important; overflow: auto; }
	div.mainpagecolinforowgreymobilebox{float:left; width:100%; padding:10px; line-height:1.4em; margin:10px 0px 0px 0px; background-color:#f2f2f2;}
	div.mainpagecolmobilefullwidth{float:left; width:100% !important; display:inline-block; padding: 0px 0px 5px 0px !important;}

	/*Mobile Commom Element*/
	.mainrowspace{float:left; width:100%; height:10px;}
	.maindesktopshowonly{display:none !important;}
	.mainmobileshowonly{}
	.maintextaligncenterdesktoponly {}
	img.mainimgmobilefullwidth{width:100%; height:auto;} /*Set Image to full width on mobile*/

	.mainmobilenomargin{margin:0px !important;}
	.mainmobilenomarginleft{margin-left:0px !important;}
	.mainmobilenomarginright{margin-right:0px !important;}
	.mainmobilenomargintop{margin-top:0px !important;}
	.mainmobilenomarginbottom{margin-bottom:0px !important;}
	
	.mainmobilemargintop{margin-top:15px !important;}
	.mainmobilemarginbottom{margin-bottom:15px!important;}
	.mainmobilemarginleft{margin-left:15px !important;}
	.mainmobilemarginright{margin-right:15px!important;}
	
	.mainmobilenopadding{padding:0px !important;}
	.mainmobilenopaddingleft{padding-left:0px !important;}
	.mainmobilenopaddingright{padding-right:0px !important;}
	.mainmobilenopaddingtop{padding-top:0px !important;}
	.mainmobilenopaddingbottom{padding-bottom:0px !important;}

	.mainmobilepadding{padding:15px !important;}
	.mainmobilepaddingleft{padding-left:15px !important;}
	.mainmobilepaddingright{padding-right:15px !important;}
	.mainmobilepaddingtop{padding-top:15px !important;}
	.mainmobilepaddingbottom{padding-bottom:15px !important;}

	.mainpagecol100mobile{float:left; width:100% !important;}
	.mainpagecol10mobile{float:left; width:10% !important; min-width:10% !important}
	.mainpagecol90mobile{float:left; width:90% !important; min-width:90% !important}

	.mainmobilealignleft{float:left !important; }
	.mainmobilealignright{float:right !important;}
	.mainmobilealigncenter{margin:0 auto;}
	
	.mainmobiletextalignleft{text-align:left !important; }
	.mainmobiletextalignright{text-align:right !important;}
	.mainmobiletextaligncenter{text-align:center !important;}

	/*Mobile Return Msg*/
	div.mainalertmsg{position:fixed; width:320px; left:50%; margin-left:-160px; font-size:14px; text-align:center; background-color:#999999; color:#FFFFFF; padding:10px; border-radius:10px; z-index:99;}	
	div.mainalertmsgon{bottom:20px; transition: all 0.2s;}
	div.mainalertmsgoff{bottom:-100px; transition: all 0.2s;}


}

/* ==========================================================================
   Share CSS
   ========================================================================== */

html {scroll-behavior: smooth;} /*Force browser to turn on smooth scroll behaviour. It might affect scrollintoview function*/
body { font-family:'Open Sans',Arial, Helvetica, sans-serif;color: #231f20;margin:0px;padding:0px;background-color:#FFFFFF;scroll-behavior: smooth !important;}
strong,b {font-weight:bold; font-weight:700;}

img{ border:none; display:block;}
img.mainimgactualsize{width:auto !important; height: auto !important;}
img.mainimgfullwidth{width:100%; height:auto;}
span.mainimgcaption{font-size:12px; padding:5px 0px 0px 0px; display:block;}

p{padding:0px 0px 15px 0px; margin:0px; width:100%;}
div,a,span,li{box-sizing: border-box !important; }
div.mainseparator{clear:both;height:0px; }

ul{margin-top:0px; margin-bottom:0px;}
li{margin-bottom:10px; list-style-type:square;}

/*Common Link CSS */
a{ color: #0f4c7e;text-underline-offset:3px; text-decoration: underline; font-weight: normal; font-style: normal;transition: none;  }
a:hover { color: #0f4c7e; text-decoration:none; font-weight: normal; font-style: normal; transition: none;}
a:visited{color: #A63EA8;}
a.mainlinkdisable{color:#CCCCCC;}

.mainlinkanimate{position:relative;text-decoration:none;}
.mainlinkanimate:after{content: ''; transform: scaleX(0); transform-origin: center center;  position: absolute; width: 100%; height: 2px;bottom: -2px;left: 0;background-color: #A63EA8;transition: transform 0.25s ease-out;}
.mainlinkanimate:hover::after{transform: scaleX(1);transform-origin: center center;}

/*Common Text*/
.maintextspacebetween{width:30px; display:inline-block;}
.maintextalignleft{text-align:left;}
.maintextalignright{text-align:right;}
.maintextaligncenter{text-align:center;}
.maintextfont10{font-size:10px !important; line-height:1.4em;}
.maintextfont12{font-size:12px !important; line-height:1.4em;}
.maintextfont14{font-size:14px !important; line-height:1.4em;}
.maintextfont16{font-size:16px !important; line-height:1.4em;}
.maintextweightnormal{font-weight:normal !important;}
.maintextweightbold{font-weight:bold !important;}
.maintextitalic{font-style:italic;line-height:1.2em;}

.maintextblackcolor{color:#000000 !important;}
.maintextgreycolor{color:#999 !important;}
.maintextredcolor{color:#C33 !important;}
.maintextgradientcolor{ background: -webkit-linear-gradient(45deg, #f13a59, #3599e3); background-clip: border-box; -webkit-background-clip: text;-webkit-text-fill-color: transparent;}

/*Common Box wrap background color*/
div.mainbgcolorgrey1{background-color:#F1F1F1;}
div.mainbgcolorgrey2{background-color:#F6F6F6;}

/*Common Alignment CSS*/
.mainalignleft{float:left; }
.mainalignright{float:right;}
.mainaligncenter{margin:0 auto;}
.mainalignleftforce{float:left !important; }
.mainalignrightforce{float:right !important;}
.mainaligncenterforce{margin:0 auto !important;}

.mainflushitemsright{display:flex;justify-content:end; }

.mainmarginno{margin:0px !important;}
.mainmargintopno{margin-top:0px !important;}
.mainmarginbottomno{margin-bottom:0px !important;}
.mainmarginleftno{margin-left:0px !important;}
.mainmarginrightno{margin-right:0px !important;}

.mainmargintop{margin-top:15px !important;}
.mainmarginbottom{margin-bottom:15px!important;}
.mainmarginleft{margin-left:15px !important;}
.mainmarginright{margin-right:15px!important;}

div.maindividerfullwidth{float:left;width:100%;height:5px; border-top:dotted 1px #333333; margin:20px 0px 25px 0px;}
div.mainpagesingleline{float:left; width:100%; height:5px; border-top:solid 1px #CCCCCC; margin:20px 0px 25px 0px;}
div.mainpagedoubleline{float:left; width:100%; height:5px; border-top:solid 1px #231f20 ;border-bottom:solid 1px #231f20 ; margin:20px 0px 25px 0px;}

hr {float:left;width:100%;height:5px;margin:20px 0px 25px 0px;border-top: 1px #CCCCCC dotted; border-left:none;border-right:none;border-bottom:none; }

.mainpaddingno{padding:0px !important;}
.mainpaddingtopno{padding-top:0px !important;}
.mainpaddingbottomno{padding-bottom:0px !important;}
.mainpaddingleftno{padding-left:0px !important;}
.mainpaddingrightno{padding-right:0px !important;}

.mainpaddingtop{padding-top:15px !important;}
.mainpaddingbottom{padding-bottom:15px!important;}
.mainpaddingleft{padding-left:15px !important;}
.mainpaddingright{padding-right:15px !important;}
.mainpaddingall{padding:15px !important;}

.mainnominwidth{min-width:auto !important;}
.mainnomaxwidth{max-width:auto !important;}

/*Common Footor Start*/
.mainfootoralignbottom{position:fixed !important;bottom:0px;}

/*Common Fade in and Face out animation Class*/
.mainanimatefadeout{opacity: 0;transition: opacity 0.2s ease-in;}
.mainanimatefadein{opacity: 1;transition: opacity 0.2s ease-in;}

/*Common Page Column Layout*/
div.mainpagebggradientcolor{float:left; width:100%; color:#FFF; padding:10px 0px 10px 10px; font-weight:bold; background: linear-gradient(#007196,#47a0b6 90%); font-size:16px; margin:10px 0px 10px 0px;}

.mainpagecol1{float:left; width:1%; display:inline-block; padding:0px 10px 0px 0px; min-width:25px; min-height:1px;}
.mainpagecol2{float:left; width:2%; display:inline-block; padding:0px 10px 0px 0px;min-width:25px; min-height:1px;}
.mainpagecol3{float:left; width:3%; display:inline-block; padding:0px 10px 0px 0px;min-width:25px; min-height:1px;}
.mainpagecol4{float:left; width:4%; display:inline-block; padding:0px 10px 0px 0px;min-width:25px; min-height:1px;}
.mainpagecol5{float:left; width:5%; display:inline-block; padding:0px 10px 0px 0px;min-width:25px; min-height:1px;}
.mainpagecol6{float:left; width:6%; display:inline-block; padding:0px 10px 0px 0px;min-width:25px; min-height:1px;}
.mainpagecol8{float:left; width:8%; display:inline-block; padding:0px 10px 0px 0px;min-width:25px; min-height:1px;}
.mainpagecol10{float:left; width:10%; display:inline-block; padding:0px 10px 0px 0px;min-width:10%; min-height:1px;}
.mainpagecol12{float:left; width:12%; display:inline-block; padding:0px 10px 0px 0px;min-width:12%; min-height:1px;}
.mainpagecol13{float:left; width:13%; display:inline-block; padding:0px 10px 0px 0px;min-width:13%; min-height:1px;}
.mainpagecol14{float:left; width:14%; display:inline-block; padding:0px 10px 0px 0px;min-width:14%; min-height:1px;}
.mainpagecol15{float:left; width:15%; display:inline-block; padding:0px 10px 0px 0px;min-width:15%; min-height:1px;}
.mainpagecol16{float:left; width:16%; display:inline-block; padding:0px 10px 0px 0px;min-width:16%; min-height:1px;}
.mainpagecol17{float:left; width:17%; display:inline-block; padding:0px 10px 0px 0px;min-width:17%; min-height:1px;}
.mainpagecol18{float:left; width:18%; display:inline-block; padding:0px 10px 0px 0px;min-width:18%; min-height:1px;}
.mainpagecol20{float:left; width:20%; display:inline-block; padding:0px 10px 0px 0px;min-width:20%; min-height:1px;}
.mainpagecol22{float:left; width:22%; display:inline-block; padding:0px 10px 0px 0px;min-width:22%; min-height:1px;}
.mainpagecol23{float:left; width:23%; display:inline-block; padding:0px 10px 0px 0px;min-width:23%; min-height:1px;}
.mainpagecol24{float:left; width:24%; display:inline-block; padding:0px 10px 0px 0px;min-width:24%; min-height:1px;}
.mainpagecol25{float:left; width:25%; display:inline-block; padding:0px 10px 0px 0px;min-width:25%; min-height:1px;}
.mainpagecol26{float:left; width:26%; display:inline-block; padding:0px 10px 0px 0px;min-width:26%; min-height:1px;}
.mainpagecol28{float:left; width:28%; display:inline-block; padding:0px 10px 0px 0px;min-width:28%; min-height:1px;}
.mainpagecol30{float:left; width:30%; display:inline-block; padding:0px 10px 0px 0px;min-width:30%; min-height:1px;}
.mainpagecol32{float:left; width:32%; display:inline-block; padding:0px 10px 0px 0px;min-width:32%; min-height:1px;}
.mainpagecol34{float:left; width:34%; display:inline-block; padding:0px 10px 0px 0px;min-width:34%; min-height:1px;}
.mainpagecol35{float:left; width:35%; display:inline-block; padding:0px 10px 0px 0px;min-width:35%; min-height:1px;}
.mainpagecol36{float:left; width:36%; display:inline-block; padding:0px 10px 0px 0px;min-width:36%; min-height:1px;}
.mainpagecol37{float:left; width:37%; display:inline-block; padding:0px 10px 0px 0px;min-width:37%; min-height:1px;}
.mainpagecol38{float:left; width:38%; display:inline-block; padding:0px 10px 0px 0px;min-width:38%; min-height:1px;}
.mainpagecol40{float:left; width:40%; display:inline-block; padding:0px 10px 0px 0px;min-width:40%; min-height:1px;}
.mainpagecol45{float:left; width:45%; display:inline-block; padding:0px 10px 0px 0px;min-width:45%; min-height:1px;}
.mainpagecol48{float:left; width:48%; display:inline-block; padding:0px 10px 0px 0px;min-width:48%; min-height:1px;}
.mainpagecol50{float:left; width:50%; display:inline-block; padding:0px 10px 0px 0px;min-width:50%; min-height:1px;}
.mainpagecol55{float:left; width:55%; display:inline-block; padding:0px 10px 0px 0px;min-width:55%; min-height:1px;}
.mainpagecol58{float:left; width:58%; display:inline-block; padding:0px 10px 0px 0px;min-width:58%; min-height:1px;}
.mainpagecol60{float:left; width:60%; display:inline-block; padding:0px 10px 0px 0px;min-width:60%; min-height:1px;}
.mainpagecol65{float:left; width:65%; display:inline-block; padding:0px 10px 0px 0px;min-width:65%; min-height:1px;}
.mainpagecol68{float:left; width:68%; display:inline-block; padding:0px 10px 0px 0px;min-width:68%; min-height:1px;}
.mainpagecol70{float:left; width:70%; display:inline-block; padding:0px 10px 0px 0px;min-width:70%; min-height:1px;}
.mainpagecol75{float:left; width:75%; display:inline-block; padding:0px 10px 0px 0px;min-width:75%; min-height:1px;}
.mainpagecol78{float:left; width:78%; display:inline-block; padding:0px 10px 0px 0px;min-width:78%; min-height:1px;}
.mainpagecol80{float:left; width:80%; display:inline-block; padding:0px 10px 0px 0px;min-width:80%; min-height:1px;}
.mainpagecol85{float:left; width:85%; display:inline-block; padding:0px 10px 0px 0px;min-width:85%; min-height:1px;}
.mainpagecol88{float:left; width:88%; display:inline-block; padding:0px 10px 0px 0px;min-width:88%; min-height:1px;}
.mainpagecol90{float:left; width:90%; display:inline-block; padding:0px 0px 0px 0px;min-width:90%; min-height:1px;}
.mainpagecol92{float:left; width:92%; display:inline-block; padding:0px 0px 0px 0px;min-width:92%; min-height:1px;}
.mainpagecol93{float:left; width:93%; display:inline-block; padding:0px 0px 0px 0px;min-width:93%; min-height:1px;}
.mainpagecol94{float:left; width:94%; display:inline-block; padding:0px 0px 0px 0px;min-width:94%; min-height:1px;}
.mainpagecol95{float:left; width:95%; display:inline-block; padding:0px 0px 0px 0px;min-width:95%; min-height:1px;}
.mainpagecol96{float:left; width:96%; display:inline-block; padding:0px 0px 0px 0px;min-width:96%; min-height:1px;}
.mainpagecol97{float:left; width:97%; display:inline-block; padding:0px 0px 0px 0px;min-width:97%; min-height:1px;}
.mainpagecol98{float:left; width:98%; display:inline-block; padding:0px 0px 0px 0px;min-width:98%; min-height:1px;}
.mainpagecol100{float:left; width:100%; display:inline-block; padding:0px 0px 0px 0px;min-width:100%; min-height:1px;}

/*Common Next and Preview Page Button*/
div.mainnavnextprev{float:left; width:100%; margin:60px 0px 15px 0px;}
div.mainnavnextprev a{width:100%; text-decoration:none;}
div.mainnavprev{float:left; width:48%;height:25px; text-align:left; background-size:25px 25px;background-image:url(../images_svg/main_nav_prevpage.svg); background-repeat:no-repeat; background-position: center left; }
div.mainnavprev a{padding:2px 0px 0px 35px; display:block; text-decoration:none;}
div.mainnavnext{float:right; width:48%;height:25px; text-align:right;  background-size:25px 25px;background-image:url(../images_svg/main_nav_nextpage.svg); background-repeat:no-repeat; background-position: center right; }
div.mainnavnext a{padding:2px 35px 0px 0px; display:block; text-decoration:none;}

/*Common Pagenate*/
div.mainpagepagnate{float:left; width:100%; display:inline-block; padding:30px 10px 30px 10px; text-align:center;}
div.mainpagepagnate a{text-decoration:none;padding:3px 8px 5px 8px; margin:0px 3px 0px 3px; display:inline-block; color:#231f20 !important;}
div.mainpagepagnate a:hover{text-decoration:none;padding:3px 8px 5px 8px; margin:0px 3px 0px 3px; display:inline-block; background-color:#414341; color:#FFFFFF !important;}
div.mainpagepagnate span{display:inline-block; margin:0px 15px 0px 15px;}

/*Common Show and hide information (div)*/
div.mainpageshowhidewrapoff{height:0px; min-height:0px; overflow:hidden !important; margin:0px !important; padding:0px !important;}
div.mainpageshowhidewrapon{height:auto; }

/*Common Beta Tag at footor*/
div.mainbetatag{position:fixed; bottom:0px; right:0px;}
div.mainbetatag img{width:100px; height:auto;}

/*Common Payment Scan Bar*/	
div.mainpaymentscanbox{float:left; width:22%; margin:0px 3% 0px 0px; font-size:12px; text-align:center;}
div.mainpaymentscanbox img{width:100%; height:auto; margin:0px 0px 10px 0px;}

/*Common Youtube Embedded Full Width Responsive
How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.
*/
.mainyoutubeinsertpage{position:relative; float:left; width:100%; height:0px; padding-bottom:56.25%; margin:15px 0px 15px 0px;} /*Cannot set height as 56.25%*/
.mainyoutubevideoclasspage{position:absolute;top:0;left: 0;width: 100%;height:100%;}
.mainyoutubeiframebox {/*position:absolute; width:100%;height:0; padding-bottom: 56.25%; margin-top:-27%; top:50%; Remove for  result?*/}
.mainyoutubevideoclass {position: absolute;top:0;left: 0;width: 100%;height: 100%; }

/*Common Block page with overlay*/
div.mainblockpageoverlay{position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:#000000; opacity:0; z-index:99;}