/* Template Name: Callie HTML Template Author: yaminncco Colors: Body : #505050 Headers : #11151c Primary : #ee4266 Dark : #1b1c1e Grey : #e8eaed #97989b #323335 Fonts: Montserrat & Muli Table OF Contents ------------------------------------ GENERAL NAVIGATION PAGE HEADER POST POST PAGE ASIDE FOOTER RESPONSIVE ------------------------------------*/ /*========================================================= GENERAL ===========================================================*/ /*----------------------------*\ typography \*----------------------------*/ body { font-family: 'Muli', sans-serif; font-size: 16px; color: #505050; font-weight: 400; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; color: #11151c; font-weight: 700; margin: 0px 0px 15px; } h1 { font-size: 32.437px; } h2 { font-size: 25.629px; } h3 { font-size: 20.25px; } h4 { font-size: 16px; } h5 {} p { margin: 0px 0px 20px; } a { color: #11151c; -webkit-transition: 0.2s color; transition: 0.2s color; } a:hover, a:focus { color: #ee4266; text-decoration: none; outline: none; } ::-moz-selection { background-color: #ee4266; color: #FFF; } ::selection { background-color: #ee4266; color: #FFF; } ul, ol { margin: 0; padding: 0; list-style: none } ul.list-style, ol.list-style { padding-left: 15px; margin-bottom: 10px; } ul.list-style { list-style-type: disc; } ol.list-style { list-style-type: decimal; } blockquote.blockquote { padding: 30px; margin: 0px 0px 20px; border: 2px solid #e8eaed; } blockquote.blockquote:before { content: "\f10d"; font-family: fontAwesome; width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 50%; color: #ee4266; font-size: 30px; background: #fff; border: 2px solid #e8eaed; float: left; margin-right: 10px; } blockquote.blockquote .blockquote-footer { color: #97989b; } figure { margin-bottom: 20px; } figure>img { width: 100%; } figure.pull-right { margin-left: 15px; } figure.pull-left { margin-right: 15px; } figure>figcaption { font-size: 14px; text-align: center; margin-top: 10px; font-style: italic; color: #97989b; } /*----------------------------*\ section \*----------------------------*/ .section { padding-top: 30px; } .section-row { margin-bottom: 30px; } /*----------------------------*\ input \*----------------------------*/ .input { width: 100%; height: 40px; padding: 0px 15px; background-color: #fff; border-radius: 2px; border: 2px solid #e8eaed; } textarea.input { padding: 15px; height: 90px; } /*----------------------------*\ button \*----------------------------*/ .primary-button, .secondary-button { display: inline-block; padding: 10px 40px; border-radius: 2px; border: none; font-weight: 700; font-size: 14px; text-transform: uppercase; -webkit-transition: 0.2s all; transition: 0.2s all; } .primary-button { background-color: #ee4266; color: #fff; -webkit-box-shadow: 0px 0px 0px 2px #ee4266 inset; box-shadow: 0px 0px 0px 2px #ee4266 inset; } .secondary-button { background-color: #353535; color: #fff; -webkit-box-shadow: 0px 0px 0px 2px #353535 inset; box-shadow: 0px 0px 0px 2px #353535 inset; } .primary-button:hover, .primary-button:focus { background-color: transparent; color: #ee4266; } .secondary-button:hover, .secondary-button:focus { background-color: transparent; color: #353535; } /*----------------------------*\ social colors \*----------------------------*/ .social-facebook { background: #225b99 !important; } .social-twitter { background: #00adf2 !important; } .social-google-plus { background: #dc4d2d !important; } .social-pinterest { background: #cc2127 !important; } .social-instagram { background: #d341b2 !important; } /*========================================================= NAVIGATION ===========================================================*/ #nav { border-bottom: 1px solid #e8eaed; } #nav:after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 90; opacity: 0; visibility: hidden; -webkit-transition: 0.2s all; transition: 0.2s all; } #nav.shadow-active:after { opacity: 1; visibility: visible; } #nav-top { text-align: center; } #nav-top>.container { position: relative; } #nav-bottom { border-top: 1px solid #e8eaed; } /*----------------------------*\ social \*----------------------------*/ .nav-social { float: left; padding: 10px 0px; } .nav-social li { display: inline-block; } .nav-social li a { display: block; padding: 15px; line-height: 20px; } /*----------------------------*\ logo \*----------------------------*/ .nav-logo { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } a .custom-logo-link { display: inline-block; line-height: 70px; height: 70px; } a .custom-logo-link>img { width: 100%; max-height: 70px; } /*----------------------------*\ search \*----------------------------*/ .nav-btns { float: right; padding: 10px 0px; } .nav-btns>button { width: 50px; height: 50px; line-height: 50px; text-align: center; border: none; background: transparent; } #nav-search { position: fixed; left: 50%; -webkit-transform: translate(-50%, 10px); -ms-transform: translate(-50%, 10px); transform: translate(-50%, 10px); opacity: 0; visibility: hidden; max-width: 960px; width: 100%; padding: 60px 5%; background: #1b1c1e; z-index: 999; -webkit-transition: 0.2s all; transition: 0.2s all; } #nav-search.active { opacity: 1; visibility: visible; -webkit-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); transform: translate(-50%, 0px); } #nav-search form .input { height: 80px; background: transparent; border: 2px solid #323335; color: #fff; font-size: 24px; font-weight: 700; padding: 15px 25px; } /*----------------------------*\ menu \*----------------------------*/ .nav-menu { position: relative; text-align: center; float: none; } .nav-menu>li { float: none; display: inline-block; } .nav-menu>li>a { display: block; padding: 25px 15px; line-height: 20px; font-weight: 700; text-transform: uppercase; } /*----------------------------*\ dropdown \*----------------------------*/ .nav-menu li.has-dropdown { position: relative; } .nav-menu li.has-dropdown>a:after { font-family: 'FontAwesome'; content: "\f0d7"; margin-left: 5px; } .nav-menu li.has-dropdown>.dropdown { position: absolute; left: 0; width: 200px; text-align: left; z-index: 60; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0; visibility: hidden; -webkit-transition: 0.2s all; transition: 0.2s all; } .nav-menu li.has-dropdown:hover>.dropdown { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; visibility: visible; } .nav-menu li.has-dropdown>.dropdown .dropdown-body { background-color: #fff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); border-top: 2px solid #ee4266; } .dropdown .dropdown-list li { border-bottom: 1px solid #e8eaed; } .dropdown .dropdown-list li a { display: block; padding: 10px; line-height: 20px; } .dropdown .dropdown-heading { text-transform: uppercase; font-size: 14px; margin-top: 0px; margin-bottom: 10px; line-height: 30px; } /*----------------------------*\ mega dropdown \*----------------------------*/ .nav-menu li.has-dropdown.megamenu { position: static; } .nav-menu li.has-dropdown.megamenu>.dropdown { width: 100%; } .nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-body { padding: 30px; } .nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list { margin-bottom: 30px; } .nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list li a { padding-left: 0px; padding-right: 0px; } /*----------------------------*\ tab dropdown \*----------------------------*/ .nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-content { z-index: 70; position: relative; margin-left: -30px; } .nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav { background-color: #1b1c1e; -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1); position: relative; z-index: 60; } .nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li { border-bottom: 1px solid #323335; } .nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li a { display: block; padding: 15px; color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase; } .nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active { background: #ee4266 } .nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active a { color: #fff; } /*----------------------------*\ nav aside \*----------------------------*/ #nav-aside { position: fixed; right: 0; top: 0; bottom: 0; background-color: #1b1c1e; max-width: 360px; width: 100%; padding: 80px 20px; overflow-y: scroll; z-index: 99; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.4s all cubic-bezier(.77, 0, .18, 1); transition: 0.4s all cubic-bezier(.77, 0, .18, 1); } #nav-aside.active { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .nav-aside-menu li a { display: block; padding: 15px 0px; color: #fff; border-bottom: 1px solid #323335; } .nav-aside-menu li a:hover, .nav-aside-menu li a:focus { color: #ee4266; } .nav-aside-menu li.has-dropdown>a { cursor: pointer; } .nav-aside-menu li.has-dropdown>a:after { font-family: 'FontAwesome'; content: "\f0d7"; float: right; } .nav-aside-menu li.has-dropdown>.dropdown { display: none; margin-left: 30px; border-left: 1px solid #323335; } .nav-aside-menu li.has-dropdown.active>.dropdown { display: block; } .nav-aside-menu li.has-dropdown>.dropdown a { padding: 15px; } .nav-close { width: 50px; height: 50px; position: absolute; top: 10px; right: 15px; background-color: transparent; border: none; } .nav-close span { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .nav-close span:before, .nav-close span:after { content: ""; display: block; width: 30px; background-color: #fff; height: 2px; } .nav-close span:before { -webkit-transform: translateY(0px) rotate(-135deg); -ms-transform: translateY(0px) rotate(-135deg); transform: translateY(0px) rotate(-135deg); } .nav-close span:after { -webkit-transform: translateY(-2px) rotate(135deg); -ms-transform: translateY(-2px) rotate(135deg); transform: translateY(-2px) rotate(135deg); } /*========================================================= PAGE HEADER ===========================================================*/ .page-header { position: relative; margin: 0; padding-top: 120px; padding-bottom: 80px; background-color: #1b1c1e; } #post-header { padding-top: 240px; padding-bottom: 80px; } .page-header .page-header-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .page-header .page-header-bg:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(27, 28, 30, 0)), color-stop(90%, rgba(27, 28, 30, 0.8))); background: linear-gradient(180deg, rgba(27, 28, 30, 0) 0%, rgba(27, 28, 30, 0.8) 90%); } .page-header h1 { font-size: 41.053px; color: #FFF; } .page-header p.lead { font-size: 20.25px; color: #FFF; } /*========================================================= POST ===========================================================*/ .post { position: relative; margin-bottom: 30px; } .post .post-body { position: relative; margin: -50px 0px 0px 3%; padding: 5%; background: #fff; z-index: 10; } .post .post-img { display: block; overflow: hidden; border-radius: 10px; } .post-img>img { width: 100%; -webkit-transition: 1.6s -webkit-transform; transition: 1.6s -webkit-transform; transition: 1.6s transform; transition: 1.6s transform, 1.6s -webkit-transform; } .post-img:hover>img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .post .post-title { font-size: 18px; } .post .post-title.title-sm { font-size: 16px; } .post .post-title.title-lg { font-size: 25.629px; } .post .post-category { margin-bottom: 10px; } .post-category a { color: #ee4266; font-weight: 700; font-size: 12px; text-transform: uppercase; } .post-category a:after { content: ','; display: inline-block; } .post-category a:last-child:after { display: none; } .post .post-meta { margin-bottom: 10px; } .post-meta li { display: inline-block; color: #97989b; font-size: 12px; text-transform: uppercase; } .post-meta li a { color: #97989b; font-weight: 700; } .post-meta li a:hover, .post-meta li a:focus { color: #ee4266; } .post-meta li:after { content: '•'; display: inline-block; padding-left: 5px; padding-right: 5px; } .post-meta li:last-child:after { display: none; } /*----------------------------*\ hot post \*----------------------------*/ .hot-post { padding: 0 15px; } .hot-post .hot-post-left { padding-right: 0px; padding-left: 0px; } .hot-post .hot-post-right { padding-right: 0; padding-left: 5px; } .hot-post .post { margin-bottom: 7px; } .hot-post { margin-bottom: 10px; } /*----------------------------*\ post thumb \*----------------------------*/ .post.post-thumb .post-img:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(27, 28, 30, 0)), color-stop(90%, rgba(27, 28, 30, 0.8))); background: linear-gradient(180deg, rgba(27, 28, 30, 0) 0%, rgba(27, 28, 30, 0.8) 90%); } .post.post-thumb .post-body { position: absolute; margin: 0px; padding: 0px 5%; z-index: 20; bottom: 5%; background-color: transparent; } .post.post-thumb .post-title a { color: #fff; } .post.post-thumb .post-title a:hover, .post.post-thumb .post-title a:focus { color: #ee4266; } .post.post-thumb .post-meta li { color: #fff; } .post.post-thumb .post-meta li a { color: #fff; } .post.post-thumb .post-meta li a:hover, .post.post-thumb .post-meta li a:focus { color: #ee4266; } /*----------------------------*\ post small \*----------------------------*/ .post.post-sm .post-body { margin: 15px 0px 0px; background: transparent; padding: 0; } /*----------------------------*\ post widget \*----------------------------*/ .post.post-widget:after { content: ""; display: table; clear: both; } .post.post-widget .post-img { float: left; width: 130px; } .post.post-widget .post-body { position: relative; background: transparent; margin: 0px 0px 0px 150px; padding: 0; } .post.post-widget .post-title { font-size: 16px; margin-bottom: 0px; } /*----------------------------*\ post row \*----------------------------*/ .post.post-row:after { content: ''; display: table; clear: both; } .post.post-row .post-img { width: 40%; float: left; } .post.post-row .post-body { margin: 0px 0px 0px calc(40% + 30px); padding: 0; } /*========================================================= POST PAGE ===========================================================*/ .page-header .post-category { margin-bottom: 10px; } .page-header .post-meta li { color: #fff; } .page-header .post-meta li a { color: #fff; } .page-header .post-meta li a:hover, .page-header .post-meta li a:focus { color: #ee4266; } .post-share a { display: inline-block; padding: 5px 15px; border-radius: 5px; color: #fff; background-color: #97989b; margin-right: 4px; margin-bottom: 6px; -webkit-transition: 0.2s opacity; transition: 0.2s opacity; } .post-share a:hover { opacity: 0.9; } .post-share a i { width: 20px; text-align: center; } .post-share a span { padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, 0.1); text-transform: uppercase; font-size: 12px; font-weight: 700; margin-left: 10px; } .post-content .post-attachement.pull-left { margin-right: 15px; } .post-content .post-attachement.pull-right { margin-left: 15px; } .post-tags ul li { display: inline-block; text-transform: uppercase; font-size: 12px; font-weight: 700; } .post-tags ul li:first-child { font-weight: 400; } .post-tags ul li:after { content: ','; display: inline-block; } .post-tags ul li:first-child:after { display: none; } .post-tags ul li:last-child:after { display: none; } /*----------------------------*\ post nav \*----------------------------*/ .post-nav:after { content: ""; display: table; clear: both; } .post-nav .post-title { font-size: 14px; margin: 0px; } .post-nav .prev-post { float: left; width: 50%; padding-right: 15px; } .post-nav .next-post { float: right; width: 50%; text-align: right; padding-left: 15px; } .post-nav .post-img { display: block; width: 100px; overflow: hidden; } .post-nav .prev-post .post-img { float: left; margin-right: 15px; } .post-nav .next-post .post-img { float: right; margin-left: 15px; } .post-nav .next-post span, .post-nav .prev-post span { font-weight: 700; color: #97989b; text-transform: uppercase; font-size: 12px; } .post-nav .next-post:after, .post-nav .prev-post:after { content: ''; display: table; clear: both; } /*----------------------------*\ author \*----------------------------*/ .author.media .media-left { position: relative; padding-right: 30px; } .author .author-img { width: 100px; border-radius: 50%; margin-bottom: 15px; ; } .author .author-social li { display: inline-block; margin-right: 10px; } .author .author-social li a { display: block; } .page-header .author .author-social li a { color: #fff; } .page-header .author .author-social li a:hover, .page-header .author .author-social li a:focus { color: #ee4266; } /*----------------------------*\ comments \*----------------------------*/ .post-comments .media { margin-top: 30px; } .post-comments .media:nth-child(1) { margin-top: 0px; } .post-comments .media .media-left { position: relative; padding-right: 15px; } .post-comments .media .media-left .media-object { width: 50px; border-radius: 50%; position: relative; z-index: 20; } .post-comments .media .media-left:after { content: ''; position: absolute; left: calc(50% - 9px); top: 80px; bottom: 15px; width: 1px; background-color: #e8eaed; } .post-comments .media .media-heading h4 { display: inline-block; font-size: 14px; text-transform: uppercase; } .post-comments .media .media-heading .time { color: #97989b; margin-left: 10px; font-size: 12px; } .post-comments .media .reply { text-transform: uppercase; display: inline-block; padding: 5px 13px; font-size: 12px; font-weight: 700; color: #fff; background-color: #323335; border-radius: 2px; -webkit-transition: 0.2s opacity; transition: 0.2s opacity; } .post-comments .media .reply:hover { opacity: 0.9; } .post-comments .media.media-author .media-heading h4 { color: #ee4266; } .post-comments .media.media-author .media-left:after { background-color: #ee4266; } /*========================================================= ASIDE ===========================================================*/ .aside-widget { margin-bottom: 30px; } /*----------------------------*\ social widget \*----------------------------*/ .social-widget ul { overflow: auto; } .social-widget ul li { float: left; width: 33.33%; } .social-widget ul li a { display: block; text-align: center; padding: 30px 15px; color: #fff; -webkit-transition: 0.2s opacity; transition: 0.2s opacity; } .social-widget ul li a:hover { opacity: 0.9; } .social-widget ul li a span { font-weight: 700; font-size: 14px; } .social-widget ul li a i { display: block; font-size: 30px; margin-bottom: 10px; } /*----------------------------*\ newsletter widget \*----------------------------*/ .newsletter-widget { position: relative; padding: 0px 30px 30px; border-left: 2px dashed #e8eaed; border-right: 2px dashed #e8eaed; } .aside-widget:last-child .newsletter-widget { border-bottom: 2px dashed #e8eaed; } .newsletter-widget form { position: relative; z-index: 20; } .newsletter-widget .input { margin-bottom: 15px; } .newsletter-widget:after { content: "\f003"; font-family: FontAwesome; position: absolute; bottom: -25px; right: 27px; font-size: 160px; color: #e8eaed; -webkit-transform: rotate(13deg); -ms-transform: rotate(13deg); transform: rotate(13deg); } .footer-widget .newsletter-widget { padding: 0px; border: none; } .footer-widget .newsletter-widget:after { color: #323335; } /*----------------------------*\ category widget \*----------------------------*/ .category-widget ul li { padding: 15px 0px; border-bottom: 1px solid #e8eaed; } .category-widget ul li a { display: block; text-transform: uppercase; font-weight: 700; } .category-widget ul li a span { float: right; font-size: 14px; color: #97989b; margin-left: 15px; } .footer-widget .category-widget ul li { border-color: #323335; } /*----------------------------*\ tags widget \*----------------------------*/ .tags-widget ul li { display: inline-block; margin-right: 4px; margin-bottom: 6px; } .tags-widget ul li a { text-transform: uppercase; display: block; padding: 10px 15px; font-size: 12px; font-weight: 700; color: #97989b; background-color: #323335; border-radius: 2px; -webkit-transition: 0.2s all; transition: 0.2s all; } .tags-widget ul li a:hover, .tags-widget ul li a:focus { color: #fff !important; background-color: #ee4266; } /*----------------------------*\ galery widget \*----------------------------*/ .galery-widget ul { margin: -2px -2px; } .galery-widget ul li { display: inline-block; width: 33.33%; padding: 2px; margin-right: -4px; } .galery-widget ul li a { display: block; overflow: hidden; } .galery-widget ul li a img { width: 100%; -webkit-transition: 1.6s -webkit-transform; transition: 1.6s -webkit-transform; transition: 1.6s transform; transition: 1.6s transform, 1.6s -webkit-transform; } .galery-widget ul li a:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } /*========================================================= FOOTER ===========================================================*/ #footer { margin-top: 40px; padding-top: 80px; padding-bottom: 40px; background-color: #1b1c1e; } #footer { color: #97989b; } #footer a { color: #97989b; } #footer a:hover, #footer a:focus { color: #ee4266; } .footer-widget { margin-bottom: 30px; } .footer-widget .footer-title { color: #fff; font-size: 14px; text-transform: uppercase; } .footer-logo { margin-bottom: 30px; } .footer-logo .logo { display: inline-block; line-height: 70px; height: 70px; } .footer-bottom { margin-top: 30px; padding-top: 30px; border-top: 1px solid #323335; } .footer-nav { text-align: right; } .footer-nav li { display: inline-block; margin-right: 10px; } /*----------------------------*\ CONTACT \*----------------------------*/ .contact li { position: relative; margin-bottom: 20px; padding-left: 55px; padding-top: 5px; min-height: 40px; } .contact li i { position: absolute; left: 0; top: 0; width: 40px; text-align: center; height: 40px; background: #fff; color: #ee4266; border: 1px solid #e8eaed; line-height: 40px; border-radius: 50%; } .footer-widget .contact li i { color: #97989b; background-color: #353535; border: none; } .contact-social li { display: inline-block; margin-right: 3px; margin-bottom: 6px; } .contact-social li a { display: block; width: 40px; height: 40px; line-height: 40px; font-size: 14px; text-align: center; border-radius: 50%; color: #fff !important; -webkit-transition: 0.2s opacity; transition: 0.2s opacity; } .contact-social li a:hover { opacity: 0.9; } /*========================================================= RESPONSIVE ===========================================================*/ @media only screen and (max-width: 991px) { #nav-bottom { display: none; } .nav-social { display: none; } .nav-logo { position: static; -webkit-transform: none; -ms-transform: none; transform: none; left: 0; display: inline-block; float: left; } .footer-nav { text-align: left; margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .page-header h1 { font-size: 32.437px; } .post-nav .prev-post { float: none; width: 100%; margin-bottom: 15px; padding-right: 0px; } .post-nav .prev-post:last-child { margin-bottom: 0px; } .post-nav .next-post { float: none; width: 100%; } .post-nav .next-post { float: none; width: 100%; padding-left: 0px; text-align: left; } .post-nav .next-post .post-img { margin-right: 15px; float: left; margin-left: 0px; } }