:root {
	--linkcolor: #ff5e00;
	--linkcolorhover: #6bc9ac;
	--basefontsize: clamp(1.2rem, 1.057rem + 0.381vw, 1.4rem);
	--backorange: #ff432a;
	--backyellow: #ffad2a;
	--borderradius: 5px;
}

body {
  font-family: "Gabarito", sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: var(--basefontsize);
}

h1, h2 {
	text-transform: uppercase;
	font-weight: 900;
	font-family: 'Sofia Sans Condensed', sans-serif;
	line-height: 100%;
}

h1 {
	font-size: 3.7rem;
	color: var(--backorange);
}

h2 {
	font-size: 2.7rem;
}

a {
	transition: all .12s ease-in;
	text-decoration: none;
}

header {
	background-color: var(--backorange); 
	padding: 3rem 0;
	margin-bottom: 2rem;
}

.logo {
	width: 200px;
	height: auto;
}

a {
	color: var(--linkcolor);
}

button.button, button, input.button, a.button {
	background-color: var(--linkcolor);
	color: #fff;
	padding: .5rem 1.2rem;
	border: 0;
	font-weight: old;
	font-size: var(--basefontsize);
	&:hover, &:focus {
		background-color: var(--linkcolorhover) !important;
		color: #fff !important;
	}
	&.is-active {
		background-color: #ed2c6a !important;
	}
}

.frontbox {
	display: block;
	background: var(--backorange) no-repeat center top;
	background-size: auto 280px;
	padding: calc(280px + .79rem) 1.5rem 1.5rem;
	color: #fff;
	text-decoration: none;
	margin-bottom: 1.5rem;
	border-radius: var(--borderradius);
	border: 0;
	a {
		display: inline-block;
		font-weight: bold;
		font-size: 1rem;
		background: rgba(0, 0, 0, .9);
		color: #fff;
		border-radius: var(--borderradius);
		padding: .4rem 1rem;
		&:hover {
			background: #fff;
			color: #000;
		}
	}
}

.frontbox h2 {
	margin-bottom: 0;
	color: #000;
}

.frontbox1 {
	background-image: url(../images/photos/dog2.webp);
}

.frontbox2 {
	background-image: url(../images/photos/vet1.webp);
}

.frontbox3 {
	background-image: url(../images/photos/horse1.webp);
}

.frontbox4 {
	background-image: url(../images/photos/cats1.webp);
}



.br {
	border-radius: var(--borderradius);
}

#nmb-map {
	border-radius: var(--borderradius);
}

.videodog1 {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
	margin-bottom: 2rem;
}








.signformcolumn {
	background: var(--backyellow) url(../images/photos/dog1.webp) no-repeat top center;
	background-size: auto 190px;
	padding: calc(1.2rem + 190px) 1.7rem 1.2rem;
	border-radius: var(--borderradius);
}

input[type=text], input[type=email], input[type=number] {
	border: 0;
	outline: 0;
	box-shadow: none;
	padding: .8rem 1.1rem;
	border-radius: var(--borderradius);
}

.nmb-support-form input {
	border: 1px solid #ccc !important;
}

.nmb-support-type {
  display: inline-flex;
  overflow: hidden;
  margin: 1rem 0;
}

.nmb-support-type button {
  margin: 0 .5rem 0 ;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
}

.nmb-support-type button:last-child {
  border-right: 0;
}

.nmb-support-type button.is-active {
  background: rgba(0,0,0,.08);
  font-weight: 700;
  border: 0;
  color: #fff;
}

.nmb-support-wrap button:not(.is-active) {
	background: rgba(0, 0, 0, .03);
	border: 1px solid rgba(0, 0, 0, .1);
	color: #000;
}

.nmb-support-wrap {
	margin: 0 auto;
	background-color: rgba(0, 0, 0, .01);
}

.nmb-support-card input {
	border: 1px solid rgba(0, 0, 0, .3) !important;
	margin-left: 1rem;
}

.fpvid {
	border-radius: var(--borderradius);
	margin-bottom: 1.5rem;
}

.messages, .alert {
	border: 0;
	background: var(--backyellow) url(../images/icons/big-star-black.webp) no-repeat center left 19px;
	background-size: 61px auto;
	box-shadow: none;
	color: #fff;
	padding: 2rem 2.5rem 2rem 101px;
	margin: 0 0 2rem;
	border-radius: var(--borderradius);
	font-weight: bold;
	a {
		color: rgba(0, 0, 0, .5);
		text-decoration: none;
	}
}

.tabs-wrapper {
	border: 0;
	ul {
		border: 0;
	}
	a {
		color: #fff;
		border: 0 !important;
		background: var(--backyellow);
		margin-right: .5rem;
		border-radius: var(--borderradius);
		font-size: 1.1rem;
		padding: .5rem .9rem;
		&:hover {
			color: #fff;
			background: var(--backorange);
		}
		&.is-active {
			background: var(--backorange) !important;
			color: #fff !important;
		}
	}
}



footer {
	margin-top: 2rem;
	background-color: var(--backorange); 
}

footer > * {
	font-size: .9rem;
	color: #fff;
}

.footerlogo {
	width: 150px;
	margin-bottom: 1rem;
	filter: brightness(0) invert(100);
	height: auto;
}

.socials {
	padding: 0;
	margin: 0;
	list-style: none;
}

.socials li {
	display: inline-block;
}

.socials a {
	width: 71px;
	height: 71px;
	display: inline-block;
	background: transparent no-repeat center;
	background-size: contain;
	margin-right: 1rem;
	&:hover {
		transform: scale(1.1);
	}
}

.socials .instagram {
	background-image: url(../images/icons/insta-w.webp);
}

.socials .facebook {
	background-image: url(../images/icons/fb-w.webp);
}

footer .nav-link {
	padding: 0;
}