@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,500&display=swap');
/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1000px) {
	/*Desktop Common Text & Header CSS*/
	body {font-size: 18px; line-height: 1.5em;}
	h1{ font-weight:700; font-size:28px;padding:0px; margin:0px 0px 15px 0px;line-height:1.4em;clear:both;}
	h2{ font-weight:700; font-size:24px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h3{ font-weight:500; font-size:20px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h4{ font-weight:500; 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;}
	div.mainlogo img{ width:50px; height:auto}

	/*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:#000000; color:#FFFFFF;box-shadow: 0px 5px 6px -2px rgba(0,0,0,0.2);padding:20px 0px 20px 0px;}
	div.mainheaderwrapper{width:100%;box-shadow: 0px 5px 6px -2px rgba(0,0,0,0.2); background-color:#000; color:#FFFFFF; padding:10px 0px 10px 0px;}

	
	/*Desktop - Content Body*/
	div.maincontentwrapper{position:relative; float:left; width:100%; padding:95px 0px 0px 0px; background-color:#000;} 
	div.maincontentbox{position:relative; float:left; width:100%;}

	/*Desktop - Footor*/
	div.mainfootorwrapper{position:relative;float:left;width:100%;font-size:15px;padding:40px 0px 40px 0px;background-color:#FFF; }
	div.mainfootorbox{position:relative; width:1000px; margin:0 auto; text-align:center;}
	div.mainfootorbox p.footeremail {font-size:16px;}
	div.mainfootorbox p.footeremail strong { font-weight:600;}
	div.mainfootorbox p.footercopyright {font-size:14px;}


	/*Desktop - Overlay*/
	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 Navigation Start
	   ========================================================================== */
	
	div.maintextnavbar{float:right;margin:20px 0px 0px 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 50px;}
	div.maintextnavbar li a{display:block;color: #FFFFFF; text-decoration: none; font-weight: 400; font-style: normal; font-size:16px;}
	div.maintextnavbar li a:hover {}
	div.maintextnavbar li.textnavon a{ border-bottom: #FFF solid 2px; padding:0px 0px 3px 0px;  }
}

/* ==========================================================================
   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-weight:700; font-size:24px;padding:0px; margin:0px 0px 15px 0px;line-height:1.4em;clear:both;}
	h2{ font-weight:700; font-size:20px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h3{ font-weight:500; font-size:18px;padding:0px; margin:0px 0px 15px 0px;line-height:1.3em;clear:both;}
	h4{ font-weight:500; 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%; padding:65px 0px 0px 0px; background-color:#000; }
	div.maincontentbox{float:left; width:100%;}


	/*Mobile - Footor*/
	div.mainfootorwrapper{float:left;width:100%;font-size:15px; padding:40px 0px 40px 0px; background-color:#FFF;}
	div.mainfootorbox{float:left; width:100%; text-align:center;}
	div.mainfootorbox p.footeremail {font-size:14px;}
	div.mainfootorbox p.footeremail strong { font-weight:600;}
	div.mainfootorbox p.footercopyright {font-size:14px;}


	/*Mobile - Overlay*/
	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*/
}

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

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

img{ border:none; 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: #000000;text-underline-offset:3px; text-decoration: underline; font-weight: normal; font-style: normal;transition: none;  }
a:hover { color: #000000; text-decoration:none; font-weight: normal; font-style: normal; transition: none;}
a:visited{color: #A63EA8;}
.mainlinkanimate{position:relative;text-decoration:none;}
.mainlinkanimate:after{content: ''; transform: scaleX(0); transform-origin: center center;  position: absolute; width: 100%; height: 2px;bottom: -4px;left: 0;background-color: #FFFFFF;transition: transform 0.25s ease-out;}
.mainlinkanimate:hover::after{transform: scaleX(1);transform-origin: center center;}

div.mainfootorbox p{width:100%; padding:0px;}
div.mainfootorbox p.footerresume {margin:0px 0px 20px 0px; text-align:center}
div.mainfootorbox p.footerresume a{ font-size:16px; font-weight:bold;padding:12px 15px 12px 15px; background-color:#000; color:#FFF; border-radius:12px; text-decoration:none;}

/*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%; }