@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Book.woff2.html') format('woff2'),
        url('https://www.vera2020.be/didimo/assets/fontsGotham-Book.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GothamBold';
    src: url('../fonts/Gotham-Bold.woff2.html') format('woff2'),
        url('../fonts/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.blue{
    color:#205a7c;
}

.pinkiewinkie{
    background-color:#c8354d;
}
.orangenewback{
    background-color:#db8343;
}

body, html{
    font-family: 'Gotham', sans-serif;
}

*{
    margin:0;
    padding:0;
    transition:all 0.3s;
}

p{
    padding:6.5px;
}

nav, header, main{
    max-width:1400px;
    margin:auto;
}

nav{
    margin-top:3vh;
    margin-bottom:3vh;
    display:flex;
    align-items:center;
    justify-content: flex-end;
}

nav a{
    color:black;
    padding-left:13px;
    padding-right:13px;
    color:black;
    font-family: 'GothamBold', sans-serif;
    text-decoration:none;
}

nav a:first-child{
    margin-right:auto;
    padding:0;
}



header{
    background-image: url(../images/bgtop.jpg);
    display:flex;
    justify-content: center;
    align-items:center;
    text-align:center;
    height:50vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:cover;
    flex-direction: column;
}
 
header h1{
    font-size:2rem;
    color:white;
    text-shadow:2px 2px 2px rgba(0,0,0,0.4);
}

#logo img{
    width:13vw;
}

#usp{
    text-align:center;
    padding:39px;
    font-family: 'GothamBold', sans-serif;
}

.tippie{
    height:39vh;
}

.video, .tippie{
    background-image:url(../images/bgfoot.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}


.video{ 
    height:60vh;
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items:center;
    margin-top:39px;
    color:white;
    font-size:1.4rem;
    font-family: 'GothamBold', sans-serif;
    text-align:center;
}

.video p, .video iframe{
    padding-bottom:39px;
    padding-top:39px;
}

.tippie{
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    font-size:1.4rem;
    font-family: 'GothamBold', sans-serif;
    text-align:center;
}

.triangle, .row article {
    position:relative; /* Position must be relative to absolutely position :after */
}

.row article:first-child{
    border-right:1px solid black;
}

.triangle:after{
    content:''; /* Required to display content */
    position: absolute; /* Sets the position absolute to the top div */
    top: 0; 
    left: 50%;
    margin-left: -50px; /* Set margin equal to border px */
    width: 0;
    z-index:1;
    height: 0;
    border-top: solid 50px #fff; /* Creates the notch */
    border-left: solid 50px transparent; /* Creates triangle effect */
    border-right: solid 50px transparent; /* Creates triangle effect */
}

.orange:after{
    border-top: solid 50px #db8343; /* Creates the notch */
}

.breathe{
    margin-top:6.5vh;
}

.row{
    display:flex;
    justify-content: center;
}

.half{
    flex: 0 0 48%;
    background-color:white;
    padding-top:70px;
}

.half p{
    font-size:1.3rem;
}

.bstrong{
    color:#205a7c;
    font-family: 'GothamBold', sans-serif;
}

.bpink{
    font-family: 'GothamBold', sans-serif;
    color:#c8354d;
}

.onb{
    color:white;
    text-decoration: none;
    padding:30px;
    margin-top:30px;
} 
.onb:hover{
    transform:scale(1.2);
}

.allcenter{
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    text-align:center;
}

footer{
    max-width:1000px;
    margin:auto;
    text-align:center;
    margin-top:39px;
}

#logobanner{
    width:80%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items:center;
}

#logobanner img{
    width: 130px;
    height:130px;
    margin:13px;
    object-fit:contain;
    object-position: center;
}

.smallimg{
    width:100px;
    height:100px;
}

.mobhide{
    display:none;
}

@media (max-width:1399px){ 
    nav{
        padding-left:39px;
        padding-right:39px;
    }
}

@media (max-width:960px){ 
    .mobhide{
        display:block;
        width:26vw;
        padding:26px;
    }
    .row{
        display:block;
    }
    .half{
        margin-bottom:46px;
    }
    nav a:first-child{
        display:none;
    }
    nav{
        justify-content: center;
    }
}


@media (max-width:500px){         

    .tippie{
        height:66vh;
    }
    
    .tippie p{
        font-size:1.3rem;
        padding:39px;
    }
    footer{
        padding:39px;
    }
}