/* Author: 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 */ /*------------------------------------------------------------------------------ >>> TABLE OF CONTENTS: -------------------------------------------------------------------------------- # Global # Header and Navigation # Footer # Carousel # Comments # Shortcode # Listing -> Base Listing ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ ## Global ------------------------------------------------------------------------------*/ .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. */ } pre { white-space: pre-wrap; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; clear: both; } 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; } .amp-wp-container { padding: 0 15px; margin: 0 auto; max-width: 768px; } .amp-wp-container img { max-width: 100%; height: auto; } .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; } .amp-image-tag { max-width: 100%; } b, strong, .bold { font-weight: 700; } p { margin: 0 0 15px; } a { -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } amp-video { max-width: 100%; height: auto; } .strong-label, blockquote { color: #000; 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; } table { width: 100%; 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; } .mr-star-full, .mr-star-half, .mr-star-empty { color: #ffd700; } .btn { padding: 0 18px; background: #e53935; font-size: 14px; font-weight: 400; color: #ffffff; text-decoration: none; display: inline-block; } .button, .pagination a, .comments-pagination a { padding: 6px 15px; background: #e53935; font-size: 14px; font-weight: 400; color: #ffffff; text-decoration: none; display: inline-block; } .pagination a { padding: 0px 15px; } .comments-pagination { margin: 10px 0; } .comments-pagination a { margin-right: 5px; padding: 5px 15px; } .comments-pagination { color: #adadad; font-size: small; } .img-holder { position: relative; width: 100%; background: #eee; margin-right: 0; margin-bottom: 0; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; 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; } } .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: -moz-linear-gradient(45deg, #3b3b3b 0%, #666666 100%); 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: -ms-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 ); } .content-holder { position: absolute; left: 0; padding: 20px; } .content-holder a { color: #ffffff; } .content-holder.image-holder-none { position: relative; } .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; } .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; } .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; } /*------------------------------------------------------------------------------ ## 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 .3s; -o-transition: background-color .3s; transition: background-color .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 .6s ease; -o-transition: all .6s ease; transition: all .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; } /*------------------------------------------------------------------------------ ## 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; } /*------------------------------------------------------------------------------ ## 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; /*overflow: hidden;*/ } .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%; } /*------------------------------------------------------------------------------ ## Comments ------------------------------------------------------------------------------*/ .amp-wp-comment-list, .amp-wp-comment-list .children { margin: 0; padding: 0; list-style: none; } .amp-wp-comment-list .comment { position: relative; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f3f3f3; } .amp-wp-comment-list .comment.comment:after { clear: both; content: ' '; display: block; } .amp-wp-comment-list .comment .comment-avatar img { border-radius: 50%; } .amp-wp-comment-list .comment .column-1 { float: left; width: 55px; } .amp-wp-comment-list .comment .column-2 { padding-left: 75px; } .amp-wp-comment-list .comment .comment-author { font-size: 14px; font-weight: 700; font-style: normal; } .amp-wp-comment-list .comment .comment-content { color: #838383; margin-top: 8px; line-height: 1.57; font-size: 14px; } .amp-wp-comment-list .comment .comment-content p:last-child { margin-bottom: 0; } .amp-wp-comment-list .comment .comment-published { margin-left: 10px; font-size: 12px; color: #a2a2a2; font-style: italic; } .amp-wp-comment-list .comment .comment-footer a, .amp-wp-comment-list .comment .comment-footer .fa { font-size: 14px; text-decoration: none; } .amp-wp-comment-list .comment .comment-footer a + a { margin-left: 10px; } .amp-wp-comment-list .children { padding: 0 0 0 30px; } /*------------------------------------------------------------------------------ ## 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; } /*------------------------------------------------------------------------------ ## Listing -> Base 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 .4s ease; -o-transition: all .4s ease; transition: all .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: #000; background: #000; } .amp-btn i, .mks_button i { margin-right: 5px; } /*------------------------------------------------------------------------------ ## Contextual Backgrounds ------------------------------------------------------------------------------*/ .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; }