/* * */
* {
    font-family: 'Times New Roman', Times, serif;
    padding: 0;
    margin: 0;
}

/* Show- en HideOnMobile
/* Stijlen voor schermen groter dan of gelijk aan 768px breedte */
@media only screen and (min-width: 1045px) {
    .HideOnMobile {
        display: block;
    }

    .ShowOnMobile {
        display: none;
    }
}

/* Stijlen voor schermen kleiner dan 768px breedte */
@media only screen and (max-width: 1044px) {
    .HideOnMobile {
        display: none;
    }

    .ShowOnMobile {
        display: block;
    }
}

/* Body */
body {
    overflow-y: scroll;
    overflow-x: hidden;
}

.font-size-large {
    font-size: large;
}

.ShowOnMobile .big {
    height: 75%;
    width: auto;
    max-width: 100%;
    overflow-x: hidden;
}

.float-right {
    float: right;
}

.ShowOnMobile {
    overflow-x: hidden;
}

.card-inner-padding-left {
    padding-left: 20%;
}

.facebook{
    padding-left: 3%;
}

.nav-padding {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.padding-l-25 {
    padding-left: 25px;
}

.padding-r-25 {
    padding-right: 25px;
}

.padding-box {
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 2%;
}

.padding-box-mobile {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
}
.pading-bottom-10 {
    padding-bottom: 500px;
}

.bg-green {
    background-color: #405448;
}

.bg-light-green {
    background-color: #fff;
}

.bg-brown {
    background-color: #52725E;
}

.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

.text-decoration-none {
    text-decoration: none;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.position-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.height-auto {
    height: auto;
}

.height-50 {
    height: 50px;
}

.height-100 {
    height: 100px;
}

.bi {
    padding-left: 5px;
    padding-right: 5px;
    height: 64px;
    width: 64px;
}

.x-large {
    font-size: 2.5rem;
}

.xx-large {
    font-size: 3rem;
}


.shadows-font {
    font-family: "higuen", 'Biem Hand', sans-serif;
    font-weight: 500;
    font-style: normal;
}

.white {
    color: #fff;
}

.brown {
    color: #52725E;
}



.z-index-0 {
    position: relative;
    z-index: 0;
}

.z-index-1 {
    position: absolute;
    z-index: 1;
}

/* Navbar */
.navbar-container .col-md-9 {
    height: 5%;
}

.navbar-container h3 {
    color: white !important;
}

.ShowOnMobile .navbar-container .icon {
    color: white !important;
    font-size: xx-large;
}

.navbar-container .icon {
    color: white !important;
}

.navbar-container .dropdown-item {
    color: #52725E !important;
}

.HideOnMobile .icon {
    font-size: 3rem;
    padding-right: 20px;
}

.lang {
    font-size: large;
}

.navbar-container a:hover {
    color: #405448 !important;
}

.dierenarts-box {
    background-color: #405448;
}

.dierenarts-box:hover {
    background-color: #52725E;
}

.dierenarts-font {
    color: #52725E;
}

.languages-mobile {
    padding-right: 10%;
}

/* Logo-Section */
.logo-section {
    background-color: #fff;
    padding-left: 10%;
}

.logo-section-mobile {
    background-color: #fff;
}

.logo-section #phytovet-logo {
    padding-top: 30%;
    padding-bottom: 5%;
    width: 75%;
    height: auto;
}

.logo-section-mobile #phytovet-logo-mobile {
    padding: 5%;
    width: 100%;
    align-items: center;
    height: auto;
}

.logo-section-mobile h1 {
    padding-left: 5%;
    padding-right: 5%;
    font-size: x-large;
    text-align: center;
    width: 100%;
    align-items: center;
    height: auto;
}

.mobile-button {
    width: 100%;
    text-align: center;
}

.logo-section #girlwithhorse-picture {
    width: 100%;
    height: auto;
}

.logo-section-mobile #girlwithhorse-picture-mobile {
    padding-top: 5%;
    width: 100%;
    height: auto;
}

/* Supplementen section */
.supplementen-section {
    background-color: #52725E;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
    text-align: center;
    color: #fff;
}

.supplementen-section h1 {
    padding-bottom: 3%;
}

.supplementen-section img {
    padding-bottom: 4%;
    transition: transform 0.3s ease;
    width: 80%;
    height: auto;
}

.supplementen-section img:hover {
    transform: scale(1.1);
}

.supplement {
    background-color: #fff;
    margin-left: 2%;
    margin-right: 2%;
    color: #52725E;
    border: solid 2px #fff;
    border-radius: 20px;
}

.supplement-mobile {
    text-decoration: none;
}

/* Fluid Banner */
.fluid-banner {
    text-decoration: none;
    width: 100%;
    margin: 0;
    background-color: #405448;
    display: flex;
    align-items: center;
    height: 10vh;
    overflow: hidden;
}

.fluid-banner:hover {
    background-color: #52725E;
}

.scroll {
    white-space: nowrap;

}

.scroll div {
    display: flex;
    gap: 2em
}

.scroll p {
    font-size: 4em;
    color: white;

    margin-bottom: 0;
    line-height: 10px;
}

.RightToLeft {
    animation: RightToLeft 20s infinite linear;
}

@keyframes RightToLeft {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%)
    }
}

/* Banner */
.banner {
    height: 100px;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    align-items: center;
}

/* Over Section*/
.over-section {
    background-color: #fff;
    color: #52725E;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
}

.over-section-2 {
    background-color: #fff;
    color: #52725E;
    padding-right: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
}

.over-section h1,
.over-section-2 h1 {
    font-size: 3rem;
    font-weight: 700;
}

.over-section img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    height: auto;
    text-align: center;

    align-items: center;
}

.over-quote {
    position: relative;
    z-index: 1;
}

.over-quote-mobile {
    padding-top: 20%;
    text-align: center;

}

.quote-background {
    opacity: 0.3;
    position: absolute;
    z-index: 0;
    width: 20%;
    height: auto;
}

.over-text {
    text-align: left;
}

.over-text-mobile {
    padding-top: 5%;
    text-align: left;
}

.over-bondgenoot {
    position: relative;
    padding-top: 5%;
    z-index: 1;
    text-align: right;
}

.over-bondgenoot-text {
    position: relative;
    display: block;
    padding-top: 10%;
    padding-left: 10%;
    z-index: 1;
    text-align: left;
}

.over-bondgenoot-mobile {
    padding-top: 10%;
    text-align: center;
}

.over-bondgenoot-text-mobile {
    padding-top: 5%;
    font-size: x-large;
    text-align: center;
}

.video-hond {
    display: flex;
    border-top: solid 10px #52725E;
    border-right: solid 10px #52725E;
    border-bottom: solid 10px #52725E;
    margin-left: 0;
    width: 100%;
    height: auto;
}

.video-hond-mobile {
    display: flex;
    width: 100%;
    height: auto;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Cero-Section */

.cero-section img {
    margin-top: 0;
    padding-top: 0;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    height: auto;
}

.cero-section-mobile {
    padding-top: 5%;
    padding-left: 2%;
    padding-right: 2%;
}

.cero-phyto {
    color: #52725E;
    text-align: center;
    padding-top: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.cero-phyto-mobile {
    color: #52725E;
    text-align: center;
    padding-top: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.cero-inner-container {
    margin-bottom: 5%;
    padding-bottom: 2%;
}

.cero-inner-text {

    color: #52725E;
    text-align: center;
}

.cero-inner-text-mobile {
    font-size: x-large;
    color: #52725E;
    text-align: center;
}

/* Animals Container */
.animals-container {
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 20%;
    padding-right: 20%;
    background-color: #cbd1a7;
}

.animals-container img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    padding-top: 25px;
    transition: transform 0.3s ease;
    position: relative;
}

.animals-container h3 {
    text-align: center;
    padding-top: 10px;
    color: #52725E;

}

.animals-container img:hover {
    transform: scale(1.1);
}

.animals-quote {
    padding-top: 5%;
    color: #52725E;
}

/* Contact */
.contact-images {
    padding-right: 10%;
    padding-bottom: 10%;
    height: 125px;
}

.image-contact {
    width: 100%;
    height: auto;
}

.contact-section {
    text-align: center;
    background-color: #52725E;
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
}

.contact-section-mobile .col-md-12 {
    border-bottom: solid 1px #ddd8d0;
}

.contact-section a,
.contact-section h1 {
    text-decoration: none;
    font-family: "higuen", 'Biem Hand', sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #fff;
}

.contact-section a:hover {
    text-decoration: none;
    font-family: "higuen", 'Biem Hand', sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #405448;
}

.contact-inner-container {
    height: auto;
    color: #ffffff;
}

.contact-inner-container h1,
.contact-inner-container h2 {
    color: #ffffff;
}

.contact-inner-container a {
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

.contact-inner-container a:hover {
    color: #cbd1a7;
}

/*****************************************
Kennisbankpagina
*****************************************/
.card-title img {
    height: 64px;
    width: 64px;
    border: 4px solid #52725E;
    border-radius: 50%;
    background-color: #52725E;
}

.card-title a {
    text-decoration: none;
    color: #52725E;
    margin-left: 1%;
}

.card-title a:hover {
    color: #0275BC;
}

.animals-container-small .width_80 {
    width: 80%;
    margin: 0 auto;
    /* Center the container */
}

.animals-container-small .col-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items horizontally */
    justify-content: center;
    /* Center items vertically */
    text-align: center;
}

.animals-container-small img {
    width: 70%;
    height: auto;
    padding-top: 25px;
    transition: transform 0.3s ease;
    position: relative;
}

.animals-container-small h1 {
    padding-top: 10px;
    text-align: center;
    color: #52725E;
}

.animals-container-small h3 {
    padding-top: 10px;
    color: #52725E;
}

.animals-container-small img:hover {
    transform: scale(0.9);
}

.kennisbank-inner-container {
    padding-left: 25%;
    padding-right: 25%;
}

.kennisbank-container h1 {
    color: #52725E;

}

/* Footer */
.footer {
    margin-top: 0;
    color: #ffffff;
    background-color: #52725E;
}

.footer a {
    text-decoration: none;
    color: #cbd1a7;
}

.mobile-logo-footer {
    padding: 5%;
    width: 100%;
    height: auto;
}

.footer img {
    width: 100%;
    height: auto;
}


.a-footer-mobile {
    text-decoration: none;
    color: #cbd1a7;
}

.copyright-mobile {
    font-size: large;
    padding: 2%;
}

/* Privacy/cookie */
.privacy {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #fff;
    color: #52725E;
}

/* Blog */
.post-box {
    border-radius: 15px;
}

.post-box h3 {
    border-bottom: 2px solid #eeeeee;
}

.post-box p {
    border-top: 2px solid #eeeeee;
}



.post-box a {
    text-decoration: none;
    color: #52725E;
}

.post-box a:hover {
    text-decoration: underline;
    color: #52725E;
}

/* Styles for the preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* You can set any background color or use transparent */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure the preloader is on top */
}

/* Hide the main content initially */
body.loading .main-content {
    display: none;
}

/* Styles for the loading image */
.preloader_image {
    width: 150px; /* Adjust the size of the loading GIF as needed */
    height: auto;
}

/* Styles for the logo */
.logo_preloader {
    width: 300px; /* Adjust the size of the logo image as needed */
    height: auto;
    margin-top: 5px; /* Add space between the loading GIF and the logo */
}