/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   events calender info part   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/


#eventsCalenderAll_ID {
  /*border: 3px solid rgb(195, 0, 0);/* for debug */
  margin: 0px;/* dummy */
}
/**/
/**/
/**/
#eventsCalenderAll_ID > div{
  /*border: 3px solid rgb(0, 13, 195);/**/
  /*----------*/
  /* flex box */
  display: flex;/* set flex box*/
  flex-direction: row;/* row column */
  /*justify-content: space-around;/* <============= (or) */
  /*justify-content: stretch;/* <============= (or) */
  /*justify-content: space-between;/* <============== (or) */
  /*align-items: center;/* vertical position */
  /*----------*/
  width: 94%;/**/
  max-width: 1000px;/**/
}
@media screen and (max-width: 640px) {/* for smart phone */
  #eventsCalenderAll_ID > div {
    /*border: 4px solid rgb(0, 4, 53);/**/
    display: block;/* set flex box*/
    width: 100%;/**/
  }
}
/**/
/**/
/**/
#eventsCalenderAll_ID > div > div:nth-child(1) {
  /*border: 4px solid rgb(0, 195, 23);/**/
  width: 35%;/* ratio of 2 child flex box */
  margin: 0px 10px 0px 0px;/**/
}
#eventsCalenderAll_ID > div > div:nth-child(2) {
  /*border: 4px solid rgb(0, 143, 17);/**/
  width: 65%;/* ratio of 2 child flex box */
  margin: 0px 0px 0px 10px;
}
@media screen and (max-width: 640px) {/* for smart phone */
  #eventsCalenderAll_ID > div > div:nth-child(1) {
    /*border: 4px solid rgb(0, 195, 23);/**/
    width: 96%;/* ratio of 2 child flex box */
    margin: auto;/* centering */
  }
  #eventsCalenderAll_ID > div > div:nth-child(2) {
    /*border: 4px solid rgb(0, 195, 23);/**/
    width: 96%;/* ratio of 2 child flex box */
    margin: auto;/* centering */
  }
}



/*########################################################################################################################*/
/*########################################################################################################################*/
/*####                                                                                                                    */
/*####       back ground image, Logo and text part                                                                        */
/*####                                                                                                                    */
/*########################################################################################################################*/
/*########################################################################################################################*/


/*                      */
/*   ===  for PC  ===   */
/*                      */
#eventsCalenderBGLogoText_parentDiv_ID {/*  <==== background image  */
  /*border: 3px solid rgb(234, 0, 255);/* for debug */
  background-image: url("../img/sampleBG4.png");/* <----max 350px----||-------------max 650px--------------> */
  border-radius: 6px;/* round corner */
}
#eventsCalenderBGLogoText_ID > div:nth-child(2) {/*  <==== div include logo image  */
  /*border: 3px solid rgb(0, 76, 255);/* for debug */
  margin: 15px 0px 0px 10px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(2) > img {/*  <==== logo image  */
  /*border: 3px solid rgb(0, 76, 255);/* for debug */
  width: 130px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(3) {/*  <==== 1st text  */
  /*border: 3px solid rgb(0, 66, 219);/* for debug */
  font-size: 1.0em;/**/
  color:rgb(250, 250, 250);/**/
  font-weight: bold;/**/
  margin: 5px 0px 5px 10px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(4) {/*  <==== 2nd text  */
  /*border: 3px solid rgb(0, 51, 169);/* for debug */
  font-size: 1.4em;/**/
  color:rgb(250, 250, 250);/**/
  margin: 5px 0px 5px 15px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(5) {/*  <==== 3rd text  */
  /*border: 3px solid rgb(0, 41, 150);/* for debug */
  font-size: 0.8em;/**/
  color:rgb(250, 250, 250);/**/
  margin: 5px 0px 5px 15px;/**/
}


/*                               */
/*   ===  for smart phone  ===   */
/*                               */
#eventsCalenderBGLogoText_ID > div:nth-child(1) {/*  <==== background image  */
  /*border: 3px solid rgb(234, 0, 255);/* for debug */
  background-image: url("../img/sampleBG5_sp.jpg");/* <----max 350px----||-------------max 650px--------------> */
  height: 350px;/* height */
  border-radius: 6px;/* round corner */
}
#eventsCalenderBGLogoText_ID > div:nth-child(1) > div:nth-child(1) {/*  <==== div include logo image  */
  /*border: 3px solid rgb(0, 76, 255);/* for debug */
  padding: 15px 0px 5px 10px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(1) > div:nth-child(1) > img {/*  <==== logo image  */
  /*border: 3px solid rgb(0, 76, 255);/* for debug */
  width: 120px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(1) > div:nth-child(2) {/*  <==== 1st text  */
  /*border: 3px solid rgb(0, 66, 219);/* for debug */
  font-size: 0.8em;/**/
  color:rgb(250, 250, 250);/**/
  font-weight: bold;/**/
  padding: 2px 0px 2px 10px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(1) > div:nth-child(3) {/*  <==== 2nd text  */
  /*border: 3px solid rgb(0, 51, 169);/* for debug */
  font-size: 1.2em;/**/
  color:rgb(250, 250, 250);/**/
  padding: 2px 0px 2px 15px;/**/
}
#eventsCalenderBGLogoText_ID > div:nth-child(1) > div:nth-child(4) {/*  <==== 3rd text  */
  /*border: 3px solid rgb(0, 41, 150);/* for debug */
  font-size: 0.7em;/**/
  color:rgb(250, 250, 250);/**/
  padding: 2px 0px 2px 15px;/**/
}


/*                                                               */
/*                           ( class )                           */
/*    ===  .hide_whenSmallScreen_eventsCalenderBGLogoText  ===   */
/*    ===  .hide_whenLargeScreen_eventsCalenderBGLogoText  ===   */
/*                                                               */
/*                                                               */
.hide_whenUsingSP_eventsCalenderBGLogoText {
  display:block;/* show (setting when using PC) */
}
@media screen and (max-width: 640px) {
  .hide_whenUsingSP_eventsCalenderBGLogoText {
    display:None;/* hide (setting when using smart phone) */
  }
}
.hide_whenUsingPC_eventsCalenderBGLogoText {
  display:none;/* hide (setting when using PC) */
}
@media screen and (max-width: 640px) {
  .hide_whenUsingPC_eventsCalenderBGLogoText {
    display:block;/* show (setting when using smart phone) */
  }
}


/*########################################################################################################################*/
/*########################################################################################################################*/
/*########################################################################################################################*/
/*########################################################################################################################*/
/*########################################################################################################################*/
/*########################################################################################################################*/
/*########################################################################################################################*/


.displayNoneBySmartPhone_class {
  display: flex;
}
@media screen and (max-width: 640px) {/* for smart phone */
  .displayNoneBySmartPhone_class {
    display: none;
  }
}
/*----*/
/*----*/


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/