Difference between revisions of "Template:BIT-China/css/nav-dot-style"

 
Line 1: Line 1:
−
.img-com-style {
+
.nav-dot-all {
−
  position: relative;
+
   width: 200px;
−
  z-index: 1;
+
   position: fixed;
−
   width: 400px;
+
   left: calc(92vw - 27px);
−
  height: 300px;
+
   top: 30vh;
−
}
+
−
 
+
−
.img-com-style img {
+
−
   position: absolute;
+
−
   width: 100%;
+
−
  height: 100%;
+
−
}
+
−
 
+
−
.img-com-1-style {
+
−
  opacity: 1;
+
−
   transition: all .4s ease-out;
+
−
  -webkit-transition: all .4s ease-out;
+
−
  -moz-transition: all .4s ease-out;
+
−
  -ms-transition: all .4s ease-out;
+
−
  -o-transition: all .4s ease-out;
+
−
}
+
−
 
+
−
.img-com-2-style {
+
−
  opacity: 0;
+
−
  transition: all .4s ease-out;
+
−
  -webkit-transition: all .4s ease-out;
+
−
  -moz-transition: all .4s ease-out;
+
−
  -ms-transition: all .4s ease-out;
+
−
  -o-transition: all .4s ease-out;
+
−
}
+
−
 
+
−
.img-com-style:hover .img-com-1-style {
+
−
  opacity: 0;
+
−
  transition: all .6s ease-out;
+
−
  -moz-transition: all .6s ease-out;
+
−
  -ms-transition: all .6s ease-out;
+
−
  -o-transition: all .6s ease-out;
+
−
  -webkit-transition: all .6s ease-out;
+
−
}
+
−
 
+
−
.img-com-style:hover .img-com-2-style {
+
−
  opacity: 1;
+
−
  transition: all .6s ease-out;
+
−
  -webkit-transition: all .6s ease-out;
+
−
  -moz-transition: all .6s ease-out;
+
−
  -ms-transition: all .6s ease-out;
+
−
  -o-transition: all .6s ease-out;
+
−
}
+
−
 
+
−
.name-com-style {
+
 
   font-family: 'kg_second_chances_solidRg';
 
   font-family: 'kg_second_chances_solidRg';
−
  margin: 0;
 
−
  text-decoration: none;
 
−
  text-align: right;
 
−
  letter-spacing: 4px;
 
−
}
 
−
 
−
.self-intro-com-style {
 
−
  font-family: 'helveticaregular' !important;
 
−
  font-size: 12px !important;
 
−
  margin: 0;
 
−
  color: #131313 !important;
 
−
  text-decoration: none !important;
 
−
  text-align: left;
 
−
  line-height: 24px !important;
 
−
  width: 350px;
 
−
 
−
  word-wrap: break-word;
 
−
  word-break: keep-all;
 
−
  text-align: justify;
 
−
  text-justify: inter-ideograph;
 
−
}
 
−
 
−
#img-1 {
 
−
  position: absolute;
 
−
  left: 60vw;
 
−
  top: 27vh;
 
−
}
 
−
 
−
#text-1-name {
 
−
  position: absolute;
 
 
   z-index: 1;
 
   z-index: 1;
−
  left: calc(60vw - 320px);
 
−
  top: calc(27vh + 20px);
 
−
}
 
  
−
#text-1-selfIntro {
+
  display: -webkit-box;
−
   position: absolute;
+
   display: -moz-box;
−
   z-index: 1;
+
   display: -ms-flexbox;
−
   left: calc(60vw - 450px);
+
   display: -webkit-flex;
−
   top: calc(27vh + 100px);
+
   display: flex;
−
}
+
  
−
#img-2-1 {
+
  -webkit-box-align: center;
−
   position: absolute;
+
   -webkit-align-items: center;
−
   left: calc(60vw - 450px);
+
   -ms-flex-align: center;
−
   top: 27vh;
+
  align-items: center;
 +
   -webkit-box-pack: center;
 +
  -webkit-justify-content: center;
 +
  -ms-flex-pack: center;
 +
  justify-content: center;
 
}
 
}
  
−
#text-2-1-name {
+
.nav-dot-all ul li {
−
   position: absolute;
+
   margin-top: 20px;
−
   z-index: 1;
+
   display: -webkit-box;
−
   left: calc(35vw + 300px);
+
  display: -moz-box;
−
   top: calc(25vh + 20px);
+
   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;
 
}
 
}
  
−
#text-2-1-selfIntro {
+
.nav-dot-box {
−
   position: absolute;
+
   width: 10px;
−
   z-index: 1;
+
   height: 10px;
−
   left: calc(35vw + 350px);
+
  border: 2px solid #131313;
−
   top: calc(25vh + 70px);
+
  border-radius: 50%;
 +
   -webkit-border-radius: 50%;
 +
   -moz-border-radius: 50%;
 +
  -ms-border-radius: 50%;
 +
  -o-border-radius: 50%;
 
}
 
}
  
−
#img-2-2 {
+
.nav-dot-box a {
−
   position: absolute;
+
   width: 250px;
−
   left: 160vw;
+
   position: relative;
−
   top: 25vh;
+
   right: 50px;
 
}
 
}
  
−
#text-2-2-name {
+
.nav-dot-box:hover {
−
   position: absolute;
+
   border: 2px solid #38769a;
−
   z-index: 1;
+
   background: #38769a;
−
  left: calc(160vw - 240px);
+
−
  top: calc(25vh + 20px);
+
 
}
 
}
  
−
#text-2-2-selfIntro {
+
.nav-dot-box-color {
−
   position: absolute;
+
   border: 2px solid #38769a;
−
   z-index: 1;
+
   background: #38769a;
−
  left: calc(160vw - 450px);
+
−
  top: calc(25vh + 60px);
+
 
}
 
}
  
−
#img-2-3 {
+
.nav-dot-box .nav-dot-card {
−
   position: absolute;
+
   float: left;
−
   left: calc(260vw - 450px);
+
   z-index: -1;
−
   top: 25vh;
+
   display: block;
−
}
+
  
−
#text-2-3-name {
+
   position: relative;
−
   position: absolute;
+
   top: -12px;
−
   z-index: 1;
+
   right: -100px;
−
   left: calc(235vw + 300px);
+
−
  top: 25vh;
+
−
}
+
  
−
#text-2-3-selfIntro {
+
   width: 250px;
−
   position: absolute;
+
   height: 30px;
−
   z-index: 1;
+
−
  left: calc(235vw + 350px);
+
−
  top: calc(25vh + 40px);
+
−
}
+
  
−
#img-2-4 {
+
   background: #f6f6f6;
−
   position: absolute;
+
−
  left: 360vw;
+
−
  top: 25vh;
+
−
}
+
  
−
#text-2-4-name {
+
  transition: all .3s ease-in-out .1s;
−
   position: absolute;
+
   -webkit-transition: all .3s ease-in-out .1s;
−
   z-index: 1;
+
   -moz-transition: all .3s ease-in-out .1s;
−
   left: calc(360vw - 240px);
+
   -ms-transition: all .3s ease-in-out .1s;
−
   top: calc(25vh + 20px);
+
   -o-transition: all .3s ease-in-out .1s;
 
}
 
}
  
−
#text-2-4-selfIntro {
+
.nav-dot-box:hover .nav-dot-card {
−
   position: absolute;
+
   display: block;
−
   z-index: 1;
+
   width: 250px;
−
   left: calc(360vw - 450px);
+
   right: 30px;
−
  top: calc(25vh + 60px);
+
−
}
+
  
−
#img-3-1 {
+
  margin-right: 50px;
−
  position: absolute;
+
−
  left: 60vw;
+
−
  top: 25vh;
+
−
}
+
  
−
#text-3-1-name {
+
  transition: all .3s ease-in-out .1s;
−
   position: absolute;
+
   -webkit-transition: all .3s ease-in-out .1s;
−
   z-index: 1;
+
   -moz-transition: all .3s ease-in-out .1s;
−
   left: calc(60vw - 150px);
+
   -ms-transition: all .3s ease-in-out .1s;
−
   top: calc(25vh + 20px);
+
   -o-transition: all .3s ease-in-out .1s;
 
}
 
}
  
−
#text-3-1-selfIntro {
+
.nav-dot-card-hover {
−
   position: absolute;
+
   float: left;
−
   z-index: 1;
+
   z-index: -1;
−
   left: calc(60vw - 450px);
+
   top: -12px;
−
   top: calc(25vh + 60px);
+
   position: relative;
−
}
+
  background: #f6f6f6;
 +
  display: block;
 +
  width: 250px;
 +
  right: 30px;
 +
  height: 30px;
 +
  margin-right: 50px;
  
−
#img-3-2 {
+
  transition: all .3s ease-in-out .1s;
−
   position: absolute;
+
   -webkit-transition: all .3s ease-in-out .1s;
−
   left: calc(160vw - 450px);
+
   -moz-transition: all .3s ease-in-out .1s;
−
   top: 25vh;
+
   -ms-transition: all .3s ease-in-out .1s;
 +
  -o-transition: all .3s ease-in-out .1s;
 
}
 
}
  
−
#text-3-2-name {
+
.nav-dot-card-content {
−
   position: absolute;
+
   position: relative;
−
   z-index: 1;
+
   top: 2px;
−
   left: calc(135vw + 300px);
+
   margin-left: 15px;
−
   top: calc(25vh + 20px);
+
   color: #131313;
 +
  font-size: 17px;
 
}
 
}
  
−
#text-3-2-selfIntro {
+
.nav-dot-selected {
−
   position: absolute;
+
   position: relative;
−
  z-index: 1;
+
   top: 2px;
−
  left: calc(135vw + 350px);
+
   margin-left: 15px;
−
   top: calc(25vh + 70px);
+
   font-size: 17px;
−
}
+
   color: #38769a;
−
 
+
−
#img-3-3 {
+
−
   position: absolute;
+
−
  left: 260vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-3-3-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(260vw - 180px);
+
−
   top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-3-3-selfIntro {
+
−
  position: absolute;
+
−
   z-index: 1;
+
−
  left: calc(260vw - 450px);
+
−
  top: calc(25vh + 60px);
+
−
}
+
−
 
+
−
#img-3-4 {
+
−
  position: absolute;
+
−
  left: calc(360vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-3-4-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(335vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-3-4-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(335vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-3-5 {
+
−
  position: absolute;
+
−
  left: 460vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-3-5-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(460vw - 270px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-3-5-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(460vw - 450px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-3-6 {
+
−
  position: absolute;
+
−
  left: calc(560vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-3-6-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(535vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-3-6-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(535vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-4-1 {
+
−
  position: absolute;
+
−
  left: calc(60vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-4-1-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(35vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-4-1-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(35vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-4-2 {
+
−
  position: absolute;
+
−
  left: 160vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-4-2-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(160vw - 270px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-4-2-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(160vw - 450px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-4-3 {
+
−
  position: absolute;
+
−
  left: calc(260vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-4-3-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(235vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-4-3-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(235vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-4-4 {
+
−
  position: absolute;
+
−
  left: 360vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-4-4-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(360vw - 270px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-4-4-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(360vw - 450px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-4-5 {
+
−
  position: absolute;
+
−
  left: calc(460vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-4-5-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(435vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-4-5-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(435vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-5-1 {
+
−
  position: absolute;
+
−
  left: 60vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-5-1-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(60vw - 150px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-5-1-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(60vw - 450px);
+
−
  top: calc(25vh + 60px);
+
−
}
+
−
 
+
−
#img-5-2 {
+
−
  position: absolute;
+
−
  left: calc(160vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-5-2-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(135vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-5-2-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(135vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-5-3 {
+
−
  position: absolute;
+
−
  left: 260vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-5-3-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(260vw - 270px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-5-3-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(260vw - 450px);
+
−
  top: calc(25vh + 60px);
+
−
}
+
−
 
+
−
#img-5-4 {
+
−
  position: absolute;
+
−
  left: calc(360vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-5-4-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(335vw + 300px);
+
−
  top: calc(25vh + 10px);
+
−
}
+
−
 
+
−
#text-5-4-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(335vw + 350px);
+
−
  top: calc(25vh + 60px);
+
−
}
+
−
 
+
−
#img-6-1 {
+
−
  position: absolute;
+
−
  left: calc(60vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-6-1-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(35vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-6-1-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(35vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-6-2 {
+
−
  position: absolute;
+
−
  left: 160vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-6-2-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(160vw - 270px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-6-2-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(160vw - 450px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-6-3 {
+
−
  position: absolute;
+
−
  left: calc(260vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-6-3-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(235vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-6-3-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(235vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-7-1 {
+
−
  position: absolute;
+
−
  left: 60vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-7-1-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(60vw - 240px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-7-1-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(60vw - 450px);
+
−
  top: calc(25vh + 60px);
+
−
}
+
−
 
+
−
#img-7-2 {
+
−
  position: absolute;
+
−
  left: calc(160vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-7-2-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(135vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-7-2-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(135vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-7-3 {
+
−
  position: absolute;
+
−
  left: 260vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-7-3-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(260vw - 300px);
+
−
  top: calc(25vh + 20px);
+
−
}
+
−
 
+
−
#text-7-3-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(260vw - 450px);
+
−
  top: calc(25vh + 60px);
+
−
}
+
−
 
+
−
#img-7-4 {
+
−
  position: absolute;
+
−
  left: calc(360vw - 450px);
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-7-4-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(335vw + 300px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-7-4-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(335vw + 350px);
+
−
  top: calc(25vh + 70px);
+
−
}
+
−
 
+
−
#img-7-5 {
+
−
  position: absolute;
+
−
  left: 460vw;
+
−
  top: 25vh;
+
−
}
+
−
 
+
−
#text-7-5-name {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(460vw - 120px);
+
−
  top: calc(25vh + 20px);
+
−
 
+
−
}
+
−
 
+
−
#text-7-5-selfIntro {
+
−
  position: absolute;
+
−
  z-index: 1;
+
−
  left: calc(460vw - 450px);
+
−
  top: calc(25vh + 70px);
+
 
}
 
}

Latest revision as of 15:15, 16 October 2018

.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;

}