/* Background scenery */

html {
  height: 100vh;
  background: #283044 url('/img/advent/background.png') repeat-x;
  background-position: 1% 500px;  
}

h1 {
	color: white;
	text-align: center;
}

/* Holiday Card */
h2.from-line {
  height:100px;
  margin-top:0px;
  margin-bottom:0px;
  font-size:13px;
  padding-bottom:0px;
/*text-transform:Uppercase;*/
}

h3 {
	color: lightslategray;
	font-size: 1.3em;
	text-align: center;
}

/* Container for scaling browser sizes */
.container {
  position: relative;
  float:left;
  max-width: 100vh;
  max-height: 50%;
  overflow: hidden;
  &:before {
    content: "";
    display: block;
    margin-top: 100vh;
  }
}

#boy {
		position:absolute;
  	z-index:-1;
		left:45px;
		top:905px;
	}
	#arm {
		position:absolute;
		z-index:-2;
		left:0px;
		top:1020px;
animation:wave 4s infinite;
-webkit-animation:wave 4s infinite;
}

#pup {
		position:absolute;
		z-index:1;
		left:294px;
		top:1078px;
	}
	#tail{
		position:absolute;
		z-index:-1;
		left:305px;
		top:1095px;
  animation:wag 2s infinite;
-webkit-animation:wag 2s infinite;
/*animation:wag 4s infinite;
webkit-animation:wag 4s infinite;}*/
}


/*Hand Animation*/
@-webkit-keyframes wave{
	0%  {-webkit-transform:rotate(-5deg)}
	50% {-webkit-transform:rotate(15deg)}
	100%{-webkit-transform:rotate(-5deg)}
}
@keyframes wave{
	0%  {transform:rotate(-5deg);-ms-transform:rotate(-5deg)}
	50% {transform:rotate(15deg);-ms-transform:rotate(15deg)}
	100%{transform:rotate(-5deg);-ms-transform:rotate(-5deg)}
}

/*wag Animation*/
@-webkit-keyframes wag{
	0%  {-webkit-transform:rotate(0deg)}
	50% {-webkit-transform:rotate(15deg)}
	100%{-webkit-transform:rotate(0deg)}
}
@keyframes wag{
	0%  {transform:rotate(0deg);-ms-transform:rotate(0deg)}
	50% {transform:rotate(15deg);-ms-transform:rotate(15deg)}
	100%{transform:rotate(0deg);-ms-transform:rotate(0deg)}
}
/* Inside Popup */

/* Advent Doors */
main {
    text-align: center;
 padding:20px 10px 10px 20px;
  
  }

  .door,
  .present {
    width: 100%;
    height: 100%;
  }

  .day {
    display: inline-block;
    width: 9em;
    height: 9em;
    margin: 5px;
    -webkit-perspective: 850px;
            perspective: 850px;
    z-index:1;
  }

  .door {
    position: relative;
    background: #92d050;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform-origin: 0;
            transform-origin: 0;
    -webkit-perspective: 850px;
            perspective: 850px;
    text-align: center;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index:2000;
  }
  .door h2 {
    position: absolute;
    width: 3em;
    height: 3em;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.5em;
    font-size: 2em;
    line-height: 3em;
    color: white;
    border-radius: 50%;
  }

  .day:hover .door,
  .day:focus .door,
  .day:active .door {
    background: #92d050;
    -webkit-transform: rotateY(-97deg);
            transform: rotateY(-97deg);
    -webkit-perspective-origin: 0;
            perspective-origin: 0;
    -webkit-transition: all .4s ease-in;
    transition: all .4s ease-in;
  }
  .day:hover .door h2,
  .day:focus .door h2,
  .day:active .door h2 {

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .day:hover .bauble,
  .day:focus .bauble,
  .day:active .bauble {
    display: inline-block;
    -webkit-animation: shake 1s;
            animation: shake 1s;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }

.present {
  background:#fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.1);
}

  .bauble {
    margin-top:20px;
    position: relative;
    width: 100px;
    height: 110px;
  }


  @keyframes shake {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    20% {
      -webkit-transform: rotate(-20deg);
              transform: rotate(-20deg);
    }
    40% {
      -webkit-transform: rotate(20deg);
              transform: rotate(20deg);
    }
    60% {
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg);
    }
    80% {
      -webkit-transform: rotate(10deg);
              transform: rotate(10deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    20% {
      -webkit-transform: rotate(-20deg);
              transform: rotate(-20deg);
    }
    40% {
      -webkit-transform: rotate(20deg);
              transform: rotate(20deg);
    }
    60% {
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg);
    }
    80% {
      -webkit-transform: rotate(10deg);
              transform: rotate(10deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
  }

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}
@media only screen and (max-width: 830px) {
    /* styles for wide screens */
    #boy,#pup,#pup2,#arm,#tail{
	z-index:-1;
  }
}

@media only screen and (max-width: 580px) {
  html{
    background-position:bottom 100%;
/*    margin-top:220vh;*/
  }
  #boy,#pup,#pup2,#arm,#tail{z-index:-1;
  }
    #container{
      position:relative;
    height:auto;
  }
  .demo-holder{width:70%;
  margin:0px auto;}
}

/*Lightbox */
.lightbox {
  background-color: fade(black, 80%);  
  overflow: scroll;
  position: fixed;
  display: none;
  z-index: 1;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index:2;
  &-container {
    position: relative;
    max-width: 960px;
    margin: 7% auto;
    display: block;    
    padding: 0 3%;
    height: auto;
    z-index: 10;
    
    // Increasing top margin for mobile
    @media screen and (max-width: 768px) { margin-top: 10%; }
    @media screen and (max-width: 414px) { margin-top: 13%; }
  }
}