.svg{
width:270px;
/* width:30%;*/
float:left;
margin:1% 3% 2% 1%;
}
body{
text-align:center;
font-family:"Avenir", sans-serif;
}
.container{
width:70%;
margin:0 auto;
padding-top:5%;
}
p{
text-align:justify;
line-height:1.9em;
font-size:1.2em;
font-weight:200;
}
h2{
font-size:0.9em;
}
#SceneThree, #SceneTwo, #SceneOne{
display:none;
}
/* show the first scene when window is > 1100px, others are displayed:none, svg size is set above */
@media screen and (min-width: 1100px) {
#SceneOne {
display:block;
}
}
/* show the second scene when window is < 1100 and hide the first, set svg size */
@media screen and (max-width: 1100px) {
#SceneTwo {
display:block;
}
#SceneOne{
display:none;
}
.svg{
width:205px;
}
}
/* show third scene when window is < 700px, hide second and the first scene, set new svg size */
@media screen and (max-width: 700px) {
#SceneThree {
display:block;
}
#SceneTwo, #SceneOne {
display:none;
}
.svg{
width:145px;
/*
if you want you can rearrange the smallest svg on top of the text with setting float to none:
float:none;
margin:3% 0 0 0;*/
}
}
/* animations */
@-webkit-keyframes aniSnow {
0% {
transform: translateY(-150px);
-webkit-transform: translateY(-150px);
}
100% {
transform: translateY(190px);
-webkit-transform: translateY(190px);
}
}
@-moz-keyframes aniSnow {
0% {
transform: translateY(-150px);
-webkit-transform: translateY(-150px);
}
100% {
transform: translateY(190px);
-webkit-transform: translateY(190px);
}
}
@-o-keyframes aniSnow {
0% {
transform: translateY(-150px);
-webkit-transform: translateY(-150px);
}
100% {
transform: translateY(190px);
-webkit-transform: translateY(190px);
}
}
@keyframes aniSnow {
0% {
transform: translateY(-150px);
-webkit-transform: translateY(-150px);
}
100% {
transform: translateY(190px);
-webkit-transform: translateY(190px);
}
}
.flake{
-webkit-animation:aniSnow 10s -1s linear infinite normal both;
-moz-animation:aniSnow 10s -1s linear infinite normal both;
animation:aniSnow 10s -1s linear infinite normal both;
-o-animation:aniSnow 10s -1s linear infinite normal both;
}
.flake2{
-webkit-animation:aniSnow 12s 1s linear infinite normal both;
-moz-animation:aniSnow 12s 1s linear infinite normal both;
-o-animation:aniSnow 12s 1s linear infinite normal both;
animation:aniSnow 12s 1s linear infinite normal both;
}
@-webkit-keyframes aniStar{
50%{
opacity:0;
}
}
@-moz-keyframes aniStar{
50%{
opacity:0;
}
}
@-o-keyframes aniStar{
50%{
opacity:0;
}
}
@keyframes aniStar{
50%{
opacity:0;
}
}
.star{
-webkit-animation:aniStar 3s -1s linear infinite normal both;
-moz-animation:aniStar 3s -1s linear infinite normal both;
-o-animation:aniStar 3s -1s linear infinite normal both;
animation:aniStar 3s -1s linear infinite normal both;
}
.star2{
-webkit-animation:aniStar 4s -1s linear infinite normal both;
-moz-animation:aniStar 4s -1s linear infinite normal both;
-o-animation:aniStar 4s -1s linear infinite normal both;
animation:aniStar 4s -1s linear infinite normal both;
}
.star3{
-webkit-animation:aniStar 3.5s -1s linear infinite normal both;
-moz-animation:aniStar 3.5s -1s linear infinite normal both;
-o-animation:aniStar 3.5s -1s linear infinite normal both;
animation:aniStar 3.5s -1s linear infinite normal both;
}