@import "loader.css";


@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:500|IM+Fell+DW+Pica:400,400i&subset=latin-ext');

*{
  transition: transform .2s cubic-bezier(0.42,0,0.58,1);
}

body{
  background-color: #FFE5DC;
}

h1, h2, h3, h4, h5{
    font-family: "IM Fell DW Pica", serif;
}

p{
  font-size: 1em;
}

h1{
  font-size: 2em;
}

h4{
  padding-bottom: 20px;
}

h5{
  font-size: .5em;
}

.clickables:hover{
  cursor: help;
}

canvas{
  position: absolute;
  display:block;
  top:0;
  max-width: 1281px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 99;
}


/* unknown */

#instance{
  font-size: 5em;
}

#feathInfo{
  position:absolute;
  top:40%;
  color:#AA767D;
  z-index: -999;
  padding-left:10%;
}

#feathInfo > h1{
  margin:10%;
}

.toRemove{
  width:40px;
  position: absolute;
  margin: 0;
  z-index: -1;
  animation-name: featherFloat;
  animation-iteration-count:infinite;
  animation-duration: 5s;
}


/* Loader */
.loaded{
  height: 100%;
}

#preload-mobile{
  display: none;
}


/* Side Menu */
#sectionPt{
  position: fixed;
  right: 3vw;
  top: 30%;
  height: 145px;
  z-index: 99;
  opacity: .75;
}

.point{
  border: 1px solid #600;
  height: 1.5vmin;
  width: 1.5vmin;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  display: block;
  position:relative;
  margin: 24px;
}

.point:hover{
  background: #600;
}

.pt-active {
    border: 1px solid #FFF;
    background-color: #FFF;
}

#sideContent{
  background-image: linear-gradient(125deg, #FFE5DC 25%, #ffac90);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top:0;
  left:0;
  transform:translateX(100%);
  z-index: 1;
}

#sideContent > *{
  color:#AD343C;
  text-align: center;
}

.sider{
  width:100%;
  height:100%;
  position:absolute;
  color:#fff;
  visibility: hidden;
  overflow: hidden;

}

#sideOne {
  width:100vw;
  height:100vh;
  overflow: hidden;
}

#sideTwo{
  width:100vw;
  height:100vh;
  animation-name: zoomOut;
  animation-delay: 2s;
  animation-duration: 10s;
  transform:scale(2);
  overflow: scroll;
  margin: 0;
  display: flex;
  align-items: center;
}

#sideTwoImg{
  vertical-align: middle;
  margin: 0 auto;
  height: 90%;
  width: 100vw;
  min-width: 1000px;
  min-height: 600px;
}

#sideThr{
  margin:auto;
}

#history{
  margin:20% auto;
  width: 50%;
  max-width: 300px;
}


/* Main Content */
#mainContainer{
  position: relative;
  margin: 0 auto;
  max-width: 1281px;
  width: 100vw;
  height: 400vh;
}

.main{
  position: relative;
  height: 25%;
  width: 100%;
}

/* Background Image */
#background{
  position: absolute;
  width: 100vw;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  bottom: 0px;
}

#background-main{
  position: relative;
  bottom: -10px;
  width: 100%;
  /*object-fit: cover;*/
}

#background-fire{
  position: absolute;
  bottom: -5px;
  width: 100%;
  display: none;
}

#LocL{
  position: absolute;
  width:17%;
  bottom: 68%;
  left: 22%;
  z-index: 10;
}

#LocR{
  position: absolute;
  height: 10%;
  left: 68%;
  bottom: 58%;
  animation-name: locFloat;
  animation-duration: 5s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  z-index: 99;
}

#ladybugLU{
  position: absolute;
  width: 8%;
  height: 8%;
  bottom: 79%;
  left: 32%;
}

#ladybugLD{
  position: absolute;
  width:5%;
  height: 5%;
  bottom: 42.5%;
  left: 6%;
}

#ladybugRD{
  position: absolute;
  width:5%;
  bottom:28%;
  left:17%;
}

#bloomA1{
  position:absolute;
  width: 20%;
  bottom: 65%;
  left: 33%;
}

.extras{
  position: absolute;
  max-width: 300px;
}

/* MainOne */
#title{
  position:absolute;
  font-size: 10vw;
  bottom: 10%;
  right: 1%;
  padding: 2%;
  color:#aa767d;
}

#designer{
  position:absolute;
  font-size: 4vw;
  bottom: 6%;
  right: 1%;
  padding: 2%;
  color:#aa767d;
  visibility: hidden;
}

#flowerS{
  width:20%;
  height:auto;
  left: 10%;
  bottom: 50%;
}

#flowerL{
  width: 25%;
  height:auto;
  left: 25%;
  bottom: 10%;
}

#petalA{
  width:8%;
  top:30%;
  left:65%
}

#petalB1{
  width:4%;
  top:10%;
  left:2%;
}

#petalD1{
  width:4%;
  top:2%;
  left:55%;
}

#petalC{
  width:6%;
  bottom:-8%;
  right:25%;
}

/* MainTwo */

#petalB2{
  width:6%;
  bottom:47%;
  left:10%;
}

#feathC1{
  width:10%;
  top:-5%;
  left: 28%;
}

#feathB1{
  width:10%;
  top:30%;
  left:60%;
}

#petalD2{
  width:7%;
  top:20%;
  left:40%;
}

#feathC{
  width:8%;
  right:10vw;
  z-index: 500;
  animation-name: featherFloat;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

#feathB2{
  width:16%;
  top:60%;
  left:2%;
}

.smallScreen{
  display: none;
}

#petalAsm{
  width:16%;
  top:80%;
  left:2%;
  animation-name: petalFloat;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

#feathC1sm{
  width:12%;
  top:110%;
  left:70%;
  animation-name: featherFloat;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

#flowerSsm{
  width:16%;
  top:40%;
  left:80%;
}

#feathB1sm{
  width:10%;
  top:90%;
  left:75%;
}

/*mainThr*/
#Ring{
  position:absolute;
  width:10%;
  right:10vw;
  bottom:15vh;
  animation-name: ringFloat;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  z-index: 99;
}

#feathCuff{
  position:absolute;
  width: 8%;
  left:30%;
  top: 6%;
}

#feathC2{
  width:10%;
  bottom: 20%;
  left: 55%;
}

/* mainFour */

#container{
  position: relative;
  width: 200%;
  height: 100%;
  margin-bottom: 100%;
  margin: 0;
  overflow: hidden;
  -moz-overflow:hidden;
  min-height: 0;
}

#object{
  position: absolute;
  width: 50%;
  height: 45vw;
  transform-origin: bottom left;
  bottom: -34vw;
  left: 46vw;
  max-width: 1000px;
  max-height: 450px;

}

.faceImages{
  position: absolute;
  height: 100%;
  right: 0px;
}

#faceLookUp{
}

#faceLookAt{
  display: none;
}

@keyframes ringFloat {
  0%{transform:rotate(0deg) translate(0,0);}
  50%{transform:rotate(-20deg) translate(100px,-100px); }
  100%{transform:rotate(0deg) translate(0,0);}
}

@keyframes featherFloat {
  0%{transform:rotate(0deg) translate(0,0);}
  50%{transform:rotate(10deg) translate(50px,50px); }
  100%{transform:rotate(0deg) translate(0,0);}
}

@keyframes petalFloat{
  0%{transform:rotate(0deg) translate(0,0);}
  50%{transform:rotate(10deg) translate(100px,100px); }
  100%{transform:rotate(0deg) translate(0,0);}
}


@keyframes locFloat {
  0%{transform:rotate(0deg) translate(0,0);}
  50%{transform:rotate(-10deg) translate(70px, -80px); }
  100%{transform:rotate(0deg) translate(0,0);}
}

@keyframes zoomOut {
  0%{transform:scale(2);}
  50%{transform:scale(1.25);}
  100%{transform:scale(1);}
}

@media only screen and (min-width: 1000px) {
    #object{
        left: 460px;
        bottom: -340px;
    }
}

@media only screen and (max-width: 760px){
  h1{
    font-size: 1.5em;
  }
  p{
    font-size: .8em;
  }

  .smallScreen{
    display: inherit;
  }

  #preload-mobile{
    display: inherit;
  }

  .point{
    height: 6px;
    width: 6px;
  }

  #sectionPt{
    transform: rotate(-90deg) translate(55px, -50px);
    top: 0;
    right: 0;
  }

  #ladybugLD{
    bottom: 42%;
  }

  #ladybugRD{
    bottom:27.5%;
  }
}