@charset "UTF-8";

@font-face {
  font-family: 'Kitti';
  src: url('/assets/fonts/KittithadaMedium65.eot');
  src: url('/assets/fonts/KittithadaMedium65.eot?') format('embedded-opentype'),
       url('/assets/fonts/KittithadaMedium65.woff2') format('woff2'),
       url('/assets/fonts/KittithadaMedium65.woff') format('woff'),
       url('/assets/fonts/KittithadaMedium65.ttf') format('truetype');
	   font-weight: 600;
	   font-style: normal;
}
@font-face {
  font-family: 'kitti';
  src: url('/assets/fonts/KittithadaRoman55.eot');
  src: url('/assets/fonts/KittithadaRoman55.eot?') format('embedded-opentype'),
       url('/assets/fonts/KittithadaRoman55.woff2') format('woff2'),
       url('/assets/fonts/KittithadaRoman55.woff') format('woff'),
       url('/assets/fonts/KittithadaRoman55.ttf') format('truetype');
	   font-weight: 400;
	   font-style: normal;
}
@font-face {
  font-family: 'kitti';
  src: url('/assets/fonts/KittithadaLight45.eot');
  src: url('/assets/fonts/KittithadaLight45.eot?') format('embedded-opentype'),
       url('/assets/fonts/KittithadaLight45.woff2') format('woff2'),
       url('/assets/fonts/KittithadaLight45.woff') format('woff'),
       url('/assets/fonts/KittithadaLight45.ttf') format('truetype');
	   font-weight: 200;
	   font-style: normal;
}
@font-face {
  font-family: 'agenda';
  src: url('/assets/fonts/agenda-bold-webfont.eot');
  src: url('/assets/fonts/agenda-bold-webfont.eot?') format('embedded-opentype'),
       url('/assets/fonts/agenda-bold-webfont.woff2') format('woff2'),
       url('/assets/fonts/agenda-bold-webfont.woff') format('woff'),
       url('/assets/fonts/agenda-bold-webfont.ttf') format('truetype');
	   font-weight: 600;
	   font-style: normal;
}
@font-face {
  font-family: 'agenda';
  src: url('/assets/fonts/agenda-medium-webfont.eot');
  src: url('/assets/fonts/agenda-medium-webfont.eot?') format('embedded-opentype'),
       url('/assets/fonts/agenda-medium-webfont.woff2') format('woff2'),
       url('/assets/fonts/agenda-medium-webfont.woff') format('woff'),
       url('/assets/fonts/agenda-medium-webfont.ttf') format('truetype');
	   font-weight: 400;
	   font-style: normal;
}
@font-face {
  font-family: 'agenda';
  src: url('/assets/fonts/agenda-light-webfont.eot');
  src: url('/assets/fonts/agenda-light-webfont.eot?') format('embedded-opentype'),
       url('/assets/fonts/agenda-light-webfont.woff2') format('woff2'),
       url('/assets/fonts/agenda-light-webfont.woff') format('woff'),
       url('/assets/fonts/agenda-light-webfont.ttf') format('truetype');
	   font-weight: 200;
	   font-style: normal;
}

body, html, div, span, * {font-family:kitti; font-size:20px; margin:0; padding:0;  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
img {image-rendering: auto;}
h1 {font-size: 3em !important; font-weight:200; color:#00205b;}
h2, .asH2 {font-size:1.7em !important; font-weight:200; color:#666;}
.newLineH1 {font-size: 1em !important; font-weight:200; color:#00205b; line-height: 0.6em;}
.newLine {font-size: 1em !important; font-weight:200; color:#00205b; line-height: 1em;}
.keyBox {width:33.3%; background-color:#00205b; color:#fff; padding: 0.5em; display:inline-block; height: 10.7em; vertical-align: top; margin-bottom:2em;}
#content-wrapper {padding: 3em; background-repeat: no-repeat;background-position: right; background-position-y: -4em;}
#call2act {background-color:#009ADA; color:#fff; text-align:center; font-size: 1.5em; padding: 0.5em 0;max-width: 1180px;margin: 0 auto;}
.toggleBox {border:1px solid #ccc; padding: 1.5em; margin-bottom:1em;}
.toggleIcon {padding: 0.15em 0.4em 0.4em 0.4em; border: 1px solid #ccc;display: table-cell;float: right; cursor: pointer;margin-top: -0.25em;}
#documents td {border: solid 1px #ccc;padding: 0.5em 1em !important; text-align:center !important; display: table-cell;}
.bullet {font-size: 1.5em; color: cornflowerblue;}
#callCenter img {height:2em; vertical-align: middle;}
#Hdesc {display:block; width:55%;}
.tab {padding-left:2.5em;}
.topmenuIcon {vertical-align: middle; color:#002265; font-size: 1.5em !important;}
a {color: #000; text-decoration:none;}
a:hover, a:active, a:hover span, a:active span {color:#002265 !important;}
.whiteLink {color:#fff !important; text-decoration:none !important;}
.keyBoxInside span {color: #fff;}
div#subheader {display: none;}

#regisWrapper {background-color:rgba(255, 255, 255, 0.95); width:40%; height: 85vh; max-heigth:600px; margin: -5vh 25vw; color:#666; position: fixed; padding: 1em; z-index:10; display:none;}

#regisBt {color:#fff; font-size:1.1em; cursor: pointer;}
.ss-form-entry input, .ss-form-entry select {width: 100% !important;background-color: transparent;border: solid 1px #ccc; padding: 0 0.5em;}
#ss-submit {
    background-color: #002265;
    color: #fff;
    font-family: kitti;	
}
#navigation-table {
    float: right;
}
#regisWrapper {background-color:rgba(255, 255, 255, 0.95); width:60%; height: 80vh; max-height: 640px; margin: -1em 8vw; color:#666; position: fixed; padding: 2em 1em; z-index:10; display:none;}

/*start customize input*/ 

input[type="radio"] {
    display:none;
}
/*input[type="radio"] + label {
    color: #292321;
    font-family:Arial, sans-serif;
    font-size:14px;
}*/

input[type="radio"] + label span {
    display:inline-block;
    width:23px;
    height:23px;
    margin:0 0.5em 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
    border:solid 2px #ccc;
    background-color:#fff;
  text-align:center;
}

input[type="radio"] + label span span {
    display:inline-block;
    width:19px;
    height:19px;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
    border:solid 2px #fff;
    vertical-align:middle;
}

input[type="radio"]:checked + label span span {
     background-color:#CC3300;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}
/*end customize input*/ 

#cusName {font-size: 1.2em; color:#00205b;}
#thankyou p {font-size: 0.5em; color:#00205b;}
#closeRegisBT {float:right; position: absolute; right: 0.5em; top: 0.5em;}
#regisForm {height: 100%;}
#iframeRegis {height: 100%; width: 100%; overflow: scroll;}


#bikeSelectBarWrapper, #rama9SelectBarWrapper {
	position: relative;
    display: inline-block;
    margin: 0.5em 0;
}
#bikeSelectBarWrapper .fancyArrow, #rama9SelectBarWrapper .fancyArrow {
    width: 23px;
    height: 28px;
    position: absolute;
    display: inline-block;
    top: 3px;
    right: 2px;
    pointer-events: none;
	color: #fff;
}
select {
    display: inline-block;
    height: 30px;
    padding: 0 2em 0 0.5em;
    outline: none;
    color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #00bfff;
}

@media only screen and (max-width: 1024px) {
html[xmlns] .clearfix {display: none;}
hr {margin: 0;}
#top-bar {display:none;}
#page {width: 100%;}
#menu {margin: 0;}
.layout-1-column, .layout-1-column #main-content {width: 100% !important;}
#page-wrapper {margin-top:0 !important;}
#call2act {margin: 1.6em auto 0 auto !important;}
#content-wrapper {margin-top: 0 !important;}
.keyBox {width:100%;margin-bottom: 0;}
#qualify, #benefit {margin-top:1em; min-height: 3.2em;}
.toggleContent table {width:470px !important; margin-top: 3em;}
#footer {text-align: center !important;}
#footer nav, .float-r {display: none;}
#mLeftPanel a, #mRightPanel a {display: block; padding: 0.25em;}
.whiteLink i.material-icons {margin-top: -0.1em;}
#moveTable {display:block !important;}
#regisWrapper {background-color:rgba(255, 255, 255, 0.95); width:60%; height: 80vh; max-height: 640px; margin: 1em 20vw; color:#666; position: fixed; padding: 1em; z-index:10; display:none;}
#thankyou p {font-size: 1.2em;}
}
.relateAd {display:inline-block; width:48%;}

@media only screen and (max-width: 768px) {
#regisWrapper {background-color:rgba(255, 255, 255, 0.95); width:90%; height: 89vh; top:0; max-height: 640px; margin: 1em 5vw; color:#666; position: fixed; padding: 2em 1em 1em 1em; z-index:10; display:none;}
#thankyou p {font-size: 0.7em;}
#thankyou span span {display: block;padding-left: 0.5em;font-size:18px;}
.relateAd {width:100%;}
.toggleIcon {margin-right: -0.5em;}
}

@media only screen and (max-width: 414px) {
	#callCenter {display:block; width:100%; margin-top: 0.5em;}
	#content-wrapper {padding:1em; background-size: contain;margin-top: 7.7em; background-position-y: 0em; background-position-x: 0em; padding-top: 6em;}
	#callCenter img {height:1.5em;}
	#Hdesc {width:100%; font-size: 1.3em !important;}
	h1 {font-weight: 400;}
	#qualify, #documents {font-size:90%; overflow: scroll;}
	.toggleContent {overflow: scroll;}
	.tab {padding-left:0.5em;}
	.keyBox, .keyBoxInside {font-size:90%;}
	.keyBox {height:9.7em;}
	#regisBt u {display: block; line-height: 1em;}
	.newLine, .newLineH1 {display:block;}
}
@media only screen and (max-width: 320px) {
	#regisBt {font-size: 0.8em;}
}