@charset "UTF-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, menu, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*responsive grid view*/

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float:left;
    padding:0px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/*end responsive grid view*/

.container {
	position:relative;
	overflow: visible;
	height: auto;
	background-color: #FFF;
}

header{
  width:100%;
  display:block;
	background-color: #FFF;
	z-index:5;
}
#logocontainer {
  margin-left:33.33%;
}
#logo {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width:100%;
}
#logotxtcontainer {
  display: inline-block;
  font-size: min(1.7vw);
}
#logotxt {
  font-size: 1.3em;
  text-align: center;
  margin-left: 16%;
  width: 100%;
  margin-top:25%;
}
/* home page carousel */

.homeslider{
	width: 100%;
	height: 500px;
	overflow: hidden;
}
.slider img{
	position:relative;
	display:flex;
	height:500px;
	width:100%;
	object-fit:cover;
	z-index:1;
}
.dogCarousel{
	display:flex;
	flex-direction:row;
	width: 55%;
	height: 400px;
	color:#FFF;
	overflow: hidden;
}
.dogslider img{
	position:absolute;
	width:100%;
	height: 400px;
	overflow:hidden;
	object-fit:cover;
	padding:0 20px;
	padding-top:20px;
	z-index:1;
}
.homeslider .sliderIcon{
	position:absolute;
	width:20%;
	margin-left:78%;
	z-index:2;
}
.arrows, .litterArrows {
  cursor: pointer;
  position: absolute;
  width: auto;
  padding: 16px;
  color: #FFF;
  font-size: 3em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index:3;
}
.arrows	{
	top: 375px;
}
.litterArrows{
	top: 275px;
}
.arrows:hover, .litterArrows:hover{
	/*background-color: rgba(51,35,31,0.8);*/
	color:#33231F;
}
.dogArrows {
	cursor: pointer;
	position: absolute;
	color: #FFF;
	padding: 35px;
	margin-top:150px;
	font-size: 2em;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	z-index:3;
  }
.dogArrows:hover{
	/*background-color: rgba(51,35,31,0.8);*/
	color:#33231F;
}
#next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* end home page carousel
------------------------
nav bar  */

nav {
	display:inline;
	position: sticky;
	position: -webkit-sticky;
	top: -1px;
	height: 48px;
	background-color: #33231F;
	width: 100%;
	z-index: 2;
	border-bottom: 1px rgba(237,230, 221, .3);
	border-style: solid;
	/*box-shadow: 1px 1px 1px rgba(237,230, 221, .2);*/
}
nav li {
	width:100%;
	display: inline;
	text-align: center;
	background-color: #33231F;
	font-size: 1.2em;
}
nav li a {
	display: block;
	padding: 12px 0;
}
nav a:link {
	background-color: #33231F;
	color: #EDE6DD;
  text-decoration: none;
}
nav a:visited {
	background-color: #33231F;
	color: #EDE6DD;
	text-decoration: none;
}
nav a:hover {
	background-color: #EDE6DD;
	color: #33231F;
}
nav a img{
	margin-top:-.3vw;
	padding-left: 20px;
	z-index:3;
	width:20%;
}
#navLogo {
	visibility: hidden;
}
#navLogo.stuck {
	visibility:visible;
}
#navAltLogo {
	max-width:30%;
}
/* end nav bar*/

.pageTitle {
	width: 100%;
	height: 100px;
	background-color: #EDE6DD;
	color: #33231F;
	text-align:center;
	font-size:2.5em;
	padding-bottom:60px;
	padding-top:70px;
}

/* HOME INFO */
#info {
	background-color: #EDE6DD;
	color: #000;
	text-align: center;
}
#info p {
	display: inline-block;
	padding: 0 8.33%;
}
#info, #phone {
	padding-top: 25px;
}
#about{
	height:150px;
	background-color: #EDE6DD;
}
#aboutLitter{
	height:auto;
	background-color: #EDE6DD;
}
#about p, #aboutLitter p {
	font-size:1em;
	text-align: left;
	padding: 25px 12%;
}
.indent {
	margin-left:22px;
}
/* END HOME INFO */

/* MAIN CATEGORIES & EACH DOG */
.dogCategory, .homeCategory a {
	display:flex;
	flex-direction:row;
	width:100%;
	height:400px;
	background-color:#33231F;
	color:#FFF;
	text-decoration:none;
}
.dogCategory img, .homeCategory a img{
	object-fit: cover;
	width: 55%;
	padding:0 20px;
	padding-top:20px;
}
.dogCategory #dogDesc, .homeCategory a #dogDesc{
	width:45%;
	text-align:center;
	align-content:center;
	padding: 0 6%;
}
.descbefore{
	display:flex;
	flex-direction:column;
	align-content:center;
	margin-top:25px;
}
.descafter {
	display:none;
}
.dogCategory p{
		font-size:2em;
}
.homeCategory a p{
	font-size:2.5em;
}
.dogCategory span{
	font-size:.9em;

}
#imagebefore {
	display:none;
}
#dogRow2 a{
	background-color: #EDE6DD;
	color: #33231F;
}
#dogRow2{
	background-color: #EDE6DD;
	color: #33231F;
}
#dogRow3{
	background-color: #A3AF84;
	color: #EDE6DD;
}
#bragsContainer {
	background-color: #EDE6DD;
	height: 350px;
	text-align: center;
}
#brags {
		background-color: #33231F;
		color: #EDE6DD;
		font-size:.9em;
		margin-left:16%;
		padding: 15px;
		margin-top: 30px;
        margin-bottom: 30px;
}
#brags h1 {
	font-size: 2em;
	padding: 5px;
}
#brags ul {
	 list-style-type: disc;
	 line-height: 2em;
	 text-align: left;
	 margin-left: 8%;
}
#litterAnnouncement {
	background-color: #33231F;
	color: #EDE6DD;
	display:block;
	max-width:100%;
}
#litterAnnouncement h1{
	background-color: #33231F;
	color: #EDE6DD;
	margin-top:0;
	padding-top:20px;
}
#litterAnnouncement img{
	width:60%;
	margin-left:20%;
	margin-right:20%;
}
#litterAnnouncement p{
	font-size:1.5em;
	text-align:center;
	padding: 0 10%;
}
footer {
    position:relative;
	display:flex;
	text-align:center;
	align-items:center;
	overflow:auto;
	width:100%;
	background-color: #33231F;
	color: #EDE6DD;

	font-size:.85em;
	line-height: 1.5em;
	padding:10px;

	border-top: 2px rgba(237,230, 221, .3);
	border-style: solid;
	z-index:50;
}
#footerleft{
	font-size: .9em;
	align-items: baseline;
}
#footercenter {
	font-size:.8em;
	line-height:1.3em;
}
footer a {
	list-style: none;
	text-decoration: none;
	color: #EDE6DD;
}
footer a:active {
	color: #A3AF84;
}
footer a:hover {
	color: #A3AF84;
}

/* weight - Use a value from 300 to 900 */
.rubik-light {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.rubik-regular {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.rubik-medium {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.rubik-semibold {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.rubik-bold {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.rubik-extrabold {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.rubik-black {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.lato-thin {
  font-family: "Lato", serif;
  font-weight: 100;
  font-style: normal;
}
.lato-light {
  font-family: "Lato", serif;
  font-weight: 300;
  font-style: normal;
}
.lato-regular {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: normal;
}
.lato-bold {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: normal;
}
.lato-black {
  font-family: "Lato", serif;
  font-weight: 900;
  font-style: normal;
}
.lato-thin-italic {
  font-family: "Lato", serif;
  font-weight: 100;
  font-style: italic;
}
.lato-light-italic {
  font-family: "Lato", serif;
  font-weight: 300;
  font-style: italic;
}
.lato-regular-italic {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: italic;
}
.lato-bold-italic {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: italic;
}
.lato-black-italic {
  font-family: "Lato", serif;
  font-weight: 900;
  font-style: italic;
}
/* <weight>: Use a value from 400 to 900 */
.cinzel-regular {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variant: small-caps;
}
.cinzel-decorative-regular {
  font-family: "Cinzel Decorative", serif;
  font-weight: 400;
  font-style: normal;
}

/* media queries */
@media only screen and (min-width: 0px) and (max-width: 599px) {
	.arrows{
		top: 275px;
	}
	.litterArrows{
		top: 200px;
	}
	.dogArrows{
		margin-top: 100px;
	}
	#navLogo{
		visibility: hidden;
	}
	#about p {
		font-size:.8em;
	}
	.homeslider{
		height: 400px;
	}
	.dogCategory, .dogCarousel {
		flex-direction:column;
		height:525px;
	}
	.dogCategory img, .dogslider img{
		object-fit: cover;
		width: 100%;
		height:300px;
		padding:20px;
	}
	.dogCategory #dogDesc{
		width:100%;
		text-align:center;
		align-content:center;
	}
	.dogCategory #dogDesc p{
		font-size:0.9em;
	}
	.dogCategory #dogDesc span{
		font-size:0.75em;
	}
	.homeCategory a{
		flex-direction:column;
		height:375px;
	}
	.homeCategory a img{
		object-fit: cover;
		width: 100%;
		height:300px;
		padding:20px;
	}
	.homeCategory a #dogDesc{
		width:100%;
		text-align:center;
		align-content:center;
		padding: 0 6%;
	}
	.homeCategory a p{
			font-size:2.5em;
	}
	#imagebefore {
		display:flex;
	}
	.dogslider img{
		display:flex;
	}
	#imageafter {
		display:none;
	}
	.descbefore {
		display:none;
	}
	.descafter {
		display:flex;
		flex-direction:column;
		align-content:center;
		margin-top:0;
	}
    #bragsContainer {
	height: 550px;
    }
	footer {
		font-size:.6em;
	}
}

@media only screen and (min-width: 600px) and (max-width: 959px) {
	#about p {
		font-size:.9em;
	}
	.dogCategory img, .dogslider img{
			height: 400px;
	}
	.dogCategory #dogDesc{
		padding: 0 5%;
	}
	.dogCategory p{
		font-size:1.75em;
	}
	.dogCategory span{
		font-size:.85em;	
	}
    #bragsContainer {
	    height: 450px;
    }
	footer {
		font-size:.75em;
	}
}
@media only screen and (min-width: 960px) and (max-width: 1279px) {
	.dogCategory img, .dogslider img{
			height: 400px;
		}
	.dogCategory p{
			font-size:2.1em;
	}
	.dogCategory span{
		font-size:1em;
	}
    #bragsContainer {
	    height: 425px;
    }
}
@media only screen and (min-width: 1280px) and (max-width: 1430px) {
	#about p {
		font-size:1.1em;
	}
	nav a img{
		margin-top:-.4vw;
	}
	.dogCategory, .dogslider img{
		height:380px;
	}
    #bragsContainer {
	    height: 400px;
    }
}
@media only screen and (min-width:1431px) and (max-width: 1519px) {
	#about p {
		font-size:1.1em;
	}
	nav a img{
		margin-top:-.5vw;
	}
    #bragsContainer {
	    height: 375px;
    }
}
@media only screen and (min-width:1431px) and (min-width:1520px){
	#about p {
		font-size:1.1em;
	}
	nav a img{
		margin-top:-.6vw;
	}
	.dogCategory p{
		font-size:2.2em;
	}
	.dogCategory span{
		font-size:1em;
		line-height:1em;
	}
    #bragsContainer {
	    height: 350px;
    }
}