/* CSS Document | Template */

/* ---------- Desktop ---------- */
@media screen and (min-width: 1200px) {
	
/* .cover */
	.cover {width:100%;height:180px;background-image: url("../../media/image/cover.png") !important;background-size: cover !important;background-position: center !important; }
/* -------- */
	
/* .gallery */
	.gallery {display:flex;flex-wrap:wrap;min-height:60px;padding:2px;background-color:#101013;justify-content: center;border-radius:2px;}
	.gallery li {width:calc(100% / 5 - 2px);position:relative;margin: 1px;min-width:60px;min-height:60px;background-color:#000;overflow:hidden;}
	.gallery li:hover {box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 1)}
	.gallery li a {width:100%;height:100%;text-align: center;text-align: -webkit-center;}
	.gallery li a img {min-width: 120%;object-fit: cover;object-position: center;max-width: 120%;min-height: 120%; transform: translateX(-10%);}
/* -------- */
	
/* .gallery lightbox */
	.lightbox {z-index: 99999;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;}
	.lightbox img {max-width: 80%;max-height: 80%;border-radius: 5px;border: 1px solid #dadada;}
/* -------- */

/* .list */
	.food {margin:30px;column-count: 2;}
	.place {margin:30px;column-count: 2;}
/* -------- */

/* .menu */
	.menu-inline {display:flex;justify-content: space-evenly;align-items: center;height:50px;margin:0 auto;padding:4px 16px;border-bottom: solid 1px #cccccc;box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);}
	.menu-inline li {border:none !important;}
/* -------- */
	
/* .project */
	.projects {column-count: 2;padding-top:16px;}
	.project:first-child {margin-top: 0;}
	.project {display: flex;break-inside: avoid;width: calc(100% - 32px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px;border: 0.5px solid #343540;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
	.project .logo {background-image: none !important; max-width: 80%;margin: 20px auto;}
	.project .logo img {max-width: 100%;max-height:100%;width: 180px;}
/* -------- */
			
/* .sidebar */
	.main.width {display:inline-flex;width: calc(100% - 29vw);}
	.sidebar {background: #f2f2f2;width: 24vw;height: 460px;display:inline-flex;float: right;flex-direction: row;justify-content: center;flex-wrap: wrap;margin: -5px -10px 0px 0px;border-radius: 0 0 0 9px;border-left: solid 1px #cccccc;border-bottom: solid 1px #cccccc;}
/* -------- */
	
/* .search */
	.search {}
/* -------- */
	
/* .service */
	.services {column-count: 2;padding-top:16px;}
	.service:first-child {margin-top: 0;}
	.service {display: flex;break-inside: avoid;width: calc(100% - 32px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px;border: 0.5px solid #343540;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
	.service .logo {background-image: none !important; max-width: 80%;margin: 20px auto;}
	.service .logo img {max-width: 100%;max-height:100%;width: 180px;}
/* -------- */
	
/* .social */
	.social {}
/* -------- */
	
/* .thumbs */
	.thumbs {display:flex; padding: 4px;flex-wrap: wrap;justify-content: space-evenly;}
	.thumb {position: relative;border-radius: 9px;overflow: hidden;margin: 5px 0;width: calc(100% / 4 - 20px);border: 2px solid azure;}
	.thumb:hover {box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.8);}
	.thumb span {position: absolute;background: rgb(130 130 130 / 15%);color: #f1f1f1;font-family: caviar dreams;font-weight: bold;letter-spacing: 2px;padding: 4px;text-align: center;bottom: 0;right: 0;left: 0;}
/* -------- */
	
/* .topics */
	.topics {padding-top: 16px;}
	.topic h3:first-child {margin-top: 0;}
	.topic {break-inside: avoid;}
/* -------- */

		/* Data */
		.ad {}
		.audio {}
		.game {}
		.gif {}
		.map {}
		.note {padding:14px 20px;font-style: italic;color: #eca38f;}
		.panorama {}
		.paragraph {}
		.photo {}
		.quote {}
		.render {}
		.text {display: flex;width: calc(100% - 62px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px 30px;;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
		#Main .text {padding:16px !important;}
		.title {}
		.video {}

}
/* ---------- Tablet ---------- */
@media screen and (min-width: 800px) and (max-width: 1199px) {

/* .cover */
	.cover {width:100%;height:180px;background-image: url("../../media/image/cover.png") !important;background-size: cover !important;background-position: center !important}
/* -------- */
	
/* .gallery */
	.gallery {display:flex;flex-wrap:wrap;min-height:60px;padding:2px;background-color:#101013;justify-content: center;border-radius:4px;}
	.gallery li {width:calc(100% / 5 - 2px);position:relative;margin: 1px;min-width:60px;min-height:60px;background-color:#000;overflow:hidden;}
	.gallery li:hover {box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 1)}
	.gallery li a {width:100%;height:100%;text-align: center;text-align: -webkit-center;}
	.gallery li a img {min-width: 120%;object-fit: cover;object-position: center;max-width: 120%;min-height: 120%; transform: translateX(-10%);}
/* -------- */
	
/* .gallery lightbox */
	.lightbox {z-index: 99999;display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;}
	.lightbox img {max-width: 80%;max-height: 80%;border-radius: 5px;border: 1px solid #dadada;}
/* -------- */

/* .list */
	.food {margin: 30px; column-count: 2;}
	.place {margin:16px;column-count: 2;}
/* -------- */
	
/* .menu */
	.menu-inline {display:flex;justify-content: space-evenly;align-items: center;height:50px;margin:0 auto;padding:4px 16px;border-bottom: solid 1px #cccccc;box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);}
	.menu-inline li {border:none !important;}
/* -------- */
	
/* .project */
	.projects {column-count: 2;padding-top:16px;}
	.project:first-child {margin-top: 0;}
	.project {display: flex;break-inside: avoid;width: calc(100% - 32px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px;border: 0.5px solid #343540;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
	.project .logo {background-image: none !important; max-width: 80%;margin: 20px auto;}
	.project .logo img {max-width: 100%;max-height:100%;width: 180px;}
/* -------- */
	
/* .sidebar */
	.main.width {display:inline-flex;width: calc(100% - 29vw);}
	.sidebar {background: #f2f2f2;width: 24vw;height: 460px;display:inline-flex;float: right;flex-direction: row;justify-content: center;flex-wrap: wrap;margin: -5px -10px 0px 0px;border-radius: 0 0 0 9px;border-left: solid 1px #cccccc;border-bottom: solid 1px #cccccc;}
/* -------- */
	
/* .search */
	.search {}
/* -------- */
	
/* .service */
	.services {column-count: 2;padding-top:16px;}
	.service:first-child {margin-top: 0;}
	.service {display: flex;break-inside: avoid;width: calc(100% - 32px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px;border: 0.5px solid #343540;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
	.service .logo {background-image: none !important; max-width: 80%;margin: 20px auto;}
	.service .logo img {max-width: 100%;max-height:100%;width: 180px;}
/* -------- */
	
/* .social */
	.social {}
/* -------- */

/* .thumbs */
	.thumbs {display:flex; padding: 4px;flex-wrap: wrap;justify-content: space-evenly;}
	.thumb {position: relative;border-radius: 9px;overflow: hidden;margin: 5px 0;width: calc(100% / 4 - 20px);border: 2px solid azure;}
	.thumb:hover {box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.8);}
	.thumb span {position: absolute;background: rgb(130 130 130 / 15%);color: #f1f1f1;font-family: caviar dreams;font-weight: bold;letter-spacing: 2px;padding: 4px;text-align: center;bottom: 0;right: 0;left: 0;}
/* -------- */
	
/* .topics */
	.topics {padding-top: 16px;}
	.topic h3:first-child {margin-top: 0;}
	.topic {break-inside: avoid;}
/* -------- */

		/* Data */
		.ad {}
		.audio {}
		.game {}
		.gif {}
		.map {}
		.note {padding:14px 20px;font-style: italic;color: #eca38f;}
		.panorama {}
		.paragraph {}
		.photo {}
		.photo img {border: 4px solid #000000;}
		.quote {}
		.render {}
		.text {display: flex;width: calc(100% - 62px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px 30px;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
		#Main .text {padding:16px !important;}
		.title {}
		.video {}

}
/* ---------- Mobile ---------- */
@media screen and (max-width: 800px) {
	
/* .cover */
	.cover {width:100%;height:180px;background-image: url("../../media/image/cover.png") !important;background-size: cover !important;background-position: center !important;border-radius: 15px 15px 0 0;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
/* -------- */
	
/* .gallery */
	.gallery {display:flex;flex-wrap:wrap;min-height:100px;padding:4px;justify-content: center;border-radius:5px;}
	.gallery li {display:inline-block;position:relative;float:left;width:calc(100% / 3 - 2px);margin: 1px;min-width:100px;min-height:100px;background-color:#000;overflow:hidden;}
	.gallery li:hover {box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 1)}
	.gallery li a {width:100%;height:100%;text-align: center;text-align: -webkit-center;}
	.gallery li a img {min-width: 120%;object-fit: cover;object-position: center;max-width: 120%;min-height: 120%; transform: translateX(-10%);}
/* -------- */
	
/* .gallery lightbox */
	.lightbox {z-index: 99999;display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;}
	.lightbox img {max-width: 80%;max-height: 80%;border-radius: 5px;background-color: #000;border: 1px solid #dadada;}
/* -------- */
	
/* .menu */
	.menu-inline {column-count:2;column-gap: 0;margin:0 auto;padding: 8px 16px;border-radius: 0 0 5px 5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
	.menu-inline li {width: 100%;text-align: center;height: 50px;display: inline-block;}
	.menu-inline li a {display:flex;align-items: center;justify-content: center;width:100%;height:100%;}
	.menu-inline li a:hover {background:#444654;}
	.menu-square {column-count:2;margin:20px 30px;padding:20px;border-radius:11px;border:1px solid #4d4e5d;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);}
	.menu-square li {height:40px;}
	.menu-square li a {display:block;width:100%;height:100%;}
	.menu-square li a:hover {background:#444654;}
/* -------- */
	
/* .project */
	.projects {}
	.project {display: flex;break-inside: avoid;width: calc(100% - 32px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px;border: 0.5px solid #343540;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
	.project .logo {background-image: none !important; max-width: 80%;margin: 20px auto;}
	.project .logo img {max-width: 100%;max-height:100%;width: 180px;}
/* -------- */
	
/* .search */
	.search {display: flex;justify-content: center;margin:20px 30px;padding:30px;border-radius:11px;border:1px solid #4d4e5d;box-sizing: border-box;}
	.search-form {
    display: flex;height:40px;}
	.search-input {padding: 8px;border: 1px solid #ccc;border-radius: 4px 0 0 4px;outline: none;}
/* -------- */
		
/* .service */
	.service {display: flex;width: calc(100% - 32px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px;border: 0.5px solid #343540;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
	.service .logo {display: none;background-image: none !important; max-width: 80%;margin: 20px auto;}
	.service .logo img {max-width: 100%;max-height:100%;width: 180px;}
	.service .items {column-count: 2;padding: 14px 0px;color:#a1a1a1;border-bottom: 1px solid #181818;}
	.service .items:last-child {border-bottom:none;}
/* -------- */
	
/* .sidebar */
	.sidebar {display: none;}
/* -------- */
	
/* .social */
	.social {padding:10px 0;text-align:center;}
	.social .icon {display: inline-block;width:calc(100% / 6);}
/* -------- */
	
/* .thumbs */
	.thumbs {display:flex; padding: 4px 0;flex-wrap: wrap;justify-content: space-evenly;}
	.thumb {position: relative;border-radius: 9px;overflow: hidden;margin: 5px 0;width: calc(100% / 2 - 16px);border: 2px solid azure;}
	.thumb:hover {box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.8);}
	.thumb span {position: absolute;background: rgb(130 130 130 / 15%);color: #f1f1f1;font-family: caviar dreams;font-weight: bold;letter-spacing: 2px;padding: 4px;text-align: center;bottom: 0;right: 0;left: 0;}
/* -------- */
	
/* .topics */
	.topics {padding-top: 16px;}
	.topic h3:first-child {margin-top: 0;}
	.topic {break-inside: avoid;}
/* -------- */
	
	
	
		/* Data */
		.ad {box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.7);}
		.audio {}
		.game {}
		.gif {}
		.map {width: calc(100% - 8px);min-height: 200px;max-height: 400px;background: #ffffff;border: 4px solid #000000;}
		.map img {}
		.map p {background: #444654;margin: 0;padding: 20px;text-align: center;}
		.note {padding:14px 20px;font-style: italic;color: #eca38f;}
		.panorama {border-top: 4px solid #000000;border-bottom: 4px solid #000000;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);}
		.panorama span {margin-top: -19px;display: block;}
		.paragraph {padding: 20px;text-align: left;border-top: 1px solid #7d7d7d;border-bottom: 1px solid #7d7d7d;}
		.photo img {margin:0 auto;border: 4px solid #000000;}
		.quote {padding-bottom: 20px;
		margin-bottom: 0;
		border-bottom: 0.3px solid #24252d;}
		.render {}
		.text {display: flex;width: calc(100% - 32px);flex-direction: column;justify-content: flex-start;margin: 16px auto;padding:16px;border: 0.5px solid #343540;border-radius:5px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);}
		.title {}
		.video {}

}
/* ---------- Mini Screen ---------- */
@media screen and (max-width: 580px) {
	
}/* End Mini Screen  */


/* ========== Sections ========== */

/* ====== Top Bar ====== */
#Bar-top {
	display:flex;
	height:66px;
	align-items: center;
	position: fixed;
	top: -1px;
	width: 100%;
	margin: 0 auto;
	z-index: 400;
	border-bottom: 1px solid;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);	
}
.wrapper {
  display: flex;
  top: 0;
  right: 0;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

nav {
  height: 56px;
  padding: 5px 20px;
  display: flex;
  align-items: center;
}

nav .m-menu__checkbox {
  display: none;
}

nav label.m-menu__toggle {
  cursor: pointer;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

nav .m-menu {
  animation: fadeIn 0.35s ease-in-out;
  position: fixed;
  display: none;
  top: 66px;
  left: 22vw;
  right:22vw;
  bottom: 66px;
  max-width: 450px;
  background-color: #202023;
  border-right: 1px solid #dadada;
  border-left: 1px solid #dadada;
  -moz-transform: translate3d(calc(100vw - 100px), 0, 0);
  -o-transform: translate3d(calc(100vw - 100px), 0, 0);
  -ms-transform: translate3d(calc(100vw - 100px), 0, 0);
  -webkit-transform: translate3d(calc(100vw - 100px), 0, 0);
  transform: translate3d(calc(100vw - 100px), 0, 0);
  -moz-transition: transform 0.35s;
  -o-transition: transform 0.35s;
  -webkit-transition: transform 0.35s;
  transition: transform 0.35s;
  z-index: 1;
  overflow: hidden;
}

nav .m-menu hr {
  width: 90%;
}

nav .m-menu__overlay {
  animation: fadeIn 0.35s ease-in-out;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  bottom: 63px;
  z-index: 1;
  display: none;
}

nav .m-menu__header {
  padding: 0 16px;
  height: 50px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -ms-flex-pack: space-around;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

nav .m-menu__header span {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

nav .m-menu .m-menu {
  -moz-transform: translate3d(480px, 0, 0);
  -o-transform: translate3d(480px, 0, 0);
  -ms-transform: translate3d(480px, 0, 0);
  -webkit-transform: translate3d(480px, 0, 0);
  transform: translate3d(480px, 0, 0);
}

nav .m-menu ul {
  height: 100%;
  overflow-y: auto;
}

.m-menu ul li {
  display: inline-flex;
  float: left;
  text-align: center;
  width: calc(100% - 8px) !important;
  margin: 4px;
}

nav .m-menu ul li a,
nav .m-menu ul li label {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0 15px;
  line-height: 47px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

nav .m-menu ul li label.a-label__chevron::after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 10px;
  width: 10px;
  border-color: #333;
  border-style: solid;
  border-width: 1px 1px 0 0;
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  margin-top: -5px;
  right: 16px;
}

nav .m-menu ul li .-invisible {
  border-bottom: 0;
}

nav .m-menu .m-menu label.m-menu__toggle {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  border-bottom: 0;
  padding: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

nav .m-menu__checkbox:checked ~ .m-menu__overlay {
  display: block;
}

nav .m-menu__checkbox:checked ~ .m-menu {
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: block;
  opacity: 1;
  visibility: visible;
}

/* ========== */

/* ====== Bar Bottom ====== */
#Bar-bottom {
	display: flex;
    height: 66px;
    align-items: center;
    position: fixed;
    bottom: -1px;
    width: 100%;
	min-width: 370px;
    margin: 0 auto;
    z-index: 400;
	border-top: solid 1px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);		
}
#Bar-bottom ol {
	display: flex;
    height: 66px;
    align-items: center;
    bottom: -1px;
    width: 100%;
    margin: 0 auto;
}
#Bar-bottom ol li {
    display: inline-flex;
    justify-content: center;
    position: relative;
    text-align: center;
    width: calc(100% / 6);
    margin: 0px 0px 4px;
}
#Bar-bottom ol li a {height: 40px;}
/* ========== */