.d {
	border: 1px red solid;
}

/*
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Roboto', sans-serif;
*/

@font-face
{
	font-family: custom-sans-serif;
	src: local("Microsoft YaHei UI"), local("微軟正黑體"), local("Microsoft JhengHei");
	unicode-range: U+4E00-9FFF;

}

@font-face
{
	font-family: custom-sans-serif;
	src: local("Segoe UI"), local("Roboto");
	unicode-range: U+00-024F;
	
}

.custom-sans-serif
{
	font-family: custom-sans-serif;
}

/*
font-family: 'IBM Plex Sans', sans-serif;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-family: 'IBM Plex Serif', serif;
font-family: 'IBM Plex Mono', monospace;
*/



h1,
h2,
h3,
h4,
h5,
h6
{
  margin: 10px 0;
  font-family: custom-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-weight: 300;
  color: #2c2d2f;
}

p,div,a {
  font-family: custom-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}


h1.error404
{
	font-family:  custom-sans-serif
	font-size: 5em;
	font-weight:300;
	line-height:1.2em;
}

h2.error404
{
	font-family:  custom-sans-serif
	font-size: 3em;
	line-height:1.2em;
}





.mygallery-item {
 
  cursor:  pointer;
}

.mygallery-item .image {
  opacity: 1;
  /*
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
  */
   
}

.mygallery-item .middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  
 
}

.mygallery-item:hover .image {
  opacity: 0.3;
}

.mygallery-item:hover .middle {
  opacity: 1;
}

.mygallery-item  .text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}






.descriptioncontainer h1{
	font-size:1.8em;
}

.descriptioncontainer h2{
	font-size:1.6em;
}

.descriptioncontainer h3{
	font-size:1.4em;
}

.descriptioncontainer h4{
	font-size:1.2em;
}

	

.modal.fade.fill-in.show {
    background-color: rgba(255, 255, 255, 0.9); 
}


.modal.modal-fullscreen {
  /* Maximize the main wrappers on the screen */
  /* Make the parent wrapper of the modal box a full-width block */
  /* Remove borders and effects on the content */
  /**
	 * /!\ By using this feature, you force the header and footer to be placed
	 * in an absolute position. You must handle by yourself the margin of the
	 * content.
	 */
}
.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
  bottom: 2px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 2px;
}
.modal.modal-fullscreen .modal-dialog {
  margin: 0;
  width: 100%;
  animation-duration:0.6s;

  max-width: 100%; 
}
.modal.modal-fullscreen .modal-content {
  border: none;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
  -o-box-shadow: inherit;
  box-shadow: inherit;
  /* change bg color below */
 /* background:#1abc9c; */
}
.modal.modal-fullscreen.force-fullscreen {
  /* Remove the padding inside the body */
}
.modal.modal-fullscreen.force-fullscreen .modal-body {
  padding: 0;
  height:95%;
  bottom: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header,
.modal.modal-fullscreen.force-fullscreen .modal-footer {
  position: absolute;
  bottom: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header {
  top: 0;
}



	
/* calendar */
table.smallcalendar		{ border-left:0px solid #999; font-size:9px; max-width:200px; line-height: 16px;}
td.smallcalendar-header { color:#6f7b8a; font-size:1.5em; text-align:center; font-weight:bold; padding-bottom:10px; padding-top:10px;}
tr.smallcalendar-row	{  }
td.smallcalendar-day	{ min-height:80px;  position:relative; } * html div.calendar-day { height:80px; }
td.smallcalendar-day:hover	{ background:#eceff5; }
td.smallcalendar-day-np	{  min-height:80px; } * html div.calendar-day-np { height:80px; }
td.smallcalendar-day-head { color:#07c25f; font-weight:normal; text-align:center; width:120px; padding:0px; border-bottom:0px solid #999; border-top:0px solid #999; border-right:0px solid #999; }
/*div.day-number		{ background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }*/

div.smallcalendar-day-number-sunday {margin: auto; text-align: center; width: 16px;  height: 16px;  border-radius: 50%; background: #ffeeee;}
div.smallcalendar-day-number-active {color:#ffffff;  font-weight:bold; margin: auto; text-align: center; width: 16px;  height: 16px;  border-radius: 50%; background: #cc0000;}
div.smallcalendar-day-number {margin: auto; text-align: center; width: 16px;  height: 16px;  border-radius: 50%; background: #eeeeee;}
/* shared */
td.smallcalendar-day, td.smallcalendar-day-np {  padding:2px; border-bottom:0px solid #999; border-right:0px solid #999; }