/*XXXXXXXXXXXXXXXXXXXXXXXXX
					BASIC
XXXXXXXXXXXXXXXXXXXXXXXXX*/

html,
body {
	height: 100%;
	background-color: #e7e5d4;
	font-size: 10px;
}

body {
	color: #444a5d;
	font-size: 1.6rem;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300; /* light */
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1.8rem;
	font-family: 'Cardo', serif;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
}

h1 {
	font-size: 4.8rem;
}

h2 {
	font-size: 3.2rem; /* clamp min of .section h1 */
}

h3 {
	padding: .5em 1em;
	border: 1px solid #444a5d;
	font-size: 2.4rem;
}

a,
a:hover,
a:focus {
	color: #444a5d;
}

ul/*:not(.nav):not(.dropdown-menu)*/ {
	padding-left: 1em;
	list-style-type: square;
	list-style-image: none;
}

/* do not affect ol.carousel-indicators li */
ul/*:not(.nav):not(.dropdown-menu)*/ > li {
	margin-bottom: 0;
}

/* used with .radio-mock-container > input and other input, which should be hidden and should not occupy any space */
.removed-but-functional {
	position: absolute; /* remove from document flow */
	opacity: 0; /* hide input, but keep it functional (eg. do not use display: none;) */
	pointer-events: none;
}

/* used with .pagination > li > .first-link and similar links */
.hidden-but-functional {
	opacity: 0; /* hide input, but keep it functional (eg. do not use display: none;) */
	pointer-events: none;
}

/* do not affect nav > .container-fluid */
body > .container,
body > .container-fluid {
	margin-bottom: 60px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
		   HERO & SECTION
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.hero {
	padding-right: 0;
	padding-left: 0;
}

.section:not(:first-child) {
	margin-top: 30px;
	padding-top: 60px;
	border-top: 1px solid #444a5d;
}

h1 {
	margin: 1em 0 .25em;
	font-size: 4vw;
}

.section > div:first-child > h1:first-child {
	margin-top: 0; /* compensate for padding-top of .section */
}

.hero h1 {
	white-space: nowrap;
}

p,
ul {
	margin-bottom: 1.5em;
	font-size: 1.5vw;
	font-family: 'Cardo', serif;
	font-weight: normal;
	font-style: normal;
}

.hero p,
.hero ul,
.section > div > p,
.section > div > ul {
	padding-right: 5vw;
}

.section > div > p,
.section > div > ul {
	margin-left: 4.5em;
}

.logo {
	width: 20vw;
	height: auto;
	max-width: 250px;
	margin-left: -15px; /* compensate for padding-left of 15px of parent */
	
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.btn-arrow {
	width: 10vw; /* w of logo * .5 */
	height: auto;
	max-width: 125px; /* max-w of logo * .5 */
	margin-top: 30px;
	margin-bottom: 30px;
	opacity: .9; /* opacity of .carousel-control */
}

/* center horizontally */
.btn-center {
	position: relative; /* do not take out of flow */
	left: 50%;
	
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

/* special case */
.hero-compact .hero-text .btn-arrow {
	position: absolute;
	top: 50%;
	left: 10vw; /* ((100vw - w of logo) * .5 - w of arrow) * .5 */
	margin-top: 0;
	margin-left: 15px; /* compensate for padding-left of 15px of parent */
	
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

.logo > a,
.btn-arrow > a {
	display: block;
}

.logo-lang {
	margin-top: 5px;
	font-size: inherit !important; /* override .hero p */
}

.logo-lang a,
.logo-lang a:hover,
.logo-lang a:focus {
	color: inherit;
}

.logo-content {
	width: 55vw; /* 50vw + w of logo * .5 - padding-right of 5vw */
}

.watermark {
	position: absolute;
	right: 30px;
	bottom: 17px; /* align with bottom of .carousel-indicators */
	width: 10vw; /* w of logo * .5 */
	height: auto;
	max-width: 125px !important; /* max-w of logo * .5, override bootstrap.css */
}

@media (orientation: portrait) {
	
	h1 {
		font-size: 6vw; /* 4vw * 1.5 */
	}
	
	p,
	ul {
		font-size: 2.25vw; /* 1.5vw * 1.5 */
	}
	
	.section > div > p,
	.section > div > ul {
		margin-left: 2.25em; /* 4.5em * .5 */
	}
	
	.logo {
		width: 30vw; /* 20vw * 1.5 */
	}
	
	.btn-arrow {
		width: 15vw; /* w of logo * .5 */
	}
	
	.logo-content {
		width: 60vw; /* 50vw + w of logo * .5 - padding-right of 5vw */
	}
	
	.watermark {
		width: 15vw; /* w of logo * .5 */
	}
}

/*
measure breakpoints/font-size of h1 for specific font-size of p, ul (which use different vw values for landscape/portrait, therefore two breakpoints to measure)

p, ul	h1			landscape	portrait
12px	32px		799px		533px
14px	37.33px		933px		622px
15px	40px		1000px		666px
16px	42.66px		1066px		711px
21px	56px		1400px		933px
*/

/* clamp min */
@media (orientation: landscape) and (max-width: 799px), (orientation: portrait) and (max-width: 533px) {
	
	/* do not affect .hero h1 */
	/* affect h1 outside of .section */
	.container h1 {
		font-size: 32px;
	}
}

/* clamp min */
@media (orientation: landscape) and (max-width: 1066px), (orientation: portrait) and (max-width: 711px) {
	
	/* do not affect .hero p, .hero ul */
	/* affect p, ul outside of .section */
	.container p,
	.container ul {
		font-size: 16px;
	}
}

/* clamp max */
@media (orientation: landscape) and (min-width: 1400px), (orientation: portrait) and (min-width: 933px) {
	
	/* do not affect .hero h1 */
	/* affect h1 outside of .section */
	.container h1 {
		font-size: 56px;
	}
	
	/* do not affect .hero p, .hero ul */
	/* affect p, ul outside of .section */
	.container p,
	.container ul {
		font-size: 21px;
	}
}

/* clamp min */
@media (orientation: portrait) and (max-width: 399px) {
	
	.hero-compact h1 {
		font-size: 24px;
	}
}

/* clamp min */
@media (orientation: portrait) and (max-width: 533px) {
	
	.hero-compact p,
	.hero-compact ul {
		font-size: 12px;
	}
}

.hero .carousel-control .glyphicon-chevron-left,
.hero .carousel-control .glyphicon-chevron-right,
.hero .carousel-control .icon-next,
.hero .carousel-control .icon-prev,
.hero .carousel-control > .arrow {
	top: 10vw; /* h of logo * .5 */
}

/* logo does not grow any larger */
@media (min-width: 1250px) {
	
	.hero .carousel-control .glyphicon-chevron-left,
	.hero .carousel-control .glyphicon-chevron-right,
	.hero .carousel-control .icon-next,
	.hero .carousel-control .icon-prev,
	.hero .carousel-control > .arrow {
		top: 125px;
	}
}

.hero .carousel-inner {
	height: 100vh;
}

.hero .item,
.hero .item > .row,
.hero .item > .row > div {
	height: 100%;
}

/* center background-image in the left column */
.hero .item > .row > div:first-child {
	padding-top: 5vh; /* influences background-image */
	padding-right: 5vw; /* influences background-image */
	background-position: center bottom;
	background-size: contain;
	background-repeat: no-repeat;
	background-origin: content-box;
	background-clip: content-box;
	background-attachment: scroll;
}

.hero-couple > .row > div:first-child {
	padding-right: 0; /* influences background-image */
}

.hero-male > .row > div:first-child { background-image: url(../img/hero_male.jpg); }
.hero-female > .row > div:first-child { background-image: url(../img/hero_female.jpg); }
.hero-couple > .row > div:first-child { background-image: url(../img/hero_couple.jpg); }

.hero-male {
	color: #e7e5d4;
	background-color: #cca1a6;
}

.hero-female,
.hero-text {
	color: #e7e5d4;
	background-color: #444a5d;
}

.hero-couple {
	/*color: #444a5d;*/
	background-color: #e7e5d4;
}

@media (orientation: portrait) {
	
	.hero .item > .row > div:first-child {
		background-image: none;
	}
	
	/* crop background-image on the left side */
	.hero-male,
	.hero-female,
	.hero-couple {
		background-position: left -120px bottom; /* -120px from left, 0px from bottom */
		background-size: auto 90%;
		background-repeat: no-repeat;
		background-origin: content-box;
		background-clip: content-box;
		background-attachment: scroll;
	}
	
	.hero-male { background-image: url(../img/hero_male.jpg); }
	.hero-female { background-image: url(../img/hero_female.jpg); }
	.hero-couple { background-image: url(../img/hero_couple.jpg); }
}

@media (orientation: portrait) and (max-width: 767px) { .hero-expanded { display: none; } }
@media (orientation: landscape), (min-width: 768px) { .hero-compact { display: none; } }

/*XXXXXXXXXXXXXXXXXXXXXXXXX
					 TREE
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.crest {
	position: relative;
	margin-top: 30px;
	text-align: center;
}

.crest > a {
	display: block;
}

/* fix: make clickable on safari mobile */
.crest > a:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.crest object {
	pointer-events: none;
}

.tree-details {
	margin: 10px auto 0;
	padding-top: 10px;
	border-top: 1px solid #444a5d;
}

@media (max-width: 320px) {
	
	.crest object,
	.tree-details {
		max-width: 157.5px;
	}
}

@media (min-width: 321px) and (max-width: 375px) {
	
	.crest object,
	.tree-details {
		max-width: 212.5px;
	}
}

@media (min-width: 376px) and (max-width: 767px) {
	
	.crest object,
	.tree-details {
		max-width: 262.5px;
	}
}

.ico {
	float: right;
	clear: right;
	margin-bottom: 12px;
}

.ico > img {
	width: auto;
	height: 24px; /* align with bottom of p */
}

/* media query of clamp max */
@media (orientation: landscape) and (min-width: 1400px), (orientation: portrait) and (min-width: 933px) {
	
	.ico > img {
		height: 36px; /* align with bottom of p */
	}
}

.tree-ph,
.tree-ph a,
.tree-ph a:hover,
.tree-ph a:focus {
	color: #cca1a6;
}

.tree-ph h3,
.tree-ph .tree-details {
	border-color: #cca1a6;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
				  IMPRINT
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.imprint p {
	font-size: inherit;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
					 FORM
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.contact-box {
	padding-top: 15px;
	color: #e7e5d4;
	background-color: #959798;
}

/* sm, md, lg */
@media (min-width: 768px) {
	
	.contact-box {
		padding: 30px 30px 0;
	}
}

.contact-box a,
.contact-box a:hover,
.contact-box a:focus {
	color: #e7e5d4;
}

.company p {
	font-size: inherit;
}

.company .img-responsive {
	max-width: 60px;
	margin-top: 3px; /* align with top of p */
	margin-bottom: 60px;
}

textarea {
	resize: vertical;
}

.form-control,
.form-control:focus,
.has-error .form-control,
.has-error .form-control:focus,
.has-success .form-control,
.has-success .form-control:focus,
.has-warning .form-control,
.has-warning .form-control:focus,
.btn {
	height: auto;
	color: #444a5d;
	background-color: #e7e5d4;
	border-width: 2px;
	border-color: transparent;
	border-radius: 0;
	box-shadow: none;
	font-size: 16px;
}

.btn {
	color: #e7e5d4;
	background-color: #cca1a6;
	text-transform: uppercase;
}

.btn:hover,
.btn.focus,
.btn:focus {
	color: #e7e5d4;
}

.btn.active,
.btn:active {
	box-shadow: none;
}

.has-error .form-control,
.has-error .form-control:focus {
	border-bottom-color: #a94442;
}

.form-control::-moz-placeholder {
	color: #444a5d;
}

/* used with .form-group */
.smaller-gap-below {
	margin-bottom: 5px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
			   RADIO MOCK
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.radio-mock-container {
	float: left;
	width: 50%;
	margin: 5px 0;
}

.radio-mock-container.inline {
	width: auto;
}

.radio-mock-container.inline + .radio-mock-container {
	margin-left: 30px;
}

.radio-mock-container.na {
	opacity: .25;
	pointer-events: none;
}

/* TODO: obsolete, use .removed-but-functional instead (delete this?) */
.radio-mock-container > input {
	position: absolute; /* remove from document flow */
	opacity: 0; /* hide input, but keep it functional (eg. do not use display: none;) */
	pointer-events: none;
}

.radio-mock {
	float: left;
	margin: 0 10px 0 0;
}

.radio-outer,
.radio-inner {
	/*border-radius: 50%;*/
	border-radius: 0;
	cursor: pointer;
}

.radio-outer {
	position: relative;
	width: 24px;
	height: 24px;
	background-color: #e7e5d4;
	/*border: 1px solid #ccc;*/
	border: 0;
}

.radio-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: 0;
	background-color: #cca1a6;
	opacity: 0;
	
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/*
.radio-mock:hover .radio-inner {
	opacity: 1;
}
*/
.radio-mock.active .radio-inner {
	opacity: 1;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
				  SPINNER
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.spinner {
	float: right;
	width: 70px;
	margin: 15px auto 0;
	text-align: center;
}

.spinner > div {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: #cca1a6;
	border-radius: 100%;
	
	-webkit-animation: pulse 1.4s infinite ease-in-out both;
	animation: pulse 1.4s infinite ease-in-out both;
}

.spinner-1 {
	-webkit-animation-delay: -.32s;
	animation-delay: -.32s;
}

.spinner-2 {
	-webkit-animation-delay: -.16s;
	animation-delay: -.16s;
}

@-webkit-keyframes pulse {
	
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	}
	
	40% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes pulse {
	
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	}
	
	40% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
				 CAROUSEL
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.carousel-inner > .item > .img-responsive {
	width: 100%; /* enlarge beyond actual image size */
}

.carousel-control.right,
.carousel-control.left {
	background-image: none;
	opacity: .9; /* opacity of :hover */
}

.carousel-control > .arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	width: 2vw; /* w of logo * .5 * .2 */
	height: auto;
	max-width: 25px; /* max-w of logo * .5 * .2 */
	
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.carousel-indicators {
	bottom: 0;
}

.carousel-indicators > li {
	background-color: #fff;
	background-color: rgba(255, 255, 255, .5);
	border: 0;
	border-radius: 0;
}

/* make active similar to inactive */
.carousel-indicators > .active {
	width: 10px;
	height: 10px;
	margin: 1px;
}

.carousel-thumbs {
	position: relative;
	width: 100%;
	margin-top: 30px;
	padding: 0 15%; /* allow for carousel-control */
	overflow: hidden; /* hack to prevent collapse caused by floated children */
}

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

.thumbs > li {
	float: left;
	width: 25%;
	margin-right: 0;
	cursor: pointer;
}

.thumbs > li:not(:last-child) {
	margin-right: 0; /* no gaps */
}

.thumbs > .active {
	cursor: auto;
	opacity: .25;
}

@media (min-width: 768px) {
	
	#gallery-th-01 > .carousel-control,
	#gallery-th-01 > .carousel-indicators {
		display: none; /* replace by thumbs */
	}
	
	.carousel-thumbs > .carousel-control {
		display: inherit;
	}
	
	.carousel-thumbs .glyphicon-chevron-left,
	.carousel-thumbs .glyphicon-chevron-right {
		margin-top: -15px;
	}
}