body, html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
body {
  background: #2b59a6;
}
#logo {
	position: absolute; 
	top: 20px; 
	left: 20px; 
	width: 400px; 
	height: auto;
	z-index: 300000;
}
.layer {
}
#mobile-layer {
	display: none;
}
#base-layer {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#layer-one {
    height: 100%;
    width: 100%;
    background: url(../imgs/snowman.png) center left no-repeat;
}
#layer-two {
    height: 100%;
    width: 100%;
    background: url(../imgs/snow.png) center left no-repeat;
}
#layer-three {
    height: 100%;
    width: 100%;
    background: url(../imgs/snow2.png) center left no-repeat;
}
.slider {
  top: 10%;
  width: 100%;
  height:auto;
  position: absolute;
}
.slider img {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 50%;
    height: auto;
    margin-left: -25%;
    margin-top: -20%;
    z-index: 10;
}
.slider img.button {
  width: 50%;
  margin-top: 5%;
}
.slider img.button2 {
  width: 50%;
  margin-top:15%;
}
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px)  {
	#base-layer {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#layer-one {
    height: 100%;
    width: 100%;
    background: url(../imgs/snowman.png) center left no-repeat;
}
#layer-two {
    height: 100%;
    width: 100%;
    background: url(../imgs/snow.png) center left no-repeat;
}
#layer-three {
    height: 100%;
    width: 100%;
    background: url(../imgs/snow2.png) center left no-repeat;
}
}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {

#logo {
  position: absolute; 
  top: 20px; 
  left: 20px; 
  width: 200px; 
  height: auto;
}

  
}

@media only screen 
and (min-width : 375px) 
and (max-width : 667px)
and (orientation : portrait) {
body, html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: inherit;
}
#logo {
	position: absolute; 
	top: 20px; 
	left: 20px; 
	width: 150px; 
	height: auto;
}
	#base-layer {
		display: none;
	}
	#mobile-layer {
		display: block;
		width: 100%;
		height: auto;
		margin-top:20%
	}
img.button {
  width: 100%;
  margin-top:0%;
}
 img.button2 {
  width: 100%;
  margin-top:5%;
}
	
}
@media only screen 
and (min-width : 375px) 
and (max-width : 667px)
and (orientation : landscape) {
body, html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: inherit;
}
#logo {
	position: absolute; 
	top: 20px; 
	left: 20px; 
	width: 150px; 
	height: auto;
}
	#base-layer {
		display: none;
	}
	#mobile-layer {
		display: block;
		width: 100%;
		height: auto;
		margin-top: 10%
	}

img.button {
  width: 50%;
  margin-top: 0%;
}
 img.button2 {
  width: 50%;
  margin-top:0%;
}
	
	}