@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

html {
    font-family: "Inter", Arial, sans-serif;
    font-size: 15px;
	font-weight: 400;
    color: #392E27;
	/*font-size: 1.5vw;*/
}
body {
	background-color: #ECECE6;
	margin: 0px;
	padding: 0px;
}
a {
	color: #002E5C;
	text-decoration: underline;
}
p, h1, h2, h3 {
	line-height: 150%;
}
p {
	margin-bottom: 25px;
}
h1, h2, h3 {
    font-weight: 500;
    font-family: "Lora", Helvetica, serif;
}
nav {
	background-color: #002E5C;
}
nav a {
	color: #FFFFFF;
	text-decoration: none;
    /* text-transform: uppercase; */
    font-weight: 600;
	padding-right: 30px;
	white-space: nowrap;
	line-height: 150%;
}

nav>div { display: table-cell; vertical-align: middle; padding: 15px; }
#nav-logo>img { height: 5vw; }
#nav-logo-mobile>img { height: 15vw; }
#nav-links { text-align: left; width: 50%; }
#nav-signup { text-align: right; width: 25%; }

#mobile-menu {
	background-color: #7793BB;
	padding: 10px;
	display: none;
}
#mobile-menu ul { margin: 0; padding: 0; }
#mobile-menu li { margin: 10px; list-style: none; }
#mobile-menu a {
	color: #FFFFFF;
	text-decoration: none;
    /*text-transform: uppercase;*/
    font-weight: 600;
	padding-right: 30px;
	white-space: nowrap;
	line-height: 150%;
}

#homepage-introduction-text { width: 65%; }
#homepage-introduction, #homepage-supported-by, footer { padding: 20px 20px 40px; }
#homepage-group-registration-text h2, #homepage-group-registration-text p, #homepage-febarq-ad-text h3, #homepage-febarq-ad-text p { margin-left: 20px; margin-right: 20px; }
#homepage-introduction {
	background-image: url("/cbarq/images/shiba-inu-crevko.png");
	background-position: right;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: #faf2e6;
	height: auto;
}
#homepage-group-registration { background-color: #ffffff; }
#homepage-supported-by { background-color: #faf2e6; text-align: center; }
#homepage-febarq-ad { color: #FFFFFF; background-color: #9D644D; }

nav, .two-by-two-block { display: table; width: 100%; }
nav:before, nav:after, .two-by-two-block:before, .two-by-two-block:after { content: ""; }
nav:after, .two-by-two-block:after { clear: both; }
.two-by-two-block-element { width: 50%; display: table-cell; }
.two-by-two-block-text { padding: 20px 0px 40px 0px; }

#homepage-group-registration-image {
	background-image: url("/cbarq/images/home-page-guide-dog.jpg");
	background-position: left;
	background-size: cover;
	-webkit-transform: scaleX(-1); /* flip horizontally */
	transform: scaleX(-1); /* flip horizontally */
	min-height: 200px;
}
#homepage-febarq-ad-image {
	background-image: url("/cbarq/images/home-page-febarq-ad.jpg");
	background-position: left;
	background-size: cover;
	min-height: 230px;
}
footer {
	background-color: #faf2e6;
	text-align: center;
}
span.SponsorLogo {
	margin: 0 20px;
	display: inline-block;
}

/* button styles */
.button {
    border: 0;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    color: #fff!important;
    cursor: pointer!important;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 30px;
	white-space: nowrap;
}
.buttonGreen { background: #456e3e; color: #fff !important; }
.buttonGreen:hover { background: #2b4426; }
.buttonGray { background: #bababa; color: #fff !important; }
.buttonGray:hover { background: #9a9a9a; }
.buttonGold { background: #FFE26F; color: #000 !important; }
.buttonGold:hover { background: #E8800C; }
.buttonGreenNarrow, .buttonGrayNarrow, .buttonGoldNarrow { width: 100px; }
a.buttonGreen, a.buttonGray, a.buttonGold { line-height: 38px; text-decoration: none; }
a.buttonForIcons, span.buttonForIcons { line-height: 30px; padding: 4px 4px 4px 0px; }
span.buttonForIcons { cursor: not-allowed !important; } /* use this class for inactive or disabled icons */

.buttonGreen>i, .buttonGray>i, .buttonGold>i {	/* material icons within buttons */
    vertical-align: text-bottom;
    padding-left: 4px;
}

/* custom styles for Material Icons (https://google.github.io/material-design-icons/) */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* viewport-specific styles */
@media screen and (min-width: 1350px) {
	nav, #homepage-introduction { font-size: 125%; }
}
@media screen and (min-width: 1024px) {
	#homepage-introduction { height: 25vw; }
}
@media screen and (min-width: 620px) and (max-width: 1049px) {
	nav { font-size: 90%; }
	#nav-links { text-align: left; width: 40%; }
	#nav-signup { text-align: right; width: 30%; }
}
@media screen and (min-width: 620px) and (max-width: 744px) {
	#homepage-introduction { background-image: none; }
	#homepage-introduction-text { width: 100%; }
	#homepage-group-registration-image { background-position: center; }
	.button {display: block;}
}
@media screen and (min-width: 620px) {
	#nav-menu, #nav-logo-mobile { display: none; visibility: hidden; }
}
@media screen and (max-width: 619px) {
	html { font-size: 80%; }
	.two-by-two-block { display: block; }
	.two-by-two-block-element { width: 100%; float: none; display: block; }
	span.SponsorLogo { margin: 20px 0; display: block; }
	.cfdebug, #nav-logo, #nav-links, #homepage-febarq-ad { display: none; visibility: hidden; }
	#nav-menu { text-align: left; width: 40%; }
	#nav-logo-mobile { text-align: center; width: 20%; }
	#nav-signup { width: 40%; }
	#nav-signup-login { display: none; visibility: hidden; }
	#homepage-introduction { background-image: none; }
	#homepage-introduction-text { width: 100%; }
	#homepage-introduction, #homepage-group-registration, #homepage-supported-by { text-align: center; }
}