/*kleuren:
lichtblauw: d9eeec
blauw: 64b2cd
donkerblauw: 3c70a4
goud: da9833
*/

body {
    font-family: 'Spartan', Verdana, Geneva, sans-serif;
}

/*========================================*/
/*================nav+logo================*/
/*========================================*/

h1 {
    padding-top: 50px;
    color: white;
}
h1, .navbar-brand{
    font-family: 'Righteous', Verdana, Geneva, sans-serif;
}

header{
    /* margin-top: 300px; */
    color: white;
    height: 100vh;
    background: no-repeat center url("../img/sfeer.jpg");
    background-size: 100% 100%;
}

.material-icons{
    font-size: 50px;
    display: block;
}

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

.navbar{
    background-color: #3c70a4 !important;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: #3c70a4;
    background: #d9eeec;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus,
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
    color: #d9eeec !important;
    background-color: #da9833;
}
nav div div a:focus
{
    color: #d9eeec !important;
    background-color: #da9833 !important;
}

nav a:focus,
nav a:hover
{
    color: #da9833 !important;
    background-color: #3c70a4;
}

/*========================================*/
/*================over ons================*/
/*========================================*/
#inbegrepen h2 {
    /* padding-top: 20px; */
    padding-bottom: 15px;
    text-align: center;
    
}

#inbegrepen {
    padding-top: 50px !important;
    background-color:#64b2cd !important;
    font-size: 20px;
}

/*=========================================*/
/*================portfolio================*/
/*=========================================*/

@media screen and (min-width: 992px) {
}

.included-item{
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    /* background-color: rgba(218, 152, 51, 0.9); */
}

.included-item:link{
    text-decoration: none;
}

.included-item:focus{
    opacity: 1 !important;
    border: 10px solid #fff;
}

.included-item:hover{
    background-color: rgb(218, 152, 51);
    /* opacity: 1 !important; */
    color: white;
}

.portfolio-item{
    max-width: 35rem !important;
    /*margin: 30px 30px !important;*/
}

.modal a:link,
.modal a:visited{
    text-decoration: none;
    background-color: transparent !important;
    color: #3c70a4 !important;
    font-weight: bold;
    font-size: 2rem;
}

.modal a:focus,
.modal a:hover{
    background-color: transparent !important;
    color: #da9833 !important;
}

.btn-onzebtn{
    color: #d9eeec;
    background-color: #3c70a4;
    /* border-color: #64b2cd; */
}

.btn-onzebtn:focus,
.btn-onzebtn:hover{
    color: #d9eeec;
    background-color: #da9833;
    /* border-color: #64b2cd; */
}

.modal .btn-times{
    color: #3c70a4 !important;
    background-color: transparent !important;
}

.modal .btn-times:focus,
.modal .btn-times:hover{
    color: #da9833 !important;
    background-color: transparent !important;
}


#logo{
    margin-top: 50px;
    height: 50%;
    width: 100%;
    color: #64b2cd;
}

footer{
    background-color: #3c70a4 !important;
    color: #d9eeec;
}

footer a:link,
footer a:visited{
    background-color: transparent !important;
    color: #da9833 !important;
}


footer a:focus,
footer a:hover{
    background-color: transparent !important;
    color: #d9eeec !important;
}

ul{
    /* list-style: none; */
    align-items: left;
    text-align: left;
}

li{
    padding-bottom: 20px;
}

#location img{
    margin-bottom: 40px;
}

body.modal-open {
    overflow: visible !important;
}