diff --git a/KÉZIKÖNYV.md b/KÉZIKÖNYV.md
index 43015f5..4f75af8 100644
--- a/KÉZIKÖNYV.md
+++ b/KÉZIKÖNYV.md
@@ -4,33 +4,34 @@
 
 ### function.php
 
-    esemény cat-id-t átírni!!
+esemény cat-id-t átírni!!
 
 ### wp beállítások
 
-	settings>reading>Blog pages show at most 6
+settings>reading>Blog pages show at most 6
 
 ## Paraméterek
 
 ### Bejegyzések
 
-#### dis-alcim
+dis-alcim:
 
-Csak az első két nagy cikknél jelenik meg
+- Csak az első két nagy cikknél jelenik meg
 
-#### dis-bevezeto
+dis-bevezeto:
 
-Csak az első két nagy cikknél jelenik meg
+- Csak az első két nagy cikknél jelenik meg
 
 ### Események
 
-#### dis-esemeny-datum
+dis-esemeny-datum
 
-#### dis-esemeny-link
+dis-esemeny-link
 
 ## Developement verzió telepítése
 
 Szükséges: python2, gulp global, max node 11
+
 Mountnál exec paramétert nem kifelejteni!!!
 
 ```
diff --git a/css/base.css b/css/base.css
index 268e386..e51dc48 100644
--- a/css/base.css
+++ b/css/base.css
@@ -306,6 +306,9 @@ object {
       right: calc(10rem* 2);
       top: calc(4rem/ 2);
       z-index: 1000; }
+      @media (min-width: 769px) {
+        .wrapper .header #tag-nav {
+          top: calc(4rem* 0.4); } }
       @media (min-width: 769px) {
         .wrapper .header #tag-nav {
           display: block; } }
@@ -316,120 +319,416 @@ object {
         color: transparent;
         -webkit-text-stroke: #000 1px;
         text-transform: uppercase; }
+        .wrapper .header #tag-nav ul.current {
+          -webkit-text-stroke: #fff 1px !important; }
+        @media (min-width: 769px) {
+          .wrapper .header #tag-nav ul {
+            font-size: 1.2rem; } }
         .wrapper .header #tag-nav ul li {
           display: inline; }
           .wrapper .header #tag-nav ul li a span {
             height: calc(4rem/ 2);
+            width: 1rem;
+            margin: auto;
+            display: block;
+            text-align: center;
             position: absolute;
-            left: 0;
-            top: 0;
-            transform-origin: bottom center;
+            transform-origin: 50% 100%;
             font: 900 1rem "Westeinde Caption";
             color: transparent;
             -webkit-text-stroke: #000 1px;
             text-transform: uppercase; }
+            @media (min-width: 769px) {
+              .wrapper .header #tag-nav ul li a span {
+                height: 3rem; } }
+            .wrapper .header #tag-nav ul li a span.current {
+              -webkit-text-stroke: #fff 1px !important; }
+            @media (min-width: 769px) {
+              .wrapper .header #tag-nav ul li a span {
+                font-size: 1.2rem; } }
             .wrapper .header #tag-nav ul li a span.char1 {
               -moz-transform: rotate(21.17647deg);
               -o-transform: rotate(21.17647deg);
               -ms-transform: rotate(21.17647deg);
               -webkit-transform: rotate(21.17647deg);
-              transform: rotate(21.17647deg); }
+              transform: rotate(21.17647deg);
+              -webkit-animation: spin1 4s linear infinite;
+              -moz-animation: spin1 4s linear infinite;
+              animation: spin1 4s linear infinite; }
+
+@-moz-keyframes spin1 {
+  100% {
+    -moz-transform: rotate(381.17647deg); } }
+
+@-webkit-keyframes spin1 {
+  100% {
+    -webkit-transform: rotate(381.17647deg); } }
+
+@keyframes spin1 {
+  100% {
+    -webkit-transform: rotate(381.17647deg);
+    transform: rotate(381.17647deg); } }
             .wrapper .header #tag-nav ul li a span.char2 {
               -moz-transform: rotate(42.35294deg);
               -o-transform: rotate(42.35294deg);
               -ms-transform: rotate(42.35294deg);
               -webkit-transform: rotate(42.35294deg);
-              transform: rotate(42.35294deg); }
+              transform: rotate(42.35294deg);
+              -webkit-animation: spin2 4s linear infinite;
+              -moz-animation: spin2 4s linear infinite;
+              animation: spin2 4s linear infinite; }
+
+@-moz-keyframes spin2 {
+  100% {
+    -moz-transform: rotate(402.35294deg); } }
+
+@-webkit-keyframes spin2 {
+  100% {
+    -webkit-transform: rotate(402.35294deg); } }
+
+@keyframes spin2 {
+  100% {
+    -webkit-transform: rotate(402.35294deg);
+    transform: rotate(402.35294deg); } }
             .wrapper .header #tag-nav ul li a span.char3 {
               -moz-transform: rotate(63.52941deg);
               -o-transform: rotate(63.52941deg);
               -ms-transform: rotate(63.52941deg);
               -webkit-transform: rotate(63.52941deg);
-              transform: rotate(63.52941deg); }
+              transform: rotate(63.52941deg);
+              -webkit-animation: spin3 4s linear infinite;
+              -moz-animation: spin3 4s linear infinite;
+              animation: spin3 4s linear infinite; }
+
+@-moz-keyframes spin3 {
+  100% {
+    -moz-transform: rotate(423.52941deg); } }
+
+@-webkit-keyframes spin3 {
+  100% {
+    -webkit-transform: rotate(423.52941deg); } }
+
+@keyframes spin3 {
+  100% {
+    -webkit-transform: rotate(423.52941deg);
+    transform: rotate(423.52941deg); } }
             .wrapper .header #tag-nav ul li a span.char4 {
               -moz-transform: rotate(84.70588deg);
               -o-transform: rotate(84.70588deg);
               -ms-transform: rotate(84.70588deg);
               -webkit-transform: rotate(84.70588deg);
-              transform: rotate(84.70588deg); }
+              transform: rotate(84.70588deg);
+              -webkit-animation: spin4 4s linear infinite;
+              -moz-animation: spin4 4s linear infinite;
+              animation: spin4 4s linear infinite; }
+
+@-moz-keyframes spin4 {
+  100% {
+    -moz-transform: rotate(444.70588deg); } }
+
+@-webkit-keyframes spin4 {
+  100% {
+    -webkit-transform: rotate(444.70588deg); } }
+
+@keyframes spin4 {
+  100% {
+    -webkit-transform: rotate(444.70588deg);
+    transform: rotate(444.70588deg); } }
             .wrapper .header #tag-nav ul li a span.char5 {
               -moz-transform: rotate(105.88235deg);
               -o-transform: rotate(105.88235deg);
               -ms-transform: rotate(105.88235deg);
               -webkit-transform: rotate(105.88235deg);
-              transform: rotate(105.88235deg); }
+              transform: rotate(105.88235deg);
+              -webkit-animation: spin5 4s linear infinite;
+              -moz-animation: spin5 4s linear infinite;
+              animation: spin5 4s linear infinite; }
+
+@-moz-keyframes spin5 {
+  100% {
+    -moz-transform: rotate(465.88235deg); } }
+
+@-webkit-keyframes spin5 {
+  100% {
+    -webkit-transform: rotate(465.88235deg); } }
+
+@keyframes spin5 {
+  100% {
+    -webkit-transform: rotate(465.88235deg);
+    transform: rotate(465.88235deg); } }
             .wrapper .header #tag-nav ul li a span.char6 {
               -moz-transform: rotate(127.05882deg);
               -o-transform: rotate(127.05882deg);
               -ms-transform: rotate(127.05882deg);
               -webkit-transform: rotate(127.05882deg);
-              transform: rotate(127.05882deg); }
+              transform: rotate(127.05882deg);
+              -webkit-animation: spin6 4s linear infinite;
+              -moz-animation: spin6 4s linear infinite;
+              animation: spin6 4s linear infinite; }
+
+@-moz-keyframes spin6 {
+  100% {
+    -moz-transform: rotate(487.05882deg); } }
+
+@-webkit-keyframes spin6 {
+  100% {
+    -webkit-transform: rotate(487.05882deg); } }
+
+@keyframes spin6 {
+  100% {
+    -webkit-transform: rotate(487.05882deg);
+    transform: rotate(487.05882deg); } }
             .wrapper .header #tag-nav ul li a span.char7 {
               -moz-transform: rotate(148.23529deg);
               -o-transform: rotate(148.23529deg);
               -ms-transform: rotate(148.23529deg);
               -webkit-transform: rotate(148.23529deg);
-              transform: rotate(148.23529deg); }
+              transform: rotate(148.23529deg);
+              -webkit-animation: spin7 4s linear infinite;
+              -moz-animation: spin7 4s linear infinite;
+              animation: spin7 4s linear infinite; }
+
+@-moz-keyframes spin7 {
+  100% {
+    -moz-transform: rotate(508.23529deg); } }
+
+@-webkit-keyframes spin7 {
+  100% {
+    -webkit-transform: rotate(508.23529deg); } }
+
+@keyframes spin7 {
+  100% {
+    -webkit-transform: rotate(508.23529deg);
+    transform: rotate(508.23529deg); } }
             .wrapper .header #tag-nav ul li a span.char8 {
               -moz-transform: rotate(169.41176deg);
               -o-transform: rotate(169.41176deg);
               -ms-transform: rotate(169.41176deg);
               -webkit-transform: rotate(169.41176deg);
-              transform: rotate(169.41176deg); }
+              transform: rotate(169.41176deg);
+              -webkit-animation: spin8 4s linear infinite;
+              -moz-animation: spin8 4s linear infinite;
+              animation: spin8 4s linear infinite; }
+
+@-moz-keyframes spin8 {
+  100% {
+    -moz-transform: rotate(529.41176deg); } }
+
+@-webkit-keyframes spin8 {
+  100% {
+    -webkit-transform: rotate(529.41176deg); } }
+
+@keyframes spin8 {
+  100% {
+    -webkit-transform: rotate(529.41176deg);
+    transform: rotate(529.41176deg); } }
             .wrapper .header #tag-nav ul li a span.char9 {
               -moz-transform: rotate(190.58824deg);
               -o-transform: rotate(190.58824deg);
               -ms-transform: rotate(190.58824deg);
               -webkit-transform: rotate(190.58824deg);
-              transform: rotate(190.58824deg); }
+              transform: rotate(190.58824deg);
+              -webkit-animation: spin9 4s linear infinite;
+              -moz-animation: spin9 4s linear infinite;
+              animation: spin9 4s linear infinite; }
+
+@-moz-keyframes spin9 {
+  100% {
+    -moz-transform: rotate(550.58824deg); } }
+
+@-webkit-keyframes spin9 {
+  100% {
+    -webkit-transform: rotate(550.58824deg); } }
+
+@keyframes spin9 {
+  100% {
+    -webkit-transform: rotate(550.58824deg);
+    transform: rotate(550.58824deg); } }
             .wrapper .header #tag-nav ul li a span.char10 {
               -moz-transform: rotate(211.76471deg);
               -o-transform: rotate(211.76471deg);
               -ms-transform: rotate(211.76471deg);
               -webkit-transform: rotate(211.76471deg);
-              transform: rotate(211.76471deg); }
+              transform: rotate(211.76471deg);
+              -webkit-animation: spin10 4s linear infinite;
+              -moz-animation: spin10 4s linear infinite;
+              animation: spin10 4s linear infinite; }
+
+@-moz-keyframes spin10 {
+  100% {
+    -moz-transform: rotate(571.76471deg); } }
+
+@-webkit-keyframes spin10 {
+  100% {
+    -webkit-transform: rotate(571.76471deg); } }
+
+@keyframes spin10 {
+  100% {
+    -webkit-transform: rotate(571.76471deg);
+    transform: rotate(571.76471deg); } }
             .wrapper .header #tag-nav ul li a span.char11 {
               -moz-transform: rotate(232.94118deg);
               -o-transform: rotate(232.94118deg);
               -ms-transform: rotate(232.94118deg);
               -webkit-transform: rotate(232.94118deg);
-              transform: rotate(232.94118deg); }
+              transform: rotate(232.94118deg);
+              -webkit-animation: spin11 4s linear infinite;
+              -moz-animation: spin11 4s linear infinite;
+              animation: spin11 4s linear infinite; }
+
+@-moz-keyframes spin11 {
+  100% {
+    -moz-transform: rotate(592.94118deg); } }
+
+@-webkit-keyframes spin11 {
+  100% {
+    -webkit-transform: rotate(592.94118deg); } }
+
+@keyframes spin11 {
+  100% {
+    -webkit-transform: rotate(592.94118deg);
+    transform: rotate(592.94118deg); } }
             .wrapper .header #tag-nav ul li a span.char12 {
               -moz-transform: rotate(254.11765deg);
               -o-transform: rotate(254.11765deg);
               -ms-transform: rotate(254.11765deg);
               -webkit-transform: rotate(254.11765deg);
-              transform: rotate(254.11765deg); }
+              transform: rotate(254.11765deg);
+              -webkit-animation: spin12 4s linear infinite;
+              -moz-animation: spin12 4s linear infinite;
+              animation: spin12 4s linear infinite; }
+
+@-moz-keyframes spin12 {
+  100% {
+    -moz-transform: rotate(614.11765deg); } }
+
+@-webkit-keyframes spin12 {
+  100% {
+    -webkit-transform: rotate(614.11765deg); } }
+
+@keyframes spin12 {
+  100% {
+    -webkit-transform: rotate(614.11765deg);
+    transform: rotate(614.11765deg); } }
             .wrapper .header #tag-nav ul li a span.char13 {
               -moz-transform: rotate(275.29412deg);
               -o-transform: rotate(275.29412deg);
               -ms-transform: rotate(275.29412deg);
               -webkit-transform: rotate(275.29412deg);
-              transform: rotate(275.29412deg); }
+              transform: rotate(275.29412deg);
+              -webkit-animation: spin13 4s linear infinite;
+              -moz-animation: spin13 4s linear infinite;
+              animation: spin13 4s linear infinite; }
+
+@-moz-keyframes spin13 {
+  100% {
+    -moz-transform: rotate(635.29412deg); } }
+
+@-webkit-keyframes spin13 {
+  100% {
+    -webkit-transform: rotate(635.29412deg); } }
+
+@keyframes spin13 {
+  100% {
+    -webkit-transform: rotate(635.29412deg);
+    transform: rotate(635.29412deg); } }
             .wrapper .header #tag-nav ul li a span.char14 {
               -moz-transform: rotate(296.47059deg);
               -o-transform: rotate(296.47059deg);
               -ms-transform: rotate(296.47059deg);
               -webkit-transform: rotate(296.47059deg);
-              transform: rotate(296.47059deg); }
+              transform: rotate(296.47059deg);
+              -webkit-animation: spin14 4s linear infinite;
+              -moz-animation: spin14 4s linear infinite;
+              animation: spin14 4s linear infinite; }
+
+@-moz-keyframes spin14 {
+  100% {
+    -moz-transform: rotate(656.47059deg); } }
+
+@-webkit-keyframes spin14 {
+  100% {
+    -webkit-transform: rotate(656.47059deg); } }
+
+@keyframes spin14 {
+  100% {
+    -webkit-transform: rotate(656.47059deg);
+    transform: rotate(656.47059deg); } }
             .wrapper .header #tag-nav ul li a span.char15 {
               -moz-transform: rotate(317.64706deg);
               -o-transform: rotate(317.64706deg);
               -ms-transform: rotate(317.64706deg);
               -webkit-transform: rotate(317.64706deg);
-              transform: rotate(317.64706deg); }
+              transform: rotate(317.64706deg);
+              -webkit-animation: spin15 4s linear infinite;
+              -moz-animation: spin15 4s linear infinite;
+              animation: spin15 4s linear infinite; }
+
+@-moz-keyframes spin15 {
+  100% {
+    -moz-transform: rotate(677.64706deg); } }
+
+@-webkit-keyframes spin15 {
+  100% {
+    -webkit-transform: rotate(677.64706deg); } }
+
+@keyframes spin15 {
+  100% {
+    -webkit-transform: rotate(677.64706deg);
+    transform: rotate(677.64706deg); } }
             .wrapper .header #tag-nav ul li a span.char16 {
               -moz-transform: rotate(338.82353deg);
               -o-transform: rotate(338.82353deg);
               -ms-transform: rotate(338.82353deg);
               -webkit-transform: rotate(338.82353deg);
-              transform: rotate(338.82353deg); }
+              transform: rotate(338.82353deg);
+              -webkit-animation: spin16 4s linear infinite;
+              -moz-animation: spin16 4s linear infinite;
+              animation: spin16 4s linear infinite; }
+
+@-moz-keyframes spin16 {
+  100% {
+    -moz-transform: rotate(698.82353deg); } }
+
+@-webkit-keyframes spin16 {
+  100% {
+    -webkit-transform: rotate(698.82353deg); } }
+
+@keyframes spin16 {
+  100% {
+    -webkit-transform: rotate(698.82353deg);
+    transform: rotate(698.82353deg); } }
             .wrapper .header #tag-nav ul li a span.char17 {
               -moz-transform: rotate(360deg);
               -o-transform: rotate(360deg);
               -ms-transform: rotate(360deg);
               -webkit-transform: rotate(360deg);
-              transform: rotate(360deg); }
+              transform: rotate(360deg);
+              -webkit-animation: spin17 4s linear infinite;
+              -moz-animation: spin17 4s linear infinite;
+              animation: spin17 4s linear infinite; }
+
+@-moz-keyframes spin17 {
+  100% {
+    -moz-transform: rotate(720deg); } }
+
+@-webkit-keyframes spin17 {
+  100% {
+    -webkit-transform: rotate(720deg); } }
+
+@keyframes spin17 {
+  100% {
+    -webkit-transform: rotate(720deg);
+    transform: rotate(720deg); } }
+            .wrapper .header #tag-nav ul li a span.pause {
+              animation-play-state: paused; }
+      .wrapper .header #tag-nav .sub-wrapper {
+        position: fixed;
+        right: 10rem;
+        left: 10rem;
+        top: 0;
+        background-color: #000;
+        height: 50vh; }
   .wrapper main {
     z-index: 1; }
     .wrapper main section {
diff --git a/functions.php b/functions.php
index e115abf..fd22a32 100644
--- a/functions.php
+++ b/functions.php
@@ -86,6 +86,38 @@ function dis2019_nav()
     );
 }
 
+//walker for tag menu: bedo circle hover
+class Menu_With_Description extends Walker_Nav_Menu {
+    function start_el(&$output, $item, $depth, $args) {
+        global $wp_query;
+        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
+         
+        $class_names = $value = '';
+ 
+        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
+ 
+        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
+        $class_names = ' class="' . esc_attr( $class_names ) . '"';
+ 
+        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
+ 
+        $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
+        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
+        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
+        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
+ 
+        $item_output = $args->before;
+        $item_output .= '<a'. $attributes .'>';
+        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
+        $item_output .= '</a>';
+        $item_output .= '<span class="sub menu-item-sub-' . $item->ID . '">' . $item->description . '</span>';
+        $item_output .= $args->after;
+ 
+        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
+    }
+}
+
+
 // Load dis-2019 scripts (header.php)
 function dis2019_header_scripts()
 {
diff --git a/header.php b/header.php
index 97a1c37..e7bed60 100644
--- a/header.php
+++ b/header.php
@@ -128,10 +128,11 @@
 
 			<div id="tag-nav">
 				<nav role="navigation" class="tag-nav">
-
-					<?php wp_nav_menu( array( 'theme_location' => 'tag-menu' ) ); ?>
-
+				<?php $walker = new Menu_With_Description; ?>
+					<?php wp_nav_menu( array( 'theme_location' => 'tag-menu', 'walker' => $walker ) ); ?>
 				</nav>
+				<div class="sub-wrapper">
+				</div>
 			</div>
 
 			<!-- ----------------------- to top arrow on mobile ------------------------ -->
diff --git a/js/scripts.js b/js/scripts.js
index f369d7f..5a6c547 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -466,10 +466,10 @@
 			let cc = $(this)
 			let cArticle = cc.parents("article")
 			let cMetadata = cArticle.children(".metadata")
-			
+
 			//add hovered class
 			cArticle.addClass("hovered")
-			
+
 			//add tag to header for bg
 			let artClasses = cArticle.attr("class").split(" ")
 			let theTag = findClassByStart(artClasses, "tag")
@@ -477,14 +477,14 @@
 
 			//transparent metadata
 			cMetadata.children(".categories, .postedon").addClass("transparent")
-			
+
 			//animate border
-			cMetadata.stop().animate({ height: "25rem" },400, _ => {
+			cMetadata.stop().animate({ height: "25rem" }, 400, _ => {
 				//hide metadata
 				cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
 				cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
 			})
-			
+
 
 		}, function () {
 			let cc = $(this)
@@ -493,17 +493,17 @@
 
 			//remove hovered class
 			cArticle.removeClass("hovered")
-			
+
 			//remove tag from header and body
 			let headerClasses = $(".header-1").attr("class").split(" ")
 			var hoverClass = findClassByStart(headerClasses, "hover")
 			$("body, .header-1, .header-2").removeClass(hoverClass)
-			
+
 			//transparent metadata
 			cMetadata.children(".alcim, .bevezeto").addClass("transparent")
-			
+
 			//animate height change
-			cMetadata.stop().animate({ height: "10rem" },400, _ => {
+			cMetadata.stop().animate({ height: "10rem" }, 400, _ => {
 				//hide and show metadata
 				cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
 				cMetadata.children(".categories, .postedon").removeClass("transparent").show()
@@ -568,8 +568,22 @@
 		/*                                CIRCULAR TEXT                               */
 		/* -------------------------------------------------------------------------- */
 
+		const bedoListItems = ".wrapper .header #tag-nav ul li"
+		const bedoWords = bedoListItems + " a"
+		const bedoLetters = bedoWords + " span"
+
+
+		//move subs to wrapper
+		$(bedoListItems).each(function () {
+			let itemId = $(this).attr("id")
+			$(".sub-wrapper").append('<div id="' + itemId + '"></div>')
+			$(this).children("a").clone().appendTo(".sub-wrapper #"+ itemId)
+			$(this).children("span").appendTo(".sub-wrapper #"+ itemId)
+		})
+
+		//wrap each letter to spans
 		var charnum = 0
-		$(".wrapper .header #tag-nav ul li a").each(function () {
+		$(bedoWords).each(function () {
 			let chars = $(this).html().length + 1
 			$(this).lettering()
 			$(this).children("span").each(function () {
@@ -581,6 +595,17 @@
 			charnum += chars
 		})
 
+		/* ---------------------------------- hover --------------------------------- */
+
+		$(bedoWords).hover(function () {
+			$(bedoLetters).addClass("pause")
+			$(this).children("span").addClass("current")
+		}, function () {
+			$(bedoLetters).removeClass("pause")
+			$(this).children("span").removeClass("current")
+		})
+
+
 
 	});
 
diff --git a/sass/_font-mixins.scss b/sass/_font-mixins.scss
index 1b60981..87b5a80 100644
--- a/sass/_font-mixins.scss
+++ b/sass/_font-mixins.scss
@@ -83,6 +83,12 @@
   color: transparent;
   -webkit-text-stroke: #000 1px;
   text-transform: uppercase;
+  &.current{
+    -webkit-text-stroke: #fff 1px !important;
+  }
+  @media #{$smalldesktop} {
+    font-size: 1.2rem;
+  }
 }
 
 @mixin single-title {
diff --git a/sass/base.scss b/sass/base.scss
index 30a13a4..e2a4ff6 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -133,6 +133,27 @@ $v-unit-2: 8rem;
   @for $i from 1 through $num-letters {
     &.char#{$i} {
       @include transform(rotate($angle-offset + $angle-per-char * $i));
+
+      -webkit-animation: spin#{$i} 4s linear infinite;
+      -moz-animation: spin#{$i} 4s linear infinite;
+      animation: spin#{$i} 4s linear infinite;
+
+      @-moz-keyframes spin#{$i} {
+        100% {
+          -moz-transform: rotate((360deg + $angle-per-char * $i));
+        }
+      }
+      @-webkit-keyframes spin#{$i} {
+        100% {
+          -webkit-transform: rotate((360deg + $angle-per-char * $i));
+        }
+      }
+      @keyframes spin#{$i} {
+        100% {
+          -webkit-transform: rotate((360deg + $angle-per-char * $i));
+          transform: rotate((360deg + $angle-per-char * $i));
+        }
+      }
     }
   }
 }
@@ -331,7 +352,7 @@ $v-unit-2: 8rem;
           // color: #000;
           // fill: currentColor;
           filter: invert(100%); //black
-          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+          @include transform(rotate(180deg)) // transform: rotate(180deg);
         }
       }
     }
@@ -504,6 +525,9 @@ $v-unit-2: 8rem;
       position: fixed;
       right: calc(#{$h-unit-2}* 2);
       top: calc(#{$v-unit-1}/ 2);
+      @media #{$smalldesktop} {
+        top: calc(#{$v-unit-1}* 0.4);
+      }
       z-index: 1000;
       @media #{$smalldesktop} {
         display: block;
@@ -517,17 +541,47 @@ $v-unit-2: 8rem;
           a {
             span {
               height: calc(#{$v-unit-1}/ 2);
+              // line-height: calc(#{$v-unit-1}/ 2);
+              width: 1rem;
+              @media #{$smalldesktop} {
+                height: 3rem;
+                // line-height: 5rem;
+              }
+              margin: auto;
+              display: block;
+              text-align: center;
+
               position: absolute;
-              // width: 20px;
-              left: 0;
-              top: 0;
-              transform-origin: bottom center;
-              @include bedocircle();
+              // left: 50%;
+              // top: 0;
+              // transform-origin: bottom center;
+              transform-origin: 50% 100%;
+              @include bedocircle(); //this is the font
               @include rotated-text(17, 360deg, 0deg);
+
+              &.pause {
+                animation-play-state: paused;
+              }
             }
           }
         }
       }
+      .sub-wrapper{
+        position: fixed;
+        right: $h-unit-2;
+        left: $h-unit-2;
+        top: 0;
+        background-color: #000;
+        height: 50vh;
+        a{
+          
+        }
+        span{
+
+        }
+        
+      }
+
     }
   } //header end
 
@@ -829,14 +883,7 @@ $v-unit-2: 8rem;
                   height: ($h-unit-1 + $h-unit-2);
                   position: absolute;
                   right: 0;
-                  top:  calc(-50% + 0.5px);
-                  // &:first-child {
-                  //   // top: calc(-100% + 2px);
-                  //   top: -100%;
-                  //   // top: unset;
-                  //   @include transform(scale(1, -1));
-                  //   // @include transform(rotate(-90deg));
-                  // }
+                  top: calc(-50% + 0.5px);
                 }
               }
             } //metadata end