@charset "UTF-8";

@font-face {
  font-family: 'ABCMarist';
  src: url('../fonts/ABCMarist-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body,html{
  margin:0;
  padding:0;
  background:#fff;
  width:100%;
  height:100%;
  font-family: 'ABCMarist', serif;
  color:#766F40;
}


a, a:visited, a:focus{
  color:#766F40;
  text-decoration: none;
  outline:none;
}

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.table{
  display:table;
  width:100%;
  height:100%;
}

.table-cell{
  display:table-cell;
  vertical-align: middle;
  text-align:center;
}





header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:auto;
  text-align:right;
  padding:2.2vw 2vw 0 0;
}

header .logo{
  position:absolute;
  top:1vw;
  left:1.7vw;
  cursor:default;
}






header .logo img{
  position:relative;
  display: inline-block;
  vertical-align: middle;
  width:4vw;
  height:4vw;
  top:0.1vw;
}

header .logo .name{
  position:relative;
  display: inline-block;
  vertical-align: middle;
  margin-left:1.3vw;
  top:0.2vw;
}

header nav{
  position:relative;
}

header nav a{
  position:relative;
  display:inline-block;
  top:0px;
  left:0px;
}

header nav a.touch{
  margin-left:1.2vw;
}






#wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height:100%;
}

#wrapper .logo{
  position:relative;
  width:40vw;
  height:40vw;
}


#wrapper .logo img{
  width:100%;
  height:auto;
  transform-origin:center center;
}

#wrapper .logo .overlay{
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;  
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#wrapper .logo .overlay .title{
  transform:scale(0.9);
  opacity: 0;
  transition:transform 800ms ease-in-out, opacity 800ms ease-in-out;
  transition-delay: 200ms;
}

body.loaded #wrapper .logo .overlay .title{
  transform:scale(1);
  opacity: 1;
}




.tiny-only{
  display:none;
}




.underline{
  text-decoration: underline;
  text-underline-offset: 0.3vw;
}

.p1{
  font-size:4vw;
}

.p2{
  font-size:2vw;
}



@media(min-width:781px){

  /* animation */

  header .logo{
    opacity: 0;
    transform:scale(0.9);
    transition:transform 400ms ease-in-out, opacity 400ms ease-in-out;
    transition-delay: 800ms;  
    
  }
  
  header nav a{
    opacity: 0;
    transform:scale(0.9);
    transition:transform 400ms ease-in-out, opacity 400ms ease-in-out;
    transition-delay: 800ms;
  }
  
  body.loaded header .logo,
  body.loaded header nav a{
    transform:scale(1);
    opacity: 1;
  }
  
  body.loaded header nav a.phone{
    transition-delay: 1200ms;
  }
  
  body.loaded header nav a.touch{
    transition-delay: 1600ms;
  }

  #wrapper .logo{
    opacity:0;
    transform:scale(0.9);
    transition:opacity 800ms ease-in-out, transform 800ms ease-in-out;
    cursor:default;
  }

  body.loaded #wrapper .logo{
    opacity:1;
    transform:scale(1);
  }

  @keyframes logo-pulse {
    0%, 100% {
      transform:scale(1);
    }
    50% {
      transform:scale(1.02);
    }
  }

  body.loaded #wrapper .logo img{
    animation:logo-pulse 5s ease-in-out 1.6s infinite;
  }

  body.steady header nav a{
    transition-delay: 0s !important;
  }

  header nav a:hover{
    opacity: 0.5 !important;
  }


}




@media (max-width:781px) {

  #wrapper .logo{
    width:320px;
    height:320px; 
  }
  
  header{
    padding:20px 20px 0 0;
  }
  
  header .logo{
    top:15px;
    left:20px;
  }
  
  header .logo img{
    top:-1px;
    width:25px;
    height:25px;
  }
  
  header .logo .name{
    margin-left:3px;
    top:0.2vw;
  }
  
  header nav{
  
  }
  
  header nav a.touch{
    margin-left:3px;
  }
  
  
  
  
  
  
  .underline{
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  
  .p1{
    font-size:30px;
  }
  
  .p2{
    font-size:17px;
  }





}


@media( max-width:420px){

  .tiny-only{
    display:inline-block;
  }

  header nav a.touch{
    margin-top:5px;
  }


}