.body_background				{ background-color: #FFFFFF;}
.body_background_alt			{ background-color: #CCCCCC;}	
.body_background_alt_dark		{ background-color: #505050;}	
.footer_background				{ background-color: #000000; height: 50px; }

/* DEBUG EDGES */
/* * { */
    /* outline: 1px solid red; */
/* } */

.atom_body {
    width: 800px;
    max-width: 100%;   /* allows shrinking if viewport is smaller */
    height: auto;
    margin: 0 auto;    /* centers on desktop */
}

.atom_banner_image 				{ display: block; width: 900px; height: 371px; background: url(../images/atom_logo_simple.png) no-repeat center; background-size: contain; }

.atom_banner					{ display: block; width: 800;	height: 514; background: url(../images/banner/atom_banner_f1.jpg) no-repeat; background-size: contain;  }

.atom_banner_counter 			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 60pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;} 
.banner_text					{ color: #ffffff; font-family: 'Levenim MT'; font-size: 24pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;}
.banner_text_small				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 16pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;}
A.banner_text_small:link 		{ text-decoration: none; }
A.banner_text_small:visited 	{ text-decoration: none; }
A.banner_text_small:hover 		{ text-decoration: none; }

.banner_text_large				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 30pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;}
A.banner_text_large:link 		{ text-decoration: none; }
A.banner_text_large:visited 	{ text-decoration: none; }
A.banner_text_large:hover 		{ text-decoration: none; }


.section_header					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 38pt; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; background: linear-gradient(90deg, #ff6600, #000000 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section_subheader				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 27pt; font-weight: normal;  }

.body_text						{ color: #000000; font-family: 'Levenim MT'; font-size: 18pt; font-weight: bold; letter-spacing: 0.028em;  }
.body_text_white				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 18pt; font-weight: bold; letter-spacing: 0.028em;  }
.body_text_orange				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 18pt; font-weight: bold; letter-spacing: 0.028em;  }
.body_text_styles				{ color: #000000; font-family: 'Levenim MT'; font-size: 18pt; font-weight: bold; letter-spacing: 0.028em; text-align: justify; }
.body_text_small				{ color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; text-align: justify; }
.body_text_small_white			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; text-align: justify; }


.body_overlap_section			{ background-color: #CCCCCC; color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; letter-spacing: 0.028em; text-align: justify; }
.body_overlap_section_alt		{ background-color: #505050; color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; letter-spacing: 0.028em; text-align: justify; }
	
/* Dropdown Menu */
.dropbtn 						{ font-family: 'Levenim MT'; font-size: 32pt; font-weight: bold; color: #ff6600; background-color: #000000; border: none; cursor: pointer;}
.dropbtn:hover 					{ text-decoration: none; color: #ffffff; }
.dropbtn:focus 					{ text-decoration: none; color: #ffffff; }
.dropbtn_hi						{ font-family: 'Levenim MT'; font-size: 32pt; font-weight: bold; color: #ffffff; background-color: #000000; border: none; cursor: pointer;}

.dropdown 						{ float: right; position: relative; display: inline-block; border: 0px solid #ffffff; padding: 0px 0px; }
.dropdown-content 				{ display: none; position: absolute; background-color: #B0B0B0; min-width: 120px; overflow: auto; box-shadow: 4px 2px 16px 0px #505050; right: 0; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal;}
.dropdown-content a 			{ color: black;	padding: 8px 16px; text-decoration: none; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; display: block; border: 1px solid #505050;}
.dropdown a:hover 				{ background-color: #303030; color: #ff6600; border: 1px solid #ff6600; }
.show 							{ display:block; }


.internallink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal;  }
A.internallink:link 			{ text-decoration: none; color: #ff6600; }
A.internallink:visited 			{ text-decoration: none; color: #ff6600; }
A.internallink:hover 			{ text-decoration: none; color: #000000; }

.internallink_alt					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal;  }
A.internallink_alt:link 			{ text-decoration: none; color: #ff6600; }
A.internallink_alt:visited 			{ text-decoration: none; color: #ff6600; }
A.internallink_alt:hover 			{ text-decoration: none; color: #ffffff; }

.externallink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 14pt; font-weight: normal;  }
A.externallink:link 			{ text-decoration: none; color: #ff6600; }
A.externallink:visited 			{ text-decoration: none; color: #ff6600; }
A.externallink:hover 			{ text-decoration: none; color: #ffffff; }

.externallink_black				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 18pt; font-weight: normal;  }
A.externallink_black:link 		{ text-decoration: none; color: #ff6600; }
A.externallink_black:visited 	{ text-decoration: none; color: #ff6600; }
A.externallink_black:hover 		{ text-decoration: none; color: #000000; }

.eventslink						{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal;  }
A.eventslink:link 				{ text-decoration: none; color: #ff6600; }
A.eventslink:visited 			{ text-decoration: none; color: #ff6600; }
A.eventslink:hover 				{ text-decoration: none; color: #000000; }

.locationslink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: normal;  }
A.locationslink:link 			{ text-decoration: none; color: #ff6600; }
A.locationslink:visited 			{ text-decoration: none; color: #ff6600; }
A.locationslink:hover 			{ text-decoration: none; color: #000000; }

.universitylink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal;  }
A.universitylink:link 			{ text-decoration: none; color: #ff6600; }
A.universitylink:visited 		{ text-decoration: none; color: #ff6600; }
A.universitylink:hover 			{ text-decoration: none; color: #000000; }

/* FOOTER LINKS */
.footer_facebook				{ background:url(../images/links/facebook_orange.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer;}
.footer_facebook:hover 			{ background:url(../images/links/facebook_white.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer; }				
.footer_instagram				{ background:url(../images/links/instagram_orange.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer;}
.footer_instagram:hover 		{ background:url(../images/links/instagram_white.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer; }				
.footer_zoom					{ background:url(../images/links/zoom_orange.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer;}
.footer_zoom:hover 				{ background:url(../images/links/zoom_white.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer; }				
.footer_maps					{ background:url(../images/links/maps_orange.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer;}
.footer_maps:hover 				{ background:url(../images/links/maps_white.png) no-repeat; background-size: cover; width: 25px;	height: 25px; border: none; cursor: pointer; }				

.atom_footer_jkd 				{ display: block; width: 180px; height: 180px; background: url(../images/logo/mono_black_jkd.png) no-repeat center; background-size: contain; }
.atom_footer_junfan 			{ display: block; width: 180px; height: 180px; background: url(../images/logo/mono_black_junfan.png) no-repeat center; background-size: contain; }
.atom_footer_kali 				{ display: block; width: 200px; height: 180px; background: url(../images/logo/mono_black_kali.png) no-repeat center; background-size: contain; }
.atom_footer_silat 				{ display: block; width: 160px; height: 160px; background: url(../images/logo/mono_black_silat.png) no-repeat center; background-size: contain; }

/* BELTS */
.atom_belt_white			{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: bold; background-color: #ffffff; border-color: #ff6600; border-style: solid; border-radius: 10px; border-width: 2px; white-space: nowrap;}
.atom_belt_orange			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #ff6600; border-color: #cc6600; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_red				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #e60000; border-color: #990000; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_yellow			{ color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: bold; background-color: #ffcc00; border-color: #ff9933; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_green			{ color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: bold; background-color: #009933; border-color: #006622; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_blue				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #0066ff; border-color: #000099; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_purple			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #6600cc; border-color: #601f60; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_brown			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #993300; border-color: #662200; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_black			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; border-color: #000000; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_black234			{ color: #999999; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; border-color: #666666; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_instructor		{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; border-color: #ff6600; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_mkginstructor	{ color: #ff0000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; border-color: #ff0000; border-style: solid; border-radius: 10px; border-width: 1px;}
.atom_belt_phase			{ color: #666666; font-family: 'Levenim MT'; font-size: 12pt; font-weight: bold; transform: rotate(90deg);}

/* CLASS ADVERT */
.atom_class					{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; width: 100% }
.atom_class_header			{ height: 45px; color: #ffffff; font-family: 'Levenim MT'; font-size: 18pt; font-weight: normal; background-color: #000000; vertical-align: center }
.atom_class_time			{ color: #000000; font-family: 'Levenim MT'; font-size: 18pt; font-weight: bold;  }
.atom_class_body			{ color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #ffffff; }
.atom_class_footer			{ height: 30px; color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; vertical-align: center }

/* GRADING DATES */
.atom_grading				{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; width: 100%; }
.atom_grading_header		{ height: 45px; color: #ffffff; font-family: 'Levenim MT'; font-size: 18pt; font-weight: normal; background-color: #000000; vertical-align: center }
.atom_grading_time			{ color: #000000; font-family: 'Levenim MT'; font-size: 18pt; font-weight: bold;  }
.atom_grading_body			{ color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #ffffff; }
.atom_grading_footer		{ height: 30px; color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; vertical-align: center }

/* PRICES ADVERT */
.atom_prices				{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; height: 275 }
.atom_prices_header			{ height: 45px; color: #ffffff; font-family: 'Levenim MT'; font-size: 18pt; font-weight: normal; background-color: #000000; vertical-align: center }
.atom_prices_body			{ color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #ffffff; }
.atom_prices_cost			{ color: #000000; font-family: 'Levenim MT'; font-size: 24pt; font-weight: bold;  }
.atom_prices_topup			{ color: #ff6600; font-family: 'Levenim MT'; font-size: 24pt; font-weight: bold;  }
.atom_prices_footer			{ height: 30px; color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; vertical-align: center }

A.atom_prices_topup:link 	{ text-decoration: none; }
A.atom_prices_topup:visited { text-decoration: none; }
A.atom_prices_topup:hover 	{ text-decoration: none; }
	

/* CLASS ADVERT */
.atom_advert_link			{ border: 0px; }
A.atom_advert_link:link 	{ text-decoration: none; }
A.atom_advert_link:visited 	{ text-decoration: none; }
A.atom_advert_link:hover 	{ text-decoration: none; }

.atom_advert				{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px }
.atom_advert:hover 			{ text-decoration: none; }
.atom_advert:focus 			{ text-decoration: none; }

.atom_advert_header			{ height: 45px; color: #ffffff; font-family: 'Levenim MT'; font-size: 18pt; font-weight: normal; background-color: #000000; }
.atom_advert_header:hover 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
.atom_advert_header:focus 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
.atom_advert_header_hi		{ height: 45px; color: #ff6600; font-family: 'Levenim MT'; font-size: 18pt; font-weight: normal; background-color: #000000; }
.atom_advert_header_hi:hover 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
.atom_advert_header_hi:focus 	{ text-decoration: none; background-color: #000000; color: #ff6600; }

/* ARTS LOGOS */
.atom_art_jkd				{ display: block; width: 120px; height: 120px; border: 1px solid black; border-radius: 140px; padding: 5px; background:  url(../images/logo/mono_black_jkd.png) no-repeat center; background-size: contain; }
.atom_art_junfan			{ display: block; width: 120px; height: 120px; border: 1px solid black; border-radius: 90px; padding: 5px; background:  url(../images/logo/mono_black_junfan.png) no-repeat center; background-size: contain; }
.atom_art_kali				{ display: block; width: 120px; height: 120px; background:  url(../images/logo/mono_black_kali.png) no-repeat center; background-size: contain; }
.atom_art_silat				{ display: block; width: 120px; height: 120px; background:  url(../images/logo/mono_black_silat.png) no-repeat center; background-size: contain; }
.atom_art_panantukan		{ display: block; width: 120px; height: 120px; background:  url(../images/logo/mono_black_panantukan.png) no-repeat center; background-size: contain; }
.atom_art_mkg				{ display: block; width: 120px; height: 120px; background:  url(../images/logo/mono_black_mkg.png) no-repeat center; background-size: contain; }


/* Testimonials */
.atom_testimonial				{ border-color: #ff6600; border-style: solid; border-width: 1px;  cursor: wait;}
.atom_testimonial_header		{ height: 30px; color: #ffffff; background-color: #ff6600; font-family: 'Levenim MT'; font-size: 14pt; font-weight: bold; text-align: left; }
.atom_testimonial_body			{ height: 100px; color: #000000; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #ffffff; text-align: justify; }

.atom_testimonial_star			{ display: inline-block; width: 14px; height: 14px; background: url(../images/star.png) no-repeat center; background-size: contain; }

/* Call out box */
.atom_callout_box					{ background-color: #ffffff; border: 2px solid #505050; width:250px; height:250px; border-radius: 20px 20px 20px 20px; width: 100%} 
.atom_callout_box:link 				{ text-decoration: none; }
.atom_callout_box:visited 			{ text-decoration: none; }


/* Call out circle */
.atom_callout_label					{ background-color: #000000; border: 3px solid #ffffff; width:150px; height:150px; border-radius: 75px 75px 75px 75px; }
.atom_callout_label_txt				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 16pt; font-weight: bold; } 
.atom_callout_label_txt_medium		{ color: #ffffff; font-family: 'Levenim MT'; font-size: 24pt; font-weight: bold; } 
.atom_callout_label_txt_large		{ color: #ffffff; font-family: 'Levenim MT'; font-size: 30pt; font-weight: bold; } 

/* .atom_callout_label:hover 			{ text-decoration: none; border: 0; background-color: #ff6600; } */
.atom_callout_label:hover 			{ text-decoration: none; border: 3px solid #ff6600; color: #ff6600; }

A.atom_callout_link:link 			{ text-decoration: none; }
A.atom_callout_link:visited 		{ text-decoration: none; }
A.atom_callout_link:hover 			{ text-decoration: none; border-color: #ffffff; }

/* Share circle */
.atom_callout_label_share			{ background-color: #ffffff; border: 0px; width:250px; height:250px; border-radius: 125px 125px 125px 125px; }
.atom_share_qr					{ display: block; width: 150px; height: 150px; background:  url(../images/qr_code.png) no-repeat center; background-size: contain; border: 0px; }

/* PHOTOS */
.photo							{ border: 1px solid #e0e0e0; width:250px; height:auto;}
.photo_clothing					{ border: 2px solid #c0c0c0; width:250px; height:250px; border-radius: 20px 20px 20px 20px;}
.photo_equipment				{ border: 0px solid #c0c0c0; width:150px; height:auto;}
.profile_photo					{ border: 1px solid #c0c0c0; width:250px; height:auto;}
.profile_photo_duncan			{ display: block; width: 250px; height: 330px; background:  url(../images/instructors/atom_duncan_lawley.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }
.profile_photo_rich				{ display: block; width: 250px; height: 330px; background:  url(../images/instructors/atom_richard_cogger.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }
.profile_photo_mikala			{ display: block; width: 250px; height: 330px; background:  url(../images/instructors/atom_mikala_aquilina.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }
.profile_photo_catrina			{ display: block; width: 250px; height: 330px; background:  url(../images/instructors/atom_catrina_prince.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }

.profile_photo_kidsclass		{ background: url(../images/banner/atom_banner_002_colour.jpg) no-repeat; background-size: contain;  display: block; width: 95vw; max-width: 800px;	height: auto; aspect-ratio: 800 / 248;}	
.profile_photo_private			{ background: url(../images/banner/atom_online_class_large.jpg) no-repeat; background-size: contain;  display: block; width: 95vw; max-width: 800px;	height: auto; aspect-ratio: 800 / 397;}	

.profile_photo_fareham			{ background: url(../images/banner/atom_banner_act_2a.jpg) no-repeat; background-size: contain;  display: block; width: 75vw; max-width: 800px;	height: auto; aspect-ratio: 800 / 514;}	
.profile_photo_hursley			{ background: url(../images/banner/atom_banner_f12.jpg) no-repeat; background-size: contain;  display: block; width: 75vw; max-width: 800px;	height: auto; aspect-ratio: 800 / 514;}	


/* CONTACT PAGE LINKS */
.link_facebook					{ background:url(../images/links/facebook_orange.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer;}
.link_facebook:hover 			{ background:url(../images/links/facebook.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer; }				
.link_instagram					{ background:url(../images/links/instagram_orange.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer;}
.link_instagram:hover 			{ background:url(../images/links/instagram.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer; }				
.link_zoom						{ background:url(../images/links/zoom_orange.png) no-repeat; background-size: cover; width: 45px;	height: 45px; border: none; cursor: pointer;}
.link_zoom:hover 				{ background:url(../images/links/zoom.png) no-repeat; background-size: cover; width: 45px;	height: 45px; border: none; cursor: pointer; }				
.link_maps						{ background:url(../images/links/maps_orange.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer;}
.link_maps:hover 				{ background:url(../images/links/maps.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer; }				
.link_email						{ background:url(../images/links/email_orange.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer;}
.link_email:hover 				{ background:url(../images/links/email.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer; }				
.link_chat						{ background:url(../images/links/chat_orange.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer;}
.link_chat:hover 				{ background:url(../images/links/chat.png) no-repeat; background-size: cover; width: 50px;	height: 50px; border: none; cursor: pointer; }				
.link_parking					{ background:url(../images/links/parking_orange.png) no-repeat; background-size: cover; width: 40px;	height: 50px; border: none; cursor: pointer;}
.link_parking:hover 			{ background:url(../images/links/parking.png) no-repeat; background-size: cover; width: 40px;	height: 50px; border: none; cursor: pointer; }				


/* EXPLORE LINKS */
.atom_explore_link				{ border: 0px; }
A.atom_explore_link:link 		{ text-decoration: none; }
A.atom_explore_link:visited 	{ text-decoration: none; }
A.atom_explore_link:hover 		{ text-decoration: none; }

.atom_explore					{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; width: 118; height: 100% }
.atom_explore:hover 			{ text-decoration: none; }
.atom_explore:focus 			{ text-decoration: none; }

.atom_explore_header			{ height: 40px; color: #ffffff; font-family: 'Levenim MT'; font-size: 16pt; font-weight: normal; background-color: #000000; }
.atom_explore_header:hover 		{ text-decoration: none; background-color: #000000; color: #ff6600; }
.atom_explore_header:focus 		{ text-decoration: none; background-color: #000000; color: #ff6600; }
.atom_explore_header_hi			{ height: 40px; color: #ff6600; font-family: 'Levenim MT'; font-size: 16pt; font-weight: normal; background-color: #000000; }
.atom_explore_header_hi:hover 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
.atom_explore_header_hi:focus 	{ text-decoration: none; background-color: #000000; color: #ff6600; }


/* CERTIFICATIONS */
.certification_link				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; }
A.certification_link:link 		{ text-decoration: none; }
A.certification_link:visited 	{ text-decoration: none; }
A.certification_link:hover 		{ text-decoration: none; }

/* EVENTS */
.atom_event_westwood			{ background: url(../images/westwood_2025_1.png) no-repeat; background-size: contain;  display: block; width: 95vw; max-width: 800px;	height: auto; aspect-ratio: 600 / 450;}	

/* MKG LOCATIONS MAP */

/* #map { 	height: 600px; width: 100%;  */

.uses-map #map {
  width: 100%;
  height: 70vh;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 420px) {

	* {    max-width: 100% !important; }
	
	.atom_body {
        width: 100% !important;  /* shrink to viewport width */
        max-width: 95% !important; /* leave margin */
        margin: 0 !important;    /* remove desktop centering */
    }

	.atom_banner_image 				{ background: url(../images/atom_logo_simple.png) no-repeat center; background-size: contain; display: block; width: 95vw; max-width: 900px; height: auto; aspect-ratio: 900 / 371; }
	
	.atom_banner					{ background: url(../images/banner/atom_banner_f1.jpg) no-repeat; background-size: contain;  display: block; width: 95vw; max-width: 800px;	height: auto; aspect-ratio: 800 / 514;}	
	
	/* BANNER ANIMATION */
	.atom_banner_counter 			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 30pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;} 
	.banner_text					{ color: #ffffff; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;}
	.banner_text_small				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;}
	A.banner_text_small:link 		{ text-decoration: none; }
	A.banner_text_small:visited 	{ text-decoration: none; }
	A.banner_text_small:hover 		{ text-decoration: none; }
	
	.banner_text_large				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 18pt; font-weight: bold; letter-spacing: 0.028em; align: right; vertical-align: top;}
	A.banner_text_large:link 		{ text-decoration: none; }
	A.banner_text_large:visited 	{ text-decoration: none; }
	A.banner_text_large:hover 		{ text-decoration: none; }

	
	.section_header					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 17pt; font-weight: bold; letter-spacing: 0.035em; text-transform: uppercase; background: linear-gradient(90deg, #ff6600, #000000 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
	.section_subheader				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 12.5pt; font-weight: normal;  }
	
	.body_text						{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; letter-spacing: 0.028em;  }
	.body_text_white				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; letter-spacing: 0.028em;  }
	.body_text_orange				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; letter-spacing: 0.028em;  }
	.body_text_styles				{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; letter-spacing: 0.028em; text-align: justify; }
	.body_text_small				{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; text-align: justify; }
	.body_text_small_white			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; text-align: justify; }

		
	.body_overlap_section			{ background-color: #CCCCCC; color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; letter-spacing: 0.028em; text-align: justify; }
	.body_overlap_section_alt		{ background-color: #505050; color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; letter-spacing: 0.028em; text-align: justify; }
		
	
	/* DROPDOWN MENU */
	.dropbtn 						{ font-family: 'Levenim MT'; font-size: 16pt; font-weight: bold; color: #ff6600; background-color: #000000; border: none; cursor: pointer;}
	.dropbtn:hover 					{ text-decoration: none; color: #ffffff; }
	.dropbtn:focus 					{ text-decoration: none; color: #ffffff; }
	.dropbtn_hi						{ font-family: 'Levenim MT'; font-size: 16pt; font-weight: bold; color: #ffffff; background-color: #000000; border: none; cursor: pointer;}

	.dropdown 						{ float: right; position: relative; display: inline-block; border: 0px solid #ffffff; padding: 0px 0px; }
	.dropdown-content 				{ display: none; position: absolute; background-color: #B0B0B0; min-width: 120px; overflow: auto; box-shadow: 4px 2px 16px 0px #505050; right: 0; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal;}
	.dropdown-content a 			{ color: black;	padding: 8px 16px; text-decoration: none; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; display: block; border: 1px solid #505050;}
	.dropdown a:hover 				{ background-color: #303030; color: #ff6600; border: 1px solid #ff6600; }
	.show 							{ display:block; }

	
	.internallink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold;  }
	A.internallink:link 			{ text-decoration: none; color: #ff6600; }
	A.internallink:visited 			{ text-decoration: none; color: #ff6600; }
	A.internallink:hover 			{ text-decoration: none; color: #000000; }

	.internallink_alt					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold;  }
	A.internallink_alt:link 			{ text-decoration: none; color: #ff6600; }
	A.internallink_alt:visited 			{ text-decoration: none; color: #ff6600; }
	A.internallink_alt:hover 			{ text-decoration: none; color: #ffffff; }

	.externallink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold;  }
	A.externallink:link 			{ text-decoration: none; color: #ff6600; }
	A.externallink:visited 			{ text-decoration: none; color: #ff6600; }
	A.externallink:hover 			{ text-decoration: none; color: #ffffff; }
	
	.externallink_black				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold;  }
	A.externallink_black:link 		{ text-decoration: none; color: #ff6600; }
	A.externallink_black:visited 	{ text-decoration: none; color: #ff6600; }
	A.externallink_black:hover 		{ text-decoration: none; color: #000000; }
	
	.locationslink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 8pt; font-weight: normal;  }
	A.locationslink:link 			{ text-decoration: none; color: #ff6600; }
	A.locationslink:visited 			{ text-decoration: none; color: #ff6600; }
	A.locationslink:hover 			{ text-decoration: none; color: #000000; }
	
	.eventslink						{ color: #ff6600; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal;  }
	A.eventslink:link 				{ text-decoration: none; color: #ff6600; }
	A.eventslink:visited 			{ text-decoration: none; color: #ff6600; }
	A.eventslink:hover 				{ text-decoration: none; color: #000000; }	
	
	.universitylink					{ color: #ff6600; font-family: 'Levenim MT'; font-size: 8pt; font-weight: normal;  }
	A.universitylink:link 			{ text-decoration: none; color: #ff6600; }
	A.universitylink:visited 		{ text-decoration: none; color: #ff6600; }
	A.universitylink:hover 			{ text-decoration: none; color: #000000; }

	.atom_footer_jkd 				{ display: block; width: 80px; height: 80px; background: url(../images/logo/mono_black_jkd.png) no-repeat center; background-size: contain; }
	.atom_footer_junfan 			{ display: block; width: 80px; height: 80px; background: url(../images/logo/mono_black_junfan.png) no-repeat center; background-size: contain; }
	.atom_footer_kali 				{ display: block; width: 85px; height: 80px; background: url(../images/logo/mono_black_kali.png) no-repeat center; background-size: contain; }
	.atom_footer_silat 				{ display: block; width: 75px; height: 75px; background: url(../images/logo/mono_black_silat.png) no-repeat center; background-size: contain; }

	/* BELTS */
	.atom_belt_white			{ color: #ff6600; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; background-color: #ffffff; border-color: #ff6600; border-style: solid; border-radius: 10px; border-width: 2px; white-space: nowrap;}
	.atom_belt_orange			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #ff6600; border-color: #cc6600; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_red				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #e60000; border-color: #990000; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_yellow			{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; background-color: #ffcc00; border-color: #ff9933; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_green			{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; background-color: #009933; border-color: #006622; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_blue				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #0066ff; border-color: #000099; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_purple			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #6600cc; border-color: #601f60; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_brown			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #993300; border-color: #662200; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_black			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; border-color: #000000; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_black234			{ color: #999999; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; border-color: #666666; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_instructor		{ color: #ff6600; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; border-color: #ff6600; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_mkginstructor	{ color: #ff0000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; border-color: #ff0000; border-style: solid; border-radius: 10px; border-width: 1px;}
	.atom_belt_phase			{ color: #666666; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; transform: rotate(90deg);}

	/* CLASS ADVERT */
	.atom_class					{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; width: 100%; height: 310 }
	.atom_class_header			{ height: 30px; color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; vertical-align: center }
	.atom_class_time			{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold;  }
	.atom_class_body			{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #ffffff; }
	.atom_class_footer			{ height: 30px; color: #ff6600; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; vertical-align: center }
	
	/* GRADING DATES */
	.atom_grading				{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; width: 100%; height: 200 }
	.atom_grading_header		{ height: 30px; color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; vertical-align: center }
	.atom_grading_time			{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold;  }
	.atom_grading_body			{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #ffffff; }
	.atom_grading_footer		{ height: 30px; color: #ff6600; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; vertical-align: center }


	/* PRICES ADVERT */
	.atom_prices				{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; width: 100%; height: 210 }
	.atom_prices_header			{ height: 30px; color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #000000; vertical-align: center }
	.atom_prices_body			{ color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #ffffff; }
	.atom_prices_cost			{ color: #000000; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold;  }
	.atom_prices_topup			{ color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold;  }
	.atom_prices_footer			{ height: 30px; color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: normal; background-color: #000000; vertical-align: center }

	A.atom_prices_topup:link 	{ text-decoration: none; }
	A.atom_prices_topup:visited { text-decoration: none; }
	A.atom_prices_topup:hover 	{ text-decoration: none; }
		

	/* ADVERT */
	.atom_advert_link			{ border: 0px; }
	A.atom_advert_link:link 	{ text-decoration: none; }
	A.atom_advert_link:visited 	{ text-decoration: none; }
	A.atom_advert_link:hover 	{ text-decoration: none; }

	.atom_advert				{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px }
	.atom_advert:hover 			{ text-decoration: none; }
	.atom_advert:focus 			{ text-decoration: none; }

	.atom_advert_header			{ height: 45px; color: #ffffff; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; }
	.atom_advert_header:hover 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
	.atom_advert_header:focus 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
	.atom_advert_header_hi		{ height: 45px; color: #ff6600; font-family: 'Levenim MT'; font-size: 12pt; font-weight: normal; background-color: #000000; }
	.atom_advert_header_hi:hover 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
	.atom_advert_header_hi:focus 	{ text-decoration: none; background-color: #000000; color: #ff6600; }

	/* ARTS LOGOS */
	.atom_art_jkd				{ display: block; width: 75px; height: 75px; border: 1px solid black; border-radius: 140px; padding: 5px; background:  url(../images/logo/mono_black_jkd.png) no-repeat center; background-size: contain; }
	.atom_art_junfan			{ display: block; width: 75px; height: 75px; border: 1px solid black; border-radius: 90px; padding: 5px; background:  url(../images/logo/mono_black_junfan.png) no-repeat center; background-size: contain; }
	.atom_art_kali				{ display: block; width: 75px; height: 75px; background:  url(../images/logo/mono_black_kali.png) no-repeat center; background-size: contain; }
	.atom_art_silat				{ display: block; width: 75px; height: 75px; background:  url(../images/logo/mono_black_silat.png) no-repeat center; background-size: contain; }
	.atom_art_panantukan		{ display: block; width: 75px; height: 75px; background:  url(../images/logo/mono_black_panantukan.png) no-repeat center; background-size: contain; }
	.atom_art_mkg				{ display: block; width: 75px; height: 75px; background:  url(../images/logo/mono_black_mkg.png) no-repeat center; background-size: contain; }
	
	/* TESTIMONIALS */
	.atom_testimonial				{ border-color: #ff6600; border-style: solid; border-width: 1px;  cursor: wait; }
	.atom_testimonial_header		{ height: 12px; color: #ffffff; background-color: #ff6600; font-family: 'Levenim MT'; font-size: 14pt; font-weight: bold; text-align: left; }
	.atom_testimonial_body			{ height: 100px; color: #000000; font-family: 'Levenim MT'; font-size: 9pt; font-weight: normal; background-color: #ffffff; text-align: justify; }

	.atom_testimonial_star			{ display: inline-block; width: 14px; height: 14px; background: url(../images/star.png) no-repeat center; background-size: contain; }

	/* Call out box */
	.atom_callout_box					{ background-color: #ffffff; border: 2px solid #505050; width:80px; height:80px; border-radius: 20px 20px 20px 20px; width: 100%; height: 300px } 
	/* .atom_callout_box					{ background-color: #ffffff; border: 2px solid #505050; border-radius: 20px 20px 20px 20px; }  */
	.atom_callout_box:link 				{ text-decoration: none; }
	.atom_callout_box:visited 			{ text-decoration: none; }


	/* Call out circle */
	.atom_callout_label					{ background-color: #000000; border: 3px solid #ffffff; width:100px; height:100px; border-radius: 50px 50px 50px 50px; }
	.atom_callout_label_txt				{ color: #ffffff; font-family: 'Levenim MT'; font-size: 10pt; font-weight: bold; } 
	.atom_callout_label_txt_medium		{ color: #ffffff; font-family: 'Levenim MT'; font-size: 14pt; font-weight: bold; } 
	.atom_callout_label_txt_large		{ color: #ffffff; font-family: 'Levenim MT'; font-size: 16pt; font-weight: bold; } 

	/* .atom_callout_label:hover 			{ text-decoration: none; border: 0; background-color: #ff6600; } */
	.atom_callout_label:hover 			{ text-decoration: none; border: 3px solid #ff6600; color: #ff6600; }

	A.atom_callout_link:link 			{ text-decoration: none; }
	A.atom_callout_link:visited 		{ text-decoration: none; }
	A.atom_callout_link:hover 			{ text-decoration: none; border-color: #ffffff; }

	/* Share circle */
	.atom_callout_label_share			{ background-color: #ffffff; border: 0px; width:120px; height:120px; border-radius: 60px 60px 60px 60px; }
	.atom_share_qr					{ display: block; width: 75; height: 75; background:  url(../images/qr_code.png) no-repeat center; background-size: contain; border: 0px; }


	/* PHOTOS */
	.photo							{ border: 1px solid #e0e0e0; width:150px; height:auto;}
	.profile_photo					{ border: 1px solid #c0c0c0; width:150px; height:auto;}
	.photo_clothing					{ border: 2px solid #c0c0c0; width:100px; height:100px; border-radius: 10px 10px 10px 10px;}
	.photo_equipment				{ border: 0px solid #c0c0c0; width:80px; height:auto;}
	.profile_photo_duncan			{ display: block; width: 120px; height: 160px; background:  url(../images/instructors/atom_duncan_lawley.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }
	.profile_photo_rich				{ display: block; width: 120px; height: 160px; background:  url(../images/instructors/atom_richard_cogger.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }
	.profile_photo_mikala			{ display: block; width: 120px; height: 160px; background:  url(../images/instructors/atom_mikala_aquilina.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }
	.profile_photo_catrina			{ display: block; width: 120px; height: 160px; background:  url(../images/instructors/atom_catrina_prince.jpg) no-repeat center; background-size: contain; border: 1px solid #c0c0c0; }

	.profile_photo_kidsclass		{ background: url(../images/banner/atom_banner_002_colour.jpg) no-repeat; background-size: contain;  display: block; width: 95vw; max-width: 800px;	height: auto; aspect-ratio: 800 / 248;}	
	.profile_photo_private			{ background: url(../images/banner/atom_online_class_large.jpg) no-repeat; background-size: contain;  display: block; width: 95vw; max-width: 800px;	height: auto; aspect-ratio: 800 / 397;}	
							
	/* EXPLORE LINKS */
	.atom_explore_link				{ border: 0px; }
	A.atom_explore_link:link 		{ text-decoration: none; }
	A.atom_explore_link:visited 	{ text-decoration: none; }
	A.atom_explore_link:hover 		{ text-decoration: none; }

	.atom_explore					{ border-color: #000000; border-style: solid; border-width: 1px; border-radius: 5px 5px 5px 5px; width: 50px; height: 10px;}
	.atom_explore:hover 			{ text-decoration: none; }
	.atom_explore:focus 			{ text-decoration: none; }

	.atom_explore_header			{ color: #ffffff; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; background-color: #000000; }
	.atom_explore_header:hover 		{ text-decoration: none; background-color: #000000; color: #ff6600; }
	.atom_explore_header:focus 		{ text-decoration: none; background-color: #000000; color: #ff6600; }
	.atom_explore_header_hi			{ color: #ff6600; font-family: 'Levenim MT'; font-size: 9pt; font-weight: bold; background-color: #000000; }
	.atom_explore_header_hi:hover 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
	.atom_explore_header_hi:focus 	{ text-decoration: none; background-color: #000000; color: #ff6600; }
	
	/* CERTIFICATIONS */
	.certification_link				{ color: #ff6600; font-family: 'Levenim MT'; font-size: 10pt; font-weight: normal; }
	A.certification_link:link 		{ text-decoration: none; }
	A.certification_link:visited 	{ text-decoration: none; }
	A.certification_link:hover 		{ text-decoration: none; }

	/* EVENTS */
	.atom_event_westwood			{ background: url(../images/westwood_2025_1.png) no-repeat; background-size: contain;  display: block; width: 95vw; max-width: 390px;height: auto; aspect-ratio: 600 / 450;}	
	
	
	.uses-map .map-wrapper {
	  width: 100%;
	  overflow-x: hidden;
	}
	.uses-map #map {
	  width: 95vw;
	  height: 70vh;
	  max-width: 100%;
	  box-sizing: border-box;
	}
}