/*body {
    margin: 2%;
}
*/
/*Astoria Sans Bold

font-family: astoria-sans, sans-serif;
font-weight: 700;
font-style: normal;


Astoria Sans Medium

font-family: astoria-sans, sans-serif;
font-weight: 500;
font-style: normal;


Astoria Sans Roman

font-family: astoria-sans, sans-serif;f
font-weight: 400;
font-style: normal;


Astoria Sans Roman Italic

font-family: astoria-sans, sans-serif;
font-weight: 400;
font-style: italic;

Playfair Display Regular

font-family: playfair-display, serif;
font-weight: 400;
font-style: normal;


Playfair Display Italic

font-family: playfair-display, serif;
font-weight: 400;
font-style: italic;


Playfair Display Bold

font-family: playfair-display, serif;
font-weight: 700;
font-style: normal;


Playfair Display Bold Italic

font-family: playfair-display, serif;
font-weight: 700;
font-style: italic;
*/

@import url(https://use.fontawesome.com/releases/v5.0.6/css/all.css);

.fa, .fas {
  -webkit-text-stroke: 1px white;
}

a {
  color: inherit;
  text-decoration: none;
}

.animate-right {
  position: relative;
  animation: animateright 1s;
  ;
}

.animate-left {
  position: relative;
  animation: animateleft 1s;
}

@keyframes animateright {
  from {
      right: -300px;
      opacity: 0
  }

  to {
      right: 0;
      opacity: 1
  }
}

@keyframes animateleft {
  from {
      left: -300px;
      opacity: 0
  }

  to {
      left: 0;
      opacity: 1
  }
}

/*#scrollToTopBtn {
  bottom: 30px;
  border: none;
  border-radius: 10%;
  color: white;
  cursor: pointer;
  font-size: 16px;
  line-height: 48px;
  position: fixed;
  z-index: 100;
  right: 20px;
  background-color: var(--color-main);
}
*/
#scrollToTopBtn {

    bottom: 30px;
    border: none;
    border-radius: 10%;
    cursor: pointer;
    font-size: 16px;
    position: fixed;
    z-index: 100;
    right: 20px;
    background-color: var(--color-main);
    padding: 0.4em 0.45em 0.5em 0.4em;
    height: 45px;
    width: 45px;
}

#scrollToTopBtn > svg {
  margin-bottom: -5px;
  margin: auto 0;
  }


/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

:root {
  --color-main: #4d5864;
  --color-secondary: #ddb8ab;
  --color-main-light: #F3EAD1;
  --color-travelwiser: #B5A691;
  --color-beautylish: #554E56;
  --color-beautylish-secondary: #FDF5EA;
  --color-sense-of-smell: #0B4C62;
  --color-gintei: #1D2A51;
  --color-gintei-secondary: #D1D4DC;
  --color-ua: #BB7D73;
  --color-cas: #F95A5A;
  /*--color-neutral-medium: #7c7c82;
    --color-neutral-dark: #303036;
    --color-main-light: #fff8d7;
    --color-main-medium: #fbea9c;
    --color-main-dark: #ffe500;
    --color-secondary-light: #a8dede;
    --color-secondary-medium: #51a7a7;
    --color-secondary-dark: #0b4c62;
    --color-third: #546984;
    --header-height: 3.4rem;*/
}

h1 {
  font-family: playfair-display, serif;
  font-weight: 700;
  font-style: normal;
}

h2 {
  font-family: playfair-display, serif;
  font-weight: 700;
  font-style: normal;
}

h3 {
  font-family: astoria-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
}

h5 {
  font-family: astoria-sans, sans-serif;
  font-weight: 700;
  font-style: normal;
}

p {
  font-family: astoria-sans, sans-serif;
  font-weight: 300;
  font-style: normal;
  /*letter-spacing: 0.2%;*/
  font-size: 18px;
}

hr {
  margin: 1% 0 3% 3%;
}
.logo img {
  width: 45px;
}

.navbar-font {
  font-family: astoria-sans, sans-serif;
  font-weight: 400;
  color: var(--color-main);
  font-size: 120%;
}

.navbar-custom {
  background-color: white;
  padding: 1% 7% !important;
  /* font-size: 1.25vw; */

  transition: top 0.5s;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  z-index: 10;
}

.navbar-custom > ul {
  bottom: 10px;
  position: relative;
}

nav > ul > li:nth-child(2) {
  margin-left: 3vw;
}

nav > ul > li:nth-child(3) {
  margin-left: 3vw;
}

/* Navigation button */
.nav-btn {
position: absolute;
width: 80px;
height: 80px;
top: 50%;
right: -10%;
transform: translate(-50%, -50%);
cursor: pointer;
/* background: white; */
/* border-radius: 50%; */
border: none;
  outline: none;
  z-index: 2000;
}

#nav-btn-2 {
  background: var(--color-main);
  top: 30px;
}

/* #nav-btn-2 span {
  color: white;
} */

.nav-btn span {
position: absolute;
width: 30px;
height: 4px;
top: 50%;
left: 50%;
background: #262626;
border-radius: 2px;
overflow: hidden;
transition: all 0.3s linear;
}

.nav-btn span::before {
content: '';
position: absolute;
width: 0;
height: 100%;
top: 0;
right: 0;
background: gray;
transition: all 0.3s linear;
}

.nav-btn span:nth-child(1) {
animation: span-first-off 0.5s ease-in-out;
animation-fill-mode: forwards;
}

.nav-btn span:nth-child(2) {
animation: span-second-off 0.5s ease-in-out;
animation-fill-mode: forwards;
}

.nav-btn span:nth-child(3) {
animation: span-third-off 0.5s ease-in-out;
animation-fill-mode: forwards;
}

#nav-btn-2 span {
  background-color: white;
}

.nav-btn.on:hover span::before {
width: 100%;
transition: all 0.3s linear;
}

.nav-btn.on span:nth-child(1) {
animation: span-first-on 0.5s ease-in-out;
animation-fill-mode: forwards;
}

.nav-btn.on span:nth-child(2) {
animation: span-second-on 0.5s ease-in-out;
animation-fill-mode: forwards;
}

.nav-btn.on span:nth-child(3) {
animation: span-third-on 0.5s ease-in-out;
animation-fill-mode: forwards;
}

@keyframes span-first-on {
0% {
  transform: translate(-50%, -300%);
}

30% {
  transform: translate(-50%, -50%);
}

100% {
  transform: translate(-50%, -50%) rotate(-45deg);
}
}

@keyframes span-first-off {
0% {
  transform: translate(-50%, -50%) rotate(-45deg);
}

30% {
  transform: translate(-50%, -50%) rotate(0deg);
}

100% {
  transform: translate(-50%, -300%);
}
}

@keyframes span-second-on {
0% {
  transform: translate(-50%, -50%);
}

25% {
  background: gray;
}

50% {
  transform: translate(-50%, -50%) scale(1);
}

100% {
  transform: translate(-150%, -50%) scale(0);
}
}

@keyframes span-second-off {
0% {
  transform: translate(-150%, -50%) scale(0);
}

25% {
  background: gray;
}

50% {
  transform: translate(-50%, -50%) scale(1);
}

100% {
  transform: translate(-50%, -50%);
}
}

@keyframes span-third-on {
0% {
  transform: translate(-50%, 200%);
}

30% {
  transform: translate(-50%, -50%);
}

100% {
  transform: translate(-50%, -50%) rotate(45deg);
}
}

@keyframes span-third-off {
0% {
  transform: translate(-50%, -50%) rotate(45deg);
}

30% {
  transform: translate(-50%, -50%) rotate(0deg);
}

100% {
  transform: translate(-50%, 200%);
}
}

.phone-plane {
  background-color: var(--color-main);
  height: 100vh;
}

.phone-plane > div:nth-child(2) {
  margin: 30% 0 50% 0;
}
.phone-plane div:nth-child(2) > a {
  font-size: 32px;
  color: white;
  text-align: center;
  margin: 5% auto;
}

.phone-plane > div:nth-child(3) > a {
  font-size: 18px;
  color: white;
  text-align: center;
  margin: 2% auto;
}

.phone-plane p {
  font-size: 28px;
  color: white;
  text-align: center;
  margin: 2% auto;
}

/* Old navbar */
/*
.navbar {
  padding: 1% 15%;
  transition: top 0.5s;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  background-color: white;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}


.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-right a {
  width: 40%;
  padding-top: 10px;
  text-align: center;
  font-family: astoria-sans, sans-serif;
  font-weight: 400;
  color: var(--color-main);
  font-size: 120%;
  transition-duration: 0.4s;

}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  color: var(--color-secondary);
}
*/

.main {
  margin-top: 5%;
  /* Add a top margin to avoid content overlay */
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  min-height: 120vh;
  margin: 0;
}

.main .container:not(:first-child) {
  margin-bottom: -10vh;
}

.container-casestudy {
  margin: 0 15%;
}

.box-column {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.project-divide {
  margin-bottom: 5%;
  margin: 5% 10% 5% 10%;
}

/*slide up animation*/
.slide-up-fade-in{
    animation: slide-up-fade-in ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: slide-up-fade-in ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
    -moz-animation: slide-up-fade-in ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: slide-up-fade-in ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: slide-up-fade-in ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/

    opacity:0;
    opacity: 1\9;

}




@keyframes slide-up-fade-in{
    0% {
        opacity:0;
        transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes slide-up-fade-in{
    0% {
        opacity:0;
        -moz-transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes slide-up-fade-in {
    0% {
        opacity:0;
        -webkit-transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        -webkit-transform:  translate(0px,0px)  ;
    }
}

/*footer*/


.footer {
  background-color: var(--color-main);
  text-align: center;
  color: white;
  padding: 1.5%;
  margin-top: 120px;
}

.footer-logo p {
  font-size: 24px;
  font-family: playfair-display, serif;
  font-weight: 700;
}

.footer img {
  width: 4.17vw;
  margin: auto;
  margin-top: 48px;
}

.footer-info>p:nth-child(1) {
  font-family: astoria-sans, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
}

.footer-info>a {
  font-family: astoria-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: #ffffff;
  color: white;
}

.footer-info>a:hover {
  color: var(--color-secondary);
}

.tag {
    font-family: astoria-sans, sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 14px;
    margin-top: 24px;
}

/*More Project*/

.more-projects p {
    font-size: 32px;
    font-family: playfair-display, serif;
    font-weight: 700;

}

.next-projects img {
    width: 100%;
}

.next-project-left-img img {
    padding-right: 10%;
    width: 100%;
}

.next-project-right-img img  {
    padding-left: 10%;
    width: 100%;
}


.next-project-left p {
    font-family: playfair-display, serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 0;
    right: 0;
}

.next-project-right p {
    font-family: playfair-display, serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 0;
}


.next-subtitle p {
    font-weight: 400;
    font-size: 16px;
    font-family: 'astoria-sans';
}

.next-link a {
    font-weight: 400;
    font-family: 'astoria-sans';
    font-size: 18px;
}


.next-projects {
    margin-bottom: 15em;   
}

.next-project-right {
  padding-left: 2%;
}

.next-project-mobile-show {
    display:none;
}

.previous-link a {
    font-weight: 400;
    font-family: 'astoria-sans';
    font-size: 18px;
}




/* Medium devices (tablets, less than 992px) */
@media (max-width: 1030px) {

  p {
      font-family: astoria-sans, sans-serif;
      font-weight: 300;
      font-style: normal;
      /*letter-spacing: 0.2%;*/
      font-size: 16px;
  }

  ul {
      font-size: 16px;
  }

  .navbar-custom {
    padding: 1% 5% !important;
  }

  .container-casestudy {
      margin: 0 5%;
  }

  .next-project-left p {
      margin-top: 0;
}

  .next-project-right p {
      margin-top: 0;
}

.more-projects p {
  font-size: 28px;
}

.footer img {
    width: 8vw;
    margin: auto;
    margin-top: 24px;
}

.footer-info>p:nth-child(1) {
    font-size: 20px;
    margin-top: 0;
}



}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

  p {
    font-family: astoria-sans, sans-serif;
    font-weight: 300;
    font-style: normal;
    /*letter-spacing: 0.2%;*/
    font-size: 16px;
  }

  ul {
    font-size: 16px;
  }

  .container-casestudy {
    margin: 0 8%;
  }

  .navbar-custom {
    padding: 3% 8% !important;
  }

  .footer img {
    margin-top: 24px;
    width: 12vw;
  }

  .footer-info>p:nth-child(1) {
    font-size: 18px;
    margin: 0 4% 24px 4%;
  }

  .footer-logo p {
    font-size: 18px;
  }

  .footer-info>a {
    font-size: 16px;
  }

  .footer-info>p:nth-child(4) {
    font-size: 12px;
  }

  .next-project-left {
    display: none;
  }

  .next-projects img {
    width: 100%;
    padding:0;
}

  .more-projects p {
      font-size: 24px;
      font-family: playfair-display, serif;
      font-weight: 700;
  }

  .tag {
    font-size: 12px;
  }

  .previous-link-mobile { 
    font-weight: 400;
    font-family: astoria-sans, sans-serif;
    font-size: 16px;
  }

}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}