@import './jsen-mod-interface-cls-theme-ext-basic.css';
@import './custom.css';

/* latin-ext */
@font-face {
	font-family: 'StyleScript';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/StyleScript-Regular.ttf") format("truetype");
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'StyleScript';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/StyleScript-Regular.ttf") format("truetype");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Modern Love';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/modern-love-regular.ttf") format("truetype");
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Modern Love';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/modern-love-regular.ttf") format("truetype");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* * { font-family: 'Exo 2', sans-serif !important; } */
/* h1, h2, h3, h4, h5, h6 { font-family: 'StyleScript', cursive !important; } */


body {
  background-color: #ffffff !important;
}

#app {
  padding: 0 !important;
}


#logo {
  border-radius: 50%;
  display: block;
  overflow: hidden;
  position: absolute;
  left: 2.618rem;
  top: 2.618rem;
  width: 12.09rem;
  z-index: 2;
}
@media (max-width: 1000px) {
  #logo {
    width: 7.854rem;
  }
}


#navigation {
  left: 0;
  overflow: auto;
  position: absolute;
  top: 1.618rem;
  width: 100%;
}
@media (max-width: 618px) {
  #navigation {
    /* display: none; */
  }
}

#navigation > p {
  margin-bottom: 0;
  text-align: center;
}
@media (max-width: 618px) {
  #navigation > p {
    padding-right: 1.618rem;
    text-align: right;
  }
}

#navigation > p > span {
  display: inline-block;
  padding: 1.0rem 1.618rem;
}
@media (max-width: 618px) {
  #navigation > p > span {
    padding: 0.618rem 1.0rem;
  }
}

#navigation > p > span > a {
  font-family: 'StyleScript', cursive !important;
  font-size: 2.618rem;
  color: #d0ac79;
}
@media (max-width: 1000px) {
  #navigation > p > span > a {
    font-size: 2.146rem;
  }
}
@media (max-width: 618px) {
  #navigation > p > span > a {
    font-size: 1.618rem;
  }
}


#footer {
  background-color: #b8c494;
  padding: 2.618rem 4.236rem;
}

#footer > p {
  font-size: 1.236rem;
  margin-bottom: 0;
}

#footer > p > span {
  padding: 0 0.618rem;
}
@media (max-width: 1000px) {
  #footer > p > span {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 1000px) {
  .not-on-tablet { display: none !important; }
}

@media (max-width: 618px) {
  .not-on-mobile { display: none !important; }
}

#footer > p > span:first-child {
  font-family: 'StyleScript', cursive !important;
  font-size: 1.618rem;
}

#footer > p > span,
#footer > p > span > a {
  color: #ffffff;
}

#footer > p > span > a > u {
  /* border-color: #ffffff; */
  border-color: transparent;
}



.slide {
  min-height: 100vh;
  position: relative;
  width: 100vw;
}


.floral {
  background-color: #f5f5f5;
  background-image: url('../images/background-floral.png');
  background-position: top -23.6vh right -9.0vw;
  background-repeat: no-repeat;
  background-size: 61.8%;
}
@media (max-width: 1000px) {
  .floral {
    background-position: top -14.6vh right -14.6vw;
    background-size: 85.4%;
  }
}
@media (max-width: 618px) {
  .floral {
    background-position: top -9.0vh right -23.6vw;
    background-size: 100%;
  }
}

.floral-balloons {
  background-color: #fafafa;
  background-image: url('../images/background-balloons.png');
  background-position: bottom -23.6vh left -9.0vw;
  background-repeat: no-repeat;
  background-size: 61.8%;
}
@media (max-width: 1000px) {
  .floral-balloons {
    background-position: bottom -9.0vh left -9.0vw;
    background-size: 100%;
  }
}


button.button {
  border: 0;
  box-shadow: none !important;
  color: #d0ac79;
  font-family: 'StyleScript', cursive !important;
  padding: 0;
}



#homeBox {
  display: block;
  padding-top: 27.836vh;
}

#homeBox > div {
  background-image: url('../images/flower-left.png');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 61.8vh;
  margin: 0 auto;
  position: relative;
  width: 91vw;
}

#homeBox > div > div:first-child {
  background-color: #b8c494;
  border-top-left-radius: 38.2rem;
  border-bottom-left-radius: 38.2rem;
  height: 100%;
  left: 14.6%;
  position: absolute;
  width: 50%;
  z-index: 1;
}
@media (max-width: 1618px) {
  #homeBox > div > div:first-child {
    display: none;
  }
}

#homeBox > div > div:last-child {
  height: 52.78vh;
  right: 14.6%;
  margin-top: 4.51vh;
  position: absolute;
  z-index: 2;
}
@media (max-width: 1618px) {
  #homeBox > div > div:last-child {
    margin-top: 0;
    right: 0%;
  }
}

#homeBox > div > div:last-child > img {
  display: block;
  height: 100%;
  max-height: 100%;
}
@media (max-width: 1618px) {
  #homeBox > div > div:last-child > img {
    height: auto;
    width: 100%;
  }
}

#homeBox > div > div:last-child > h1 {
  color: #fff;
  font-family: 'Modern Love';
  font-size: 4.236rem;
  font-weight: 100 !important;
  margin-left: -17.944rem;
  top: 17.218vh;
  position: absolute;
  z-index: 9;
}
@media (max-width: 1618px) {
  #homeBox > div > div:last-child > h1 {
    color: #b8c494;
    margin-left: 0;
    position: relative;
    text-align: center;
    top: 2.618rem;
  }
}



#missionBox {
  display: block;
}

#missionBox > * {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

#missionBox > div:first-child {
  margin-left: 38.2%;
  padding: 4.236rem;
  width: 61.8%;
}
@media (max-width: 1000px) {
  #missionBox > div:first-child {
    margin-left: 0;
    width: 100%;
    z-index: 1;
  }
}

#missionBox > div:first-child > h2 {
  font-family: 'StyleScript', cursive !important;
  font-size: 4.236rem;
  color: #d0ac79;
}

#missionBox > div:first-child > p {
  background-color: #f5f5f5;
  border-radius: 2.618rem;
  font-size: 1.382rem;
  padding: 2.618rem;
}

#missionBox > div:last-child {
  left: 0;
  position: absolute;
  width: 38.2%;
}
@media (max-width: 1000px) {
  #missionBox > div:last-child {
    min-height: 23.6rem;
    position: relative;
    width: 100%;
    z-index: 1;
  }
}

.balloon {
  font-family: 'StyleScript', cursive !important;
  font-size: 2.618rem;
  color: #ffffff;
  text-align: center;
  padding-top: 4.236rem;
  height: 14.6rem;
  width: 11.618rem;
  border-radius: 80% 80% 80% 80%;
  background-color: #b8c494;
  position: relative;
}
.balloon:before {
  content: "";
  color: #b8c494;
  position: absolute;
  bottom: -0.618rem;
  left: 50%;
  transform: translateX(-50%);
  border-left: 0.382rem solid transparent;
  border-right: 0.382rem solid transparent;
  border-bottom: 0.618rem solid #b8c494;
}

#balloon1 {
  position: absolute;
  left: 2.618rem;
  top: 4.236rem;
}
@media (max-width: 1000px) {
  #balloon1 {
    left: auto;
    right: 2.618rem;
  }
}

#balloon2 {
  position: absolute;
  left: 14.618rem;
  top: -2.618rem;
}
@media (max-width: 1000px) {
  #balloon2 {
    left: auto;
    right: 14.618rem;
  }
}

#balloon3 {
  position: absolute;
  left: 23.236rem;
  top: 11.09rem;
}
@media (max-width: 1000px) {
  #balloon3 {
    left: auto;
    right: 23.236rem;
  }
}



#pastEventsBox {
  background-color: #f5f5f5;
  display: block;
  padding: 2.618rem;
}

#galleryBox {
  padding: 27.836vh 2.618rem 2.618rem 2.618rem;
}
@media (max-width: 1000px) {
  #galleryBox {
    padding: 17.944vh 2.618rem 2.618rem 2.618rem;
  }
}

#pastEventsBox > h2,
#galleryBox > h1 {
  font-family: 'StyleScript', cursive !important;
  font-size: 4.236rem;
  color: #d0ac79;
  margin-bottom: 0;
}

#galleryBox > h1 {
  text-align: center;
}

#pastEventsBox > div > *,
#galleryBox > div > * {
  display: inline-block;
  padding: 1.618rem;
  vertical-align: top;
  width: 33.33%;
}
@media (max-width: 1000px) {
  #pastEventsBox > div > *,
  #galleryBox > div > * {
    width: 50%;
  }
}
@media (max-width: 618px) {
  #pastEventsBox > div > *,
  #galleryBox > div > * {
    width: 100%;
  }
}

#pastEventsBox > div > * > a > img,
#galleryBox > div > * > a > img {
  background-color: #ffffff;
  padding: 0.618rem;
}

#pastEventsBox > div > * > p,
#galleryBox > div > * > p {
  font-family: 'StyleScript', cursive !important;
  font-size: 1.382rem;
  margin-bottom: 0;
  margin-top: 1.0rem;
}

#pastEventsBox > div > * > p > a,
#galleryBox > div > * > p > a {
  color: #d0ac79;
}

#pastEventsBox > div > * > p > a > span,
#galleryBox > div > * > p > a > span {
  color: #cccccc;
  font-size: 1.146rem;
}

#pastEventsBox > a > button.button,
#galleryBox > a > button.button {
  display: block;
  margin: 0 auto !important;
}



#aboutBox {
  padding-top: 27.836vh;
}
@media (max-width: 1000px) {
  #aboutBox {
    padding-top: 11.09vh;
  }
}

#aboutBox > * {
  display: inline-block;
  vertical-align: top;
}

#aboutBox > *:first-child {
  padding: 4.236rem;
  width: 38.2%;
}
@media (max-width: 1000px) {
  #aboutBox > *:first-child {
    padding: 4.236rem 4.236rem 0 4.236rem;
    width: 100%;
  }
}

#aboutBox > *:first-child > img {
  border: 1.0rem solid #b8c494;
  border-radius: 50%;
  display: block;
  height: 29.034rem;
  margin: 0 auto 0.618rem auto !important;
  width: 29.034rem;
}

#aboutBox > *:first-child > h2 {
  font-family: 'StyleScript', cursive !important;
  font-size: 2.618rem;
  color: #d0ac79;
  margin-bottom: 0;
  text-align: center;
}

#aboutBox > *:last-child {
  padding: 4.236rem;
  width: 61.8%;
}
@media (max-width: 1000px) {
  #aboutBox > *:last-child {
    padding: 0 4.236rem 4.236rem 4.236rem;
    width: 100%;
  }
}

#aboutBox > *:last-child > h1 {
  font-family: 'StyleScript', cursive !important;
  font-size: 4.236rem;
  color: #d0ac79;
  text-align: center;
}

#aboutBox > *:last-child > p {
  background-color: #ffffff;
  border-radius: 2.618rem;
  font-size: 1.382rem;
  padding: 2.618rem;
}

#aboutBox > *:last-child > button {
	background-color: #b8c494;
  border: 0.236rem solid #ffffff;
  color: #ffffff;
  display: block;
  font-family: 'StyleScript', cursive !important;
  margin-bottom: 0;
  width: 100%;
}

#aboutBox > *:last-child > button > a {
	color: #ffffff;
	display: block;
  width: 100%;
}



#contactBox {
  padding-top: 27.836vh;
}
@media (max-width: 1000px) {
  #contactBox {
    padding-top: 17.944vh;
  }
}

#contactBox > h1 {
  font-family: 'StyleScript', cursive !important;
  font-size: 4.236rem;
  color: #d0ac79;
}

#contactBox > h1 {
  text-align: center;
}

#contactBox > div {
  margin: 0 auto;
  width: 38.2%;
}
@media (max-width: 1000px) {
  #contactBox > div {
    width: 61.8%;
  }
}
@media (max-width: 618px) {
  #contactBox > div {
    width: 91%;
  }
}

#contactBox > div > p {
  margin-bottom: 0;
}

#contactBox > div > p > a {
  display: block;
  width: 100%;
}

#contactBox > div > p > a:not(:last-child) {
  margin-bottom: 1.0rem;
}

#contactBox > div > p > a > button {
  background-color: #b8c494;
  border: 0.236rem solid #ffffff;
  color: #ffffff;
  display: block;
  font-family: 'StyleScript', cursive !important;
  margin-bottom: 0;
  width: 100%;
}

#contactBox > div > p > a > button > img {
  display: inline;
  margin-right: 0.618rem;
  vertical-align: middle;
  width: 1.854rem;
}



#servicesBox {
  padding-top: 17.944vh;
}

#servicesBox > *:first-child > p {
	color: #d0ac79;
	text-align: center;
}

@media (max-width: 618px) {
  #servicesBox > *:first-child > p > a {
    display: block;
  }
}

#servicesBox > *:first-child > p > a > button > u {
	border-bottom-color: #d0ac79;
	border-bottom-style: solid;
}

#servicesBox > *:not(:first-child) {
  display: block;
  margin: 0 auto;
  padding: 0 4.236rem 4.236rem 4.236rem;
  vertical-align: top;
  width: 85.4%;
}

#servicesBox > *:not(:first-child) > center > h1 {
  background-color: #b8c494;
  color: #ffffff;
  display: inline-block;
  font-family: 'StyleScript', cursive !important;
  font-size: 3.146rem;
  margin-bottom: 0;
  padding: 1.618rem;
  width: auto;
}

#servicesBox > *:not(:first-child) > p {
  background-color: #ffffff;
  font-size: 1.382rem;
  margin-top: -2.618rem;
  padding: 4.236rem;
}

#servicesBox > *:not(:first-child) > p > span {
  display: block;
}