| .nav-circlepop a{ |
| width: 50px; |
| height: 50px; |
| } |
| |
| .nav-circlepop a::before{ |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| background: #fff; |
| content: ''; |
| opacity: 0; |
| -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; |
| transition: transform 0.3s, opacity 0.3s; |
| -webkit-transform: scale(0.9); |
| transform: scale(0.9); |
| } |
| |
| .nav-circlepop .icon-wrap{ |
| position: relative; |
| display: block; |
| margin: 10% 0 0 10%; |
| width: 80%; |
| height: 80%; |
| } |
| |
| .nav-circlepop a.next .icon-wrap{ |
| -webkit-transform: rotate(180deg); |
| transform: rotate(180deg); |
| } |
| |
| .nav-circlepop .icon-wrap::before, |
| .nav-circlepop .icon-wrap::after{ |
| position: absolute; |
| left: 25%; |
| width: 3px; |
| height: 50%; |
| background: #fff; |
| content: ''; |
| -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; |
| transition: transform 0.3s, background-color 0.3s; |
| -webkit-backface-visibility: hidden; |
| backface-visibility: hidden; |
| } |
| |
| .nav-circlepop .icon-wrap::before{ |
| -webkit-transform: translateX(-50%) rotate(30deg); |
| transform: translateX(-50%) rotate(30deg); |
| -webkit-transform-origin: 0 100%; |
| transform-origin: 0 100%; |
| } |
| |
| .nav-circlepop .icon-wrap::after{ |
| top: 50%; |
| -webkit-transform: translateX(-50%) rotate(-30deg); |
| transform: translateX(-50%) rotate(-30deg); |
| -webkit-transform-origin: 0 0; |
| transform-origin: 0 0; |
| } |
| |
| .nav-circlepop a:hover::before{ |
| opacity: 1; |
| -webkit-transform: scale(1); |
| transform: scale(1); |
| } |
| |
| .nav-circlepop a:hover .icon-wrap::before, |
| .nav-circlepop a:hover .icon-wrap::after{ |
| background: #4aaf4c; |
| } |
| |
| .nav-circlepop a:hover .icon-wrap::before{ |
| -webkit-transform: translateX(-50%) rotate(45deg); |
| transform: translateX(-50%) rotate(45deg); |
| } |
| |
| .nav-circlepop a:hover .icon-wrap::after{ |
| -webkit-transform: translateX(-50%) rotate(-45deg); |
| transform: translateX(-50%) rotate(-45deg); |
| } |