@media only screen and (min-width : 375px) { /* iPhone */
	.landingContentContainer h1 {font-size: 40px;}
	.browseContainerElement {
		width: 340px;
		padding-bottom: 10px;
	}
	.fotogalleryContainer .carouselBackground2 {
		border-left-width: 20px;
    	border-right-width: 20px;
	}
	.menuBarButton {
		padding: 9px 16px;
	}
	.selectDates {max-width: 110px;}
	.standardSearch.menuSearch.mobileMenuOnly.activeMenuSearch input {
		width: 300px;
	}
}

@media only screen and (min-width : 420px) {
	.conversationHistory .message:not(:empty) {padding: 5px 5px 5px 15px;}
	.horizontalRadios {display: inline;}
	.horizontalRadios label {width:auto; margin-right: 5px;}
}

@media only screen and (min-width : 470px) {
	.landingNewsInnerContainer > div { padding: 46px; }
	.factsContainer > div { width: 46%; }
	.fullProfile .profileDetails {width: calc(100% - 160px);}
	.recordInfo {width: 160px; text-align: right; margin-top: 0;}
	.selectAnimal .recordInfo {margin-bottom: 30px; }
	.litterInfo {width: 28%; margin: 0;}
	.litterOffspring {width: 65%; margin-left: 1%;}
	.sectionMenu .sectionHeader {margin: 10px; padding: 5px 10px;}
    .searchResultButtons, .searchResultsInfo {  width: auto; text-align: left; }
	.photoThumbWrapper  {
		border-left: 1px solid #999999;
		position: relative;
		top: 0;
		right: auto;
		width: auto;
		max-height: none;
		overflow: auto;
	}
	.activePhotoContainer { width: 330px; }
	.setPrimaryImage {height: 45px;}
	.activePhoto {height: 200px;}
	.photoUploadButton.uploadStart {display: none;}
	.photoUploadButton.uploadEnd {display: flex;}
	.standardSearch.menuSearch.mobileMenuOnly.activeMenuSearch input {
		width: 400px;
	}
}

@media only screen and (min-width : 600px) {
	.formField, .textDescription {width: 64%;}
	.formRow, .textRow {
		display: flex;
	  }
	label, .textLabel {width: 34%;}
    .siteStatisticsTables > div {margin: 0 5px;}
    .pieChart {height: 400px;}
	.issueMessageText {width: 45%;}
	.issueMessageMeta {width: 20%;}
	.issueMessageStatus {width: 13%; text-align: right;}
	.captionInnerContainer {font-size: 14px;}
	#sponsor h2 {font-size: 32px;}
	.sectionMenu .sectionHeader {margin: 10px 0 5px 20px; padding: 10px 15px;}
	.fourtabItems .tabHeaderName {display: block; font-size: 10px;}
	.standardDialog.smallSizeDialog {border-radius: 10px;}
	.landingMobilePicture { background-image: url("../images/breed_photo_mobile.jpg?version=1.0.0"); }
	.mateMatcherDialog .standardDialog .mateMatcherProfileDetails .mateMatcherMetaDataContainer {
		display: flex;
	}
	.factsContainer .factsContainerButton {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.factsContainerButton .button { width: 40%; }
	.factsContainerButton .button.alternative { width: 55%; }
}

@media only screen and (min-width : 700px) {
	.profileInfo {width: 80%;}
	.mapChart {height: 500px;}
	.fourtabItems .tabHeaderName {font-size: 12px;}
	.fivetabItems .tabHeaderName {display: block; font-size: 10px;}
    .payment {margin: 0;}
}


@media only screen and (min-width: 768px) {
	.mainArea { min-height: 400px; }
	.wave, .waveAlt {
		height: calc(100vw / 63);
		min-height: 15px;
		max-height: 24px;
	}
	.waveAlt {top: calc((100vw / 64) * -1);}
	.formContainer label, .formContainer .textLabel {text-align: right;}
	.landingContentContainer h1 {
		/* https://css-tricks.com/snippets/css/fluid-typography/ */
		font-size: calc(40px + (100 - 40) * ((100vw - 768px) / (1680 - 768)));
	}
	.landingContentContainer h2, .landingNumbers {
		font-size: calc(14px + (28 - 14) * ((100vw - 768px) / (1680 - 768)));
	}
	.animalCount {
		font-size: calc(32px + (64 - 32) * ((100vw - 768px) / (1680 - 768)));
	}
	.searchFilterContainer {
		height: calc(100vh - 60px);
		overflow: hidden;
	}
    .searchFilters {
		padding-top: 10px;
		position: relative;
		top: auto;
		overflow-y: auto;
		height: calc(100% - 80px);
	}
	.generalInfo, .profileInfo {display: inline-block;}
	.profileInfo {width: 260px; margin-right: 10px;}
	.generalInfo {width: calc(100% - 295px);}
	.filterButton, .searchResultLink {display: none;}
	.splitSection.indexPage {
  		display: flex;
		align-content: stretch;
		justify-content: space-between;
        flex-wrap: wrap;
		flex-direction: row;
	}
	.searchBoxContainer {
		position: sticky;
        height: 100%;
        z-index: 0;
        top: 60px;
        left: 0;
		padding-right:10px;
		width: 358px;
	}

	.resultContainer {
  		display: flex;
		flex-direction: column;
		width: calc(100% - 370px);
		padding-left: 10px;
		border-left: 1px solid var(--lightgrey);
		min-height: 370px;
	}
	.sectionBackground.leftRounded {
		border-radius: 10px 10px 0 270px;
	}
	.sponsorMemberContainer .member {
		animation: bounce-in-fwd 1.1s both;
	}
	.memberContainer, .sponsorContainer {
		display: flex;
		justify-content: space-between;
	}

	.memberContainer {
		margin-top: 60px;
	}
	.buttonDetail {width: 23%;}
	.sponsorDetail {width: 30%;}
	.memberDetail {width: 33%;}
	.memberDetail {
		padding-bottom: 16px;
	}
	.memberDetail:nth-child(2) {
		border-left: 1px solid var(--grey);
		border-right: 1px solid var(--grey);
		border-top: 0;
		border-bottom: 0;
	}
	.smallProfile.flexBoxItem { width: calc((100% - 10px) / 2);}
	#new_healthinfo_dialog .contentLeft, #select_titles_dialog .contentLeft {width: 49%; top: 85px; left: 10px; position: absolute; overflow-x: hidden; overflow-y: auto; height: calc(100% - 100px);}
	#new_healthinfo_dialog .contentRight, #select_titles_dialog .contentRight {width: 45%; top: 92px; right: 10px; position: absolute; overflow-x: hidden; overflow-y: auto; height: calc(100% - 160px);}
	#new_healthinfo_dialog .dialogSearch {width: 49%; top: 85px;}
	#new_healthinfo_dialog .contentLeft {padding-top: 0; top:120px; height: calc(100% - 135px);}
	#new_healthinfo_dialog .contentRight {top: 114px; height: calc(100% - 180px);}
	.contentSeparator {
		border-right: 1px solid var(--maincolor);
		bottom: 15px;
		left: 51%;
		position: absolute;
		top: 85px;
	}
	.scrollToTop {bottom: 20px; right: 20px;}
	.scrollToTop:hover {bottom: 25px;}
    .lineChart {width: 768px;}
	.standardDialog.midSizeDialog, .standardDialog.largeSizeDialog {border-radius: 10px;}
    .standardDialog.largeSizeDialog {max-width: 75%;}
	/* Message */
	.messageThreadContainer {
		 display: flex;
		 align-items: flex-start;
		 justify-content: space-between;
		 position: relative;
	 }
	.messageThreadList, .messageThread {
		overflow-y: hidden;
		position: relative;
        height: calc(100vh - 90px);
	}
	.messageThreadListContainer {
		height: calc(100% - 48px);
		overflow-y: auto;
	}
    .messageContainer {margin: 5px 0;}
	.newMessage {position: absolute;}
	.messageThreadListFooter {
		height: 48px;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
	}
	.messageThreadList {  width: 35%;  }
	.messageThread {
        width: 65%;
        border-left: 1px solid var(--lightgrey);
    }
	.messageThreadHeader .cancelButton {  display: none;  }
	.messageThreadText {  min-width: 300px;  }
	.tabHeader {letter-spacing: 1px;}

	.mateMatcherSearchContainer {
		flex-wrap: nowrap;
	}
	.mateMatcherProfileDetails {
		max-width: 600px;
		margin: 0 auto;
	}
}

@media only screen and (min-width: 980px) {
	.landingNewsInnerContainer > div { width: 48%;}
	.contentLeft, .contentRight {  width: 49%;  }
	.contentLeft {		margin-right: 1%;  }
	.fourtabItems .tabHeaderName {font-size: 16px;}
	.fivetabItems .tabHeaderName {font-size: 12px;}
	.fullProfile.flexBoxItem { width: calc((100% - 10px) / 2);}
	.matingProfile.flexBoxItem { width: calc((100% - 10px) / 2);}
	.fourtabItems .tabHeaderName, .fivetabItems .tabHeaderName {display: inline-block;}
	.sponsorMemberContainer {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.animalOwnerSelection {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.animalOwnerSelection .link {
		width: 175px;
		flex-shrink: 0;
	}
	.votingContainer .contentLeft, .votingContainer .contentRight {
    	width: 47%;
		margin-right: 0;
	}
}

/* Standard tablet landscape mode */
@media only screen and (min-width: 1024px) {
    .generalInfo {width: calc(100% - 310px); margin-right: 10px;}
	.generalInfo.maxHalfWidth {width: calc((100% - 310px)/2);}
    .smallProfile.flexBoxItem { width: calc((100% - 20px) / 3);}
	.smallProfile.flexBoxItem.litterProfile { width: calc((100% - 10px) / 2);}
	.sponsorMemberContainer .sponsorDetail {width: 80%;}
	.litterMatingPartner .profileDetails {
		flex-wrap: nowrap;
	}
	.tbaClaim {
		width: 40%;
		align-items: flex-start;}
	.landingFactContainer {text-align: left;}
	.factsContainer { width: 55%; }
	.splitSection {
  		display: flex;
		align-content: stretch;
		justify-content: space-between;
		flex-direction: row-reverse;
        flex-wrap: wrap;
		align-items: flex-start;
	}
	.splitSectionLeft  {  width: calc(100% - 370px)  }
	.splitSectionRight {
		width: 360px;
  		display: flex;
		flex-direction: column;
	}
	.tabletOnly { display: none !important; }
	.resultProfile .secondaryProfileData {  display: block; max-width: 20%; }
	.resultProfile .primaryProfileData {  width: auto; max-width: 80%;  }
	.tabHeader {letter-spacing: 2px;}
	.fivetabItems .tabHeader {letter-spacing: 1px;}
	.feragenLanding .splitSectionLeft {
		padding: 40px 80px 40px 10px;
	}
	.feragenLanding h1 {
		color: var(--maincolor);
		position: relative;
		text-align: left;
		padding: 0;
	}
	.feragenImageContainer {
		height: 720px;
	}
	.feragenResultOverview {
		left: -85px;
		max-width: initial;
	}
}

/* switch to normal menu  */
@media only screen and (min-width: 1124px) {
	.mobileMenuOnly {display: none !important;}
	nav { height: auto; }
	.headerMeta {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.stickyHeader:not(.landingPage) .headerTopContainer,
	.stickyHeader:not(.landingPage) header {
		position: fixed;
		transition: all 300ms ease;
	}
	.stickyHeader .headerTopContainer { top: 0; }
	.stickyHeader header { top: 44px; }
	.stickyHeader:not(.landingPage) .main {  top: 160px; padding-bottom: 160px; }
	.stickyHeader:not(.landingPage) .noSubmenu .main {	top: 124px; padding-bottom: 124px; }
	.searchFilters {
		height: 100%;
	}
	.stickyHeader .searchFilters {
		height: calc(100% - 140px);
	}
	.landingPage nav {
		box-shadow: none;
	}
	.searchBoxContainer {
		top: 0;
	}
	.stickyHeader .searchBoxContainer {
		top: 122px;
	}
	.stickyHeader .searchBoxContainer.hasSubmenu {
		top: 158px;
	}
	div.newMessageIndicator {  top: 0; left: 28px;  }
	.menuMessageIndicator .newMessageIndicator { position: absolute; top: 4px; right: 0; }
	#primary_menu {display: block;}
	.menuBarButtons, .menuBarButton {display: none;}
	.headerTopContainer {height: 44px;}
	.standardSearch {
		position: relative;
		display: inline-block;
		z-index: 90;
		width: 220px;
		height: 42px;
	}
	.landingPage .standardSearch {width: 200px;}
	.mobileMenuButton {display: none;}
	.openMenu #mobile_menu {display: none !important;}
	.openMenu #container {
		transform: translate3d(0px, 0px, 0px);
	}
	.landingPage .tbaLogoContainer { width: 230px; }
	.landingPage .tbaLogo { font-size: 50px;}
	.landingPage .breedLogo span:first-child {
		font-size: 40px;
		top: 2px;
		left: 7px;
	}
	.landingPage .breedLogo span:nth-child(2) {
		font-size: 48px;
		bottom: 2px;
		left: 1px;
	}
	.landingContentContainer {
		flex-direction: row;
	}
	.landingContentContainer h1 {white-space: nowrap;}
	.landingMobilePicture {display: none;}
	.landingPictureContainer, .landingTextContainer { width: 50%; }
	.landingPictureContainer {
		display: block;
		padding-right: 40px;
	}
	.landingPicture {
		background-image: url("../images/breed_photo_ellipse.png?version=1.0.0");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center left;
		width: 100%;
		height: calc(45vw / 3 * 2);
		min-height: 342px;
		max-height: 486px;
	}
	.webp.webpalpha .landingPicture, .webp.webp-alpha .landingPicture {
		background-image: url("../images/breed_photo_ellipse.webp?version=1.0.0");
	}
	.landingContentContainer h1 span {
		display: flex;
		justify-content: flex-end;
		line-height: 1.1;
	}
	.landingTextContainer { right: -10px; }
	.landingTextContainer * { text-align: right; }
	.landingNumbers { padding-right: 70px; }

	footer a {
		width: auto;
	}
	table.fixedHeader th {
		top: 0;
	}
	.highlightInnerContainer {
		justify-content: space-between;
	}
	.highlightMessage { width: auto; }
	.fullProfile.resultProfile .profilePhoto, .fullProfile.resultProfile .pictureContainer {
   	 width: 100px;
	}
	.fivetabItems .tabHeaderName {  font-size: 14px; }
	.messageThreadList, .messageThread {
        height: calc(100vh - 266px);
	}
	.dialogContainerActive.mateMatcherDialog {
		background-color: rgba(0,0,0,0.7);
	}
	.mateMatcherDialog .standardDialog {
		max-height: 80vh;
		border-radius: 8px;
		min-height: 450px;
		display: flex;
    	flex-wrap: wrap;
		background-color: var(--primary-background-color);
		position: relative;
	}
	.mateMatcherDialog .standardDialog .profilePhotoContainer {
		width: 270px;
		margin: 50px 0 0 0;
		padding: 10px;
	}
	.mateMatcherDialog .standardDialog .mateMatcherProfileDetails {
		width: calc(100% - 270px);
		max-width: 100%;
		margin: 0;
	}
	.detailNavigation.prev {left: -50px; }
	.detailNavigation.next {right: -50px;}
	.detailNavigation span {
		background-color: transparent;
		color: var(--alternate-text-color);
	}
	.mateMatcherDialog .standardDialog .dialogClose {
		color: var(--alternate-text-color);
		font-size: 20px;
		position: fixed;
		width: auto;
	}
	.mateMatcherArea .searchResults {
		justify-content: space-between;
	}
}

@media only screen and (min-width: 1560px) {
	.waveAlt {top: -24px;}
}


@media only screen and (min-width: 1680px) {
	.landingContentContainer h1 {font-size: 100px;}
	.landingContentContainer h2, .landingNumbers {font-size: 28px;}
	.animalCount {font-size: 64px;}
}

@media only screen and (max-width: 767px) {
    .noBreak input.clearSelection, .noBreak div.clearSelection, .noBreak textarea.clearSelection, .noBreak select.clearSelection {width: 88%;}
	.buildInfo {display: none;}
	.generalInfo .formRow, .generalInfo .textRow {
		justify-content: flex-start;
	}
	.generalInfo.maxHalfWidth {text-align: center;}
	#new_healthinfo_dialog .dialogContent {
		position: relative;
		top: 40px;
		margin-bottom: 50px;
		height: calc(100% - 170px);
	}
	.messageThreadVisible.messageThreadList, .messageThreadInvisible.messageThread {
		display: none;
	}

    .messageThread {
        position: absolute;
        bottom: 0;
        top: 0;
        z-index: 1;
        left: 0;
        right: 0;
        background-color: var(--primary-background-color);
        overflow-y: scroll;
    }
	.minTablet {display:none !important;}
	/*Hide Footer on mobile if search is active */
	.searchIndexPage footer {display: none !important;}
	.resultContainer { display: none; }
    .searchBoxMobileHidden .searchBoxContainer {
		display: none;
	}
	.searchBoxMobileHidden .resultContainer {
		display: block;
	}
	.searchIndexPage .scrollToTop {
		display: none !important;
	}
}

@media only screen and (max-width: 979px) {
	.formRow.buttonRight {
		justify-content: flex-end;
	}
	.animalContainer {
		line-height: 240%;
	}
	.descendantConnectionBottom {
		height: 16px;
	}
	.animalContainer.revpedLastContainer > div.revpedNodeHeader .descendantConnectionTop {
		height: 17px;
	}

}

@media only screen and (max-width: 1000px) {
    .contentRight span.error, .contentLeft span.error {  display: block;  }
}

@media only screen and (max-width: 1023px) {
	.minDesktop { display: none !important; }
}

@media only screen and (max-width: 1123px) {
  	.openMenu {
    	position: fixed;
		width: 100%;
 	 }
	header {
    	top: 0;
    	position: sticky;
	}
	.standardSearch.menuSearch.mobileMenuOnly input {
    	transition: width 300ms linear;
		position: absolute;
		right: 8px;
    	top: 5px;
		height: 48px;
		border-radius: 3px;
		background-color: transparent;
		width: 1px;
	}

	.standardSearch.menuSearch.mobileMenuOnly.activeMenuSearch input {
		padding-left: 5px;
		background-color: #f3f3f3;
	}

	.activeMenuSearch .menuBarButton {
		transition: none;
		visibility: hidden;
	}
	.minFullMenu {display: none !important;}
	.mateMatcherMetaDataContainer button {
		margin: 0 auto;
	}
}

@media only print {
	#cookie_info {display: none !important;}
	.menuBarButtons {display: none !important;}
	header, .headerTopContainer { display: none !important;}
	footer { display: none !important;}
	.main { padding: 0; margin: 0;}
	.topContent { display: none !important;}
	.splitSectionRight { display: none !important;}
	.scrollToTop { display: none !important;}
    .printPedigree {position: absolute; top: 0; margin-top: -20px;}
	.printPedigree h1 { text-align: center; }
    .printPedigree a {color: var(--primary-text-color);}
	.printPedigree table td {  border: 1px solid #33333d;}
    .printPedigree .registeredNameLink, .printPedigree .ancestorHeader {font-size: 12px;}
    .printPedigree .ancestorColor, .printPedigree .ancestorBirthInfo {font-size: 10px;}
    .printPedigree td span[class^="icon-"], .printPedigree td span[class*=" icon-"] {font-size: 12px;}
    .printPedigree .pedigreeInfo, .printPedigree .pedigreeDisclaimer {
        display: block;
    }
    .printPedigree .contentSectionWrapper {padding: 0;}
	.printPedigree .pedigreeFilter {display: none;}
	.contentSectionWrapper.healthInfo {display: none;}
}
@media only screen {
	.termsofuse.info {display: none;}
}