.dp-panel.from-top {position:fixed; top:0; left:0; z-index:100; height:100%; width:100%; visibility:hidden; -webkit-transition:visibility 0s 0.6s; -moz-transition:visibility 0s 0.6s; transition:visibility 0s 0.6s;}
.dp-panel.from-top::after {position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; cursor:pointer; -webkit-transition:background 0.3s 0.3s; -moz-transition:background 0.3s 0.3s; transition:background 0.3s 0.3s;}
.dp-panel.from-top.is-visible {visibility:visible; -webkit-transition:visibility 0s 0s; -moz-transition:visibility 0s 0s; transition:visibility 0s 0s;}
.dp-panel.from-top.is-visible::after {background:rgba(0, 0, 0, 0.6); -webkit-transition:background 0.3s 0s; -moz-transition:background 0.3s 0s; transition:background 0.3s 0s;}

.from-top .dp-panel-header {position:fixed; width:100%; background:rgba(255, 255, 255, 0.96); z-index:2; box-shadow:0 1px 1px rgba(0, 0, 0, 0.08); -webkit-transition:top 0.3s 0s; -moz-transition:top 0.3s 0s; transition:top 0.3s 0s;}
.from-top .dp-panel-header h1 {font-weight:bold; color:#89ba2c; text-align:center; margin:0; line-height:2em;}
.from-top .dp-panel-header {top:-200px;}
.from-top .dp-panel-header {right:0;}
.from-top.is-visible .dp-panel-header {top:0; -webkit-transition:top 0.3s 0.3s; -moz-transition:top 0.3s 0.3s; transition:top 0.3s 0.3s;}

.from-top .dp-panel-container {position:fixed; width:100%; height:100%; top:0; background:#fff; z-index:1; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; transition-property:transform; -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; transition-delay:0.3s;}
.from-top .dp-panel-container {right:0; -webkit-transform:translate3d(0, -100%, 0); -moz-transform:translate3d(0, -100%, 0); -ms-transform:translate3d(0, -100%, 0); -o-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0);}
.from-top.is-visible .dp-panel-container {-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); -webkit-transition-delay:0s; -moz-transition-delay:0s; transition-delay:0s;}

.from-top .dp-panel-content {position:absolute; top:0; left:0; width:100%; height:100%; padding:70px 0; overflow:auto; -webkit-overflow-scrolling:touch;}

.from-top .nav-icon {position:absolute; top:10px; right:20px; width:40px; cursor:pointer;}
.from-top .nav-icon:after, .from-top .nav-icon:before, .from-top .nav-icon div {background-color:#000; content:''; display:block; height:1px; margin:11px 0;}
.from-top .nav-icon:before {-moz-transform:translateY(12px) rotate(135deg); -webkit-transform:translateY(12px) rotate(135deg); transform:translateY(12px) rotate(135deg);}
.from-top .nav-icon:after {-moz-transform:translateY(-12px) rotate(-135deg); -webkit-transform:translateY(-12px) rotate(-135deg); transform:translateY(-12px) rotate(-135deg);}
.from-top .nav-icon div {-moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0);}