html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
.woocommerce-loop-product__title {
line-height: 1.4;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left !important;
margin: 0 3.8% 2.992em 0 !important;
padding: 0 !important;
position: relative !important;
width: 42.05% !important;
margin-left: 0 !important;
height: 26em;
display: flex;
flex-direction: column !important;
}
.lieferung {
font-size: 15px;
}
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
height: 20em;
}
.related h2 {
margin-top: 1rem;
margin-bottom: 3.5rem;
margin-left: 1.5rem;
text-align: center;
font-size: 1.6rem;
}
.woocommerce-loop-product__title h2 {
padding-top: 0 !important;
}
.warenkorb {
font-size: 1.5rem;
}
.btn-warenkorb {
display: flex;
justify-content: space-between;
}
.btn-warenkorb-detail {
text-align: right;
transform: translate(0px, 140px);
}
.aehnliche_artikeln {
padding: 1rem 0 2rem 0;
}
.woocommerce-bacs-bank-details, .woocommerce-order-details {
padding: 1rem 0;
}
.wc-bacs-bank-details-heading {
margin-top: 0 !important;
margin-left: 2rem;
font-size: 2rem;
}
.wc-bacs-bank-details-account-name {
font-family: "Open Sans", sans-serif;
font-size: 1.1rem;
margin-left: 2.07rem;
margin-bottom: 1rem;
}
.woocommerce-order-details__title {
font-size: 1.5rem !important;
margin-top: 0 !important;
margin-left: 2rem;
}
.woocommerce-column__title {
font-size: 1.5rem !important;
margin-top: 0 !important;
margin-left: 2rem;
margin-bottom: .6rem;
}
.woocommerce-customer-details {
padding: 1rem 0;
}
.order-details-final {
padding: 1rem 0;
}
.order_thank_you_beginning {
margin: -5em 0 3em 0;
}
.shipping-calculator-form {
padding: 3rem 3rem 2rem 3rem;
}
.calc_shipping_country_field {
width: 111%;
transform: translate(-1px, -2px);
}
.orderby-warenkorb {
transform: translate(0px,-75px);
text-align: right;
}
.orderby-shop {
transform: translate(0px, -25px);
}
.orderby_opt {
transform: translate(0px, -29px);
}
@media (max-width: 767px) {
.hero_heading_product {
padding: 13rem 1.5rem 3rem 1.5rem!important;
}
}
.variations .label{
margin: 0;
}
.woocommerce-variation.single_variation{
margin-bottom: 1rem;
}
body.single-product .hero__image, body.single-product .hero__background, body.single-product .hero__scroll{
display: none;
}
body.single-product .hero{
height: 30rem;
}
body.single-product .section--white {
padding: 3rem 0 9rem 0;
}
body.page-id-3415 .section--white{
padding: 4rem 0 9rem 0;
}
body.single-product .woocommerce-message{
margin: .8em 0 2em;
}         body {
margin: 0
}
article, aside, footer, header, nav, section {
display: block
}
h1 {
font-size: 2em;
margin: 0.67em 0
}
figcaption, figure, main {
display: block
}
figure {
margin: 1em 40px
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b, strong {
font-weight: inherit
}
b, strong {
font-weight: bolder
}
code, kbd, samp {
font-family: monospace, monospace;
font-size: 1em
}
dfn {
font-style: italic
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
audio, video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button, input, optgroup, select, textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button, input {
overflow: visible
}
button, select {
text-transform: none
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: 0.35em 0.75em 0.625em
}
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
display: inline-block;
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox], [type=radio] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details, menu {
display: block
}
summary {
display: list-item
}
canvas {
display: inline-block
}
template {
display: none
}
[hidden] {
display: none
} html {
font-family: "Open Sans", sans-serif;
font-size: 100%;
font-weight: 400;
-webkit-font-smoothing: antialiased
}
p {
line-height: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
ol, ul {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
ol li, ul li {
line-height: 1.5rem
}
ol ol, ol ul, ul ol, ul ul {
margin-top: 0;
margin-bottom: 0
}
blockquote {
line-height: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: "Merriweather", serif;
font-weight: 900;
margin-top: 1.5rem;
margin-bottom: 0;
line-height: 1.5rem
}
.h1, h1 {
font-size: 3.999rem;
line-height: 4.5rem;
margin-top: 3rem
}
.h2, h2 {
font-size: 2.666rem;
line-height: 3rem;
margin-top: 3rem;
}
.h3, h3 {
font-size: 1.333rem
}
.h4, h4 {
font-size: 0.6665rem
}
.h5, h5 {
font-size: 0.44433rem
}
.h6, h6 {
font-size: 0.33325rem
}
table {
margin-top: 1.5rem;
border-spacing: 0px;
border-collapse: collapse
}
td, th {
padding: 0;
line-height: 24px
}
code {
vertical-align: bottom
}
.lead {
font-size: 1.333rem
}
.hug {
margin-top: 0
}
.container {
margin: 0 auto;
padding: 0 1.5rem
}
@media (min-width: 768px) {
.container {
max-width: 45rem
}
}
@media (min-width: 768px) {
.container--medium {
max-width: 81rem
}
.container--large {
max-width: 120rem
}
}
@media (min-width: 768px) {
.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: -1.5rem
}
.grid--extra-padding {
margin-left: -6rem
}
.grid--extra-padding > .col {
padding-left: 6rem
}
.grid--2 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--2 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 50%
}
.grid--3 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--3 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 33.33333%
}
.grid--4 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--4 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 25%
}
.grid--5 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--5 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 20%
}
.grid--6 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--6 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 16.66667%
}
.grid--7 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--7 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 14.28571%
}
.grid--8 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--8 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 12.5%
}
.grid--9 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--9 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 11.11111%
}
.grid--10 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--10 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 10%
}
.grid--11 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--11 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 9.09091%
}
.grid--12 {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid--12 .col {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 8.33333%
}
}
@media (min-width: 768px) {
.col {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding-left: 1.5rem
}
.col--1-2 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 50%
}
.col--1-3 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 33.33333%
}
.col--1-4 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 25%
}
.col--1-5 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 20%
}
.col--1-6 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 16.66667%
}
.col--1-7 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 14.28571%
}
.col--1-8 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 12.5%
}
.col--1-9 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 11.11111%
}
.col--1-10 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 10%
}
.col--1-11 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 9.09091%
}
.col--1-12 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 8.33333%
}
.col--2-3 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 66.66667%
}
.col--3-4 {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 75%
}
}
*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after, .clearfix:before {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
.clearfix {
*zoom: 1
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden
}
.disabled {
pointer-events: none;
opacity: 0.5
}
.block-selection {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.vertical-center {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.horizontal-center {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.both-center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.label {
display: block;
margin: 1.5rem 0 0.75rem 0;
padding: 0
}
.label p {
margin: 0
}
.label strong {
color: #F44336
}
.input {
display: block;
margin: 0;
padding: 0.75rem 1.5rem;
padding: calc(0.75rem - 2px) calc(1.5rem);
width: 100%;
font-family: "Open Sans", sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5rem;
text-align: left;
color: #584a4b;
background-color: white;
border: 2px solid #bdb1b2;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 1.5rem;
-webkit-box-shadow: 0 0 0 rgba(88, 74, 75, 0);
box-shadow: 0 0 0 rgba(88, 74, 75, 0)
}
.input::-webkit-input-placeholder {
color: #584a4b
}
.input::-moz-placeholder {
color: #584a4b
}
.input:-moz-placeholder {
color: #584a4b
}
.input:-ms-input-placeholder {
color: #584a4b
}
@media (min-width: 768px) {
.input {
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.input:hover {
background-color: rgba(249, 224, 95, 0.1)
}
}
.input:focus {
border-color: #EBA43C
}
.input--transparent-border {
border-color: white;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3)
}
@media (min-width: 768px) {
.input--transparent-border:hover {
background-color: #f8f6f9
}
}
.input--icon {
padding-left: 2.5rem;
background-size: 1rem 1rem;
background-position: 0.75rem 1rem;
background-position: calc(0.75rem - 2px) calc(1rem - 2px);
background-repeat: no-repeat
}
textarea {
resize: vertical
}
.select, .wpcf7-radio label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
display: block;
margin: 0;
padding: 0
}
.select input, .wpcf7-radio label input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden
}
.select input:checked ~ p:before, .wpcf7-radio label input:checked ~ span:before {
background: rgba(235, 164, 60, 0.1);
border-color: #EBA43C;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3)
}
.select input:checked ~ p:after, .wpcf7-radio label input:checked ~ span:after  {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
}
.select input[type=radio] ~ p:after, .select input[type=radio] ~ p:before, .wpcf7-radio label input[type=radio] ~ span:after, .wpcf7-radio label input[type=radio] ~ span:before {
border-radius: 50%
}
.select p, .wpcf7-radio label span {
position: relative;
margin: 0
}
.select p:before, .wpcf7-radio label span:before {
content: '';
position: absolute;
top: 0.75rem;
width: 1.5rem;
height: 1.5rem;
border: 2px solid #bdb1b2
}
.select p:after, .wpcf7-radio label span:after {
content: '';
position: absolute;
top: 1rem;
width: 1rem;
height: 1rem;
background: #EBA43C;
opacity: 0;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75)
}
@media (max-width: 767px) {
.select p, .wpcf7-radio label span {
padding: 0.75rem 0;
padding-left: 2rem
}
.select p:before, .wpcf7-radio label span:before {
left: 0
}
.select p:after, .wpcf7-radio label span:after {
left: 0.25rem
}
}
@media (min-width: 768px) {
.select p, .wpcf7-radio label span {
padding: 0.75rem 2rem;
padding-left: 2.5rem;
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.select p:before, .wpcf7-radio label span:before {
left: 0.5rem;
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.select p:after, .wpcf7-radio label span:after {
left: 0.75rem;
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.select p:hover, .wpcf7-radio label span:hover {
background: rgba(249, 224, 95, 0.1)
}
.select p:hover:before, .wpcf7-radio label span:hover:before {
border-color: #EBA43C
}
}
.button {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 0.75rem 1.5rem;
padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
width: auto;
font-family: "Open Sans", sans-serif;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5rem;
text-align: center;
text-transform: none;
letter-spacing: normal;
color: #584a4b;
background: #e0dbdb;
border: 2px solid #e0dbdb;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 1.5rem;
-webkit-box-shadow: 0 0 0 rgba(88, 74, 75, 0);
box-shadow: 0 0 0 rgba(88, 74, 75, 0)
}
@media (min-width: 768px) {
.button {
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.button:hover {
background: #ece8e8;
border-color: #ece8e8;
-webkit-box-shadow: 0 0 0 rgba(88, 74, 75, 0);
box-shadow: 0 0 0 rgba(88, 74, 75, 0)
}
}
.button--main {
color: white;
background: #EBA43C;
border-color: #EBA43C;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3)
}
@media (min-width: 768px) {
.button--main:hover {
color: #EBA43C;
border-color: #EBA43C;
background: transparent
}
}
.button--secondary {
color: white;
background: #5899A1;
border-color: #5899A1;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 153, 161, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 153, 161, 0.3)
}
@media (min-width: 768px) {
.button--secondary:hover {
color: #5899A1;
border-color: #5899A1;
background: transparent
}
}
.button--third {
color: white;
background: #ED287A;
border-color: #ED287A;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(237, 40, 122, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(237, 40, 122, 0.3)
}
@media (min-width: 768px) {
.button--third:hover {
color: #ED287A;
border-color: #ED287A;
background: transparent
}
}
.button--full {
display: block;
width: 100%
}
.button-inside-input {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
display: block;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
position: absolute;
top: 0rem;
bottom: 0rem;
right: 0rem;
width: 3rem;
background-color: #bdb1b2;
background-image: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/icons/icon-arrow-right.svg);
background-size: 1.5rem 1.5rem;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 1.5rem;
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.input:placeholder-shown ~ .button-inside-input {
visibility: hidden;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0)
}
.input:focus ~ .button-inside-input {
background-color: #EBA43C
}
.alm-listing {
margin-top: -1.5rem
}
.alm-reveal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -1.5rem
}
@media (min-width: 768px) {
.alm-reveal .card-wrapper {
width: 25%
}
}
.alm-load-more-btn {
margin-top: 3rem
}
.alm-load-more-btn.loading {
pointer-events: none;
background: #bdb1b2;
border-color: #bdb1b2;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3)
}
.alm-load-more-btn.done {
display: none
}
.wpcf7 .screen-reader-response {
display: none
}
.wpcf7-not-valid-tip {
display: block;
line-height: 1.5rem;
color: #F44336
}
.input.wpcf7-not-valid {
border-color: #F44336;
background-color: rgba(244, 67, 54, 0.1)
}
.input.wpcf7-not-valid:focus {
background-color: white
}
.wpcf7-response-output {
display: none;
margin-top: 1.5rem;
font-size: 1.333rem;
line-height: 1.5rem
}
.wpcf7-response-output.wpcf7-mail-sent-ng, .wpcf7-response-output.wpcf7-validation-errors {
color: #F44336
}
.wpcf7-response-output.wpcf7-mail-sent-ok {
color: #4CAF50
}
@-webkit-keyframes donut-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes donut-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.wpcf7-form .ajax-loader {
display: none;
margin-left: 0.75rem;
height: 2.25rem;
width: 2.25rem;
border-radius: 50%;
border: 0.25rem solid rgba(235, 164, 60, 0.1);
border-left-color: #EBA43C;
-webkit-animation: donut-spin 1.2s linear infinite;
animation: donut-spin 1.2s linear infinite
}
.wpcf7-form .ajax-loader.is-active {
display: block
}
.cc-window {
z-index: 9999;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(88, 74, 75, 0.9);
color: white
}
@media (max-width: 767px) {
.cc-window {
padding: 1.5rem
}
}
@media (min-width: 768px) {
.cc-window {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0.75rem 1.5rem
}
}
.cc-window.cc-invisible {
display: none
}
.cc-message {
display: block;
line-height: 1.5rem
}
@media (min-width: 768px) {
.cc-message {
margin-right: 1.5rem
}
}
.cc-btn {
cursor: pointer;
display: inline-block;
padding: 0.75rem 1.5rem;
padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
font-family: "Open Sans", sans-serif;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5rem;
text-align: center;
text-transform: none;
letter-spacing: normal;
color: white;
background: #EBA43C;
border: 2px solid #EBA43C;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
border-radius: 1.5rem;
white-space: nowrap
}
@media (max-width: 767px) {
.cc-btn {
margin-top: 1.5rem
}
}
@media (min-width: 768px) {
.cc-btn {
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.cc-btn:hover {
color: #EBA43C;
border-color: #EBA43C;
background: transparent;
-webkit-box-shadow: 0 0 0 rgba(88, 74, 75, 0);
box-shadow: 0 0 0 rgba(88, 74, 75, 0)
}
}
.chocolat-zoomable.chocolat-zoomed {
cursor: -webkit-zoom-out;
cursor: zoom-out
}
.chocolat-open {
overflow: hidden
}
.chocolat-overlay {
display: none;
z-index: 10000;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.9
}
.chocolat-wrapper {
display: none;
z-index: 16000;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: #fff
}
.chocolat-zoomable .chocolat-img {
cursor: -webkit-zoom-in;
cursor: zoom-in
}
@keyframes donut-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.chocolat-loader {
display: none;
z-index: 11000;
position: absolute;
left: 50%;
top: 50%;
height: 3rem;
width: 3rem;
margin-left: -1.5rem;
margin-top: -1.5rem;
border-radius: 50%;
border: 0.25rem solid rgba(235, 164, 60, 0.1);
border-left-color: #EBA43C;
-webkit-animation: donut-spin 1.2s linear infinite;
animation: donut-spin 1.2s linear infinite
}
.chocolat-content {
z-index: 14000;
position: fixed;
top: 50%;
left: 50%;
height: 0px;
width: 0px;
text-align: left
}
.chocolat-content .chocolat-img {
position: absolute;
width: 100%;
height: 100%
}
.chocolat-wrapper .chocolat-left {
cursor: pointer;
display: none;
z-index: 17000;
position: absolute;
top: 50%;
left: 0;
margin-top: -3rem;
width: 3rem;
height: 6rem;
background: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/icons/icon-arrow-left.svg) 50% 50%/1.5rem 1.5rem no-repeat
}
@media (min-width: 768px) {
.chocolat-wrapper .chocolat-left {
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.chocolat-wrapper .chocolat-left:hover {
background-color: rgba(255, 255, 255, 0.1)
}
}
.chocolat-wrapper .chocolat-right {
cursor: pointer;
display: none;
z-index: 17000;
position: absolute;
top: 50%;
right: 0;
margin-top: -3rem;
width: 3rem;
height: 6rem;
background: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/icons/icon-arrow-right.svg) 50% 50%/1.5rem 1.5rem no-repeat
}
@media (min-width: 768px) {
.chocolat-wrapper .chocolat-right {
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.chocolat-wrapper .chocolat-right:hover {
background-color: rgba(255, 255, 255, 0.1)
}
}
.chocolat-wrapper .chocolat-right.active {
display: block
}
.chocolat-wrapper .chocolat-left.active {
display: block
}
.chocolat-wrapper .chocolat-top {
pointer-events: none;
z-index: 17000;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 3rem;
line-height: 3rem;
overflow: hidden
}
.chocolat-wrapper .chocolat-close {
pointer-events: auto;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
width: 3rem;
height: 3rem;
background: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/icons/icon-close.svg) 50% 50%/1.5rem 1.5rem no-repeat
}
@media (min-width: 768px) {
.chocolat-wrapper .chocolat-close {
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.chocolat-wrapper .chocolat-close:hover {
background-color: #F44336
}
}
.chocolat-wrapper .chocolat-bottom {
pointer-events: none;
z-index: 17000;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3rem;
line-height: 3rem;
padding-left: 1.5rem;
font-size: 12px;
text-align: right;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.25)));
background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25))
}
.chocolat-wrapper .chocolat-set-title {
display: inline-block;
padding-right: 1.5rem;
line-height: 1;
border-right: 1px solid rgba(255, 255, 255, 0.25)
}
.chocolat-wrapper .chocolat-pagination {
float: right;
display: inline-block;
padding-left: 1.5rem;
padding-right: 1.5rem
}
.chocolat-wrapper .chocolat-fullscreen {
pointer-events: auto;
cursor: pointer;
float: right;
display: block;
margin: auto;
width: 3rem;
height: 3rem;
background: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/icons/icon-fullscreen.svg) 50% 50%/1.5rem 1.5rem no-repeat
}
@media (min-width: 768px) {
.chocolat-wrapper .chocolat-fullscreen {
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.chocolat-wrapper .chocolat-fullscreen:hover {
background-color: rgba(255, 255, 255, 0.1)
}
}
.chocolat-wrapper .chocolat-description {
float: left;
display: inline-block
}
body.chocolat-open > .chocolat-overlay {
z-index: 15000
}
body.chocolat-open > .chocolat-loader {
z-index: 15000
}
body.chocolat-open > .chocolat-content {
z-index: 17000
}
.chocolat-in-container .chocolat-content, .chocolat-in-container .chocolat-overlay, .chocolat-in-container .chocolat-wrapper {
position: absolute
}
.chocolat-in-container {
position: relative
}
@media (max-width: 767px) {
#leaflet-map {
height: 24rem
}
}
@media (min-width: 768px) {
#leaflet-map {
position: relative;
height: 100%
}
}
.leaflet-image-layer, .leaflet-layer, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-pane, .leaflet-pane > canvas, .leaflet-pane > svg, .leaflet-tile, .leaflet-tile-container, .leaflet-zoom-box {
position: absolute;
left: 0;
top: 0
}
.leaflet-container {
overflow: hidden
}
.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none
}
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast
}
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0
}
.leaflet-marker-icon, .leaflet-marker-shadow {
display: block
}
.leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-overlay-pane svg, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer {
max-width: none !important;
max-height: none !important
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
touch-action: none;
touch-action: pinch-zoom
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none
}
.leaflet-container {
-webkit-tap-highlight-color: transparent
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4)
}
.leaflet-tile {
-webkit-filter: inherit;
filter: inherit;
visibility: hidden
}
.leaflet-tile-loaded {
visibility: inherit
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 800
}
.leaflet-overlay-pane svg {
-moz-user-select: none
}
.leaflet-pane {
z-index: 400
}
.leaflet-tile-pane {
z-index: 200
}
.leaflet-overlay-pane {
z-index: 400
}
.leaflet-shadow-pane {
z-index: 500
}
.leaflet-marker-pane {
z-index: 600
}
.leaflet-tooltip-pane {
z-index: 650
}
.leaflet-popup-pane {
z-index: 700
}
.leaflet-map-pane canvas {
z-index: 100
}
.leaflet-map-pane svg {
z-index: 200
}
.leaflet-vml-shape {
width: 1px;
height: 1px
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute
}
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted;
pointer-events: auto
}
.leaflet-bottom, .leaflet-top {
position: absolute;
z-index: 1000;
pointer-events: none
}
.leaflet-top {
top: 0
}
.leaflet-right {
right: 0
}
.leaflet-bottom {
bottom: 0
}
.leaflet-left {
left: 0
}
.leaflet-control {
float: left;
clear: both
}
.leaflet-right .leaflet-control {
float: right
}
.leaflet-top .leaflet-control {
margin-top: 10px
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px
}
.leaflet-left .leaflet-control {
margin-left: 10px
}
.leaflet-right .leaflet-control {
margin-right: 10px
}
.leaflet-fade-anim .leaflet-tile {
will-change: opacity
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
-o-transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1)
}
.leaflet-pan-anim .leaflet-tile, .leaflet-zoom-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden
}
.leaflet-interactive {
cursor: pointer
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab
}
.leaflet-crosshair, .leaflet-crosshair .leaflet-interactive {
cursor: crosshair
}
.leaflet-control, .leaflet-popup-pane {
cursor: auto
}
.leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing
}
.leaflet-image-layer, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-pane > svg path, .leaflet-tile-container {
pointer-events: none
}
.leaflet-image-layer.leaflet-interactive, .leaflet-marker-icon.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive {
pointer-events: visiblePainted;
pointer-events: auto
}
.leaflet-container {
background: #ddd;
outline: 0
}
.leaflet-container a {
color: #EBA43C
}
.leaflet-container a.leaflet-active {
outline: 2px solid #EBA43C
}
.leaflet-zoom-box {
border: 2px dotted #5899A1;
background: rgba(255, 255, 255, 0.5)
}
.leaflet-container {
font: 12px/1.5 'Open Sans', sans-serif
}
.leaflet-bar {
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
border-radius: 4px
}
.leaflet-bar a, .leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black
}
.leaflet-bar a, .leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block
}
.leaflet-bar a:hover {
background-color: #f4f4f4
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px
}
.leaflet-control-layers {
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
background: #fff;
border-radius: 5px
}
.leaflet-control-layers-toggle {
background-image: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/images/layers.png);
width: 36px;
height: 36px
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/images/layers-2x.png);
background-size: 26px 26px
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px
}
.leaflet-control-layers-expanded .leaflet-control-layers-toggle, .leaflet-control-layers .leaflet-control-layers-list {
display: none
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px
}
.leaflet-control-layers label {
display: block
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px
}
.leaflet-default-icon-path {
background-image: url(//www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/images/marker-icon.png)
}
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0
}
.leaflet-control-attribution, .leaflet-control-scale-line {
padding: 0 5px;
color: #333
}
.leaflet-control-attribution a {
text-decoration: none
}
.leaflet-control-attribution a:hover {
text-decoration: underline
}
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
font-size: 11px
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5)
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777
}
.leaflet-touch .leaflet-bar, .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers {
-webkit-box-shadow: none;
box-shadow: none
}
.leaflet-touch .leaflet-bar, .leaflet-touch .leaflet-control-layers {
border: 2px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box
}
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 0.25rem
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4
}
.leaflet-popup-content p {
margin: 0
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -20px;
overflow: hidden;
pointer-events: none
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
background: #584A4B;
color: white;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 74, 75, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 74, 75, 0.3)
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #BDB1B2;
text-decoration: none;
font-weight: bold;
background: transparent
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #A59696
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd
}
.leaflet-oldie .leaflet-popup-content-wrapper {
zoom: 1
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)
}
.leaflet-oldie .leaflet-popup-tip-container {
margin-top: -1px
}
.leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999
}
.leaflet-div-icon {
background: #fff;
border: 1px solid #666
}
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}
.leaflet-tooltip.leaflet-clickable {
cursor: pointer;
pointer-events: auto
}
.leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before, .leaflet-tooltip-top:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: ""
}
.leaflet-tooltip-bottom {
margin-top: 6px
}
.leaflet-tooltip-top {
margin-top: -6px
}
.leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff
}
.leaflet-tooltip-left {
margin-left: -6px
}
.leaflet-tooltip-right {
margin-left: 6px
}
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff
}
::-moz-selection {
background: #EBA43C;
color: white;
text-shadow: none
}
::selection {
background: #EBA43C;
color: white;
text-shadow: none
}
html {
background: #f8f6f9;
color: #584a4b
}
@media (max-width: 479px) {
html {
font-size: 14px
}
}
@media (min-width: 768px) and (max-width: 1599px) {
html {
font-size: 14px
}
}
@media (min-width: 768px) and (max-width: 1100px) {
html {
font-size: 12px
}
}
@media (min-width: 768px) {
body.admin-bar .header {
top: 2rem
}
body.admin-bar .header-trigger-wrapper {
top: 2rem
}
}
a {
color: #EBA43C;
text-decoration: none
}
.title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.25rem;
text-transform: uppercase;
color: #EBA43C
}
@media (max-width: 479px) {
.title {
letter-spacing: 0.125rem
}
}
.the-content > :first-child {
margin-top: 0 !important
}
.the-content > p:first-child {
font-size: 1.333rem
}
.the-content img {
display: inline-block;
height: auto;
width: auto;
max-width: 100%
}
.header {
z-index: 888;
position: absolute;
top: 0;
left: 0;
right: 0
}
.header .container {
position: relative
}
@media (min-width: 1600px) {
.header .container {
padding: 0 3rem
}
}
.navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
@media (max-width: 767px) {
.navs {
padding-top: 7.5rem
}
.navs > div:nth-of-type(2) {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
width: 100%
}
}
@media (min-width: 768px) {
.navs {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-top: 1.5rem;
padding-left: 15rem
}
.navs > div:nth-of-type(2) {
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0
}
.navs a:hover {
color: #EBA43C
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.navs {
padding-left: 12rem
}
}
.header--active {
overflow-y: auto;
position: fixed;
bottom: 0
}
.header--active .navs {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
padding-bottom: 3rem
}
@media (max-width: 767px) {
.header--active .main-nav {
display: block
}
}
@media (min-width: 768px) {
.header--active .navs > div:nth-of-type(2) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.header--active .main-nav ul ul {
position: static;
visibility: visible
}
.header--active .contact-nav {
display: block
}
.header--active .search-nav {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.header--active .search-nav p {
display: block
}
.header--active .lang-nav p {
display: block
}
.header--active .copyright {
display: block
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.header--active .search-nav {
padding: 0 1.5rem
}
}
@media (min-width: 1600px) {
.header--active .search-nav {
padding: 0 3rem
}
}
.header--active .main-nav a {
color: white
}
@media (max-width: 767px) {
.header--active .logo__text {
fill: white
}
}
@media (min-width: 768px) {
.header--active .navs a:hover {
color: #EBA43C
}
.header--active .main-nav a:hover {
background: #584a4b;
border-color: #EBA43C
}
.header--active .main-nav > ul > li > a {
padding-bottom: calc(1.5rem - 2px);
border-bottom: 2px solid white
}
.header--active .main-nav ul ul:after, .header--active .main-nav ul ul:before {
display: none
}
.header--active .main-nav ul ul li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important
}
}
@-webkit-keyframes fadeInFromDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0)
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
@keyframes fadeInFromDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0)
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.header--active .contact-nav, .header--active .copyright, .header--active .lang-nav, .header--active .logo, .header--active .main-nav a, .header--active .search-nav .sm-nav {
-webkit-animation-name: fadeInFromDown;
animation-name: fadeInFromDown;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s
}
@media (min-width: 768px) {
.header--active .main-nav a {
-webkit-animation-duration: calc(0.6s + 0.05s * var(--item-index));
animation-duration: calc(0.6s + 0.05s * var(--item-index))
}
}
.logo {
position: absolute;
top: 1.5rem;
display: block
}
.logo svg {
display: block;
height: 4.5rem
}
@media (min-width: 768px) and (max-width: 1100px) {
.logo svg {
padding: 0.375rem 0
}
}
.logo__text {
fill: #584a4b
}
.main-nav ul {
margin: 0;
padding: 0;
list-style: none
}
.main-nav a {
display: block;
color: #584a4b
}
.main-nav li.current-menu-item > a {
color: #EBA43C
}
@media (max-width: 767px) {
.main-nav {
display: none;
margin-top: 2.25rem
}
.main-nav a {
padding-top: 0.75rem;
padding-bottom: 0.75rem
}
.main-nav > ul > li {
margin-top: 0.75rem;
padding-top: 0.75rem;
padding-top: calc(0.75rem - 2px);
border-top: 2px solid rgba(0, 0, 0, 0.25)
}
.main-nav > ul > li > a {
font-family: "Merriweather", serif;
font-weight: 900;
font-size: 1.333rem
}
.main-nav ul ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.main-nav ul ul li {
width: 50%
}
.main-nav ul ul a {
height: 100%;
padding-right: 0.75rem
}
}
@media (min-width: 768px) {
.main-nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.main-nav > ul > li {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0
}
.main-nav > ul > li:first-of-type {
display: none
}
.main-nav > ul > li > a {
white-space: nowrap;
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.main-nav > ul > li:hover ul {
visibility: visible
}
.main-nav > ul > li:hover ul:after, .main-nav > ul > li:hover ul:before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.main-nav > ul > li:hover ul li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.main-nav ul ul {
position: absolute;
padding: 0.75rem 0;
visibility: hidden
}
.main-nav ul ul:after, .main-nav ul ul:before {
content: '';
pointer-events: none;
z-index: -1;
position: absolute;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.main-nav ul ul:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
border-radius: 0.25rem
}
.main-nav ul ul:after {
content: '';
top: 0;
left: 50%;
width: 2.25rem;
height: 2.25rem;
margin: -0.75rem 0 0 -1.125rem;
background: white;
border-radius: 50%
}
.main-nav ul ul li {
opacity: 0;
-webkit-transform: translate3d(0, calc(0.5rem + 0.25rem * var(--item-index)), 0);
transform: translate3d(0, calc(0.5rem + 0.25rem * var(--item-index)), 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.main-nav ul ul a {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 0.875rem
}
.main-nav ul ul a:hover {
background: rgba(249, 224, 95, 0.1)
}
}
@media (min-width: 1600px) {
.main-nav a {
padding-left: 1.5rem;
padding-right: 1.5rem
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.main-nav a {
padding-left: 1rem;
padding-right: 1rem
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.main-nav {
margin-left: 0.75rem
}
.main-nav a {
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
.contact-nav {
display: none;
width: 100%
}
.contact-nav p {
margin: 2.25rem 0 0.75rem 0;
color: white
}
.contact-nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 0.75rem;
font-weight: 700;
color: #bdb1b2;
margin: 0;
padding: 0;
list-style: none
}
.contact-nav li {
margin-top: 0.75rem
}
.contact-nav li:not(:last-of-type) {
margin-right: 3rem
}
.contact-nav a {
position: relative;
display: block;
padding-left: 1.25rem;
color: #bdb1b2
}
.contact-nav li:last-of-type a:before {
pointer-events: none;
content: '';
position: absolute;
top: -0.375rem;
left: -0.75rem;
right: -0.75rem;
bottom: -0.375rem;
border: 2px solid;
border-radius: 1.5rem;
opacity: 0.5
}
.contact-nav svg {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
width: 1rem;
height: 1rem;
fill: currentColor;
opacity: 0.5
}
.contact-nav span {
opacity: 0.5
}
@media (min-width: 768px) and (max-width: 1599px) {
.contact-nav {
padding: 0 1.5rem
}
}
@media (min-width: 1600px) {
.contact-nav {
padding: 0 3rem
}
}
.search-nav {
margin-top: 0.75rem
}
.search-nav p {
display: none;
margin: 1.5rem 0 0.75rem 0;
padding-top: 1.5rem;
color: white;
border-top: 2px solid rgba(0, 0, 0, 0.25)
}
.search-nav form {
position: relative
}
.search-nav .input {
padding-right: 3.75rem
}
.lang-nav {
margin-top: 0.75rem
}
.lang-nav p {
display: none;
margin: 1.5rem 0 0.75rem 0;
padding-top: 1.5rem;
color: white;
border-top: 2px solid rgba(0, 0, 0, 0.25)
}
.lang-nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
list-style: none
}
.lang-nav a {
display: block;
margin-top: 0.75rem;
font-size: 0.75rem;
font-weight: 700;
color: #bdb1b2
}
.lang-nav li:not(:last-of-type) {
margin-right: 1.5rem
}
.lang-nav li.current-lang a {
color: #EBA43C
}
@media (min-width: 1600px) {
.lang-nav li:not(:last-of-type) {
margin-right: 3rem
}
}
@media (max-width: 767px) {
.copyright {
display: none
}
}
@media (min-width: 768px) {
.copyright {
display: none;
position: absolute;
bottom: 3rem;
margin: 0 0 0.75rem 0;
font-size: 0.75rem;
font-weight: 700
}
}
.header-trigger-wrapper {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
right: 0;
padding-top: 1.5rem
}
.header-trigger-wrapper .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
@media (max-width: 767px) {
.header-trigger-wrapper {
z-index: 999
}
}
@media (min-width: 768px) {
.header-trigger-wrapper {
z-index: 111
}
}
@media (min-width: 1600px) {
.header-trigger-wrapper .container {
padding: 0 3rem
}
}
.header-trigger-wrapper--active {
z-index: 999
}
.header-trigger-wrapper--active .header-trigger {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-webkit-box-shadow: 0 0 0 rgba(88, 74, 75, 0);
box-shadow: 0 0 0 rgba(88, 74, 75, 0)
}
.header-trigger-wrapper--active .header-trigger:before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.header-trigger-wrapper--active .header-trigger svg:first-of-type {
opacity: 0;
-webkit-transform: translate3d(0, -0.75rem, 0);
transform: translate3d(0, -0.75rem, 0)
}
.header-trigger-wrapper--active .header-trigger svg:nth-of-type(2) {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.header-trigger {
pointer-events: auto;
cursor: pointer;
overflow: hidden;
position: relative;
display: block;
width: 4.5rem;
height: 4.5rem;
background: #EBA43C;
border-radius: 50%;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.header-trigger:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #F44336;
border-radius: 50%;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.header-trigger svg {
position: absolute;
top: 50%;
left: 50%;
margin: -0.75rem 0 0 -0.75rem;
display: block;
width: 1.5rem;
height: 1.5rem;
fill: white;
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.header-trigger svg:nth-of-type(2) {
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0)
}
@media (min-width: 768px) {
.header-trigger:hover svg {
fill: rgba(255, 255, 255, 0.5)
}
}
.header-overlay {
z-index: 777;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #584a4b;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
@media (min-width: 768px) {
.header-overlay {
background: -webkit-linear-gradient(95deg, #584a4b 0%, #584a4b 40%, #655657 60%, #655657 100%);
background: -o-linear-gradient(95deg, #584a4b 0%, #584a4b 40%, #655657 60%, #655657 100%);
background: linear-gradient(-5deg, #584a4b 0%, #584a4b 40%, #655657 60%, #655657 100%)
}
.header-overlay .container {
position: relative;
height: 100%
}
}
.header-overlay--active {
visibility: visible;
opacity: 1
}
@media (min-width: 768px) {
.header-overlay--active .header-overlay__background {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
@media (max-width: 767px) {
.header-overlay__background {
display: none
}
}
@media (min-width: 768px) {
.header-overlay__background {
position: absolute;
top: -1.5rem;
bottom: 0;
left: 0;
width: 16.5rem;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-transform: translate3d(0, 1.5rem, 0);
transform: translate3d(0, 1.5rem, 0);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)
}
}
@media (min-width: 1600px) {
.header-overlay__background {
width: 18rem
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.header-overlay__background {
width: 13.5rem
}
}
section {
padding: 9rem 0;
background: #f8f6f9
}
#section1 {
z-index: 222;
position: relative
}
.section--white {
background: white
}
.section--light {
background: -webkit-gradient(linear, left bottom, left top, from(#ece8ee), color-stop(18rem, #f8f6f9), to(#f8f6f9));
background: -webkit-linear-gradient(bottom, #ece8ee 0%, #f8f6f9 18rem, #f8f6f9 100%);
background: -o-linear-gradient(bottom, #ece8ee 0%, #f8f6f9 18rem, #f8f6f9 100%);
background: linear-gradient(0deg, #ece8ee 0%, #f8f6f9 18rem, #f8f6f9 100%)
}
.section--dark {
color: white;
background: #584a4b
}
.section--main {
color: white;
background: #EBA43C
}
.section--secondary {
color: white;
background: #5899A1
}
.section--main-and-secondary {
color: white;
background: -webkit-gradient(linear, left top, right top, from(#EBA43C), color-stop(50%, #EBA43C), color-stop(50%, #5899A1), to(#5899A1));
background: -webkit-linear-gradient(left, #EBA43C 0%, #EBA43C 50%, #5899A1 50%, #5899A1 100%);
background: -o-linear-gradient(left, #EBA43C 0%, #EBA43C 50%, #5899A1 50%, #5899A1 100%);
background: linear-gradient(90deg, #EBA43C 0%, #EBA43C 50%, #5899A1 50%, #5899A1 100%)
}
.section--image {
position: relative;
color: white;
background: #584a4b
}
.section__content {
z-index: 2;
position: relative
}
.section__image {
z-index: 1;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 0.25
}
.intro {
overflow: hidden
}
@media (max-width: 767px) {
.intro {
padding-top: 18rem
}
}
@media (min-width: 768px) {
.intro {
display: grid;
grid-auto-rows: minmax(7.5rem, -webkit-min-content);
grid-auto-rows: minmax(7.5rem, min-content);
padding-top: 7.5rem
}
}
@media (min-width: 1600px) {
.intro {
grid-template-columns:18rem 1fr 7.5rem 25% 25%
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.intro {
grid-template-columns:0 1fr 7.5rem 25% minmax(24rem, 25%)
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.intro {
grid-template-columns:0 1fr 7.5rem 7.5rem 24rem
}
}
@media (min-width: 768px) {
.intro__item:first-of-type {
grid-column: 2 / span 4
}
.intro__item:nth-of-type(2) {
grid-column: 2 / span 2;
grid-row: 2 / span 2
}
.intro__item:nth-of-type(3) {
grid-column: 2;
grid-row: 4
}
.intro__item:nth-of-type(4) {
grid-column: 3;
grid-row: 4
}
.intro__item:nth-of-type(5) {
grid-column: 1;
grid-row: 2 / span 6
}
.intro__item:nth-of-type(6) {
grid-column: 5;
grid-row: 2
}
.intro__item:nth-of-type(7) {
grid-column: 5;
grid-row: 3
}
.intro__item:nth-of-type(8) {
grid-column: 5;
grid-row: 4
}
.intro__item:nth-of-type(9) {
grid-column: 5;
grid-row: 5
}
.intro__item:nth-of-type(10) {
grid-column: 2;
grid-row: 4 / span 3
}
.intro__item:nth-of-type(11) {
grid-column: 3 / span 2;
grid-row: 3 / span 5
}
.intro__item:nth-of-type(12) {
grid-column: 1 / span 5;
grid-row: 4 / span 4
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.intro__item:nth-of-type(10) {
grid-column: 2 / span 2;
grid-row: 4 / span 4
}
.intro__item:nth-of-type(11) {
grid-column: 5;
grid-row: 6 / span 2
}
}
@media (max-width: 767px) {
.site-tagline {
padding: 0 1.5rem 3rem 1.5rem
}
}
@media (min-width: 768px) {
.site-tagline {
padding: 3rem;
opacity: 0
}
.site-tagline span.word {
display: inline-block;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transform: translate3d(0, calc(0.75rem + (0.25rem * var(--word-index))), 0);
transform: translate3d(0, calc(0.75rem + (0.25rem * var(--word-index))), 0);
-webkit-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1)
}
}
@media (min-width: 768px) {
.site-tagline--show {
opacity: 1
}
.site-tagline--show span.word {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.site-description {
z-index: 99;
position: relative;
background: white
}
@media (min-width: 768px) {
.site-description--show .site-description__inner {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.site-description__inner p:last-of-type {
text-align: right
}
@media (max-width: 767px) {
.site-description__inner {
padding: 3rem 1.5rem
}
}
@media (min-width: 768px) {
.site-description__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
padding: 3rem;
opacity: 0;
-webkit-transform: translate3d(0, -0.75rem, 0);
transform: translate3d(0, -0.75rem, 0);
-webkit-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1)
}
}
.help-nav-wrapper {
z-index: 88;
position: relative;
padding: 2.25rem 1.5rem
}
@media (max-width: 767px) {
.help-nav-wrapper {
padding-top: calc(2.25rem - 2px);
border-top: 2px solid #f8f6f9;
background: white
}
}
@media (min-width: 768px) {
.help-nav-wrapper {
background: rgba(224, 219, 219, 0.3)
}
}
.help-nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
list-style: none
}
.help-nav li:not(:last-of-type) {
margin-right: 0.75rem
}
@media (max-width: 767px) {
.help-nav ul {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
@media (min-width: 768px) {
.help-nav li {
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transform: translate3d(0, calc(0.75rem + (0.75rem * var(--item-index))), 0);
transform: translate3d(0, calc(0.75rem + (0.75rem * var(--item-index))), 0);
-webkit-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1)
}
}
@media (min-width: 768px) {
.help-nav--show li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.site-cta {
z-index: 88;
position: relative
}
.site-cta a {
display: block;
width: 100%;
background: #f8f6f9;
color: #ED287A
}
.site-cta p {
margin: 0;
font-weight: 700;
text-align: center
}
.site-cta svg {
display: block;
width: 2.25rem;
height: 2.25rem
}
@media (max-width: 767px) {
.site-cta a {
padding: 1.5rem;
padding-top: calc(1.5rem - 2px);
border-top: 2px solid #ece8ee;
font-size: 1.333rem
}
.site-cta svg {
margin: 0.75rem auto 0 auto;
fill: #ED287A
}
}
@media (min-width: 768px) {
.site-cta a {
overflow: hidden;
position: relative;
height: 100%;
font-size: 0.875rem
}
.site-cta a:after {
content: '';
z-index: 2;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #EBA43C;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.site-cta p {
z-index: 1;
position: absolute;
top: 1.5rem;
left: 1.5rem;
right: 1.5rem;
-webkit-transform: translate3d(0, -0.75rem, 0);
transform: translate3d(0, -0.75rem, 0);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.site-cta svg {
z-index: 3;
position: absolute;
top: 50%;
left: 50%;
margin-top: -1.125rem;
margin-left: -1.125rem;
fill: white;
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.site-cta a:hover:after {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
.site-cta a:hover p {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.site-cta a:hover svg {
fill: #ED287A;
-webkit-transform: translate3d(0, 1.5rem, 0);
transform: translate3d(0, 1.5rem, 0)
}
}
.site-scroll {
display: none
}
@media (min-width: 1600px) {
.site-scroll {
display: block;
z-index: 55;
position: relative;
overflow: hidden;
padding: 3rem;
padding-bottom: 0
}
.site-scroll p {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
display: block;
margin: 0;
padding: 0 0 0 0.75rem;
height: 100%;
width: 100%;
border-left: 2px solid #EBA43C;
color: #EBA43C;
font-weight: 700
}
}
.stat:nth-of-type(6) {
background: #f9e05f
}
.stat:nth-of-type(6) .stat__count {
color: #f6d215
}
.stat:nth-of-type(7) {
background: #f4cc53
}
.stat:nth-of-type(7) .stat__count {
color: #ebb50f
}
.stat:nth-of-type(8) {
background: #f0b848
}
.stat:nth-of-type(8) .stat__count {
color: #da9712
}
.stat:nth-of-type(9) {
background: #eba43c
}
.stat:nth-of-type(9) .stat__count {
color: #c67e14
}
.stat:nth-of-type(6) p, .stat:nth-of-type(8) p {
text-align: right
}
.stat:nth-of-type(6) .stat__count, .stat:nth-of-type(8) .stat__count {
left: 0
}
.stat:nth-of-type(7) .stat__count, .stat:nth-of-type(9) .stat__count {
right: 0
}
.stat {
z-index: 77;
position: relative;
overflow: hidden;
padding: 3rem 1.5rem
}
.stat p {
position: relative;
margin: 0;
font-weight: 700;
color: white
}
@media (min-width: 768px) {
.stat {
padding: 3rem
}
.stat p {
opacity: 0
}
}
@media (min-width: 768px) {
.stat--show p {
opacity: 1
}
.stat--show .stat__count {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
.stat--show .stat__unit span.word {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.stat__count {
position: absolute;
top: 1.5rem;
display: block;
font-family: "Open Sans Condensed", sans-serif;
font-size: 9.9975rem
}
@media (min-width: 768px) {
.stat__count {
-webkit-transform: translate3d(0, 1.5rem, 0);
transform: translate3d(0, 1.5rem, 0);
opacity: 0;
-webkit-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1)
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.stat__count {
font-size: 7.998rem
}
}
.stat__unit {
z-index: 2;
position: relative;
display: block;
font-size: 1.333rem;
text-shadow: 0 0.25rem 0.25rem rgba(88, 74, 75, 0.1)
}
.stat__unit span.word {
display: inline-block
}
@media (min-width: 768px) {
.stat__unit span.word {
opacity: 0;
-webkit-transform: translate3d(0, 0.25rem, 0);
transform: translate3d(0, 0.25rem, 0);
-webkit-transform: translate3d(0, calc(0.25rem + (0.25rem * var(--word-index))), 0);
transform: translate3d(0, calc(0.25rem + (0.25rem * var(--word-index))), 0);
-webkit-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1)
}
}
@media (min-width: 768px) {
.parallax-image:nth-of-type(10) {
background: #bdb1b2
}
.parallax-image:nth-of-type(10):after {
background: #bdb1b2
}
.parallax-image:nth-of-type(10) .parallax-image__inner img {
height: calc(100% + 9.75rem)
}
}
@media (min-width: 768px) {
.parallax-image:nth-of-type(11) {
background: #736263
}
.parallax-image:nth-of-type(11):after {
background: #736263
}
.parallax-image:nth-of-type(11) .parallax-image__inner img {
height: calc(100% + 3.75rem)
}
}
.parallax-image {
z-index: 77;
position: relative;
overflow: hidden
}
@media (max-width: 767px) {
.parallax-image {
float: left;
width: 50%;
height: 15rem
}
}
@media (min-width: 768px) {
.parallax-image {
width: 100%;
height: 100%
}
.parallax-image:after {
content: '';
z-index: 2;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1)
}
}
.parallax-image__inner {
position: relative;
width: 100%;
height: 100%
}
.parallax-image__inner img {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media (min-width: 768px) {
.parallax-image__inner {
-webkit-transform: translate3d(-1.5rem, 0, 0);
transform: translate3d(-1.5rem, 0, 0);
-webkit-transition: -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1)
}
.parallax-image__inner img {
opacity: 0.75
}
}
@media (min-width: 768px) {
.parallax-image--show:after {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
.parallax-image--show .parallax-image__inner {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
@media (max-width: 767px) {
.site-background {
display: none
}
}
@media (min-width: 768px) {
.site-background {
position: relative;
background: #584a4b
}
.site-background:after {
content: '';
z-index: 66;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(88, 74, 75, 0)), to(#584a4b));
background: -webkit-linear-gradient(rgba(88, 74, 75, 0), #584a4b);
background: -o-linear-gradient(rgba(88, 74, 75, 0), #584a4b);
background: linear-gradient(rgba(88, 74, 75, 0), #584a4b)
}
}
.hero {
overflow: hidden
}
.hero-detail-product {
overflow: hidden
}
@media (max-width: 767px) {
.hero {
padding-top: 18rem
}
}
@media (min-width: 768px) {
.hero {
display: grid;
grid-template-rows:-webkit-min-content minmax(7.5rem, -webkit-min-content) minmax(22.5rem, -webkit-min-content);
grid-template-rows:min-content minmax(7.5rem, min-content) minmax(22.5rem, min-content);
padding-top: 7.5rem
}
}
@media (min-width: 768px) {
.hero-detail-product {
display: grid;
grid-template-rows:-webkit-min-content minmax(7.5rem, -webkit-min-content) minmax(22.5rem, -webkit-min-content);
grid-template-rows:min-content minmax(-0.5rem, min-content) minmax(0.5rem, min-content);
padding-top: 7.5rem
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.hero-detail-product {
grid-template-columns:0 1fr 18rem
}
}
@media (min-width: 1600px) {
.hero-detail-product {
grid-template-columns:18rem 1fr 24rem
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.hero {
grid-template-columns:0 1fr 18rem
}
}
@media (min-width: 1600px) {
.hero {
grid-template-columns:18rem 1fr 24rem
}
}
.hero__heading .title {
margin: 0 0 1.5rem 0
}
.hero__heading h1 {
margin: 0
}
@media (max-width: 767px) {
.hero__heading {
padding: 0 1.5rem 3rem 1.5rem
}
}
@media (min-width: 768px) {
.hero__heading {
grid-column: 2;
grid-row: 1;
padding: 3rem
}
}
.hero__featured-article, .hero__image, .hero__map {
z-index: 33;
position: relative;
overflow: hidden
}
@media (min-width: 768px) {
.hero__featured-article, .hero__image, .hero__map {
grid-column: 2;
grid-row: 2 / span 2
}
}
.hero__image img {
display: block;
width: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media (max-width: 767px) {
.hero__image img {
height: 18rem
}
}
@media (min-width: 768px) {
.hero__image {
width: 100%;
height: 100%
}
.hero__image img {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
height: calc(100% + 4.5rem)
}
}
.hero__featured-article .featured-article {
height: 100%
}
.hero__secondary-nav {
z-index: 44;
position: relative;
background: #EBA43C
}
.hero__secondary-nav a, .hero__secondary-nav span {
position: relative;
display: block;
color: white
}
.hero__secondary-nav a.current {
background: #f4cc53
}
.hero__secondary-nav svg {
position: absolute;
top: 50%;
left: 1rem;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
width: 1rem;
height: 1rem;
fill: #F9E05F
}
.hero__secondary-nav > a, .hero__secondary-nav > span {
font-family: "Merriweather", serif;
font-weight: 900;
font-size: 1.333rem;
padding: 3rem 1.5rem;
background: #f0b848
}
.hero__secondary-nav ul {
margin: 0;
padding: 0;
list-style: none
}
.hero__secondary-nav ul li {
display: block
}
.hero__secondary-nav ul li a, .hero__secondary-nav ul li span {
display: block;
padding: 1.5rem;
font-weight: 700;
background: #EBA43C
}
@media (max-width: 767px) {
.hero__secondary-nav div {
display: none
}
}
@media (min-width: 768px) {
.hero__secondary-nav {
grid-column: 3;
grid-row: 2 / span 2
}
.hero__secondary-nav div {
z-index: -1;
position: absolute;
bottom: 100%;
left: 0;
right: 0
}
.hero__secondary-nav div p {
margin: 0;
padding: 1.5rem 3rem;
color: #bdb1b2;
background: white
}
.hero__secondary-nav a:before {
content: '';
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 1.5rem;
background: #F9E05F;
opacity: 0;
-webkit-transform: translate3d(1.5rem, 0, 0);
transform: translate3d(1.5rem, 0, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.hero__secondary-nav a.current:before, .hero__secondary-nav a:hover:before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.hero__secondary-nav > a, .hero__secondary-nav > span {
padding: 3rem
}
.hero__secondary-nav ul li a, .hero__secondary-nav ul li span {
padding: 1.5rem 3rem
}
}
.hero__secondary-nav--contact {
background: #584a4b
}
.hero__secondary-nav--contact > a, .hero__secondary-nav--contact > span {
padding-left: 3rem
}
.hero__secondary-nav--contact ul li a, .hero__secondary-nav--contact ul li span {
padding-left: 3rem;
background: #584a4b
}
.hero__secondary-nav--contact ul li:nth-of-type(odd) a, .hero__secondary-nav--contact ul li:nth-of-type(odd) span {
background: #655657
}
.hero__secondary-nav--contact ul li:last-of-type a, .hero__secondary-nav--contact ul li:last-of-type span {
background: #5899A1
}
.hero__download {
z-index: 44;
position: relative
}
@media (max-width: 767px) {
.hero__download div:first-of-type {
display: none
}
}
@media (min-width: 768px) {
.hero__download {
grid-column: 3;
grid-row: 2 / span 2
}
.hero__download div:first-of-type {
z-index: -1;
position: absolute;
bottom: 100%;
left: 0;
right: 0
}
.hero__download div:first-of-type p {
margin: 0;
padding: 1.5rem 3rem;
color: #bdb1b2;
background: white
}
}
.hero__download-inner p {
margin: 0;
color: white
}
@media (max-width: 767px) {
.hero__download-inner {
padding: 3rem 1.5rem 7.5rem 1.5rem;
background: #584a4b
}
.hero__download-inner p.h3 {
display: none
}
}
@media (min-width: 768px) {
.hero__download-inner {
height: 100%;
padding: 2.75rem 3rem 7.5rem 3rem;
background: -webkit-gradient(linear, left top, left bottom, from(#736263), color-stop(6rem, #736263), color-stop(6rem, #584a4b), to(#584a4b));
background: -webkit-linear-gradient(top, #736263 0%, #736263 6rem, #584a4b 6rem, #584a4b 100%);
background: -o-linear-gradient(top, #736263 0%, #736263 6rem, #584a4b 6rem, #584a4b 100%);
background: linear-gradient(180deg, #736263 0%, #736263 6rem, #584a4b 6rem, #584a4b 100%)
}
.hero__download-inner p.h3 {
pointer-events: none;
z-index: 2;
position: absolute;
top: 3rem;
right: 3rem;
max-width: calc(100% - 6rem);
padding-bottom: 1.5rem;
border-bottom: 0.25rem solid #F9E05F;
color: #F9E05F;
text-shadow: 0 0.25rem 0.25rem rgba(88, 74, 75, 0.1);
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis
}
}
@media (max-width: 767px) {
.hero__download-image {
display: none
}
}
@media (min-width: 768px) {
.hero__download-image {
z-index: 1;
position: relative;
display: block;
margin-bottom: 1.5rem;
background: #5899A1;
border: 0.75rem solid #736263;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(60, 51, 51, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(60, 51, 51, 0.3)
}
.hero__download-image:hover:after, .hero__download-image:hover:before, .hero__download-image:hover svg {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.hero__download-image:hover img {
opacity: 0.5
}
.hero__download-image:before {
content: '';
position: absolute;
top: -0.75rem;
left: -0.75rem;
right: -0.75rem;
bottom: -0.75rem;
border: 0.75rem solid #5899A1;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 153, 161, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 153, 161, 0.3);
opacity: 0;
-webkit-transform: translate3d(0, 0.25rem, 0);
transform: translate3d(0, 0.25rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.hero__download-image:after {
content: '';
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 4.5rem;
height: 4.5rem;
margin: -2.25rem 0 0 -2.25rem;
border: 0.25rem solid #F9E05F;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(249, 224, 95, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(249, 224, 95, 0.3);
border-radius: 50%;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.hero__download-image img {
display: block;
width: 100%;
height: auto
}
.hero__download-image svg {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 1.5rem;
height: 1.5rem;
margin: -0.75rem 0 0 -0.75rem;
fill: #F9E05F;
opacity: 0;
-webkit-transform: translate3d(0, 1.5rem, 0);
transform: translate3d(0, 1.5rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.hero__download-image {
margin-left: 1.5rem;
margin-right: 1.5rem
}
}
@media (min-width: 1600px) {
.hero__download-image {
margin-left: 3rem;
margin-right: 3rem
}
}
.hero__download-button {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
line-height: 1.5rem;
font-weight: 700;
color: white;
background-color: #5899A1;
background-image: url(https://www.tierhilfe-hoffnung.com/wp-content/themes/tierhilfe/icons/icon-arrow-right.svg);
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat
}
@media (max-width: 767px) {
.hero__download-button {
padding: 1.5rem;
padding-right: 3rem;
background-position: top 50% right 1.5rem
}
}
@media (min-width: 768px) {
.hero__download-button {
padding: 1.5rem 3rem;
padding-right: 4.5rem;
background-position: top 50% right 3rem
}
.hero__download-button:before {
content: '';
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 1.5rem;
background: #F9E05F;
opacity: 0;
-webkit-transform: translate3d(1.5rem, 0, 0);
transform: translate3d(1.5rem, 0, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.hero__download-button.current:before, .hero__download-button:hover:before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
@media (max-width: 767px) {
.hero__background {
display: none
}
}
@media (min-width: 768px) {
.hero__background {
grid-column: 1 / span 3;
grid-row: 3;
position: relative;
background: #584a4b
}
.hero__background:after {
content: '';
z-index: 22;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(88, 74, 75, 0)), to(#584a4b));
background: -webkit-linear-gradient(rgba(88, 74, 75, 0), #584a4b);
background: -o-linear-gradient(rgba(88, 74, 75, 0), #584a4b);
background: linear-gradient(rgba(88, 74, 75, 0), #584a4b)
}
}
.hero__scroll {
display: none
}
@media (min-width: 1600px) {
.hero__scroll {
grid-column: 1;
grid-row: 2 / span 2;
z-index: 11;
position: relative;
display: block
}
.hero__scroll:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 3rem;
width: 2px;
background: #EBA43C
}
}
.about {
overflow: hidden
}
.about .container {
position: relative
}
.about__title {
pointer-events: none;
z-index: 1;
position: absolute;
top: 0;
margin: 0;
font-family: "Merriweather", serif;
font-weight: 900;
color: #f8f6f9
}
@media (max-width: 767px) {
.about__title {
left: -1.5rem;
font-size: 9.9975rem
}
}
@media (min-width: 768px) {
.about__title {
left: -9rem;
font-size: 11.997rem
}
}
.about__content {
z-index: 2;
position: relative
}
.about__image {
position: relative
}
.about__image:after, .about__image:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3rem solid;
border-radius: 50%
}
.about__image:before {
z-index: -1;
border-color: #f8f6f9;
-webkit-transform: translate(-6rem, 4.5rem);
-ms-transform: translate(-6rem, 4.5rem);
transform: translate(-6rem, 4.5rem)
}
.about__image:after {
z-index: 1;
border-color: #F9E05F;
-webkit-transform: translate(3rem, 15rem);
-ms-transform: translate(3rem, 15rem);
transform: translate(3rem, 15rem)
}
.about__image img {
z-index: 2;
position: relative;
display: block;
height: auto;
width: 100%;
border-radius: 50%;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3)
}
@media (max-width: 767px) {
.about__image {
margin-top: 3rem
}
}
@media (min-width: 768px) {
.about__image {
margin-top: 1.5rem
}
}
.responsive-video {
overflow: hidden;
z-index: 2;
position: relative;
margin-top: 4.5rem;
padding-bottom: 56.25%;
height: 0
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0
}
.articles {
z-index: 2;
position: relative;
margin-top: 3rem
}
@media (min-width: 768px) {
.articles {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.articles .featured-article {
width: 66.66667%
}
.articles .articles__list {
width: 33.33333%
}
}
.featured-article {
position: relative
}
.featured-article:before {
content: '';
z-index: 1;
position: absolute;
right: 0;
bottom: 0
}
@media (max-width: 767px) {
.featured-article {
display: block
}
.featured-article:before {
top: 3rem;
left: 0;
background: #584a4b
}
}
@media (min-width: 768px) {
.featured-article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 3rem
}
.featured-article:before {
top: 0;
left: 3rem;
background: -webkit-gradient(linear, left top, left bottom, from(#584a4b), to(#655657));
background: -webkit-linear-gradient(#584a4b, #655657);
background: -o-linear-gradient(#584a4b, #655657);
background: linear-gradient(#584a4b, #655657)
}
.featured-article:hover .featured-article__category, .featured-article:hover .featured-article__title {
color: #88b8be
}
.featured-article:hover .featured-article__image:before, .featured-article:hover .featured-article__image svg {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.featured-article:hover .featured-article__image img {
opacity: 0.5;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
.featured-article__image {
overflow: hidden;
z-index: 2;
position: relative;
background: #584a4b
}
.featured-article__image img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 0.75
}
@media (max-width: 767px) {
.featured-article__image {
margin-left: 3rem;
height: 18rem
}
.featured-article__image svg {
display: none
}
}
@media (min-width: 768px) {
.featured-article__image {
width: 50%
}
.featured-article__image:before {
content: '';
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
width: 4.5rem;
height: 4.5rem;
margin: -2.25rem 0 0 -2.25rem;
background: #5899A1;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 153, 161, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 153, 161, 0.3);
border-radius: 50%;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.featured-article__image img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.featured-article__image svg {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 1.5rem;
height: 1.5rem;
margin: -0.75rem 0 0 -0.75rem;
fill: white;
opacity: 0;
-webkit-transform: translate3d(0, 1.5rem, 0);
transform: translate3d(0, 1.5rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.featured-article__content {
z-index: 3;
position: relative
}
@media (max-width: 767px) {
.featured-article__content {
margin-top: -3rem;
padding: 0 3rem 3rem 3rem
}
}
@media (min-width: 768px) {
.featured-article__content {
width: 50%;
padding: 1.5rem 3rem 7.5rem 3rem
}
}
.featured-article__category, .featured-article__title {
margin: 0;
color: #F9E05F
}
@media (max-width: 767px) {
.featured-article__category, .featured-article__title {
-webkit-transform: translateX(-1.5rem);
-ms-transform: translateX(-1.5rem);
transform: translateX(-1.5rem)
}
}
@media (min-width: 768px) {
.featured-article__category, .featured-article__title {
-webkit-transform: translateX(-6rem);
-ms-transform: translateX(-6rem);
transform: translateX(-6rem);
-webkit-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.featured-article__excerpt {
color: #bdb1b2
}
.featured-article__date {
color: white
}
@media (min-width: 768px) {
.featured-article__date {
position: absolute;
bottom: 4.5rem;
text-align: right
}
}
.articles__list {
background: white
}
@media (min-width: 768px) {
.articles__list {
position: relative;
padding: 1.5rem 0
}
}
.article {
display: block
}
@media (min-width: 768px) {
.article:hover .article__title {
color: #5899A1
}
}
.article__content {
padding: 3rem
}
.article__category {
margin: 0
}
.article__title {
margin: 0;
color: #584a4b
}
@media (min-width: 768px) {
.article__title {
-webkit-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.article__date {
margin: 0;
color: #bdb1b2
}
.articles__all {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 1.5rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5rem;
text-align: center;
color: #584a4b;
background: #e0dbdb
}
@media (min-width: 768px) {
.articles__all {
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.articles__all:hover {
color: white;
background: #5899A1
}
}
.cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -1.5rem;
margin-top: 1.5rem
}
.cards--home .card--latest:before {
border-color: rgba(249, 224, 95, 0.5)
}
.cards--home .card {
height: auto;
background: #655657;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(60, 51, 51, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(60, 51, 51, 0.3)
}
.cards--home .card:nth-of-type(2n) {
background: #736263
}
.cards--home .card__title {
color: white
}
@media (max-width: 767px) {
.cards--home .card-wrapper:last-of-type {
width: 100%
}
}
@media (min-width: 768px) {
.cards--home .card-wrapper:nth-of-type(2n) {
margin-top: 4.5rem
}
}
@media (min-width: 768px) {
.cards--4 .card-wrapper {
width: 25%
}
}
@media (min-width: 768px) {
.cards--5 .card-wrapper {
width: 20%
}
}
.card-wrapper {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-top: 1.5rem;
padding-left: 1.5rem;
width: 100%
}
@media (max-width: 767px) {
.card-wrapper {
width: 50%
}
}
.card {
display: block;
height: 100%;
background: white;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3)
}
@media (min-width: 768px) {
.card {
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.card:hover {
background: #5899A1 !important
}
.card:hover .card__image {
opacity: 0.5
}
.card:hover .card__category {
color: #F9E05F
}
.card:hover .card__title {
color: white
}
.card:hover .card__date {
color: rgba(255, 255, 255, 0.75)
}
.card:hover .card__tag span {
opacity: 0;
-webkit-transform: translate3d(0.75rem, 0, 0);
transform: translate3d(0.75rem, 0, 0)
}
.card:hover .card__tag svg {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.card--latest {
position: relative
}
.card--latest:before {
content: '';
z-index: 1;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid rgba(88, 153, 161, 0.5)
}
.card__image {
display: block;
width: 100%
}
@media (min-width: 768px) {
.card__image {
-webkit-transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.card__content {
padding: 1.5rem 1.5rem 3rem 1.5rem
}
.card__category {
margin: 0
}
@media (min-width: 768px) {
.card__category {
-webkit-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.card__category + .card__title {
margin: 0
}
.card__title {
color: #584a4b
}
@media (min-width: 768px) {
.card__title {
-webkit-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.card__date {
margin: 0;
color: #bdb1b2
}
@media (min-width: 768px) {
.card__date {
-webkit-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: color 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.card__tag {
z-index: 3;
position: absolute;
top: 1.5rem;
left: 1.5rem;
margin: 0;
padding-bottom: 1.5rem;
color: #F9E05F;
text-shadow: 0 0.25rem 0.25rem rgba(88, 74, 75, 0.1);
border-bottom: 0.25rem solid #F9E05F
}
.card__tag span {
margin: 0;
display: inline-block
}
@media (max-width: 767px) {
.card__tag svg {
display: none
}
}
@media (min-width: 768px) {
.card__tag span {
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.card__tag svg {
position: absolute;
top: 0;
left: 50%;
width: 1.5rem;
height: 1.5rem;
margin-left: -0.75rem;
fill: #F9E05F;
opacity: 0;
-webkit-transform: translate3d(-1.5rem, 0, 0);
transform: translate3d(-1.5rem, 0, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.cards__all {
display: block;
padding: 1.5rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5rem;
text-align: center;
color: white;
background: #8e7a7b
}
@media (min-width: 768px) {
.cards__all {
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.cards__all:hover {
color: white;
background: #5899A1
}
}
.recommendations {
display: block;
padding: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5rem;
text-align: center;
color: #584a4b;
background: #e0dbdb
}
@media (min-width: 768px) {
.recommendations {
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.recommendations:hover {
color: white;
background: #5899A1
}
}
.cards-title-and-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 0;
margin-bottom: -1.5rem
}
.cards-title-and-more .button {
white-space: nowrap;
margin-left: 0.75rem
}
.photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.photos__title, .photos__url {
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.photos__title p, .photos__url p {
margin: 0;
color: white
}
@media (max-width: 767px) {
.photos__title, .photos__url {
-webkit-box-ordinal-group: 0 !important;
-ms-flex-order: -1 !important;
order: -1 !important;
width: 100%
}
.photos__title p, .photos__url p {
padding: 3rem 1.5rem
}
}
@media (min-width: 768px) {
.photos__title, .photos__url {
width: 25%
}
.photos__title p, .photos__url p {
padding: 0 1.5rem
}
}
.photos__title {
background: -webkit-gradient(linear, left top, right top, from(#EBA43C), color-stop(50%, #EBA43C), color-stop(50%, #f0b848), to(#f0b848));
background: -webkit-linear-gradient(left, #EBA43C 0%, #EBA43C 50%, #f0b848 50%, #f0b848 100%);
background: -o-linear-gradient(left, #EBA43C 0%, #EBA43C 50%, #f0b848 50%, #f0b848 100%);
background: linear-gradient(90deg, #EBA43C 0%, #EBA43C 50%, #f0b848 50%, #f0b848 100%)
}
.photos__url {
position: relative;
background: #584a4b
}
.photos__url:before {
content: attr(data-text);
position: absolute;
bottom: -1.5rem;
left: 50%;
width: 50%;
font-size: 3.999rem;
line-height: 4.5rem;
font-family: "Merriweather", serif;
font-weight: 900
}
@media (max-width: 767px) {
.photos__url:nth-of-type(3) {
-webkit-box-ordinal-group: 10000 !important;
-ms-flex-order: 9999 !important;
order: 9999 !important
}
}
@media (min-width: 768px) {
.photos__url:hover:before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.photos__url:hover p {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9)
}
.photos__url:before {
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.photos__url p {
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: transform 0.3s cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.photos__url:first-of-type {
background: -webkit-gradient(linear, left top, right top, from(#EBA43C), color-stop(50%, #EBA43C), color-stop(50%, #f0b848), to(#f0b848));
background: -webkit-linear-gradient(left, #EBA43C 0%, #EBA43C 50%, #f0b848 50%, #f0b848 100%);
background: -o-linear-gradient(left, #EBA43C 0%, #EBA43C 50%, #f0b848 50%, #f0b848 100%);
background: linear-gradient(90deg, #EBA43C 0%, #EBA43C 50%, #f0b848 50%, #f0b848 100%)
}
.photos__url:first-of-type:before {
color: #EBA43C
}
.photos__url:nth-of-type(2) {
background: -webkit-gradient(linear, left top, right top, from(#67a4ac), color-stop(50%, #67a4ac), color-stop(50%, #77aeb5), to(#77aeb5));
background: -webkit-linear-gradient(left, #67a4ac 0%, #67a4ac 50%, #77aeb5 50%, #77aeb5 100%);
background: -o-linear-gradient(left, #67a4ac 0%, #67a4ac 50%, #77aeb5 50%, #77aeb5 100%);
background: linear-gradient(90deg, #67a4ac 0%, #67a4ac 50%, #77aeb5 50%, #77aeb5 100%)
}
.photos__url:nth-of-type(2):before {
color: #67a4ac
}
.photos__url:nth-of-type(3) {
background: -webkit-gradient(linear, left top, right top, from(#5899A1), color-stop(50%, #5899A1), color-stop(50%, #67a4ac), to(#67a4ac));
background: -webkit-linear-gradient(left, #5899A1 0%, #5899A1 50%, #67a4ac 50%, #67a4ac 100%);
background: -o-linear-gradient(left, #5899A1 0%, #5899A1 50%, #67a4ac 50%, #67a4ac 100%);
background: linear-gradient(90deg, #5899A1 0%, #5899A1 50%, #67a4ac 50%, #67a4ac 100%)
}
.photos__url:nth-of-type(3):before {
color: #5899A1
}
.photo {
background: #584a4b
}
.photo img {
display: block;
height: auto;
width: 100%
}
@media (max-width: 767px) {
.photo {
width: 50%
}
.photo svg {
display: none
}
}
@media (min-width: 768px) {
.photo {
overflow: hidden;
position: relative;
width: 12.5%
}
.photo:hover:before, .photo:hover svg {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.photo:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 0.25
}
.photo:before {
content: '';
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
width: 4.5rem;
height: 4.5rem;
margin: -2.25rem 0 0 -2.25rem;
background: #EBA43C;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(235, 164, 60, 0.3);
border-radius: 50%;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.photo img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.photo svg {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 1.5rem;
height: 1.5rem;
margin: -0.75rem 0 0 -0.75rem;
fill: white;
opacity: 0;
-webkit-transform: translate3d(0, 1.5rem, 0);
transform: translate3d(0, 1.5rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.filters {
padding: 0 0 3rem 0;
background: #655657;
color: white
}
.filters .button {
margin-top: 3rem
}
@media (max-width: 767px) {
.filters {
padding-top: 1.5rem
}
}
@media (min-width: 768px) {
.filters .input {
font-size: 0.875rem
}
}
.filters__select {
cursor: pointer;
z-index: 2;
position: relative
}
.filters__select ul {
margin: 0;
padding: 0;
list-style: none
}
.filters__select .select p {
padding-right: 0.75rem
}
@media (min-width: 768px) {
.filters__select {
font-size: 0.875rem
}
.filters__select:hover .filters__selected {
background: #816e6f
}
.filters__select:hover ul {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.filters__select ul {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #4a3f3f;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(74, 63, 63, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(74, 63, 63, 0.3);
border-radius: 0.25rem;
visibility: hidden;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.filters__select ul:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2.25rem;
height: 2.25rem;
margin: -0.75rem 0 0 -1.125rem;
background: #4a3f3f;
border-radius: 50%
}
}
@media (max-width: 767px) {
.filters__selected {
display: none
}
}
@media (min-width: 768px) {
.filters__selected {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0.75rem 1.5rem;
margin: 0;
background: #736263;
border-radius: 1.5rem;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: background 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.filters-list-wrapper {
padding: 4.5rem 0;
background: #584a4b;
color: white
}
.filters-list-wrapper .title {
color: #F44336
}
.filters-list {
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
max-height: 33rem;
overflow-y: auto
}
.dog-small {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: white;
background: #655657
}
.dog-small--expanded .dog-small__description {
display: block
}
.dog-small--expanded .dog-small__expand {
color: #F44336
}
.dog-small--expanded .dog-small__expand span:first-of-type {
display: none
}
.dog-small--expanded .dog-small__expand span:nth-of-type(2) {
display: block
}
.dog-small__image {
display: block;
width: 6rem
}
.dog-small__image img {
display: block;
width: 100%
}
.dog-small__content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 1.5rem
}
.dog-small__content ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.875rem
}
@media (min-width: 768px) {
.dog-small__content ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.dog-small__content li {
width: 20%;
padding-right: 0.25rem
}
}
.dog-small__name {
color: #EBA43C
}
.dog-small__description {
display: none
}
@media (min-width: 768px) {
.dog-small__description {
width: 75%
}
}
.dog-small__expand {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 6rem;
padding: 1.5rem;
text-align: center;
font-size: 0.875rem;
font-weight: 700;
color: #4CAF50;
background: rgba(0, 0, 0, 0.1)
}
.dog-small__expand p {
margin: 0
}
.dog-small__expand span:nth-of-type(2) {
display: none
}
.dogs-prev-next {
margin-top: 3rem
}
.dogs-prev-next p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0;
font-size: 0.875rem;
text-align: center;
background: white;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
border-radius: 1.5rem
}
.dogs-prev-next p span {
padding: 0.75rem 1.5rem
}
.dogs-prev-next p strong {
padding: 0.75rem 1.5rem;
padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
border: 2px solid #EBA43C;
color: #EBA43C;
background: rgba(249, 224, 95, 0.1);
border-radius: 1.5rem
}
@media (max-width: 767px) {
.dogs-prev-next p {
margin: 1.5rem 0
}
}
.dogs-next, .dogs-prev {
position: relative
}
.dogs-next svg, .dogs-prev svg {
position: absolute;
top: 50%;
width: 1.5rem;
height: 1.5rem;
margin-top: -0.75rem
}
.dogs-prev svg {
left: 1rem;
fill: #584a4b
}
.dogs-next svg {
right: 1rem;
fill: white
}
@media (min-width: 768px) {
.dogs-next svg {
-webkit-transition: fill 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: fill 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: fill 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.dogs-next:hover svg {
fill: #EBA43C
}
}
.dogs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -1.5rem;
margin-top: 1.5rem
}
@keyframes donut-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.dogs--loading {
overflow: hidden;
position: relative;
height: 6rem
}
.dogs--loading:after {
content: '';
position: absolute;
top: 1.5rem;
left: 50%;
height: 4.5rem;
width: 4.5rem;
margin-left: -0.75rem;
border-radius: 50%;
border: 0.25rem solid rgba(235, 164, 60, 0.1);
border-left-color: #EBA43C;
-webkit-animation: donut-spin 1.2s linear infinite;
animation: donut-spin 1.2s linear infinite
}
.dogs--loading .dog-wrapper {
opacity: 0
}
.dog-wrapper {
display: none;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-top: 1.5rem;
padding-left: 1.5rem;
width: 100%
}
@media (min-width: 480px) and (max-width: 767px) {
.dog-wrapper {
width: 50%
}
}
@media (min-width: 768px) {
.dog-wrapper {
width: 25%
}
}
.dog-wrapper--show {
display: block
}
.dog {
height: 100%;
background: white;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3)
}
@media (min-width: 768px) {
.dog:hover .dog__image img {
opacity: 0.5;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.dog:hover .dog__name:after, .dog:hover .dog__name:before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.dog:hover .dog__description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.dog__image {
overflow: hidden;
position: relative;
background: #5899A1;
padding-bottom: 100%
}
.dog__image:before {
z-index: 1;
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6rem;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(88, 74, 75, 0)), to(rgba(88, 74, 75, 0.5)));
background: -webkit-linear-gradient(rgba(88, 74, 75, 0), rgba(88, 74, 75, 0.5));
background: -o-linear-gradient(rgba(88, 74, 75, 0), rgba(88, 74, 75, 0.5));
background: linear-gradient(rgba(88, 74, 75, 0), rgba(88, 74, 75, 0.5))
}
.dog__image img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media (min-width: 768px) {
.dog__image img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
}
.dog__number {
z-index: 2;
position: absolute;
top: 1.5rem;
right: 1.5rem;
margin: 0;
padding-bottom: 0.75rem;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 700;
color: #F9E05F;
text-shadow: 0 0.25rem 0.25rem rgba(88, 74, 75, 0.1);
border-bottom: 2px solid #F9E05F
}
.dog__name {
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 1.5rem;
color: white;
text-shadow: 0 0.25rem 0.25rem rgba(88, 74, 75, 0.1)
}
@media (min-width: 768px) {
.dog__name:after, .dog__name:before {
content: '';
z-index: -1;
position: absolute;
bottom: 0;
height: 50%;
width: 50%;
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.dog__name:before {
left: 0;
background: -webkit-gradient(linear, left top, right top, from(#eba43c), color-stop(50%, #eba43c), color-stop(50%, #f0b848), to(#f0b848));
background: -webkit-linear-gradient(left, #eba43c 0%, #eba43c 50%, #f0b848 50%, #f0b848 100%);
background: -o-linear-gradient(left, #eba43c 0%, #eba43c 50%, #f0b848 50%, #f0b848 100%);
background: linear-gradient(90deg, #eba43c 0%, #eba43c 50%, #f0b848 50%, #f0b848 100%)
}
.dog__name:after {
left: 50%;
background: -webkit-gradient(linear, left top, right top, from(#f4cc53), color-stop(50%, #f4cc53), color-stop(50%, #f9e05f), to(#f9e05f));
background: -webkit-linear-gradient(left, #f4cc53 0%, #f4cc53 50%, #f9e05f 50%, #f9e05f 100%);
background: -o-linear-gradient(left, #f4cc53 0%, #f4cc53 50%, #f9e05f 50%, #f9e05f 100%);
background: linear-gradient(90deg, #f4cc53 0%, #f4cc53 50%, #f9e05f 50%, #f9e05f 100%)
}
}
.dog__content {
position: relative;
padding: 1.5rem
}
.dog__content ul {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 0.875rem
}
.dog__content li:first-of-type {
margin-right: 0.75rem
}
@media (max-width: 767px) {
.dog__description {
display: none
}
}
@media (min-width: 768px) {
.dog__description {
pointer-events: none;
z-index: 3;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 1.5rem;
color: white;
background: #584a4b;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 74, 75, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(88, 74, 75, 0.3);
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0);
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.dog__description:before {
content: '';
position: absolute;
top: 0;
left: 1.5rem;
width: 2.25rem;
height: 2.25rem;
margin-top: -0.75rem;
background: #584a4b;
border-radius: 50%
}
}
.footer {
padding: 3rem 0 6rem 0
}
.footer .h3, .footer .title, .footer h3 {
margin-top: 3rem
}
.footer a {
color: #584a4b
}
@media (min-width: 768px) {
.footer a:hover {
color: #EBA43C
}
}
.footer__nav {
margin-top: 3rem;
font-family: "Merriweather", serif;
font-weight: 900;
font-size: 1.333rem
}
.footer__nav ul {
margin: 0;
padding: 0;
list-style: none
}
.footer__nav li {
margin-top: 1.5rem
}
.footer__nav a {
color: #584a4b
}
.footer__nav ul ul {
display: none
}
@media (min-width: 768px) {
.footer__nav a:hover {
color: #EBA43C
}
}
.social-nav {
margin-bottom: 1.5rem
}
.social-nav ul {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.social-nav a {
position: relative;
display: block;
margin-top: 1.5rem;
padding: 1.75rem;
border-radius: 50%
}
.social-nav a:after, .social-nav a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%
}
.social-nav a:before {
z-index: 1;
border: 2px solid #EBA43C;
visibility: hidden;
opacity: 0;
-webkit-transform: translate3d(0, 0.75rem, 0);
transform: translate3d(0, 0.75rem, 0)
}
.social-nav a:after {
z-index: 2;
background: white;
-webkit-box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3);
box-shadow: 0 1.5rem 3rem -0.25rem rgba(189, 177, 178, 0.3)
}
.social-nav svg {
z-index: 3;
position: relative;
display: block;
width: 1rem;
height: 1rem;
fill: #584a4b
}
@media (max-width: 767px) {
.social-nav li:not(:last-of-type) {
margin-right: 1.5rem
}
}
@media (min-width: 768px) {
.social-nav ul {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.social-nav li:not(:last-of-type) {
margin-right: 0.75rem
}
.social-nav a:before {
-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.social-nav a:after {
-webkit-transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.social-nav svg {
-webkit-transition: fill 0.3s cubic-bezier(0, 0.5, 0.5, 1);
-o-transition: fill 0.3s cubic-bezier(0, 0.5, 0.5, 1);
transition: fill 0.3s cubic-bezier(0, 0.5, 0.5, 1)
}
.social-nav a:hover:before {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.social-nav a:hover:after {
opacity: 0
}
.social-nav a:hover svg {
fill: #EBA43C
}
}
@media (min-width: 768px) and (max-width: 1599px) {
.social-nav a {
padding: 1rem
}
}
.newsletter-form {
margin-top: 1.5rem
}
.newsletter-form form {
position: relative
}
.newsletter-form .input {
padding-right: 3.75rem
}
.footer__navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 1.5rem
}
.footer__privacy-nav {
margin-right: 1.5rem
}
.footer__privacy-nav p {
font-size: 0.75rem;
font-weight: 700;
color: #bdb1b2
}
.footer__privacy-nav ul {
margin: 0;
padding: 0;
list-style: none
}
.footer__privacy-nav a {
font-size: 0.75rem;
font-weight: 700;
color: #bdb1b2
}
@media (min-width: 768px) {
.footer__privacy-nav a:hover {
color: #EBA43C
}
}
.footer__lang-nav ul {
margin: 1.5rem 0 0 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.footer__lang-nav li:not(:last-of-type) {
margin-right: 1.5rem
}
.footer__lang-nav a {
font-size: 0.75rem;
font-weight: 700;
color: #bdb1b2
}
.footer__lang-nav li.current-lang a {
color: #EBA43C
}
@media (min-width: 768px) {
.footer__lang-nav a:hover {
color: #EBA43C
}
}   body.page-id-301 .radio-auswahl label{
cursor: pointer;
}
body.page-id-301 .wpcf7-radio .wpcf7-list-item-label{
padding-left: 2.5rem;
}
body.page-id-301 .wpcf7-radio .wpcf7-list-item {
position: relative;
display: block;
padding: 0.75rem 0rem;
}
.icon-container div {
border: #000 solid 1px;
padding: 5px;
border-radius: 90px;
margin: 25px;
}