/*******************************************************/
/*   Alder Trail Animal Hospital Styles.css
/*  (c) 2015 Aldertrailsanimalhospital.com 
/*   by Lanski Marketing -www.lanskimarketing.com
/*******************************************************/

/********* Globals **************/

body, html {
	background:#fffbe8;
	font-size:16.75px;
	font-family:Arial, Helvetica, sans-serif;
	color:#5a3800;
}

h2 {
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:16.75px;
	color:#135563;	
	font-weight:bold;
}

p {
	font-size:12.33px;
	margin-top:20px;
}

p.lrg {
	font-size:16.75px;	
}

.quote-wrapper {
	display:inline-block;	
}

p.quote {
	font-size:14px;
	color:#135563;
	font-style:italic;
	font-weight:bold;
}

p.quote span {
	font-size:11px;
	text-align:right!important;
	width:100%;
	display:block;
}

.container.main li {
	list-style-image:url("../images/pawprint_15x15.png");
	font-weight:bold;
	font-size:16px;
}

.container {
	background:#fff;
}

.bold {
	font-weight:bold;	
}

/********* Header ****************/

.container.full {
	padding:0;	
}

header {
	width:100%;
	min-height:127px;
	background:#135563;
	color:#f6efc7;
	text-shadow:0px 1px 0px #0f434e;
}

#logo {
	width:205px;
	height:105px;
	float:left;
	margin:5px 0 0 34px;
}

#logo a {
	width:205px;
	height:105px;
	display:block;
	padding:0;
	margin:0;
}

header {
	position:relative;	
}

header .address {
	display:inline-block;
	float:left;
	margin:37px 0 0 16px;
}

header a:link,header a:visited,header a:active {
	color:#dec286;
	text-decoration:underline;
}

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

header .phone-hours {
	float:right;
	background:url("../images/pawprint_30x30.png") no-repeat top left;
	display:inline-block;
	margin:24px 16px 0 0;
	padding:0 0 0 38px;
	text-align:right;
	font-size:14.75px;
}

header .phone-hours span {
	font-size:28.33px;
	padding:0 0 3px 0;
	display:block;
	font-weight:bold;
}

#main-nav {
	display:block;
	width:100%;
	background:#eedfb2;
	border:1px solid #eedfb2;
}

#main-nav a:link, #main-nav a:visited {
	display:block;
	overflow:hidden;
	float:right;
	color:#135563;
	text-decoration:none;
	display:inline-block;
	padding:4px 4px 4px 32px;
	background: url("../images/pawprint_21x60.png") 4px 4px no-repeat;
	text-shadow:1px 1px 0px rgba(100,100,100,.4);
}

#main-nav a:hover, #main-nav a:active {
	text-decoration:none;
	color:#fff;
	background-position:4px -28px;
	background-color:#6a8b92;
}

/*************** Main *******************/
.container.main {
	background:url("../images/pawprint_434x415.jpg") 98% 100% no-repeat;
	background-color:#fff;
	padding:0 0 0 90px;
}

.container.main .row.first {
	background:url("../images/aldertrail_statue.png") 99% bottom no-repeat;	
	background-size:237px 512px;
	padding-top:32px;
	margin:0;
}

.container.main .row.first .col-md-9 {
	padding-right:40px;	
}


/************** FOOTER *********************/

.container.footer {
	background:#00495c;
	color:#e5e5e5;
	margin-bottom:0;
	padding:20px 0 0 0;
}


.container.footer .row {
	margin:0;
}

.container.footer .copy-credits {
	background:url("../images/pawprint_77x79.png") top left no-repeat;
	font-size:11.58px;
	min-height:79px;
	margin:0 0 0 76px;
	padding:14px 0 0 14px;
}

.container.footer .copy-credits span {
	display:block;
	float:left;
	clear:both;
	font-size:9px;
	margin-top:7px;
}

.copy-credits span a:link, .copy-credits span a:visited, .copy-credits span a:active {
	color:#fff;	
}

.copy-credits span a:hover {
	color:#fff;
	text-decoration:underline;
}

p.foot-block {
	float:right;
	font-size:13.13px;
	display:inline-block;
	font-size:15.6px;
	padding:0 34px;
	margin:14px 0 0 0;
	text-shadow:0px 1px 0px #0f434e;
	min-height:79px;
}

p.foot-block span {
	font-size:9.5px;
	display:block;
	float:left;
	clear:both;
}

p.foot-block span a:link, p.foot-block span a:visited,p.foot-block span a:active {
	color:#6db3c5;
	text-decoration:underline;
}

p.foot-block span a:hover {
	color:#fff;
	text-decoration:none;
}

.border {
	border-right:2px solid #003544;	
}




/************************** RESPONSIVE **********************************/

@media (max-width: 1040px) {

.container.main {
	background:url("../images/pawprint_434x415.jpg") 98% 100% no-repeat;
	background-color:#fff;
	padding:0 0 0 45px;
}

.container.main .row.first {
	background:url("../images/aldertrail_statue.png") 99% bottom no-repeat;	
	background-size:180px 389px;
}

}

@media (max-width: 1000px) {

.container.main {
	padding:0 0 0 22.5px;
}

.container.main p {
	max-width:500px;
}

.container.main .row.first {
	background:url("../images/aldertrail_statue.png") 95% bottom no-repeat;	
	background-size:180px 389px;
}

}

@media (max-width: 767px) {

    body {
        font-size: 20px;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        line-height: 1.4;
    }
        
    h2 {
        font-size: 24px;
    }
    
    p {
        font-size: 18px;
    }
    
    p.lrg {
        font-size: 22px;
    
    }
    
    p.quote {
        font-size: 18px;
    }
    
    .container.footer .copy-credits {
        font-size: 16px;
        line-height: 2;
    }
    
    .container.footer .copy-credits span {
        font-size: 16px;
        margin-top: 15px;
        margi-bottom: 45px;
    
    }
    p.foot-block {
        width: 47%;
        margin-bottom: 15px;
    }
    
    p.foot-block span {
        font-size: 16px;
        margin-bottom: 4px;
    }
    
    p.quote span {
        font-size: 16px;
        margin-bottom: 4px;        
    }
    
    .container.main li {
        font-size: 24px;
    }
    
    li {
        margin-bottom: 10px;
    
    }
    
    
    
    #main-nav a{
        padding: 6px;
        margin: 0 4px;
    }
        
    header {
	    padding:20px;	
    }

    #logo {
	    float:none;
	    margin:0 auto;	
    }

    header .address, header .phone-hours {
	    margin-top:20px;	
    }

    header .phone-hours {
	    float:right;
	    font-size: 18px;
    }


}

@media (max-width: 720px) {

    .container.main .row.first {
	    background:url("../images/aldertrail_statue.png") 95% bottom no-repeat;	
	    background-size:150px 324px;
    }

    .container.main p {
	    max-width:75%;
    }

}

@media (max-width: 567px) {

    #main-nav {
        display: flex;
        justify-content: space-between;
    }

    header .address, header .phone-hours {
	    float:none;
	    text-align:center;
	    display:inherit;
	    background:none;
	    padding-left:0;
    }

    .container.main .row.first {
	    background:url("../images/aldertrail_statue.png") 95% bottom no-repeat;	
	    background-size:100px 216px;
    }

}

@media (max-width: 567px) {

.border {
	border-right:none;
}

.container.main {
	padding:10px;
}

.container.main .row.first {
	background:none;
	padding:0;
}

.container.main p {
	max-width:100%;
}

}