/**
 * 
 * SlidePanel.js
 * 
 * A simple, no-frills panel that slides in from the top, sides, or bottom.
 * 
 * stephen.hui@callawaygolf.com
 *
 * <div class="slide-panel">
 *    <div class="slide-panel-content slide-[up|down|left|right]">
 *      ...
 *    </div>
 * </div>
 */
.slide-panel {
	position: fixed;
	background-color: rgba(0,0,0,0);
	left: 0;
	right: 0;
	top: 100%;
	bottom: 0;
	display: none;
}
.slide-panel.open {
	top: 0;
	background-color: rgba(0,0,0,0.75);
	display:unset;
}
.slide-panel-content {
	position: fixed;
	background-color: #fff;
	overflow-y: auto;
}
.csstransitions .slide-panel {
	-webkit-transition: background-color 500ms, top 0ms 500ms;
	   -moz-transition: background-color 500ms, top 0ms 500ms;
	     -o-transition: background-color 500ms, top 0ms 500ms;
	        transition: background-color 500ms, top 0ms 500ms;
}
.csstransitions .slide-panel.open {
	-webkit-transition: background-color 500ms, top 0ms 0ms;
	   -moz-transition: background-color 500ms, top 0ms 0ms;
	     -o-transition: background-color 500ms, top 0ms 0ms;
	        transition: background-color 500ms, top 0ms 0ms;
}

.slide-panel-content.slide-down {
	top: -90%;
	left: 0;
	right: 0;
	bottom: auto;
	height: 90%;
}
.slide-panel.open .slide-panel-content.slide-down {
	top: 0 !important;
}
.csstransitions .slide-panel-content.slide-down {
	-webkit-transition: top 500ms;
	   -moz-transition: top 500ms;
	     -o-transition: top 500ms;
	        transition: top 500ms;
}

.slide-panel-content.slide-left {
	bottom: 0;
	left: auto;
	right: -90%;
	top: 0;
	width: 90%;
}
.slide-panel.open .slide-panel-content.slide-left {
	right: 0 !important;
}
.csstransitions .slide-panel-content.slide-left {
	-webkit-transition: right 500ms;
	   -moz-transition: right 500ms;
	     -o-transition: right 500ms;
	        transition: right 500ms;
}

.slide-panel-content.slide-up {
	bottom: -90%;
	left: 0;
	right: 0;
	top: auto;
	height: 90%;
}
.slide-panel.open .slide-panel-content.slide-up {
	bottom: 0 !important;
}
.csstransitions .slide-panel-content.slide-up {
	-webkit-transition: bottom 500ms;
	   -moz-transition: bottom 500ms;
	     -o-transition: bottom 500ms;
	        transition: bottom 500ms;
}

.slide-panel-content.slide-right {
	bottom: 0;
	left: -90%;
	right: 0;
	top: 0;
	width: 90%;
}
.slide-panel.open .slide-panel-content.slide-right {
	left: 0 !important;
}
.csstransitions .slide-panel-content.slide-right {
	-webkit-transition: left 500ms;
	   -moz-transition: left 500ms;
	     -o-transition: left 500ms;
	        transition: left 500ms;
}
