/* Authors: Arslan Akram, Mohsin Rafique Author URI: https://pixelative.co Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl_2.0.html Created on: 27_Jun_2018, 03:08:04 */ .button, .pagination a { padding: 6px 15px; background: #e53935; font-size: 14px; font-weight: 400; color: #ffffff; text-decoration: none; display: inline-block; } /*-------------------------------------------------------------------------------- # Global * These are the styles that will be loaded by default all over the AMP site. --------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------- => Table of Contents: ---------------------------------------------------------------------------------- ## Reset ## Clearfix ## Screen Reader ## Typography ## Grid ## Buttons ## Alerts ## Tables ## Page Header ## Image Holder ## Image Layer (Overlay BG) ## Content Holder ## Pagination ## Header ## Footer ## Carousel ## Shortcode ## Post Meta ## Post Terms ## Listing (Post Listing) ## Listing Buttons??? ## Rating Stars --------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ ## Global -> Reset ------------------------------------------------------------------------------*/ * { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { display: block; } button, hr, input { overflow: visible; } audio, canvas, progress, video { display: inline-block; } progress, sub, sup { vertical-align: baseline; } [type='checkbox'], [type='radio'], legend { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } h1 { font-size: 2em; margin: 0.67em 0; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, select { text-transform: none; } [type='reset'], [type='submit'], button, html [type='button'] { -webkit-appearance: button; } [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring, button:-moz-focusring { outline: ButtonText dotted 1px; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { color: inherit; display: table; max-width: 100%; white-space: normal; } textarea { overflow: auto; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } [hidden], template { display: none; } .amp-image-tag { max-width: 100%; } amp-video { max-width: 100%; height: auto; } /*------------------------------------------------------------------------------ ## Global -> Clearfix ------------------------------------------------------------------------------*/ .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ''; display: table; clear: both; } /*------------------------------------------------------------------------------ # Global -> Screen Reader ------------------------------------------------------------------------------*/ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 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. */ } /*------------------------------------------------------------------------------ # Global -> Typography ------------------------------------------------------------------------------*/ body.body { background: #ffffff; font-family: "Karla", sans-serif; font-size: 16px; font-weight: 400; color: #333333; line-height: 1.5; } button, input, optgroup, select, textarea { font-family: "Karla", sans-serif; font-size: 14px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading-typo { font-family: "Noto Sans", sans-serif; font-weight: 700; line-height: 1.5; margin: 0 0 15px; } h1, .h1 { font-size: 24px; line-height: 1.25; } h2, .h2 { font-size: 20px; } h3, .h3 { font-size: 18px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 16px; } h6, .h6 { font-size: 14px; } pre { white-space: pre-wrap; } b, strong, .bold { font-weight: 700; } p { margin: 0 0 15px; } a { -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .strong-label, blockquote { color: #000000; font-weight: 500; line-height: 1.5; } blockquote { border: 1px solid #e2e2e2; border-width: 1px 0; padding: 15px 15px 15px 60px; text-align: left; position: relative; margin: 0 0 15px; clear: both; } blockquote p:last-child { margin-bottom: 0; } blockquote:before { content: '\f10e'; font: normal normal normal 14px/1 FontAwesome; color: #d3d3d3; font-size: 28px; position: absolute; left: 12px; top: 17px; } /*------------------------------------------------------------------------------ ## Global -> Grid ------------------------------------------------------------------------------*/ .amp-wp-container { padding: 0 15px; margin: 0 auto; max-width: 768px; } .amp-wp-container img { max-width: 100%; height: auto; } .flex-row { -js-display: flex; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-flow: row nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row nowrap; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; width: 100%; } .flex-col { max-height: 100%; } .flex-grow { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; -ms-flex-negative: 1; -ms-flex-preferred-size: auto !important; } .flex-center { margin: 0 auto; } .flex-left { margin-right: auto; } .flex-right { margin-left: auto; } /*------------------------------------------------------------------------------ ## Global -> Buttons ------------------------------------------------------------------------------*/ .btn { padding: 0 18px; background: #e53935; font-size: 14px; font-weight: 400; color: #ffffff; text-decoration: none; display: inline-block; } /*------------------------------------------------------------------------------ ## Global -> Alerts - Contextual Backgrounds * Used in showing alerts after all form submissions DEMO: https://ampwp.io/amp/form ------------------------------------------------------------------------------*/ .amp-wp-bg-success, .amp-wp-bg-danger { padding: 15px; margin: 0 0 15px 0; border-radius: 3px; border: 1px solid transparent; } .amp-wp-bg-success p, .amp-wp-bg-danger p { margin: 0; } .amp-wp-bg-success { color: #27b56b; background: #dff0d8; border-color: #27b56b; } .amp-wp-bg-danger { color: #f46f6f; background: #feeaea; border-color: #f46f6f; } .amp-wp-bg-danger p:before { font-family: 'FontAwesome'; content: '\f06a'; font-size: 14px; margin-right: 5px; } /*------------------------------------------------------------------------------ # Global -> Tables ------------------------------------------------------------------------------*/ table { background-color: #fff; border-collapse: collapse; } table th, table td { font-weight: unset; padding-right: 10px; } table th { color: #fff; line-height: 1.4; background-color: #333333; } table td { color: #808080; line-height: 1.4; } table td i { margin-right: 5px; } table tbody tr:nth-child(even) { background-color: #f8f8f8; } .table-responsive { overflow-x: auto; padding-bottom: 10px; } /*------------------------------------------------------------------------------ ## Global -> Page Header ------------------------------------------------------------------------------*/ .amp-wp-page-header { padding: 15px 0 22px; background: #ededed; text-align: center; } .amp-wp-page-header .pre-title { font-family: "Noto Sans", sans-serif; font-size: 24px; color: #333333; text-transform: capitalize; margin-bottom: 3px; } .amp-wp-page-header .page-title { margin: 0; font-family: "Overpass Mono", monospace; font-size: 14px; font-weight: 400; color: #b6b6b6; text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .amp-wp-page-header .page-title .fa { margin-right: 10px; font-size: 24px; } /*------------------------------------------------------------------------------ ## Global -> Image Holder ------------------------------------------------------------------------------*/ .img-holder { position: relative; width: 100%; background: #eee; margin-right: 0; margin-bottom: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; } .img-holder:before { display: block; content: ' '; width: 100%; padding-top: 70%; } @media only screen and (max-width: 380px) { .img-holder:before { padding-top: 100%; } } .img-holder.image-holder-none:before { padding-top: 0; } @media only screen and (max-width: 380px) { .img-holder.image-holder-none:before { padding-top: 0; } } /*------------------------------------------------------------------------------ ## Global -> Image Layer (Overlay BG) ------------------------------------------------------------------------------*/ .img-layer { background: rgba(0, 0, 0, 0.6); position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; } .img-layer.none { background: #3b3b3b; background: -webkit-gradient(left bottom, right top, color-stop(0%, #3b3b3b), color-stop(100%, #666666)); background: -webkit-linear-gradient(45deg, #3b3b3b 0%, #666666 100%); background: -o-linear-gradient(45deg, #3b3b3b 0%, #666666 100%); background: linear-gradient(45deg, #3b3b3b 0%, #666666 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#666666', GradientType=1 ); } /*------------------------------------------------------------------------------ ## Global -> Content Holder ------------------------------------------------------------------------------*/ .content-holder { position: absolute; left: 0; padding: 20px; } .content-holder a { color: #ffffff; } .content-holder.image-holder-none { position: relative; } /*------------------------------------------------------------------------------ ## Global -> Pagination ------------------------------------------------------------------------------*/ .pagination a { padding: 0px 15px; } /*------------------------------------------------------------------------------ ## Global -> Post Meta ------------------------------------------------------------------------------*/ .post-meta { font-family: "Overpass Mono", monospace; font-size: 14px; color: #b6b6b6; text-align: left; background: none; border: none; } .post-meta .post-date { line-height: 2.2; } .post-meta .post-author { font-weight: 700; } .post-meta a { color: #b6b6b6; text-decoration: underline; } /*------------------------------------------------------------------------------ ## Global -> Post Terms ------------------------------------------------------------------------------*/ .post-terms a, .post-terms .term-type { font-size: 14px; text-decoration: none; display: inline-block; padding: 3px 15px; margin-right: 6px; border: 1px solid #e4e4e4; border-radius: 50px; } .post-terms a { margin: 0 4px 10px 0; } .post-terms a:hover, .post-terms a:focus, .post-terms a:active { color: #ffffff; } .post-terms a:last-child { margin-right: 0; } .post-terms .post-categories { display: inline; list-style: none; padding: 0; margin: 0; } .post-terms .post-categories li { display: inline; } .post-terms .post-categories li a { margin-right: 6px; padding: 5px 13px; border: none; border-radius: 50px; color: #ffffff; text-decoration: none; display: inline-block; } .post-terms .post-categories li:last-child a { margin-right: 0; } /*------------------------------------------------------------------------------ ## Global -> Rating Stars ------------------------------------------------------------------------------*/ .mr-star-full, .mr-star-half, .mr-star-empty { color: #ffd700; } /*------------------------------------------------------------------------------ ## Global -> Header and Navigation ------------------------------------------------------------------------------*/ .site-header { position: relative; background: #000000; width: 100%; height: 52px; margin: 0; color: #ffffff; /* header buttons */ } .site-header .flex-row { height: 100%; } .site-header .logo { line-height: 1; margin: 0; } .site-header .logo a { display: block; margin-left: 20px; font-family: "Noto Sans", sans-serif; font-size: 24px; font-weight: 700; color: #fff; text-align: left; text-decoration: none; } .site-header .logo a .amp-image-tag { display: inline-block; } .site-header .elements { margin-right: 10px; } .site-header .header-nav { list-style: none; margin: 0; padding: 0; width: 100%; position: relative; display: inline-block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .site-header .header-nav > li { display: inline-block; list-style: none; margin: 0; padding: 0; position: relative; margin: 0 7px; -webkit-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; } .site-header .header-nav > li > a, .site-header .header-nav > li .navbar-toggle { display: inline-block; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: transparent; padding: 10px 0; border: 0; text-decoration: none; -webkit-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; font-size: 18px; color: #fff; text-align: center; cursor: pointer; line-height: 1; } .site-header .header-nav.left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .site-header .header-nav.right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .site-header .logo-center .logo { -webkit-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; text-align: center; margin: 0 30px; } .site-header .logo-center .flex-left { -webkit-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; } .site-header .logo-center .flex-right { -webkit-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; } .site-header .logo-center .logo img { margin: 0 auto; } .site-header .logo-center .navbar-toggle { margin-left: 15px; } .site-header .logo-center .navbar-search { margin-right: 15px; } /* sticky nav */ .sticky-nav .site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 999; display: block; } body.sticky-nav { padding-top: 52px; } /*------------------------------------------------------------------------------ ## Global -> Footer ------------------------------------------------------------------------------*/ .amp-wp-footer { margin: 0; } .amp-wp-footer.sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; } .amp-wp-non-amp-url { background: #e4e4e4; padding: 20px 0; } .amp-wp-footer-nav { background: #e53935; padding: 14px 15px; } .amp-wp-copyright { background: #cd2a27; padding: 8px 0; text-align: center; color: #ffffff; font-size: 14px; } .amp-wp-copyright a { color: #ffffff; } .footer-navigation { list-style: none; margin: 0; padding: 0; text-align: center; } .footer-navigation ul { display: none; } .footer-navigation li { display: inline-block; margin: 0 5px 5px; } .footer-navigation li:first-child { margin-left: 0; } .footer-navigation li:last-child { margin-right: 0; } .footer-navigation a { text-decoration: none; color: #ffffff; font-weight: 300; font-size: 14px; } .footer-navigation li li { display: none; } .footer-navigation .fa { margin-right: 5px; } .amp-wp-main-link { display: block; text-align: center; } .amp-wp-main-link a .fa { margin-right: 5px; } /*------------------------------------------------------------------------------ ## Global -> Carousel ------------------------------------------------------------------------------*/ .carousel { overflow: hidden; } .carousel .carousel-item, .carousel .img-holder { width: 205px; float: none; margin: 0; } .carousel .carousel-item { margin-right: 20px; margin-bottom: 20px; } .carousel .carousel-item:last-child { margin-right: 0; } .carousel .content-holder { position: relative; bottom: auto; right: auto; top: auto; left: auto; width: 100%; float: left; white-space: normal; padding: 0; } .carousel .content-holder .post-meta { text-align: left; } .carousel .content-holder h3 { margin: 10px 0; } .carousel .content-holder h3 a { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; line-height: 24px; /* fallback */ max-height: 50px; /* fallback */ -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; color: #333333; text-decoration: none; } .carousel .amp-carousel-button { cursor: pointer; } .related-posts-wrapper { margin-bottom: 30px; } .related-posts-wrapper .img-holder { display: inline-block; border-radius: 4px; } .related-posts-wrapper .img-holder:before { padding-top: 70%; } /*------------------------------------------------------------------------------ # Global -> Shortcode ------------------------------------------------------------------------------*/ .amp-wp-shortcode { margin: 0 0 30px; } .amp-wp-shortcode .section-heading { margin: 0 0 13px; } .amp-wp-shortcode .section-heading .other-link { display: none; } /*------------------------------------------------------------------------------ ## Global -> Listing ------------------------------------------------------------------------------*/ .posts-listing { margin-bottom: 30px; } .listing-item { position: relative; } .listing-item .post-title a { color: #363636; text-decoration: none; } .listing-item .post-meta { margin-top: 20px; } .listing-item .post-meta .post-date { line-height: 2.2; } .listing-item .post-meta .post-date .fa { margin-right: 3px; } .listing-item .post-meta .post-author { color: #b6b6b6; } .listing-item a.amp-btn .fa { margin-left: 3px; } .listing-item a.amp-btn:hover, .listing-item a.amp-btn:focus, .listing-item a.amp-btn:active { border-color: transparent; color: #fff; } /*------------------------------------------------------------------------------ ## Listing -> Buttons ------------------------------------------------------------------------------*/ .amp-btn, .mks_button { font-family: "Karla", sans-serif; font-size: 14px; font-weight: 400; color: #ffffff; background: #e53935; border: 1px solid #e53935; border-radius: 50px; -webkit-box-shadow: none; box-shadow: none; line-height: 26px; text-decoration: none; display: inline-block; white-space: nowrap; padding: 0 13px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .amp-btn:hover, .amp-btn:focus, .amp-btn:active, .mks_button:hover, .mks_button:focus, .mks_button:active { color: #ffffff; background: #cd1e1a; border-color: #cd1e1a; text-decoration: none; } .amp-btn.dark, .mks_button.dark { padding: 5px 13px; border-color: #000000; background: #000000; } .amp-btn i, .mks_button i { margin-right: 5px; }