/*
	Theme Name: Citizens Advice County Durham
	Theme URI: http://www.peterhintondesign.co.uk
	Description: Tailored WordPress Theme
	Version: 1.0
	Author: Peter Hinton (@peterhinton)
	Author URI: http://www.peterhintondesign.co.uk
	Tags: HTML5, CSS3
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
}

body{font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 400; color: #626668; width: 100%; background: #fff;}
h1{font-size: 50px; line-height: 54px; font-weight: 700; color: #0a4c85; padding-top: 15px;}
h2{font-size: 45px; font-weight: 400; color: #0a4c85; padding: 0 0 8px 0; color: #0a4c85;}
h2.h2-caps{font-size: 25px; font-weight: 600; text-transform: uppercase;}
h3{font-size: 24px; font-weight: 300; color: #0a4c85; padding: 0 0 5px 0;}
a{color: #0a4c85; text-decoration: none;}
a:hover{color: #0a4c85; text-decoration: underline;}
p{line-height: 23px; padding: 10px 0;}
b, strong{font-weight: 700; color: #333b43;}
i, em{font-style: italic;}
b i, b em, strong i, strong em{font-weight: 700; font-style: italic;}
img{display: block; max-width :100%;}
ul{margin: 10px auto; padding: 0;}
ul li{list-style: disc; margin: 4px 0 4px 20px; line-height: 24px;}
ol{margin: 10px auto; padding: 3px 0;}
ol li{list-style: decimal; margin: 4px 0 4px 20px; line-height: 24px;}
hr{display: block; width: 100%; height: 1px; margin: 32px auto; overflow: hidden; background: #ddd; border: 0;}

input{display: inline-block; text-align: center; width: 100%; -webkit-appearance: none; -moz-appearance: none; background: none; outline: none; color: #574942; margin-bottom: 8px;}
input[type=text],
input[type=email],
textarea{padding: 8px 15px; margin: 5px auto; background: #f2f6f9; border: 1px solid #f2f6f9; border-radius: 3px; font-size: 15px; box-sizing: border-box; width: 100%; font-family: 'Open Sans', sans-serif; font-weight: 400; -webkit-appearance:none; -moz-appearance:none; text-align: left;}
textarea{height: 112px;}
input[type="checkbox"], input[type="radio"]{width: 30px; height: 30px; padding: 0; border: 1px solid #f2f6f9; background: #f2f6f9; transition: border 0.3s linear 0s; border-radius: 50%; display: inline-block; vertical-align: middle; margin: 0 auto;}
input[type="checkbox"]:checked, input[type="radio"]:checked{background: url(images/checkbox.svg) center no-repeat #f2f6f9; background-size: 50%; border-color: #0a4c85;}
input[type="checkbox"]:checked + label, input[type="radio"]:checked + label{color: #24a4e6;}
input[type=submit]{color: #fff; background: #0a4c85; padding: 9px 15px; font-size: 16px; border-radius: 3px; margin: 20px auto; display: inline-block; max-width: 180px; font-weight: 600; border: none; -webkit-appearance:none; -moz-appearance:none; }
input[type=submit]:hover{background: #002f55; color: #fff;}
label{font-size: 15px; line-height: normal; font-weight: 600;}
::-webkit-input-placeholder{color: #acb5bd; font-style: italic; font-size: 13px;}
::-moz-placeholder{color: #acb5bd; font-style: italic; font-size: 13px;}
:-ms-input-placeholder{color: #acb5bd; font-style: italic; font-size: 13px;}
:-moz-placeholder{color: #acb5bd; font-style: italic; font-size: 13px;}
.wpcf7-list-item{margin: 12px 10px 0 0 !important; vertical-align: top;}
.wpcf7-list-item-label{display: inline-block; vertical-align: middle; margin-left: 5px; margin-right: 10px; font-size: 14px;}
.wpcf7 .ajax-loader{display: block !important; margin: 0 auto !important;}
.wpcf7-mail-sent-ok{border: 2px solid #002f55 !important; background: #fff !important; font-weight: 600 !important; color: #002f55 !important; padding: 10px 15px !important; border-radius: 3px !important; display: inline-block !important;}
.wpcf7-validation-errors{border: 2px solid #f00 !important; color: #f00 !important;}
#form-container{max-width: 650px; margin: 0 auto; display: block; width: 90%;}

#header{display: block; width: 100%; height: 86px; overflow: visible; position: absolute; top: 0; left: 0; z-index: 999;}
#header::before{display: block; width: 100%; height: 86px; background: #fff; position: absolute; z-index: -1; content: '';}
#header .content{padding: 0;}
#header #logo{display: block; height: 104px; width: auto; background: url(images/logo-bump.png) bottom left no-repeat;}
#header #logo img{margin: 8px 0 0 31px; max-width: 143px;}
#header-greybg{background: url(images/header-greybg.png) bottom center no-repeat; display: block; width: 100%; height: 106px; position: absolute; top: 0; left: 0; z-index: 997;}

#nav{display: inline; margin-top: 30px;}
#nav ul, #footer-nav ul{display: inline;}
#nav li, #footer-nav li{display: inline-block; margin: 0 0 0 30px;}
.current-menu-item a{color: #626668;}
.nav-donate a{color: #fff; background: #0a4c85; padding: 9px 20px; text-transform: uppercase; border-radius: 3px;}
.nav-donate a:hover{text-decoration: none; background-color: #0a4c85;}
#btn-nav{position: fixed; top: 26px; right: 16px; color: #fff; border: 2px solid #fff; padding: 0 38px 0 12px; width: auto; height: 40px; line-height: 40px; text-transform: uppercase; z-index: 990; letter-spacing: 1px; font-weight: 600; background-image: url(images/btn-nav.png); backround-position: top right; background-repeat: no-repeat; background-color: #0a4c85; text-align: center; display: none; border-radius: 4px; font-size: 14px; transition: all 0.3s ease-out 0s;}
#btn-nav:hover{text-decoration: none;}
#btn-nav.btn-nav-open{background-position: bottom right; background-color: #fff; color: #0a4c85;}
#btn-nav.btn-nav-open:hover{background-color: #f2f6f9; color: #0a4c85;}
#btn-nav.btn-nav-close{background-position: top right; background-color: #0a4c85;}
#btn-nav.btn-nav-close:hover{background-color: #002f55; color: #fff;}

#hero{display: table; width: 100%; height: 700px; position: relative; text-align: center; background: url(images/banner-01.jpg) center no-repeat; background-size: cover; color: #fff; overflow: hidden;}
#hero h1, #hero-small h1{color: #fff; text-transform: uppercase; padding: 0 0 12px 0;}
#hero p, #hero-small p{font-size: 25px; line-height: 32px; max-width: 920px; margin: 0 auto; width: 80%;}
#hero .cell, #hero-small .cell{background: rgba(0,0,0,0.5); transform: scale(1.2); padding-top: 50px; transition: all 1s ease-out 0.5s; opacity: 0;}
#hero-small{display: table; width: 100%; height: 500px; position: relative; text-align: center; background: url(images/banner-01.jpg) center no-repeat; background-size: cover; color: #fff; overflow: hidden;}
body.loaded #hero .cell, body.loaded #hero-small .cell{ transform: scale(1); opacity: 1;}

.col-02-home{display: block; width: calc(100% - 175px);}
#home-news .col-03{margin-top: 25px; margin-bottom: 25px;}
.home-news-post{background: #fff; padding: 15px 15px 25px 15px; box-sizing: border-box; border-radius: 5px; overflow: hidden; position: relative;}
.home-news-post h3{margin: 15px 0 5px 0; padding: 0;}
.home-news-post .linkicon-arrow{margin-top: 9px;}
.home-news-post-img{display: block; border-radius: 4px; overflow: hidden; position: relative;}
.home-news-post-date{background: #0a4c85; color: #fff; display: block; padding: 12px 15px; font-weight: 600; border-radius: 4px; line-height: 16px; z-index: 9; text-align: center; box-sizing: border-box; position: absolute; top: 0; right: 0;}

#projects .col-03{margin-bottom: 25px;}

#google-map{display: block; width: 100%; height: 580px; position: relative;}
.google-map-container{background: #0a4c85; color: #fff; border: 2px solid #fff; padding: 20px 40px 10px 15px; text-align: left; border-radius: 9px; box-sizing: border-box; font-size: 15px; max-width: 280px;}
.google-map-container h2{color: #fff; padding: 0;}
.google-map-container p{padding: 8px 0;}
.google-map-container a{color: #0a4c85; background: #fff; border: 2px solid #fff; padding: 5px 10px 4px 10px; border-radius: 3px; margin: 0; display: inline-block; font-weight: 600;}
.google-map-container a:hover{background: #002f55; color: #fff; text-decoration: none;}
#btn-offices-close{display: none;}
#offices{display: block; margin: 0; visibility: hidden; opacity: 0; transition: all 0.3s ease-out 0s; height: auto; max-height: 0; overflow: hidden;}
#offices.offices-open{opacity: 1; max-height: 3000px; overflow: visible}
#offices.offices-close{opacity: 0; max-height: 0; overflow: hidden}

#footer{padding: 50px 0 0 0;}
#footer .content{padding: 30px 0;}
#footer .footer-col{display: inline-block; margin: 0px 66px 40px 0; vertical-align: top; text-align: left; font-size: 14px;}
#footer .footer-col ul{margin: 0; padding: 0;}
#footer .footer-col li{margin: 6px 0; line-height: normal; list-style: none; padding: 0;}
#footer .footer-col li a{font-size: 13px;}
#footer .footer-col-header a{color: #484848 !important; font-size: 17px !important; font-weight: 600; padding-bottom: 6px; display: block;}
#footer .footer-col-list{padding: 0 0 0 7px; border-left: 1px solid #e5e5e5;}
#footer .footer-logo{margin-bottom: 10px;}
#footer .footer-logo img{max-height: 84px;}
#footer .footer-address{font-size: 13px;}
#footer .footer-corporatelogo{display: inline-block; max-width: 80%; margin: 10px 30px 0 0; vertical-align: top;}
#footer .social{display: inline-block; width: 32px; height: 32px; background-color: #0a4c85; margin: 8px 2px 2px 0; text-indent: -9999px; border-radius: 50%; background-image: url(images/social-media.png); background-repeat: no-repeat;}
#footer .social:hover{background-color: #002f55;}
#footer .social.facebook{background-position: 0 0;}
#footer .social.twitter{background-position: -32px 0;}
#footer .social.instagram{background-position: -96px 0;}
#footer .footer-corporate{font-size: 13px;}
#footer-nav{margin-top: 8px;}

#news-main{}
#news-main-posts{margin-top: 30px;}
#news-main h2{font-size: 28px; line-height: 32px; padding-top: 0;}
#news-main .post{display: block; text-align: left; padding-bottom: 30px; margin-bottom: 50px; border-bottom: 1px solid #ddd;}
#news-main .post-thumb{position: relative;}
#news-main .post-thumb img{max-width: 250px;}
#news-main .post-content{padding-left: 20px; box-sizing: border-box; width: calc(100% - 250px);}
#news-main .post-date{background: #0a4c85; color: #fff; display: block; padding: 12px 15px; font-weight: 600; border-radius: 4px; line-height: 16px; z-index: 9; text-align: center; box-sizing: border-box; position: absolute; top: 0; right: 0;}
#news-main .post-details{font-size: 13px; line-height: 18px; color: #acb5bd;}
#news-main #news-first-post .post-thumb img{width: 100%; max-width: 100%;}
#news-main #news-first-post .post-content{padding: 20px 0 0 0; width: 100%;}
.news-prev, .blog-next{display: inline-block; padding: 0 30px;}
.news-next a{font-size: 19px; display: inline-block; height: 40px; line-height: 40px; background: url(images/arrow-black.png) center right no-repeat; padding: 0 20px 0 0; margin: 0 0 6px 8px;}
.news-prev a{font-size: 19px; display: inline-block; height: 40px; line-height: 40px; background: url(images/arrow-black-prev.png) center left no-repeat; padding: 0 0 0 20px; margin: 0 0 6px 8px;}

#news-sidebar{box-sizing: border-box; padding: 0 0 0 20px; border-left: 1px solid #e5e5e5;}
#news-sidebar h3{padding: 20px 0 10px 0}
#news-single .featured-image{position: relative;}
#news-single .featured-image img{width: 100%; margin: 30px auto 30px auto;}
#news-single .news-date{background: #0a4c85; color: #fff; display: block; padding: 20px 25px; font-size: 28px; line-height: 28px; font-weight: 400; text-align: center; box-sizing: border-box; position: absolute; top: 0; right: 0;}

.align-left{float: left;}
.align-right{float: right;}
.align-middle{vertical-align: middle !important;}
.bg-grey{background: #f2f6f9;}
.box-attention{display: block; padding: 10px 20px; box-sizing: border-box; border: 2px solid #0a4c85; width: 100%; margin: 15px auto; border-radius: 7px;}
.btn-box{color: #fff; background: #0a4c85; padding: 9px 15px; font-size: 16px; border-radius: 3px; margin: 20px auto; display: inline-block; font-weight: 600;}
.btn-box:hover{background: #002f55; color: #fff; text-decoration: none;}
.btn-box-large{color: #fff; background: #0a4c85; text-transform: uppercase; padding: 13px 25px; font-size: 20px; border-radius: 3px; margin: 20px auto 0; display: inline-block; font-weight: 600;}
.btn-box-large:hover{background: #002f55; color: #fff; text-decoration: none;}
.bump-out{display: block; width: 100%; height: 46px; background: url(images/bump-out.png) top center no-repeat; position: absolute; top: 0; left: 0; z-index: 1;}
.bump-out-grey{display: block; width: 100%; height: 46px; background: url(images/bump-out-grey.png) top center no-repeat; position: absolute; top: 0; left: 0; z-index: 1;}
.bump-in{display: block; width: 100%; height: 46px; background: url(images/bump-in.png) bottom center repeat-x; position: absolute; bottom: 0; left: 0; z-index: 1;}
.bump-in-grey{display: block; width: 100%; height: 46px; background: url(images/bump-in-grey.png) bottom center repeat-x; position: absolute; bottom: 0; left: 0; z-index: 1;}
.cell{width: 100%; height: 100%; display: table-cell; vertical-align: middle;}
.clear{clear:both; font-size:0px; width:0px; line-height:0px; height:0px; display: block; overflow: hidden;}
.col-02{display: inline-block; vertical-align: top; width: 44.5%; margin: 0;}
.col-02:nth-child(1){margin-right: 10% !important;}
.col-03{display: inline-block; vertical-align: top; width: 30%; margin: 0 1.4%;}
.col-large{display: inline-block; vertical-align: top; width: 62.8%; margin: 0 1.4%;}
.col-small{display: inline-block; vertical-align: top; width: 30%; margin: 0 1.4%;}
.content{width: 100%; max-width: 1120px; padding: 75px 0; margin: 0 auto; text-align: center;}
.icon{max-width: 142px; margin: 10px auto;}
.li-inside li{list-style-position: inside; margin-left: 0 !important;}
.linkicon-arrow{background: url(images/linkicon-arrow.png) top right no-repeat; padding: 0 14px 0 0; display: inline-block; height: 16px; line-height: 16px;}
.linkicon-arrow:hover{background-position: bottom right;}
.no-banner{padding-top: 88px;}
.pagination{text-align: center;}
.pagination .page-numbers{display: inline-block; width: 44px; height: 44px; line-height: 44px; text-indent: -9999px; border-radius: 50%; margin: 0 1px; background: #0a4c85; border: 2px solid #0a4c85; color: #fff; text-indent: initial !important; text-align: center;}
.pagination .page-numbers:hover{background: #fff; border-color: #002f55; color: #0a4c85; text-decoration: none;}
.pagination .page-numbers.current{background: #f2f6f9; color: #0a4c85; border-color: #0a4c85;}
.pagination .prev, .pagination .next{display: none;}
.relative{position: relative;}
.section{position: relative;}
.synved-social-container{display: block; width: 100%; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 18px 0; margin: 20px auto;}
.synved-social-intro{display: inline-block !important; vertical-align: middle !important; padding: 0 15px 0 0;}
.synved-social-button{display: inline-block !important; vertical-align: middle !important; width: 48px; height: 48px; text-indent: -9999px; border-radius: 50%; margin: 0 2px !important;}
.synved-social-button:hover{background-position: bottom left; background-color: #002f55;}
.synved-social-provider-linkedin{background: url(images/sm-plugin-linkedin.png) top left no-repeat #0a4c85;}
.synved-social-provider-facebook{background: url(images/sm-plugin-facebook.png) top left no-repeat #0a4c85;}
.synved-social-provider-twitter{background: url(images/sm-plugin-twitter.png) top left no-repeat #0a4c85;}
.synved-social-provider-google_plus{background: url(images/sm-plugin-googleplus.png) top left no-repeat #0a4c85;}
.synved-social-provider-mail{background: url(images/sm-plugin-email.png) top left no-repeat #0a4c85;}
.text-left{text-align: left;}
.text-right{text-align: right;}


@media screen and (min-width: 1120px) {

	#nav{display: inline; margin-top: 30px; position: static; visibility: visible !important;}

}


@media screen and (min-width: 0px) and (max-width: 1119px) {

  #header{display: block; width: 100%; height: 90px; background: #fff;}
  #header::before{display: none;}
  #header #logo{display: block; height: 90px; background: none;}
  #header #logo img{margin: 14px 0 0 0; max-height: 70px;}
  #header-greybg{display: none;}

	#hero p, #hero-small p{font-size: 18px; line-height: 24px;}

  #home-info .content{padding-top: 0;}
  #home-info .align-left,
  #home-info .align-right{float: none; width: auto; text-align: center;}
  #home-info .align-right{margin: 0 auto;}

  #nav{width: 100%; height: 100%; display: table; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 980; margin: 0; visibility: hidden; transform: scale(2); opacity: 0; transition: all 0.3s ease-out 0s; background: #0a4c85;}
  #nav.nav-open{opacity: 1; transform: scale(1);}
  #nav.nav-close{opacity: 0; transform: scale(2);}
  .nav-donate a{color: #0a4c85 !important; background: #fff; padding: 9px 20px; text-transform: uppercase; border-radius: 3px; display: inline-block !important; padding: 10px 20px !important; margin-top: 20px;}
  #nav ul li{display: block; width: 100%; text-align: center; margin: 0;}
  #nav ul li a{color: #fff; font-size: 20px; padding: 8px 0; display: block;}
  #btn-nav{display: block;}

	#footer .text-left{text-align: center;}
	#footer .align-left, #footer .align-right{float: none; margin: 0; padding: 10px 0; display: block; line-height: normal;}
	#footer .footer-nav{margin: 15px auto; padding: 0;}
	#footer .footer-col-header{display: block; background: url(images/footer-col-arrow.png) top right no-repeat;}
	#footer .footer-col-header a{color: #333b43 !important; display: block; margin: 0; padding: 0; height: 40px; line-height: 40px;}
	#footer .footer-col-header li{margin: 0; padding: 0;}
	#footer .footer-col.active .footer-col-header{background-position: bottom right;}
	#footer .footer-col{display: block; margin: 0px; vertical-align: top; text-align: left; width: 100%; padding: 0; float: left; border-top: 1px solid #e4e7ea;}
	#footer .footer-col li a{font-size: 16px; text-align: center !important; margin: 0; padding: 0; border: 0; display: block;}
	#footer .footer-col-list{display: none; padding: 0;}
	#footer .footer-col.active{color: red;}
	#footer .footer-col.active .footer-col-list{display: block;}
  #footer .footer-logo{margin: 40px auto 0 auto;}
  #footer .footer-corporate{text-align: center;}
  #footer .footer-corporate .text-left{text-align: center;}
  #footer .align-right{text-align: center;}
	#footer .footer-corporatelogo{margin: 40px auto 10px;}
  #footer-nav{display: none !important;}

	.content{max-width: 90%; margin: 0 auto;}
  .non-mobile{display: none;}

}


@media screen and (min-width: 700px) and (max-width: 1119px) {

  .content{max-width: 90%; margin: 0 auto; padding: 70px 0 40px 0;}

}


@media screen and (min-width: 0px) and (max-width: 699px) {

	body{font-size: 13px;}
	h1{font-size: 24px; line-height: 28px;}
	h1 br{display: none;}
	h2{font-size: 18px; padding: 0 0 2px 0;}
	h3{font-size: 15px; padding: 0 0 10px 0;}
	p{line-height: 18px;}

  #hero{height: 480px;}
  #hero p{font-size: 17px; line-height: 23px;}

  #news-main .post-thumb img{max-width: 100% !important;}
  #news-main .post-content{padding: 20px 0 0 0 !important; width: 100% !important;}

  #news-single .news-date{background: #0a4c85; color: #fff; display: block; padding: 12px 15px; font-weight: 600; font-size: 16px; line-height: 16px; text-align: center; box-sizing: border-box; position: absolute; top: 0; right: 0;}

	#corporate .col-large{margin: 0 auto;}
	#corporate .col-large,
	#corporate .col-small{text-align: center;}
	#corporate img{max-width: 70%; margin: 10px auto;}

	.align-right,
	.align-left{float: none;}
  .col-02,
  .col-03,
  .col-large,
  .col-small{width: 100%; margin: 20px auto; text-align: center !important;}
	.col-02 .text-left,
  .col-03 .text-left,
  .col-large .text-left,
  .col-small{text-align: center !important; width: 100%;}
	.col-02 img,
  .col-03 img,
  .col-large img,
  .col-small img{margin-left: auto; margin-right: auto;}
  .content{max-width: 90%; margin: 0 auto; padding: 40px 0;}


}