/* Rhodesian Ridgeback Rescue, Inc. | www.ridgebackrescue.org */
/* Common CSS */

/* Import Google Web Fonts */
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DArchitects%2BDaughter%26family%3DGolos%2BText%3Awght%40400%3B500%3B700%26family%3DHind%3Awght%40400%3B700%26family%3DNothing%2BYou%2BCould%2BDo%26family%3DRock%2BSalt%26family%3DMaterial%2BSymbols%2BOutlined%3Aopsz%2Cwght%2CFILL%2CGRAD%4020..48%2C100..700%2C0..1%2C-50..200%26display%3Dswap");

/* Import Eric Meyer CSS Reset 2023-05 | https://meyerweb.com/eric/tools/css/reset/ */
@import url("/?originalUrl=https%3A%2F%2Fresources.ridgebackrescue.org%2Fcss%2Freset.css");

/* Tells browser that only light styles are provided */
:root {
  color-scheme: only light;
}

html, body {
	color: #222222;
	background-color: #FFFAFA; /* snow */
	font-family: "Golos Text", Helvetica, Arial, sans-serif;
	font-size: 100%;
	font-weight: 500;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* SETUP Use of Google Material Icons: BEGIN */
/* 1. ADD this class to element.
/* 2. ADD material icon name inside element | List of Google Material Icon Names at: https://fonts.google.com/icons?icon.style=Outlined&icon.platform=web */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 0,
  'opsz' 48
}
/* SETUP Use of Google Material Icons: END */

a:link,
a:visited {
	color: #2C661A;
	text-decoration: underline;
}
header nav a:link,
header nav a:visited,
footer a:link,
footer a:visited {
	text-decoration: none;
}
a:hover,
a:active {
	color: #79A951;
	text-decoration: underline;
}
header nav a:hover,
header nav a:active,
footer a:hover,
footer a:active {
	text-decoration: none;
}
a:active {
	color: #FFFAFA; /* snow */
	background-color: #006400; /* darkgreen */
}

section,
.box {
	box-sizing: border-box;
}

header {
	background-color: #FFFFFF;
	width: 100%;
	padding: 0;
	margin-top: 2.8rem;
	box-sizing: border-box;
}
header .headerbox {
	width: 100%;
	padding: 0;
	display: flex;
	flex-direction: row;
}
header .headingbox {
	width: 100%;
	padding:  1rem;
	display: flex;
	flex-direction: column;
}

/* TOP NAV BAR in Header: BEGIN */
.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #D56C33;
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0; /* Was 0.5rem 1.5rem */
}
.hamburger {
    display: block;
    cursor: pointer;
    padding: 0.5rem 1rem;
}
/* Hamburger to Work with Javascript: BEGIN */
.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #FFFAFA; /* snow */
}
/* Hamburger to Work with Javascript: END */
/* TOP NAV BAR in Header: END */
/* TOP NAV BAR Basic Element Styles: BEGIN */
.nav-menu {
    position: fixed;
    left: -100%;
    top: 3rem; /* ORIG 5rem; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-color: #D56C33; /* orange */
    width: 100%;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
    left: 0;
}
ol.nav-menu,
ul.nav-menu {
  list-style-image: none;
  margin-left: 0;
}
.nav-item {
    text-align: left; /* ADDED to left align */
    width: 100%; /* ADDED to left align */
    margin: 1rem 0; /* ORIG 2.5rem 0; */
    padding-left: 1.5rem; /* ADDED to left align */
}
.nav-link,
.nav-link-text {
    font-size: 1.1rem; /* ORIG 1.6rem; */
    font-weight: 500;
    color: #FFFAFA !important; /* snow */
}
.nav-logo {
    font-size: 1.6rem; /* ORIG 2.1rem; */
    font-weight: 500;
    color: #FFFAFA !important; /* snow */
    padding: 0.5rem 1rem;
}
.nav-link:active,
.nav-link:hover,
.nav-logo:active,
.nav-logo:hover {
    color: #003348 !important; /* snow */
}
/* TOP NAV BAR Basic Element Styles: END */

div.maincontainer,
div.articlecontainer,
div.asidecontainer {
	max-width: 40rem;
}

article {
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

main {
	background-color: #F9EBE9;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}
main.frame {
	padding: 1rem 0;
}
main aside {
	background-color: #FFFAFA; /* snow */
	font-size: 1.25rem;
	line-height: 1.6;
	font-family: 'Architects Daughter', cursive;
	width: 100%;
	max-width: 100%;
	padding: 1rem;
	box-sizing: border-box;
}
main aside dl {
	margin: 0;
}
main aside dl dt {
	color: #003348;
	font-weight: 700;
}
main aside dd {
	margin: 0;
}
aside {
	background-color: #F9EBE9;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

footer {
	background-color: #FFFFFF;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
footer .footerbox {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
footer .menubox {
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
footer .footerLegalbox {
	text-align: center;
	box-sizing: border-box;
}
footer section#menu,
footer section#support {
	margin-bottom: 1rem;
}
footer div.footerbox div.menubox,
footer .footerLegalbox div.under450 {
	font-size: 0.875rem;
}
main div.allVolunteerbox, 
footer .footerLegalbox div.allVolunteerbox {
	color: #003348;
	font-size: 1.5rem;
	font-family: 'Architects Daughter', cursive;
	font-weight: 400;
}
main div.allVolunteerbox, 
footer .footerLegalbox div.allVolunteerbox, 
footer .footerLegalbox div.rescuingSincebox, 
footer .footerLegalbox div.copyrightbox {
	margin: 0 0 1rem 0;
}
footer .footerLegalbox div.under450 {
	display: flex;
	flex-direction: column;
}

.logobox {
	padding: 1rem;
}

h1 {
	color: #561217;
	font-size: 1.8rem;
	font-family: 'Rock Salt', cursive;
	font-weight: 400;
	border-bottom: thin solid #481800;
}
h2 {
	color: #D56C33;
	font-size: 1.6rem;
	font-family: revert;
	font-weight: 700;
}
h3 {
	color: #561217;
	font-size: 1.5rem;
	font-family: revert;
	font-weight: 700;
}
h4,
details summary {
	color: #D56C33;
	font-size: 1.4rem;
	font-family: revert;
	font-weight: 700;
}
h5,
details summary.subSummary {
	color: #561217;
	font-size: 1.2rem;
	font-family: revert;
	font-weight: 700;
}
h6,
.asideextra {
	color: #003348;
	font-size: 1rem;
	font-family: revert;
	font-weight: 700;
}

p {
	margin: 1rem 0;
}

ul {
  list-style-image: url("/?originalUrl=https%3A%2F%2Fresources.ridgebackrescue.org%2Fimages%2Ficons%2Fpets_black_18dp.svg");
  margin-left: 2rem;
}

ol {
	list-style-type: decimal;
	margin-left: 2rem;
}

address {
	margin: 1rem 0 1rem 1.5rem;	
}
dl {
	 margin: 0.5rem 0;
	 box-sizing: border-box;
}
dd {
	margin: 0.25rem 0 0.25rem 1rem;
}
b,
.highlight {
	color: #003348;
	font-size: inherit;
	font-family: inherit;
	font-weight: 700;
}

i {
	font-style: italic;
}

abbr {
	text-decoration: none;
}

#donationLegal {
	font-size: 0.9rem;
}

.notice {
	color: #000000;
	font-family: 'Architects Daughter', cursive;
	font-size: 1.33rem;
	font-weight: 400;
	line-height: 1;
	border: medium solid #D56C33;
	border-radius: 2px;
	padding: 0.5rem 0.75rem;
	margin: 1rem 0;
	box-sizing: border-box;
}

.instruction {
	color: #536685;
	font-size: 0.9rem;
	font-family: revert;
	font-weight: 500;
	font-style: italic;
	box-sizing: border-box;
}

.lombardic {
	color: #000000;
	font-family: 'Architects Daughter', cursive;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	text-transform: capitalize;
}

.required {
	color: #CD5C5C; /* indianred */
	font-size: 1.2rem;
	line-height: 1rem;
	font-weight: 700;
}

.nowrap {
	white-space: nowrap;
}

.text,
.notice,
textarea,
p {
	width: 100%;
	max-width: 40rem;
}

main aside,
.question,
.text,
.textquestion,
.telquestion,
.numberquestion,
.notice,
fieldset,
textarea,
details,
summary,
p {
	margin: 0 0.5rem 0.5rem 0;
	clear: both;
}

fieldset {
	color: #222222;
	font-family: revert;
	max-width: 40rem;
}

fieldset.questionGroup legend {
	color: #222222;
	font-size: 1.1rem;
	font-weight: 700;
}

fieldset.questionSubGroup legend {
	color: #D56C33;
	font-size: 1rem;
	font-weight: 700;
}

fieldset.question legend {
	color: #222222;
	font-size: 1rem;
	font-weight: 500;
}

details summary {
	cursor: pointer;
}

div.textquestion label,
div.telquestion label,
div.emailquestion label,
div.numberquestion label,
input[type="text"],
input[type="tel"],
input[type="email"],
/* input[type="number"], */
textarea {
	display: block;
}

.subQuestion {
	margin-left: 0.5rem;
	padding-left: 1.25rem;
	border-left: medium double #222222;
}

.dogMugsbox {
	background-color: #D56C33;
	width: 100%;
	height: 70px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: left;
	overflow: hidden;
}
.dogMugsbox img {
	width: 70px;
	height: 70px;
	border: none;
	margin: 0;
	padding: 0;
	object-fit: fill;
}

.under450 {
	max-width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: left;
}
.over600,
.over750,
.over900,
.over1050,
.over1200,
.over1500,
.over1800 {
	display: none;
}

/* ADDED FROM The 51 Index: BEGIN */
label.question,
.label {
	color: revert !important;
	font-size: 1.2rem !important;
	font-family: revert !important;
	font-weight: 700 !important;
}
label.radio {
color: #222222;
font-size: 100%;
font-weight: 500;
line-height: 1.6;
}
label.largefontinput {
	margin: 0 0.5rem 0 0;	
}

input[type="number"] {
	width: 10rem;
}

button {
	color: #FFFFFF;
	background-color: #2C661A;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	outline: none;
	padding: 0.25rem 0.5rem;
	margin: 1rem 1rem 1rem 0;
	border: none;
	border-radius: 15px;
	box-shadow: 0 0.3rem #999999;
}
button:hover {
	background-color: #79A951;
}
button:active {
	background-color: #79A951;
	box-shadow: 0 3px #666;
	transform: translateY(2px);
}

figure img {
	width: 100%;
}
figcaption {
	font-style: italic;
	text-align: center;
	margin-bottom: 1rem ;
}

.mainsubcontainerlevel01 {
		display: flex;
		flex-direction: column;
}
.mainsubcontainerlevel02 {
	display: flex;
	flex-direction: column;
}
.mainsubcontainerlevel01 figure {
	display: none;
}

.titleextra  {
	color: #003348;
	font-size: 1.2rem;
	font-family: revert;
	font-weight: 700;
	font-style: italic;
	margin: 4rem 0 0;
}

#navQuotes, .navQuotes {
    color: #003348;
    background-color: #FFFAFA;
    font-family: 'Architects Daughter', cursive;
    font-size: 1.25rem;
    text-align: left;
    margin: 0.5rem 0;
    padding: 0.5rem;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}
/* ADDED FROM The 51 Index: END */

/* Re-order contents sections for mobile vs desktop */
@media screen and (min-width: 600px) {
/* Change footer layout */
	footer div.footerbox div.menubox,
	footer .footerLegalbox div.under450 {
		font-size: 100%;
	}
	main div.allVolunteerbox, 
	footer .footerLegalbox div.allVolunteerbox {
		font-size: 2.5rem;
	}
	footer .footerLegalbox div.under450 {
		display: none;
	}
	footer .footerLegalbox div.over600 {
		display: flex;
		flex-direction: column;
	}
	footer section#menu,
	footer section#support {
		margin-bottom: 0;
	}
/* Add three additional dog mug photos */
	.over600 {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}

	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.8rem;
	}
	h3 {
		font-size: 1.6rem;
	}
	h4 {
		font-size: 1.4rem;
	}
	h5,
	details summary.subSummary {
		font-size: 1.3rem;
	}
	h6 {
		font-size: 1.2rem;
	}

	footer .footerbox {
		flex-direction: row;
		justify-content: space-around;
	}
	footer .menubox {
		flex-direction: inherit;
		justify-content: space-around;
	}
}

@media screen and (min-width: 750px) {
/* Add three additional dog mug photos */
	.over750 {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}
}

/* TOP NAV BAR Responsive for Desktop Styles: BEGIN */
@media only screen and (min-width: 768px) {
    header {
    	margin-top: 0;
    }

    .navbar {
		position: relative;
		top: auto;
        padding: 0;
    }
    .nav-menu {
        position: static; /* ADDED for Desktop flip */
        left: auto; /* ADDED for Desktop flip */
        top: auto; /* ADDED for Desktop flip */
        flex-direction: row; /* ADDED for Desktop flip */
        background-color: #D56C33; /* orange */
        width: auto;
        text-align: left;
        padding: 0.5rem 1rem;
        transition: 0s;
        box-shadow: none;
    }
    .nav-menu.active {
        left: auto;
    }
    .nav-item {
        margin: 0 0 0 3rem;
        width: auto;
        padding-left: 0;
    }
    .hamburger {
    	display: none;
    }
/* Hamburger Hide from Work with Javascript: BEGIN */
    .hamburger.active .bar:nth-child(2) {
        display: none;
    }
    .hamburger.active .bar:nth-child(1) {
        display: none;
    }
    .hamburger.active .bar:nth-child(3) {
        display: none;
    }
/* Hamburger Hide from Work with Javascript: END */
}
/* TOP NAV BAR Responsive for Desktop Styles: END */

@media screen and (min-width: 900px) {
/* Float questions for horizontal display on wide screens */
	.horizontal {
		float: left;
		clear: none;
	}

/* Add three additional dog mug photos */
	.over900 {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}
}

@media screen and (min-width: 1050px) {
/* Change header nav layout */
	header nav .menu {
		display: flex;
		flex-direction: row;
	}

	div.contentWrapper {
		display: flex;
		flex-direction: row;	
	}
	div.contentWrapper aside {
		order: 1;
		background-color: #FFFAFA;
	}
	div.contentWrapper main {
		order: 2;
	}
	div.contentWrapper article {
		order: 3;
	}

	aside {
		max-width: 15rem;
	}

	main {
		max-width: 100%;
	}

	article {
		max-width: 25rem;
	}
/* Add three additional dog mug photos */
	.over1050 {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}

	.mainsubcontainerlevel01 figure {
		display: none;
	}
}

@media screen and (min-width: 1200px) {
/* Add three additional dog mug photos */
	.over1200 {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}

/* ADDED FROM The 51 Index, Display Main section dog photo above 1199px */
	.mainsubcontainerlevel01 {
		display: flex;
		flex-direction: row;
	}
	.mainsubcontainerlevel01 figure {
		display: block;
		width: 100%;
		max-width: 250px;
		margin: 0 1rem 1rem 0;
	}
}

@media screen and (min-width: 1500px) {
/* Add three additional dog mug photos */
	.over1500 {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}
}

@media screen and (min-width: 1800px) {
/* Add three additional dog mug photos */
	.over1800 {
		max-width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
	}
}