body {
  overflow-x: hidden;
  overflow-y: hidden;
  background: #def;
}

.page {
  width: 960px;
  position: absolute;
  
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.page .centerdiv {
  text-align: center;
}

.trees {
  text-align: center;
}

.trees img{
  width: 45px;
}

.xmasText {
  font-size: 38px;
  font-family: 'Great Vibes', cursive;  
  color: #0065a8;
  text-align: center;
  
  padding: 40px 0px 10px 0px;
}

.flake {
  position: absolute;
}

svg#centerflake {
  fill: none;
  width: 500px;
  height: 500px;
  stroke: #0065a8;
  stroke-width: 0.7;
}

svg#vslashr {
    width: 100px;
}
svg#vslashr path{
    fill: #16898a;
}

#anim1, #v, #slash, #r {
    visibility: hidden;
}

#star {
  visibility: hidden;
}

#logo {
  text-align: center;
  visibility: hidden;
}

#centerflakeobject {
  visibility: hidden;
}

#UIform {
  text-align: center;
  visibility: hidden;
}

#snowslider, #treeslider {
  width: 400px;
}

#snowvalue, #treevalue, #play {
  font-family: "Great Vibes", sans-serif;  
  color: #0065a8;
  font-size: 30px;
}

.tableclean {
    display: table;
    margin-left:auto; 
    margin-right:auto;
    border-spacing: 20px;
}

.tableclean tr, .tableclean td {
    text-align: center;
}


/*-------------------------------------
 Media queries for responsive text 
--------------------------------------*/

@media (min-width: 768px) and (max-width: 991px){

    .page{
      width:768px;
    }

    svg#centerflake {
      width: 400px;
      height: 400px;
    }

    svg#vslashr{
      width: 80px;
    }

    .trees img{
      width: 40px;
    }

    .xmasText {
      font-size: 28px;  
      padding: 30px 0px 8px 0px;
    }

}

@media (max-width: 767px) {

    .page{
      width:320px;
    }

    svg#centerflake {
      width: 300px;
      height: 300px;
    }

    svg#vslashr{
      width: 60px;
    }

    .trees img{
      width: 30px;
    }

    .xmasText {
      font-size: 20px;  
      padding: 20px 0px 5px 0px;
    }

    .flake img{
      width: 18px;
    }

    #snowslider, #treeslider {
      width: 150px;
    }

    #snowvalue, #treevalue, #play{
      font-size: 20px;
    }

    #UIform img{
      width: 320px;
    }

    #UIform .tableclean img{
      width: 30px;
    }
}