/* page initilize */
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Prompt:200,300,500,400,600|Roboto:200,300,400,600|Itim:400|Sriracha:400|Mali:500,600|Kodchasan:600|KoHo:500&display=swap');
@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX-Bold.woff2') format('woff2');
         url('../font/DBAdmanX/DBAdmanX-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX-Italic.woff2') format('woff2');
         url('../font/DBAdmanX/DBAdmanX-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX-BoldItalic.woff2') format('woff2');
         url('../font/DBAdmanX/DBAdmanX-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX-UltraLight.woff2') format('woff2');
         url('../font/DBAdmanX/DBAdmanX-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX-Light.woff2') format('woff2');
         url('../font/DBAdmanX/DBAdmanX-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX.woff2') format('woff2');
         url('../font/DBAdmanX/DBAdmanX.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX-UltraLightItalic.woff2') format('woff2');
         url('../font/DBAdmanX/DBAdmanX-UltraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DB Adman X';
    src: url('../font/DBAdmanX/DBAdmanX.woff2') format('woff2')
         url('../font/DBAdmanX/DBAdmanX.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* font family */
.dbadman { font-family: 'DB Adman X'; line-height: 1; }
a.dbadman { line-height: inherit; }
/*.dbadman { font-family: 'Prompt'; letter-spacing: 0.1px; line-height: 0.92; }*/
.prompt { font-family: Prompt; }
.Itim { font-family: Itim; font-size: 2.60167vw; }
.Sriracha { font-family: Sriracha; font-size: 2.8645833vw; }
.Mali { font-family: Mali; font-weight: 500; font-size: 2.60167vw; }
.Kodchasan { font-family: Kodchasan; font-weight: 600; font-size: 2.0833vw; line-height: 1.25; }
.KoHo {font-family: KoHo; font-weight: 500; font-size: 2.8645833vw; }

/* color */
.photo>i.Puerto-Rico { background-image: linear-gradient(to top, rgba(76, 199, 194, 1), rgba(0,0,0,0) 50%)}
.photo>i.Energy-Yellow { background-image: linear-gradient(to top, rgba(248, 211, 85, 1), rgba(0,0,0,0) 50%)}
.photo>i.Burnt-Sienna { background-image: linear-gradient(to top, rgba(239, 118, 101, 1), rgba(0,0,0,0) 50%)}
.photo>i.Gamboge { background-image: linear-gradient(to top, rgba(241, 149, 18, 1), rgba(0,0,0,0) 50%)}
.photo>i.Light-Orchid { background-image: linear-gradient(to top, rgba(230, 143, 230, 1), rgba(0,0,0,0) 50%)}
.photo>i.Anakiwa { background-image: linear-gradient(to top, rgba(135, 235, 253, 1), rgba(0,0,0,0) 50%)}

/* line height */
.low { line-height: 0.36; }
.tall { line-height: 0.72; }
a.slim { line-height: 2em; height: 2em; padding: 0 0.25em; }

/* indent */
.outdent { margin-left: -1em; width: 1em; height: 1em; position: absolute; padding-right: 0.325em; margin-top: 0.125em; }
big.outdent { font-size: 2.25em; top: 0; }

/* typography */
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
h1, h2, h3 { margin-top: 0.85em; margin-bottom: 0.6em; }
h4, h5, h6 { margin-top: 0.5em; margin-bottom: 0.33em; }
h1 { font-size: 3.125rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
h4 { font-size: 1.375rem;	}
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
h1>small, h2>small, h3>small, h4>small { display: block; line-height: 0.86; }
/*h1.heading { font-size: 6.67rem; line-height: 0.76; }*/
/*h1.dbadman { line-height: 0.86; }*/
h2>.btn-flat { font-size: 0.6em; font-weight: 400; text-decoration: underline; }

/* font-style */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 600; }
.uppercase { text-transform: uppercase; }

/* font extend */
/*.smaller { font-size: 0.64em; }
.small { font-size: 0.86em; }*/
/*.normal { font-size: 1.4rem; }*/
/*.large { font-size: 1.6em; }
.larger { font-size: 2.4em; }
.xlarge { font-size: 3.2em; }*/
.smaller { font-size: 0.675em; }
.small { font-size: 0.875em; }
.normal { font-size: 1.125em; }
.large { font-size: 1.6em; }
.larger { font-size: 2em; }

.detail-info h3,
.detail-info h5,
.detail-info h6,
.price { margin: 0; }
.price { margin-bottom: 0.325em; }
/*.detail-info h6 { margin-top: -0.2em; margin-bottom: -0.25em }*/

@media only screen and (min-width: 1400px) {
	/* typography */
	/*
	h1, h2, h3 { margin-top: 0.75em; margin-bottom: 0.5em; }
	h4, h5, h6 { margin-top: 0.5em; margin-bottom: 0.33em; }
	h1 { font-size: 6.25rem; }
	h2 { font-size: 4.375rem; }
	h3 { font-size: 3.125rem; }
	h4 { font-size: 2.5rem;	}
	h5 { font-size: 1.875rem; }
	h1>small, h2>small, h3>small { display: block; line-height: 86%; }
	*/
} 

/* href style */
.link, .click { cursor: pointer; }
.link:hover { color: #666; }
.current, .toggle { height: auto !important; }
.float { height: auto; }
/* hr */
hr { border: none; width: 50%; height: 4px; margin: 0 auto;}
hr.thick { height: 0.3vw; }
hr.thin { height: 0.2vw; }
hr.short { width: 20%; }
hr.long { width: 80% }
.border-bottom { display: block; border-bottom: solid 1px; }
.border-bottom-1 { border-bottom: solid 1px #f0f0f0; }
.border-radius-1 { border-radius: 1em; }
.border-radius-2 { border-radius: 2em; }
/* course navigator */
/*#course-navigator .timeline { font-size: 2.67em; }*/
/* position */
.relative { position: relative; }
.absolute { position: absolute; }
.valign { margin-top: -0.25em; }
.center { margin-left: auto; margin-right: auto; }
.curve-5 { border-radius: 1em; }

ul { list-style-type: '-'; }
/* materializecss hack */
/* collapsible */
.collapsible {
	box-shadow: none;
}
/*.collapsible >li {
	margin-bottom: 1em;
	background-color: #fff;
	border-radius: 0.6em;
}
.collapsible-header {
	padding-left: 4em;
	background-color: transparent;
	border-bottom: none;
}
.collapsible-header::before {
	content: '';
	width: 1.6em;
	height: 1.6em;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(../img/bullet/bullet-arrow.png);
	margin-left: -2em;
	margin-right: 1em;
	margin-top: 0.6em;
	transition-duration: 0.3s;
	transition-property: transform;
}
.active .collapsible-header::before {
	ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.collapsible-body {
	background-color: #f0f0f0;
	border-radius: 0 0 0.6em 0.6em;
}*/
/* color */
.white-trans-3 {
	background-color: rgba(255, 255, 255, 0.33) !important;
}
/* card */
.card .card-action {
	border: none;
	background-color: transparent;
}
.card .card-title.border-bottom {
	margin-bottom: 1em;
}
/* button size adjust *
.btn, .btn-large, .btn-small, .btn-flat {
	height: 2.25rem;
    line-height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.875rem;
}}*/
/* Inactive/Active Default input field color readonly */
.input-field input[type]:[readonly],
.input-field input[type]:focus:[readonly],
.input-field textarea:[readonly],
.input-field textarea:focus:[readonly] {
    /*border-bottom: 1px solid #707070;*/
    /*box-shadow: 0 1px 0 0 #707070;*/
}

/* Inactive/Active Default input field color */
.input-field input[type]:not([readonly]),
.input-field input[type]:focus:not([readonly]),
.input-field textarea:not([readonly]),
.input-field textarea:focus:not([readonly]) {
    border-bottom: 1px solid #707070;
    /*box-shadow: 0 1px 0 0 #707070;*/
}

/* Inactive/Active Default input label color */
.input-field input[type]:focus:not([readonly])+label,
.input-field textarea:focus:not([readonly])+label {
    color: #01579b;
}

/* Active/Inactive Invalid input field colors */
.input-field input[type].invalid,
.input-field input[type].invalid:focus,
.input-field textarea.invalid,
.input-field textarea.invalid:focus {
    border-bottom: 1px solid #e57373;
    box-shadow: 0 1px 0 0 #e57373;
}

/* Active/Inactive Invalid input label color */
.input-field input[type].invalid:focus+label,
.input-field input[type].invalid~.helper-text::after,
.input-field input[type].invalid:focus~.helper-text::after, 
.input-field textarea.invalid:focus+label,
.input-field textarea.invalid~.helper-text::after,
.input-field textarea.invalid:focus~.helper-text::after {
    color: #e57373;
}

/* Active/Inactive Valid input field color */
.input-field input[type].valid,
.input-field input[type].valid:focus,
.input-field textarea.valid,
.input-field textarea.valid:focus {
    border-bottom: 1px solid #26a69a;
    box-shadow: 0 1px 0 0 #26a69a;
}

/* Active/Inactive Valid input label color */
.input-field input[type].valid:focus+label,
.input-field input[type].valid~.helper-text::after,
.input-field input[type].valid:focus~.helper-text::after,
.input-field textarea.valid:focus+label,
.input-field textarea.valid~.helper-text::after,
.input-field textarea.valid:focus~.helper-text::after {
    color: #26a69a;
}

/* disabled input and label */
input[type=text]:not(.browser-default):disabled {
	border-color: #ccc !important;	
}
input[type=text]:not(.browser-default):disabled+label {
	color: #aaa !important;
}
input[type=text]:not(.browser-default), 
input[type=number]:not(.browser-default),
input[type=tel]:not(.browser-default), 
input[type=password]:not(.browser-default), 
input[type=email]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=time]:not(.browser-default),
textarea.materialize-textarea {
	font-size: 1.75rem;
	height: 1.0em;
	padding-top: 0.675em;
	margin-bottom: 0;
}
#authen input[type=text]:not(.browser-default),
#authen input[type=number]:not(.browser-default),  
#authen input[type=tel]:not(.browser-default), 
#authen input[type=password]:not(.browser-default), 
#authen input[type=email]:not(.browser-default) {
	font-size: 1.5rem;
	height: 1.0em;
}
[type="checkbox"]+span:not(.lever) {
	height: 1.5rem;
	line-height: 1.5rem;
	padding-left: 2em;
}
[type="checkbox"].filled-in:not(:checked)+span:not(.lever):after,
[type="checkbox"].filled-in:checked+span:not(.lever):after {
	height: 1.25rem;
	width: 1.25rem;
}
[type="checkbox"].filled-in:checked+span:not(.lever):before {
	width: 0.425em;
	height: 0.75em;
	top: -1px;
	border-top: 0px solid transparent;
	border-left: 0px solid transparent;
}
.large [type="radio"]+span:before, .large [type="radio"]+span:after {
	width: 0.675em;
	height: 0.675em;
}
[type="radio"].with-gap:checked+span:before,
[type="radio"].with-gap:checked+span:after {
	border-color: red;
}
:checked+span:after, [type="radio"].with-gap:checked+span:after {
	background-color: red;
}
[type="checkbox"].filled-in:disabled:not(:checked)+span:not(.lever):after {
	background-color: #ccc;
}
[type="checkbox"].filled-in:disabled:not(:checked)+span:not(.lever) {
	color: #aaa !important;
}
[type="checkbox"].filled-in:checked+span:not(.lever):after {
	background-color: red;
	border-color: red;
}
.input-field>label {
	top: -0.5em;
}
.input-field .suffix {
    position: absolute;
    width: 2.25rem;
    font-size: 1.8rem;
    -webkit-transition: color .2s;
    transition: color .2s;
    right: 0;
    top: 0.375em;
    cursor: pointer;
}
.input-field .helper-text {
	min-height: 1.125em;
	font-size: 1.0rem;
	margin-top: 0.125em;
}
/*
.input-field .suffix.active {
    color: #26a69a
}

.input-field .suffix ~ input, 
.input-field .suffix ~ textarea, 
.input-field .suffix ~ label, 
.input-field .suffix ~ .validate ~ label, 
.input-field .suffix ~ .helper-text, 
.input-field .suffix ~ .autocomplete-content {
    margin-left: 3rem;
    width: 92%;
    width:calc(100% - 3rem)
}

.input-field .suffix ~ label {
    margin-left:3rem
}
*/
[type="checkbox"]+span:not(.lever) {
	font-size: 1.25rem;
}

.input-field>label,
.input-field>label:not(.label-icon).active,
.input-field>input[type]:-webkit-autofill:not(.browser-default):not([type="search"])+label {
	font-size: 1.5em;
	transform: none;
	margin-top: 0.25em;
	width: 100%;
}
#authen .input-field>label,
#authen .input-field>label:not(.label-icon).active,
#authen .input-field>input[type]:-webkit-autofill:not(.browser-default):not([type="search"])+label {
	font-size: 1.25em;
	transform: none;
	margin-top: 0.525em;
}
.enroll-confirm .input-field>label,
.enroll-confirm .input-field>label:not(.label-icon).active {
	top: -0.5em;
}
fieldset { border: none; }