Template:BIT-China/css/nav-dot-style

.nav-dot-all {

 width: 200px;
 position: fixed;
 left: calc(92vw - 27px);
 top: 30vh;
 font-family: 'kg_second_chances_solidRg';
 z-index: 1;

 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;

}

.nav-dot-all ul li {

 margin-top: 20px;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 cursor: pointer;
 -webkit-transition: all .2s ease-out;
 transition: all .2s ease-out;
 list-style: none;
 -moz-transition: all .2s ease-out;
 -ms-transition: all .2s ease-out;
 -o-transition: all .2s ease-out;

}

.nav-dot-box {

 width: 10px;
 height: 10px;
 border: 2px solid #131313;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;

}

.nav-dot-box a {

 width: 250px;
 position: relative;
 right: 50px;

}

.nav-dot-box:hover {

 border: 2px solid #38769a;
 background: #38769a;

}

.nav-dot-box-color {

 border: 2px solid #38769a;
 background: #38769a;

}

.nav-dot-box .nav-dot-card {

 float: left;
 z-index: -1;
 display: block;

 position: relative;
 top: -12px;
 right: -100px;

 width: 250px;
 height: 30px;

 background: #f6f6f6;

 transition: all .3s ease-in-out .1s;
 -webkit-transition: all .3s ease-in-out .1s;
 -moz-transition: all .3s ease-in-out .1s;
 -ms-transition: all .3s ease-in-out .1s;
 -o-transition: all .3s ease-in-out .1s;

}

.nav-dot-box:hover .nav-dot-card {

 display: block;
 width: 250px;
 right: 30px;

 margin-right: 50px;

 transition: all .3s ease-in-out .1s;
 -webkit-transition: all .3s ease-in-out .1s;
 -moz-transition: all .3s ease-in-out .1s;
 -ms-transition: all .3s ease-in-out .1s;
 -o-transition: all .3s ease-in-out .1s;

}

.nav-dot-card-hover {

 float: left;
 z-index: -1;
 top: -12px;
 position: relative;
 background: #f6f6f6;
 display: block;
 width: 250px;
 right: 30px;
 height: 30px;
 margin-right: 50px;

 transition: all .3s ease-in-out .1s;
 -webkit-transition: all .3s ease-in-out .1s;
 -moz-transition: all .3s ease-in-out .1s;
 -ms-transition: all .3s ease-in-out .1s;
 -o-transition: all .3s ease-in-out .1s;

}

.nav-dot-card-content {

 position: relative;
 top: 2px;
 margin-left: 15px;
 color: #131313;
 font-size: 17px;

}

.nav-dot-selected {

 position: relative;
 top: 2px;
 margin-left: 15px;
 font-size: 17px;
 color: #38769a;

}