@charset "utf-8";
/* CSS Document */

/*
ExtraLight 200
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
Black 900
*/

body 				{color: #333333; background-color: #FFFFFF; font-size: 1rem; font-family: 'Poppins', sans-serif;}

h1, h2, h3, h4, h5	{color: #083b7c; font-weight: 700; font-family: 'Poppins', sans-serif;}
h1					{}
h2					{}
h3					{}
h4					{}
h5					{}

strong				{font-weight: 600;}

a					{text-decoration:none; color: #000000; transition: 0.5s;}
a:hover				{text-decoration:none; color: #083b7c;}
a:visited			{text-decoration:none;}
a:focus,a:hover		{text-decoration:none;}

:root {
	--def-padding : 4rem;
	--blue-color : #00458a;
}

.page					{}

/*
.modal-content			{border-radius: 0;}
.form-control 			{border-radius: 0;}
.btn 					{border-radius: 0;}
.form-select 			{border-radius: 0;}
*/


.menu-area				{position: fixed; top: 0; left: 0; z-index: 50; width: 100%; background-color: rgba(1,66,120,0.5); padding-top: 0.5rem; padding-bottom: 0.5rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.menu-area.sticky 		{padding-top: .25rem; padding-bottom: .25rem; background-color: rgba(1,66,120,0.8);}



.header-area				{width: 100%; position: relative;}
.header-area .banner-area	{}
.header-area .character		{position: absolute; bottom: 0; right: 0; width: 100%; z-index: 1;}
.header-area .name			{position: absolute; bottom: 15%; left: 0; width: 100%; z-index: 2;}
.header-area .name-in		{position: absolute; bottom: 15%; left: 0; width: 100%; z-index: 2;}
.header-area .logo			{position: absolute; top: 12%; left: 0; width: 100%; z-index: 3;}



.menu-area .header-a			{text-align: right; margin-bottom: 0.5rem;}
.menu-area .header-a a 			{color: #FFFFFF;}
.menu-area .header-a a:hover 	{color: #59c2b4;}
.menu-area .header-a .list-inline-item:not(:last-child) {margin-right: 1rem;}



.card-area					{padding-top: var(--def-padding); padding-bottom: var(--def-padding);
	background: rgb(242,242,242);
	background: -moz-linear-gradient(-45deg,  rgba(242,242,242,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(-45deg,  rgba(242,242,242,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(135deg,  rgba(242,242,242,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=1 );}

.card-block				{}
.card-block .line-a		{font-size: 300%; font-weight: 800; line-height: normal; color: #083b7c;}
.card-block .line-b		{font-size: 200%; font-weight: 300; line-height: normal; color: #083b7c;}
.card-block .line-c		{font-size: 200%; font-weight: 800; line-height: normal; color: #01a190;}
.card-block .line-d		{color: #FF0004; line-height: normal; margin-bottom: 1rem;}
.card-block .line-e		{}
.card-block .line-e a		{background-color: #083b7c; color: #FFFFFF; padding: 0.5rem 1rem; display: inline-block; border-radius: 5rem;}
.card-block .line-e a:hover {background-color: #01a190; color: #FFFFFF;}


.add-event			{background-color: #083b7c; color: #FFFFFF; padding: 0.25rem 1rem; display: inline-block; border-radius: 5rem;}
.add-event:hover 	{background-color: #01a190; color: #FFFFFF;}



.registration-area		{padding-top: var(--def-padding); padding-bottom: var(--def-padding); background-color: #d2e4f9;}
.registration-area .registration-block		{background-color: #FFFFFF; padding: 2rem; height: 100%;}
.registration-area .registration-block h3 	{color: #01a190;}

.registration-area .registration-block .registration-img 		{transition: margin 0.2s ease-in-out;}
.registration-area .registration-block:hover .registration-img 	{margin-top: -10px;}


.registration-area .registration-block .hvr-float {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.registration-area .registration-block:hover .hvr-float,
.registration-area .registration-block:focus .hvr-float,
.registration-area .registration-block:active .hvr-float {-webkit-transform: translateY(-8px); transform: translateY(-8px);}



 .reg-button {
	 display: inline-block;
	 background-color: #014278;
	 padding: 0.5rem 1rem;
	 color: #FFFFFF;
	 border-radius: 5rem;
	 overflow: hidden;
	 vertical-align: middle;
	 -webkit-transform: perspective(1px) translateZ(0);
	 transform: perspective(1px) translateZ(0);
	 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	 position: relative;
	 -webkit-transition-property: color;
	 transition-property: color;
	 -webkit-transition-duration: 0.3s;
	 transition-duration: 0.3s;}
.reg-button:before {
	content: "";
	position: absolute;
	
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #01a190;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.reg-button:hover,
.reg-button:focus,
.reg-button:active 			{color: white;}

.reg-button:hover:before,
.reg-button:focus:before,
.reg-button:active:before 	{-webkit-transform: scaleX(1); transform: scaleX(1);}



.event-calender							{padding-top: var(--def-padding); padding-bottom: var(--def-padding); background-color: #c0ebe6;}
.event-calender .events-calender		{padding: 1rem; background-color: #01a190; height: 100%;}
.event-calender .events-block			{padding: 2rem; border: 1px solid #01a190;}
.events-calender-block					{height: 100%;}
.event-calender .events-calender h2 	{color: #FFFFFF;}
.event-calender .events-block h4 		{font-weight: 500;}


.ad-a			{padding-top: var(--def-padding); padding-bottom: var(--def-padding); background-color: #083b7c;}
.ad-b			{padding-top: var(--def-padding); padding-bottom: var(--def-padding); background-color: #01a190;}


.news-updates		{padding-top: var(--def-padding); padding-bottom: var(--def-padding); background-color: #fafafa;}
.news-updates .news-updates-block	{padding: 2rem; position: relative; z-index: 3;}
.news-updates .item				{position: relative;}
.news-updates .owl-item::after {content: ""; position: absolute; top: 5%; right: 0; bottom: 0; height: 90%; width: 98%; border: 2px solid #093c7d; z-index: 1; border-radius: 0.25rem;}


.footer			{padding-top: 1rem; padding-bottom: 1rem; background-color: #083b7c; color: #FFFFFF; font-size: 75%;}
.footer a 			{color: #FFFFFF;}
.footer a:hover 	{text-decoration: underline;}
.footer .list-inline-item a {font-size: 200%;}

.footer .list-inline-item:not(:last-child) {margin-right: 1rem;}

.footer .list-inline-item a 		{color: #FFFFFF;}
.footer .list-inline-item a:hover 	{color: #01a190;}

.loginwith				{}
.loginwith li a			{border: 1px solid #cccccc; display: inline-block; padding: .5rem 1rem;}
.loginwith li a:hover	{border: 1px solid #cccccc; background-color: #999999; color: #FFFFFF;}


.main-area			{padding-top: var(--def-padding); padding-bottom: var(--def-padding); background-color: #FFFFFF;}



.reg-area			{background-color: #fafafa;}
.reg-area-in		{padding: 2rem; background-color: #FFFFFF; border-radius: 0.25rem;}


.news-events-row				{padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #f2f2f2;}
.news-events-row:last-child		{padding-bottom: 0; margin-bottom: 0; border-bottom: none;}
.news-events-row .btn			{border-radius: 5rem;}

.members-block							{}
.members-block .members-img img			{border-radius: 100%;}
.members-block .members-img				{margin-bottom: 0.5rem;}
.members-block .members-desc			{text-align: center;}
.members-block .members-desc .line-a	{color: #083b7c; font-weight: 500;}
.members-block .members-desc .line-b	{font-size: 87.5%;}

.about-members							{}
.about-members .members-img img			{border-radius: 100%;}
.about-members .members-img				{margin-bottom: 0.5rem;}
.about-members .members-desc			{text-align: center;}
.about-members .members-desc .line-a	{color: #083b7c; font-weight: 500; line-height: normal;}
.about-members .members-desc .line-b	{font-size: 87.5%;}


.vision-bg		{background-image: url("../images/vision-bg.jpg");}
.mission-bg		{background-image: url("../images/mission-bg.jpg");}

.mv-block			{padding: 2rem; height: 100%; color: #FFFFFF; background-position: right center; background-size: cover; background-repeat: no-repeat;}
.mv-block h5 		{color: #FFFFFF;}
.mv-block ul li		{font-size: 87.5%;}


.president-row				{position: relative;}

.president-block			{text-align: center; position: relative; z-index: 1; padding: 10px;}
.president-block::after		{content: ""; position: absolute; top: 60px; left: 0; width: 100%; height: 1px; background-color: #666666;}
.president-block .line-a	{margin-bottom: 1rem;}
.president-block .line-b	{margin-bottom: 0.25rem; color: #083b7c; font-weight: 500;}
.president-block .line-c	{margin-bottom: 0; font-size: 87.5%;}

.president-block .line-a img	{width: 100px; height: 100px; border-radius: 100%; position: relative; z-index: 2;}










/* ===== CALENDAR ===== */
.supercal								{background-color: #01a190; color: white; padding: 1rem;}
.supercal 								{width: 100%;}
.supercal .supercal-header 				{display: block; padding: 0.5rem 0; margin-bottom: 1rem; text-align: center; position: relative; border-bottom: 1px solid #FFFFFF;}

.supercal .supercal-header .month		{font-weight: bold;}
.supercal .supercal-header .prev-month	{padding-left: 1rem;}
.supercal .supercal-header .next-month	{padding-right: 1rem;}

.supercal .supercal-header .prev-month 	{float: left;}
.supercal .supercal-header .next-month 	{float: right;}
.supercal-month 						{position: relative; z-index: 0; overflow: hidden;}
.supercal table 						{width: 100%; table-layout: fixed; background-color: #01a190; margin-bottom: 0; color: white; text-align: center;}
.supercal td 							{cursor: pointer; border: none; padding: 0.5rem}
.supercal td:hover 						{background: #2f96b4 !important; color: #fff;}
.supercal td.month-prev,
.supercal td.month-next 				{background: #01a190;}
.supercal td.selected 					{background: #0f8ee3; color: #fff; font-weight: normal; border: 1px solid #9cd0f3;}
.supercal td.today 						{}
.supercal th							{font-weight: normal;}

.change-month		{background-color: transparent; border: none; padding: 0; color: white;	}

/* Footer */
.supercal .supercal-footer 						{display: none; width: 100%; /*display: table;*/}
.supercal .supercal-footer span.supercal-input 	{display: table-cell; width: 100%; cursor: default;}
/* ===== CALENDAR ===== */





/* ===== PRELOADER ===== */
#preloader	{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 9999;}
#status		{width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url("../images/loading.jpg"); background-repeat:no-repeat; background-position: center center; margin: -100px 0 0 -100px;}
/* ===== PRELOADER ===== */



/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  
.header-area .character		{}
.header-area .name			{}
.header-area .name-in		{}
.header-area .logo			{top: 15%;}
	  
.header-area .name img		{max-width: 400px}
	  
.header-area .logo .main-logo	{max-height: 200px;}
.header-area .logo .kma-logo	{max-height: 100px;}	  
	  
.header-area .character img		{max-height: 550px;}	  

	  
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
	  
	  
.header-area .character		{}
.header-area .name			{}
.header-area .name-in		{}
.header-area .logo			{top: 15%;}
	  
.header-area .name img		{max-width: 400px}
	  
.header-area .logo .main-logo	{max-height: 200px;}
.header-area .logo .kma-logo	{max-height: 100px;}	  
	  
.header-area .character img		{max-height: 550px;}
	  
	  
}


/* Laptop - For 1366 Resolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{
	

	
}


/* Laptop  - For 1024 Resolution */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{
	
body 				{font-size: 0.875rem;}	
	
	
	
	
}


/* iPad Landscape */
@media only screen   
and (orientation : landscape)   
and (-webkit-min-device-pixel-ratio: 2)  
and (min-width : 768px)   
and (max-width : 1024px)   
{
	
body 				{font-size: 0.875rem;}
	
	

	
.header-area .character		{}
.header-area .name			{}
.header-area .name-in		{}
.header-area .logo			{top: 20%;}
	  
.header-area .name img		{max-width: 250px}
	  
.header-area .logo .main-logo	{max-height: 150px;}
.header-area .logo .kma-logo	{max-height: 100px;}	  
	  
.header-area .character img		{max-height: 375px;}

	
}


/* iPad Portrait */
/* Orientation : Portrait */  
@media only screen   
and (orientation : portrait)   
and (-webkit-min-device-pixel-ratio: 2)   
and (min-width : 768px)   
and (max-width : 1024px)  
{

body 				{font-size: 0.875rem;}	
	

.menu-area .header-a		{display: none;}
	
.header-area 				{margin-top: 50px;}	
.header-area .name			{bottom: 10%;}
.header-area .logo			{top: 8%;}	
	
	
}

/* Generally, this dimension is recommended for mobile: - For 640 Resolution */  
@media only screen   
and (min-width : 360px)   
and (max-width : 640px)  
{
	
body 				{font-size: 0.875rem;}
	
	
.menu-area .header-a		{display: none;}

.header-area 				{margin-top: 50px;}	
.header-area .name			{bottom: 10%;}
.header-area .logo			{top: 8%;}
	
.event-calender .events-block	{padding: 1rem;}
	
	
.news-updates .news-updates-block	{padding: 1rem;}
	
	
.reg-area-in		{padding: 1rem;}	
	
	
}

/* Mobile - For 480 Resolution */  
@media only screen   
and (min-width : 320px)   
and (max-width : 480px)
{
	
body 				{font-size: 0.875rem;}
	
.menu-area .header-a		{display: none;}
	
.header-area 				{margin-top: 50px;}
.header-area .name			{bottom: 10%;}
.header-area .logo			{top: 8%;}

.event-calender .events-block	{padding: 1rem;}
	
	
.news-updates .news-updates-block	{padding: 1rem;}
	
	
.reg-area-in		{padding: 1rem;}
	

}