/*======================================================================= * Template Name: Grape * Template URI: http://codepassenger.com/html/grape * Author: CodePassenger * Author URI: http://codepassenger.com/ * Description: GRAPE - Multipurpose App Landing Template * Version: 1.0 * License: GPL v2 or later * License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html * Tags: html, template, app landing, marketing, grape, codepassenger ======================================================================= */ /*------------------------------------------------------ Table of content -------------------------------------------------------- Preloader General Buttons Navbar Banner Intro Features Video Description Screenshot Pricing Support Testimonials Client Logo Subscription Footer Blog Pages ------------------------------------------------------*/ /*------------------------ Preloader Styles ------------------------*/ .loader-wrap { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; } .cssload-loader { position: relative; width: 12px; height: 12px; left: 46%; left: calc(50% - 6px); left: -o-calc(50% - 6px); left: -ms-calc(50% - 6px); left: -moz-calc(50% - 6px); top: 50%; border-radius: 12px; background-color: #c0392b; transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; animation: cssload-loader 0.5s ease-in-out infinite; -o-animation: cssload-loader 0.5s ease-in-out infinite; -ms-animation: cssload-loader 0.5s ease-in-out infinite; -webkit-animation: cssload-loader 0.5s ease-in-out infinite; -moz-animation: cssload-loader 0.5s ease-in-out infinite; } .cssload-loader:before { content: ""; position: absolute; background-color: #c0392b; top: 0px; left: -25px; height: 12px; width: 12px; border-radius: 12px; } .cssload-loader:after { content: ""; position: absolute; background-color: #c0392b; top: 0px; left: 25px; height: 12px; width: 12px; border-radius: 12px; } @keyframes cssload-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @-webkit-keyframes cssload-loader { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(180deg); } } /*------------------------ General Styles ------------------------*/ html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Open Sans", sans-serif; line-height: 1.75; color: #111111; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Poppins", sans-serif; line-height: 1.3; } h1, .h1 { font-size: 6.4rem; } h2, .h2 { font-size: 4.8rem; } h3, .h3 { font-size: 3.6rem; } h4, .h4 { font-size: 2.4rem; } h5, .h5 { font-size: 1.8rem; } h6, .h6 { font-size: 1.4rem; } p { margin-bottom: 30px; } p:last-child { margin-bottom: 0; } a { color: #c0392b; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } a:focus, a:visited, a:active { outline: none; color: #c0392b; } a:hover { color: #993025; text-decoration: none; } .section { position: relative; } .section-padding { padding: 120px 0; } .section-padding.bottom-0 { padding-bottom: 0; } .offwhite-bg { background-color: #f7f7fa; } .theme-bg { background-color: #c0392b; color: #ffffff; } .text-white { color: #ffffff; } .text-white .section-subtext { color: #ffffff; } .overlay-black { background-color: rgba(17, 17, 17, 0.9); } .section-header { position: relative; padding-bottom: 25px; margin-bottom: 60px; } .section-header:before { content: ""; width: 370px; height: 1px; position: absolute; bottom: 0; background-color: rgba(192, 57, 43, 0.11); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .section-header:after { content: ""; width: 60px; height: 1px; position: absolute; bottom: 0; background-color: #c0392b; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .section-header.style-2 { padding-bottom: 0; margin-bottom: 30px; } .section-header.style-2:before, .section-header.style-2:after { content: none; } .section-header.style-2 .section-subtext { margin-top: 22px; } .section-title { font-size: 4.8rem; font-weight: 300; line-height: 1; margin: 0; } .section-subtext { color: #000000; margin-top: 15px; } .mock { display: inline-block; float: none; margin: 0 auto; position: relative; } .mock img { position: relative; } .mock .back-mock { position: absolute; bottom: 0; left: 120px; } .mock.right-style { text-align: right; margin-right: 0; float: right; } .mock.right-style .back-mock { left: -120px; } .steller-parallax { background-repeat: no-repeat; } /*** Form and Inputs ***/ form { position: relative; } form *:focus, form *:active { outline: none; } form p { margin-bottom: 15px; } input:not([type=radio]):not([type=checkbox]):not([type=range]), textarea { display: block; width: 100%; font-size: 1.2rem; line-height: 2; padding: 8px 30px; background-color: rgba(17, 17, 17, 0.15); border: none; } textarea { resize: none; } [type=submit] { margin-top: 15px; } /*** Pages ***/ .page-header { background-image: url(../images/banner/1.jpg); background-position: center center; background-size: cover; margin: 0; padding: 200px 0 100px; border: none; border-radius: 0; position: relative; } .page-header:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(17, 17, 17, 0.8); z-index: 0; } .page-header > .container { z-index: 1; position: relative; } .page-title { color: #ffffff; margin: 0; text-transform: uppercase; } .breadcrumb { background-color: transparent; margin-top: 0px; margin-bottom: 0; padding: 0; color: #ffffff; } .breadcrumb a { color: #ffffff; } .breadcrumb .active { color: #ffffff; } /*---------------------------------------- Buttons Styles ----------------------------------------*/ .btn { font-size: 1.4rem; font-family: "Open Sans", sans-serif; text-transform: uppercase; font-weight: 400; background-color: #c0392b; color: #ffffff; border: 1px solid #c0392b; line-height: 39px; padding: 0 39px; letter-spacing: 1.3px; border-radius: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .btn i { margin-right: 10px; } .btn:focus, .btn:visited, .btn:active { outline: none; color: #ffffff; background-color: #c0392b; } .btn:hover { background-color: #993025; color: #ffffff; } .btn.btn-sm { font-weight: 600; font-size: 1.6rem; line-height: 30px; padding: 0 30px; text-transform: none; letter-spacing: 0; } .btn.btn-lg { padding: 0 45px; line-height: 50px; border-radius: 26px; } .btn.btn-border { background-color: transparent; color: #111111; } .btn.btn-border:focus, .btn.btn-border:visitedm .btn.btn-border:active { color: #111111; background-color: transparent; } .btn.btn-border:hover { background-color: #c0392b; color: #ffffff; } .btn + .btn { margin-left: 26px; } /*----------------------------------- Navbar Styles -----------------------------------*/ .navbar-default { min-height: 100px; border-radius: 0; border: none; position: fixed; top: 0; left: 0; right: 0; background-color: transparent; margin-bottom: 0; z-index: 995; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar-default .navbar-brand { margin-top: 25px; margin-bottom: 25px; } .navbar-default .navbar-nav { margin-top: 25px; margin-bottom: 25px; } .navbar-default .navbar-nav > li > a { font-size: 1.4rem; font-weight: 700; color: #ffffff; text-transform: uppercase; } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a a:visited { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover { color: #c0392b; } .navbar-default .navbar-nav > li.active a { background-color: transparent; color: #c0392b; } .navbar-default .navbar-nav > li.active a:focus, .navbar-default .navbar-nav > li.active a:hover, .navbar-default .navbar-nav > li.active a:visited { color: #c0392b; background-color: transparent; } .navbar-default.affix { background-color: #111111; min-height: 60px; } .navbar-default.affix .navbar-brand { margin-top: 5px; margin-bottom: 5px; } .navbar-default.affix .navbar-nav { margin-top: 5px; margin-bottom: 5px; } .navbar-right .dropdown-menu { right: auto; left: 0; } .navbar-right > .dropdown:last-child > .dropdown-menu, .navbar-right > .dropdown:nth-last-child(2) > .dropdown-menu { right: 0; left: auto; } .dropdown-menu { display: block; padding: 20px 10px; z-index: 996; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .dropdown-menu .dropdown-menu { left: 100%; top: 0; } .dropdown-menu > li > a { font-size: 1.4rem; font-weight: 700; line-height: 2; } .dropdown-menu > li > a:hover { color: #ffffff; background-color: #c0392b; } .dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; } /*---------------------------------------- Banner Styles ----------------------------------------*/ .banner-item { height: 768px; background-position: center top; background-attachment: fixed; background-size: cover; position: relative; color: #ffffff; overflow: hidden; } .banner-item:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(17, 17, 17, 0.8); z-index: 1; } .banner-1 { background-image: url(../images/banner/1.jpg); } .banner-content { position: absolute; z-index: 2; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 50px; } .banner-content .banner-text-content { margin-top: 100px; } .banner-content .banner-title { font-size: 4.8rem; font-weight: 300; margin-top: 0; margin-bottom: 0; line-height: 1.5; color: #ffffff; font-style: bold; } .banner-content .banner-text { font-size: 2.2rem; margin-top: 22px; margin-bottom: 0; color: #ffffff; } .banner-content .button-group { margin-top: 34px; } .banner-content .btn-border { color: #ffffff; } .banner-content .banner-registration { background-color: rgba(17, 17, 17, 0.55); max-width: 400px; float: right; width: 100%; padding: 40px; } .banner-content .banner-registration input:not([type=radio]):not([type=checkbox]):not([type=range]), .banner-content .banner-registration textarea { line-height: 30px !important; background-color: rgba(192, 57, 43, 0.22); } .banner-content .banner-registration .btn { width: 100%; } .banner.style-2 .banner-content { top: 0; -webkit-transform: translateY(0); transform: translateY(0); } .banner.style-2 .banner-hero-image { margin-top: 50px; } .banner.style-3 .banner-text-content { margin-top: 0; } .right-part { text-align: right; } /*------------------------ Intro Styles ------------------------*/ .intro-item { text-align: center; padding: 30px 35px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border: 1px solid transparent; } .intro-item:hover { border-color: #c0392b; } .intro-icon { font-size: 4rem; line-height: 1; color: #c0392b; } .intro-title { color: #c0392b; font-size: 2.2rem; margin-top: 25px; margin-bottom: 15px; } /*------------------------ Features Styles ------------------------*/ .feature { float: left; width: 100%; margin-top: 65px; } .feature-icon { font-size: 2.5rem; width: 70px; height: 70px; border-radius: 50%; border: 1px solid #c0392b; line-height: 68px; text-align: center; color: #c0392b; margin-right: 30px; float: left; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .feature:hover .feature-icon { background-color: #c0392b; color: #ffffff; } .col-sm-4:first-child .feature-icon { float: right; margin-right: 0; margin-left: 30px; } .feature-content { float: left; width: calc(100% - 100px); } .col-sm-4:first-child .feature-content { float: right; text-align: right; } .feature-title { font-size: 2.2rem; margin-top: 5px; margin-bottom: 5px; color: #c0392b; } /*** More Features ***/ .more-feature-section .mock { margin-left: 25px; } .more-feature-section .section-header { margin-top: 50px; } .icon-list { line-height: 2.3; margin: 0; padding: 0; list-style: none; } .icon-list li span { font-size: 1.7rem; color: #c0392b; margin-right: 10px; } /*------------------------ Video Description Styles ------------------------*/ .plyr .plyr__play-large { height: 60px; width: 60px; border-radius: 50%; background-color: #ffffff; border: none; text-align: center; } .plyr .plyr__play-large svg { color: #c0392b; left: 11px; } .plyr--video .plyr__controls { padding: 20px 5px 20px; } .plyr__controls button svg { width: 12px; height: 13px; } .plyr__progress--buffer, .plyr__progress--played, .plyr__volume--display { height: 5px; } .plyr__progress--buffer::-webkit-progress-value, .plyr__progress--played::-webkit-progress-value, .plyr__volume--display::-webkit-progress-value { background-color: #c0392b; } .plyr input[type=range]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -2.5px; } .plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover { background-color: #c0392b; } /*------------------------ Screenshot Styles ------------------------*/ .screen-mock { background-image: url(../images/mocks/screenshot.png); background-size: contain; background-position: center center; background-repeat: no-repeat; height: 476.5px; width: 254px; margin: 0; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } .screenshot-wrap { margin: 65px -20px 0; overflow: hidden; } .screenshot-carousel .owl-wrapper-outer { overflow: visible; } .screenshot-carousel .owl-item img { width: calc(100% - 40px); margin: 0 20px; -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09); } .screenshot-carousel .owl-pagination { text-align: center; margin-top: 100px; } .screenshot-carousel .owl-page { width: 10px; height: 10px; border-radius: 5px; background-color: #c0392b; display: inline-block; margin: 0 5px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .screenshot-carousel .owl-page.active { width: 30px; } /*---------------------------------------- Pricing Styles ----------------------------------------*/ .pricing-table { border: 1px solid rgba(192, 57, 43, 0.22); text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .pricing-table .pricing-header { border-top: 10px solid rgba(192, 57, 43, 0.22); border-bottom: 1px solid rgba(192, 57, 43, 0.22); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .pricing-table .pricing-header .pack-name { padding: 25px 20px 25px; font-size: 2.2rem; font-weight: 700; color: #000000; margin: 0; } .pricing-table .pack-price { font-size: 4.2rem; margin: 0; padding: 34px 20px 28px; font-weight: 700; font-family: "Poppins", sans-serif; } .pricing-table .pack-price .currency, .pricing-table .pack-price .pack-duration { font-weight: 400; font-size: 2.2rem; vertical-align: baseline; } .pricing-table .pack-features { list-style: none; line-height: 1.75; margin: 0 0 42px; padding: 0; } .pricing-table .btn { margin-bottom: 52px; } .pricing-table:hover, .pricing-table.active { border-color: #c0392b; } .pricing-table:hover .pricing-header, .pricing-table.active .pricing-header { border-color: #c0392b; } .pricing-table:hover .btn, .pricing-table.active .btn { background-color: #c0392b; color: #ffffff; } /*---------------------------------------- Support Styles ----------------------------------------*/ .support-tabs .nav-tabs { border: none; } .support-tabs .nav-tabs > li { margin-bottom: 0; width: 16.666666%; padding: 0 15px; } .support-tabs .nav-tabs > li > a { border: 1px solid #c0392b; border-radius: 0; margin: 0; text-align: center; color: #000000; display: block; line-height: 1.75; padding: 37px 10px 28px; position: relative; } .support-tabs .nav-tabs > li > a span { font-size: 4rem; line-height: 1; display: block; margin-bottom: 7px; } .support-tabs .nav-tabs > li > a:hover { background-color: transparent; color: #c0392b; } .support-tabs .nav-tabs > li > a:after { content: ""; position: absolute; width: 0; height: 0; border-top: 13px solid #c0392b; border-left: 13px solid transparent; border-right: 13px solid transparent; top: 100%; left: 50%; margin-left: -13px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; opacity: 0; visibility: hidden; } .support-tabs .nav-tabs > li.active a { background-color: #c0392b; color: #ffffff; } .support-tabs .nav-tabs > li.active a:after { opacity: 1; visibility: visible; } .support-tabs .pane-content { padding: 65px 15px 0; width: 100%; float: left; } .support-tabs .installation-steps { float: left; width: 100%; margin-bottom: -45px; } .support-tabs .installation-step { width: 50%; display: inline-block; float: left; padding-right: 15px; margin-bottom: 45px; } .support-tabs .installation-step:nth-child(2n) { padding-right: 0; padding-left: 15px; } .support-tabs .installation-step .step-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 5px; } /*----------------------------------- Testimonial Boxed Styles -----------------------------------*/ .testimonial-carousel .testimonial { padding: 0 280px; text-align: center; } .testimonial-carousel .testimonial .commenter-thumb { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px; display: inline-block; } .testimonial-carousel .testimonial .commenter-name { font-size: 1.8rem; } .testimonial-carousel .testimonial .commenter-designation { font-size: 1.4rem; } .testimonial-carousel blockquote { font-size: 1.6rem; font-weight: 400; padding: 0; margin: 0; border: none; } .testimonial-carousel .owl-prev, .testimonial-carousel .owl-next { position: absolute; font-size: 3.4rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .testimonial-carousel .owl-prev { left: 0; } .testimonial-carousel .owl-next { right: 0; } .testimonial-carousel .client-info { margin-top: 50px; } .testimonial-carousel .client-name { font-size: 2.2rem; font-family: "Open Sans", sans-serif; font-weight: 600; margin: 0; } .testimonial-carousel .client-profession { font-size: 1.2rem; margin-top: 4px; margin-bottom: 0; } /*------------------------ Client Logo Styles ------------------------*/ .client-logo { display: inline-block; width: 20%; padding: 15px; position: relative; height: 130px; text-align: center; float: left; } /*------------------------ Contact Styles ------------------------*/ .right-image { padding: 0; } .map-area { padding: 0; } .google-map { height: 765px; } .contact-area { position: relative; } .contact-area .right-image { background-image: url(../images/bg/contact.jpg); background-position: center center; background-size: cover; position: relative; } .contact-area .right-image .overlay-black { height: 765px; } .form-wrap { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .form-wrap .section-header.style-2 { margin-bottom: 80px; } .form-wrap .section-header.style-2 .section-subtext { margin-top: 5px; } .contact-form input:not([type=radio]):not([type=checkbox]), .contact-form textarea { background-color: rgba(255, 255, 255, 0.15); } .contact-form ::-webkit-input-placeholder { color: #ffffff; opacity: 1; } .contact-form ::-moz-placeholder { color: #ffffff; opacity: 1; } .contact-form :-ms-input-placeholder { color: #ffffff; opacity: 1; } .contact-form :-moz-placeholder { color: #ffffff; opacity: 1; } .input-success, .input-error, .newsletter-success, .newsletter-error { margin-top: 15px; margin-bottom: 0; display: none; background-color: #ffffff; padding: 2px 20px; float: left; width: 100%; clear: both; text-align: left; } .input-success, .newsletter-success { color: #16a085; } .input-error, .newsletter-error { color: #e74c3c; } .newsletter-success, .newsletter-error { clear: both; width: 100%; } /*------------------------ Subscription Styles ------------------------*/ .subscription-area h3 { font-size: 4.8rem; font-weight: 300; margin: 0; line-height: 1.5; } .subscription { width: 100%; text-align: right; float: right; margin-top: 44px; } .subscription ::-webkit-input-placeholder { color: #ffffff; opacity: 0.55; } .subscription ::-moz-placeholder { color: #ffffff; opacity: 0.55; } .subscription :-ms-input-placeholder { color: #ffffff; opacity: 0.55; } .subscription :-moz-placeholder { color: #ffffff; opacity: 0.55; } .subscription input[type=email] { background-color: transparent !important; border-bottom: 1px solid #ffffff !important; float: left; font-size: 1.4rem !important; width: calc(100% - 220px) !important; margin-bottom: 0; margin-top: 7px; padding-left: 0 !important; padding-right: 0 !important; } .subscription *[type=submit] { font-size: 1.4rem; letter-spacing: 1.3px; text-transform: uppercase; color: #c0392b; background-color: #ffffff; border: none; line-height: 52px; width: 200px; padding: 0; text-align: center; border-radius: 26px; float: right; margin-left: 20px; margin-top: 0; } /*------------------------ Footer Styles ------------------------*/ .logo-footer { display: inline-block; margin: 0 auto; } .socials { margin-top: 30px; } .socials a { display: inline-block; height: 40px; width: 40px; border-radius: 50%; line-height: 38px; border: 1px solid #c0392b; font-size: 1.4rem; color: #c0392b; } .socials a + a { margin-left: 16px; } .socials a:hover { background-color: #c0392b; color: #ffffff; } .copyright-footer { background-color: #c0392b; color: #ffffff; padding: 21px 0; } .copyright-footer .copyright { font-size: 1.5rem; } .copyright-footer .copyright a { color: #ffffff; } .copyright-footer .copyright a:hover { color: #111111; } .footer-nav { text-align: right; width: 100%; list-style: none; margin: 0; padding: 0; } .footer-nav li { display: inline; margin-left: 36px; } .footer-nav li a { color: #ffffff; font-size: 1.5rem; font-weight: 400; font-family: "Open Sans", sans-serif; } /*-------------------------------------------------- Blog Page Styles --------------------------------------------------*/ .blog-listing { float: left; width: 100%; clear: both; } .blog-listing .post:nth-child(2n + 1) { clear: left; } .blog-listing .post-inner { float: left; width: 100%; margin-bottom: 60px; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 30px; border-radius: 5px; } .blog-listing .post-inner .btn { margin-top: 25px; } .blog-listing .post-metas { margin-top: 20px; margin-bottom: 0; color: #777777; } .blog-listing .post-metas .post-meta + .post-meta { margin-left: 20px; } .blog-listing .post-title { margin-top: 15px; margin-bottom: 0; font-size: 2.4rem; color: #111111; } .blog-listing .post-title a { color: inherit; } .blog-listing .post-title a:hover { color: #c0392b; } .blog-listing .post-excerpt { margin-top: 15px; margin-bottom: 0; } .post-pagination { margin-top: 30px; text-align: center; } .post-pagination > a, .post-pagination .current, .nav-links > a, .nav-links .current { height: 32px; width: 32px; line-height: 30px; border: 1px solid #c0392b; color: #111111; border-radius: 50% !important; display: inline-block; padding: 0; text-align: center; } .post-pagination > a + a, .post-pagination .current + a, .nav-links > a + a, .nav-links .current + a { margin-left: 10px; } .post-pagination > a:hover, .post-pagination .current:hover, .nav-links > a:hover, .nav-links .current:hover { background-color: #c0392b; color: #ffffff; text-decoration: none; } .post-pagination > a:first-child, .post-pagination > a:last-child, .post-pagination .current:first-child, .post-pagination .current:last-child, .nav-links > a:first-child, .nav-links > a:last-child, .nav-links .current:first-child, .nav-links .current:last-child { border-radius: 50% !important; } .post-pagination .current, .nav-links .current { background-color: #c0392b; color: #ffffff; margin-left: 10px; } .post-pagination > li > a, .nav-links > li > a { height: 32px; width: 32px; line-height: 30px; border: 1px solid #c0392b; color: #111111; border-radius: 50% !important; display: inline-block; padding: 0; text-align: center; } .post-pagination > li > a:hover, .nav-links > li > a:hover { background-color: #c0392b; color: #ffffff; } .post-pagination > li + li > a, .nav-links > li + li > a { margin-left: 10px; } .post-pagination > li:first-child > a, .post-pagination > li:last-child > a, .nav-links > li:first-child > a, .nav-links > li:last-child > a { border-radius: 50% !important; } .post-pagination > li.current a, .nav-links > li.current a { background-color: #c0392b; color: #ffffff; } /*-------------------------------------------------- Blog Single Page Styles --------------------------------------------------*/ .blog-single { float: left; width: 100%; clear: both; } .blog-single .post { float: left; width: 100%; clear: both; } .blog-single .post-bar { float: left; width: 100%; } .blog-single .post-inner { float: left; width: 100%; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 30px; border-radius: 5px; } .blog-single .post-metas { margin-top: 20px; margin-bottom: 0; color: #777777; } .blog-single .post-metas .post-meta + .post-meta { margin-left: 20px; } .blog-single .post-title { margin-top: 15px; margin-bottom: 0; font-size: 3rem; } .blog-single .post-entry { margin-top: 20px; } .blog-single .post-entry blockquote { font-size: 1.4rem; font-weight: 600; line-height: 1.75; } .blog-single .share-on { margin-top: 30px; } .given-comment { float: left; width: 100%; margin-top: 50px; margin-bottom: -50px; } .given-comment .given-comment-title { margin-top: 0; margin-bottom: 34px; font-family: "Open Sans", sans-serif; font-size: 1.8rem; float: left; width: 100%; } .given-comment .comments { float: left; width: 100%; list-style: none; margin: 0; padding: 0; } .given-comment .comments.child-comments { padding-left: 100px; } .given-comment .comment { float: left; width: 100%; } .given-comment .comment-wrap { width: 100%; float: left; margin-bottom: 50px; } .given-comment .commenter-thumb { float: left; display: block; width: 80px; height: 80px; margin-right: 20px; border-radius: 50%; overflow: hidden; } .given-comment .commenter-thumb img { max-width: 100%; height: auto; } .given-comment .comment-body { float: left; width: calc(100% - 100px); } .given-comment .comment-title { margin-top: 0; margin-bottom: 5px; font-weight: 600; font-size: 1.8rem; } .given-comment .comment-title .comment-date { font-weight: 400; font-size: 1.4rem; } .given-comment .comment-content p { margin-bottom: 7px; } .given-comment .comment-reply { font-weight: 600; font-size: 1.4rem; } .commenting-wrap { float: left; width: 100%; margin-top: 50px; } .commenting-wrap .comment-form-title { margin-top: 0; margin-bottom: 34px; font-family: "Open Sans", sans-serif; font-size: 1.8rem; float: left; width: 100%; } .commenting-wrap input { margin-bottom: 20px; } /*** Sidebar ***/ .widget { float: left; width: 100%; border: 1px solid rgba(192, 57, 43, 0.22); } .widget + .widget { margin-top: 40px; } .widget .widget-title { position: relative; padding: 8px 0; margin: 20px 30px 15px; } .widget .widget-title:before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 25px; background-color: rgba(192, 57, 43, 0.22); } .widget .widget-inner { padding: 0 30px 20px; float: left; width: 100%; } .widget .widget-inner p:last-child { margin-bottom: 0; } .widget ul { list-style: none; padding: 0; margin: 0; } .widget ul li { color: #111111; line-height: 1.75; } .widget ul li a { color: inherit; } .widget ul li a:hover { color: #c0392b; text-decoration: none; } .widget ul li a:before { content: "\f105"; font-family: "FontAwesome"; margin-right: 7px; display: inline-block; } .widget.post-widget ul li + li { margin-top: 10px; } .widget.post-widget ul li a { text-decoration: underline; } .widget.post-widget ul li a:before { text-decoration: none; } .widget .widget-posts { float: left; width: 100%; margin-bottom: -15px; } .widget .widget-post { float: left; width: 100%; margin-bottom: 15px; } .widget .widget-post-thumb { float: left; width: 60px; display: inline-block; margin-right: 15px; } .widget .widget-post-thumb img { width: 100%; height: auto; } .widget .widget-post-body { width: calc(100% - 75px); float: left; } .widget .widget-post-title { font-family: "Poppins", sans-serif; font-size: 1.4rem; } .widget .widget-post-date { font-size: 1.2rem; display: block; margin-top: 5px; } .widget .widget-tag { margin-left: -10px; margin-right: -10px; float: left; } .widget .widget-tag a { color: #111111; text-decoration: underline; margin-left: 10px; margin-right: 10px; float: left; line-height: 1.75; } .widget .widget-tag a:hover { color: #c0392b; } .widget .social-media { float: left; width: 100%; } .widget .social-media a { color: #111111; clear: both; float: left; font-weight: 700; line-height: 1.75; } .widget .social-media a:hover { color: #c0392b; text-decoration: none; }