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

/* Logo background color rgb(50, 16, 88) */
body {
   margin: 0px;
   padding: 0px;
}

.header {
   background-color: rgb(50, 16, 88); 
   width: 100%;
   height: 300px;
   text-align: center;
	position: relative;
}

.fontsize {
   text-align: center;
   font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
   font-size: 52px;
   color: black;
}

.fontsize_s {
   text-align: center;
   font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
   font-size: 46px;
   color: black;
}

.fontsize_s2 {
   text-align: center;
   font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
   font-size: 38px;
   color: black;
}

.fontsize_s3 {
   text-align: center;
   font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
   font-size: 30px;
   color: black;
}

.fontsize_ss {
   text-align: left;
   font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
   font-size: 24px;
   color: black;
}

.fontpos {
   text-align: center;
}

/*hmargin*/
#logo {
   margin-top: 35px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	width: 250px;
	height: 185px;
	padding-top: 2px; 
	padding-bottom: 2px;
}

#hh1 {
	font-family:  'Cambria', 'Calisto MT', 'Garamond';
	font-size: 40px;
   /* font-size: 3vw; */
	color: white;
	margin: 0px;
}

#nav {
	background-color: transparent;
   text-align: center;
   padding: 0px auto;
	width: 500px;
	position: absolute;
	top: 0px;
	right: 30px;
}

li {
	display: inline;
	padding: 5px;
   margin: 3px;
	text-align:center;
}

li a {
   color: white;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px; /* chg from 14px 20210422 */
   text-decoration: none;
}

a:hover {
   color: #ff5733;
}

#home_desc {
   padding: 5px;
   width: 50%;
   margin-left: auto;
   margin-right: auto;
   text-align: justify;
   /*font-family: 'Lucida Calligraphy', 'Lucida Sans'; 
   font-family: 'consalos', sans-serif, Helvetica, 'Arial'; */
   font-family: 'calibri', 'Aria unicode MS', 'consalos';
   font-size: 28px;
   color: darkblue;
  /*color: rgb(46, 45, 45);*/
}

/* add on 20230430 */
#g_desc_b {
   padding: 5px;
   width: 50%;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   /*font-family: 'Lucida Calligraphy', 'Lucida Sans'; 
   font-family: 'consalos', sans-serif, Helvetica, 'Arial'; */
   font-family: 'calibri', 'Aria unicode MS', 'consalos';
   font-size: 28px;
   font-weight: bold;
   color: darkblue;
  /*color: rgb(46, 45, 45);*/
  /*border: 1px solid red;*/
}


#g_desc_b1 {
   padding: 5px;
   width: 600px;  /* chg from 300px 20210422; 450px 2021 20220102*/
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-family: 'calibri', 'Arial', 'Comic Sans MS', Helvetica, sans-serif;
   font-size: 28px;
   font-weight: bold;
   color: darkblue;
}


/* add on 20230430 */
h3.title {
	margin: 0;
	padding: 3px 0 3px 25px;
}


#home_div_v {
   text-align: center;
   /*width: 600px;*/
   /* height: 450px; */
   margin-right: auto;
   margin-left: auto;
   /* border: 1px solid yellowgreen; */
}

#home_div_v p {
   text-align: center;
   font-family: 'calistro MT', 'calibri','Cambria';
   font-size: 28px;
   color: rgb(153, 23, 8);
}

.container {
   /* max-width: 1205px; */
   /* max-width: 1080px; */
   width: 60%;
   margin-right: auto;
   margin-left: auto;
   background-color: white;
   overflow: auto;
}

.gallery {
   margin: 3px 5px;
   float: left;
   /* width: 350px; */
   width: 29%;
}

.gallery img {
   /* width: 350px;
   height: 238px; */
   width: 330px;
   height: 225px;
}

.containerH {
   max-width: 1080px;
   margin: auto;
   background-color: white;
   overflow: auto;
   /* border: 1px solid yellowgreen */
}

.galleryH {
   margin: 2px 5px;
   float: left;
   /* width: 280px; */
   width: 20%;
}

.galleryH img {
   width: 260px;
   height: 340px;
}

.desc {
   font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', 'serif';
   font-size: 28px;
   font-weight: bold;
   color: black;
   padding: 15px;
   text-align: center;
}

.space_50 {
   height: 50px;
}

.space {
   height: 100px;
}

.quotes {
   width: 50%;
   margin-right: auto;
   margin-left: auto;
   text-align: start;
   font-family: 'Lucida Calligraphy', 'Lucida Sans'; 
   font-size: 26px;
   color: sienna;
}

.right {
   text-align: right;
   font-family: inherit; 
   font-size: inherit;
   color: inherit;
}

/*space_col*/
.lessons_space{
   position: relative;
   width: 980px;
   height: 1100px;
   margin-right: auto;
   margin-left: auto;
   background-color: white;
}

.lessons_img {
   width: 450px;
   height: 300px;
   border:2px solid #fff;
   box-shadow: 10px 10px 5px #ccc;
   -moz-box-shadow: 10px 10px 5px #ccc;
   -webkit-box-shadow: 10px 10px 5px #ccc;
   -khtml-box-shadow: 10px 10px 5px #ccc;
}

.lessons_h2 {
   margin: 0px;
}

.lessons_col1 {
   position: absolute;
   top: 30px;
   left: 30px;
   width: 420px;
   height: 220px;
   text-shadow: 1px 1px 3px #666666;
}

.lessons_col2 {
   position: absolute;
   top: 20px;
   right: 10px;
   width: 400px;
   height: 300px;
   text-align: justify;
   color: black;
   padding: 10px 30px 10px 5px;
   font-family: 'Comic Sans MS', Helvetica, sans-serif;
   font-size: 18px;
}

.lessons_col3 {
   position: absolute;
   top: 390px;
   left: 30px;
   width: 420px;
   height: 220px;
   text-shadow: 1px 1px 3px #666666;
}

.lessons_col4 {
   position: absolute;
   top: 390px;
   right: 10px;
   width: 400px;
   height: 300px;
   text-align: justify;
   color: black;
   padding: 10px 30px 10px 5px;
   font-family: 'Comic Sans MS', Helvetica, sans-serif;
   font-size: 18px;
}

.lessons_col5 {
   position: absolute;
   top: 750px;
   left: 30px;
   width: 420px;
   height: 220px;
   text-shadow: 1px 1px 3px #666666;
}

.lessons_col6 {
   position: absolute;
   top: 750px;
   right: 10px;
   width: 400px;
   height: 300px;
   text-align: justify;
   color: black;
   padding: 10px 30px 10px 5px;
   font-family: 'Comic Sans MS', Helvetica, sans-serif;
   font-size: 18px;
}

#events_desc {
   padding: 5px;
   width: 600px;  /* chg from 300px 20210422; 450px 2021 20220102*/
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-family: 'Arial', 'Comic Sans MS', Helvetica, sans-serif;
   font-size: 26px;
}



#aboutus_desc {
   padding: 5px;
   width: 60%;
   margin-left: auto;
   margin-right: auto;
   text-align: justify;
   font-family: 'Arial', 'Comic Sans MS', Helvetica, sans-serif;
   font-size: 22px;
}

#aboutus_pic {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 60%;
}

#contact_desc {
   width: 35%;
   color: darkblue;
   font-size: 18px;
   font-family: 'calibri', 'Aria unicode MS', 'consalos';
   /*font-family: Arial, Helvetica, sans-serif;*/
   margin-right: auto;
   margin-left: auto;
}

#form_fill {
   width: 50%;
   font-size: 22px;
   font-family: 'calibri', 'Aria unicode MS', 'consalos';
   /*font-family:Arial, Helvetica, sans-serif;*/
   margin-right: auto;
   margin-left: auto;
   background-color: white;
   /*border: 3px solid yellowgreen;*/
}

#field_border {
   /* border: 1px solid #ccc; */
   border: none;
   border-radius: 5px;
   font-size: 28px;
}

#form_words {
   width: 100%;
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-sizing: border-box;
   margin-top: 6px;
   margin-bottom: 16px;
   height: 3em;
}

.form_font {
   font-size: 28px;
   /* font-weight: bold; */
   padding: 0;
   margin: 0;
}

#form_message {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
   font-size: 22px;
   /*width: 100%;*/
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-sizing: border-box;
   margin-top: 6px;
   margin-bottom: 16px;
   resize: vertical;
}

#input_pos {
   width: 200px;
   height: 40px;
   margin-right: auto;
   margin-left: auto;
}



#footer {
   box-sizing: border-box;
   background-color: rgb(50, 16, 88);
	text-align: center;
   color: white;
   margin-bottom: 0px;
   padding-bottom: 0px;
   position: relative;
   height: 180px; /* chg from 140px 20210422 */
   left: auto;
   right: auto;
   width: 100%;
   bottom: 0px;
}

#footer p {
   padding: 30px;
}

@media screen and (max-width: 1200px){
   #aboutus_desc {
      padding: 5px;
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      text-align: justify;
      font-family: 'Arial', 'Comic Sans MS', Helvetica, sans-serif;
      font-size: 22px;
   }
}

@media screen and (max-width: 600px){
   #aboutus_desc {
      padding: 5px;
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      text-align: justify;
      font-family: 'Arial', 'Comic Sans MS', Helvetica, sans-serif;
      font-size: 22px;
   }
}