/*-------------------------------------------------------------- Menus --------------------------------------------------------------*/ .main-navigation { position: relative; float: left; width: 100%; display: block; clear: both; text-transform: uppercase; border-bottom: 1px dashed #263248; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; } .main-navigation a { display: block; padding: 1em 1em; font-size: 12px; font-size: 1.2rem; text-decoration: none; line-height: 1em; color: #263248; font-weight: 100; } .main-navigation ul ul { position: absolute; left: 0; z-index: 99999; display: none; float: left; padding: 0; background: hsla(220, 16%, 56%, 0.8); } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { } .main-navigation li:hover > a { background: hsla(0, 0%, 100%, 0.3); } .main-navigation ul ul :hover > a { background: hsla(0, 0%, 100%, 0.3); } .main-navigation ul ul a:hover { background: hsla(0, 0%, 100%, 0.3); } .main-navigation ul li:hover > ul { display: block; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a:hover, .main-navigation .current-menu-item > a:hover { background: hsla(0, 0%, 100%, 0.1); } .main-navigation .current_page_ancestor { background: hsla(0, 0%, 100%, 0.1); } .main-navigation ul ul .current_page_parent, .main-navigation .current_page_parent .current_page_item > a { background: hsla(0, 0%, 100%, 0.1); } /* Small menu */ .menu-toggle { display: none; } @media screen and (max-width: 600px) { .menu-toggle { display: block; height: 3em; padding: 0 1em; font-weight: 300; text-decoration: none; line-height: 3em; } .main-navigation.toggled .nav-menu { display: block; border-top: 1px dashed #263248; } .main-navigation ul { display: none; padding-left: 0; } .main-navigation li { float: none; } .main-navigation li a { padding: 1em 1em; } .main-navigation li li a { padding-left: 2em; } .main-navigation li li li a { padding-left: 3em; } .main-navigation li:hover > a { background: hsla(0, 0%, 100%, 0.1); } .main-navigation ul ul, .main-navigation ul ul ul { position: relative; top: inherit; left: 0; display: block; float: none; background: hsla(0, 0%, 100%, 0.1); } .main-navigation ul ul a { width: 100%; } .main-navigation ul a:hover, .main-navigation ul ul a:hover { background: hsla(0, 0%, 100%, 0.1); } .main-navigation .current_page_ancestor { background: inherit; } .main-navigation ul ul .current_page_parent { color: inherit; background: inherit; } .main-navigation .current_page_item > a, .main-navigation .current_page_item > a:hover, .main-navigation .current_page_item li:hover, .main-navigation .current_page_parent .current_page_item > a { background: hsla(0, 0%, 100%, 0.1); } } .site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /* Social Menu */ .menu-social ul { float: right; text-align: center; list-style: none; } .menu-social ul li { position: relative; display: inline-block; } .menu-social li a:before { display: inline-block; padding: 0 5px; vertical-align: top; font-family: 'Fontawesome'; font-size: 12px; -webkit-font-smoothing: antialiased; content: '\f0c0'; } .menu-social li a[href*="facebook.com"]::before { content: '\f09a'; } .menu-social li a[href*="twitter.com"]::before { content: '\f099'; } .menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; } .menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; } .menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; } .menu-social li a[href*="github.com"]::before { content: '\f09b'; } .menu-social li a[href*="tumblr.com"]::before { content: '\f173'; } .menu-social li a[href*="youtube.com"]::before { content: '\f167'; } .menu-social li a[href*="flickr.com"]::before { content: '\f16e'; } .menu-social li a[href*="vimeo.com"]::before { content: '\f194'; } .menu-social li a[href*="instagram.com"]::before { content: '\f16d'; } .menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; } @media screen and (max-width: 600px) { #menu-social ul { position: absolute; top: 0; right: 4rem; display: block; } #menu-social li a { padding-left:.4em; padding-right: .4em; } }