@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');





@keyframes fadein {

    from { opacity: 0}

    to   { opacity: 1}

  }

  





/*kleuren*/

.bg1{

    background-color: seashell;

}

.bg2{

    background-color: rgb(231, 180, 163);

}

.fontColor1{

    color: black;

}

/*html-tags*/



html{

    padding:0;

    margin:0;

}

body{

    padding:0;

    margin:0;

}





main{

    -ms-transition: all 2s;

    -o-transition: all 2s;

    -webkit-transition: all 2s;

    transition: all 2s;

}



h2{

    font-size: 3rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

    line-height: 3rem;

    font-style: normal;

    font-family: 'Great Vibes',Arial, Helvetica, sans-serif, cursive;

    text-shadow: 1px 1px 3px white ,3px 3px 7px pink, 5px 5px 7px grey, 3px 3px 7px bisque;

    font-weight: 500;

}

h3{

    font-size: 2rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

    line-height: 2.2rem;

    font-style: normal;

    font-family: 'Great Vibes',Arial, Helvetica, sans-serif, cursive;

    text-shadow: 1px 1px 3px white ,3px 3px 7px pink, 5px 5px 7px grey, 3px 3px 7px bisque;

    font-weight: 500;

}

small{

    font-size: 0.9rem;

    font-family:'Times New Roman', Times, serif;

    font-style: italic;

}

hr{

    width: 30%;

}

 /*Fonts*/

 html{

    font-size: 18px;

}

.greatVibes{

    font-family: 'Great Vibes',Arial, Helvetica, sans-serif, cursive;

}

.altFont{

    font-family: 'Times New Roman', Times, serif;

}

.altFont2{

    font-family: Arial, Helvetica, sans-serif;

}

.f1{

    font-size: 1rem;

}

.f1-1{

    font-size: 1.1rem;

}

.f1-2{

    font-size: 1.2rem;

}

.f1-5{

    font-size: 1.5rem;

}

.f1-8{

    font-size: 1.8rem;

}

.f2{

    font-size: 2rem;

}

.f3{

    font-size: 3rem;

}

.lineHeight3{

    line-height: 3rem;

}

.hr50{

    width: 50%;

}

.taon{

    font-family: "Caveat", cursive;

}



/*effects*/



.boxHover:hover{

    box-shadow: 3px 3px 7px white, 5px 5px 7px lightgray, 7px 7px 7px gray;

}



.hoverDonker:hover{

        text-decoration: none;

        color: brown;

        opacity: 50%;

    }

    

.slowFade{

    animation: fadein 4s;

}



.fixed-top{

    background-color: seashell;

    height: 3rem;

    border-bottom: 2px solid grey;

}

.boxShadow{

    box-shadow: 3px 3px 7px rgb(94, 94, 94), 5px 5px 7px grey, 7px 7px 7px lightgray;

}

.borderRond{

    border-radius: 20px;

}

.borderRondImg{

    width: fit-content;

    height: fit-content;

    border-radius: 20px;

}

.hoverLicht > a:hover{

    color: black;

    border-right: solid 3px rgb(231, 180, 163);

    border-left: solid 3px rgb(231, 180, 163);

    border-radius: 20px;

    background: seashell;

}

.hoverLichtDD:hover{

    color: black;

    border-top: solid 3px rgb(231, 180, 163);

    border-bottom: solid 3px rgb(231, 180, 163);

    border-radius: 20px;

}

.mt-9{

    margin-top: 9rem;

}

.geenBolletjes{

    list-style-type: none;



}





/*Maten*/

.maatCarousel{

    max-height: 30rem;

    max-width: 30rem;

}

.imgVierkantFixMaat{

    height: 17rem;

    width: 17rem;

}





/*Varia*/

.geefZ{

    z-index: 3;

}





/*id's*/



#TopOfPage{

    position: absolute;

    top: 0px;

    left: 0px;

    height: 0;

}

#banner{

    background-image: url(/images/Palm_banner_goed.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    opacity: 0.92;

    min-height: 15rem;

    padding-bottom: 1rem;

}

#socialMediaHoofding{

    z-index: 3;

    width: 15%;

    display: inline;

    background:none;

    border: 0px;

}

#socialMediaHoofding a{

    display: inline-block;

}



#welkomstTekstFoto{

    width: fit-content;

    height: fit-content;

    max-width: 588px;

    border-radius: 20px;



}

#welkomstTekstFoto img{

    position: relative;

    top: 0;

    left: 0;

    width: 588px;

    height: 395px;

    border-radius: 20px;



}
.BBFoto{

    width: fit-content;

    height: fit-content;

    max-width: 588px;

    border-radius: 20px;



}

.BBFoto img{

    position: relative;

    top: 0;

    left: 0;

    width: auto;

    height: 395px;

    border-radius: 20px;



}


#socialMediaContact{

    z-index: 3;

    min-width: 300px;

}

#socialMediaContact a img{

    height: 20%;

    width: 20%;

}

#titels

{

    margin: 0;

    padding: 0;

    width: 100%;

}

#hoofdTitel{

    text-align: center;

    width: 100%;

    text-shadow: 1px 1px 3px white ,3px 3px 7px pink, 5px 5px 7px grey, 3px 3px 7px bisque;

    line-height: 4.5rem;

    font-family: 'Great Vibes',Arial, Helvetica, sans-serif, cursive;

    font-size: 5rem;

    font-weight: 500;

}

#subTitel{

    font-family: 'Great Vibes',Arial, Helvetica, sans-serif, cursive;

    text-shadow: 1px 1px 3px white ,3px 3px 7px pink, 5px 5px 7px grey, 3px 3px 7px bisque;

    font-size: 2.5rem;

    

}

#asideContactAfbeelding{

    width: fit-content;

    height: fit-content;

    max-width: 300px;

    max-height: 400px;

}

#asideContactAfbeelding img{

    width: 300px;

    height: 400px;



}

#getuigenissenCarousel{

    height: 25rem;

}

#googleMap{

    width: 800px;

    height: 400px;

}

#googleMap iframe{

    width: 800px;

    height: 400px;

}





/*PRIJSLIJST*/

#prijslijst{

    display: block;

    box-sizing: border-box;

    margin-left: auto;

    margin-right: auto;

    padding: 10px;

    width: 90%;

    text-align: center;

    border: 1px solid black;

}

#prijslijst table{

    border-collapse: collapse;

}

#prijslijst caption{

    display: none;

}

#prijslijst th{

    font-family: 'Great Vibes',Arial, Helvetica, sans-serif, cursive;

    font-size: 1.8rem;

    font-weight: 300;

    text-decoration: underline;

}

#prijslijst td{

    border-width: 150%;

    border-spacing: 0px;

    width: 17rem;

    height: 4rem;

    font-size: 1.3rem;

}



/*TAON*/

#TaoN{

    font-family: 'Caveat','Times New Roman', Times, serif, cursive;

    transition: background 4s;

}

#TaoN a{

    font-family: 'Caveat','Times New Roman', Times, serif, cursive;

    color: black;

    text-decoration: none;

}

#TaoN:hover{

    background: linear-gradient(to right, rgb(231, 180, 163) 20%,white 50%, rgb(231, 180, 163) 80% );

}



/*mediaQuery's*/



@media (max-width: 900px){



    #socialMediaHoofding{

        visibility: hidden;

    }

    #googleMap{

        width: 600px;

        height: 300px;

    }

    #googleMap iframe{

        width: 600px;

        height: 300px;

    }



}

@media (max-width: 767px){

    

    #welkomstTekstFoto img{

        width: 294px;

        height: 198px;   

    }
    .BBFoto img{

        width: 294px;

        height: auto;   

    }
    .BBFoto p{

        width: 294px;

        height: auto;   

    }
    .tekstReactief{

        font-size: 0.8rem;

    }

    .tekstReactief1-5{

        font-size: 1.5rem;

    }



    #TaoN{

        transition: background 0s;

    }

    #TaoN:hover{

        background: none;

        background-color: rgb(231, 180, 163);

    }

    #footerPijlRechts{

        visibility: hidden;

    }

    #getuigenissenCarousel{

        height: 35rem;

    }

    #googleMap{

        width: 400px;

        height: 200px;

    }

    #googleMap iframe{

        width: 400px;

        height: 200px;

    }



    #prijslijst{

        width: 95%;

    }

    #prijslijst th{

        font-size: 1.2rem;

    }

    #prijslijst td{

        width: 15rem;

        height: 2rem;

        font-size: 0.7rem;

    }

    .maatCarousel{

        max-height: 20rem;

        max-width: 20rem;

    }



}

@media (max-width: 575px){

    #googleMap{

        width: 300px;

        height: 150px;

    }

    #googleMap iframe{

        width: 300px;

        height: 150px;

    }

}