/*

Oh hi there. Just taking a peek?
If you're in need of some creative assistance,
this website was designed and built by Kimberley Chan.

I'm sure she'll be happy to hear from you.

W: kimberleychan.com
E: hello@kimberleychan.com

*/


html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body{
  font-size:16px;
  line-height:28px;
  font-family:"untitled sans"; sans-serif;
  font-weight:200;
  color: #333333;
}

b{font-weight:400;}

h1 {
  font-size:22px;
  line-height:32px;
  font-weight:200;
  margin-bottom:20px;
}

h1.title{
  color: #C68731;
  font-size:12px;
  line-height:20px;
  text-transform: uppercase;
  letter-spacing:3px;
  margin-bottom:3px;
}



h2{
  font-size: 16px;
  font-weight:400;
  line-height:28px;

}

h3{
  color: #C68731;
  font-size:10px;
  line-height:20px;
  text-transform: uppercase;
  letter-spacing:3px;
}



a{
  text-decoration: none;
  color: #333333;
}

a:hover{
  color: #C68731;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.bg_colour{
  background-color: #F9F9F0;
}

/* LOGO */

#header{
    width:100%;
    top: 40px;
    left: 0;
    position:fixed;
    z-index:100;
    text-align:center;
}

#footer{
    width:100%;
    bottom: 40px;
    left: 0;
    position: fixed;
    position:fixed;
    z-index:100;
    text-align:center;
    -moz-transform: rotate(180deg);  /* FF3.5+ */
    -o-transform: rotate(180deg);  /* Opera 10.5 */
    -webkit-transform: rotate(180deg);  /* Saf3.1+, Chrome */
    transform: rotate(180deg);
}

img.logo {
    width:140px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

/* END LOGO */

/* FIXED NAVIGATION */

#menuleft,
#menuright {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 1.5em;
  margin: auto;
}

#menuleft {
  left: 20px;
  -webkit-transform-origin: 0 50%;
     -moz-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
       -o-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: rotate(-90deg) translate(-50%, 50%);
     -moz-transform: rotate(-90deg) translate(-50%, 50%);
      -ms-transform: rotate(-90deg) translate(-50%, 50%);
       -o-transform: rotate(-90deg) translate(-50%, 50%);
          transform: rotate(-90deg) translate(-50%, 50%);
}

#menuright {
   right: 20px;
   -webkit-transform-origin: 100% 50%;
      -moz-transform-origin: 100% 50%;
       -ms-transform-origin: 100% 50%;
        -o-transform-origin: 100% 50%;
           transform-origin: 100% 50%;
   -webkit-transform: rotate(90deg) translate(50%, 50%);
      -moz-transform: rotate(90deg) translate(50%, 50%);
       -ms-transform: rotate(90deg) translate(50%, 50%);
        -o-transform: rotate(90deg) translate(50%, 50%);
           transform: rotate(90deg) translate(50%, 50%);
}

a.link{
  font-size:10px;
  text-decoration: none;
  color: #C68731;
}

.link{
  position: relative;
  margin:0 20px;
  padding:10px 0;
  text-transform: uppercase;
  letter-spacing:3px;
}

.link:after{
  content: '';
  position: absolute;
  width: 0; height: 1px;
  display: block;
  margin-top: 0px;
  right: 0;
  background: #A77041;
  transition: width .2s ease;
  -webkit-transition: width .2s ease;
}
 
.link:hover:after{
  width: 100%;
  left: 0;
  background: #A77041;
}

img.nav_icon{
  width:12px;
}

/* END FIXED NAVIGATION */

/* HOME */
#container{
  width:75%;
  margin:100px auto;
}

#container_text{
    height: 100vh;
    float: left;
    z-index: 0;
    width: 100%;
}

#gallery{
  width:100%; 
  overflow: hidden;
}

.itm{
  width:50%;
  line-height:0;
  margin:40px;
}

.w25{width:25%;} 
.lft{float:left;}
.rght{float:right;}
.cen{margin: 0 auto;}
.clear{clear: both;}

img{width:100%;}

#gallery .hide img {
  opacity: 0;
  transform: translate(0, 20px); 
  transition: all 1s;
}

#gallery .hide img.visible {
  opacity: 1;
  transform: translate(0, 0); 
}

/* END HOME */

/* ABOUT */

#about{
  width:75%;
  max-width:580px;
  margin:0 auto;
  text-align:center;
}

.horizontal_center {
    margin-left: 10%;
    margin-right: 10%;
}
.vertical_center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden !important;}

#about p {margin:0 0 10px;}

/* EVENTS */

#events{
  width:75%;
  max-width:580px;
  margin:0 auto;
  text-align:center;
}

#events p.end {margin:0 0 40px;}

/* END EVENTS */

/* FAQ */

#faq{
  width:75%;
  max-width:550px;
  margin:180px auto;
  text-align:center;
}

#faq p {margin:0 0 40px;}

/* END FAQ */

/* NEWSLETTER */

#newsletter{
  width:75%;
  max-width:580px;
  margin:0 auto;
  text-align:center;
}

#newsletter p.end {margin:0 0 40px;}

/* END NEWSLETTER */

/* Animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.delay_3{
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

.fadein {
  webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1.5s; /* Firefox < 16 */
  -ms-animation: fadein 1.5s; /* Internet Explorer */
  -o-animation: fadein 1.5s; /* Opera < 12.1 */
  animation: fadein 1.5s;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@font-face {
    font-family: "untitled sans";
    src: url("fonts/UntitledSansRegular.woff") format('woff');
    font-weight:400;
}

@font-face {
    font-family: "untitled sans";
    src: url("fonts/UntitledSans-Light.woff") format('woff');
    font-weight:200;
}

@media only screen and (max-width:900px){

h1 {font-size:16px;line-height:28px;}

#container{width:70%;}

#faq{
  width:85%;
  max-width:550px;
  margin:100px auto;
  padding:0 0 100px;
}

.itm, .w25{
  width:100%;
  line-height:0;
  margin:0 auto 18%;}

}

@media only screen and (max-width: 480px){

h1 {font-size:16px;line-height:28px;}

#container{width:75%;}

#faq{
  width:85%;
  max-width:550px;
  margin:100px auto;
  padding:0 0 100px;
}

.vertical_center {
    position: relative;
    top: 46%;
    transform: translateY(-48%);
    overflow: hidden !important;}

#gallery{
  width:100%; 
  margin:0 auto;
}

.itm, .w25{
  width:100%;
  line-height:0;
  margin:0 auto 18%;
}

.lft, .rght{float:none;}

#menuleft{left:10px;}
#menuright{right:10px;}
#header{top: 30px;}
#footer{bottom: 30px;}

}