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

* {box-sizing: border-box;} 
/*
* {box-sizing: content-box;} 
*/

html{margin:0; padding:0;}

body{margin:0; padding:0; color:#222222; font-family:'Exo 2', Verdana, Arial, Helvetica, sans-serif; background:#eee url(bg.jpg) repeat; font-size:18px;}

body a {color:#c21e22; text-decoration:none}
body a:hover {color:#1c1a53; text-decoration:underline}

.noscriptmsg {font-size:32px;}

/*
COLOURS

Red
c21e22 = light
6e1113 = dark
f8d3d4 = lighter

Blue
1d1a65 = dark
3934cb = light
d7d6f5 = lighter
*/



#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("loading.gif") no-repeat center center rgba(255,255,255,1.0)
}
/*    background:url("loading2.gif") no-repeat center center rgba(0,0,0,0.25) */

#contents { width:100%; } 






/*For NAVBAR*/
#ytonavbar {max-width:1280px !important; margin:0px auto;}
#ytonavbar .nav-link {color:#ffff00;}
#ytonavbar .nav-link:hover {color:#fff; text-decoration:none; background-color:#3934cb;}
#ytonavbar .dropdown-header {color:#fff; background-color:#3934cb;}
#ytonavbar .dropdown-item:hover {color:#222; text-decoration:none; background-color:#d7d6f5;}
#ytonavbar .dropend > .nav-link {color:#000;}
#ytonavbar .dropend > .nav-link:hover {color:#fff; text-decoration:none; background-color:#3934cb;}
#ytonavbar .dropstart > .nav-link {color:#000;}
#ytonavbar .dropstart > .nav-link:hover {color:#fff; text-decoration:none; background-color:#3934cb;}

#ytonavbar2 {}
#ytonavbar2 .nav-link {color:#92F1C3;}
#ytonavbar2 .nav-link:hover {color:#fff; text-decoration:none; background-color:#1e7415;}
#ytonavbar2 .dropdown-header {color:#fff; background-color:#1e7415;}
#ytonavbar2 .dropdown-item:hover {color:#222; text-decoration:none; background-color:#BDF9E9;}
#ytonavbar2 .dropend > .nav-link {color:#000;}
#ytonavbar2 .dropend > .nav-link:hover {color:#fff; text-decoration:none; background-color:#1e7415;}
#ytonavbar2 .dropstart > .nav-link {color:#000;}
#ytonavbar2 .dropstart > .nav-link:hover {color:#fff; text-decoration:none; background-color:#1e7415;}

#ytonavbar3 {}
#ytonavbar3 .nav-link {color:#92F1C3;}
#ytonavbar3 .nav-link:hover {color:#fff; text-decoration:none; background-color:#1e7415;}
#ytonavbar3 .dropdown-header {color:#fff; background-color:#1e7415;}
#ytonavbar3 .dropdown-item:hover {color:#222; text-decoration:none; background-color:#BDF9E9;}
#ytonavbar3 .dropend > .nav-link {color:#000;}
#ytonavbar3 .dropend > .nav-link:hover {color:#fff; text-decoration:none; background-color:#1e7415;}
#ytonavbar3 .dropstart > .nav-link {color:#000;}
#ytonavbar3 .dropstart > .nav-link:hover {color:#fff; text-decoration:none; background-color:#1e7415;}

.dropdown-menu-end {right:0;left:auto;}


/*FOR OPENING DROPDOWN ON NAVBAR ON HOVER, RATHER THAN ON CLICK*/
/*
.dropdown:hover>.dropdown-menu, 
.dropend:hover>.dropdown-menu, .dropstart:hover>.dropdown-menu {
  display: block;
  margin-top: .1em;
  margin-left: .1em;
}
*/
.dropend:hover>.dropdown-menu, .dropstart:hover>.dropdown-menu {
  display: block;
  margin-top: .1em;
  margin-left: .1em;
}


/*FOR ADDDING TRANSITION ON THE OPENING OF THE DROPDOWN ON THE NAVBAR*/
/*
.dropdown .dropdown-menu {
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
  display: block !important;
  transform: scale(0);
}
.dropdown .dropdown-menu.show{
  transform: scale(1);
}
*/
/*
.dropdown .dropdown-menu {
    display: block;
    opacity:0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.dropdown .dropdown-menu.show {
    opacity: 1;
}
*/

/*For NAVBAR, The End*/


#footbar {width:100% !important; padding: 50px 24px; background-color:#6e1113; color:#fff; font-family:"NanumMyeongjo-Regular", sans-serif; font-size:16px; }
#footbar a {color:#ff0;}
#footbar a:hover {color:#d7d6f5;}
#dsocialfoot {font-size:32px; padding:50px 0px; color:#fff; text-align:left;}
#dsocialfoot span {padding-right:12px; color:#fff;}
.footbar_heading {font-family:'Montserrat-SemiBold', sans-serif; letter-spacing:-1px; font-size:30px; padding:0px 0px 14px 0px}
.footbar_heading2 {font-family:'Montserrat-SemiBold', sans-serif; letter-spacing:-1px; font-size:20px; padding:10px 0px 14px 0px}
.footbar_div {padding:0px 0px 12px 0px; word-wrap:break-word;}



/*FOR HEADINGS AND TYPOGRAPHY*/
.heading1 { font-family:"Montserrat-Bold", sans-serif; letter-spacing: 0px; line-height: 110%; text-shadow: 0px 2px 5px #222; color:#900; }
.heading1 > span { color:#aaa; }

.heading2 { font-family:"Montserrat-SemiBold", sans-serif; text-shadow:2px 2px 2px #333; font-size:35px; letter-spacing:-2px; line-height:100%; color:#777; padding-bottom:5px; }
.heading3 { font-family:"Marcellus-Regular", serif; text-shadow:1px 1px 2px #555; font-size:30px; letter-spacing:0px; line-height:100%; color:#205340; padding-bottom:20px; }

.heading4 {font-family:"Montserrat-SemiBold", sans-serif; letter-spacing:-2px; line-height:100%; padding-bottom:5px; font-size:30px; color:#fff; text-align:center; text-shadow:2px 2px 4px #111;}

.headingstyled {font-family:"Montserrat-SemiBold", sans-serif;}
/* Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black */

.headingstyled2 {font-family:"Oswald-SemiBold", sans-serif;}
/* ExtraLight, Light, Regular, Medium, SemiBold, Bold */

.headingstyled3 {font-family:"SofadiOne-Regular", sans-serif;}

.headingstyled4 {font-family:"NanumMyeongjo-Regular", serif;}
/* Regular, Bold, ExtraBold */

.headingstyled5 {font-family:"Marcellus-Regular", serif;}

.headingstyled6 {font-family:"MonikaItalic", sans-serif;}

.headingstyled7 {font-family:"DancingScript-Regular", sans-serif;}
/* Regular, Medium, SemiBold, Bold */

.headingstyled8 {font-family:"Caveat-Regular", sans-serif;}
/* Regular, Medium, SemiBold, Bold */

.headingstyled9 {font-family:"NerkoOne-Regular", sans-serif;}

.headingstyled10 {font-family:"PlaywriteCU-Regular", sans-serif;}
/* Thin, ExtraLight, Light, Regular */

/*FOR HEADINGS AND TYPOGRAPHY, The End*/


#container { width:100%; }
.dconstraint {max-width:1280px !important; margin:0px auto;}
#contenter { display:flex; width: 100%; }
#mainbar { margin:0px 0px; padding:15px 30px; flex-grow:1; }
#sidebar { width:320px; padding:30px 15px 40px 15px; text-align:center; min-height:100%; background-color:rgba(0,0,0,0.1); flex-shrink:0; flex-grow:0; flex-basis:320px;  }
#mainbar2 { width:100%; padding: 15px 15px; }
.sidebardiv {line-height: 90%; padding: 7px 0px 7px 0px; text-align: left; }

.morepadding {padding:32px 36px;}
.dinside {max-width:1280px !important; margin:0px auto;}
#section1 {width:100% !important; padding: 16px 16px;}
.section1_container {padding: 15px 35px 30px 35px; text-align:left; width:50%;}
.section1_heading {font-family:'Montserrat-Bold', sans-serif; letter-spacing:-1px; padding:48px 0px 0px 24px; font-size:42px;}
.section1_title {font-weight:bold; padding:0px 0px 16px 0px;}
.section1_div {margin:-54px auto 12px auto; width:95%; border-radius:24px; height:200px; overflow:hidden; background: #eee url('img1.jpg') no-repeat 50% 40%; background-size: cover;}

#section2 {width:100% !important; padding: 32px 24px; background-color:#f8d3d4;}
.section2_heading {font-family:"Oswald-ExtraLight", serif; width:80%; margin:0px auto 12px;}
.section2_image {border-radius:24px; width:80%; }

#section3 {width:100% !important; padding: 32px 24px;}
.section3_heading {font-family:"SofadiOne-Regular", serif; width:80%; margin:0px auto;}
.section3_heading2 {font-family:"NanumMyeongjo-Regular", serif; width:90%; margin:0px auto;}
.section3_image {width:80%; margin:0px auto; text-align: center; }
.section3_image img {width:80% !important; max-width:200px !important;}

#section4 {width:100% !important; padding: 16px 16px;}

#section5 {width:100% !important; padding: 32px 24px; background-color:#6e1113; color:#fff;}
#section5a {width:100% !important; padding: 32px 24px; background-color:#95090c; color:#fff;}
.section5_text {font-size:20px;}
.lily {font-weight:bold;}
.lily span {font-size:36px;}
.wumi {padding-bottom:24px; border-bottom:1px solid #fff; margin-bottom:24px;}
.feli {text-align:right !important;}

#section7a {position:relative; width:100% !important; height:55vw; overflow:hidden;}
#section7b {position:relative; width:100% !important; height:35vw; overflow:hidden; background-color:#eee; background-image:url('img3b.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position-x:center; background-position-y:top; background-size: 100vw auto;}
#section7c {position:relative; width:100% !important; height:35vw; overflow:hidden; background-color:#eee; background-image:url('img5.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position-x:center; background-position-y:top; background-size: 100vw auto;}

.divider {line-height:12px; height:12px; overflow:hidden;}
.banners {width:90%; height:600px; overflow:hidden; margin:0px auto;}
.banners_image {border-radius:25px 0px 25px 0px; width:80%; height:85%; background:#eee url("img2.jpg") no-repeat center bottom; background-size:cover; }
.objectives li {padding-bottom:18px;}
#accord1, #accord2, #accord3 {padding-left:42px !important; padding-right:42px !important; margin-bottom:42px;}


.dlabel {text-align: right; font-weight:bold;}
.dderror {background-color:#F7CECE; color:#900; padding:20px 20px;}
.ddsuccess {background-color:#CFF9D2; color:#075E07; padding:20px 20px;}
.formessage {text-align:center; width:80%; margin:40px auto; border-top:5px solid #fff; border-bottom:15px solid #fff; border-left:5px solid #fff; border-right:5px solid #fff; font-size:21px; box-shadow:0px 0px 20px 1px #555; border-radius:5px 5px 15px 15px; }

.hangingindent {
  padding-left: 22px ;
  text-indent: -22px ;
}

.forbarcodes {width:250px !important; margin:0px auto; height:275px !important; display:inline-block; vertical-align: middle;}

.imgr {float:right; margin:0px 0px 0px 20px;}
.imgl {float:left; margin:0px 20px 0px 0px;}

.dinsidebartable { background-color:#7d1e0c !important; color:#fff !important; text-align:center; }
.dinsidebartable a { color:#ff0 !important; }
.dinsidebartable a:hover { font-weight:bold; }

.forcontenter { line-height:175%; clear:both; }
/*.forcontenter p { margin:15px 25px 35px 25px; }*/
.forcontenter img { padding:10px 10px; border: 1px solid #ddd; 
	border-radius: 4px; background-color:#fff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/*	width:100%; height:auto !important;*/
/*	margin:15px 15px; */
/*	max-width:90% !important; height:auto !important;*/
			 }

.modal {
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 5px;
}
#modal-btn-confirm { background-color: #dc3545; color: white; } /* Red for delete */
#modal-btn-cancel { background-color: #6c757d; color: white; } /* Grey for cancel */
button { padding: 10px 15px; margin: 5px; border: none; cursor: pointer; }


.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
	transition: transform 4s ease-out, filter 2s ease-in, border 3s ease-in, box-shadow 2s ease-out;
}
		
.column img:hover {
	transform: scale(1.5, 1.5);
	filter: drop-shadow(8px 8px 10px black);
	border:5px solid #fff;
	box-shadow: 0px 0px 500px #000, 0px 0px 700px #000, 0px 0px 1000px #000;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}




/**********IF 993 AND ABOVE. NOTE IT IS MIN-WIDTH**********/
@media screen and (min-width:993px) {
  .dropend:hover>.dropdown-menu {position: absolute; top: 0; left: 100%; }
  .dropend .dropdown-toggle { margin-left: .5em; }
  .dropstart:hover>.dropdown-menu { position: absolute; top: 0; right: 100%; }
  .dropstart .dropdown-toggle { margin-left: .5em; }
}




/**********IF 992 AND BELOW. NOTE IT IS MAX-WIDTH**********/
@media screen and (max-width: 992px){
	.dropend .dropdown-toggle { margin-left: 16px; }
	.dropend:hover>.dropdown-menu { background-color:#ddd; margin:0px 16px 8px 16px; }
	.dropstart .dropdown-toggle { margin-left: 16px;}
	.dropstart:hover>.dropdown-menu { background-color:#ddd; margin:0px 16px 8px 16px; }
}


@media screen and (max-width: 920px) {
	#contenter { display:block; }
	#mainbar { width:100%; margin:30px 0px; }
	#sidebar { width: 320px; margin:0px auto; }
}

@media screen and (max-width: 602px){
	.navbar-brand {font-size:14px !important;}
	.navbar-toggler, .navbar-toggler-icon {font-size:14px !important;}
	
	.section1_container { display: block; width:100%; padding: 15px 0px 0px 0px !important; }
	.section1_heading {font-size:28px; padding:0px !important;}
	.section1_div {margin:8px auto 12px auto;}
	.section2_heading {width:90%; font-size:20px;}
	
	.dlabel {text-align: left;}
}

@media screen and (max-width: 420px){
	.navbar-brand {font-size:12px !important;}
	.navbar-toggler, .navbar-toggler-icon {font-size:12px !important;}
	#firsttext {font-size:18px !important;}
	#secondtext {font-size:9px !important;}
	
	#section7b {height:55vw;}
	#section7c {height:55vw;}
	#section7a {height:60vw;}
	
	#accord1, #accord2, #accord3 {padding-left:12px !important; padding-right:12px !important;}
}

@media screen and (max-width: 320px){
	#section7a {height:75vw;}
}




/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}





@media print {
	#title, #social, #dsocial, .dtopmenu { display:none; }
	#footbar, #sidebar, #navbar, .navbar, #mast, #mySidenav, #mySidenavhover, #main2, .noprint {
		display:none;
	}
	#footerlast { margin-top:10px; border-top:2px solid #777 !important; }
	
/*	
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }

	
This code snippet does 3 things:
1. it forces a page-break before all h2 headings (perhaps h2 tags in your document are chapter titles that deserve a fresh page)
2. it prevents page-breaks right after sub-headings because that looks odd
3. it prevents page-breaks inside pre tags and block-level quotes
*/
.pagebreak {
    page-break-before: always;
	break-before: always;
}
.keeptogether {
    page-break-inside:avoid;
	break-inside: avoid;
}

	
}