/*
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;
}
}