/* -----------------------
Base styles
------------------------*/

* { 
padding: 0;
margin: 0;
border: none;
}

.container * {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	color: #666;
	background-color: #eee;
	/*font: 1em/1.2 'Alegreya', serif;*/
	font: 1em/1.2 'Alegreya', serif;
/*    font-weight: 400;*/
    letter-spacing: .05em;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	line-height: 1.5em;
	letter-spacing: 0.15em;
	font-weight: 500;
	color: #666;
}

h1 {
	letter-spacing: 0.1em;
    font-weight: 500; 
	font-size: 1.2em;
	line-height: 1.2em;
    margin: 0;
}

h2 {
    letter-spacing: 0.05em;
    font-weight:400;
	font-size: .95em;
    margin-bottom: 1em;
}

h3 {
	letter-spacing: 0.05em;
    font-weight:500;
	font-size: 2.1em;
    color: #75a463;
    font-style: italic;
    margin-bottom: -.19em;
}

p {
	margin: 0 0 1.1em;
	line-height: 1.5em;
	color: #666;
    font-size: 1em;
    font-weight: 400;
}

p.one {
    margin: 0em 0em .9em 0em;
}

p.br{
    margin: 0 0 .25em 0;
}

span.italic {
    font-style: italic;
}

span.bold01 {
    font-weight: 500;
}

span.bold01-italic {
    font-weight: 500;
    font-style: italic;
}

blockquote
{
	padding: 1em 2em;
	margin: 0 0 2em;
	border-left: 5px solid #eee;
}

hr
{
	height: 0;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 0;
	border-top: 1px solid #ccc;
}

ul{
/*
    padding:0;
    margin:0;
    list-style-type:none; 
    list-style:none;
*/
    line-height: 1.3em;
    margin-left: 1.2em;
}

ol {
	list-style-type: decimal;
}

.list01-wrapper {
    margin: -.5em 0 -.6em 1em;
}

ul.ul-list01 {
    padding: 0;
    list-style-type: disc;
    margin-bottom: 2em;
}

li.li-list01 {
    list-style-type: none;
    position: relative;
    margin-bottom: .5em;
    margin-left: -.15em;
}

li.li-list01:before {
    content: '\2022';
    position: absolute;
    left: -1em;
    font-size: 1em;
}

ul.ul-list02 {
    padding: 0;
    list-style-type: disc;
    margin-bottom: 1em;
}

.list02-wrapper {
    margin: 0 0 1em 0;
}

/*
ul.ul-list02 {
    padding:0;
    list-style-type: disc;
    margin-bottom: 2em;
}
*/

li.list02 {
    list-style-type: none;
    position: relative;
    margin-bottom: .5em;
	margin-left: -.15em;
}

li.list02::before {
    content: '\2022';      /* The unicode for â€¢ character */
    position: absolute;
    left: -1em;          /* Adjust this value so that it appears where you want. */
    font-size: 1em;
}

ul.ul-list03 {
    padding: 0;
    list-style-type: disc;
    margin-bottom: 2em;
}

li.li-list03 {
    list-style-type: none;
    position: relative;
    margin-bottom: .5em;
    margin-left: 0;
}

li.li-list03:before {
    content: url(../images/dog-pics-julie/paw-print2.gif);
    position: absolute;
    left: -1.4em;
    font-size: 1em;
}

.hover {
    cursor: pointer;
}

a.one:link {
    color: #666;
	text-decoration: underline;
}

a.one:visited {
    color: #666;
	text-decoration: underline;
}

a.one:hover {
    color: #666;
	text-decoration: none;
}

/* -----------------------
Layout styles
------------------------*/

.clearfix {
    overflow: auto;
	overflow-y: hidden;
}

.header
{
	padding: 0;
/*    height: 183px;*/
    border-bottom: 1px solid #ccc;
/*	background: linear-gradient(to bottom, rgba(117,164,99,1) 0%, rgba(223,234,219,1) 100%);*/
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#75a463+0,dfeadb+100 */
    background: rgb(117,164,99); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(117,164,99,1) 0%, rgba(223,234,219,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(117,164,99,1) 0%,rgba(223,234,219,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(117,164,99,1)),to(rgba(223,234,219,1)));
    background: -moz-linear-gradient(top,  rgba(117,164,99,1) 0%,rgba(223,234,219,1) 100%);
    background: -o-linear-gradient(top,  rgba(117,164,99,1) 0%,rgba(223,234,219,1) 100%);
    background: linear-gradient(to bottom,  rgba(117,164,99,1) 0%,rgba(223,234,219,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75a463', endColorstr='#dfeadb',GradientType=0 ); /* IE6-9 */
    
	background-repeat: no-repeat;
}

.h1-bar {
    background-color: #dfeadb;
/*    height: 3.8em;*/
    padding: 1.84em;
    border-bottom: 1px solid #ccc;
    position: relative;
}

.header-heading { 
    margin: 0;
	text-align: right;
	position: absolute;
	right: 1em;
	top: 1.1em;
}

.header-heading-contact {
    position: absolute;
	left: 1em;
	top: .5em;
	font-size: .94em;
    line-height: 1.5em;
    display: block;
}

.header-heading-contact-small-screen {
    position: absolute;
	left: 1em;
	top: .5em;
	font-size: .94em;
    line-height: 1.5em;
    display: none;
}

/*
.header-heading-address {
    position: absolute;
	left: 1em;
	top: 2.2em;
	font-size: .94em;
}
*/

.img-logo {
	padding-top: 1.4em;
	margin-right: 0;
	margin-left: 1em;
    width: 712px;
    display: block;
}

.img-logo-small-screen {
	padding-top: 1.4em;
	margin-right: auto;
	margin-left: auto;
    width: 390px;
    display: none;
}

.imgs-three-container {
	/*margin: 0 -2px;*/
	margin: 0;
    padding: 0;
	width: -webkit-calc(100% + 4px);
	width: -moz-calc(100% + 4px);
	width: calc(100% + 4px)
}

.imgs-three_actual {
	border: 1px solid #ccc;
	width: 100%;
}

.imgs-three {
	margin: 0 0 1em 0;
	padding: 0 2px; 
	float: left;
	width: 33.33%;
}

.imgs-three-facil-top {
	margin: 0;
	padding: 0 2px; 
	float: left;
	width: 33.33%;
}

.img-left01-home {
    float: left;
    width: 105px;
}

.img-left01-about {
    float: left;
    width: 127px;
}

.image-left02-about {
    position: relative;
    float: left;
    width: 13em;
    height: auto;
    border: 1px solid #ccc;
    margin-right: .5em;
    margin-top: .3em;
}

.img-right01-home {
    float: right;
    border: 2px solid #ccc;
    margin-top: 10px;
}

.img-right02-home {
    position: absolute;
    left: 12em;
    top: .5em;
    border: none;
}

.img-right01-facilities {
    float: right;
    margin-left: 10px;
    width: 126px;
}

.image-left01-facilities {
    position: relative;
    float: left;
    width: 13em;
    height: auto;
    border: 1px solid #ccc;
    margin-right: .5em;
    margin-top: .3em;
}

.img-right01-lightbox {
    position: relative;
    float: right;
    width: 14em;
    height: auto;
    border: 1px solid #ccc;
    margin-left: .5em;
}

.img-dog-food-top {
    width: 203px;
    display: block;
    margin: auto;
}

.img-dog-food-top-container {
    width: 100%;
    background-color: #49132D;
    padding: 1em 0 1em 0;
    margin: 0 auto 1em auto;
    border: 2px solid #ccc;
}

.img-left01-food {
    float: left;
    margin-right: 10px;
    width: 150px;
}

.img-right01-food {
    float: right;
    margin-left: 10px;
    width: 250px;
    border: 2px solid #ccc;
}

/*
.img-left01-fees {
    position: absolute;
    top: 10.7em;
    left: 10em;
    width: 42px;
}
*/

/*
.img-left02-fees {
    position: absolute;
    top: 45.2em;
    left: 10em;
    width: 48px;
}
*/

.main.fees p img {
    position: absolute;
}

/*
.img-left01-opening {
    position: absolute;
    top: 6em;
    left: 18em;
    width: 46px;
}
*/

.main.opening p img {
    position: absolute;
}

.img-right01-tourist {
    float: right;
    margin-right: 5px;
    margin-left: 8px;
    width: 126px;
}

.img-right01-testimonial {
    float: right;
    margin-right: 5px;
    margin-left: 5px;
    width: 91px;
}

.img-right01-links {
    float: right;
    margin-right: 5px;
    margin-left: 5px;
    width: 114px;
}

.container
{
	max-width: 1020px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #CCCCCC;
	min-height: 100%;
	position: relative;
	
	height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

.content {
    overflow: auto;
    margin-bottom: 6.2em;
    padding: 0 0 7px 0;
}

.main {
  /*float:left;*/
  /*width:80%;*/
    overflow: hidden;
    padding:20px 10px 0px 16px;
    position: relative;
}
/*.right {
  background-color:#e5e5e5;
  float:left;
  width:20%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}*/

.opening-2cols-container {
    margin: 0;
    padding: 0;
	width: -webkit-calc(100% + 4px);
	width: -moz-calc(100% + 4px);
	width: calc(100% + 4px)
}

.opening-2cols-l {
    width: 50%;
    float: left;
/*    border-right: 1px solid #ccc;*/
    margin-bottom: 1em;
}

.opening-2cols-r {
    width: 50%;
    float: left;
    margin-bottom: 1em;
    border-left: 1px solid #ccc;
}

.opening-2cols-content-l {
    margin: 1em 1em 1em 0;
}

.opening-2cols-content-r {
    margin: 1em 0 1em 1em;
}

.footer {
	color: #666;
	/*background: #dfeadb;*/
    /*background: linear-gradient(to bottom, rgba(117,164,99,1) 0%, rgba(223,234,219,1) 100%);*/
/*    background: linear-gradient(to bottom, rgb(159, 204, 142) 0%, rgba(223,234,219,1) 100%);*/
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9fcc8e+0,dfeadb+100 */
    background: rgb(159,204,142); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(159,204,142,1) 0%, rgba(223,234,219,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(159,204,142,1) 0%,rgba(223,234,219,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(159,204,142,1)),to(rgba(223,234,219,1)));
    background: -moz-linear-gradient(top,  rgba(159,204,142,1) 0%,rgba(223,234,219,1) 100%);
    background: -o-linear-gradient(top,  rgba(159,204,142,1) 0%,rgba(223,234,219,1) 100%);
    background: linear-gradient(to bottom,  rgba(159,204,142,1) 0%,rgba(223,234,219,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fcc8e', endColorstr='#dfeadb',GradientType=0 ); /* IE6-9 */
    
	position: absolute;
	width: 100%;
	height: 7.4em;
    margin-top: 1em;
	bottom: 0;
    font-family: 'Open Sans';
    font-size: .77em;
	font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.8em;
    padding: 1.05em 1em;
    border-top: 1px solid #ccc;
}

.footer01 {
    position: absolute;
    right: 1.5em;
    bottom: -2.7px;
}

.img-dogs-footer {
    width: 180px;
    position: absolute;
    right: 1.5em;
    bottom: 0px;
}

/* -----------------------
Nav
------------------------*/

.menu {
  float:left;
  width:202px;
  text-align:center;
}
.menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
    margin-left: 7px;
  display:block;
  width:100%;
  color:black;
}

/* -----------------------
Wide styles
------------------------*/

@media only screen and (max-width:1020px) {
  /* For mobile phones: */
  .menu, .main {
    width:100%;
  }
    
    .menu a {
        margin-left: 0;
    }
    
/*
    .img-left02-fees {
    top: 43.7em;
    left: 9.2em;
    }
*/
}


@media only screen and (max-width:750px) {
    .h1-bar {
    padding: 2.6em;
    border-bottom: .5px solid #ccc;
    }
    
    .header-heading { 
    margin: 0;
	text-align: left;
    right: 0;
	left: 1em;
	top: .5em;
    }

.header-heading-contact {
    position: absolute;
	top: 2.3em;
	font-size: .9em;
    line-height: 1.5em;
    }

/*
.header-heading-address {
    position: absolute;
	left: 1em;
	top: 4.2em;
	font-size: .9em;
    line-height: 1.5em;
    }
*/
    
    .img-logo {
	display: none
    }

    .img-logo-small-screen {
        display: block;
    }
    
    .imgs-three {
	width: 50%;
    }
    
    .imgs-three-facil-top {
	width: 50%;
    }
    
    .imgs-three:nth-child(3) {
		display: none;
	}
    
    .imgs-three-facil-top:nth-child(2) {
		display: none;
	}
}

@media only screen and (max-width:700px) {
    
}

@media only screen and (max-width:650px) {
    .content {
    margin-bottom: 8.8em;
    padding: 0 0 7px 0;
    }
    
    .footer {
	height: 11em;
    font-size: .74em;
    letter-spacing: .03em;
    line-height: 1.8em;
    padding: 1.05em 1em;
    }
    
    .img-dogs-footer {
    width: 170px;
    right: 1.5em;
    }
}

@media only screen and (max-width:581px) {
    .header-heading-contact {
        display: none;
    }
    
    .header-heading-contact-small-screen {
        top: 2.3em;
        font-size: .9em;
        display: block;
        left: .5em;
        margin-right: .5em;
    }
    
/*
    .img-left02-fees {
    top: 46.6em;
    left: 9.2em;
    }
*/
}

@media only screen and (max-width:520px) {
    .header-heading { 
	left: .5em;
    }
    
    .img-logo-small-screen {
        width: 290px;
    }
    
    .img-right01-home {
        display: none;
    }
    
    .image-left02-about {
    width: 11em;
    }
    
    .image-left01-facilities {
    width: 11em;
    }
    
    .header-heading-contact {
        display: none;
    }
    
    .header-heading-contact-small-screen {
        top: 2.3em;
        font-size: .9em;
        display: block;
        left: .5em;
        margin-right: .5em;
    }
    
    .img-left01-food {
    width: 130px;
    }

    .img-right01-food {
    width: 230px;
    }
    
    .list01-wrapper {
    margin: -.5em 0 -.6em .5em;
    }
}

@media only screen and (max-width:455px) {
    .h1-bar {
    padding: 3.2em;
    }
    
    .image-left02-about {
    width: 10em;
    }
    
    .image-left01-facilities {
    width: 9.5em;
    }
    
    .img-left01-food {
    width: 130px;
    }

    .img-right01-food {
    width: 220px;
    }
}

@media only screen and (max-width:420px) {
    .main {
    padding:10px 12px 0px 12px;
    }
    
    p {
    font-size: .99em;
    }
    
    .img-left01-home {
    width: 90px;
    }
    
    .img-left01-about {
    width: 115px;
    }
    
    .img-right02-home {
    left: 10em;
    top: .5em;
    width: 122px;
    }
    
     .image-left02-about {
    width: 9em;
    }
    
    .img-right01-facilities {
    margin-left: 8px;
    width: 110px;
    }
    
    .image-left01-facilities {
    width: 8.5em;
    }
    
    .img-left01-food {
    width: 120px;
    }

    .img-right01-food {
    float: none;
    margin: 0 auto 1em auto;
    width: 250px;
    display: block;
    }
    
/*
    .img-left01-fees {
    top: 10.1em;
    left: 10em;
    }
    
    .img-left02-fees {
    top: 45.6em;
    left: 9.2em;
    }
*/
    
/*
    .img-left01-opening {
    top: 6em;
    left: 17em;
    width: 44px;
    }
*/
    
    .img-right01-tourist {
    margin-left: 6px;
    margin-right: 0;
    width: 110px;
    }
    
    .img-right01-testimonial {
    margin-right: 5px;
    margin-left: 5px;
    width: 81px;
    }
    
    .img-right01-links {
    margin-right: 5px;
    margin-left: 5px;
    width: 104px;
    }
}

/*
@media only screen and (max-width:381px) {
    .img-left02-fees {
    top: 47em;
    }
}

@media only screen and (max-width:351px) {
    .img-left02-fees {
    top: 51.5em;
    }
}
*/

@media only screen and (max-width:340px) {
    p {
    font-size: .97em;
    }
    
     .image-left02-about {
    width: 7.8em;
    }
    
    .image-left01-facilities {
    width: 7em;
    }
    
/*
    .img-left02-fees {
    top: 50.5em;
    }
*/
    
/*
    .img-left01-opening {
    top: 6.5em;
    left: 16.2em;
    width: 41px;
    }
*/
    
    .list01-wrapper {
    margin: -.5em 0 -.6em .2em;
    }
}

/*
@media only screen and (max-width:322px) {
    .img-left01-fees {
    top: 11.6em;
    left: 10em;
    }
    
    .img-left02-fees {
    top: 50.5em;
    }
}
*/

/*
@media only screen and (max-width:304px) {
    .img-left02-fees {
    top: 53.5em;
    }
}
*/

/*
@media only screen and (max-width:301px) {
    .img-left01-fees {
    top: 13.6em;
    left: 10em;
    }
    
    .img-left02-fees {
    top: 56.5em;
    }
}*/
