/* Theme Name: Academica Theme URI: http://www.wpzoom.com/themes/academica/ Description: Academica is an education- and school-oriented CMS theme with a three-column layout and modern design. It is easy to customize and comes with a custom widget, three templates for Posts and Pages. Tags: blue, two-columns, three-columns, custom-header, custom-menu, translation-ready Version: 2.0.1 Author: WPZOOM Author URI: http://www.wpzoom.com/ License: GPL v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: academica */ /* =General -------------------------------------------------------------- */ html { color: #333; font-family: "Open Sans", sans-serif; font-size: 100%; line-height: 1; overflow-y: scroll; text-align: left; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 16px; margin: 0; padding: 0; background-color: #fff; } #wrap { margin: 0 auto; width: 1170px; } .inner-wrap { margin: 0 auto; width: 1170px; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; cursor: help; } b, strong { font-weight: bold; } blockquote { border-left: solid 2px #eee; font-style: italic; margin: 14px 20px; padding-left: 20px; } s, del, strike { text-decoration: line-through; } i, em, dfn, cite, address { font-style: italic; } ins, mark { background: #ff0; color: #000; text-decoration: none; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { border-top: 1px solid #ddd; background-color: #f1f1f1; padding: 15px; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } dl { margin: 0 20px; } dt { font-weight: bold; } dd { margin: 0 0 10px; } hr { border: 0; border-top: 1px solid #EEE; clear: both; display: block; height: 1px; margin: 0 0 20px; padding: 0; } hr.sepinside { margin-top: 0; } img { border: 0; height: auto; max-width: 100%; vertical-align: middle; width: auto\9; } embed, iframe, object, video { max-width: 100%; } fieldset { border: 0; margin: 0; padding: 0; } legend { border: 0; padding: 0; } button, input, select, textarea { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; font-family: "Roboto Condensed", sans-serif; } button, input { line-height: normal; *overflow: visible; } button:focus, input:focus, textarea:focus { outline: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } input[type="checkbox"], input[type="radio"] { -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="text"], input[type="password"] { border: solid 1px #DDD; font-size: 16px; padding: 10px; vertical-align: bottom; } button, html input[type="button"], input[type="reset"], input[type="submit"] { background-color: #0A5794; border: none; color: #fff; font-size: 16px; padding: 11px 15px; } button:hover, input[type="submit"]:hover { background-color: #333; } textarea { overflow: auto; vertical-align: top; font-size: 16px; padding: 10px; } table { border-bottom: 1px solid #EEE; border-collapse: collapse; border-spacing: 0; line-height: 1.6; margin: 0 0 24px; width: 100%; } caption { font-size: 14px; margin: 10px 0; text-transform: uppercase; } th { border-bottom: 1px solid #EEE; border-top: 1px solid #EEE; padding: 5px 0; text-transform: uppercase; } td { padding: 5px 0; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } a { color: #0A5794; text-decoration: none; } a:hover { color: #333; } h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; } h1 { clear: both; font-size: 40px; line-height: 1.15; margin-bottom: 30px; } h2 { font-size: 24px; line-height: 1.25; margin-bottom: 25px; } h3 { font-size: 22px; line-height: 1.273; margin-bottom: 20px; } h4 { font-size: 20px; line-height: 1.3; margin-bottom: 15px; } h5 { font-size: 18px; line-height: 1.333; margin-bottom: 10px; } h6 { font-size: 16px; line-height: 1.375; margin-bottom: 5px; } ul, ol { margin: 0 0 14px 36px; padding: 0; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } ul > li { list-style-type: square; } ol > li { list-style-type: decimal; } address, p { margin: 0 0 15px; } /* =Reusable Classes -------------------------------------------------------------- */ .clearfix, .comment-meta: { *zoom: 1; } .clearfix:before, .clearfix:after, .comment-meta:before, .comment-meta:after { content: ""; display: table; line-height: 0; } .clearfix:after, .comment-meta:after { clear: both; } .nivo-caption, .assistive-text, #searchform label, .comment-form-comment > label { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); } .alignleft { float: left; } img.alignleft, .wp-caption.alignleft { margin: 3px 15px 10px 0; } .alignright { float: right; } img.alignright, .wp-caption.alignright, .gallery-slider { margin: 3px 0 10px 15px; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } img.aligncenter, .wp-caption.aligncenter { margin: 3px auto 10px; } /* =Header -------------------------------------------------------------- */ #header { margin: 0 0 20px; background-color: #0A5794; background-size: cover; background-repeat: no-repeat; background-position: center center; } .header_overlay { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%); background-repeat: repeat-x; } #logo { line-height: 1.2; padding: 30px 0 0; } #site-title { font-size: 30pt; letter-spacing: inherit; font-family: "Roboto Condensed", sans-serif; font-weight: bold; margin: 0; color: #fff } #site-title a { color: #fff; } #site-description { color: #C6D9DB; font-size: 11pt; margin: 10px 0 0; } .logo-left { text-align: left; } .logo-center { text-align: center; } .logo-right { text-align: right; } /* Main Menu */ .menu { font-size: 0; } #main-nav { margin: 30px 0 0; padding: 10px 0 0; position: relative; line-height: 1.8; z-index: 300; display: inline-block; width: 100%; border-top: 1px solid rgba(255,255,255,0.1); } .main-navbar { display: inline-block; vertical-align: middle; margin-top: 5px; } .navbar:before, .navbar:after { content: " "; display: table; } .navbar:after { clear: both } .navbar a { color: #fff } .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu li { position: relative } .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } .sf-menu > li { float: left } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block } .sf-menu a { display: block; position: relative; } .sf-menu ul ul { top: 0; left: 100%; } .sf-arrows .sf-with-ul:after { content: "\f347"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 12px/16px 'dashicons'; vertical-align: top; margin: 5px 0px 0 4px; } .sf-arrows ul .sf-with-ul:after { content: "\f345"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 12px/22px 'dashicons'; float: right; vertical-align: top; margin: 2px 0 0 4px; } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: white } .navbar-toggle { display: none; position: absolute; left: 15px; top: 13px; padding: 14px 13px; border-radius: 2px; background: #11609E; } .navbar-toggle .icon-bar { display: block; width: 25px; height: 2px; border-radius: 1px; background: #fff; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px } .navbar-nav a { -webkit-transition: 0.2s ease all; -o-transition: 0.2s ease all; transition: 0.2s ease all; color: #C6D9DB; display: block; padding: 5px 35px 15px 0; font-family: "Roboto Condensed", sans-serif; } .navbar-nav a:hover { text-decoration: none; color: #fff; } .navbar-nav ul { font-size: 14px; left: -15px; width: 220px; margin-top: 0; background-color: #0A5794; } .navbar-nav ul a { padding: 10px 15px; border-bottom: 1px solid #11609E; padding: 5px 15px; font-size: 16px; } .navbar-nav ul a:hover { color: #fff; } .navbar-nav ul .current-menu-item a, .navbar-nav ul .current_page_item a, .navbar-nav ul .current-menu-parent a, .navbar-nav ul .current_page_parent a { border-bottom: none; color: #fff; } .navbar-nav ul ul { right: 100%; } .navbar-nav .current-menu-item a, .navbar-nav .current_page_item a, .navbar-nav .current-menu-parent a { color: #fff; } .navbar-nav .current-menu-item ul a, .navbar-nav .current_page_item ul a, .navbar-nav .current-menu-parent ul a, .navbar-nav .current_page_parent ul a { color: #C6D9DB; } /* Search form in Header */ #search { float: right; background-color: #11609E; padding: 3px 10px 3px 0; margin: 0 0 10px; border-radius: 3px; } #search input { background: none; color: #fff; border: none; } #search button { text-indent: -2999px; background: url('images/search-icon.png') 50% 50% no-repeat; width: 19px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #search button { background: url('images/search-icon@2x.png') no-repeat 50% 50%; background-size: 19px 19px; } } #search ::-webkit-input-placeholder { color: #C6D9DB; } #search :-moz-placeholder { /* Firefox 18- */ color: #C6D9DB; } #search ::-moz-placeholder { /* Firefox 19+ */ color: #C6D9DB; } #search :-ms-input-placeholder { color: #C6D9DB; } /* =Content -------------------------------------------------------------- */ #content { line-height: 1.6; margin-bottom: 50px; } .column { display: inline; float: left; margin-right: 30px; width: 250px; } .column-content { width: 600px; word-wrap: break-word; } .column-last, .column-double.column-right .column-content { margin-right: 0; } .page-template-template-sidebar-right .column-last { float: right; } .column-double .column-last { margin-left: 30px; } .column-double .column-content, .column-double.column-content { width: 880px; margin-right: 0; } .column-title, #content .column-full, .column-full .column-content, .page-template-template-full-width-php .column-content { width: 1170px; margin: 0; } .title-header { font-family: "Roboto Condensed", sans-serif; font-weight: 600; font-size: 36px; word-wrap: break-word; margin: 0 0 20px; } /* Breadcrumb */ #crumbs { font-size: 14px; margin: 0 0 30px; padding: 0 0 5px; border-bottom: 1px solid #eee; } .posts .post, .posts .page { border-bottom: 1px solid #eee; margin-bottom: 35px; padding-bottom: 35px; } .home.page .posts .page { border-color: #EEE; font-size: inherit; margin-bottom: 20px; padding-bottom: 0; } .posts .post h2, .posts .page h2 { font-size: 36px; font-family: "Roboto Condensed", sans-serif; font-weight: normal; line-height: 1.5; margin: 0; } .posts .post div.thumb { margin: 0 0 20px; } .posts .format-aside .entry-content a:hover { text-decoration: none; } .posts .sticky { border-bottom: 0; background-color: #f1f1f1; margin-bottom: 20px; padding: 20px; } div.single h2, div.single h3, div.single h4, div.single h5, div.single h6 { clear: both; margin: 15px 0 15px; font-family: "Roboto Condensed", sans-serif; font-weight: bold; } .column-content table { font-size: 14px; } div.single h3 { font-size: 20px; } div.single h4 { font-size: 18px; } div.single h5 { font-size: 16px; } div.single h6 { font-size: 14px; } div.single .gallery .gallery-item { display: -moz-inline-stack; display: inline-block; *display: inline; vertical-align: top; zoom: 1; } div.single .gallery { clear: both; margin: auto; text-align: center; } div.single .gallery-caption { margin-left: 0; } .gallery-item { margin: 0; } .column-content img, .single-attachment #content img, #content .gallery-item img { -moz-box-sizing: border-box; box-sizing: border-box; border: none; } .column-content img.wp-smiley { border: none; } .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item { margin: 5px; } #content .gallery-columns-4 .gallery-item { width: 23%; } #content .gallery-columns-5 .gallery-item { width: 18%; } #content .gallery-columns-6 .gallery-item { width: 14%; } #content .gallery-columns-7 .gallery-item { width: 12%; } #content .gallery-columns-8 .gallery-item { width: 10%; } #content .gallery-columns-9 .gallery-item { width: 9%; } .wp-caption { max-width: 100%; } .entry-meta, .entry-caption, .wp-caption-text { color: #666; font-size: 14px; margin: 0 0 20px; } .entry-meta { border-bottom: 1px solid #eee; padding: 0 0 20px; margin: 0 0 20px; } .attachment .entry-attachment { text-align: center; } .attachment .entry-meta { margin: 15px 0; } .sep { color: #999; } .sticky .sep, .search-results .page .sep { display: none; } p.pages { clear: both; } #wrap a.highlight, #wrap h2.heading a, #wrap .entry-meta a { color: #666; } #wrap a.highlight:hover, #wrap h2.heading a:hover, #wrap .entry-meta a:hover { text-decoration: underline; } /* =Comments -------------------------------------------------------------- */ .commentlist { list-style-type: none; margin: 0; padding: 1em 0; } .commentlist a { text-decoration: none; } .commentlist a:hover { text-decoration: underline; } .commentlist div.comment-body { position: relative; } .commentlist div.reply { position: absolute; right: 0; top: 0; } .commentlist > li, .commentlist .comment { border-top: solid 1px #eee; font-size: 14px; list-style-type: none; margin: 0 0 10px; padding: 15px 0 5px; } .commentlist li.comment ul.children { padding: 10px 0 0; } .commentlist li.comment ul.children li { clear: left; margin: 0 10px 10px 10px; } .commentlist img.avatar { display: inline; float: left; margin: 0 15px 15px 0; } .commentlist cite { font-size: 16px; font-style: normal; font-weight: bold; margin-left: 0; } .commentlist cite.author { color: #333; } .commentlist span.says { display: none; } .commentlist .commentmetadata { font-size: 14px; line-height: 1.8; margin-bottom: 5px; } .commentlist blockquote { font-size: 12px; } .commentlist li.bypostauthor { background-color: #fff; } #commentform { clear: left; margin-top: 15px; } #commentform code { font-size: 12px; } #commentform p { font-size: 12px; margin-bottom: 10px; overflow: hidden; } #commentform label { font-size: 14px; font-weight: normal; line-height: 2.5; margin-left: 10px; text-transform: none; } #commentform .subscribe-label { margin: 0; } .depth-4 #commentform label { margin: 0; } #commentform input[type="text"] { float: left; } #commentform textarea { height: 100px; margin-bottom: 10px; width: 100%; } #commentform input, #commentform textarea { border: 1px solid #ccc; color: #333; max-width: 100%; } #commentform #submit { border: none; color: #fff; cursor: pointer; } #wrap .navigation a { display: inline-block; font-weight: normal; font-size: 18px; } #wrap .comment-reply-link, #wrap #cancel-comment-reply-link { display: inline-block; font-weight: normal; font-size: 14px; } #wrap .comment-reply-link { display: inline; } #wrap #cancel-comment-reply-link { display: inline-block; line-height: 1; position: relative; top: -4px; } #wrap .navigation a:hover, #wrap a.comment-reply-link:hover, #wrap #cancel-comment-reply-link:hover { text-decoration: none; } .navigation { font-size: 18px; margin: 10px 0; } .navigation > span { max-width: 49%; } .navigation .nav-previous { float: left; } .navigation .nav-next { float: right; } .navigation p { font-size: 10px; text-align: center; } .infinite-scroll .navigation { display: none; } /* =Footer -------------------------------------------------------------- */ #footer { border-top: solid 1px #EEE; color: #333; line-height: 1.6; padding: 25px 0; } #footer p.copy { color: #777; font-size: 14px; text-align: center; } #footer > ul.menu { display: block; margin: 0 0 20px; text-align: center; } #footer > ul.menu li { display: inline; font-size: 16px; margin-right: 25px; } #footer-column { display: inline; margin: 0 0 10px 10px; } #footer-column div.textwidget p { color: #777; line-height: 1.455; } #wpstats { margin: 1px auto; } .site-widgetized-section { margin: 0 0 30px; } .site-widgetized-section .widgets { width: 100%; margin: 0 auto; font-size: 0; } /* by default there are 4 widgets */ .site-widgetized-section .widgets .widget { width: 23%; margin-right: 2.6666%; display: inline-block; vertical-align: top; /* restore font size cleared because of inline-block */ font-size: 16px; } .site-widgetized-section .widgets .widget:last-child, .site-widgetized-section .widgets .widget:nth-child(4n + 4) { margin-right: 0; } .site-widgetized-section .widgets-3 .widget { width: 32%; margin-right: 2%; } .site-widgetized-section .widgets-3 .widget:last-child { margin-right: 0; } .site-widgetized-section .widgets-2 .widget { width: 48%; margin-right: 4%; } .site-widgetized-section .widgets-2 .widget:last-child { margin-right: 0; } .site-widgetized-section .widgets-1 .widget { width: 100%; margin-right: 0; } /* =Widgets -------------------------------------------------------------- */ .widget { margin: 0 0 20px; word-wrap: break-word; } .widget h3.heading { font-size: 24px; line-height: 1.2; font-weight: normal; font-family: "Roboto Condensed", sans-serif; line-height: inherit; border-bottom: 1px solid #eee; padding: 0 0 15px; margin: 0 0 20px; } .widget ul { margin-left: 0; } .widget ul li { list-style-type: none; } .widget ul.gallery li { display: inline; float: left; margin-bottom: 15px; margin-right: 10px; width: 75px; } .widget ul.gallery li.last { margin-right: 0; } .widget_pages > ul, .widget ul.menu { margin: 0 0 15px; } .widget_pages > ul ul, .widget ul.menu ul { border-left: solid 1px #eee; margin: 20px 0 0 20px; padding-left: 15px; } .widget_pages > ul li, .widget ul.menu li { border-bottom: solid 1px #eee; font-size: 16px; list-style-type: none; margin-bottom: 10px; padding-bottom: 10px; } .widget_pages > ul ul li, .widget ul.menu ul li { border: none; font-size: 14px; font-weight: normal; } #content .widget_pages > ul li.current_page_item > a, #content .widget ul.menu li.current-menu-item > a { color: #333; font-weight: bold; } #content .widget_pages > ul li.current_page_item > a:hover, #content .widget ul.menu li.current-menu-item > a:hover { color: #EEE; } .widget_calendar tfoot td { border-bottom: 1px solid #d1d1d1; border-top: 1px solid #d1d1d1; } .widget_calendar #next a { float: right; } .widget_rss ul, .widget_twitter ul, .widget_statscounter ul { margin: 0; } .widget_rss li, .widget_twitter li, .widget_statscounter li { list-style-type: none; } .widget_twitter li, .widget_rss li { margin-bottom: 15px; } .widget_rss li a, .widget_rss .rss-date { display: block; font-weight: bold; } .widget_rss cite, .widget_rss .rss-date, .widget_twitter .timesince { color: #777; font-style: italic; font-weight: normal; } .widget_rss .rssSummary, .widget_twitter .timesince { display: block; margin: 3px 0; } #header #searchform { text-align: right; } #searchform input { display: inline; max-width: 180px; text-align: left; } /* =Featured Posts Widget -------------------------------------------------------------- */ .academica-featured-posts-gallery ul { margin: 0; } .academica-featured-posts-gallery .posts li { list-style-type: none; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .widget_author_grid li, .academica-featured-posts-gallery { display: block; margin: 0 8px 15px 0; } .academica-featured-posts-gallery .post div.thumb { margin: 0 15px 0 0; float: left; } .academica-featured-posts-gallery .post h3 { margin: 0 0 10px; font-size: 18px; font-family: "Roboto Condensed", sans-serif; } /* =Featured Posts Gallery Widget -------------------------------------------------------------- */ .wpzoom-featured-posts-gallery .post h3 { margin: 0 0 10px; font-size: 26px; line-height: 1.3; font-family: "Roboto Condensed", sans-serif; } /* jQuery.mmenu CSS */ .mm-menu.mm-horizontal > .mm-panel { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } .mm-menu .mm-hidden { display: none } .mm-wrapper { overflow-x: hidden; position: relative; } .mm-menu, .mm-menu > .mm-panel { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 100; } .mm-menu { background: inherit; display: block; overflow: hidden; padding: 0; } .mm-menu > .mm-panel { background: inherit; -webkit-overflow-scrolling: touch; overflow: scroll; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 100px 20px 20px; -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } .mm-menu > .mm-panel.mm-opened { -webkit-transform: translate(0%, 0); -moz-transform: translate(0%, 0); -ms-transform: translate(0%, 0); -o-transform: translate(0%, 0); transform: translate(0%, 0); } .mm-menu > .mm-panel.mm-subopened { -webkit-transform: translate(-30%, 0); -moz-transform: translate(-30%, 0); -ms-transform: translate(-30%, 0); -o-transform: translate(-30%, 0); transform: translate(-30%, 0); } .mm-menu > .mm-panel.mm-highest { z-index: 1 } .mm-menu .mm-list { padding: 20px 0 } .mm-menu > .mm-list { padding-bottom: 0 } .mm-menu > .mm-list:after { content: ''; display: block; height: 40px; } .mm-panel > .mm-list { margin-left: -20px; margin-right: -20px; } .mm-panel > .mm-list:first-child { padding-top: 0 } .mm-list, .mm-list > li { list-style: none; display: block; padding: 0; margin: 0; } .mm-list { font: inherit; font-size: 14px; } .mm-list a, .mm-list a:hover { text-decoration: none } .mm-list > li { position: relative } .mm-list > li > a, .mm-list > li > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: inherit; font-size: 16px; line-height: 20px; display: block; padding: 10px 10px 10px 20px; margin: 0; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after { content: ''; border-bottom-width: 1px; border-bottom-style: solid; display: block; width: 100%; position: absolute; bottom: 0; left: 0; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after { width: auto; margin-left: 20px; position: relative; left: auto; } .mm-list a.mm-subopen { background: rgba(3, 2, 1, 0); width: 40px; height: 100%; padding: 0; position: absolute; right: 0; top: 0; z-index: 2; } .mm-list a.mm-subopen:before { content: ''; border-left-width: 1px; border-left-style: solid; display: block; height: 100%; position: absolute; left: 0; top: 0; } .mm-list a.mm-subopen.mm-fullsubopen { width: 100% } .mm-list a.mm-subopen.mm-fullsubopen:before { border-left: none } .mm-list a.mm-subopen + a, .mm-list a.mm-subopen + span { padding-right: 5px; margin-right: 40px; } .mm-list > li.mm-selected > a.mm-subopen { background: transparent } .mm-list > li.mm-selected > a.mm-fullsubopen + a, .mm-list > li.mm-selected > a.mm-fullsubopen + span { padding-right: 45px; margin-right: 0; } .mm-list a.mm-subclose { text-indent: 20px; padding-top: 30px; margin-top: -20px; } .mm-list > li.mm-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 10px; text-transform: uppercase; text-indent: 20px; line-height: 25px; padding-right: 5px; } .mm-list > li.mm-spacer { padding-top: 40px } .mm-list > li.mm-spacer.mm-label { padding-top: 25px } .mm-list a.mm-subopen:after, .mm-list a.mm-subclose:before { content: ''; border: 2px solid transparent; display: inline-block; width: 7px; height: 7px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin-bottom: -5px; position: absolute; bottom: 50%; } .mm-list a.mm-subopen:after { border-top: none; border-left: none; right: 18px; } .mm-list a.mm-subclose:before { border-right: none; border-bottom: none; margin-bottom: -15px; left: 22px; } .mm-menu.mm-vertical .mm-list .mm-panel { display: none; padding: 10px 0 10px 10px; } .mm-menu.mm-vertical .mm-list .mm-panel li:last-child:after { border-color: transparent } .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel { display: block } .mm-menu.mm-vertical .mm-list > li > a.mm-subopen { height: 40px } .mm-menu.mm-vertical .mm-list > li > a.mm-subopen:after { top: 16px; bottom: auto; } .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen { height: 25px } html.mm-opened .mm-page { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) } .mm-menu { background: #222; color: rgba(255, 255, 255, 0.6); } .mm-menu .mm-list > li:after { border-color: rgba(0, 0, 0, 0.15) } .mm-menu .mm-list > li > a.mm-subclose { background: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before { border-color: rgba(255, 255, 255, 0.3) } .mm-menu .mm-list > li > a.mm-subopen:before { border-color: rgba(0, 0, 0, 0.15) } .mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu .mm-list > li.mm-selected > span { background: rgba(0, 0, 0, 0.1) } .mm-menu .mm-list > li.mm-label { background: rgba(255, 255, 255, 0.05) } .mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-vertical .mm-list li.mm-opened > ul { background: rgba(255, 255, 255, 0.05) } .mm-page { box-sizing: border-box; position: relative; } .mm-slideout { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-opened { overflow: hidden; position: relative; } html.mm-opened body { overflow: hidden } html.mm-background .mm-page { background: inherit } #mm-blocker { background: rgba(3, 2, 1, 0); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; } html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker { display: block } .mm-menu.mm-offcanvas { display: none; position: fixed; } .mm-menu.mm-current { display: block } .mm-menu { width: 80%; min-width: 140px; max-width: 440px; } html.mm-opening .mm-slideout { -webkit-transform: translate(80%, 0); -moz-transform: translate(80%, 0); -ms-transform: translate(80%, 0); -o-transform: translate(80%, 0); transform: translate(80%, 0); } @media all and (max-width: 175px) { html.mm-opening .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(440px, 0); -moz-transform: translate(440px, 0); -ms-transform: translate(440px, 0); -o-transform: translate(440px, 0); transform: translate(440px, 0); } }