@import url("/local/fonts/cooper/stylesheet.css");
@import url("/local/fonts/georgia/style.css");
@import url("/3rdparty/bootstrap/css/bootstrap.min.css");
@import url("/core/css/global.css");


/* Mobile first; then... */  
@media (min-width: 768px) {
	/* small eg iPad portrait */  
}
@media (min-width: 992px) {
	/* medium, e.g iPad landscape, older monitors, laptops  */
}
@media (min-width: 1200px) {
  /* large, e.g newer monitors, laptops */
}
.visible-xl-block {
	  display:none;
  }
@media (min-width: 1400px) {
  .container {
    width: 1370px;
  }
  .visible-lg-block {
	  display:none !important;
  }
  .visible-xl-block {
	  display:block;
  }
}

@media (min-width: 1450px) {
  .container {
    width: 1420px;
  }
}





.black {
	color:#181818;
}
.yellow {
	color:#ffdd02;
}
.mustard {
	color:#d9bc03;
}
.region4 .yellow , .region5 .yellow  {
	color:#02deff;
}
.buff {
	color:#f7f5f3;
}
.white {
	color:#ffffff;
}
.bg-black {
	background:#181818;
}
.bg-yellow {
	background-color:#ffdd02;
}
.cyan {
	color: #02deff
}
.bg-cyan {
	background: #02deff
}


.region4 .bg-yellow , .region5 .bg-yellow  {

	background-color:#02deff;

}
.bg-buff {
	background:#f7f5f3;
}
.bg-white {
	background:#ffffff;
}

.page-top {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	position:relative;
	padding: 120px 15px;
}

.page-top:after  {
	display:block;
	content:"";
	background:url(/local/images/brace-yellow.svg) no-repeat top center;
	background-size:contain;
	width:150px;
	height:75px;
	position:absolute;
	left:50%;
	top:100%;
	transform:translateX(-50%);
}

.region4 .page-top:after,
.region5 .page-top:after   {

	background:url(/local/images/brace-blue.svg) no-repeat top center;
	background-size:contain;

}

.crumbs  .container {
	width:auto;
	padding:30px 90px 60px 90px;;

}

/* TYPOGRAPHY */

a, a:link, a:visited, a:hover, a:active {
	color:inherit;
	outline:none;
	transition:0.5s;
	
}

 a:hover {
	color:#ffdd02;	
	text-decoration:none;
}

.region4 a:hover, .region5 a:hover {
	color:#02deff;
}

.bg-yellow a:hover, .bg-yellow  a:hover {
	color: #666666;
}

.safari-fix {
	/* fixes z-index and font issues in Safari */
      -webkit-transform:translateZ(1px);
      transform:translateZ(1px);
}

* {
	-webkit-text-size-adjust: 100%; /* stops font size changing in iOS */
	
	/*-webkit-font-smoothing: subpixel-antialiased;  makes safaro looks like Firefox */
	-moz-osx-font-smoothing: grayscale; /* fonts don't appear heavier in Firefox */
}  
body {
	background-color:#f7f5f3 !important;
}


body, button, input, select, textarea, th, td { font-family: Georgia, serif;  color:#181818;text-rendering: optimizeLegibility; font-size:18px;line-height:1.6;}
 i.glyphicon  {
	
	 top:.2em;
 }

h1, h2, h3,h4, .cooper, .crumbs, p.lead {
	font-family:'cooper_lt_btlight',serif;
	line-height:1.2;
}

.small {
	font-size:16px;
}

p.lead {
	font-size:30px;
	line-height:1.4;
}
h1 {
	font-size:55px;
}
h2 {
	font-size:50px;
	margin-bottom:20px;
}
h3 {
	font-size:45px;
}

h4 {
	font-size:22px;
	margin: 15px 0 ;
}

.row.row-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.row-flex > div {
 display: flex;
  flex-direction: column;
}

.row.row-flex:after, .row.row-flex:before {
  display: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #8d7f6f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #8d7f6f;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #8d7f6f;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #8d7f6f;
}
input:focus::-webkit-input-placeholder 
{
    color: transparent !important;
}

img {
	max-width:100%;
}

iframe{
	display:block;
}
hr { 
   
    border-style:none;
    border:none;
	border-top:1px solid rgba(204,204,204,1);
}

input.form-control, textarea.form-control {
	font-size:18px;
	border-radius:20px;
	border: 2px solid #181818;;
	padding-left:1em;
	padding-right:1em;
	height:auto;
}

.btn {
	font-size:18px;
	border-radius:999em;
	padding-left:3em;
	padding-right:3em;transition:0.5s;
	white-space:normal;
}

.btn.btn-block {
	padding-left:0;
	padding-right:0;
}

.btn.btn-default {
	background:transparent;
	border:2px solid #ffdd02;
}
.region4 .btn.btn-default , .region5 .btn.btn-default  {
	border:2px solid #02deff;
}

.btn.btn-primary {
	background:#181818;
	border:2px solid #181818;
	color:#ffdd02;
}
.region4 .btn.btn-primary , .region5 .btn.btn-primary  {
	color: #02deff;
}


.btn.btn-default:hover, .btn.btn-primary:hover {
	background:#ffdd02;
	color:black;border:2px solid #ffdd02;
}

.region4 .btn.btn-default:hover , .region5 .btn.btn-default:hover,
.region4 .btn.btn-primary:hover , .region5 .btn.btn-primary:hover {
	background:#02deff;
	border:2px solid #02deff;
}



/**** RE-ORDERING IWTH CSS ******

#wrapper {display:table;}

#first {display:table-caption;}
#second {display:table-header-group;}
#last {display:table-footer-group;}

*/


/* ALWAYS SHOW SCROLL BARS

 ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}


*/

.my-parallax-element {
   ...
   background-attachment: fixed;
   ...
}

@supports (-webkit-overflow-scrolling: touch) {

        .my-parallax-element {
            background-attachment: scroll;
        }
    }


/* Truncate to number of lines */



.truncate {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 36px; /* Fallback for non-webkit = font-size x line-height x lines to show */
  margin: 0 auto;
  font-size: 10px;
  line-height: 1.2;
  -webkit-line-clamp: 3; /*lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vertical-center {
 /* centers anything vertically if you don't know dimensions */
  position: relative;/* or absolute*/
  top: 50%;
   display:block; /* can use on span*/
  transform: translateY(-50%);
  /* note you can do this with absolute on x axis too  */
}

.vertical-center-page {
	 top: 50vh; /* additional for iOS */
}

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
	width:100%;
}
.row-xs-height {
    display:table-row;
	height:100%; /* firefox fix */
}
.col-xs-height {
    display:table-cell;
    float:none;
	height:100%; /* firefox fix */
}
@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
		width:100%;
		
    }
    .row-sm-height {
        display:table-row;
		height:100%; /* firefox fix */
    }
    .col-sm-height {
        display:table-cell;
        float:none;vertical-align:top;
		height:100%; /* firefox fix */
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
		width:100%;
		
    }
    .row-md-height {
        display:table-row;
		height:100%; /* firefox fix */
    }
    .col-md-height {
        display:table-cell;
        float:none;vertical-align:top;
		height:100%; /* firefox fix */
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
		width:100%;
    }
    .row-lg-height {
        display:table-row;
		height:100%; /* firefox fix */
    }
    .col-lg-height {
        display:table-cell;
        float:none;vertical-align:top;
		height:100%; /* firefox fix */
    }
}

.container-text {
	max-width:600px;
	margin: 0 auto;
	padding: 120px 15px;
	
}
.container-text-800{
	max-width:800px;
	margin: 0 auto;
	padding: 120px 15px;
}

 .brace {
	 position:relative;
	 
 }
 
 .brace:before  {
	 display:block;
	 content:"";
	 background:url(/local/images/brace-black.svg) no-repeat top center;
	 background-size:contain;
	 width:150px;
	 height:75px;
	 position:absolute;
	 left:50%;
	 top:-1px;;
	 transform:translateX(-50%);
	 z-index:2;
	 
 }
	 
 .brace-yellow:before {
	 background:url(/local/images/brace-yellow.svg) no-repeat top center;
	 background-size:contain;
 }
 
  .region4 .brace-yellow:before, .region5 .brace-yellow:before {
	 background:url(/local/images/brace-blue.svg) no-repeat top center;
	 background-size:contain;
 }
 .brace-buff:before {
	 background:url(/local/images/brace-white.svg) no-repeat top center;
	 background-size:contain;
 }
 
 .background-image {
	 background-repeat:no-repeat;
	 background-position: center center;
	 background-size:cover;
	 min-height:400px;
	 padding:0;
 }
 

#tinymce .background-image img {
	border: 2px dashed yellow;
	display:block;
	position:relative;
}

#tinymce .background-image:before {
	content:"Background Image";
	display:block;
	background:rgba(255,255,0,0.5);
	padding:2px;
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	font-size:10px;
}
 
.steps img {
	max-width:60%;
	display:block;
	margin: 15px auto;
}
 
  .image-solicitor {
	
	  background-position:top center;
  }
   .slide-icons {
	   padding: 30px 0;
   }
   
  .slide-icons .row {
	display:flex;
	flex-wrap: wrap;	
	
}

/* add FLEX to bootstrap columns */
.slide-icons .row > div  {
	 display: flex;
  flex-direction: column;
}
/* safari fix for last column wrapping in flex */
.slide-icons .row:after, .slide-icons .row:before {
  display: none;
}

   
   
   .slide-offences .row > div {
	   padding-top:60px;
	   padding-bottom:60px;
   }
   
   .slide-offences .row .row > div {
	   padding-top:15px;
	   padding-bottom:15px;
   }
   @media (max-width: 991px) {
   .slide-offences  .brace:before,
   .slide-traffic-law .brace:before {
	   display:none;
   }
   }
  
  .slide-icons img {
	  height:110px;
	  width:auto;
	  display:block;
	  margin:0 auto;
  }
  
  .slide-icons h4{
	  margin-bottom:5px;
  }
  
  .slide-moto {
	  padding-top:60px;
	   padding-bottom:60px;
  }
  
  .bracket-box {
	  height:100px;
	  width:200px;
	  line-height: 100px;
	  position:relative;
	  margin:0 auto;
	  font-size:2em;
  }
  @media (max-width: 767px) {
	  .bracket-box {
	 
	  width:100px;
	  }
  }
  
  .bracket-box:before {
	  content:"";
	  position:absolute;
	  top:0;
	  left:0;
	  bottom:0;
	  right:50%;
	  background:url(/local/images/bracket-open-black.svg) no-repeat left center;
	  background-size:contain;
  }
  .bracket-box:after {
	  content:"";
	  position:absolute;
	  top:0;
	  left:50%;
	  bottom:0;
	  right:0;
	  background:url(/local/images/bracket-close-black.svg) no-repeat right center;
	  background-size:contain;
  }
  
  
  
  .bracket-box-lg {
	  max-width:800px;
	  position:relative;
	  margin:60px auto;
	  font-size:30px;
	  padding: 60px 120px;
	 
  }
  
   .ppc .bracket-box-lg, .contact-page .bracket-box-lg {
	    font-size:18px;
   }
   
   @media (max-width: 767px) {
	   .contact-page .bracket-box-lg {
	  
	 
	 
	 
	  padding: 15px;;
	 
  }
	   
   }
   
   @media (min-width: 1200px) {
.contact-page main .row > div {
	padding: 0 60px;
}
}
  

  .bracket-box-lg  .open-bracket {
	
	  position:absolute;
	  top:0;
	  left:0;
	  bottom:0;
	  right:50%;
	  background:url(/local/images/bracket-open-yellow.svg) no-repeat left center;
	  background-size:contain;
	  pointer-events:none;
  }
  
  .bracket-box-lg  .close-bracket {
	
	  position:absolute;
	  top:0;
	  left:50%;
	  bottom:0;
	  right:0;
	  background:url(/local/images/bracket-close-yellow.svg) no-repeat right center;
	  background-size:contain;
	  pointer-events:none;
  }
  
  @media (max-width: 767px) {
	  /* no braces on small screen */
	  .bracket-box-lg {
		  padding:0;
	  }
	  .bracket-box-lg  .close-bracket, .bracket-box-lg  .open-bracket {
		  background:none !important;
	  }
  }
  
  
   .region4 .bracket-box-lg  .open-bracket,
   .region5 .bracket-box-lg  .open-bracket {
	 
	  background:url(/local/images/bracket-open-green.svg) no-repeat left center;
	  background-size:contain;
  }
  
  .region4 .bracket-box-lg  .close-bracket,
  .region5 .bracket-box-lg  .close-bracket {
	  background:url(/local/images/bracket-close-green.svg) no-repeat right center;
	  background-size:contain;
  }
  
  
  .testimonial {
	  
	  max-width:600px;
	  position:relative;
	  margin:60px auto;
	 
  }
  
  .testimonial:before {
	  content:"";
	  position:absolute;
	
	  top:0;
	  left:0;
	  bottom:0;
	  right:50%;
	  background:url(/local/images/bracket-open-yellow.svg) no-repeat left center;
	  background-size:contain;
  }
  .testimonial:after {
	  content:"";
	  position:absolute;
	  
	  top:0;
	  left:50%;
	  bottom:0;
	  right:0;
	  background:url(/local/images/bracket-close-yellow.svg) no-repeat right center;
	  background-size:contain;
  }
  
   .region4 .testimonial:before, .region5 .testimonial:before {
	    background:url(/local/images/bracket-open-green.svg) no-repeat left center; background-size:contain;
   }
   .region4 .testimonial:after, .region5 .testimonial:after {
	    background:url(/local/images/bracket-close-green.svg) no-repeat right center; background-size:contain;
   }
   
   
  .testimonial .testimonial-text {
	  padding:60px;
	  position:relative;
	  z-index:2;
  }
  
  @media (max-width: 767px) {
	  .testimonial .testimonial-text {
		  padding:60px 15px;
	  }
   .testimonial:before, .testimonial:after {
	   opacity:0.3;
   }
   }
.formbuilder1 form {
  border-radius:20px;
  padding:15px 30px;
  background-color:#181818;
}

.formbuilder1 form:before {
  content:"Get in touch";
  display:block;
  font-size:24px;
  text-align:center;color:#ffdd02;font-family:'cooper_lt_btlight',serif;
}

.region4 .formbuilder1 form:before  , .region5 .formbuilder1 form:before   {
  color:#02deff;
}
  
.formbuilder1 .fieldlabel, .formbuilder1 .text-required-item {
	 display:none !important;
}

.formbuilder1 button.btn.btn-primary {
	display:block;
	width:100%;
	background:#ffdd02;color:#181818;
}
.region4 .formbuilder1 button.btn.btn-primary, .region5 .formbuilder1 button.btn.btn-primary    {
	 background:#02deff;
 }

.formbuilder1 button.btn.btn-primary:hover {
	display:block;
	width:100%;
	background:#181818;color:#ffdd02;
}

.region4 .formbuilder1 button.btn:hover, .region5 .formbuilder1 button.btn:hover    {
	 color:#02deff;
}


.home .formbuilder1 form {
	  background-color:#ffdd02;
 }
.home.region4 .formbuilder1 form, .home.region5 .formbuilder1 form {
	    background-color:#02deff;
   }
.home .formbuilder1 form:before {
	 color:#181818;
 }
 
.home .formbuilder1 .form-control {
	 border-color:#ffdd02;
}
.home.region4 .formbuilder1 .form-control, .home.region5 .formbuilder1 .form-control    {
	  border-color:#02deff;
}

.home .formbuilder1 button.btn.btn-primary {
	background:#181818;color:#ffdd02;
}
.home.region4 .formbuilder1 button.btn.btn-primary, .home.region5 .formbuilder1 button.btn.btn-primary   {
	  color:#02deff;
 }
 .home .formbuilder1 button.btn.btn-primary:hover {
	background:#181818;color:#ffdd02;
}
.home.region4 .formbuilder1 button.btn.btn-primary:hover, .home.region5 .formbuilder1 button.btn.btn-primary:hover   {
	  color:#181818;
	   background-color:#02deff;
	  border-color:#181818;
 }

.case-results main .row > div {
	padding: 60px;
}

.case-results main .row > div.img {
	
	padding: 0;
}

.case-results main .row > div.img img {
	width:100%;
	max-width:100%;
}

.blog-grid .row {
	margin-bottom:30px;
}
.blog-grid .vertical-center {
	padding: 30px 15px;
}

footer {
	background:#181818;color:#f7f5f3;
}

/* PPC pages */
.ppc .crumbs, .ppc .page-top, .ppc .footer-contact {
	display:none;
}



.ppc .request_a_vaulation .formbuilder1 form:before {
	content:"Request a Free Consulation";
	color:rgba(0,0,0,1);
}

.ppc .free_case_evaluation .formbuilder1 form:before {
	content:"Free Case Evaluation";
	color:rgba(0,0,0,1);
}

.ppc .formbuilder1 form {
	  background-color:#ffdd02;
 }
.ppc.region4 .formbuilder1 form, .ppc.region5 .formbuilder1 form {
	    background-color:#02deff;
   }
.ppc .formbuilder1 form:before {
	 color:#181818;
 }
 
.ppc .formbuilder1 .form-control {
	 border-color:#ffdd02;
}
.ppc.region4 .formbuilder1 .form-control, .ppc.region5 .formbuilder1 .form-control    {
	  border-color:#02deff;
}

.ppc .formbuilder1 button.btn.btn-primary {
	background:#181818;color:#ffdd02;
}
.ppc.region4 .formbuilder1 button.btn.btn-primary, .ppc.region5 .formbuilder1 button.btn.btn-primary   {
	  color:#02deff;
 }
 .ppc .formbuilder1 button.btn.btn-primary:hover {
	background:#181818;color:#ffdd02;
}
.ppc.region4 .formbuilder1 button.btn.btn-primary:hover, .ppc.region5 .formbuilder1 button.btn.btn-primary:hover   {
	  color:#181818;
	   background-color:#02deff;
	  border-color:#181818;
 }
 @media (max-width: 767px) {
.news h1 {
	font-size:36px;
}
 }