@charset "UTF-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

#snow-container {  
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 500ms;
  width: 100%;
    z-index: 9999999999999999;
}

.snow {
  animation: fall ease-in infinite, sway ease-in-out infinite;
  color: skyblue;
  position: absolute;
}

@keyframes fall {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 1;
  }
}

@keyframes sway {
  0% {
    margin-left: 0;
  }
  25% {
    margin-left: 50px;
  }
  50% {
    margin-left: -50px;
  }
  75% {
    margin-left: 50px;
  }
  100% {
    margin-left: 0;
  }
}



















html {
        background-color: black;
    }

.fade-in-back {
	opacity: 1;
	animation-name: fadeInOpacityBack;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacityBack {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

    
body {
  padding: 0;
  margin: 0;
    background-color: black;
}

.santaback {
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 130%;
    height: 100%;
    overflow: hidden;
    background-position: center;
    background-size: 120% 120%;
    background-repeat: no-repeat;
    z-index: 1;
    background-color: black;
}
    
.santa {
    margin: 0px;
    position: absolute;
    left: 20%;
    top: 10%;
    width: 60%;
    height: 60%;
    background-position: center;
    background-repeat: no-repeat;
        background-size: contain;
    z-index: 2;
        animation: mySanta 2s;
}
    
@keyframes mySanta {
  0%   {top: -60%;}
  50% {top: 30%;}
  100% {top: 10%;}
}

.santa2 {
    margin: 0px;
    position: absolute;
    left: 5%;
    bottom: 0px;
    width: 90%;
    height: 90%;
    background-position: center;
    background-repeat: no-repeat;
        background-size: contain;
    z-index: 2;
        animation: mySanta2 3.2s;
}


@keyframes mySanta2 {
  0%   {left: -120%;}
  50% {left: 10%;}
  100% {left: 5%;}
}

.santa3 {
    margin: 0px;
    position: absolute;
    left: 0%;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
        background-size: contain;
    z-index: 2;
        animation: mySanta3 3.2s;
}

@keyframes mySanta3 {
  0%   {opacity: 0;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}



.santa4 {
    margin: 0px;
    position: absolute;
    left: 20%;
    bottom: 20%;
    width: 60%;
    height: 60%;
    background-position: center bottom;
    background-repeat: no-repeat;
        background-size: contain;
    z-index: 2;
        animation: mySanta4 3.2s;
}


@keyframes mySanta4 {
  0%   {left: -120%;}
  50% {left: 30%;}
  100% {left: 20%;}
}



    
    .slogan {
    margin: 0px;
    position: absolute;
    left: 15%;
    bottom: 4%;
    width: 70%;
    height: auto;
    z-index: 4;
        text-align: center;
        animation: mySlogan 2s;
        animation-delay: 3s;
        opacity: 0;
        -webkit-animation-fill-mode: forwards;
    }
    
     @keyframes mySlogan {
  0%   {bottom: -40%; opacity: 0;}
  50% {bottom: 20%; opacity: 0.5;}
  100% {bottom: 4%; opacity: 1;}
         
    }
    @import url(https://db.onlinewebfonts.com/c/bbd240e1bd4f028574ea83bae258bd9f?family=PP+Woodland);
    
    .bigt {
        margin: 0px;
        position: relative;
        color: white;
        font-family: sans-serif;
        font-size: 90px;
        font-weight: bold;
         }
    
    .smallt {
        margin: 0px;
        position: relative;
        color: white;
        font-family: sans-serif;
        font-size: 20px;
    }
    
    .smallt a {
        margin: 0px;
        position: relative;
        margin-top: 10px;
        text-decoration:none;
        border-bottom:white dashed;
        color: white;
    }
    
    .logonavidad {
        margin: 0px;
        position: absolute;
        top: 4%;
        left: 2%;
        z-index: 3;
    }
    
    .logo {
        margin: 0px;
        position: absolute;
        top: 4%;
        right: 2%;
        z-index: 3;
    }

.menu {
    margin: 0px;
    position: absolute;
    top: 180px;
    right: 2%;
    z-index: 5;
    text-align: right;
}

.spacebr {
    margin: 0px;
    position: relative;
    width: 100%;
    height: 8px;
    clear: both;
}

.menu1 {
    animation: Menu1 1s;
}

.menu2 {
-webkit-animation:Menu2 1s;
-webkit-animation-delay:0.5s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
}

.menu3 {
-webkit-animation:Menu3 1s;
-webkit-animation-delay:1s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
}

.menu4 {
-webkit-animation:Menu4 1s;
-webkit-animation-delay:1.5s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
}

.menu5 {
-webkit-animation:Menu2 1s;
-webkit-animation-delay:2s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
}

@keyframes Menu1 {
  0%   {right: -300px;}
  50% {right: 10%; opacity: 0.5}
  100% {right: 2%; opacity: 1;}
}

@keyframes Menu2 {
  0%   {right: -300px;}
  50% {right: 10%; opacity: 0.5;}
  100% {right: 2%; opacity: 1;}
}

@keyframes Menu3 {
  0%   {right: -300px;}
  50% {right: 10%; opacity: 0.5;}
  100% {right: 2%; opacity: 1;}
}

@keyframes Menu4 {
  0%   {right: -300px;}
  50% {right: 10%; opacity: 0.5;}
  100% {right: 2%; opacity: 1;}
}

@keyframes Menu5 {
  0%   {right: -300px;}
  50% {right: 10%; opacity: 0.5;}
  100% {right: 2%; opacity: 1;}
}

.menu a {
    margin: 0px;
    position: relative;
    width: 100%;
    height: auto;
    clear: both;
    font-family: sans-serif;
    font-size: 14px;
    color: white;
    text-decoration: none;
}

.menu a:hover {
    text-decoration: white 2px dashed;
}
    
    .logonavidad img {
        margin: 0px;
        position: relative;
        width: 130px;
        height: auto;
    }
    
    .logo img {
        margin: 0px;
        position: relative;
        height: 90px;
        width: auto;
    }