/* 
 This CSS file is used to override the existing styles of the theme.
 You can change the article headings, fonts, colors, etc.
*/
@import url("/css/font-custom.css");
@import url("/css/msnry-custom.css");

:root{
  font-size: 16px;
  font-family: sans-serif;
  font-weight: normal;
}
body {
  /*background : #F8FAFB;*/
  background : #E3E4DE;
}
/** content **/
.content {
  background : #E3E4DE;
}

/** main content **/
main {
  margin-top: 0rem;
}

/** **/
.scroll-top {
  background-color: #E3E4DE4f;
  color:gray
}


/** header nav **/
header nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  background:#E3E4DEe0;
  /**background: #91A9BD8a;**/
  /**background:rgba(2, 2, 2, 0.85);**/
  /**border-bottom: 1px solid #1F1E1E;**/
  color: black;
  z-index: 99;
}
header nav.position-static {
  position: static;
}
.mopen span {
  width: 30px;
  height: 1px;
  background: black;
  margin-left: -8px;
}
.mopen .top {
  transform: translateY(-10px);
}
.mopen .bottom {
  transform: translateY(10px);
}

/** strip **/
.strip-bg {
  background : #e9edf1;
}

/** footer **/
footer .outro {
  background-color: rgba(2, 2, 2, 0.85);
  color: #E8F3F9;
}
footer .copy{
  /*background-color:#91A9BD8a;*/
  color: gray;
  /**background-color: #020202;**/
  /**color: #E8F3F9;**/
}

/** top swiper **/
.swiper-wrapper img {
  height: 100vh;
}
.swiper-slide-active img,
.swiper-slide-duplicate-active img,
.swiper-slide-prev img{
  animation: zoomUp 6s linear 0s 1 normal both; 
}
@keyframes zoomUp {
  0% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1.0);
  }
}
.swiper-slide .s-fade-txt {
  top: 50%;
  font-family: serif;
}
.swiper-slide .s-fade-btn {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  /** animation: FadeAni 0.1s ease 1s 1 normal both; **/
}

.title-on-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.title-on-img2 {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.title-on-img4 {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background:rgba(02, 02, 02, 0.25);
  color:#fff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.title-on-img3 {
  position: absolute;
  bottom: 0%;
  left: 0%;
  transform: translate(0%, 0%);
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background:#0000001a;
  color:#fff;
  text-align: left;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  /**
  background:#91A9BD8a;
  **/
}

/** custom aspect-ratio **/
.aspect-camera {
  aspect-ratio: 3 / 2;
}
.aspect-oldtv {
  aspect-ratio: 4 / 3;
}

/** under-line **/
.under1 {
  background: linear-gradient(transparent  60%, #EBC413aa 90%);
}
.under2 {
  background: #ffc037;
}

/** button **/
.button-more {
  position: relative;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:rgba(31, 30, 30, 0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #fff;
  border-left: 8px solid #EBC413;
  text-align: center;
  width: 220px;
  /** border-radius: 1.75rem; **/
}
.button-more:before {
  background:  #EBC413;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.6s ease 0s;
  z-index: -1;
  /**
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 30%), 0 0 5px rgb(0 0 0 / 30%);
  **/
}
.button-more:hover{
  color: #020202;;
  font-weight: bolder;
  transition: all 0.1s ease 0s;
}
.button-more:hover::before{
  width: 100%;
}

/** breadcrumb **/
.breadcrumb {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.breadcrumb li {
  display: inline;
  list-style: none;
}
.breadcrumb a {
  text-decoration: underline;
}
.breadcrumb li:not(:last-child)::after {
  content: '>';
  padding: 0 0.5em;
}

/** form **/
input[type='text'],
input[type='email'],
textarea {
  width: 100%;
  max-width: 72em;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

hr {
  --tw-prose-hr :gray;
  --tw-prose-invert-hr: gray;
  color: gray;
  border-color: gray;
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(26 26 66 / var(--tw-border-opacity));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 66 / var(--tw-bg-opacity));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(26 26 66 / var(--tw-text-opacity));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity));
}

@media (min-width: 320px) {
  .xs\:flex {
    display: flex;
  }
  .xs\:min-w-120 {
    min-width:120px;
  }
  .xs\:min-w-200 {
    min-width:200px;
  }
}