/* Theme Name: Acuarela Theme URI: http://ebyb.eu/themes/acuarela/ Author: acalfieri Author URI: http://ebyb.eu Description: Acuarela is a light, fully functional WordPress theme, written with the intention of minimising code. It was designed to be fully responsive by taking the mobile-first approach. Besides a customizable header, it features the full range of post formats, two menu locations, a sidebar widget area and three widget areas in the footer. It is accesibility ready and has Gutenberg support. Version: 1.0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, photography, one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-header, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: acuarela This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /** * Table of Contents * * 1.0 - Normalize * 2.0 - Genericons * 3.0 - Typography * 4.0 - Elements * 5.0 - Forms * 6.0 - Navigation * 6.1 - Links * 6.2 - Menus * 6.3 - Social Links * 6.4 - Post Navigation * 6.5 - Blog Navigation and Pagination * 7.0 - Accessibility * 8.0 - Alignments * 9.0 - Clearings * 10.0 - Widgets * 11.0 - Content * 11.1 - Header * 11.2 - Posts and Pages * 11.3 - Post Formats * 11.4 - Comments * 11.5 - Sidebar * 11.6 - Footer * 12.0 - Media * 12.1 - Captions * 12.2 - Galleries * 13.0 - Multisite * 14.0 - Media Queries * 14.1 - >= 710px * 14.2 - >= 783px * 14.3 - >= 910px * 14.4 - >= 985px * 14.5 - >= 1200px * 15.0 - Print */ /** * 1.0 - Normalize * * Normalizing styles have been helped along thanks to the fine work of * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ .arima-madurai { font-family: 'Arima Madurai'; } .cinzel-decorative { font-family: 'Cinzel Decorative'; } .lato { font-family: 'Lato'; } .open-sans { font-family: 'Open Sans'; } .source-sans-pro { font-family: 'Source Sans Pro'; } .inconsolata { font-family: 'Inconsolata'; } .small-caps{ font-variant: small-caps; } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; overflow-wrap: break-word; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } 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; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } hr { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } code, kbd, pre, samp { font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } select { text-transform: none; } button { overflow: visible; } button, input, select, textarea { max-width: 100%; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; opacity: .5; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 0.4375em; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #ccc; margin: 0 0 1.497em; padding: 0.875em; } fieldset > :last-child { margin-bottom: 0; } legend { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } optgroup { font-weight: bold; } /** * 2.0 - Genericons */ .bypostauthor > article .fn:before, .menu-item-has-children a:after, .social-navigation a:before, .dropdown-toggle:after, .comment-reply-title small a:before, .pagination .genericon, .post-format .genericon { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-family: "Genericons"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-align: center; text-decoration: inherit; text-transform: none; vertical-align: top; } .pagination .genericon, .navigation .genericon { vertical-align: text-bottom; font-size: 1.5em; font-weight: bold; /*! line-height: 1.497; */ } .posts-navigation .genericon { line-height: 1.4; } .attachment-meta .genericon, .entry-meta .genericon, .entry-meta .post-edit-link .genericon, .entry-meta .entry-author .genericon, .entry-meta .cat-links .genericon, .tags-links .genericon, .entry-meta .comments-link .genericon, .entry-date .genericon, .full-size-link .genericon, .parent-post-link .genericon, .comment-reply-link .genericon, .comment-edit-link .genericon, .featured-post .genericon { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font: normal 18px/1 Genericons; text-decoration: inherit; vertical-align:text-bottom; } .full-size-link .genericon, .parent-post-link .genericon { margin: 0 0 0 3px; } /** * 3.0 - Typography */ body { font-family: Lato, Helvetica, sans-serif; } body, button, input, select, textarea { color: #222; font-size: 1rem; line-height: 1.497; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: 700; } h1 { font-size: 1.728em; margin: 0 0 0.3596em; } h2 { font-size: 1.728em; margin: 0.3596em 0; } h3 { font-size: 1.44em; margin: 0.339em 0; } h4 { font-size: 1.2em; margin: 0.720em 0; } h5 { font-size: 1em; margin: 0.898em 0; } h6 { font-size: 0.833em; margin: 0.898em 0; } p { margin: 0 0 1.497em; } dfn, cite, em, i { font-style: italic; } blockquote { border: 0 solid #333; border-left-width: 4px; color: #707070; font-style: italic; line-height: 1.5; margin: 0 0 1.5em; padding: 0 0 0 1.078667em; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote p { margin-bottom: 1.5em; } blockquote cite, .wp-block-quote cite, blockquote small, .wp-block-quote small { color: #555; display: block; font-size: 0.875em; line-height: 1.5; margin: 0.539em 0 0; } blockquote cite:before, blockquote small:before { content: "\2014\00a0"; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote strong, blockquote b { font-weight: 400; } blockquote > :last-child { margin-bottom: 0; } address { font-style: italic; margin: 0 0 1.497em; } code, kbd, tt, var, samp, pre { font-family: Inconsolata, monospace; } pre { border: 1px solid #ccc; font-size: 16px; font-size: 1rem; line-height: 1.25; margin: 0 0 1.497em; max-width: 100%; overflow: auto; padding: 1.497em; white-space: pre; white-space: pre-wrap; overflow-wrap: break-word; } code { background-color: #ddd; padding: 0.125em 0.25em; color: #222; } abbr, acronym { border-bottom: 1px dotted #ccc; cursor: help; } mark, ins { background: #004c73; color: #fdfdfd; padding: 0.125em 0.25em; text-decoration: none; } big { font-size: 125%; } /** * 4.0 - Elements */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { background: #f2f2f2; background-size: cover; /* Fallback for when there is no custom background color defined. */ } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.497em; } ul, ol { margin: 0 0 1.497em 1.25em; padding: 0; } ul { list-style: disc; } ol { list-style: decimal; margin-left: 1.5em; } li > ul, li > ol { margin-bottom: 0; } dl { margin: 0 0 1.497em; } dt { font-weight: 700; } dd { margin: 0 0 1.497em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ vertical-align: middle; } del { opacity: 0.8; } table, th, td { border: 1px solid #ccc; } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 1.497em; table-layout: fixed; /* Prevents HTML tables from becoming too wide */ width: 100%; } caption, th, td { font-weight: normal; text-align: left; } th { border-width: 0 1px 1px 0; font-weight: 700; } td { border-width: 0 1px 1px 0; } th, td { padding: 0.4375em; } /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder { color: #777; font-family: Lato, Helvetica, sans-serif; } :-moz-placeholder { color: #777; font-family: Lato, Helvetica, sans-serif; } ::-moz-placeholder { color: #777; font-family: Lato, Helvetica, sans-serif; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } :-ms-input-placeholder { color: #777; font-family: Lato, Helvetica, sans-serif; } /** * 5.0 - Forms */ input { line-height: normal; } .wp-block-button a, button, button[disabled]:hover, button[disabled]:focus, input[type="button"], input[type="button"][disabled]:hover, input[type="button"][disabled]:focus, input[type="reset"], input[type="reset"][disabled]:hover, input[type="reset"][disabled]:focus, input[type="submit"], input[type="submit"][disabled]:hover, input[type="submit"][disabled]:focus { background: #004c73; border: 0; border-radius: 2px; color: #fdfdfd; font-family: Lato, Helvetica, sans-serif; font-weight: 700; letter-spacing: 0.046875em; line-height: 1; padding: 0.84375em 0.875em 0.78125em; text-transform: uppercase; } .wp-block-button a:hover, .wp-block-button a:focus, button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { background-color: #067f64; } .wp-block-button a:focus, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus { outline-width: auto; outline-style: auto; outline: 2px solid; outline-color: Highlight; outline-color: -webkit-focus-ring-color; outline-offset: 2px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea { background: #fdfdfd; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); border: 1px solid #ccc; border-radius: 2px; color: #777; padding: 0.2em 0.4375em; width: 100%; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus { background-color: #fdfdfd; border-color: #004c73; color: #333; } .post-password-form { margin-bottom: 1.497em; } .post-password-form label { color: #777; display: block; font-family: Lato, Helvetica, sans-serif; font-size: 13px; font-size: 0.8125rem; letter-spacing: 0.07em; line-height: 1.618; margin-bottom: 1.497em; text-transform: uppercase; } .post-password-form input[type="password"] { margin-top: 0.4375em; } .post-password-form > :last-child { margin-bottom: 0; } .search-form { display: flex; position: relative; } header .search-form { display: none; } input[type="search"].search-field { border-radius: 2px 0 0 2px; /*! width: -webkit-calc(100% - 42px); */ /*! width: calc(100% - 42px); */ } .search-submit .genericon:before { font-size: 24px; } .search-submit { border-radius: 0 2px 2px 0; bottom: 0; overflow: hidden; padding: 0; position: relative; right: 0; top: 0; width: 42px; } /** * 6.0 - Navigation */ /** * 6.1 - Links */ a { background-color: transparent; color: #004c73; text-decoration: dotted underline; border-bottom: 1px dotted; } a:hover, a:focus { color: #067f64; } /** * 6.2 - Menus */ .site-navigation ul { list-style: none; margin: 0; } .site-navigation ul ul { margin-left: 1rem; } .site-navigation a { display: block; color: #004c73; font-size: 1em; text-transform: uppercase; } .site-navigation a:hover, .site-navigation a:focus { color: #777; } .site-navigation .current_page_item > a, .site-navigation .current_page_ancestor > a, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a { font-weight: 900; } .primary-navigation { font-size: 1em; padding: 0; } .primary-navigation li { display: inline-block; border-top: 1px solid #ddd; position: relative; } .primary-navigation li:first-of-type { /*! border-top: 0 */ } .primary-navigation a { line-height: 1.3125; padding: 0.84375em 0; } .primary-navigation ul ul { background-color: #fdfdfd; margin: 0; padding-left: 0; /* This is important to reset the padding */ position: absolute; left: -999em; /* -999 so it is not visible until hover. */ z-index: 99999; } .primary-navigation li li { display: block; } .primary-navigation ul ul ul { left: -999em; /* -999 so it is not visible until hover. */ top: 0; } .primary-navigation ul ul a { white-space: normal; } .primary-navigation .menu-item-has-children > a { margin-right: 60px; } .menu-toggle:before, .menu-toggle:after { font: normal 16px/1 Genericons; vertical-align: bottom; } .menu-toggle { cursor: pointer; display: block; height: 2.7em; width: 2.7em; overflow: hidden; position: absolute; top: 0.6em; right: 0.6em; z-index: 999; } .menu-toggle, .menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus { margin: 0; padding: 0; background-color: #f7f7f7; border: solid 1px #004c73; border-radius: 2px; color: transparent; } .menu-toggle:before { color: #004c73; position: absolute; right: 0; top: 0; font-size: 20px; content: "\f419"; padding: 10px; z-index: 99; } .toggled-on .menu-toggle:before { content: "\f406"; } /* Primary Navigation */ .primary-navigation .menu, .social-navigation .social-menu { display: none; } .toggled-on #navigation { display: block; position: relative; /* changed from absolute */ width: 100%; left: 0; top: 0.1em; /* changed from 4 */ background-color: #fdfdfd; box-shadow: 0px 1px 3px -1px #3c4b44; z-index: 2; } #masthead.toggled-on { box-shadow: none; } .toggled-on .site-identity { width: 100%; } .toggled-on .primary-navigation .menu { display: block; position: relative; border-bottom: 1px solid #ccc; margin-left: 0px; } .toggled-on .social-navigation .social-menu { display: flex; justify-content: space-evenly; padding: 0.5em; } .toggled-on #pre-menu { display: none; } .toggled-on li { display: block; } .toggled-on .menu li > ul { background-color: #fdfdfd; display: none; margin-left: 10px; position: relative; top:0; left: 0; } .toggled-on .menu li > ul.toggled-on { display: block; } .toggled-on .menu li a { width: 100%; word-break: break-all; text-decoration: none; padding-left: 0.5em; border-bottom: 0; } .toggled-on .menu ul li:hover > ul, .toggled-on .menu ul li:focus > ul { position: relative; left: 0; top: 0; } .toggled-on .menu li, .toggled-on .menu li li { height: auto !important; /* esto hace que cuando se abre un submenu se corre todo para abajo. */ } .toggled-on .menu li:hover, .toggled-on .menu li:focus, .toggled-on .menu li.focus { background-color: #fdfdfd; color: #004c73; outline-offset: -1px; } .toggled-on .menu li:hover a:hover, .toggled-on .menu li:focus a:hover, .toggled-on .menu li.focus a:hover, .toggled-on .menu li:hover a:focus, .toggled-on .menu li:focus a:focus, .toggled-on .menu li.focus a:focus { background-color: #2c6888; color: #fdfdfd; } .dropdown-toggle { background-color: #fdfdfd; border: 0; border-radius: 0; text-transform: none; color:#004c73; padding: 0; height: 3em; width: 3em; position: absolute; right: 0; top: 0; } .dropdown-toggle:hover { background-color: #2c6888; color: #fdfdfd; } .dropdown-toggle:focus { background-color: #fdfdfd; color: #004c73; } .dropdown-toggle .genericon { border-left: 1px solid #ccc; } .dropdown-toggle .genericon:before { font-size: 1.5em; position: relative; width: 2em; padding: 0.5em 0.6em 0.5em 0.5em; box-sizing:border-box ; } .dropdown-toggle.toggle-on:after { border-left: 1px solid #ccc; } .dropdown-toggle:focus { outline-offset: -4px; } .dropdown-toggle:focus:after { border-color: transparent; } #navigation { width: 1%; } #main-menu { } #main-menu.toggled-on, .no-js #main-menu { display: block; } /** * 6.3 - Social Links */ .social-menu { } .social-menu li { margin: 0; } .social-menu a { border: 1px solid #ccc; border-radius: 50%; color: #111; display: block; position: relative; width: 35px; height: 35px; } .social-menu a:hover, .social-menu a:focus { background-color: #fdfdfd; } .social-menu a:before { content: "\f415"; height: 33px; line-height: 33px; text-align: center; width: 33px; } .social-menu a:hover:before, .social-menu a:focus:before { color: #004c73; } .social-menu a[href*="codepen.io"]:before { content: "\f216"; } .social-menu a[href*="digg.com"]:before { content: "\f221"; } .social-menu a[href*="dribbble.com"]:before { content: "\f201"; } .social-menu a[href*="dropbox.com"]:before { content: "\f225"; } .social-menu a[href*="facebook.com"]:before { content: "\f203"; } .social-menu a[href*="flickr.com"]:before { content: "\f211"; } .social-menu a[href*="foursquare.com"]:before { content: "\f226"; } .social-menu a[href*="plus.google.com"]:before { content: "\f206"; } .social-menu a[href*="github.com"]:before { content: "\f200"; } .social-menu a[href*="instagram.com"]:before { content: "\f215"; } .social-menu a[href*="linkedin.com"]:before { content: "\f208"; } .social-menu a[href*="path.com"]:before { content: "\f219"; } .social-menu a[href*="pinterest.com"]:before { content: "\f210"; } .social-menu a[href*="getpocket.com"]:before { content: "\f224"; } .social-menu a[href*="polldaddy.com"]:before { content: "\f217"; } .social-menu a[href*="reddit.com"]:before { content: "\f222"; } .social-menu a[href*="skype.com"]:before { content: "\f220"; } .social-menu a[href*="stumbleupon.com"]:before { content: "\f223"; } .social-menu a[href*="tumblr.com"]:before { content: "\f214"; } .social-menu a[href*="twitter.com"]:before { content: "\f202"; } .social-menu a[href*="vimeo.com"]:before { content: "\f212"; } .social-menu a[href*="wordpress.com"]:before, .social-menu a[href*="wordpress.org"]:before { content: "\f205"; } .social-menu a[href*="youtube.com"]:before { content: "\f213"; } .social-menu a[href^="mailto:"]:before { content: "\f410"; } .social-menu a[href*="spotify.com"]:before { content: "\f515"; } .social-menu a[href*="twitch.tv"]:before { content: "\f516"; } .social-menu a[href$="/feed/"]:before { content: "\f413"; } /** * 6.4 - Post Navigation */ .post-navigation { margin: 1em 0; } .post-navigation a, .image-navigation a { text-decoration: none; border: 0; } .post-navigation .nav-links, .image-navigation .nav-links { text-align: center; } .post-navigation .meta-nav { font-size: 13px; font-size: 0.8125rem; letter-spacing: 0.08em; line-height: 1.618; margin-bottom: 0.539em; text-transform: uppercase; } .post-navigation .post-title { font-weight: 700; } .post-navigation a:hover, .post-navigation a:focus, .image-navigation a:hover, .image-navigation a:focus { box-shadow: 0px 0px 1px 1px #067f64; border-radius: 2px; } .post-navigation .nav-previous, .image-navigation .nav-previous { width: 50%; text-align: left; margin-left: 0; } .post-navigation .nav-previous a, .image-navigation .nav-previous a { padding-right: 0.4em; } .post-navigation .nav-next, .image-navigation .nav-next { width: 50%; text-align: right; margin-right: 0; } .post-navigation .nav-next a, .image-navigation .nav-next a { padding-left: 0.4em } .nav-links:after{ content: ""; display: block; clear: both; } .post-navigation .nav-previous:hover, .post-navigation .nav-next:hover, .image-navigation .nav-previous:hover, .image-navigation .nav-next:hover { color: #067f64; } .post-navigation .nav-previous:focus, .post-navigation .nav-next:focus, .image-navigation .nav-previous:focus, .image-navigation .nav-next:focus { color: #067f64; } .more-link { color: #004c73; font-size: 0.9em; } .more-link:hover, .more-link:focus { color: #067f64; box-shadow: 0px 0px 1px 1px #067f64; border-radius: 2px; } /** * 6.5 - Blog Navigation and Pagination */ .posts-navigation { margin: 2.121em 0 1.7675em; padding: 0.1em 0; background-color: #f2f2f2; border: 1px solid #ddd; } .posts-navigation a { text-decoration: none; border: 0; } .posts-navigation .nav-links { font-family: 'Arima Madurai'; font-weight: 800; text-transform: uppercase; } .posts-navigation .nav-next, .posts-navigation .nav-previous { margin: 1em 0; padding-left: 0.5em; text-align: left; box-sizing: border-box; } .posts-navigation .nav-next { padding-right: 0.5em; text-align: right; } .posts-navigation .nav-next a { padding: 0.3em 0 0 0.5em; } .posts-navigation .nav-previous a { padding: 0.3em 0.5em 0 0; } .posts-navigation a:hover, .posts-navigation a:focus { box-shadow: 0px 0px 1px 1px #067f64; border-radius: 2px; } .posts-navigation .nav-previous .genericon { margin-right: 0.5em; } .posts-navigation .nav-next .genericon { margin-left: 0.5em; } .pagination { margin: 1em 0; background-color: #f7f7f7; padding: 3em 0; border: 1px solid #ddd; } .pagination .nav-links { font-weight: 700; line-height: 1.8; text-transform: uppercase; text-align: center; /* maybe */ } .pagination .page-numbers { display: inline-block; margin: 0 0.5em 0 0; background-color: #004c73; border: 1px solid #004c73; color: #fdfdfd; width: 2em; height: 2em; line-height: 1.8em; } .pagination a:hover, .pagination a:focus { background-color: #067f64; border: 1px solid #067f64; color: #fdfdfd; } .pagination .current { background-color: transparent; border: transparent; color: #333; } .pagination .dots { background-color: transparent; color: #004c73; border: 0; } .pagination .prev, .pagination .next { border: 0; width: auto; background-color: transparent; color: #004c73; /*! margin: 0 0.5em; */ } .pagination a.prev:hover, .pagination a.next:hover, .pagination a.prev:focus, .pagination a.next:focus { border: transparent; background-color: transparent; color: #067f64; } /** * 7.0 Accessibility */ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; position: absolute !important; /* many screen reader and browser combinations announce broken words as they would appear visually */ overflow-wrap: normal !important; } /* must have higher specificity than alternative color schemes inline styles */ .skip-link { background-color: #fdfdfd; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); color: #1d779f; display: block; font: bold 14px/normal "Noto Sans", sans-serif; left: -9999em; top: -9999em; outline: none; padding: 15px 23px 14px; text-decoration: none; text-transform: none; } .skip-link:focus { color: #1d779f; clip: auto; height: auto; width: auto; left: 6px; top: 7px; z-index: 100; /* Above WP toolbar */ } .logged-in .site .skip-link { box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); font: bold 14px/normal "Noto Sans", sans-serif; } :target:before { content:""; display:block; height: 7em; /* fixed header height*/ margin:-7em 0 0; /* negative fixed header height */ } /** * 8.0 - Alignments */ .alignleft { float: left; margin: 0.375em 1.497em 1.497em 0; } .alignright { float: right; margin: 0.375em 0 1.497em 1.497em; } .aligncenter { clear: both; display: block; margin: 0 auto 1.497em; } img.alignleft{ float: left; margin: 0.375em 1.497em 1.497em 0; } img.alignright{ float: right; margin: 0.375em 0 1.497em 1.497em; } blockquote.alignleft { width: 40%; margin: 0.315em 1.5em 1.5em 0; } blockquote.alignright { width: 40%; margin: 0.315em 0 1.5em 1.5em; } blockquote.aligncenter { margin-bottom: 1.5em; } /** * 9.0 - Clearings */ header:before, header:after, main:before, main:after, footer:before, footer:after, article:before, article:after, section:before, section:after, #footer-widget-area:before, #footer-widget-area:after, .entry-content:before, .entry-content:after { content: ""; display: block; } header:after, main:after, footer:after, article:after, section:after, #footer-widget-area:after, .entry-content:after { clear: both; } /** * 10.0 - Widgets */ .widget-area { padding: 1em; background-color: #f7f7f7; border: 1px solid #ddd; } .widget-area .widget { margin-bottom: 1em; } /* Calendar Widget */ .widget-area a { color: #004c73; border: 0; } .widget-area a:hover, .widget-area a:focus { color: #067f64; text-decoration: underline dotted; border: 1px dotted; } .widget-area .tagcloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-around; align-content: space-between; } .widget-area .tagcloud a { margin:auto; padding: 0 0.2em; border-radius: 2px; text-decoration: underline; } .widget-area .tagcloud a:hover, .widget-area .tagcloud a:focus{ background-color: #f7f7f7; color: #004c73; box-shadow: 0px 0px 1px 1px #3c4b44; text-decoration: none; } .widget_calendar table { margin: 0; line-height: 2; } .widget_calendar caption { font-weight: 700; line-height: 1.497; margin:0.5em 0; text-align: left; text-transform: uppercase; } .widget_calendar thead th { background-color: rgba(255, 255, 255, 0.1); } .widget_calendar tbody td, .widget_calendar thead th { text-align: center; padding:0; } .widget_calendar tbody a { background-color: transparent; color: #004c73; font-weight: 700; text-decoration: none; display: block; } .widget_calendar tbody a:hover { background-color: #067f64; color: #f7f7f7; } .widget_calendar tbody a:hover { } .widget_calendar #prev { padding-left: 5px; } .widget_calendar #next { padding-right: 5px; text-align: right; } /* ------------------ Mobile First, Content ------------------------- */ /** * 11.0 - Content */ html, body { margin: 0 auto; } #container { position: relative; height: auto; /*!mportant*/ min-height: 100%; width: 100%; margin: 0 auto; } main { min-height: calc(100vh - 4em); } #main-content { width: 100%; padding: 0.5em; font-size: 1em; letter-spacing:0.02em; } .sidebars { } .flex-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .post, .type-page, .not-found { background-color: #f7f7f7; width: 100%; border: 1px solid #ddd; padding: 1em; margin: auto auto 0.5em; } .block-color { height: 100%; text-align: center; font-size: 4em; padding: 2em 2em; } /** * 11.1 - Header */ #masthead { min-height: 4em; width: 100%; background-color: #fdfdfd; box-shadow: 0px 1px 3px -1px #3c4b44; z-index: 999; } /*---- Formatting of the logo part -----*/ .site-identity { width: 100%; margin: auto; } .home-link { width: 92%; min-height: 4em; margin: auto; text-decoration: none; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border: 0; } .title-description { margin-left: 8px; } .site-title { font-family: 'Arima Madurai', Georgia, serif; font-weight: 900; margin: 0; } .home-link:hover .site-title, .home-link:focus .site-title { color: #067f64; } .site-description { position: absolute; width: 0; height: 0; clip: rect(1px, 1px, 1px, 1px); color: #222; font-variant: small-caps; font-size: 1.1em; line-height: 1.1; letter-spacing: 0.02em; } .site-identity img { margin: 0.25em 0; max-height: 48px; max-width: 192px; } /** * 11.2 - Posts and Pages */ .entry-header { position: relative; margin: 0 0 1.497em; } .featured-image .entry-header { margin: 0.5em; padding: 1em; background-color: #f7f7f7; } .entry-title { font-family: 'Arima Madurai', Georgia, serif; font-weight: 800; color: #004c73; margin: 0; overflow-wrap: anywhere; } .entry-title a { color: #004c73; text-decoration: none; border: 0; } .entry-title a:hover, .entry-title a:focus { color: #067f64; text-decoration: underline dotted; } .post-thumbnail, .page-thumbnail { position: relative; padding: 0; margin: 0 0 1.497em; } .post-thumbnail img, .page-thumbnail img { width: 100%; margin: auto; } .post-thumbnail:hover img, .page-thumbnail:hover img, .featured-image:hover img, .post-thumbnail a:focus, .page-thumbnail a:focus, .featured-image a:focus { opacity: 0.85; } .single .entry-excerpt { margin: 0; font-weight: 700; color: #656565; } .featured-image { position: relative; width: 100%; padding: 0; margin: 0; } .featured-image img { width: 100%; } .post-meta-key { display: none; } .entry-content { padding: 0; margin: 1.497rem 0 0; } .entry-footer { } .entry-meta { clear: both; color: #555; font-size: 0.75em; font-weight: 400; letter-spacing: 0.008em; text-transform: uppercase; } .entry-meta > span { } .entry-meta a { color: #656565; text-decoration: none; border: 0; } .entry-meta a:hover, .entry-meta a:focus { color: #000; text-decoration: underline; } .entry-meta .comments-link { float: right; } .entry-meta .comments-link a:before { margin-right: 2px; } .entry-content .edit-link a:before, .entry-meta .edit-link a:before, .entry-meta .post-edit-link:before { } .sticky { background-color: #fff; border: 1px solid #aaa; margin: auto auto 0.5em; padding: 1em 0.5em; } .sticky .entry-date { display: none; } .featured-post { clear: both; color: #222; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0.008em; text-transform: uppercase; position:absolute; top:0; right: 0; } .featured-post:before, .featured-post .genericon { margin-right: 3px; position: relative; top: 1px; color: #9f0000; font-size: 1.4rem; } .cat-links { font-weight: 700; font-size: 1em; text-transform: uppercase; } .cat-links .genericon { color: #555; text-decoration: none; } .cat-links a:hover { color: #333; } .byline { display: none; } .entry-meta .byline, .group-blog .byline { display: inline; font-size: 1em; margin-left: 4px; } .entry-meta .byline a:before { } .single .byline { margin-left: 0; } .single .post .entry-author, .single .post .entry-date { font-weight: 700; text-transform: uppercase; text-decoration: none; color: #333; border: 0; } .single .entry-author:hover, .single .entry-author:focus { color: #004c73; text-decoration: underline; } .single .post .entry-date:hover, .single .post .entry-date:focus { color: #777; text-decoration: underline; } .archive-header, .page-header { margin: 0 auto 1em; padding: 1em; background-color: #f7f7f7; border: 1px solid #ddd; } .archive-header h1, .page-header h1 { font-family: 'Arima Madurai'; font-weight: 800; color: #004c73; margin: 0; } .archive-header p, .page-header p { margin: 0; } .error404 .page-header { margin-bottom: 24px; } /* Tag links style */ .tag-links { margin: 0 0 1.497em; } .tag-links a { background-color: #004c73; border-radius: 0 2px 2px 0; color: #fdfdfd; display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.25; margin: 2px 4px 2px 10px; padding: 3px 7px; position: relative; text-transform: uppercase; text-decoration: none; border: 0; } .tag-links a:hover, .tag-links a:focus { background-color: #cdcdcd; color: #004c73; outline: none; } .tag-links a:before { border-top: 10px solid transparent; border-right: 8px solid #004c73; border-bottom: 10px solid transparent; content: ""; height: 0; position: absolute; top: 0; left: -8px; width: 0; } .tag-links a:hover:before, .tag-links a:focus:before { border-right-color: #cdcdcd; } .tag-links a:after { background-color: #fdfdfd; border-radius: 50%; content: ""; height: 4px; position: absolute; top: 8px; left: -2px; width: 4px; } .tag-links a:hover:after, .tag-links a:focus:after { background-color: #004c73; } /* Page links */ .page-links { clear: both; font-size: 12px; font-weight: 700; line-height: 1.497; margin: 24px 0; text-transform: uppercase; } .page-links a, .page-links > span { display: inline-block; height: 22px; margin: 0 1px 2px 0; text-align: center; width: 22px; } .page-links a { background: #004c73; border: 1px solid #004c73; color: #fdfdfd; text-decoration: none; } .page-links a:hover, .page-links a:focus { background-color: #067f64; border: 1px solid #067f64; color: #fdfdfd; } .page-links > .page-links-title { height: auto; margin: 0; padding-right: 7px; width: auto; } .image-navigation { margin-bottom: 1em; } .entry-attachment { margin-bottom: 1.497em; } .entry-attachment img { width: 100%; } .entry-caption { color: #555; font-size: 14px; font-size: 0.8750rem; font-style: italic; line-height: 1.618; padding-top: 1.08em; } .entry-caption > :last-child { margin-bottom: 0; } /* Author bio*/ .author-bio { margin: 0 0 1em; } .author-bio img { float: left; margin: 0.4em 1.8em 0.5em 0; padding: 0; } .author-description { font-size: 0.9em; } /** * 11.3 - Post Formats */ .post-format { } .post-format .genericon { margin-right: 0.1em; } .single .format-chat .entry-content p:nth-child(odd) { background-color: #efefef; padding: 0 0.8em; } .single .format-chat .entry-content p:nth-child(even) { background-color: #fefefe; padding: 0 0.8em; } /** * 11.4 - Comments */ .comments-area { margin: 2em auto; } .comment-reply-title, .comments-title { font: 900 16px/1.5 Lato, sans-serif; margin: 0; text-transform: uppercase; } .comment-list { list-style: none; margin: 0 0 48px 0; } .comment-author { line-height: 2; } .comment-list .reply, .comment-metadata { font-size: 12px; line-height: 2; text-transform: uppercase; } .comment-list .reply { margin-top: 1em; } .comment-author .fn { font-weight: 900; margin-left: 0.25em; } .comment-author a { color: #222; } .comment-list .trackback a, .comment-list .pingback a, .comment-metadata a { color: #555; } .comment-author a:hover, .comment-list .pingback a:hover, .comment-list .trackback a:hover, .comment-metadata a:hover { color: #004c73; } .comment-list article, .comment-list .pingback, .comment-list .trackback { border-top: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 1.5em; padding-top: 1.5em; } .comment-list > li:first-child > article, .comment-list > .pingback:first-child, .comment-list > .trackback:first-child { border-top: 0; } .comment-author { position: relative; } .comment-author .avatar { border: 1px solid rgba(0, 0, 0, 0.1); height: 1.5em; width: 1.5em; padding: 2px; position: absolute; top: 0; left: 0; } .comment-author, .comment-awaiting-moderation, .comment-content, .comment-list .reply, .comment-metadata { padding-left: 30px; } .comment-edit-link { margin-left: 10px; } .comment a { color: #004c73; text-decoration: none; border: 0; } .comment a:hover, .comment a:focus { color: #067f64; text-decoration: underline; } .comment-reply-link:before, .comment-reply-login:before, .comment-reply-link .genericon { margin-right: 2px; } .comment-content { -webkit-hyphens: auto; -moz-hyphens:auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .comment-content ul, .comment-content ol { margin: 0 0 1.5em 1.4em; } .comment-content li > ul, .comment-content li > ol { margin-bottom: 0; } .comment-content > :last-child { margin-bottom: 0; } .comment-list .children { list-style: none; margin-left: 1.5em; } .comment-respond { margin-bottom: 24px; padding: 0; } .comment .comment-respond { margin-top: 24px; } .comment-respond h3 { margin-top: 0; margin-bottom: 24px; } .comment-notes, .comment-awaiting-moderation, .logged-in-as, .no-comments, .form-allowed-tags, .form-allowed-tags code { color: #555; } .comment-notes, .comment-awaiting-moderation, .logged-in-as { font-size: 14px; line-height: 1.7; } .logged-in-as a { color: #004c73; border: 0; } .logged-in-as a:hover, .logged-in-as a:focus { color: #067f64; text-decoration: underline; border: 1px dotted; } .no-comments { font-size: 16px; font-weight: 900; line-height: 1.5; margin-top: 24px; text-transform: uppercase; } .comment-form label { display: block; margin-bottom: 0.3em; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; } .form-allowed-tags, .form-allowed-tags code { font-size: 12px; line-height: 1.5; } .required { color: #bf2323; } .comment-reply-title small a { color: #222; float: right; height: 24px; overflow: hidden; width: 24px; } .comment-reply-title small a:hover { color: #004c73; } .comment-reply-title small a:before { content: "\f405"; font-size: 32px; } .comment-navigation { font-size: 12px; line-height: 2; margin-bottom: 48px; text-transform: uppercase; } .comment-navigation .nav-next, .comment-navigation .nav-previous { display: inline-block; } .comment-navigation .nav-previous a { margin-right: 10px; } #comment-nav-above { margin-top: 36px; margin-bottom: 0; } .bypostauthor > article .fn:before { content: "\f408"; margin: 0 2px 0 -2px; position: relative; top: -1px; } /** * 11.5 - Sidebar */ /** * 11.6 - Footer */ #footer-widget-area { background-color: rgba(0,76,115,0.8); color:#333; font-size: 1em; padding: 0.5em; } #footer-widget-area .widget-area { margin-bottom: 0.5em; } #footer-widget-area a { color:#004c73; text-decoration: none; } #footer-widget-area a:hover { color:#333; } #footer-widget-area .widget_calendar tbody a:hover { background-color: #067f64; color:#f7f7f7; } .widget-title { color: #444; } #page-footer { width: 100%; margin: auto; padding: 0.5em 0; line-height: 1; border-top: 1px solid #ccc; } #page-footer a { text-decoration: none; color: #fdfdfd; border: none; } #page-footer i { font-size: 1em; padding-right: 0.8em; } #site-info { text-align: center; margin: 0.5em auto; color: #fdfdfd; background-color: #444; } #site-info .footer-site-title:after { content: " \002f"; } #site-info a:hover, #site-info a:focus { color: #fff; font-weight: 700; } #social{ text-align: center; } /** * 12.0 - Media */ .site .avatar { border-radius: 50%; } .entry-content .wp-smiley, .entry-summary .wp-smiley, .comment-content .wp-smiley, .textwidget .wp-smiley { border: none; margin-top: 0; margin-bottom: 0; padding: 0; } .entry-content a img, .entry-summary a img, .comment-content a img, .textwidget a img { display: block; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object, video, audio, figure { max-width: 100%; vertical-align: middle; margin-bottom: 1.497em; } p > embed, p > iframe, p > object, p > video, p > audio, p > figure { margin-bottom: 0; } .entry-content .wp-audio-shortcode a, .entry-content .wp-playlist a { box-shadow: none; } .wp-audio-shortcode, .wp-video, .wp-playlist.wp-audio-playlist { margin-top: 0; margin-bottom: 1.497em; } .wp-playlist.wp-audio-playlist { padding-bottom: 0; } .wp-playlist .wp-playlist-tracks { margin-top: 0; } .wp-playlist-item .wp-playlist-caption { border-bottom: 0; padding: 0.7142857143em 0; } .wp-playlist-item .wp-playlist-item-length { top: 0.7142857143em; } /** * 12.1 - Captions */ .wp-caption { margin-bottom: 1.497em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0; } .wp-caption .wp-caption-text { color: #555; font-size: 13px; font-size: 0.8125rem; font-style: italic; line-height: 1.618; padding-top: 0.539em; } /** * 12.2 - Galleries */ .gallery { margin: 0 -1.1666667% 1.497em; display: flex; flex-wrap: wrap; } .gallery-item { width: calc((100% - 1em)/2); text-align: center; margin: 0 1em 1em 0; } .gallery-columns-1 .gallery-item { width: 100%; margin: 0 0 1em 0; } .gallery-columns-2 .gallery-item:nth-child(2n) { margin-right: 0; } .gallery-columns-3 .gallery-item { width: calc((100% - 2em)/3); } .gallery-columns-3 .gallery-item:nth-child(3n) { margin-right: 0; } .gallery-columns-4 .gallery-item { width: calc((100% - 3em)/4); } .gallery-columns-4 .gallery-item:nth-child(4n) { margin-right: 0; } .gallery-columns-5 .gallery-item { width: calc((100% - 4em)/5); } .gallery-columns-5 .gallery-item:nth-child(5n) { margin-right: 0; } .gallery-columns-6 .gallery-item { width: calc((100% - 5em)/6); } .gallery-columns-6 .gallery-item:nth-child(6n) { margin-right: 0; } .gallery-columns-7 .gallery-item { width: calc((100% - 6.1em)/7); } .gallery-columns-7 .gallery-item:nth-child(7n) { margin-right: 0; } .gallery-columns-8 .gallery-item { width: calc((100% - 7em)/8); } .gallery-columns-8 .gallery-item:nth-child(8n) { margin-right: 0; } .gallery-columns-9 .gallery-item { width: calc((100% - 8em)/9); } .gallery-columns-9 .gallery-item:nth-child(9n) { margin-right: 0; } .gallery-icon img { margin: 0 auto; } .gallery-caption { color: #555; display: block; font-size: 13px; font-size: 0.8125rem; font-style: italic; line-height: 1.618; padding-top: 0.539em; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } .wp-block-gallery { margin-left: 0; margin-bottom: 1em; } .wp-block-image, .wp-block-embed, .wp-block-media-text:last-child { margin-bottom: 1.497em; } .wp-block-embed iframe { } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 6em; height: 2px; } /*------------ MEDIA QUERIES ------------*/ /*---------------------------------------*/ @media (min-width: 881px) { /** * 3.0 - Typography */ h1 { font-size: 2.074em; margin: 0 0 0.3596em; } h2 { font-size: 1.728em; margin: 0.3596em 0; } h3 { font-size: 1.44em; margin: 0.339em 0 0.6780em; } h4 { font-size: 1.2em; margin: 0.720em 0; } h5 { font-size: 1em; margin: 0.898em 0; } h6 { font-size: 0.833em; margin: 0.898em 0; } /** * 6.0 - Navigation */ .site-navigation ul { list-style: none; padding: 0; margin: 0; } .site-navigation li { text-align: left; margin: 0; padding: 0; } .primary-navigation li { position: relative; border: 0; } .social-navigation li { text-align: center; } .site-navigation a { text-decoration: none; color: #004c73; text-transform: uppercase; font-size: 0.85em; line-height: 1.078667; padding: 0.7em 1.6em 0.7em 0.4em; border: 0; } .menu-toggle { display: none; } #navigation { width: auto; margin: auto; padding: 0 5%; align-self: flex-end; } .primary-navigation .menu { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; position: relative; } .primary-navigation a { display: block; } .primary-navigation .menu ul, .primary-navigation .menu ul ul { position: absolute; left: -990em; padding-top: 0.5em; background-color: transparent; } .primary-navigation .menu ul ul { padding-top: 0; padding-left: 1em; } .primary-navigation li:hover > a, .primary-navigation li.focus > a, .primary-navigation a:focus { background-color: #004c73; color: #fdfdfd; } .primary-navigation ul ul a:hover, .primary-navigation ul ul a:focus, .primary-navigation ul ul li.focus > a, .primary-navigation ul ul li > a:focus { background-color: #2c6888; } .primary-navigation li:hover > ul, .primary-navigation li.focus > ul { position: absolute; left: 0%; top:100%; } .primary-navigation li:hover > ul li, .primary-navigation li.focus > ul li { background-color: #f7f7f7; } .primary-navigation li li:hover > ul, .primary-navigation li li.focus > ul, .primary-navigation li li a:focus + ul { position: absolute; top:0%; left: 100%; } .primary-navigation li li li:hover > ul, .primary-navigation li li li.focus >ul { position: absolute; top:100%; left: 0%; } .primary-navigation li li li li:hover > ul, .primary-navigation li li li li.focus > ul { position: absolute; top:0%; left: 100%; } .primary-navigation li li li li li:hover > ul, .primary-navigation li li li li li.focus > ul { position: absolute; top:100%; left: 11.1%; } .primary-navigation ul ul a { min-width: 11em; } .primary-navigation .menu-item-has-children > a, .primary-navigation .page-item-has-children > a { display: block; position: relative; padding-right: 1.9em; margin-right: 0; } .primary-navigation .menu-item-has-children li > a, .primary-navigation .page-item-has-children li > a { box-shadow: 1px 1px 5px 1px #ccc; } .primary-navigation .menu-item-has-children > a .genericon, .primary-navigation .page_item_has_children > a .genericon { -webkit-font-smoothing: antialiased; display: inline-block; font: normal 14px/1 Genericons; position: absolute; right: 4px; top: 14px; vertical-align: text-bottom; } .primary-navigation .menu-item-has-children li.menu-item-has-children > a .genericon, .primary-navigation .menu-item-has-children li.page_item_has_children > a .genericon, .primary-navigation .page_item_has_children li.menu-item-has-children > a .genericon, .primary-navigation .page_item_has_children li.page_item_has_children > a .genericon { right: 0; top: calc(50% - 7px); } .primary-navigation .menu-item-has-children li.menu-item-has-children > a .genericon:before, .primary-navigation .menu-item-has-children li.page_item_has_children > a .genericon:before, .primary-navigation .page_item_has_children li.menu-item-has-children > a .genericon:before, .primary-navigation .page_item_has_children li.page_item_has_children > a .genericon:before { content: "\f501"; /* arrow right */ } header .search-form { display: flex; position: absolute; top: 4px; right: 4px; } header .search-submit { } header .search-field { width: 1px; background-color: transparent; border: none; } header .search-form:hover .search-field, header .search-field:focus { width: 100%; background-color: #fdfdfd; border: 1px solid #004c73; color: #333; } header .social-navigation .social-menu { display: none; } /* Posts navigation and pagination */ .navigation .nav-links { display: flex; justify-content: space-between; } .pagination .nav-links { justify-content: center; } .pagination .page-numbers { margin: 0 1.2em 0 0; } .pagination .page-numbers:last-child { margin: 0; } .posts-navigation .nav-previous { width: 50%; text-align: left; margin-right: auto; margin-left: 0; } .posts-navigation .nav-next { width: 50%; text-align: right; margin-right: 0; margin-left: auto; } /** * 11.0 - Content */ html, body { margin: 0 auto; } .logged-in #container { margin: 0 auto 0; } main { position: relative; display: flex; min-height: calc(100vh - 6em ); font-size: 1.0625em; } .inner { width: 68.5%; /* 1200 / 1920 */ margin: 0 auto; } #main-content { width: 68.75%; box-sizing: border-box; padding: 4em 2% 0 6%; margin: 0; /*! letter-spacing:0.02em; */ } .author #main-content { margin: 0; } .sidebars { width: 31.25%; box-sizing: border-box; margin: 0; padding: 4em 6% 0 2%; /*! border: none; */ } .no-sidebar #main-content { width: 100%; padding: 4em 16%; } .single.no-sidebar #main-content, .page.no-sidebar #main-content { width: 68.75%; margin: 0 auto; padding: 4em 0; } .page-template-no-sidebar-full-width.page #main-content.no-sidebar-full-width { width: 100%; margin: 0; padding: 4em 6% 0; } .page-template-no-sidebar.page #main-content.no-sidebar { width: 100%; padding: 4em 30.5% 0 6%; margin: 0; } .post, .type-page, .not-found { margin: auto auto 1.497em; padding: 2em 4em 3em; } .sticky { background-color: #fff; border: 1px solid #aaa; } .archive-header, .page-header { padding: 1em 4em; } .blog .entry-header { text-align: center; } .featured-image .entry-header { position: absolute; width: 60.75%; margin: auto; padding: 4em; left: calc(100% - 33.25%); top: 100%; transform: translate(-100%,-100%); background-color: rgba(255,255,255,0.9); } .no-sidebar .featured-image .entry-header { width: 68.75%; left: 50%; top: 100%; transform: translate(-50%,-100%); } .featured-image .entry-header .entry-title { font-size: 3em; } .featured-image .entry-header .entry-author { font-variant: small-caps; } .entry-title { } .entry-meta { } .entry-content { font-size: 1em; padding: 0; } .author-bio { margin: 0 0 2em; } .author-bio img { width: auto; float: none; } .author-description { float: right; width: calc(100% - 72px - 3em); } .single .entry-content { } .single .entry-footer { clear: both; } /** * 11.1 - Header */ .logged-in #masthead { top: 32px; } #customize-preview iframe #masthead { top: 0 } #masthead { /* Revisar todo */ height: auto; position: sticky; top: 0; /* this two lines, together with the relative position of #container, make the header sticky. */ display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .single #masthead.site-header-thumbnail, .page #masthead.site-header-thumbnail { position: fixed; background-color: rgba(255,255,255,0.9); } header .flex-container { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; justify-content: space-between; } /*---- Formatting of the logo part -----*/ .site-identity { height: auto; padding: 0; margin: 0 auto; transition: height 1s ease-in-out 2s; } .home-link { width: initial; text-align: center; flex-direction: column; justify-content: center; align-items: center; } .site-identity img { margin: 1em 0 0.5em; padding: 0; max-height: 100px; max-width: 400px } .title-description { display: inline-block; margin: 0; } .site-title { font-family: 'Arima Madurai', Georgia, serif; font-size: 2.441em; line-height: 1.441; margin: 0.1em 0 0; padding: 0; } .site-description { position: relative; margin: 0 0 0.2em; width: unset; height: unset; color: #222; font-size: 1.2em; line-height: 1.5; letter-spacing: 0.02em; } #masthead.scrolled { position: fixed; min-height: 2em; } .scrolled .site-identity { height: 0; } .scrolled .home-link { position: absolute; top: 50%; left: 6%; transform: translate(0, -50%); margin: 0; min-height: auto; } .scrolled .site-identity img { max-height: 2em; max-width: 8em; margin: 0; } .scrolled .site-title { font-size: 1.2em; display: none; } .scrolled .site-description { display: none; } .scrolled #navigation { margin: 0 auto; } /** * 11.3 - Post Formats */ .no-sidebar .format-video, .no-sidebar .format-gallery { } .single .format-video, .single .format-gallery { width: 100%; } .format-video iframe, .wp-block-embed iframe { max-height: initial; } .wp-block-audio { width: 60%; } .blog .wp-block-audio { margin: auto; } .wp-block-image img { width: 100%; } /** * 11.6 - Footer */ #footer-widget-area { display: flex; justify-content: space-between; align-items: start; padding: 2em 5%; } .footer-widget-column { width: 30%; margin: auto; } .widget-area { margin: 0; } #page-footer { width: 100%; padding: 0; bottom: 0; position: relative; } #footer-social-menu { width: 100%; padding: 2em 0; background-color: #e2e2e2; } #footer-social-menu .social-menu, .social-navigation .social-menu { display: flex; justify-content: center; margin: 0 20%; list-style: none; } #footer-social-menu li { margin-right: 3em; } #footer-social-menu li:last-child { margin-right: 0; } #footer-social-menu a { display: block; width: auto; margin: auto; color: #444; background-color: transparent; border: none; border-radius: 4%; transition: all 1s ease-out 0s; height: auto; } #footer-social-menu a:hover, #footer-social-menu a:focus { color: #656565; background-color: #fdfdfd; } #footer-social-menu a:before { font-size: 2em; height: 2em; width: 2em; line-height: 2; } #site-info { width: 100%; text-align: center; margin: auto; padding: 1.5em 0; border-top: 1px solid #ccc; } .prueba-count { position: absolute; list-style: none; counter-reset: li; } .prueba-count li p:before { counter-increment: li; content: counter( li ) '. '; color: #004c73; font-weight: 700; } } @media (min-width: 881px) and (max-width: 1080px) { .inner { width: 90.81145152%; } } @media (min-width: 1081px) and (max-width: 1366px) { .inner { width: 80.81145152%; } } @media (min-width: 1367px) and (max-width: 1500px) { .inner { width: 70.81145152%; } } @media (max-width: 880px) { .wp-block-media-text { display: block; } .wp-block-media-text.has-media-on-the-right { display: block; } .wp-block-media-text__media { } .wp-block-media-text .wp-block-media-text__content { padding: 0; } }