/* * * Here you add all theme styles for your theme * * BASE * Repeatable classes..........Tools that will help us to achive something * Fonts.......................Font import * Text........................Global text styles * Colors......................Color variables * * COMPONENTS * Header................Header styles * Footer................Footer styles * Buttons...............Buttons styles * Custom blocks.........Custom blocks we can use anywhere on site * * */ /* * BASE */ /* Repeatable classes */ .horizontal-nav li{ display: inline-block; } .img-left{ float: left; margin-right: 30px; } .img-right{ float: right; margin-left: 30px; } .outer{ display: table; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .middle{ display: table-cell; vertical-align: middle; } .wrapper{ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -245px; } .push{ height: 245px; } /* Transitions */ .disabletransition { transition: none !important; } /* Text */ h1, h2, h3, h4, h5, h6, span, a, figcaption, input{ font-family: 'Noto sans', sans-serif; color: #000; letter-spacing: -0.2px; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; } p, ol, ul, th, td, dt, dd, address{ font-family: 'Martel', serif; margin: 0 0 30px 0; color: #000; font-size: 18px; line-height: 35px; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; } img, figure{ max-width: 100%; height: auto; } table{ width: 100%; margin: 0 0 30px 0; th, td{ border: 1px solid #ddd; padding: 8px 15px; } } /* States */ :focus{ outline: none !important; } /* * COMPONENTS */ /* Headers */ .header{ border-top: 15px solid; padding: 30px 0; text-align: center; position: relative; @media (min-width: @screen-md){ text-align: left; } } .single--featured{ .header--borders:before{ height: 300px; } .header--borders:after{ height: 300px; } .page-content__sidebar{ margin: 0 !important; } } .header--borders:before{ content: ''; height: 80px; width: 15px; position: absolute; top: 0; left: 0; @media (min-width: @screen-md){ height: 300px; } } .header--borders:after{ content: ''; height: 80px; width: 15px; position: absolute; top: 0; right: 0; @media (min-width: @screen-md){ height: 300px; } } .header__logo-link { float: left; } .header--transparent{ position: absolute; width: 100%; z-index: 1; .header__logo-link{ color: #fff; &:hover, &:focus{ background-color: #fff; } } } .header__inner{ position: relative; display: inline-block; @media (min-width: @screen-md){ display: block; } } .header__logo{ margin: 0; display: inline-block; @media (min-width: @screen-md){ display: block; } } /* Dropdown nav */ .main-nav{ position: absolute; right: 0; top: 55px; width: 100%; z-index: 1; @media (min-width: @screen-md){ width: auto; } ul.sub-menu{ display: block; max-height: 0; transition: max-height .5s; overflow: hidden; } .menu-item-has-children{ padding-bottom: 2px; > .dropdown-nav__link{ position: relative; display: inline-block; margin: 0 0 10px 0; padding: 0 0 2px 0; border-bottom: 1px solid; &:hover{ padding: 0 0 2px 0; border-color: #fff; } &:focus{ padding: 0 0 2px 0; } &:focus:hover{ border-color: #fff; } &:after{ content: '\f107'; font-family: 'FontAwesome'; color: #fff; font-size: 17px; position: absolute; top: 0; right: -20px; transform: rotate( -90deg ); transition: transform .5s; } } &.active{ > .dropdown-nav__link{ &:after{ transform: rotate( 0deg ); } } } } ul ul{ list-style: none; padding: 0; margin: 0; } } .dropdown-nav{ padding: 10px 0; margin: 0; display: none; list-style: none; min-width: 100%; z-index: 2; @media (min-width: @screen-md){ position: relative; min-width: 200px; } } .dropdown-nav__item{ padding: 10px 20px; line-height: 25px; } .dropdown-nav__link{ color: #fff; font-size: 15px; &:hover{ text-decoration: none; border-bottom: 1px solid #fff; color: #fff; padding: 0 0 2px 0; } &:focus{ text-decoration: none; color: #fff; padding: 0 0 2px 0; } } .dropdown-nav__toggle{ position: relative; float: right; width: 56px; height: 55px; cursor: pointer; border: 4px solid; border-left-width: 0px; @media (min-width: @screen-md){ width: 60px; border-left-width: 4px; } &:hover{ background: #fff; border: 4px solid; border-left-width: 0px; @media (min-width: @screen-md){ border-left-width: 4px; } } &:focus{ span{ background: #fff; &:after, &:before{ background: #fff; } } } } .dropdown-nav__toggle span { display: block; position: absolute; width: 26px; height: 3px; top: 22px; right: 13px; background: #fff; } .dropdown-nav__toggle span:before, .dropdown-nav__toggle span:after { position: absolute; display: block; right: 0; width: 26px; height: 3px; content: ""; background: #fff; } .dropdown-nav__toggle span::before { top: -6px; } .dropdown-nav__toggle span::after { bottom: -6px; } .dropdown-nav__toggle span { -webkit-transition: background 0 0.3s; transition: background 0 0.3s; } .dropdown-nav__toggle span::before, .dropdown-nav__toggle span::after { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0; transition-delay: 0.3s, 0; } .dropdown-nav__toggle span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; } .dropdown-nav__toggle span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; } .dropdown-nav__toggle.active span { background: none !important; } .dropdown-nav__toggle.active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dropdown-nav__toggle.active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dropdown-nav__toggle.active span::before, .dropdown-nav__toggle.active span::after { -webkit-transition-delay: 0, 0.3s; transition-delay: 0, 0.3s; } /* Footer */ .footer{ padding: 40px 0; position: relative; &:after{ content: ''; position: absolute; height: 15px; width: 100%; position: absolute; right: 0; bottom: 0; } @media (min-width: @screen-sm){ padding: 150px 0 50px 0; &:after{ width: 40%; } } } .single{ .page-content__sidebar{ margin: 50px 0 0 0; } } .footer__copyright{ margin: 5px 0 0 0; text-align: center; a{ font-family: 'Martel', serif; } p{ font-size: 13px; margin: 0; } @media (min-width: @screen-md){ text-align: right; } } .social-nav{ padding: 0 15px; text-align: center; @media (min-width: @screen-md){ text-align: left; padding: 0; margin-bottom: 0; } } .social-nav__item{ display: inline-block; opacity: 0.7; margin-bottom: 4px; &:hover{ opacity: 1; } } .social-nav__link{ color: #fff; padding-top: 4px; font-size: 20px; height: 45px; width: 45px; text-align: center; display: inline-block; &:hover, &:focus{ color: #fff; } } .social-nav__item.facebook-ico{ background-color: #3b5998; } .social-nav__item.twitter-ico{ background-color: #55acee; } .social-nav__item.youtube-ico{ background-color: #cd201f; } .social-nav__item.linkedin-ico{ background-color: #0976b4; } .social-nav__item.behance-ico{ background-color: #1769ff; } .social-nav__item.dribbble-ico{ background-color: #ea4c89; } .social-nav__item.tumblr-ico{ background-color: #35465c; } .social-nav__item.pinterest-ico{ background-color: #cc2127; } .social-nav__item.flickr-ico{ background-color: #0063dc; } .social-nav__item.github-ico{ background-color: #999; } .social-nav__item.googleplus-ico{ background-color: #dd4b39; } .social-nav__item.instagram-ico{ background-color: #3f729b; } .social-nav__item.skype-ico{ background-color: #00aff0; } .social-nav__item.vimeo-ico{ background-color: #1ab7ea; } .social-nav__item.stumbleupon-ico{ background-color: #eb4924; } /* Buttons */ .btn--logo{ border: 4px solid; padding: 2px 15px 5px 15px; &:hover, &:focus{ color: #fff; text-decoration: none; } } .btn--more-posts{ padding: 15px; margin: 0; display: block; text-align: center; border: 3px solid; text-transform: uppercase; font-size: 14px; font-weight: bold; &:hover, &:focus{ color: #fff; text-decoration: none; } @media (min-width: @screen-sm){ padding: 15px 35px; font-size: 16px; } } .btn--transition{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } /* Custom blocks */ /* Featured hero */ .featured-hero{ text-align: center; @media (min-width: @screen-md){ text-align: left; } } .featured-hero__title{ font-size: 30px; margin: 50px 0 0 0; padding: 0 40px; &:after{ content: ""; display: block; width: 30%; border-bottom: 6px solid #000; margin: 30px auto 120px auto; @media (min-width: @screen-md){ margin: 30px 0 170px 0; } @media (min-width: @screen-sm){ border-bottom: 10px solid #000; } } @media (min-width: @screen-sm){ font-size: 64px; margin: 100px 0 0 0; padding: 0; } } /* Single content */ .post-item{ .post-item__title{ font-size: 27px; margin: 40px 0 35px 0; line-height: 42px; &:after{ content: ""; display: block; border-bottom: 4px solid #000; width: 25%; margin: 12px 0 30px 0; } @media (min-width: @screen-sm){ font-size: 37px; line-height: 55px; &:after{ border-bottom: 6px solid #000; margin: 18px 0 30px 0; } } @media (min-width: @screen-md){ font-size: 47px; &:after{ border-bottom: 7px solid #000; margin: 25px 0 30px 0; } .inner{ padding: 0 20%; } } } h1, h2, h3, h4, h5, h6{ margin: 2px 0 17px 0; } h1{ font-size: 37px; @media (min-width: @screen-sm){ font-size: 47px; } } h2{ font-size: 25px; line-height: 45px; @media (min-width: @screen-sm){ font-size: 37px; line-height: 55px; } } h3{ font-size: 21px; @media (min-width: @screen-sm){ font-size: 27px; } } h4{ font-size: 17px; } p, ol li, ul li{ font-size: 16px; line-height: 32px; @media (min-width: @screen-sm){ font-size: 18px; line-height: 35px; } } ul{ list-style: none; padding: 0 0 0 13px; li{ margin-left: 15px; &:before{ content: '-'; margin: 0 11px 0 -23px; } } } hr{ border-bottom: 6px solid #000; width: 25%; margin: 30px 0; } blockquote{ margin: 0 0 30px 0; p{ font-size: 22px; font-style: italic; letter-spacing: 0.5px; line-height: 42px; font-weight: lighter; @media (min-width: @screen-sm){ font-size: 28px; line-height: 50px; } } } a{ font-weight: normal; font-family: 'Martel', serif; &:hover, &:focus{ text-decoration: none; border-bottom: 1px solid; } } pre{ margin: 0 0 30px 0; } table{ text-align: center; } .alignleft{ display: inline; float: left; margin: 8px 30px 30px 0; } .alignright{ display: inline; float: right; margin: 8px 0 30px 30px; } .aligncenter{ clear: both; display: block; margin-left: auto; margin-right: auto; } figure, .wp-caption{ position: relative; margin: 0 0 30px 0; img{ margin: 0; } figcaption, .wp-caption-text{ position: absolute; bottom: 0; left: 0; color: #fff; padding: 15px 20px; z-index: 1; font-size: 12px; @media (min-width: @screen-sm){ font-size: 14px; } } } .wp-caption:after{ content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(70%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } .post-item__btn{ display: inline-block; padding: 6px 15px; border: 3px solid #000; text-transform: uppercase; font-size: 16px; font-weight: bold; font-family: 'Noto sans', sans-serif; color: #000; &:hover, &:focus{ color: #fff; background-color: #000; text-decoration: none; border-bottom: 3px solid #000; } @media (min-width: @screen-sm){ float: right; } } } .fixed-footer{ padding: 10px 20px; width: 100%; z-index: 999; position: fixed; bottom: 0; left: 0; background: #fff; border-top: 1px solid #ddd; transform: translateY(100%) translateZ(0); transition: transform .5s; &.active { transform: translateY(0) translateZ(0); } } .fixed-footer__avatar{ float: left; border-radius: 50%; height: 35px; width: 35px; background-size: cover; background-position: center; margin: 0 20px 0 0; } .fixed-footer__content{ float: left; p{ font-size: 14px; margin: 0; font-family: 'Noto sans', sans-serif; display: inline-block; } } .fixed-footer__btn{ float: right; border-radius: 2px; padding: 7px 20px; background: #777; color: #fff; .btn--transition; &:hover, &:focus{ background: lighten(#777, 10%); color: #fff; text-decoration: none; } } .fixed-footer__btn--red{ margin: 0 20px 0 0; @media (max-width: 530px){ display: none; } } .category-list{ a{ font-style: italic; } &:before{ content: '\f07b'; font-family: 'FontAwesome'; color: #777; margin: 0 7px 0 20px; font-size: 13px; } } .tags-list{ a{ font-style: italic; } &:before{ content: '\f02c'; font-family: 'FontAwesome'; color: #777; margin: 0 7px 0 20px; font-size: 13px; } } /* Author box */ .author-box{ padding: 25px; border: 1px solid #ddd; border-radius: 3px; @media (min-width: @screen-sm){ padding: 35px; } } .author-box__image{ height: auto; width: 100%; float: left; border-radius: 3px; margin: 0 0 21px 0; overflow: hidden; text-align: center; img { max-width: 100%; height: auto; } @media (min-width: @screen-sm){ width: 30%; margin: 0 35px 0 0; } } .author-box__author{ font-size: 20px; margin: 0 0 15px 0; } .author-box__bio{ p{ font-size: 15px; line-height: 30px; margin: 0; } } /* Cat box */ .cat-box{ border: 1px solid #ddd; border-radius: 3px; margin: 15px 0 0 0; padding: 5px 20px; p{ margin: 0; font-size: 15px; &:before{ margin: 0 15px 0 0; } } } /* Single comments */ .single-comments{ margin: 40px 0 0 0; } .comments-area{ ol{ list-style: none; padding: 0; li:last-child{ margin: 0; } } .logged-in-as, .logged-in-as a{ font-family: 'Martel', serif; font-size: 15px; color: #888; } } .children{ margin: 30px 0 0 0; } .comment{ padding: 35px; border: 1px solid #ddd; border-radius: 3px; margin: 0 0 30px 0; .avatar{ border-radius: 50%; margin: 0 10px 0 0; } &.bypostauthor{ .fn{ color: #e85546; } } } .comment-author{ font-size: 17px; line-height: 12px; b{ font-family: 'Noto sans', sans-serif; } } .comment-content{ margin: 20px 0 0 0; p{ font-size: 15px; line-height: 27px; } } .comment-reply-link{ display:inline-block; padding: 2px 20px 5px 20px; background-color: #777; border-radius: 2px; color: #fff; font-size: 15px; .btn--transition; &:hover, &:focus{ color: #fff; background: darken(#777, 20%); text-decoration: none; } } .comment-reply-title{ margin: 0 0 5px 0; font-size: 17px; } .comment-metadata{ font-size: 15px; a, span{ color: #888; } } .comment-respond{ border: 1px solid #ddd; margin: 30px 0 0 0; border-radius: 3px; padding: 30px 30px 5px 30px; } .comment-form-comment{ label{ display: block; font-size: 15px; } textarea{ display: block; border-radius: 3px; border: 1px solid #ddd; font-size: 15px; padding: 15px 20px; line-height: 33px; width: 100%; } } .comment-author-link{ font-family: 'Martel', serif; font-style: italic; } .recentcomments{ a{ font-style: italic; } } .form-submit{ .submit{ display: inline-block; padding: 2px 20px 5px 20px; border-radius: 2px; color: #fff; font-size: 15px; border: 0; } } .form-allowed-tags{ display: none; } .comment-form{ p, span{ font-family: 'Martel', serif; font-size: 15px; } label{ display: block; } input{ border-radius: 3px; border: 1px solid #ddd; padding: 5px 15px; } } /* Full width heading */ .full-heading{ padding: 80px 0 70px 0; position: relative; text-align: center; li, figcaption, blockquote, p, h1, h2, h3, h4, h5, h6{ color: #fff; } } .full-heading__background{ position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: 1; overflow: hidden; } .full-heading__img{ width: 100%; overflow: hidden; } .full-heading__overlay{ background-color: rgba(0, 0, 0, 0.35); position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .full-heading__content { position: relative; z-index: 2; } /* News list */ .post-list{ .post-item{ text-align: left; margin: 0 0 60px; @media (min-width: @screen-sm){ margin: 0 0 40px; } p{ line-height: 27px; @media (min-width: @screen-sm){ line-height: 32px; } } blockquote{ p{ line-height: 42px; @media (min-width: @screen-sm){ line-height: 50px; } } } } .sticky{ margin: 0 0 80px 0; } .post-item__img{ width: 100%; height: 200px; background-size: cover; background-position: center; margin: 0 30px 30px 0; @media (min-width: @screen-sm){ margin-bottom: 0; height: 300px; } } .post-item__title{ font-size: 32px; margin: 0; line-height: 42px; &:after{ content: ""; display: block; width: 25%; border-bottom: 5px solid #000; margin: 25px 0 21px 0; @media (min-width: @screen-sm){ width: 15%; } } a{ font-size: 32px; margin: 0; color: #000; font-family: 'Noto sans', sans-serif; font-weight: 900; display: block; .btn--transition; &:hover, &:focus{ text-decoration: none; border: 0; } } @media (min-width: @screen-sm){ margin-top: -8px; font-size: 37px; line-height: 55px; } } } .sticky{ .post-item__content{ text-align: center; padding: 50px 20px; p{ color: #fff; position: relative; } @media (min-width: @screen-sm){ padding: 100px 40px; } } .post-item__overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); } .post-item__title{ margin: 0; color: #fff; position: relative; &:after{ margin: 28px auto 21px auto; border-color: #fff; } } .post-item__img{ height: auto; position: relative; } .post-item__btn{ color: #fff; border-color: #fff; float: none; position: relative; display: inline-block; &:hover, &:focus{ border-bottom: 3px solid #fff; background: #fff; color: #000; } } } .post-list-nav{ padding: 35px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; overflow: hidden; margin: 30px 0 0 0; } .post-list-nav__prev, .post-list-nav__next{ a{ display: block; border-radius: 3px; padding: 10px 15px; color: #fff; font-size: 15px; .btn--transition; &:before{ font-family: FontAwesome; } &:hover, &:focus{ text-decoration: none; color: #fff; } } } .post-list-nav__prev{ float: left; a{ &:before{ content: '\f177'; margin: 0 10px 0 0; } } } .post-list-nav__next{ float: right; a{ &:before{ content: '\f178'; float: right; margin: 0 0 0 10px; } } } /* Single post */ /* Single featured */ .single--featured{ .post-single{ padding-top: 50px; } } .hero-subheader{ position: relative; width: 100%; height: 500px; overflow: hidden; } .hero-subheader__img{ position: absolute; top: 0; left: 0; bottom: 0; width: 100%; img { max-width: 100%; width: 100%; height: auto; } } .hero-subheader__overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-subheader__content{ position: absolute; top: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; text-align: center; .outer{ height: 500px; } .inner{ padding: 0 18%; } h1{ color: #fff; font-size: 27px; } @media (min-width: @screen-sm){ h1{ font-size: 37px; } } @media (min-width: @screen-md){ h1{ font-size: 47px; } .inner{ padding: 0 20%; } } } /* Archives */ .page-title{ text-align: center; h1{ font-size: 27px; border: 4px solid #000; display: inline-block; padding: 5px 20px; margin: 40px 0 80px 0; @media (min-width: @screen-sm){ font-size: 47px; margin: 50px 0 135px 0; padding: 5px 30px; } } } /* 404 page */ .page404, .page404 body{ height: 100%; } .error-message{ text-align: center; h2{ font-size: 90px; line-height: 0; @media (min-width: @screen-sm){ font-size: 180px; } @media (min-width: @screen-md){ font-size: 250px; } } p{ font-size: 16px; line-height: 34px; @media (min-width: @screen-sm){ font-size: 18px; line-height: 35px; } } a{ font-family: 'Martel', serif; &:hover, &:focus{ text-decoration: none; border-bottom: 2px solid; } } } /* ----- Widgets ----- */ .widget{ a{ font-family: 'Martel', serif; } } .widget_recent_entries, .widget_recent_comments, .widget_archive, .widget_categories, .widget_meta{ ul{ list-style: none; padding: 0; } } .sidebar-widget-title{ font-size: 18px; margin: 35px 0 20px 0; } .search-form__field{ padding: 10px 15px; } .search-form__button{ border: 0; padding: 15px 20px; color: #fff; .btn--transition; } .widget_calendar{ th, td{ padding: 10px 0; text-align: center; } } .wp-caption{ a{ display: inline-block; } } /* ----- Post formats ----- */ .format-image, .format-gallery, .format-video{ .post-item__title{ &:after{ margin: 25px 0 34px 0; } } } /* Audio */ .mejs-currenttime, .mejs-duration{ color: #fff; } .mejs-controls{ a.mejs-horizontal-volume-slider{ &:hover, &:focus{ border-bottom: 0; } } } /* Gallery */ .gallery-slider{ position: relative; .slick-slide{ height: 450px; display: inline-block; float: left; background-size: cover; background-position: center; } .slick-list{ overflow: hidden; } .slick-arrow{ position: absolute; top: 0; height: 100%; background: transparent; border: 0; padding: 0; &:before{ font-family: FontAwesome; color: #fff; font-size: 16px; padding: 12px; } } .slick-prev{ left: 0; padding: 0 40px 0 30px; background: -moz-linear-gradient(left, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to right, rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c000000', endColorstr='#00000000',GradientType=1 ); &:before{ content: '\f177'; } } .slick-next{ right: 0; padding: 0 40px 0 50px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.55))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#8c000000',GradientType=1 ); &:before{ content: '\f178'; } } } .gallery{ margin-bottom: 1.5em; } .gallery-item{ display: inline-block; text-align: center; vertical-align: top; width: 100%; box-sizing: border-box; padding: 0 1em; img { width: 100%; height: auto; } figcaption { position: static !important; color: #000 !important; padding-left: 10% !important; padding-right: 10% !important; } } .gallery-columns-1 .gallery-item img{ width: auto; } .gallery-columns-2 .gallery-item{ max-width: 50%; img { width: auto; } } .gallery-columns-3 .gallery-item{ max-width: 33.33%; } .gallery-columns-4 .gallery-item{ max-width: 25%; } .gallery-columns-5 .gallery-item{ max-width: 20%; } .gallery-columns-6 .gallery-item{ max-width: 16.66%; } .gallery-columns-7 .gallery-item{ max-width: 14.28%; } .gallery-columns-8 .gallery-item{ max-width: 12.5%; } .gallery-columns-9 .gallery-item{ max-width: 11.11%; } .gallery-caption{ display: block; } /* Inner blog post pagination */ .pagination{ padding: 0; overflow: hidden; border-radius: 3px; display: inline-block; li{ display: inline-block; font-size: 17px; font-family: 'Noto sans', sans-serif; color: #fff; float:left; a{ display: block; color: #fff; padding: 5px 15px; .btn--transition; &:hover, &:focus{ text-decoration: none; } } } .disabled{ display: none; } .current{ padding: 5px 15px; } .pagination-arrow{ a{ display: block; padding: 4px 15px; &:before{ font-family: 'FontAwesome'; font-size: 14px; } &:hover, &:focus{ text-decoration: none; } } } .pagination-arrow-previous{ a{ &:before{ content: '\f177'; } } } .pagination-arrow-next{ a{ &:before{ content: '\f178'; } } } } /* Password protected */ .post-password-form{ input[type="submit"]{ border: 0; color: #fff; font-size: 15px; padding: 3px 15px 5px 15px; .btn--transition; } input[type="password"]{ padding: 2px 10px; margin: 0 0 0 15px; } label{ display: block; float: left; margin: 0 5px 0 0; } } /* Accessibility */ .says, .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } .skip-link { background-color: #f1f1f1; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); color: #21759b; display: block; font: bold 14px/normal "Noto Sans", sans-serif; left: -9999em; outline: none; padding: 15px 23px 14px; text-decoration: none; text-transform: none; top: -9999em; .logged-in & { box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); font: bold 14px/normal "Open Sans", sans-serif; } &:focus { clip: auto; height: auto; left: 6px; top: 7px; width: auto; z-index: 100000; } }