/*
Theme Name: JoJo
Theme URI: http://www.edwr.co.uk
Description: Custom wordpress design and development for client.
Version: 4.1
Author: Mark Edwards EDWR.co.uk
Author URI: http://www.edwr.co.uk
*/

body {
  #background:url(images/bg.jpg) no-repeat top center;
  background-attachment: fixed;
  background-size:cover;
  background-color:#fbf7f7;
}



/* WRAPPER
_________________________*/

.btn {
  padding:13px 22px 13px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size:12px;
  letter-spacing: 2px;
  font-weight:bold;
  text-transform: uppercase;
  border-radius: 0px;
}

.btn-primary {
  background:#e1e1e1;
  border:0px;
  color:#21201f;
}

.btn-primary:hover, .btn-primary:active {
  background:#555;
  border:0px;
  color:#FFF;
}



/* WRAPPER
_________________________*/

.wrapper.container {
  padding-left:20px;
  padding-right:20px;
  background:#FFF;
}



/* NAV
_________________________*/

.header {padding:40px 0px 40px 0px;}

.navbar {border-radius:0px;}

.navbar-brand {padding-left:0px;}
.header .logo {margin-top:-6px;}
.header .logo img {max-width:400px;}

.navbar-default {
  background:transparent;
  border:0px;
  font-family: 'Montserrat', sans-serif;
  font-size:18px;
}

.navbar-default .navbar-nav>li>a {
  color:#000;
}

.navbar-right {margin-top: 15px;}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {color:#000;background:transparent;}
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a {color:#000;border-bottom:#FFF solid 3px;padding:0px 0px 10px 0px;margin:15px 15px 0px 15px;}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {color:#000;border-bottom:#000 solid 3px;}

.navbar-default .navbar-nav.social>li>a {padding:0px;width:32px;height:32px;margin-top:10px;margin-right:0px;border:0px;}

.navbar-default .social-icon {display:block;width:30px;height:30px;background-size:30px 30px!important;margin:7px 0px 0px 15px;}
.navbar-default .social-icon.facebook {background:url(images/facebook-icon.png) no-repeat center;}
.navbar-default .social-icon.twitter {background:url(images/twitter-icon.png) no-repeat center;}
.navbar-default .social-icon.instagram {background:url(images/instagram-icon.png) no-repeat center;}



/* FEATURED SLIDER
_________________________*/

.featured {padding-bottom: 25px;margin-bottom: 25px;border-bottom: #e1e1e1 solid 4px;}

.featured-slider {position:relative;margin-left:-15px;margin-right:-15px;}

.featured-slider .slick-arrow {
  position: absolute;
  z-index:9999;
  top:37%;
  margin-top:-20px;
  padding:10px;
  border:#e1e1e1 solid 3px;
  background:#FFF;
  font-size:14px;
  font-weight:bold;
  color:#fb3698;
  outline: none!important;
}

.featured-slider .slick-prev {left:-16px;}
.featured-slider .slick-next {right:-16px;}

.featured-slider .entry {padding:0px 15px 0px 15px;outline: none;}
.featured-slider .entry.slick-active:first-of-type {padding-left:0px;}

.featured-slider .entry .image {position: relative;margin-bottom: 20px;}
.featured-slider .entry .image .category {position: absolute;left:0px;bottom: 0px;background:white;padding:7px 15px 7px 15px;letter-spacing: 2px;text-transform: uppercase;font-size:11px;font-weight: bold;}
.featured-slider .entry .image .category a {color:#d8a919;text-decoration: none;}
.featured-slider .entry .title {padding:10px 15px 15px 15px;}
.featured-slider .entry .title h2 {margin:0px;padding:0px;font-family: 'Cardo', sans-serif;line-height: 26px;font-size:18px;font-weight:bold;}
.featured-slider .entry .title h2 a {color:#21201f;text-decoration:none;}
.featured-slider .entry .meta {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size:12px;
}
.featured-slider .entry .meta a {
  color: #898989;
}
.featured-slider .entry .meta span {color:#fb3698}



/* HEADLINE
_________________________*/

.headline {
  margin-bottom: 60px;
}

.headline .title h2 {
  margin:0px;padding:0px;
  font-family: 'Cardo', sans-serif;
  line-height: 50px;
  font-size:32px;
  font-weight:bold;
}

.headline .title h2 a {color:#21201f;text-decoration:none;}

.headline .meta {
  font-family: 'Montserrat', sans-serif;
  margin:20px 0px 30px 0px;
  text-transform: uppercase;
}

.headline .meta .date {min-height: 35px;font-weight: bold;color: #fb3698;border-right:#d7d7d7 solid 1px;}
.headline .meta .date span {display:block;font-size:10px;color:#898989;}

.headline .meta .comment-count {margin-top:-10px;font-size: 14px;}
.headline .meta .comment-count .glyphicon {top:10px;padding-right:10px;font-size:30px;color:#d8a919;}
.headline .meta .comment-count a {color:#898989;}

.headline .meta .share {min-height: 35px;padding-left:20px;border-left:#d7d7d7 solid 1px;}

.headline .entry {padding:20px 0px 10px 0px;}
.headline .entry p {float:left;font-family: "proxima-nova",sans-serif;font-size:16px;line-height: 26px;color:#777777;}
.headline .entry p:first-of-type::first-letter {
  float:left;
  margin-top:-1px;
  padding-right:10px;
  font-family: 'Cardo', sans-serif;
  font-size:88px;
  line-height: 88px;
  font-weight: bold;
  color: #fb3698;
}



/* GRID 2x2
_________________________*/

.grid2x2 {margin-bottom: 30px;}
.grid2x2 .entry {margin-bottom: 40px;}
.grid2x2 .entry .image {position: relative;margin-bottom: 20px;}
.grid2x2 .entry .image .category {position: absolute;left:0px;bottom: 0px;background:white;padding:7px 15px 7px 15px;letter-spacing: 2px;text-transform: uppercase;font-size:11px;font-weight: bold;}
.grid2x2 .entry .image .category a {color:#d8a919;text-decoration: none;}
.grid2x2 .entry .title {padding:10px 15px 15px 15px;}
.grid2x2 .entry .title h2 {margin:0px;padding:0px;font-family: 'Cardo', sans-serif;line-height: 26px;font-size:18px;font-weight:bold;}
.grid2x2 .entry .title h2 a {color:#21201f;text-decoration:none;}
.grid2x2 .entry .meta {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size:12px;
}
.grid2x2 .entry .meta a {
 color: #898989;
}
.grid2x2 .entry .meta span {color:#fb3698}



/* GRID 3x2
_________________________*/

.grid3x2 .entry {margin-bottom: 40px;}
.grid3x2 .entry .image {position: relative;margin-bottom: 20px;}
.grid3x2 .entry .image .category {position: absolute;left:0px;bottom: 0px;background:white;padding:7px 15px 7px 15px;letter-spacing: 2px;text-transform: uppercase;font-size:11px;font-weight: bold;}
.grid3x2 .entry .image .category a {color:#d8a919;text-decoration: none;}
.grid3x2 .entry .title {padding:10px 15px 15px 15px;}
.grid3x2 .entry .title h2 {margin:0px;padding:0px;font-family: 'Cardo', sans-serif;line-height: 23px;font-size:15px;font-weight:bold;}
.grid3x2 .entry .title h2 a {color:#21201f;text-decoration:none;}
.grid3x2 .entry .meta {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size:12px;
}
.grid3x2 .entry .meta a {
 color: #898989;
}
.grid3x2 .entry .meta span {color:#fb3698}



/* PAGINATION
_________________________*/

.pagination-wrap {margin:10px 0px 80px 0px;}
.pagination-wrap .alm-btn-wrap {padding:0px 15px 0px 15px!important;}
.pagination-wrap button.alm-load-more-btn {
  display:block!important;
  width:100%!important;
  padding:10px!important;
  background:black!important;
  color:white!important;
  line-height:100%!important;
  outline:none;
}
.pagination-wrap .alm-reveal {
	display: table;
    content: " ";
}

button.alm-load-more-btn.loading {padding:0px!important;}
button.alm-load-more-btn.loading:before {display:none!important;}

.pagination-wrap.archive a {
  display: inline-block;
  padding: 8px 20px 8px 20px;
  background:#000;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* GRID 3x2
_________________________*/

.widget {margin-bottom: 30px;border:#898989 solid 4px;padding:30px;}
.widget.unstyled {border:0px;padding:0px;}
.widget .widget-header {margin-bottom: 20px;}
.widget .widget-header h4 {margin:0px;padding:0px 0px 10px 0px;font-family: 'Montserrat', sans-serif;font-size:14px;letter-spacing: 1px;text-transform: uppercase;color:#636363}
.widget .widget-content {font-size: 12px;color:#636363}
.widget .widget-content select {width: 100%;border:#000 solid 1px;padding:10px;height:40px;}
.widget .widget-content .cms-widget h4 {display:none;}
.widget .widget-content .cms-widget label {display:none;}

.widget .nav-tabs {border:0px;}
.widget .nav-tabs a {
  display:block;
  padding:15px 0px 15px 0px;
  margin:0px;
  border-radius: 0px;
  border:0px!important;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-size:13px;
  color: #FFF!important;
}
.widget .nav-tabs a.popular {background:#fb3698!important;}
.widget .nav-tabs a.mostviewed {background:#d8a919!important;}
.widget .nav-tabs>li {width:50%;border:0px;}

.widget .tab-pane {
  background:#f4f4f4
}
.widget .tab-pane#popular {border-top:#fb3698 solid 5px;}
.widget .tab-pane#mostviewed {border-top:#d8a919 solid 5px;}
.widget .tab-pane li {
  border-bottom: #e1e1e1 solid 1px;
}
.widget .tab-pane li:last-of-type {border:0px;}
.widget .tab-pane li a {display: block;padding:20px;}
.widget .tab-pane li a:focus, .widget .tab-pane li a:active {outline: none;}
.widget .tab-pane img {max-width: 100%;height: auto;}
.widget .tab-pane h4 {max-height:104px;overflow: hidden;}

.widget .tab-pane li h4 {
  margin:0px;padding:0px;
  font-family: 'Cardo', sans-serif;
  font-size:20px;
  line-height: 26px;
  color: #444444;
}

.widget .search-form {border:#000 solid 1px;}
.widget .search-form .form-control {border:0px;-webkit-box-shadow: none;box-shadow: none;}
.widget .search-form .form-control.search-submit {text-transform:uppercase;font-size:12px;font-weight:bold;}



/* FOOTER
_________________________*/

.footer {
  margin-left:-20px;margin-right:-20px;
  background:#e1e1e1;
  padding:30px 20px 60px 20px;
}

.footer .logo img {max-width:250px;}

.footer span.header {
  display:block;
  padding:0px;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size:16px;
  color: #7d7d7d;
}

.footer .list-unstyled a {line-height: 25px;color:#7d7d7d;text-decoration: none;}



.category-title {
	margin:0px 0px 30px 0px;
	padding:0px 0px 10px 0px;
	border-bottom:#898989 solid 4px;
	color:#898989;
}



/* PAGE
_________________________*/

.page .entry {padding:20px 0px 10px 0px;font-family: "proxima-nova",sans-serif;font-size:16px;line-height: 26px;color:#777777;}



/* SINGLE
_________________________*/

.single {
  margin-bottom: 60px;
}

.single .title h2 {
  margin:0px;padding:0px;
  font-family: 'Cardo', sans-serif;
  line-height: 50px;
  font-size:32px;
  font-weight:bold;
	color:#21201f;
}

.single .meta {
  font-family: 'Montserrat', sans-serif;
  margin:20px 0px 30px 0px;
  text-transform: uppercase;
}

.single .meta .date {min-height: 35px;font-weight: bold;color: #fb3698;border-right:#d7d7d7 solid 1px;}
.single .meta .date span {display:block;font-size:10px;color:#898989;}

.single .meta .comment-count {margin-top:-10px;font-size: 14px;}
.single .meta .comment-count .glyphicon {top:10px;padding-right:10px;font-size:30px;color:#d8a919;}
.single .meta .comment-count a {color:#898989;}

.single .meta .share {min-height: 35px;padding-left:20px;border-left:#d7d7d7 solid 1px;}

.single .entry {padding:20px 0px 10px 0px;}
.single .entry p {font-family: "proxima-nova",sans-serif;font-size:16px;line-height: 26px;color:#777777;}

.single .entry > div {width:100%!important;max-width:100%;}

.single .entry .embed-youtube .youtube-player {max-width:100%!important;}

.mashicon-share:before, [class*=" mashicon-"] .icon:before, [class^=mashicon-] .icon:before {margin-right:0px!important;}

.relatedposts {margin-bottom:40px;}

.jp-relatedposts-items .jp-relatedposts-post {width:25%!important;}
.jp-relatedposts-items .jp-relatedposts-post img {max-width:100%!important;height:auto!important}
