/*
    Theme: Horizon Law Firm
    Author: Zach Dana
    Version: 1.0

*/


body{
	color: #000;
	}
	



.fa-star {
	color: #FC0;
	width: 100%;
	min-width: 100%;
	width: 100%;
	}
img.stripe-jcb-icon.stripe-icon, img.stripe-diners-icon.stripe-icon {
    display: none;
}

.ProductRow {
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 50px;
}
.woocommerce .blockUI.blockOverlay:before {

    position:fixed!important
}
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row {
display: block;
max-width: 85%;
}
#billing_last_name_field, #billing_first_name_field {
	width: 42.5%; 
	float: left;
}
 
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
max-width: unset;
width: 100%;
}
.woocommerce button.button[name="apply_coupon"] {
    color: white;
    background-color: #777;
    margin-top: 10px;
    margin-left: 20px;
}
.woocommerce .cart .button[name="apply_coupon"]:hover {
    background-color: #444;
    color: #fff;
}

.woocommerce button.button[name="update_cart"] {
    color: white !important;
    background-color: #777 !important;
    margin-top: 10px;
    margin-left: 20px;
}
.woocommerce .cart .button[name="update_cart"]:hover {
    background-color: #444 !important;
    color: #fff !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    color: white;
    background-color: #444;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    color: white;
    background-color: navy;
}

/* Target the Credit Card */
.stripe-icon {
    display: none !important;
}
#stripe-card-element {
    background: #ffffff !important;
    padding: 5px !important;
    margin: 0px !important;
}

/* Target the Expiry Date */
#stripe-exp-element {
    background: #ffffff !important;
    padding: 5px !important;
}

/* Target the CVC Code */
.woocommerce-checkout-review-order #stripe-cvc-element {
    background: #ffffff !important;
    margin: 0px !important;
    padding: 5px !important;
}

.input-text {
	    background: #ffffff !important;
    margin: 0px !important;
    padding: 5px !important;
}
.footer-recent-articles a{
	color: #ccc;
	text-decoration: none;
	}
.footer-recent-articles li{
	list-style: none;
	}
.footer-recent-articles a:hover{
	color: #A2646F;
	text-decoration: none;
	}
	
	.checkout_coupon {
 display: block !important;
}

.woocommerce-info {
display:none;
}
#coupon_code {
	width: 300px;
}



							/* 1. THIS IS CSS FOR PAGE BANNER*/

.jumbotron {
    background-size: cover;
	background-position: center top;
	
  }
  .list-group-item {
	 border: none;
	  }
.list-group-item a {
	 color: #ccc;
	  }
.list-group-item a:hover {
	 text-decoration: none;
	 color: #A2646F;
	  }
.page-image {
	background-color:rgba(0,0,0,.5);
	}
.tint {
  width: 1200px;
  height: 1200px;
  background-color: #000;
  display: block;
  position: relative;
  margin: 0 auto;
  z-index: 0;
}

.tint::after {
  content: "";
  opacity: 0.5;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
}

/*THIS IS CSS FOR FONTS -----------------------------------------------------------------------*/  
.playfair-font {
	font-family: 'Playfair Display', serif;
	font-size: 45px;
	}
.playfair-font-medium {
	font-family: 'Playfair Display', serif;
	font-size: 30px;
	
	}
.playfair-font-small {
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	
	}
.centered
{
	text-align: center;
	}
.primary-font-color {
	color: #184c32;
	}
.secondary-font-color {
	color: #555;
	}
.tertiary-font-style {
	color: #7A0517;
	font-size: 20px;
	
	}
.quaternary-font-color {
	color: #2F937C;
	}
.allcaps {
	text-transform:uppercase;
	}
  


/*THIS IS CSS FOR CONDITIONAL IMAGE LOADING -----------------------------------------------------------------------*/
.progressive{overflow:hidden;position:relative;background:#efefef;}.progressive__img{width:100%;height:100%;transform:translateZ(0)}.progressive--not-loaded{filter:blur(30px);transform:scale(1.1)}.progressive--is-loaded{filter:blur(20px);animation:a .5s both;transform:scale(1)}@keyframes a{0%{filter:blur(20px)}to{filter:blur(0)}}

.hero-image {
	background-color: #cccccc; /* Used if the image is unavailable */
	height: 100%; /* You must set a specified height */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	position: relative;
	background-position-x: center;
	width: 100%;
	z-index: 0;
	}

.hero-image::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		/*background: rgba(0, 0, 0, 0.4);  Use only if you want to tint images*/
		z-index: -1;
}
.content-overlay {
	position: absolute;
	color: #fff;
	margin-top: 50px;
	width: 100%; 
	height: 100%;
}

/*THIS IS CSS FOR SERVICES PAGE -----------------------------------------------------------------------*/

.heading-image-div-img {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 100%;
	}
.heading-image-div-img:before {
	content: '';
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0.5;
}
.heading-image-div-img h1 {
	color: #fff;
	opacity:0.6;
	}
.image-div {
	position: relative;
	height: 300px; 
	background-color: none;
	padding: 2px;
	margin-bottom: 4px;
	}
.image-div-img {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	height: 300px;
	position: relative;
	width: 100%;
	}
.image-div-img:before {
	content: '';
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0.6;
}
.image-div-overlay {
	position: absolute;
	width: 100%
	z-index: 4;
	text-align: center;
	padding: 0 4px;
	left: 0;
	right: 0;
	top: 50%;
	padding: 20px;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	}
.image-div:hover .image-div-img:before {
	background: #000;
	opacity: 0.5;
	}
.image-div h2{
	text-align: center;
	}
.image-div h2 {
	color: #fff;
	}
#services-sidebar {
	background-color: #EEE;
	padding: 20px;
	margin: 0px;
	}
#services-sidebar li a {
	color: #000;
	}
#services-sidebar li a:hover {
	color: #777;
	}


/* from: http://stackoverflow.com/questions/796087/make-a-div-into-a-link */
.image-div a span { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

.bio-image-div {
	position: relative;
	height: 300px; 
	background-color: none;
	padding: 2px;
	margin-bottom: 4px;
	}
.bio-image-div-img {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	height: 300px;
	position: relative;
	width: 100%;
	
	}
.bio-image-div:hover .bio-image-div-img:before {
	background: #000;
	opacity: 0.6;
	}

 /* THIS IS CSS FOR BLOG PAGE --------------------------------------------------------------------------*/

h2 a{
	color: #7B0410;
	}
h2 a:hover{
	color: #333;
	text-decoration: none;
	}

.page-numbers {
	color: #333;
	padding: 3px;
	}
.page-numbers:hover {
	color: #7B0410;
	}
.page-numbers:visited {
	color: #7B0410;
	}

/* THIS IS CSS FOR FOOTER --------------------------------------------------------------------------*/

.footer-li {
	background-color: #000;
	color: #fff;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	}
/* THIS IS CSS FOR CAROUSEL ELEMENTS --------------------------------------------------------------------------*/
.carousel {
	
	text-align: center;
	}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/*THIS IS CSS FOR LOCATIONS PAGE -----------------------------------------------------------------------*/
.acf-map {
	width: 100%;
	height: 700px;
	border: #ccc solid 1px;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	}
/* fixes potential theme css conflict */
.acf-map img {
   max-width: inherit !important;
}

#locations-sidebar {
	background-color: #6F1C2D;
	padding: 20px;
	margin: 0px;
	}
#locations-sidebar .row {
	padding-top: 15px;
	}
#locations-sidebar .content, #locations-sidebar a {
	color: #fff;
	text-decoration: none;
	}

/* THIS IS CSS FOR CONTACT PAGE --------------------------------------------------------------------------------*/
#contact-sidebar {
	background-color: #6F1C2D;
	padding: 20px;
	margin: 0px;
	}
#contact-sidebar .row {
	padding-top: 15px;
	}
	
/* THIS IS CSS FOR PROMO LANDING PAGE ---------------------------------*/
.promo-page-form {
    width: 500px;
    background-color: rgba(0, 0, 0, 0.7); 
    padding: 25px;
}
.promo-page-form label {
    margin-top: 10px;
}

  /* Extra Large Devices, Wide Screens */
@media only screen and (min-width : 1201px) {
	.hero-image {
	min-height: 450px;
  }
  .home-page-heading {
		text-align: center;
		position: absolute;
		}
	.home-page-heading h1 {
		font-size: 32pt;
		}
	.playfair-font {
	font-size: 36pt;
	}	


}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.hero-image {
  	min-height: 400px;
  }
  .home-page-heading {
		top: 185px;
		position: absolute;
		}
	.home-page-heading h1 {
		font-size: 24pt;
		}
	.playfair-font {
	font-size: 28pt;
	}	

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.hero-image {
	min-height: 300px;
  }
  .home-page-heading {
		top: 150px;
		position: absolute;
		}
	.home-page-heading h1 {
		font-size: 22pt;
		}
	

}

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

   .navbar-brand img{
	  max-width: 320px;
	  }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.hero-image {
	min-height: 200px;
  }
   .navbar-brand img{
	  max-width: 230px;
	  }
.playfair-font {
	font-size: 24pt;
	}
.playfair-font-medium {
	font-size: 20px;
	}
.home-page-heading {
		top: 0px;
		position: absolute;
		}
.carousel-item p {
	
	font-size: 10pt;
	}
.carousel-item {
	
	padding: 7%;
	}
.home-page-heading {
		top: 55px;
		position: absolute;
		}
	.home-page-heading h1 {
		font-size: 18pt;
		}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	.hero-image {
	min-height: 170px;
  }
   .navbar-brand img{
	  max-width: 230px;
	  }
	.home-page-heading {
		top: 0px;
		position: absolute;
		}
	.home-page-heading h1 {
		font-size: 16pt;
		}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	.hero-image {
	min-height: 150px;
  }
  .navbar-brand img{
	  max-width: 180px;
	  }
	.home-page-heading h1 {
		font-size: 14pt;
		}
}