<div id="loader"></div>
  <!-- Parallax Container -->
  <div id="container" class="parallax-container snow">
    <ul id="christmas_scene" class="christmas-scene" >
      <li class="layer" data-depth="0.80"><div class="layer-5 layer-photo photo-zoom"></div></li>
      <li class="layer" data-depth="0.60"><div class="layer-4 layer-photo photo-zoom"></div></li>
      <li class="layer" data-depth="0.40"><div class="layer-3 layer-photo photo-zoom"></div></li>
      <li class="layer" data-depth="0.20"><div class="layer-2 layer-photo photo-zoom"></div></li>
      <li class="layer" data-depth="0.00"><div class="layer-1 layer-photo"></div></li>
    </ul>
    <!-- Countdown Container -->
    <div id="countdown_container"></div>

    <!-- Merry Christmas Text -> You can replace with anything you like! -->
    <div class="merry-christmas-text">Merry Christmas</div>

    <!-- Happy new year 2017 photo -->
    <div class="happy-new-year"></div>

    <!-- Contact Pole Image -> From here the E-mail modal is triggered -->
    <div id="mail_pole">
      <img src="http://awesome-coding.com/theme/images/pole.png" class="img-responsive" alt="mail-pole" data-toggle="modal" data-target="#contact_modal">
    </div>
    <!-- Christmas Tree -->
    <img src="http://awesome-coding.com/theme/images/christmas-tree.png" alt="christmas-tree" id="christmas_tree"/>

    <!-- Social Media Icons Container -->
    <div class="icons-container">
      <a href="#" title="Facebook"><img src="http://awesome-coding.com/theme/images/icons/facebook.png" alt="facebook-social-icon"></a>
      <a href="#" title="Google Plus"><img src="http://awesome-coding.com/theme/images/icons/google.png" alt="google-plus-social-icon"></a>
      <a href="#" title="Twitter"><img src="http://awesome-coding.com/theme/images/icons/twitter.png" alt="twitter-social-icon"></a>
      <a href="#" title="Instagram"><img src="http://awesome-coding.com/theme/images/icons/instagram.png" alt="instagram-social-icon"></a>
      <a href="#" title="Linkedin"><img src="http://awesome-coding.com/theme/images/icons/linkedin.png" alt="linkedin-social-icon"></a>
      <a href="#" title="Pinterest"><img src="http://awesome-coding.com/theme/images/icons/pinterest.png" alt="pinterest-social-icon"></a>
    </div>
  </div>

  <!-- Send E-mail Modal -->
  <div class="modal fade" id="contact_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <div class="col-md-12 mail-container">
            <div class="col-md-12 padding-none bg-color">
              <div class="col-md-12 text-center">It's Christmas!</div>
              <div class="col-md-12 text-center">Don't be shy, Send us a message!</div>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <form class="col-md-12 padding-none">
                <div class="col-md-6 col-xs-12">
                  <div class="col-md-12 padding-none">
                    <input type="text" class="mail-first-name" id="form_first_name" placeholder="First Name" />
                  </div>
                  <div class="col-md-12 padding-none">
                    <input type="text" class="mail-last-name" id="form_last_name" placeholder="Last Name" />
                  </div>
                  <div class="col-md-12 padding-none">
                    <input type="text" class="mail-email" id="form_valid_email" placeholder="E-mail" />
                  </div>
                  <div class="col-md-12 padding-none">
                    <textarea class="mail-message" id="form_message" placeholder="Message"></textarea>
                  </div>
                </div>
                <div class="col-md-6 col-xs-12 text-right">
                  <img src="http://awesome-coding.com/theme/images/form-image.png" alt="form-pattern-image">
                  <button class="btn form-submit-button" type="submit" id="submit_form_btn">Send</button>
                </div>
              </form>
            </div>
          </div>
          <div class="col-md-12 padding-none mail-container hidden">
            <div class="col-md-12 padding-none bg-color thank-you-msg text-large" id="form_success_msg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

/* 1. GENERAL CLASSES */
body {
  padding: 0;
  margin: 0;
  font-family: 'Lobster', cursive;
  font-size:30px;
  color:#fff;
}
.padding-none{
  padding-left:0;
  padding-right:0;
}
.padding-half{
  padding-left:7px;
  padding-right:7px;
}
.text-small{
  font-size:20px;
}
.text-large{
  font-size:60px;
}
.left{
  float: left;
}
.right{
  float:right;
}
div[class*='col-']{
  position: relative;
}
form input{
  border-left:0;
  border-right: 0;
  border-top:0;
  border-bottom:2px solid #EF5241;
  border-bottom-left-radius:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  -moz-border-radius-bottomright:5px;
  -webkit-border-bottom-right-radius:5px;
  min-width:150px;
}
form textarea{
  border-left:0;
  border-right: 0;
  border-top:0;
  border-bottom:2px solid #EF5241;
  border-bottom-left-radius:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  -moz-border-radius-bottomright:5px;
  -webkit-border-bottom-right-radius:5px;
  min-width:350px;
}
form input::-webkit-input-placeholder, 
form textarea::-webkit-input-placeholder{
  color: #EF5241;
}
form input:-moz-placeholder, 
form textarea:-moz-placeholder {
  color: #EF5241;  
}
form input::-moz-placeholder, 
form textarea::-moz-placeholder {
  color: #EF5241;  
}
form input:-ms-input-placeholder, 
form textarea:-ms-input-placeholder {  
  color: #EF5241;  
}
/* END GENERAL CLASSES */

/* 2. LOADER */
#loader{
  background: -webkit-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: -o-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: -ms-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: -moz-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  position:fixed;
  overflow:hidden;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
#loader::after{
  content:'';
  background:url('http://awesome-coding.com/theme/images/intro.png');
  background-repeat: no-repeat;
  background-size:contain;
  width:70px;
  height: 70px;
  position: absolute;
  margin-left:-35px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: snowflake-rotate 2s linear infinite;
  -moz-animation:    snowflake-rotate 2s linear infinite;
  -o-animation:      snowflake-rotate 2s linear infinite;
  animation:         snowflake-rotate 2s linear infinite;
}
@-webkit-keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@-moz-keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@-o-keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
/* END LOADER */

/* 3. PARALLAX CONTAINER */
#container.parallax-container {
  position: relative;
  max-width: 2560px;
  margin: 0 auto;
  overflow: hidden;
  background: -webkit-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: -o-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: -ms-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: -moz-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
  background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
}
#container .christmas-scene{
  padding: 0;
  margin: 0;
}
#container .christmas-scene::before {
  content:'';
  background:url("http://awesome-coding.com/theme/images/top-snow-pattern.png");
  background-repeat: repeat-x;
  width: 100%;
  height:35px;
  position: absolute;
  z-index: 10;
  left:0;
  top:0;
}
/* END PARALLAX CONTAINER */

/* 4. PARALLAX PHOTOS */
#christmas_scene .layer{
  width: 100%;
}
#christmas_scene .layer-photo {
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 900px;
}
#christmas_scene .layer-photo.photo-zoom{
  transform: scale(1.05);
}
#christmas_scene .layer-1 {
  background-image: url("http://awesome-coding.com/theme/images/parallax/layer1.png");
  background-position: 40% bottom;
}
#christmas_scene .layer-2 {
  background-image: url("http://awesome-coding.com/theme/images/parallax/layer2.png");
  background-position: center bottom;
}
#christmas_scene .layer-3 {
  background-image: url("http://awesome-coding.com/theme/images/parallax/layer3.png");
  background-position: center bottom;
}
#christmas_scene .layer-4 {
  background-image: url("http://awesome-coding.com/theme/images/parallax/layer4.png");
  background-position: center bottom;
}
#christmas_scene .layer-5 {
  background-image: url("http://awesome-coding.com/theme/images/parallax/layer5.png");
  background-position: center bottom;
}
/* END PARALLAX PHOTOS */

/* 5. CHRISTMAS TREE */
#container #christmas_tree{
  position: absolute;
  bottom: 35px;
  left: 50%;
}
/* END CHRISTMAS TREE */

/* 6. E-MAIL POLE */
#container #mail_pole{
  position: absolute;
  margin-left:-250px;
  left:50%;
  bottom:50px;
  z-index: 10;
  cursor: pointer;
}
#container #mail_pole img{
  width: 100px;
}
/* END E-MAIL POLE */

/* 7. COUNTDOWN CONTAINER */
#container #countdown_container{
  width:600px;
  position: absolute;
  margin-left:-300px;
  left:50%;
  top:0;
  text-align: center;
  font-size:40px;
  color:#fff;
}
#container #countdown_container .countdown-globe{
  height: 200px;
  text-align: center;
  padding-top:65px;
  line-height: 1.3;
  z-index: 2;
}
#container #countdown_container .countdown-globe div{
  font-size:20px;
}
#container #countdown_container .countdown-globe::after{
  content:'';
  background: url('http://awesome-coding.com/theme/images/countdown-globe.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left:50%;
  margin-left:-55px;
  top:-40px;
  z-index: -1;
}
/* END COUNTDOWN CONTAINER */

/* 8. MERRY CHRISTMAS TEXT */
#container .merry-christmas-text{
  font-family: 'Parisienne', cursive;
  position: absolute;
  top: 150px;
  width: 100%;
  text-align: center;
  font-size:80px;
  color:#fff;
}
/* END MERRY CHRISTMAS TEXT */

/* 9. HAPPY NEW YEAR PHOTO */
#container .happy-new-year{
  background:url('http://awesome-coding.com/theme/images/happy-new-year.png');
  background-repeat: no-repeat;
  background-size:contain;
  width: 400px;
  height: 112px;
  position: absolute;
  margin-left:-200px;
  top: 265px;
  left: 50%;
}
/* END HAPPY NEW YEAR PHOTO */

/* 10. E-MAIL FORM */
#contact_modal .mail-container{
  width: 900px;
  position: relative;
  padding-bottom:0;
  z-index: 3;
}
#contact_modal .mail-container::after{
  content:'';
  position: absolute;
  left:0;
  right: 0;
  z-index: -1;
  background:url('http://awesome-coding.com/theme/images/form-message-pattern.png');
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height:380px;
}
#contact_modal .mail-container .form-submit-button{
  background:#EF5241;
  color:#fff;
  font-size:20px;
  padding:4px 25px 5px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  position: absolute;
  bottom:5px;
  width: 60%;
  right:45px;
}
#contact_modal .bg-color{
  background:#fffaee;
  color:#EF5241;
  height:350px;
  margin-top:15px;
  padding-top:10px;
  line-height: 1;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
#contact_modal .mail-container input{
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  background: #fffaee;
  font-size:16px;
  margin-top:25px;
  height:32px;
}
#contact_modal .mail-container textarea{
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  background: #fffaee;
  margin-top:20px;
  font-size:16px;
  min-height: 65px;
}
#contact_modal .mail-container img{
  padding-top:35px;
  padding-bottom:50px;
  width: 320px;
}
#contact_modal .modal-dialog{
  width: 900px;
}
#contact_modal .modal-body{
  padding:0;
}
#contact_modal .modal-content{
  display: table;
  height: 382px;
}
#contact_modal button.close{
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 50px;
}
#contact_modal .modal-content .thank-you-msg{
  text-align: center;
  padding-top:100px;
}
/* END E-MAIL FORM */

/* 11. SOCIAL ICONS */
.icons-container{
  width:260px;
  position: absolute;
  z-index: 10;
  right:100px;
  bottom:15px;
}
.icons-container img{ 
  width:36px;
}
/* END SOCIAL ICONS */



/* MEDIA QUERIES */
@media ( max-width: 1024px) {
  #christmas_scene .layer-1 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer1.png");
    background-position: 36% bottom;
  }
  #christmas_scene .layer-2 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer2.png");
    background-position: center bottom;
  }
  #christmas_scene .layer-3 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer3.png");
    background-position: center bottom;
  }
  #christmas_scene .layer-4 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer4.png");
    background-position: center bottom;
  }
  #christmas_scene .layer-5 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer5.png");
    background-position: center bottom;
  }
}

@media ( max-height: 768px ) {
  #christmas_scene .layer-1 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer1.png");
    background-position: 36% bottom;
  }
  #christmas_scene .layer-2 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer2.png");
    background-position: center bottom;
  }
  #christmas_scene .layer-3 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer3.png");
    background-position: center bottom;
  }
  #christmas_scene .layer-4 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer4.png");
    background-position: center bottom;
  }
  #christmas_scene .layer-5 {
    background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer5.png");
    background-position: center bottom;
  }
}

@media (max-width: 1024px) and (orientation:portrait){
  #container .happy-new-year{
    display: none;
  }
  #container #mail_pole{
    margin-left:-190px;
  }
}
@media (max-width: 995px){
  #contact_modal .modal-dialog, 
  #contact_modal .mail-container{
    width: 100%;
  }
  #contact_modal .modal-content{
    display: block;
    margin-right:20px;
    height:422px;
  }
  #contact_modal form{
    width: 420px;
    margin:0 auto;
  }
  #contact_modal .mail-container img{
    display: none;
  }
  #contact_modal .mail-container .form-submit-button{
    position: relative;
    right: 50%;
    width: 100px;
    margin-right: -50px;
    margin-top: 15px;
    bottom:0;
  }
  #contact_modal .mail-container::after{
    top:-15px;
    height:420px;
  }
  #contact_modal .mail-container .bg-color{
    height:392px;
    font-size:20px;
  }
  #container .icons-container{
    bottom:5px;
  }
}
@media (max-width:565px) and (orientation: portrait){
  #container #countdown_container{
    width: 100%;
    margin-left:0;
    left:unset;
    font-size:30px;
    text-align: center;
  }
  #container #countdown_container .countdown-globe::after{
    display: none;
  }
  #container #countdown_container .countdown-globe{
    padding-top:45px;
    padding-left:0;
    padding-right:0;
  }
  #container .merry-christmas-text{
    top:100px;
    font-size:55px;
  }
  #container .happy-new-year{
    top:180px;
    width: 300px;
    margin-left:-150px;
  }
  #container #christmas_tree{
    bottom:55px;
  }
  #container .icons-container {
    right:50%;
    margin-right:-130px;
  }
  form textarea{
    min-width: unset;
  }
}

@media (max-width: 420px) and (orientation:portrait){
  #contact_modal form{
    width: 100%;
  }
  #container #countdown_container .countdown-globe{
    padding-top:30px;
  }
  #container .merry-christmas-text{
    font-size:40px;
  }
  #container #mail_pole {
    margin-left: -160px;
  }
  #container .happy-new-year{
    display: none;
  }
}
@media (max-height:768px) and (orientation:landscape){
  #container #countdown_container{
    font-size:30px;
  }
  #container #countdown_container .countdown-globe{
    height:180px;
    padding-top:55px;
  }
  #container #countdown_container .countdown-globe::after{
    margin-left:-50px;
  }
  #container .merry-christmas-text{
    top:130px;
    font-size:65px;
  }
  #container .happy-new-year{
    width: 300px;
    top:225px;
    margin-left:-150px;
  }
}
@media(max-height: 600px) and (orientation:landscape){
  #container #countdown_container{
    font-size:20px;
  }
  #container #countdown_container .countdown-globe{
    height:165px;
    padding-top:55px;
  }
  #container #countdown_container .countdown-globe::after{
    margin-left:-46px;
  }
  #container .merry-christmas-text{
    top:115px;
    font-size:55px;
  }
  #container .happy-new-year{
    width: 200px;
    top: 195px;
    margin-left: -100px;
  }
}
@media (max-height:400px) and (orientation:landscape){
  #container #countdown_container{
    width: 300px;
    margin-left:0;
    left:unset;
    font-size:30px;
    text-align: center;
  }
  #container #countdown_container .countdown-globe::after{
    display: none;
  }
  #container #countdown_container .countdown-globe{
    padding-top:25px;
    padding-left:0;
    padding-right:0;
  }
  #container #christmas_tree{
    bottom:10px;
  }
  #container #mail_pole{
    bottom:10px;
  }
  #container .icons-container{
    width: 220px;
    right:10px;
  }
  #container .icons-container img {
    width: 30px;
  }
  #container .merry-christmas-text{
    font-size: 35px;
    padding-right: 10px;
    text-align: right;
    top: 25px;
  }
  #container .happy-new-year{
    display: none;
    top:25%;
    width: 300px;
    margin-left:-150px;
  }
}
/* END MEDIA QUERIES */

// snow fall
(function () {

// SnowVolume will change the density of the snowflakes
var SnowVolume = 800;
var elem = document.querySelector('.snow');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = elem.clientWidth;
var height = elem.clientHeight;
var i = 0;
var active = false;

function onResize() {
  width = elem.clientWidth;
  height = elem.clientHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = '#FFF';

  var wasActive = active;
  active = width > 700;

  if (!wasActive && active)
    requestAnimFrame(update);
}

var Snowflake = function () {
  this.x = 0;
  this.y = 0;
  this.vy = 0;
  this.vx = 0;
  this.r = 0;

  this.reset();
}

Snowflake.prototype.reset = function() {
  this.x = Math.random() * width;
  this.y = Math.random() * -height;
  this.vy = 1 + Math.random() * 3;
  this.vx = 0.5 - Math.random();
  this.r = 1 + Math.random() * 2;
  this.o = 0.5 + Math.random() * 0.5;
}

canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';

var snowflakes = [], snowflake;
for (i = 0; i < SnowVolume; i++) {
  snowflake = new Snowflake();
  snowflake.reset();
  snowflakes.push(snowflake);
}

function update() {

  ctx.clearRect(0, 0, width, height);

  if (!active)
    return;

  for (i = 0; i < SnowVolume; i++) {
    snowflake = snowflakes[i];
    snowflake.y += snowflake.vy;
    snowflake.x += snowflake.vx;

    ctx.globalAlpha = snowflake.o;
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();

    if (snowflake.y > height) {
      snowflake.reset();
    }
  }

  requestAnimFrame(update);
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame    ||
  function( callback ){
    window.setTimeout(callback, 5000 / 60);
  };
})();

onResize();
window.addEventListener('resize', onResize, false);

elem.appendChild(canvas);
})();




$(window).on('load', function(){
  Main.init();
  Main.setParallaxHeight(); 
  $('#loader').fadeOut();
});
$(window).on('resize', function(){
  Main.setParallaxHeight();
  Main.setElementsHeight();
});
var Main = (function($){
  return {
    //inits
    init: function(){
      Main.events();
      Main.setElementsHeight();
      Main.setParallaxHeight();
      Main.countdownInit();
    },
    //events
    events: function(){
      $(document).on('click','#submit_form_btn',function(e){
        e.preventDefault();
        var v     = true,
        firstName   = $("#form_first_name").val()
        lastName  = $("#form_last_name").val()
        email     = $("#form_valid_email").val()
        message   = $("#form_message").val();
        if(firstName == ''){
          v = false;
          $("#form_first_name").attr('style','border:1px solid #FF0000');
        }
        if(lastName == ''){
          v = false;
          $("#form_last_name").attr('style','border:1px solid #FF0000');
        }
        if(Main.isEmail(email) === false){
          v = false;
          $("#form_valid_email").attr('style','border:1px solid #FF0000');
        }
        if(message == ''){
          v = false;
          $("#form_message").attr('style','border:1px solid #FF0000');
        }

        if(v){
          Main.sendEmail(firstName, lastName, email, message);
        }
      });
    },
    //functions
    setParallaxHeight: function(){
      var height = $(window).height();
      $('#christmas_scene .layer-photo').css('height', height);
    },
    sendEmail:function(firstName, lastName, email, message){
      $.ajax({
        url: 'sendmail.php',
        type: 'post',
        data: { "firstName": firstName, "lastName": lastName, "email": email, "message":message },
        success: function(response){
          $(".mail-container").addClass('hidden');
          $("#form_success_msg").parent().removeClass('hidden');
          $("#form_success_msg").html(response);
        },
        error: function( jqXhr, textStatus, errorThrown ){
          console.log( errorThrown );
        }
      });
    },
    isEmail: function(email) {
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      return regex.test(email);
    },
    setElementsHeight: function(){
      var height = $(window).height();

      if( height <= 400){
        var width = $(window).height() / 2;
      }else if( height <= 500 ){
        var width = $(window).height() / 3.5;
      }else if( height <= 700 ){
        var width = $(window).height() / 3;
      }else if( height <= 800 )
      var width = $(window).height() / 2.8;
      else{
        var width = $(window).height() / 2.5;
      }
      $('#christmas_tree').css({ 'width' : width,
        'margin-left' : -(width/2)
      });
      $('#mail_pole').css('margin-left', -(width/1.2));
      $('#mail_pole img').css('width', width/3);
    },
    countdownInit: function(){
      $('#countdown_container').countdown('2019/12/25', function(event) {
        $(this).html(event.strftime('<div class="col-md-3 col-xs-3 countdown-globe">%D<div class="col-md-12 padding-none">Days</div></div>\
          <div class="col-md-3 col-xs-3 countdown-globe">%H<div class="col-md-12 padding-none">Hours</div></div>\
          <div class="col-md-3 col-xs-3 countdown-globe">%M<div class="col-md-12 padding-none">Minutes</div></div>\
          <div class="col-md-3 col-xs-3 countdown-globe">%S<div class="col-md-12 padding-none">Seconds</div></div>'));
      });
    }
  }
})($);




/**
 * jQuery || Zepto Parallax Plugin
 * @author Matthew Wagerfield - @wagerfield
 * @description Creates a parallax effect between an array of layers,
 *              driving the motion from the gyroscope output of a smartdevice.
 *              If no gyroscope is available, the cursor position is used.
 */
 ;(function($, window, document, undefined) {

// Strict Mode
'use strict';

// Constants
var NAME = 'parallax';
var MAGIC_NUMBER = 30;
var DEFAULTS = {
  relativeInput: false,
  clipRelativeInput: false,
  calibrationThreshold: 100,
  calibrationDelay: 500,
  supportDelay: 500,
  calibrateX: false,
  calibrateY: true,
  invertX: true,
  invertY: true,
  limitX: false,
  limitY: false,
  scalarX: 10.0,
  scalarY: 10.0,
  frictionX: 0.1,
  frictionY: 0.1,
  originX: 0.5,
  originY: 0.5
};

function Plugin(element, options) {

// DOM Context
this.element = element;

// Selections
this.$context = $(element).data('api', this);
this.$layers = this.$context.find('.layer');

// Data Extraction
var data = {
  calibrateX: this.$context.data('calibrate-x') || null,
  calibrateY: this.$context.data('calibrate-y') || null,
  invertX: this.$context.data('invert-x') || null,
  invertY: this.$context.data('invert-y') || null,
  limitX: parseFloat(this.$context.data('limit-x')) || null,
  limitY: parseFloat(this.$context.data('limit-y')) || null,
  scalarX: parseFloat(this.$context.data('scalar-x')) || null,
  scalarY: parseFloat(this.$context.data('scalar-y')) || null,
  frictionX: parseFloat(this.$context.data('friction-x')) || null,
  frictionY: parseFloat(this.$context.data('friction-y')) || null,
  originX: parseFloat(this.$context.data('origin-x')) || null,
  originY: parseFloat(this.$context.data('origin-y')) || null
};

// Delete Null Data Values
for (var key in data) {
  if (data[key] === null) delete data[key];
}

// Compose Settings Object
$.extend(this, DEFAULTS, options, data);

// States
this.calibrationTimer = null;
this.calibrationFlag = true;
this.enabled = false;
this.depths = [];
this.raf = null;

// Element Bounds
this.bounds = null;
this.ex = 0;
this.ey = 0;
this.ew = 0;
this.eh = 0;

// Element Center
this.ecx = 0;
this.ecy = 0;

// Element Range
this.erx = 0;
this.ery = 0;

// Calibration
this.cx = 0;
this.cy = 0;

// Input
this.ix = 0;
this.iy = 0;

// Motion
this.mx = 0;
this.my = 0;

// Velocity
this.vx = 0;
this.vy = 0;

// Callbacks
this.onMouseMove = this.onMouseMove.bind(this);    
this.onScrollMove = this.onScrollMove.bind(this);
this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
this.onOrientationTimer = this.onOrientationTimer.bind(this);
this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
this.onAnimationFrame = this.onAnimationFrame.bind(this);
this.onWindowResize = this.onWindowResize.bind(this);

// Initialise
this.initialise();
}

Plugin.prototype.transformSupport = function(value) {
  var element = document.createElement('div');
  var propertySupport = false;
  var propertyValue = null;
  var featureSupport = false;
  var cssProperty = null;
  var jsProperty = null;
  for (var i = 0, l = this.vendors.length; i < l; i++) {
    if (this.vendors[i] !== null) {
      cssProperty = this.vendors[i][0] + 'transform';
      jsProperty = this.vendors[i][1] + 'Transform';
    } else {
      cssProperty = 'transform';
      jsProperty = 'transform';
    }
    if (element.style[jsProperty] !== undefined) {
      propertySupport = true;
      break;
    }
  }
  switch(value) {
    case '2D':
    featureSupport = propertySupport;
    break;
    case '3D':
    if (propertySupport) {
      var body = document.body || document.createElement('body');
      var documentElement = document.documentElement;
      var documentOverflow = documentElement.style.overflow;
      if (!document.body) {
        documentElement.style.overflow = 'hidden';
        documentElement.appendChild(body);
        body.style.overflow = 'hidden';
        body.style.background = '';
      }
      body.appendChild(element);
      element.style[jsProperty] = 'translate3d(1px,1px,1px)';
      propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
      featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
      documentElement.style.overflow = documentOverflow;
      body.removeChild(element);
    }
    break;
  }
  return featureSupport;
};

Plugin.prototype.ww = null;
Plugin.prototype.wh = null;
Plugin.prototype.wcx = null;
Plugin.prototype.wcy = null;
Plugin.prototype.wrx = null;
Plugin.prototype.wry = null;
Plugin.prototype.portrait = null;
Plugin.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
Plugin.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
Plugin.prototype.motionSupport = !!window.DeviceMotionEvent;
Plugin.prototype.orientationSupport = !!window.DeviceOrientationEvent;
Plugin.prototype.orientationStatus = 0;
Plugin.prototype.transform2DSupport = Plugin.prototype.transformSupport('2D');
Plugin.prototype.transform3DSupport = Plugin.prototype.transformSupport('3D');
Plugin.prototype.propertyCache = {};

Plugin.prototype.initialise = function() {

// Configure Styles
if (this.$context.css('position') === 'static') {
  this.$context.css({
    position:'relative'
  });
}

// Hardware Accelerate Context
this.accelerate(this.$context);

// Setup
this.updateLayers();
this.updateDimensions();
this.enable();
this.queueCalibration(this.calibrationDelay);
};

Plugin.prototype.updateLayers = function() {

// Cache Layer Elements
this.$layers = this.$context.find('.layer');
this.depths = [];

// Configure Layer Styles
this.$layers.css({
  position:'absolute',
  display:'block',
  left: 0,
  top: 0
});
this.$layers.first().css({
  position:'relative'
});

// Hardware Accelerate Layers
this.accelerate(this.$layers);

// Cache Depths
this.$layers.each($.proxy(function(index, element) {
  this.depths.push($(element).data('depth') || 0);
}, this));
};

Plugin.prototype.updateDimensions = function() {
  this.ww = window.innerWidth;
  this.wh = window.innerHeight;
  this.wcx = this.ww * this.originX;
  this.wcy = this.wh * this.originY;
  this.wrx = Math.max(this.wcx, this.ww - this.wcx);
  this.wry = Math.max(this.wcy, this.wh - this.wcy);
};

Plugin.prototype.updateBounds = function() {
  this.bounds = this.element.getBoundingClientRect();
  this.ex = this.bounds.left;
  this.ey = this.bounds.top;
  this.ew = this.bounds.width;
  this.eh = this.bounds.height;
  this.ecx = this.ew * this.originX;
  this.ecy = this.eh * this.originY;
  this.erx = Math.max(this.ecx, this.ew - this.ecx);
  this.ery = Math.max(this.ecy, this.eh - this.ecy);
};

Plugin.prototype.queueCalibration = function(delay) {
  clearTimeout(this.calibrationTimer);
  this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay);
};

Plugin.prototype.enable = function() {
  if (!this.enabled) {
    this.enabled = true;
    if (this.orientationSupport) {
      this.portrait = null;
      window.addEventListener('deviceorientation', this.onDeviceOrientation);
      setTimeout(this.onOrientationTimer, this.supportDelay);
    } else {
      this.cx = 0;
      this.cy = 0;
      this.portrait = false;
      window.addEventListener('mousemove', this.onMouseMove);
//window.addEventListener('scroll', this.onScrollMove);
}
window.addEventListener('resize', this.onWindowResize);
this.raf = requestAnimationFrame(this.onAnimationFrame);
}
};

Plugin.prototype.disable = function() {
  if (this.enabled) {
    this.enabled = false;
    if (this.orientationSupport) {
      window.removeEventListener('deviceorientation', this.onDeviceOrientation);
    } else {
      window.removeEventListener('mousemove', this.onMouseMove);
//window.addEventListener('scroll', this.onScrollMove);
}
window.removeEventListener('resize', this.onWindowResize);
cancelAnimationFrame(this.raf);
}
};

Plugin.prototype.calibrate = function(x, y) {
  this.calibrateX = x === undefined ? this.calibrateX : x;
  this.calibrateY = y === undefined ? this.calibrateY : y;
};

Plugin.prototype.invert = function(x, y) {
  this.invertX = x === undefined ? this.invertX : x;
  this.invertY = y === undefined ? this.invertY : y;
};

Plugin.prototype.friction = function(x, y) {
  this.frictionX = x === undefined ? this.frictionX : x;
  this.frictionY = y === undefined ? this.frictionY : y;
};

Plugin.prototype.scalar = function(x, y) {
  this.scalarX = x === undefined ? this.scalarX : x;
  this.scalarY = y === undefined ? this.scalarY : y;
};

Plugin.prototype.limit = function(x, y) {
  this.limitX = x === undefined ? this.limitX : x;
  this.limitY = y === undefined ? this.limitY : y;
};

Plugin.prototype.origin = function(x, y) {
  this.originX = x === undefined ? this.originX : x;
  this.originY = y === undefined ? this.originY : y;
};

Plugin.prototype.clamp = function(value, min, max) {
  value = Math.max(value, min);
  value = Math.min(value, max);
  return value;
};

Plugin.prototype.css = function(element, property, value) {
  var jsProperty = this.propertyCache[property];
  if (!jsProperty) {
    for (var i = 0, l = this.vendors.length; i < l; i++) {
      if (this.vendors[i] !== null) {
        jsProperty = $.camelCase(this.vendors[i][1] + '-' + property);
      } else {
        jsProperty = property;
      }
      if (element.style[jsProperty] !== undefined) {
        this.propertyCache[property] = jsProperty;
        break;
      }
    }
  }
  element.style[jsProperty] = value;
};

Plugin.prototype.accelerate = function($element) {
  for (var i = 0, l = $element.length; i < l; i++) {
    var element = $element[i];
    this.css(element, 'transform', 'translate3d(0,0,0)');
    this.css(element, 'transform-style', 'preserve-3d');
    this.css(element, 'backface-visibility', 'hidden');
  }
};

Plugin.prototype.setPosition = function(element, x, y) {
  x += 'px';
  y += 'px';
  if (this.transform3DSupport) {
    this.css(element, 'transform', 'translate3d('+x+','+y+',0)');
  } else if (this.transform2DSupport) {
    this.css(element, 'transform', 'translate('+x+','+y+')');
  } else {
    element.style.left = x;
    element.style.top = y;
  }
};

Plugin.prototype.onOrientationTimer = function(event) {
  if (this.orientationSupport && this.orientationStatus === 0) {
    this.disable();
    this.orientationSupport = false;
    this.enable();
  }
};

Plugin.prototype.onCalibrationTimer = function(event) {
  this.calibrationFlag = true;
};

Plugin.prototype.onWindowResize = function(event) {
  this.updateDimensions();
};

Plugin.prototype.onAnimationFrame = function() {
  this.updateBounds();
  var dx = this.ix - this.cx;
  var dy = this.iy - this.cy;
  if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) {
    this.queueCalibration(0);
  }
  if (this.portrait) {
    this.mx = this.calibrateX ? dy : this.iy;
    this.my = this.calibrateY ? dx : this.ix;
  } else {
    this.mx = this.calibrateX ? dx : this.ix;
    this.my = this.calibrateY ? dy : this.iy;
  }
  this.mx *= this.ew * (this.scalarX / 100);
  this.my *= this.eh * (this.scalarY / 100);
  if (!isNaN(parseFloat(this.limitX))) {
    this.mx = this.clamp(this.mx, -this.limitX, this.limitX);
  }
  if (!isNaN(parseFloat(this.limitY))) {
    this.my = this.clamp(this.my, -this.limitY, this.limitY);
  }
  this.vx += (this.mx - this.vx) * this.frictionX;
  this.vy += (this.my - this.vy) * this.frictionY;
  for (var i = 0, l = this.$layers.length; i < l; i++) {
    var depth = this.depths[i];
    var layer = this.$layers[i];
    var xOffset = this.vx * depth * (this.invertX ? -1 : 1);
    var yOffset = this.vy * depth * (this.invertY ? -1 : 1);
    this.setPosition(layer, xOffset, yOffset);
  }
  this.raf = requestAnimationFrame(this.onAnimationFrame);
};

Plugin.prototype.onDeviceOrientation = function(event) {

// Validate environment and event properties.
if (!this.desktop && event.beta !== null && event.gamma !== null) {

// Set orientation status.
this.orientationStatus = 1;

// Extract Rotation
var x = (event.beta  || 0) / MAGIC_NUMBER; //  -90 :: 90
var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180

// Detect Orientation Change
var portrait = window.innerHeight > window.innerWidth;
if (this.portrait !== portrait) {
  this.portrait = portrait;
  this.calibrationFlag = true;
}

// Set Calibration
if (this.calibrationFlag) {
  this.calibrationFlag = false;
  this.cx = x;
  this.cy = y;
}

// Set Input
this.ix = x;
this.iy = y;
}
};

Plugin.prototype.onMouseMove = function(event) {

// Cache mouse coordinates.
var clientX = event.clientX;
var clientY = event.clientY;

// Calculate Mouse Input
if (!this.orientationSupport && this.relativeInput) {

// Clip mouse coordinates inside element bounds.
if (this.clipRelativeInput) {
  clientX = Math.max(clientX, this.ex);
  clientX = Math.min(clientX, this.ex + this.ew);
  clientY = Math.max(clientY, this.ey);
  clientY = Math.min(clientY, this.ey + this.eh);
}

// Calculate input relative to the element.
this.ix = (clientX - this.ex - this.ecx) / this.erx;
this.iy = (clientY - this.ey - this.ecy) / this.ery;

} else {

// Calculate input relative to the window.
this.ix = (clientX - this.wcx) / this.wrx;
this.iy = (clientY - this.wcy) / this.wry;
}
};
// AICI
Plugin.prototype.onScrollMove = function(event) {
//topDistance = this.pageYOffset;
// Cache mouse coordinates.
var clientX = 1;
var clientY = - pageYOffset * 5;

console.log(clientX);
// Calculate Mouse Input
if (!this.orientationSupport && this.relativeInput) {

// Clip mouse coordinates inside element bounds.
if (this.clipRelativeInput) {
  clientX = Math.max(clientX, this.ex);
  clientX = Math.min(clientX, this.ex + this.ew);
  clientY = Math.max(clientY, this.ey);
  clientY = Math.min(clientY, this.ey + this.eh);
}

// Calculate input relative to the element.
this.ix = (clientX - this.ex - this.ecx) / this.erx;
this.iy = (clientY - this.ey - this.ecy) / this.ery;

} else {

  console.log(this.ix);
// Calculate input relative to the window.
this.ix = (clientX - this.wcx) / this.wrx;
this.iy = (clientY - this.wcy) / this.wry;
}
};

var API = {
  enable: Plugin.prototype.enable,
  disable: Plugin.prototype.disable,
  updateLayers: Plugin.prototype.updateLayers,
  calibrate: Plugin.prototype.calibrate,
  friction: Plugin.prototype.friction,
  invert: Plugin.prototype.invert,
  scalar: Plugin.prototype.scalar,
  limit: Plugin.prototype.limit,
  origin: Plugin.prototype.origin
};

$.fn[NAME] = function (value) {
  var args = arguments;
  return this.each(function () {
    var $this = $(this);
    var plugin = $this.data(NAME);
    if (!plugin) {
      plugin = new Plugin(this, value);
      $this.data(NAME, plugin);
    }
    if (API[value]) {
      plugin[value].apply(plugin, Array.prototype.slice.call(args, 1));
    }
  });
};

})(window.jQuery || window.Zepto, window, document);

/**
* Request Animation Frame Polyfill.
* @author Tino Zijdel
* @author Paul Irish
* @see https://gist.github.com/paulirish/1579671
*/
;(function() {

  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];

  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }

}());



// Parallax Init
$('#christmas_scene').parallax({
  scalarX: 5,
  scalarY: 15,
  invertY: false
});