/*
Theme Name: Kalium - Child Theme
Theme URI: https://laborator.co/themes/kalium/
Author: Laborator
Author URI: https://laborator.co/
Description: Start creating that amazing website that you have always wanted, only with Kalium — Connect with Laborator on: <a href="https://themeforest.net/user/laborator">Envato</a> &bull; <a href="https://twitter.com/thelaborator">Twitter</a> &bull; <a href="https://www.facebook.com/laboratorcreative">Facebook</a> &bull; <a href="https://www.instagram.com/laboratorcreative/">Instagram</a>
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/

ul#discover-stages { list-style:none; display:flex; align-items:center; flex-direction:column; position:fixed; right:50px; z-index:99999; }
ul#discover-stages li { position:relative; font-size:16px; background:#FFF; border:1px solid #1f3b90; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; width:50px; height:50px; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; }
ul#discover-stages li.active { position:relative; width:70px; height:70px; background:#E30617; color:#FFF; font-size:21px; border-color:#E30617;}
ul#discover-stages li.active a { color:#FFF; }
ul#discover-stages span.stage-line { height:40px; width:1px; background:#1f3b90; margin:auto; }
ul#discover-stages li.active span.active-stage { visibility:visible; position:absolute; top:16px; right:95px; background: #FFF; color: #1f3b90; font-size: 17px; border-radius: 20px; -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.4); padding: 5px 15px; white-space: nowrap; width:auto; }
ul#discover-stages li:hover { transform:scale(1.1); cursor:pointer; }
ul#discover-stages li:hover span.stagename { visibility:visible; }
ul#discover-stages li.active:hover { transform:none; cursor:initial; }
ul#discover-stages .min-max { display:none; }
ul#discover-stages li a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
ul#discover-stages li span.stagename { position:absolute; top:12px; right:85px; visibility: hidden; width:200px; text-align:right; font-size:16px; }

@media screen and (max-width:990px){

    .discover-stages-mobile-wrapper .wpb_wrapper { max-height:0; }
    ul#discover-stages { display:flex; flex-direction:row; justify-content:space-between; margin:0 auto; left:0; width:100%; position: fixed; bottom: 0; background: #FFF; padding:25px 60px 20px 60px;  -webkit-box-shadow: 0px -2px 11px -1px rgba(0,0,0,0.3); -moz-box-shadow: 0px -2px 11px -1px rgba(0,0,0,0.3); box-shadow: 0px -2px 11px -1px rgba(0,0,0,0.3); z-index: 50; }
    ul#discover-stages:before { content:''; width:calc(100% - 120px); height: 1px; background: #002730; position: absolute; left: 0; right: 0; margin: auto; z-index:-1 }
    ul#discover-stages li { width:30px; height:30px; font-size:12px; }
    ul#discover-stages li.active { width:50px; height:50px; font-size:17px; }
    .active-stage { display:none; }
    .stages-title { width:100%; display:flex; align-items:center; justify-content:center; position:absolute; top:-16px; left:0; }
    .stages-title span { background: #FFF; padding: 5px 10px 0px 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 14px;  }
    .stages-title span:before { content:''; -webkit-box-shadow: 0px -5px 11px -1px rgba(0,0,0,0.3); -moz-box-shadow: 0px -5px 11px -1px rgba(0,0,0,0.3); box-shadow: 0px -5px 11px -1px rgba(0,0,0,0.3); width: 63px; height: 15px; position: absolute; top: 4px; z-index: -1; left: 0; right: 0; margin: auto; }
    ul#discover-stages .min-max { position: absolute; right: 5px; top: 5px; display:none; }
    .min-max span { width: 30px; height: 30px; display: block; text-align: center; line-height: 16px; border-radius: 100%; }
    .min-max.minified span { border: 1px solid #1f3b90; background:#FFF; }
    .min-max span i { font-size:26px; }
    footer.site-footer { position:relative; z-index:100; }
}