@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');



p, a, span, h1, h2, h3, h4, h5, h6, div:not(.fas), option, select, ul, li, input, texarea, input::placeholder, textarea::placeholder, button, .PageContentTitle blockquote {
    font-family: 'Source Serif 4', serif !important;
} 

h1, h2, h3, h4, h5, h6, .btn, #tips .jumbotron p:first-of-type, .nav-link p, .nav-link {
    font-family: 'DM Serif Text', serif !important;
}

.btn {
   font-weight: normal;
}

.home-center-center h1 {
    font-size: 60px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .home-center-center h1 {
        font-size: 40px !important;
    }
}

.footer {
    background-color: #282828;
    color: white;
}
.footer a {
    color: white !important;
}
  

#social {
    background-color: #e61769; 
}


/*Inlogformulier aanpassingen */

#inlogformulier input[type="text"],
#inlogformulier input[type="password"] {
  display: block;
  box-sizing: border-box;
  margin-bottom: 0px;
  padding: 4px;
  width: 220px;
  height: 32px;
  border: none;
  border-bottom: 1px solid #AAA;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  transition: 0.2s ease;
}

#inlogformulier input[type="text"]:focus,
#inlogformulier input[type="password"]:focus {
  border-bottom: 2px solid #e61769;
  color: #e61769;
  transition: 0.2s ease;
}

#inlogformulier input[type="submit"] {
  margin-bottom: 15px;
  width: 120px;
  height: 32px;
  background: #e61769;
  border: none;
  border-radius: 2px;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  transition: 0.1s ease;
  cursor: pointer;
}

#inlogformulier input[type="submit"]:hover,
#inlogformulier input[type="submit"]:focus {
  opacity: 0.8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: 0.1s ease;
}

#inlogformulier input[type="submit"]:active {
  opacity: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: 0.1s ease;
}

#inlogformulier *:focus {
  outline: none;
}

/*Paginacontent zelfde achtergrondkleur als rest van de pagina*/

.PageContentUnder .col-md-4 {
    background-color: #fcfafa;
}

/*Streep in foto en onderaan op homepage*/
.homePage .homehrLine, .BorderlineHome {
    border-color: #fcfafa;
}

/*Navigatie-items dropdown goed weergeven*/
.dropdown-item p, .nav-link p {
    margin-bottom: 0px;
}


.home-center-center img {
    display: none;
}

@media (min-width: 500px) {
    .home-center-center h1 {
    margin-top: 200px;
}
}

@media (max-width: 499px) {
    .home-center-center h1 {
    margin-top: 50px;
}
}


@media (min-width: 992px) {
    #mainNav {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.webshop-header, .shopitem-details, .cardgrid-header, #shopping-card  {
    margin-top: 110px;
}

.textpage-header {
    margin-top: 21px;
}

/* 1. Rest-toestand: wit en bold */
#mainNav .navbar-nav .nav-item .nav-link {
  color: #fff !important;
  font-weight: normal !important;
}

/* 2. Hover-toestand: zwart */
#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #000 !important;
}

#tips .btn {
    font-size: 20px !important;
}

#mainNav {
  background-color: #e31e63 !important;
}

#mainNav .nav-link {
  color: #fff !important;
  font-weight: bold !important;
}

#mainNav .navbar-nav .nav-item .nav-link {
      font-size: 15px !important;
}

#mainNav .nav-link:hover {
  color: #000 !important;
}

@media (max-width: 1455px){
    #mainNav .navbar-nav .nav-item {
        padding-left: 0 !important;
    }
}

.navbar-header .col-4 {
  display: flex;
  align-items: center;
  min-height: 85px; /* hoogte logo reserveren */
}

/* CSS-fallback logo zodat er meteen beeld is */
.navbar-header .col-4::before {
  content: "";
  display: block;
  width: auto;
  height: 85px;
  background: url("https://bloemigkado.nl/media/zdycal0h/bloemig-kado-logo-edit.jpg") no-repeat left center;
  background-size: contain;
}


#empty-header {
    max-height: 84px;
}

#shopitem-details {
    padding-bottom: 50px;
}

#shopitem-details {
    margin-top: 100px;
}

@media (max-width: 767px) {
    #shopitem-details h1 {
        padding-top: 25px;
    }
    #shopitem-details {
        margin-top: 150px;
}
}

#locationsPlaceHolder .contactaddress {
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    #warranty .warrenty-heading {
        font-size: 22px |!important;
    }
}

form[action="/umbraco/Surface/WebshopSurfaceV2/DownloadInvoice"] button[type="submit"].btn.btn-secondary {
    margin-bottom: 50px;
}