/*-----------------------------------------------------------------------------
Mahwah Veterinarian Groom & Board Style Sheet
developer: CodeMonkey Design
website:   codemonkeydesign.com	
version:   2.0
date:	   07/05/2017
-----------------------------------------------------------------------------*/

/* CSS Document */


/* =Google Fonts
-----------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans&family=Oswald:wght@600');
/* font-family: 'Open Sans', sans-serif; */

@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
/* font-family: 'Gochi Hand', cursive; */
/* used in modal popup */


/* =General
-----------------------------------------------------------------------------*/


@charset "UTF-8";

/* Remove padding and margin */
* {
	margin: 0;
	padding: 0; }

html { 
	/*over-extend height to force scroll bar to appear -
	to eliminate page-shift when utilizing collapsible panels 
	min-height: 101%; */ }

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, pre, blockquote, form, fieldset, table, ul {
	padding: 1em 0; }
	
p {
	padding: .5em 0; }
	
form {
	margin: 0;
	padding: 0; }

/* Class for clearing floats */
.clear {
	padding: 0;
	clear:both; }


/* Remove border around linked images */
img {
	border: 0; }
	
iframe {
	border: 1px solid #ccc; }
	
.center {
	margin: 0 auto;
	text-align: center; }
	
.left { float: left; }
.right { float: right; }
.zero { padding: 0; margin: 0; }



/* Typography & Header Formatting 
-----------------------------------------------------------------------------*/


h1 {
	float: left;
	margin: 0;
	padding: 0;
	font-size: 36px;
	line-height: 72px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #800020;
	text-shadow: 2px 2px 2px #fff; }
	
a:link, a:visited {
	color: #800000;
	text-decoration: none; }

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
	text-decoration: none; }
	
h2 {
	margin: 0;
	padding: 10px 0 20px 0;
	font-size: 28px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #800020;
	text-transform: uppercase; }
	
h3 {
	margin: 0;
	padding: 10px 0 20px 0;
	font-size: 28px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #292929;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px #fff; }
	
h4 {
	margin: 0;
	padding: 10px 0 0 0;
	font-size: 28px;
	line-height: 28px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #fff;
	border-bottom: thin dotted #c6b5b5;
	display: inline; }
	
h5 {
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 48px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #800020;
	text-shadow: 1px 1px 1px #b2b2b2; }

h6 {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 48px;
	color: #fff }
	
	
.gray-txt {
	color: #444;
}

#header-txt {
	float: right;
	text-align: right;
	text-size: 18px;
	line-height: 24px;
	color: #444;
	text-shadow: 2px 2px 2px #fff; }
	
#header-txt a:link, #header-txt a:visited {
	color: #444;
	text-decoration: none; }

#header-txt a:hover, #header-txt a:active {
	color: #800000; }
	
.nav-bg {
	width: 100%;
	height: 50px;
	background-color: #800020; 
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #fff; }
	
.main-img-bg {
	width: 100%;
	height: 50px;
	background-color: #800020; 
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #fff; }

.main-img {	
	width: 100%;
	margin: 0;
	padding: 0; }

a:link, a:visited {
	color: #800000;
	text-decoration: none; }

a:hover, a:active {
	text-decoration: underline; }
	
	
/* Alignment Classes
-----------------------------------------------------------------------------*/
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }


/* =Body
-----------------------------------------------------------------------------*/
body {
    background-color: #faf1d6;
	margin: 0 auto;
	padding: 0;
	font-weight: normal;
	color: #444;
	font-size: 18px;
	line-height: 24px;
	font-family: 'Open Sans', sans-serif; }
	
	
.smaller-txt {
	font-size: 14px;
	line-height: 18px; }

.container {
	width: 100%;
	padding: 25px 5px 0 5px; }
	
.content-container {
	padding: 25px 50px;
	margin: 0 auto; }
	
.content-container-alt {
	padding: 0 50px 50px 50px;
	background: #f5ebce;
	background: -moz-linear-gradient(top, #f5ebce 0%, #faf1d6 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #f5ebce), color-stop(100%, #faf1d6));
	background: -webkit-linear-gradient(top, #f5ebce 0%, #faf1d6 100%);
	background: -o-linear-gradient(top, #f5ebce 0%, #faf1d6 100%);
	background: -ms-linear-gradient(top, #f5ebce 0%, #faf1d6 100%);
	background: linear-gradient(to bottom, #f5ebce 0%, #faf1d6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ebce', endColorstr='#faf1d6', GradientType=0 ); }
	
.content {
	max-width: 1400px;
	padding: 25px 10px;
	margin: 0 auto; }
	
.content ul li {
	margin: .5em 0 0 3em; }

.content ol li {
	margin: .5em 0 0 3em; }


/* =Header Formatting
-----------------------------------------------------------------------------*/
#header {
	width: 100%; 
	background: #efdaa7 url('../img/bg-grunge.jpg') no-repeat center;
	padding: 20px;
}

	
/* =Navigation Area Formatting
-----------------------------------------------------------------------------*/


/* =Header/Text Element Formatting
-----------------------------------------------------------------------------*/


/* =Image Formatting
-----------------------------------------------------------------------------*/

.rotate10 {
	-webkit-transform:rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	transform: rotate(10deg);
}

.rotate-5 {
	-webkit-transform:rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

.video-img-box {
	width: 100%;
	margin-top: 40px; }


.content .video-img-box {
	float: left;
	width: 23%;
	margin: 40px 1% 0 1%; }


.video-img {
	width: 100%; }
	
.shadow-box {
	border-radius: 50px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:    0px 3px 3px 0px rgba(50, 50, 50, 0.4);
	box-shadow:         0px 3px 3px 0px rgba(50, 50, 50, 0.4); }

	
/* =Home Page
-----------------------------------------------------------------------------*/

/* ---- promo area ---- */

#promo-area {
	width: 100%; 
	background-color: #f8edd0;
	padding: 0;
	margin: 0;
}

.pa-logo {
	background-color: #840b1e;
	padding: 0;
	margin: 0;
}

.pa-txt {
	background: #f9ecce url('../img/bg-promo-r.jpg') repeat-x;
	min-height: 229px;
}

.pa-txt h5 {
	margin-top: 12px;
	font-size: 24px;
	line-height: 36px; }


/* ---- featured button area ---- */

#featured {
	width: 100%;
	background: #efdaa7 url('../img/bg-grunge2.jpg') no-repeat center;
	padding: 40px 20px;
}

.f-btn {
	padding: 20px 0;
}

.f-btn:hover {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}


/* ---- content image ---- */
.index-img {
	float: right;
	margin: 25px;
}

.index-img-mobile {
	display: none;
}

/* ---- hours columns ---- */

  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
    text-align: center;
    background-color: #800020;
    padding: 25px 0;
    color: #fff;
    border: 1px solid #faf1d6;
  }


@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}


/* ---- testimonials grid ---- */

#testimonials {
	width: 100%; 
	background: #efdaa7 url('../img/bg-grunge2.jpg') repeat-y center;
	padding: 40px 20px;
}
	
.grid {
 width: 1132px;
 margin: 0 auto;
}

/* clearfix */
.grid:after {
 content: '';
 display: block;
 clear: both;
}

/* ---- grid-item ---- */

.grid-item {
 margin: 0 12px;
 width: 250px;
 min-height: 10px;
 float: left;
 border-top: 2px solid #292929;
 border-bottom: 2px solid #292929;
 margin-top: 10px;
 padding: 10px 0;
}

.grid-item p {
	font-style: italic; 
	font-family: 'Open Sans', sans-serif;
	color: #292929;
	font-size: 14px;
 	line-height: 24px;
}

.t-name {
	font-family: 'Open Sans', sans-serif;
	color: #292929;
	font-size: 14px;
 	line-height: 24px;
	font-weight: bold; 
}

.t-title, .t-title p {
	font-family: 'Open Sans', sans-serif;
	color: #292929;
	font-size: 12px;
 	line-height: 18px;
}

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 720px; }


@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	.grid {
		width: 100%;
	}
	.grid-item {
		 width: 30%;
	}
}

@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	.grid-item {
		 width:46%;
	}
}

@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	.grid-item {
		 width:44%;
	}
}

@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
.grid {
 	margin: 0 auto;
 	padding: 0; 
}
.grid-item {
		 width:92%;
	}
}


/* = Contact Form Formatting
-----------------------------------------------------------------------------*/	
#contactForm { max-width: 750px; }

.control-label { color: #800020; }

.input-group-addon {
	background-color: #800020;
	color: #fff; }

.btn { background-color: #800020; border: 1px solid #000; }

.btn:hover { background-color: #f2dede; border: 1px solid #a94442; color: #a94442; }

.form-horizontal { padding: 0 5%; }

.form-control:focus {
	border-color: #800020;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(128, 0, 32, 0.6); }
		

/* =Footer
-----------------------------------------------------------------------------*/	
div.dotted_line {
	margin: 3em 0 0 0;
	padding: 0;
	border-bottom: thin dotted #c6b5b5;
	width: 100%;
}


#footer {
	width: 100%;
	background-color: #800020;
}

#footer p {
  margin-top: 1em;
  color: #c6b5b5;
  font-size: 16px;
  line-height: 28px;
  font-weight: lighter;
}

#footer p.copy {
  margin: 0;
  color: #c6b5b5;
  font-size: 12px;
  line-height: 18px;
  font-weight: lighter;
}

#footer a:link, #footer a:active {
  font-weight: normal;
  color: #c6b5b5;
  outline: 0;
}

#footer a:hover, #footer a:active {
  text-decoration:underline;
}

.footer-copyright {
  margin: 20px 0 50px 0;
  text-align: center;
  color: #8d8d70;
  border-top: 1px dotted #8d8d70;
  padding-top: 10px;
  font-size: 12px;
}

#social {
	float: right;
}

.footer-gfx {
	margin: 0 0 10px 10px;
}


/* RESPONSIVE NAVIGATION STYLING --------------------------------------------*/

.navbar {
	position: relative;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	text-align: center;
	z-index: 9999;
}

.navbar-nav {
  padding: 0;
  margin: 0;
}

.navbar-nav > li > a {
  padding: 0 15px;
}

.nav > li {
	font-size:14px;
	padding: 0;
	background-color: #800020;
	text-transform: uppercase;
}
.nav > li > a {
	line-height: 48px; 
}

.navbar-default {
	width: 100%
	border: 0;
	margin: 0 20px;
	padding: 0;
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: normal;
	font-family: 'Open Sans', sans-serif;
	background-color: #800020;	
}

.navbar-default .navbar-brand {
  color: #fff;
}

.navbar-default .navbar-brand:hover,

.navbar-default .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}

.navbar-default .navbar-text {
  color: #fff;
}

.navbar-default .navbar-nav > li > a {
  color: #fff;
}

.navbar-default .navbar-nav > li > a:hover,

.navbar-default .navbar-nav > li > a:focus {
	color: #fff;
  	background-color: #60031a;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
 color: #fff;
  background-color: #60031a;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #ddd;
}

.navbar-default .navbar-toggle:hover,

.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  padding: 0;
  border-color: #e7e7e7;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #60031a;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 0;
  margin: -1px 0 0 -1px;
  font-size: 13px;
  text-align: left;
  list-style: none;
  background-color: #60031a;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu > li > a {
  display: block;
  padding: 5px 15px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
    color: #fff;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	color: #fff;
	text-decoration: none;
	background-color: #000;
}

.dropdown-toggle:active, .open .dropdown-toggle {
	color:#fff !important; }
	
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #151d1c;
  outline: 0;
}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.content .video-img-box,  .video-img-box {
		float: left;
		width: 31%;
		margin: 40px 1% 0 1%;}
	h1 {
	font-size: 32px;
	line-height: 64px; }
	
	#header-txt {
	font-size: 16px;
	line-height: 22px; }

	
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.navbar-default {
	 height: 100%;
	 font-size: 12px; }
	
	.navbar-nav > li > a {
  	padding: 0 5px; }
	
	h1 {
	font-size: 26px;
	line-height: 52px; }
	
	#header-txt {
	font-size: 14px;
	line-height: 20px; }
	
	.content .video-img-box, .video-img-box {
		float: left;
		width: 48%;
		margin: 40px 1% 0 1%; 
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 800px) {
  
  body {
  	margin: 0;
  	padding: 0; }
  	
  	h1 {
  	width: 100%;
  	text-align: center;
	margin: 0 auto; 
	font-size: 24px;
	line-height: 32px; }
	
	#header-txt {
	clear: both;
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	margin: 1em auto 0 auto; }
	
	.main-img-bg {
	height: 10px;}
	
	.navbar {
	min-height: 38px; }
	
	.nav-bg {
	height: 40px;}
	
	.index-img {
	display: none;
	margin: 0 0 25px 25px; }
	
	.index-img-mobile {
	display: block;
	margin: 2em auto; }	
	
	.content-container, .content-container-alt {
	padding: 25px 20px;
	margin: 0 auto; }
	
	 h2, h3, h4 {
	 font-size: 24px; }
	 
	body {
	font-size: 16px;
	line-height: 22px; }
	
	#testimonials {
	padding: 40px 0; }
	
	#social {
	width: 100%;
	text-align: right; }
	
	#footer h4 {
	clear:both;
	display: block;
	margin-top: 3em;
	font-size: 20px;
	line-height: 28px; }
	
	#footer p {
	font-size: 14px;
	line-height: 24px; }
	
	.pa-logo {
	display: none; }
	
	.pa-txt {
	width: 100%; }
	
  	
  	/* Change Mobile Nav Breakpoint From Default 768px */
  	.navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding: 0;
    }
    .collapse.in{
        display:block !important;
    }
    
    .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
  	/* END Change Mobile Nav Breakpoint From Default 768px */
  	
  	.nav-icon {
  	float: left;
  	margin: 0 10px 0 20px;
	border:0;
	width:25px;
	height:25px;
	}
	
	.navbar-nav > li > a {
	padding-left: 20px;
	margin: 0;
  	text-align: left;
	}
  
	.navbar-default {
	  height: 100%;
	}
	  	  
	.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #60031a;
    color: #fff;
    }
    
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
	color: #fff;
	text-decoration: none;
	background-color: #000;
	}

}

	

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	.content .video-img-box,  .video-img-box {
		width: 100%;
		margin-top: 20px; }	
		
		.grid-item p {
			font-family: 'arial', sans-serif;
		}
		
		.t-name {
			font-family: 'arial', sans-serif;
		}
		
		.t-title, .t-title p {
			font-family: 'arial', sans-serif;
		}
	
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

.icon-bar {
	background-color: #fff !important; }
	
.navbar-toggle {
	padding: 7px 9px;
	margin-top: 4px;
	margin-right: 15px;
	margin-bottom: 4px;
}

#success_message { display: none;}


	
/* END RESPONSIVE NAVIGATION STYLING ----------------------------------------*/