//
//common
//

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
/*font-family: 'Caveat', cursive;*/
body,html {scroll-behavior: smooth; margin: 0; padding: 0; font-family: 'HelveticaNeue', sans-serif !important; font-weight: $font-weight-light; line-height:130% }
body{ font-size: 1rem; overflow-x: hidden;box-sizing: border-box;}

a, a:hover, a:focus {text-decoration: none !important; outline: none; box-shadow: none;}
h1, h2, h3, h4, h5, h6 { font-weight: $font-weight-bold; margin: 0; line-height: 130%; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a, .animate, button{@include transition (all, 0.5s, ease)}

.burger{ padding: 50px 0; }
.burger_b{ padding-bottom: 50px; }
.burger_t{ padding-top: 50px; }

.bg-primary{ background: $primary !important }
.bg-secondary{ background: $secondary !important }
.bg-info{ background: $secondary !important }
.bg-warning{ background: $warning !important }
.bg-light{ background: $white !important }
.bg-black{ background: $black} 
.bg-none{ background: transparent !important }

.text-white{ color: $white; }
.text-black{ color: $black; }
.text-gray{ color: rgba($black,.5); }

.line_height18{ line-height: 180%;}

/*.img-svg{}
.img-svg path{}*/
.gotop{position: fixed; right: 20px; bottom: 20px; z-index: 3; color: $white; background:$primary; border: 2px solid $white; width: 40px; height: 40px; border-radius: 100%; text-align: center; line-height: 36px; opacity: .6;  display: none;}
.gotop:hover{ color: $white; opacity: 1 }
.gotop i{ font-size: 14px }

.section{ position: relative; }

/* width */
/*::-webkit-scrollbar {width: 3px; }*/
/* Track */
/*::-webkit-scrollbar-track {background: $black; }*/
/* Handle */
/*::-webkit-scrollbar-thumb {background: rba($black, .7); }*/
/* Handle on hover */
/*::-webkit-scrollbar-thumb:hover {background: #555; }*/

.d-flex{ display: flex; }

.flex-justify-center{ justify-content: center; }
.flex-justify-between{ justify-content: space-between; }
.flex-justify-around{ justify-content:space-around; }
.flex-justifysprad {-ms-flex: 1 1 auto!important; flex: 1 1 auto!important; }

.flex-item-align-center{ align-items: center; }
.flex-item-align-end{ align-items:flex-end  }

.small, small{ font-size: 80%; }
.big{ font-size: 120%; }
.text-muted{ color:rgba($black, .5)}

.box_circle{ border-radius: 100%; }
.border-top-2{ border-top: 2px solid rgba($black, 1);}
.border-top{ border-top: 1px solid rgba($black, .2);
	&.border-white{ border-color: rgba($white, .2); }
}
.border-bottom{ border-bottom: 1px solid rgba($black, .2);
	&.border-white{ border-color: rgba($white, .2); }
}
.border-0{ border: 0 !important; }
.border-bottom-0{ border-bottom: 0 !important; }

.mx-0{ margin-left: 0; margin-right: 0; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.ml-auto{ margin-left: auto;}
.mr-auto{ margin-right: auto; }
.mb-auto{ margin-bottom: auto; }
.mx-2{ margin-left: 20px; margin-right: 20px; }

.mb-1{ margin-bottom: $g_small; }
.mb-2{ margin-bottom: $g_baseline; }
.mb-3{ margin-bottom: $g_large; }
.mb-4{ margin-bottom: $g_extraLarge; }

.mt-0{ margin-top:0; }
.mt-1{ margin-top: $g_small; }
.mt-2{ margin-top: $g_baseline; }
.mt-3{ margin-top: $g_large; }
.mt-4{ margin-top: $g_extraLarge; }

.ml-1{ margin-left: $g_small; }
.ml-2{ margin-left: $g_baseline; }
.ml-3{ margin-left: $g_large; }
.ml-4{ margin-left: $g_extraLarge; }

.mr-1{ margin-right: $g_small; }
.mr-2{ margin-right: $g_baseline; }
.mr-3{ margin-right: $g_large; }
.mr-4{ margin-right: $g_extraLarge; }

.p-0{ padding:0 !important}
.py-0{ padding-top: 0; padding-bottom: 0; }
.px-0{ padding-left: 0; padding-right: 0; }
.py-1{ padding-top: 10px; padding-bottom: 10px; }

.pt-0{ padding-top: 0; }
.pt-1{ padding-top: 1rem; }
.pt-2{ padding-top: 2rem; }
.pt-3{ padding-top: 3rem; }
.pt-4{ padding-top: 4rem; }

.pb-0{ padding-bottom: 0; }
.pb-1{ padding-bottom: 1rem; }
.pb-2{ padding-bottom: 2rem; }
.pb-3{ padding-bottom: 3rem; }
.pb-4{ padding-bottom: 4rem; }

.pl-0{ padding-left: 0 !important; }

.w-100{ width: 100%; }

.text-left{ text-align: left !important; }
.text-center{ text-align:center !important; }
.text-right{ text-align: right !important; }

.p-relative{ position: relative; }
.v_hidden{ overflow: hidden; }

hr{ border-color: rgba($black, .2);}

.iframe_video{ position: relative; width: 100%; max-width: 775px;
	&:after{ content: ''; display: block; padding-bottom: 57%;}
	iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
}

.badge{ padding: 6px 8px; display: inline-block; font-size: 14px; font-weight: $font-weight-bold; line-height: 100%;
	&.badge-sm{padding: 5px 8px;}
	&.badge-warning{ background: $warning; color: $black; }
	&.badge-light{ background: $white; color: $black; }
	&.badge-black{ background: $black; color: $white; }
}

.bg_strip1, .bg_strip2, .bg_strip3, .bg_strip6{ content: ''; position: absolute; z-index: 0;
	.img-svg{ width: 100%; height: auto; }
}
.bg_strip3{ left: 0; top: -20%; max-width: 300px;  width: 30%;}
.bg_strip2{ right: 0; top: -100px; max-width: 200px;  width: 30%;}
.bg_strip6{ right: 0; top: -100px; max-width: 500px;  width: 40%;}
.bg_strip1{ left: 0; bottom: -5px; max-width: 200px;  width: 30%;
	.img-svg{
		path{fill: $secondary; stroke: transparent; stroke-width: 8; }
	}
}

h2{
	&.border-top{ padding-top: 5px; }
}

.heading_1{ font-size: $h1-font-size; line-height: 110%; }
.heading_2{/* font-size: $h1-font-size; line-height: 110%;*/ }
.heading_3{ font-size: $font-size-base; line-height: 110%; }
.ticket_section{overflow: hidden; padding-bottom: 100px;}
.ticket{position: relative; overflow: hidden;
	.img-svg{width: 100%; height: auto;}
	/*.ticket_cnt{position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; padding: 3.75rem 2.125rem; display: flex; flex-direction: column; align-content: space-between!important;}*/
	.ticket_cnt{ width: 100%; height: 100%; padding: 3.75rem 2.125rem; display: flex; flex-direction: column; align-content: space-between!important; background: $white; min-height: 450px;
		&:after, &:before{ content: ''; position: absolute; width: 40px; height: 40px; border-radius: 100%; display: inline-block; left: 50%; margin-left: -20px; background: $black; }
		&:after{ top: -20px; }
		&:before{ bottom: -20px; }
	}
	&.active{ 
		.ticket_cnt{background: $warning;}
		.img-svg{
			path{ fill:$warning }
		}
	}
	h3{ font-size: 3.25rem; }
	p{ line-height: 180%; font-size: 1.125rem;  }
}

.ticket_dtl{	
	h4{ margin-bottom: .5rem; }
	p{ font-size: 14px; margin:0 }
}
.ticket_sm{ width: 160px; height: 125px; font-size: 1.5rem; line-height: 120px; background: $warning; color: $black; text-align: center; position: relative; font-weight: $font-weight-bold; 
	&:after, &:before{ content: ''; position: absolute; width: 16px; height: 16px; border-radius: 100%; display: inline-block; top: 50%; margin-top: -8px; background: $white; }
	&:after{ left: -8px; }
	&:before{ right: -8px; }
	&.not_completed{ opacity: .5; }
}
.steps{ margin-right: 1rem; width: 40px; height: 40px; text-align: center; background: $black; color: $white; font-size: 1.5rem; font-weight: $font-weight-bold; display: inline-block; border-radius: 100%; vertical-align: middle; padding-top: 11px;}

.progress-bar{ width:100%; height: 8px; border-radius: 8px; background: $white; overflow: hidden; position: relative;
	.progress{ background: $secondary; position: absolute; left: 0; top: 0; height: 100%; }
}

.strip_bg1{ background: url('../images/bg_strip5.svg') no-repeat right bottom; background-size: 15%; }
.grid_section{ border-top: 1px solid $black; border-bottom: 1px solid $black; padding: 7px 0 5px; text-align: right;
	span{ font-weight: $font-weight-bold; font-size: .75rem;}
	a{ padding-left: 10px; vertical-align: middle; display: inline-block;
		.img-svg{width: 18px; height: auto;
			path{ fill: $black; }
		}
		&.active{
			.img-svg{
				path{ fill: $secondary; }
			}
		}
	}
}

.school_grid{ margin-bottom: 1.5rem; margin:$g_extraSmall ;
	.school_grid_img{ width: 100%; position: relative; margin-bottom: 1rem; display: block; background: $black;
		&:after{content: ''; padding-bottom: 60%; display: block;}
		img{ position: absolute; left: 0%; top: 50%; transform: translateY(-50%); width: 100%; min-height: 100%; @include transition (all, 0.5s, ease)}
		&:hover{ 
			img{opacity: .85; }
		}
	} 
	h3{ font-size: 1.125rem; font-weight: $font-weight-bold; margin: .5rem 0;@include transition (all, 0.5s, ease);
		&:hover{ opacity: .5; }
	} 
	.img{ margin-right: 10px; }
	.text-muted{
		&:hover{ color:rgba($black, .7)}
	}
}

.readmore{ color:$white; display: inline-block; font-weight:$font-weight-bold;
	.img-svg{
		path{fill:white;}
	}
}

.services_history_list{
	li{ padding:10px 0; border-bottom: 1px solid rgba($black, .2);
		&:last-child{ border-bottom: none; }
	}
	.box_circle{width: 4.5rem; height: 4.5rem; line-height: 4.5rem; text-align: center; font-weight: $font-weight-bold; font-size: 1.5rem;
		&.bg-info{ color: $white; }
	}
	.mt-1{ margin-top: .5rem !important; }
	.txt_cnt{ line-height: 150%; }
	a{ display: block; }
}

.inner_nav{ margin-top: -2px; }
.navigation_cnt{
	&.cnt_white{
		h3{color:$white;
			span{ border-color:$white}
		}
	}
}
.d-none{display:none;}
.disabled{opacity:.5; cursor: default;}