/*
Theme Name: Bootstrap 5 Custom Theme
Theme URI: https://gertjanjanssen.nl
Author: Gertjan Janssen
Author URI: https://gertjanjanssen.nl/
Description: Blank page theme dev.

* {
    outline: 1px solid red;
  }
*/

:root {
    --step--2: clamp(0.48rem, calc(0.76rem + -0.34vw), 0.69rem);
    --step--1: clamp(0.77rem, calc(0.85rem + -0.10vw), 0.83rem);
    --step-0: clamp(1.00rem, calc(0.92rem + 0.39vw), 1.25rem);
    --step-1: clamp(1.20rem, calc(0.94rem + 1.29vw), 2.02rem);
    --step-2: clamp(1.44rem, calc(0.87rem + 2.87vw), 3.27rem);
    --step-3: clamp(1.73rem, calc(0.61rem + 5.60vw), 5.30rem);
    --step-4: clamp(2.07rem, calc(0.04rem + 10.19vw), 8.57rem);
    --step-5: clamp(2.49rem, calc(-1.08rem + 17.84vw), 13.86rem);
  }

body {
    background-color: #f8f9fa !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300;
}

.masthead {
    height: 50vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

/* FONTS */

#menu-menu-1 a {
    color:#000000cc !important;
}

a {
    color:#367595 !important;
}

p {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300;
    font-size: 1.1rem;
}

h1 {
    font-family: 'Oswald', sans-serif !important;
    font-size: var(--step-3) !important;
    font-weight: 600 !important;
}

h3.fw-600 {
    font-weight: 600 !important;
}

.main-content h2 {
    font-size: var(--step-1);
    font-weight: 600 !important;
}

blockquote {
    padding: 15px;
    background-color: #e3e3e3;
    border-left: 3px solid black;
}

.title_span{
    overflow: hidden;
    position: relative;
    font-weight: 500;
}
.title_span > span{
    display: inline-block;
    padding: 0 10px;
    position: relative;
    
    /* play with this one to move the text itself */
    left: 50vw;
}
.title_span > span::before{
    content: ''; width: 100vw;
    position: absolute; left: -100vw;
    border-bottom: 2px solid #000;
    
    /* This move the left line up and down */
    top: 49%;
}

/* NAVBAR */

.custom-nav A {
    font-size: 1.1rem;
    padding: 0 30px !important;

}

.dropdown-menu {
font-size: small !important;
}
 
.navbar-brand img {
    width: 125px;
    height: auto;
}

.border-black {
    border-top: 1px solid #3e3e3e !important;
}

.background_review {
    background: url(img/bg_quote.jpg) no-repeat center;
    background-size: cover;
    color: #ffffff !important;;
}

.quote P {
    font-family: 'Oswald', sans-serif !important;
    font-size: var(--step-1);
}

p.quote {
    font-family: 'Oswald', sans-serif !important;
    font-size: var(--step-1);
}

.background_spelers {
    background: url(img/8C8A6368_.jpg) no-repeat center;
    background-size: cover;
}

.main-content img {
    max-width: 100%;
    height: auto;
}

pre {
    padding: 15px;
    background-color: #e3e3e3;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
}

input[type=number]::-webkit-inner-spin-button {
width: 15px !important;
opacity: 1 !important;
}

input[type=number]::-webkit-outer-spin-button {
    width: 15px !important;
    opacity: 1 !important;    
}
/* CUSTOM BUTTON */


.btn-color-1 {
    color: #fff !important;
    background-color: #367595 !important;
    border-color: #367595 !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    border-radius: 20px !important;
  }
  
  .btn-color-1:hover,
  .btn-color-1:active,
  .btn-color-1:focus,
  .btn-color-1.active {
    /* let's darken #004E64 a bit for hover effect */
    background: #29607b !important;
    color: #ffffff !important;
    border-color: #29607b !important;
  }
  
  .pt-checkout-form {
    width: 100% !important;
  }