@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

body {
	font-family: 'Varela Round', sans-serif;
	font-size: 1.2rem;
	scroll-behavior: smooth;
	color: #563a00;
	margin: 15px;
}

.container-lg {
	max-width: 1360px;
	border-radius: 30px;
}

.vh-80 {
	min-height: 80vh;
}

/*********
MISC
**********/
hr {
	background-color: #c7da24;
	border: 2px solid #c7da24;
	max-width: 100px;
	margin-left: 0;
	opacity: 1;
}

hr.orange {
	background-color: #F46419;
	border: 2px solid #F46419;
	max-width: 100px;
	margin-left: 0;
	opacity: 1;
}

.shadow-lg {
	box-shadow: 0 1rem 3rem rgba(0,0,0,.3) !important;
}
/*********
COLORS
**********/
.bg-pattern {
	background-color: #dde0b5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
}
	
.bg-pattern-01 {
	background-color: #f0d0c6!important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
	
.bg-pattern-02 {
	background-color: #D2DD60;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-primary { /*orange*/
	background: #f46419!important;
}
	.text-primary { /*orange*/
		color: #f46419!important;
	}

.bg-secondary { /*yellowgreen*/
	background: #b6c419!important;
}

	.text-secondary { /*yellowgreen*/
		color: #b6c419!important;
	}

.bg-tertiary { /*pink*/
	background: #f0d0c6!important;
}

	.text-tertiary { /*pink*/
		color: #f0d0c6!important;
	}

.bg-dark { /*dark brown*/
	background: #563a00!important;
}

	.text-dark { /*dark brown*/
		color: #563a00!important;
	}

.bg-light { /*white*/
	background: #FCF7C5!important;
}

.shadow-lg {
	box-shadow: 0 1rem 3rem rgba(51,43,30,0.5) !important
}

/*********
FONTS
**********/
h1 {
	font-family: 'Varela Round', sans-serif;
	font-weight: 700!important;
	margin: 0 2px;
}

	h1.display-1 {
		line-height: 5.5rem;
	}

h2, .h2 {
	font-family: 'Varela Round', sans-serif;
	font-weight: 700!important;
	margin: 0 2px;
}

h3, .h3 {
	font-family: 'Varela Round', serif;
	margin: 0 2px;
}

h4, .h4 {
	font-family: 'Varela Round', serif;
}

h5, .h5 {
	font-family: 'Varela Round', sans-serif;
	font-size: 1rem;
}

h6, .h6, cite {
	font-family: 'Varela Round', sans-serif;
	text-transform: uppercase!important;
	font-size: 0.75rem;
	letter-spacing: 1.5px;
	font-weight: 800;
}


blockquote {
	font-size: 1.2rem;
}

blockquote cite {
	display: block;
	margin: 10px 0;
	font-style: normal;
}

mark {
	background:;
}

.lead {
	font-size: 1.6rem;
	font-family: 'Varela Round', serif;
}

@media screen and (max-width: 450px) {
	h1, h1.display-1 {
		font-size: 3.3em;
		line-height: 1em;
	}
}

.vh-80 {
	min-height: 90vh;
}

/*********
ANIMATIONS
**********/
/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #000 radial-gradient(circle, transparent 1%, #000 1%) center/15000%;
}
.ripple:active {
  background-color: #000;
  background-size: 100%;
  transition: background 0s;
}

/*floating effect*/
.float {   
    animation: float 2s ease-in-out infinite;
} 
  
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.float-two {   
    animation: floatslow 2s ease-in-out infinite;
} 
  
@keyframes floatslow {
	0% {
		transform: translatey(-20px);
	}
	50% {
		transform: translatey(-0px);
	}
	100% {
		transform: translatey(-20px);
	}
}

/* flip and rotate around*/
.rotate {   
    animation: rotate 3s ease-in-out infinite;
} 
  
@keyframes rotate {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}

/* zoom in and out */
.zoom {   
    animation: zoom 3s ease-in-out infinite;
} 
  
@keyframes zoom {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
	}
}

/*used for arrow on homepage*/
.bounce {
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-15px);
	}
	60% {
		transform: translateY(-5px);
	}
}
/*********
LINKS, BUTTONS, FORMS
**********/

.btn {
	background-position: center;
	transition: background 0.8s;
	display: inline-block;
	transition: ease-in-out 0.3s;
	padding: 0.8rem 1.8rem;
	font-size: 1.05rem;
	font-weight: 600;
	border: 0!important;
}

	.btn svg {
		max-height: 20px;
		transition: 0.3s;
	}

	.btn:hover svg {
		margin-left: 10px;
		border: 0;
	}

.btn-primary {
	background: #f46419;
	border-color:#f46419;
	color: #fff;
	transition: 0.3s;
}

	.btn-primary:hover {
		background: #f46419;
	}
	
	.btn-primary:focus, .btn-primary:active {
		
	}

.btn-secondary {
	background:#9EC4D0;
	border-color: #9EC4D0;
	color: #444;
	transition: 0.3s;
}

	.btn-secondary:hover {
		background:#6da8ba;
		border-color: #6da8ba;
		color: #444;
	}
	
	.btn-secondary:focus, .btn-primary:active, .btn-primary:focus {
		background: orange;
	}
	
.btn-tertiary {
	background: #f0d0c6;
	border-color: #f0d0c6;
	color: #fff;
	transition: 0.3s;
}

	.btn-tertiary:hover {
		background: #9e224b;
		border-color: #9e224b;
		color: #fff;
	}
	
.btn-white {
	background: #fff;
	border-color: #fff;
	color: #222;
	transition: 0.3s;
}

.btn-dark {
	background: #563a00;
	border-color: #563a00;
	text-transform: lowercase;
	letter-spacing: 1px;
}

a {
	color: #F26522;
	text-decoration: none;
	border-bottom: 2px dotted #F26522;
	transition: 0.3s;
}

	a:hover {
		color: #F26522;
		border-bottom: 2px dashed #F26522;
	}

/*********
GENERAL
**********/
.rounded-lg {
	border-radius: 50px!important;
}

.rounded-top-lg {
	border-top-left-radius: 30px!important;
	border-top-right-radius: 30px!important;
}

.rounded-bottom-lg {
	border-bottom-left-radius: 30px!important;
	border-bottom-right-radius: 30px!important;
}

/*********
ACCORDIONS
**********/
.accordion button {
	font-size: 0.8em;
	font-weight: bold;
	color: rgba(86, 58, 0, 0.8);
	transition: 0.3s;
}

	.accordion button:active, .accordion-button:not(.collapsed), .accordion button:hover {
		background: none;
		color:#563a00;
	}
	
	.accordion-button:not(.collapsed)::after {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
		transform: rotate(180deg);
	
	}
	
	.accordion-button:focus {
    z-index: 3;
    border-color: rgba(255,255,255,0.5);
        border-right-color: rgba(134, 183, 254, 0);
        border-left-color: rgba(134, 183, 254, 0);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,0);
	}
	
	.accordion-button:hover {
		padding-left: 1.6rem;
	}

/*********
INTERIOR STYLES
**********/

.interior-header {
	padding: 10vh 0;
	background: linear-gradient(to left bottom,#d2dd60 50%,#fff 50%);
	position: relative;
}

.top-logo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 25px auto;
	text-align: center;
}

.rounded-icon {
	border-radius: 100%;
	padding: 25px;
	margin: 20px auto 20px auto;
	height: 120px;
	width: 120px;
	background: #F26522;
	border: 10px solid #F0D0C6;
	display: block;
}

	.rounded-icon svg, .rounded-icon path, .rounded-icon circle {
		fill: #fff;
	}

.dog-sidebar {
	position: relative;
	text-align: center;
}

.dog-sidebar svg {
	position: absolute;
	bottom: 10px;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.carousel-caption{
    position:static!important;
	color: rgb(86, 58, 0);
}

.carousel-indicators {
	margin-bottom: 0.5rem;
}

.carousel-control-prev {
	margin-left: -4rem;
}

.carousel-control-next {
	margin-right: -4rem;
}

.social a {
	border: 0!important;
}

/*********
HOMEPAGE
**********/
.homepage {
	position: relative;
}

.homepage-header {
	background: #fff;
	border-radius: 30px;
	position: relative;
	overflow: hidden;
	position: relative;
}

.homepage-header .sidebar-img {
	background: #f0d0c6 url(../img/dog01.jpg) no-repeat center center;
	background-size: cover;
}