Team:ATOMS-Turkiye/styleScrollNav

.scroll-nav__list {
 padding-left: 0;
 list-style: none;

} ol.scroll-nav__list {

 padding-left: 0;
 list-style: none;
 margin-left:0px

} li.scroll-nav__item:hover {

   background-color: #1A424D;

} a.scroll-nav__link {

 color: #FFFFFF !important;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 60%;
 font-weight: 500;
 line-height: 1.5em;
 text-decoration: none;
 /*-webkit-transition: all .2s linear;
 -moz-transition: all .2s linear;
 -o-transition: all .2s linear;
 transition: all .2s linear;*/
 height: 40px;
 width: 84px;
 display: block;          
 text-align: left;                    display: -webkit-box;          display: -moz-box;          display: box;          -webkit-box-align: center;          -moz-box-align: center;          box-align: center;
 padding: 5px;
 margin: -5px;

} a:hover {

 /* color: #FFFFFF !important; */

}

.scroll-nav__wrapper ul, ol, dl {

 margin: 0;
 margin-bottom: 1.5em;

}

p {

 margin: 0 0 1.5em 0;

}

.scroll-nav {

   position: absolute;
   top: 0px;
   margin-top: -1px;
   left: 0px;
   z-index: 30;
   width: 87px !important;

} .scroll-nav.fixed .scroll-nav__wrapper {

 position: absolute;
 /*top: 122px !important;*/
 left:0px;
 z-index:30;
 width: 87px !important;

}

.scroll-nav__wrapper {

 background-color: #152E33;
 border-radius: 2px;
 padding: 10px 5px;
 -webkit-box-shadow: 1px 4px 8px 0px rgba(50, 50, 50, 0.75);
 -moz-box-shadow: 1px 4px 8px 0px rgba(50, 50, 50, 0.75);
 box-shadow: 1px 4px 8px 0px rgba(50, 50, 50, 0.75);

}

.scroll-nav__heading {

 border-bottom: 0px solid #fff;
 color: #fff;
 display: block;
 font-family: "Alfa Slab One", Georgia, serif;
 font-size: 1em;
 margin-bottom: 10px;
 overflow: hidden;
 padding-bottom: 10px;
 padding-top: 5px;
 text-align: center;
 text-shadow: 0 -1px 0 #006186;
 width: 40px;

} .scroll-nav__heading:before {

 font-size: 40px;

}

.scroll-nav__list {

 margin-bottom: 0;

}

.scroll-nav__item {

 font-weight: 600;
 font-size: 18px;
 margin: 0 auto;
 overflow: hidden;
 width: 100px;

}

.scroll-nav__item:before {

 color: #fff;
 display: block;
 position: absolute;
 pointer-events: none;
 text-align: center;
 width: 40px;

} /*.scroll-nav__item.active {

 -webkit-transform: scale(1.1, 1.1);
 -moz-transform: scale(1.1, 1.1);
 -ms-transform: scale(1.1, 1.1);
 -o-transform: scale(1.1, 1.1);
 transform: scale(1.1, 1.1);
 font-weight: 600;

} */ .scroll-nav__item.active a:hover {

 font-weight: 100;
 border-bottom: 0px !important;
 background-color: #1A424D !important;
 width: 80px;
 }

a.scroll-nav__item:hover {

background-color: #13333C;
  -webkit-transition: all .2s linear;
 -moz-transition: all .2s linear;
 -o-transition: all .2s linear;
 transition: all .2s linear;

}

.scroll-nav__link {

 color: #fff;
 display: block;
 margin: 0 auto;
 padding-left: 0px;

} .scroll-nav__link:hover {

 color: #fff;
 border-bottom: 0px !important;
 background-color: rgba(0,0,0,0) !important;
 /*-webkit-transition: all .2s linear;
 -moz-transition: all .2s linear;
 -o-transition: all .2s linear;
 transition: all .2s linear;*/

}

a.scroll-nav__link:active {

   /*background-color: #13333C;      width: 90px;      margin-right: 5px;       
   -webkit-transition: all .5s linear;    
   -moz-transition: all .5s linear;    
   -o-transition: all .5s linear; 
   z-index:0; */ 

}

@media screen and (min-width: 60em) {

   .scroll-nav__wrapper {
   padding: 7px 0px;
 }

 .scroll-nav__heading {
   font-size: 1.7em;
   /* text-indent: -16px; */
   width: 100px;
 
   text-align: left;
   padding-left: 7px;

}

 .scroll-nav__heading:before {
   font-size: 1.654411765em;
   position: relative;
   right: -0.30em;
   top: -0.07em;
 }

 .scroll-nav__item {
   font-size: 18px;
   overflow: visible;
   width: 80px;
   height: 40px;
   padding: 5px;
   line-height: 2em;
   /* margin-top: 1px; */
   /* margin-bottom: 5px; */
   -webkit-transition: all .2s linear;
   -moz-transition: all .2s linear;
   -o-transition: all .2s linear;
   transition: all .2s linear;

}

 .scroll-nav__item.active {
   /* -webkit-transform: scale(1.1, 1.1); */
   /* -moz-transform: scale(1.1, 1.1); */
   /* -ms-transform: scale(1.1, 1.1); */
   /* -o-transform: scale(1.1, 1.1); */
   /* transform: scale(1.1, 1.1); */
   /* padding-left: 0.5em;*/
   background-color: #104F60;
   width: 80px;
   margin-right: 5px;
   -webkit-transition: all .2s linear;
   -moz-transition: all .2s linear;
   -o-transition: all .2s line

}

.scroll-nav__item:active {

    background-color: #13333C;
    width: 80px;
    margin-right: 5px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s line
 
    
    
    
    
    
    
    
    
    -webkit-transition-duration: 2s;
    transition-duration: 2s;

}

 .scroll-nav__item:before {
   width: 30px;
 }

 .scroll-nav__link {
   padding-left: 0px;

} }