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

/***************** Ladder App Mobile********************/
/*-----------------for mobile screens------------------*/
.splash_app{
	position: relative;
	background: #ddd;
}
.splash_app, .splash_app_element{
	display: block;
	width:100%;
	margin:0 auto 50px;
	overflow: hidden;
	height: calc(100vh - 35px);
	max-height: 575px;
}
.splash_app_element{
	top: 0px;
	height: 450px;
}

.splash_app_element, ul.app-buttons{
	position: absolute;
	left: 0;
}

.splash_app_element#stairs{
	display: none;
	background:url(../images/photos/stairs-stone-bkgd.jpg) no-repeat bottom center;
	background-size:720px 450px;
}
.splash_app_element#roof{
	display: none;
	background:url(../images/photos/rooftop-bkgd.jpg) no-repeat bottom center;
	background-size:720px 450px;
}
.splash_app_element#rocks{
	display: none;
	background:url(../images/photos/rocks-pole-bkgd.jpg) no-repeat bottom center;
	background-size:720px 450px;
}
.splash_app_element#curb{
	background:url(../images/photos/utility-pole-bkgd.jpg) no-repeat bottom center;
	background-size:720px 450px;
}

ul.app-buttons, ul.arrow-buttons{
	list-style: none;
	text-align: center;
}
ul.app-buttons{
	position: absolute;
	bottom: 0;
	margin: 0 auto 22px;
	width: 100%;
	background: #ddd;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
ul.arrow-buttons{
	position: absolute;
	display: block;
	top: 240px;
	left: calc(50% + 79px);
	margin: 0;
}

ul.app-buttons li, ul.arrow-buttons li{
	height: 50px;
	width: 50px;
	cursor: pointer;
}
ul.app-buttons li{
	display: inline-block;
	margin: 15px 12px 10px;
}
ul.arrow-buttons li{
	margin:15px;
}
ul.app-buttons li#stairs-btn, ul.app-buttons li#roof-btn, ul.app-buttons li#rocks-btn, ul.app-buttons li#curb-btn, ul.arrow-buttons li#up-btn, ul.arrow-buttons li#down-btn{
	transition: .1s all ease;
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
	position: relative;
	left:0px;
	top:0px;
}

ul.app-buttons li#stairs-btn{
	background: url(../images/graphics/stairs-app-button.png) no-repeat center center;
	background-size: contain;
}
ul.app-buttons li#roof-btn{
	background: url(../images/graphics/roof-app-button.png) no-repeat center center;
	background-size: contain;
}
ul.app-buttons li#rocks-btn{
	background: url(../images/graphics/rocks-app-button.png) no-repeat center center;
	background-size: contain;
}
ul.app-buttons li#curb-btn{
	background: url(../images/graphics/curb-app-button.png) no-repeat center center;
	background-size: contain;
}
ul.arrow-buttons li#try-it{
	background: url(../images/graphics/try-it.png) no-repeat center center;
	background-size: contain;
}
ul.arrow-buttons li#up-btn{
	background: url(../images/graphics/up-arrow-button.png) no-repeat center center;
	background-size: contain;
}
ul.arrow-buttons li#down-btn{
	background: url(../images/graphics/down-arrow-button.png) no-repeat center center;
	background-size: contain;
}


ul.app-buttons li#stairs-btn:hover, ul.app-buttons li#roof-btn:hover, ul.app-buttons li#rocks-btn:hover, ul.app-buttons li#curb-btn:hover, ul.arrow-buttons li#up-btn:hover, ul.arrow-buttons li#down-btn:hover, ul.app-buttons li#stairs-btn.selected, ul.app-buttons li#roof-btn.selected, ul.app-buttons li#rocks-btn.selected, ul.app-buttons li#curb-btn.selected{
	transition: .1s all ease;
	position: relative;
	left:2px;
	top:2px;
	box-shadow: 0 0 4px #00aeef;
	border:2px solid #00aeef;
}
ul.app-buttons li#stairs-btn:hover, ul.app-buttons li#stairs-btn.selected{
	background: url(../images/graphics/stairs-app-button-down.png) no-repeat;
	background-size: contain;
}
ul.app-buttons li#roof-btn:hover, ul.app-buttons li#roof-btn.selected{
	background: url(../images/graphics/roof-app-button-down.png) no-repeat;
	background-size: contain;
}
ul.app-buttons li#rocks-btn:hover, ul.app-buttons li#rocks-btn.selected{
	background: url(../images/graphics/rocks-app-button-down.png) no-repeat;
	background-size: contain;
}
ul.app-buttons li#curb-btn:hover, ul.app-buttons li#curb-btn.selected{
	background: url(../images/graphics/curb-app-button-down.png) no-repeat;
	background-size: contain;
}
ul.arrow-buttons li#up-btn:hover{
	background: url(../images/graphics/up-arrow-button-down.png) no-repeat;
	background-size: contain;
}
ul.arrow-buttons li#down-btn:hover{
	background: url(../images/graphics/down-arrow-button-down.png) no-repeat;
	background-size: contain;
}




.ladder_container{
	position:absolute;
	display: block;
	width: 600px;
	margin:0 auto;
	bottom: 100px;
	left: calc(50% - 300px);
	overflow: hidden;
}
.ladder_container#ladder_stairs{
	height: 800px;
}
.ladder_container#ladder_roof{
	height: 800px;
}
.ladder_container#ladder_rocks{
	height: 800px;
}
.ladder_container#ladder_curb{
	height: 800px;
}

.ladder_container{
	position:absolute;
	display: block;
	width: 300px;
	margin:0 auto;
	bottom: 50px;
	left: calc(50% - 150px);
	overflow: hidden;
}
.ladder_container#ladder_stairs{
	height: 400px;
}
.ladder_container#ladder_roof{
	height: 400px;
}
.ladder_container#ladder_rocks{
	height: 400px;
}
.ladder_container#ladder_curb{
	height: 400px;
}

.ladder_container#ladder_stairs div, .ladder_container#ladder_roof div, .ladder_container#ladder_rocks div, .ladder_container#ladder_curb div{
	display: block;
	position: absolute;
	left: 0;
	width: 300px;
	height: 400px;
}
.ladder_container#ladder_stairs div{
	bottom:37px;
}
.ladder_container#ladder_roof div{
	bottom:0px;
}
.ladder_container#ladder_rocks div{
	bottom:19px;
}
.ladder_container#ladder_curb div{
	bottom:39px;
}



.ladder_container #ladder{
	background-size: 283px 377px !important;
}
.ladder_container #left_leveler{
	background-size: 283px 377px !important;
}
.ladder_container #right_leveler{
	background-size: 283px 377px !important;
}


/* Stairs */
.ladder_container#ladder_stairs #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom 36px;
	transition: background 1s linear;
}
.ladder_container#ladder_stairs #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom 36px;
	transition: background 1s linear;
}
.ladder_container#ladder_stairs #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom 36px;
	transition: background .5s linear;
	transition-delay: .5s;
}

.ladder_container#ladder_stairs:hover #ladder, .down#ladder_stairs #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom -10px;
	transition: background 1s ease;
}
.ladder_container#ladder_stairs:hover #left_leveler, .down#ladder_stairs #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom -25px;
	transition: background 1s ease;
}
.ladder_container#ladder_stairs:hover #right_leveler, .down#ladder_stairs #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom 10px;
	transition: background .5s ease;
}


/* Roof */
.ladder_container#ladder_roof #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom 90px;
	transition: background 1s linear;
}
.ladder_container#ladder_roof #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom 90px;
	transition: background .5s linear;
	transition-delay: .5s;
}
.ladder_container#ladder_roof #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom 90px;
	transition: background 1s linear;
}

.ladder_container#ladder_roof:hover #ladder, .down#ladder_roof #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom 23px;
	transition: background 1s ease;
}
.ladder_container#ladder_roof:hover #left_leveler, .down#ladder_roof #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom 65px;
	transition: background .5s ease;
}
.ladder_container#ladder_roof:hover #right_leveler, .down#ladder_roof #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom -22px;
	transition: background 1s ease;
}


/* Rocks */
.ladder_container#ladder_rocks #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom 50px;
	transition: background .75s linear;
}
.ladder_container#ladder_rocks #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom 50px;
	transition: background .5s linear;
	transition-delay: .25s;
}
.ladder_container#ladder_rocks #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom 50px;
	transition: background .75s linear;
}

.ladder_container#ladder_rocks:hover #ladder, .down#ladder_rocks #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom 5px;
	transition: background .75s ease;
}
.ladder_container#ladder_rocks:hover #left_leveler, .down#ladder_rocks #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom 0px;
	transition: background .5s ease;
}
.ladder_container#ladder_rocks:hover #right_leveler, .down#ladder_rocks #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom -12px;
	transition: background .75s ease;
}


/* Curb */
.ladder_container#ladder_curb #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom 80px;
	transition: background 1s linear;
}
.ladder_container#ladder_curb #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom 80px;
	transition: background 1s linear;
}
.ladder_container#ladder_curb #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom 80px;
	transition: background .75s linear;
	transition-delay: .25s;
}

.ladder_container#ladder_curb:hover #ladder, .down#ladder_curb #ladder{
	background: url(../images/graphics/ladder-graphic.png) no-repeat center bottom 15px;
	transition: background 1s ease;
}
.ladder_container#ladder_curb:hover #left_leveler, .down#ladder_curb #left_leveler{
	background: url(../images/graphics/ladder-graphic-left-leveler.png) no-repeat center bottom 5px;
	transition: background 1s ease;
}
.ladder_container#ladder_curb:hover #right_leveler, .down#ladder_curb #right_leveler{
	background: url(../images/graphics/ladder-graphic-right-leveler.png) no-repeat center bottom 25px;
	transition: background .75s ease;
}




/***************** Ladder Hover App ********************/
/*----------------for desktop screens------------------*/
@media screen and (min-width: 768px){
	.splash_app{
		background:white;
	}
	
.splash_app, .splash_app_element{
	height:calc(100vh - 40px);
	min-height: 705px;
	max-height: 900px;
	max-width: 1440px;
}
ul.app-buttons{
	top:0;
	margin: 20px;
	border: 0;
}
.splash_app_element{
	background-size:100%;
	top: 0;
}
ul.app-buttons{
	display: block;
	position: static;
	margin:50px;
}
	
.splash_app_element#stairs{
	background-size:auto;
}
.splash_app_element#roof{
	background-size:auto;
}
.splash_app_element#rocks{
	background-size:auto;
}
.splash_app_element#curb{
	background-size:auto;
}

ul.arrow-buttons{
	margin: 50px 50px 0;
	left: calc(50% + 175px);
	top: 0;
	width: auto;
}
ul.app-buttons li, ul.arrow-buttons li{
	display: block;
	height: 100px;
	width: 100px;
	margin: 20px;
}
	
ul.app-buttons li#stairs-btn:hover, ul.app-buttons li#roof-btn:hover, ul.app-buttons li#rocks-btn:hover, ul.app-buttons li#curb-btn:hover, ul.arrow-buttons li#up-btn:hover, ul.arrow-buttons li#down-btn:hover, ul.app-buttons li#stairs-btn.selected, ul.app-buttons li#roof-btn.selected, ul.app-buttons li#rocks-btn.selected, ul.app-buttons li#curb-btn.selected{
	box-shadow: none;
	border:2px solid #fff;
}

	
.ladder_container{
	width: 600px;
	bottom: 100px;
	left: calc(50% - 300px);
}
.ladder_container#ladder_stairs{
	height: 800px;
}
.ladder_container#ladder_roof{
	height: 800px;
}
.ladder_container#ladder_rocks{
	height: 800px;
}
.ladder_container#ladder_curb{
	height: 800px;
}

.ladder_container#ladder_stairs div, .ladder_container#ladder_roof div, .ladder_container#ladder_rocks div, .ladder_container#ladder_curb div{
	width: 600px;
	height: 800px;
}
.ladder_container#ladder_stairs div{
	bottom:74px;
}
.ladder_container#ladder_roof div{
	bottom:0px;
}
.ladder_container#ladder_rocks div{
	bottom:37px;
}
.ladder_container#ladder_curb div{
	bottom:78px;
}

	
.ladder_container #ladder{
	background-size: 100% !important;
}
.ladder_container #left_leveler{
	background-size: 100% !important;
}
.ladder_container #right_leveler{
	background-size: 100% !important;
}
	
/* Stairs */
.ladder_container#ladder_stairs #ladder, .ladder_container#ladder_stairs #left_leveler, .ladder_container#ladder_stairs #right_leveler{
	background-position: center bottom 72px;
}

.ladder_container#ladder_stairs:hover #ladder, .down#ladder_stairs #ladder{
	background-position: center bottom -21px;
}
.ladder_container#ladder_stairs:hover #left_leveler, .down#ladder_stairs #left_leveler{
	background-position: center bottom -51px;
}
.ladder_container#ladder_stairs:hover #right_leveler, .down#ladder_stairs #right_leveler{
	background-position: center bottom 21px;
}


/* Roof */
.ladder_container#ladder_roof #ladder, .ladder_container#ladder_roof #left_leveler, .ladder_container#ladder_roof #right_leveler{
	background-position: center bottom 180px;
}

.ladder_container#ladder_roof:hover #ladder, .down#ladder_roof #ladder{
	background-position: center bottom 45px;
}
.ladder_container#ladder_roof:hover #left_leveler, .down#ladder_roof #left_leveler{
	background-position: center bottom 130px;
}
.ladder_container#ladder_roof:hover #right_leveler, .down#ladder_roof #right_leveler{
	background-position: center bottom -45px;
}


/* Rocks */
.ladder_container#ladder_rocks #ladder, .ladder_container#ladder_rocks #left_leveler, .ladder_container#ladder_rocks #right_leveler{
	background-position: center bottom 50px;
}

.ladder_container#ladder_rocks:hover #ladder, .down#ladder_rocks #ladder{
	background-position: center bottom -5px;
}
.ladder_container#ladder_rocks:hover #left_leveler, .down#ladder_rocks #left_leveler{
	background-position: center bottom 0px;
}
.ladder_container#ladder_rocks:hover #right_leveler, .down#ladder_rocks #right_leveler{
	background-position: center bottom -24px;
}


/* Curb */
.ladder_container#ladder_curb #ladder, .ladder_container#ladder_curb #left_leveler, .ladder_container#ladder_curb #right_leveler{
	background-position: center bottom 120px;
}

.ladder_container#ladder_curb:hover #ladder, .down#ladder_curb #ladder{
	background-position: center bottom 30px;
}
.ladder_container#ladder_curb:hover #left_leveler, .down#ladder_curb #left_leveler{
	background-position: center bottom 10px;
}
.ladder_container#ladder_curb:hover #right_leveler, .down#ladder_curb #right_leveler{
	background-position: center bottom 50px;
}
	

}