@charset "UTF-8";
/* CSS Document */

* { padding: 0; margin: 0; outline: 0; }
html,
body { height: 100%; overflow-x: hidden; }
body{ margin: 0; padding: 0; -webkit-text-size-adjust: none; -webkit-padding-start: 0px; overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;}

/********* Typography **********/
body { font-family: 'Gotham Book', Gotham-Book, Arial, sans-serif; color: #333; }

p, a, ul, ol, li { font-size: 16px; line-height: 28px;}
h1, h2, h3, h4, h5 { font-family: "jaf-domus-titling-web", sans-serif; font-weight: bold; text-transform: uppercase; }

p { padding-bottom: 20px; } 
h1 { font-size: 48px; }

a { text-decoration: none; color: #7999a4; }
a:hover { color: #000; }
a:focus { color: #000; }

.blue { color: #7999a4; }
 
.images { width: 100%; height: auto; border-radius: 3px; }

.overflow { overflow: hidden; }


/********* Force Element To Self-Clear its Children **********/
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/********** Main Containers and Divs *********/
.float-left{ float: left; }
.float-right { float: right; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.circle { border-radius: 50%; width: 200px; height: 200px; }

.wrapper { width: 1000px; margin: 0 auto; }

/*** columns **/
.col_1of3 { width: 33%; }
.col_2of3 { width: 66%; }

.col_1of4 { width: 22%; }
.col_3of4 { width: 75%; }

.col_2of2 { width: 48%; }


/** column padding **/
.padding-right { padding-right: 30px; }
.padding-left { padding-left: 30px; }

/****** Header ******/
#header { padding: 0; }
#logo { float: left; }
#logo img { margin-top: 5px; }

#nav { float: right; text-align: right; margin-top: 35px; }
#nav h3 { color: #7999a4; padding-right: 15px; font-size: 18px;}

#primary_nav_wrap { margin-top:0px; }

#primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0; }

#primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-family: "jaf-domus-titling-web", sans-serif; font-weight: bold; font-size:16px; line-height:32px; padding: 0 15px; }


#primary_nav_wrap ul li { position: relative; float:left; margin: 0; padding: 0; text-align: right; }
#primary_nav_wrap ul li:last-child { padding-right: 0; } 
#primary_nav_wrap ul li a:hover { color: #7999a4; background: #fff; }
#primary_nav_wrap ul ul { display: none; border-top: 19px solid rgba(0, 0, 0, 0); position:absolute; top:100%; left: 0;  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.82); padding: 0; z-index: 10000; }
#primary_nav_wrap ul ul li { float: none; width:200px; }
#primary_nav_wrap ul ul a { display: block; padding: 10px 15px; font-size: 14px; text-align: left; /*background: #f2f2f2;*/}
#primary_nav_wrap ul ul ul { top: 0; left: 100%; }
#primary_nav_wrap ul li:hover > ul { display:block; }

.hamburger { display: none; }

/****** SLIDER ******/
.slider { position: relative; clear: both; }
#slide1 { background: url(images/slider-1.jpg) no-repeat; background-size: cover; height: 572px; }
#slide2 { background: url(images/slider-2.jpg) no-repeat; background-size: cover; height: 572px; }
#slide3 { background: url(images/slider-3.jpg) no-repeat; background-size: cover; height: 572px; }
.slider-overlay { background: #fff; opacity: 0.8; position: absolute; width: 723px; bottom: 10px; right: 0px; }
.slider-overlay .text { padding: 20px 40px; }
.slider-overlay h2 { font-size: 30px; text-transform: uppercase; }
.slider-overlay p { font-size: 18px; line-height: 30px; padding-bottom: 7px; }


/***** INTERIOR PAGE HEADERS ******/
#interior-bg { clear: both; background-size: cover; width: 100%; height: 450px; padding: 1px; }
.background1 { background: url(images/interior-bg1.jpg) no-repeat; }
.background2 { background: url(images/interior-bg2.jpg) no-repeat; }
.background3 { background: url(images/interior-bg3.jpg) no-repeat; }
.background4 { background: url(images/interior-bg4.jpg) no-repeat; }
.background5 { background: url(images/interior-bg5.jpg) no-repeat; }
.background6 { background: url(images/interior-bg6.jpg) no-repeat; }
.background7 { background: url(images/interior-bg7.jpg) no-repeat; }
.background8 { background: url(http://mashpeeveterinaryhospital.com/images/interior-bg8.jpg) no-repeat; }
.background9 { background: url(images/interior-bg9.jpg) no-repeat; }
.background10 { background: url(images/interior-bg10.jpg) no-repeat; }
.background11 { background: url(images/interior-bg11.jpg) no-repeat; }
.background12 { background: url(images/interior-bg12.jpg) no-repeat; }
.background13 { background: url(images/interior-bg13.jpg) no-repeat; }
.background14 { background: url(images/interior-bg14.jpg) no-repeat; }
.background15 { background: url(images/interior-bg15.jpg) no-repeat; }

#staff-bg { clear: both; background-size: 100%; height: 650px; }
.staffbg { background: url(images/staff-banner.jpg) no-repeat; }

#interior-bg h1, #staff-bg h1 {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: #000000;
    display: block;
    height: 300px;
    line-height: 300px;
    margin: 75px auto;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    width: 300px;
    font-size: 42px;
}

/****** ABOUT SECTION ******/
#about { padding: 60px 0px 80px; overflow: hidden; }
#about p {  }
.cp-width { width: 80%; margin: 0 auto; padding-top: 20px; padding-bottom: 0; }


/****** STAFF *****/
.staff-pics img { width: 100%; height: auto; border-radius: 3px; }
.staff {
	background: none repeat scroll 0 0 #F8F8F8;
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 30px 20px;
}

.staff h2 { font-size: 36px; line-height: 12px; margin-bottom: 20px;}
.staff .col_2of3 p, .staff .col_2of3 h2 { padding-left: 20px; }


/****** SERVICES ******/
#services { text-align: center; overflow: hidden; padding-bottom: 80px; }
#services h3 { color: #7999a4; padding-top: 10px; font-size: 24px; }
#services a { font-family: "jaf-domus-titling-web", sans-serif; font-weight: bold; }
#services p { padding-bottom: 10px; }
#services img { width: 100%; height: auto; border-radius: 3px; }


/***** SERVICES PAGE ****/
.services {  
	background: none repeat scroll 0 0 #F8F8F8;
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 30px 20px;
 }
/*.services { width: 100%; }*/
.services-pics img { width: 100%; height: auto; border-radius: 3px; }

/***** CONTACT PAGE ****/
#hours { padding-top: 80px; }
iframe { margin-top: 20px; }

/****** FOOTER ******/
#footer { background: #7999a4; overflow: hidden; padding: 50px 0px; }
#footer h2 { color: #fff; font-size: 48px; }

/*** footer contact ***/
#footer-left { width: 580px; }
#contact { margin-top: 53px; }

#contact p { padding: 10px 0px; }
#contact label { color: #fff; width: 100px; display: block; float: left; font-family: "jaf-domus-titling-web", sans-serif; font-size: 18px; }
#contact input[type="text"] { width: 463px; padding: 10px 5px; background: #7999a4; border: 2px solid #fff; -webkit-appearance: none; border-radius: 0px; }
#contact textarea { width: 463px; padding: 10px 5px; height: 140px;  background: #7999a4; border: 2px solid #fff; border-radius: 0px; }
#contact input[type="submit"] { font-family: "jaf-domus-titling-web", sans-serif; border: 2px solid #fff; background: #7999a4;  padding: 5px 25px 10px 25px; color: #fff; font-size: 18px; text-transform: uppercase; -webkit-appearance: none; border-radius: 0px; }
#contact input[type="submit"]:hover { background: #fff; color: #7999a4; }
/*** footer address ***/
#footer-address { color: #fff; }
#footer-address p { padding-bottom: 37px; }
#footer-address h4 { font-size: 24px; }
#footer-address a { color: #fff; }
#footer-address a:hover { color: #ccc; }
#footer-address .icons { padding-top: 10px; }


/* ==========================================================================
	#Media - Small desktop, tablets in landscape 
========================================================================== */
@media (max-width: 1024px) {
	
	.wrapper { width: 960px; }
	#nav { display: none; }
	.hamburger { display: block; background: url(images/hamburger.png) right no-repeat; float: right; margin-top: 35px; }
	.hamburger a { width: 300px; height: 50px; display: block; }
	.dropdown { display: none; }
	.dropdown { background: #fff; width: 400px; position: absolute; top: 80px; right: 0px; padding: 40px; z-index: 100; }
	.dropdown li { padding: 15px 0px;  color: #7999a4; list-style: none; }
	.dropdown li a { text-transform: uppercase; color: #7999a4; font-size: 22px; font-family: "jaf-domus-titling-web", sans-serif; }
	.dropdown li a:hover { color: #ccc; }
	.subnav a { color: #aaa; padding-left: 20px; }
	.expand { display: block!important; }
	

	
	#footer-left { width: 460px; }
	#contact input[type="text"] { width: 450px; }
	#contact textarea { width: 450px; }
	
	#footer-address { }
}




/* ==========================================================================
	#Media - Tablets in portrait
========================================================================== */
@media (max-width: 979px) {
	.wrapper { width: 960px; }
	#nav { display: none; }
	.hamburger { display: block; background: url(images/hamburger.png) right no-repeat; float: right; margin-top: 35px; }
	.hamburger a { width: 300px; height: 50px; display: block; }
	.dropdown { display: none; }
	.dropdown { background: #fff; width: 400px; position: absolute; top: 80px; right: 0px; padding: 40px; z-index: 100; }
	.dropdown li { padding: 15px 0px;  color: #7999a4; list-style: none; }
	.dropdown li a { text-transform: uppercase; color: #7999a4; font-size: 22px; font-family: "jaf-domus-titling-web", sans-serif; }
	.dropdown li a:hover { color: #ccc; }
	.subnav a { color: #aaa; padding-left: 20px; }
	.expand { display: block!important; }
	
	
	#footer-left { width: 460px; }
	#contact input[type="text"] { width: 450px; }
	#contact textarea { width: 450px; }
	
	#footer-address { }
}


/* ==========================================================================
	#Media - Smartphone
========================================================================== */
@media only screen 
and (min-width : 375px) 
and (max-width : 667px) {

	p, a, ul, ol, li { font-size: 36px; line-height: 48px; }
	h2 { font-size: 48px; }
	#nav { display: none; }
	.wrapper { width: 95%; }
	
	
	.col_2of3 { width: 100%; }
	.col_1of3 { width: 100%; }
	
	.hamburger { display: block; background: url(images/hamburger.png) right no-repeat; float: right; margin-top: 35px; }
	.hamburger a { width: 400px; height: 50px; display: block; }
	.dropdown { display: none; }
	.dropdown { background: #fff; width: 500px; position: absolute; top: 80px; right: 0px; padding: 40px; z-index: 100; }
	.dropdown li { padding: 25px 0px;  color: #7999a4; list-style: none; }
	.dropdown li a { text-transform: uppercase; color: #7999a4; font-size: 40px; font-family: "jaf-domus-titling-web", sans-serif; line-height: 65px; }
	.dropdown li a:hover { color: #000; }
	.dropdown li a:focus { color: #000; }
	.subnav a { color: #aaa; padding-left: 20px; }
	.expand { display: block!important; }
	.col_1of4 { width: 45%; padding-bottom: 30px; }
	
	
	#interior-bg h1 { font-size: 60px; }
	
	
	#services .col_1of4 { width: 100%; }
	#services .col_3of4 { width: 100%; }
	
	.services .col_1of4 { width: 100%; }
	.services .col_3of4 { width: 100%; }
	
	.staff .col_1of4 { width: 100%; float: none;}
	.staff .col_1of3 { width: 100%; float: none; }
	.staff h2 { font-size: 48px; }
	
	.slider-overlay { height: 260px; }
	.slider-overlay p { font-size: 36px; }

	#footer-left { width: 860px; }
	#contact label { font-size: 36px; padding-bottom: 10px; }
	#contact input[type="text"] { width: 850px; padding: 20px 10px; }
	#contact textarea { width: 850px; }
	
	#contact input[type="submit"] { font-size: 36px; }
	
	#footer-address { float: left; font-size: 36px; }
	
}



@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

	p, a, ul, ol, li { font-size: 36px; line-height: 48px; }
	h2 { font-size: 48px; }
	#nav { display: none; }
	.wrapper { width: 95%; }
	
	.col_2of3 { width: 100%; }
	.col_1of3 { width: 100%; }
	.col_3of4, .col_1of4 { width: 100%; float: none; }
	
	.hamburger { display: block; background: url(images/hamburger.png) right no-repeat; float: right; margin-top: 35px; }
	.hamburger a { width: 400px; height: 50px; display: block; }
	.dropdown { display: none; }
	.dropdown { background: #fff; width: 500px; position: absolute; top: 80px; right: 0px; padding: 40px; z-index: 100; }
	.dropdown li { padding: 25px 0px;  color: #7999a4; list-style: none; }
	.dropdown li a { text-transform: uppercase; color: #7999a4; font-size: 40px; font-family: "jaf-domus-titling-web", sans-serif; line-height: 65px; }
	.dropdown li a:hover { color: #000; }
	.dropdown li a:focus { color: #000; }
	.subnav a { color: #aaa; padding-left: 20px; }
	.expand { display: block!important; }
	.col_1of4 { width: 45%; padding-bottom: 30px; }
	
	#interior-bg h1 { font-size: 60px; }
	
	
	#services .col_1of4 { width: 100%; }
	#services .col_3of4 { width: 100%; }
	
	.services .col_1of4 { width: 100%; }
	.services .col_3of4 { width: 100%; }
	
	.staff .col_2of3 { width: 100%; }
	.staff .col_1of3 { width: 100%; }
	.staff h2 { font-size: 48px; }
	
	.staff .col_1of4 { width: 100%; float: none;}
	.staff .col_3of4 { width: 100%; float: none; }
	
	.slider-overlay { height: 260px; }
	.slider-overlay p { font-size: 36px; }

	#footer-left { width: 860px; }
	#contact label { font-size: 36px; padding-bottom: 10px; }
	#contact input[type="text"] { width: 850px; padding: 20px 10px; }
	#contact textarea { width: 850px; }
	
	#contact input[type="submit"] { font-size: 36px; }
	
	#footer-address { float: left; font-size: 36px; }



}