/*
Theme Name: Jo Cox Design
Description: Jo Cox Design
Author: Jo Cox
Author URI: https://www.hutsixdigital.co.uk
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Version: 1.0

*/

@import url("https://use.fontawesome.com/releases/v6.1.0/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');

body { background-color: #001a35; font-family: 'Quicksand', sans-serif; line-height: 170%; }
body, p, h1, h2, h3, a, .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-brand { color: #001a35; }
body, p, .navbar-light .navbar-nav .nav-link { font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))); }
p { font-weight: 500; }
p:last-child { margin-bottom: 0; }
h1, p.h1-style { font-size: calc(36px + (44 - 36) * ((100vw - 300px) / (1600 - 300)))!important; font-weight: 600; margin-bottom: 10px; }
@media (min-width: 992px) { .home h1 { width: 95%; } }
.single-projects h1 { margin-bottom: 30px; }
.category h1 { margin-bottom: 0!important; }
h2, h1.h2-style { font-weight: 700; font-size: calc(26px + (32 - 26) * ((100vw - 300px) / (1600 - 300)))!important; margin-bottom: 20px; }
h3, .article h2 { font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)))!important; font-weight: 700; margin-bottom: 20px; }
h4 { font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))); font-weight: 700; margin-bottom: 20px; text-transform: uppercase; }
.text-white h1, .text-white p, .text-white a, .text-white a:hover { color: #fff; }
a { text-decoration: none; color: #001a35; transition: 300ms ease all; }
a:hover { color: #001a35; font-weight: 700; }
blockquote p, p.lead { font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300))); line-height: 150%; font-weight: 500; }
p.lead a { font-weight: 700; }
blockquote { margin-bottom: 0; padding: 0 10vw; }
cite { font-size: calc(16px + (17 - 16) * ((100vw - 300px) / (1600 - 300))); font-style: normal; opacity: 0.5; }
.page-title p { font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300))); margin-bottom: 30px; }
.hero h1, .page-head h1 { margin-bottom: 20px; }
.hero p:last-child, .page-head p:last-child { margin-top: 30px; }
.boxshadow { background: #fff; display: block; border: solid 1px #ddd; border-radius: 0.25rem; padding: 40px; text-align: center; transition: .15s ease all; margin-bottom: 1.5em; }
.boxshadow:hover { transform: scale(1.02); color: #000; }
@media (min-width: 992px) { .boxshadow { min-height: 420px; } }

a img { transition: 300ms ease all; }
a img:hover { transform: scale(1.05); }
img { max-width: 100%; height: auto; border-radius: 0.25rem; }
img.circle { border-radius: 100%; width: 60%; }
@media (min-width: 768px) { img.circle { width: 50%; } }
@media (min-width: 992px) { img.circle { width: 40%; } }
@media (min-width: 1200px) { img.circle { width: 90%; } }
@media (min-width: 1400px) { img.circle { width: 80%; } }
.two-col img { width: 100%; }
@media (min-width: 992px) { .two-col img { width: 95%!important; } }

.wrapper { float: left; width: 100%; position: relative; }
.white { background-color: #fff; }
.grey { background-color: #e5e8ea; }
.colour { background-color: #375e7d; }
.dark-grey { background-color: #1b1b1b; background-image: url(img/dark-grey.jpg); }
.black { background-color: #000; background-image: url(img/black.jpg); }
.blue { background-color: #003F82; }

.fullpadding { padding: 30px; }
@media (min-width: 992px) { .fullpadding { padding: 60px; } }
.padding { padding-top: 80px; padding-bottom: 80px; }
.paddingxl { padding-top: 10vh; padding-bottom: 15vh; }
.paddingsm { padding-top: 25px; padding-bottom: 25px; }
.paddingtop { padding-top: 80px; }
.paddingtopxl { padding-top: 120px; }
.paddingtopsm { padding-top: 40px; }
.paddingbottom { padding-bottom: 80px; }
.paddingbottomxl { padding-bottom: 120px; }
.paddingbottomsm { padding-bottom: 40px; }
.marginbottom { margin-bottom: 80px; }
.marginbottomsm { margin-bottom: 40px; }
.nopadding { padding: 0; }

.testimonial-block i, .page-title a, .page-title a:hover { color: #ffd148; }

.right { text-align: center; }
@media (min-width: 1200px) { .right { text-align: right; } }
.left { text-align: center; }
@media (min-width: 1200px) { .left { text-align: left; }  }

.breadcrumb { font-size: 13px; text-transform: uppercase; color: #999; }
.sep { margin: 0 20px; }
.header { border-bottom: solid 1px #e5e8ea; }
.logo { width: 250px; }
.navbar { padding: 0; }
.navbar-brand { padding: 0; font-size: 4rem; letter-spacing: -2px; font-weight: 700; text-transform: uppercase; }
.navbar-light .navbar-nav .nav-link { font-weight: 500; text-transform: uppercase; transition: 300ms ease all; }
.navbar-light .navbar-nav .nav-link:hover { color: #001a35; }
.navbar-light .navbar-nav li.active .nav-link { color: #001a35; font-weight: 700; }
.navbar-light .navbar-toggler { color: #001a35; border-color: #001a35; }
.navbar-light .navbar-toggler i { font-size: 24px; }
.navbar-toggler:focus { box-shadow: none; }
@media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-left: 2rem; padding-right: 0; } }

.hero-image { width: 40%; margin-left: 30%; margin-top: 40px; }
.hero-text { padding-top: 40px; padding-bottom: 80px; border-top: solid 1px #ddd; }
@media (min-width: 768px) { .hero-image { width: 20%; margin-left: 40%; } }
@media (min-width: 1200px) { 
	.hero-image { width: 80%; margin-left: 0; margin-right: 5%; }
	.hero-text { padding-top: 80px; padding-bottom: 80px; border-top: none; } 
}
.hero { background-repeat: no-repeat; background-position: right bottom; background-size: contain; }
.hero-overlay { background-color: rgba(0,26,53,0.5); }
@media (min-width: 992px) { .hero-overlay { background-color: rgba(0,26,53,0); } }

.article { height: 200px; }
@media (min-width: 992px) { .article { height: 280px; } }
.blog-cats { margin: 0; padding: 0; list-style: none; }
.blog-cats li { border-top: solid 1px #ddd; }
.blog-cats a { text-decoration: none; display: block; width: 100%; padding: 10px 0; position: relative; }
.blog-cats a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; position: absolute; right: 0; }
@media (min-width: 992px) { .blog-cats { width: 90%; } }
.post-date i { margin-right: 5px; }

.how-i-work img { max-width: 50%; margin-bottom: 20px; }

.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer a { text-decoration: underline; }
.footer a:hover { font-weight: 500; }

.copyright p { margin-bottom: 0; font-size: 13px; }

input, textarea { background-color: transparent; border-radius: 0.25rem; color: #001a35; border: solid 1px #001a35; }
.btn { padding: 1rem 2rem; font-weight: 700; text-transform: uppercase; width: 100%; margin-bottom: 5px; }
@media (min-width: 768px) { .btn { width: auto; margin-bottom: 0; margin-right: 6px; } }
.btn-outline-light{ color: #fff!important; }
.btn-outline-light:hover, .btn-light { color: #001a35!important; }
.btn-outline-dark { border-color: #001a35; color: #001a35; }
.btn-outline-dark:hover { background-color: #001a35; }
.btn-dark, .btn-dark:hover { background-color: #001a35; border-color: #001a35; }
.btn i { margin-right: 10px; }
@media (min-width: 768px) { .black .btn { margin-left: 5px; margin-right: 5px; } }
.gform_wrapper .gfield_required { color: #666!important; }

hr { margin: 0; opacity: 0.1; }

.slick-slider-carousel .slick-slide { margin-left: 20px; margin-right: 20px; }
.slick-list img { width: 90%; margin: auto }
.slick-prev, .slick-next { font-size: 0; position: absolute; bottom: 50%; margin-bottom: -12px; color: rgba(255, 255, 255, 0.1); border: 0; background: none; z-index: 1; border: none; outline: none!important; }
.slick-prev { left: 0; }
.slick-prev:after { transition: 300ms ease all; content: "\f104"; font-family: "Font Awesome 5 Free"; font-size: 36px; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; line-height: 1; font-weight: 900; }
.slick-next { right: 0px; text-align: right; }
.slick-next:after { transition: 300ms ease all; content: "\f105"; font-family: "Font Awesome 5 Free"; font-size: 36px; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; line-height: 1; font-weight: 900; }
.slick-prev:hover:after, .slick-next:hover:after { color: rgba(255, 255, 255, 0.5); }
.slick-dots { display: flex; justify-content: center; margin: 30px 0 0 0; padding: 0; list-style-type: none; }
.slick-dots li { margin: 0 0.25rem; }
.slick-dots button { display: block; width: 12px; height: 3px; padding: 0; border: none; border-radius: 0; background-color: #ccc; text-indent: -9999px; }
.slick-dots li.slick-active button { background-color: rgba(24,24,36,0.2); }
.slick-slide { margin-left: 0; }
.slick-list { margin-left: 0; width: 100%; }