@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Alef:wght@400;700&display=swap');

/* klleurn */
/* vlees */
/* #F79E68; of rgb(247,158,107) */
/* geel */
/* #F7CD82 rgb(247,205,130) */
/* grijs */
/* #5B584F of rgb(91,88,79);
/* 	groen */
/* #92A78C of	rgb(146,167,140) */
/* lichtgrijzig */
/* #E0D5AD of rgb(224,213,173) */
/* logobruin: rgb(247,205,130) */
/* donkerblauw: rgb(0,0,25); */
:root {
    --main-color: rgba(239,90,37,0.7);
    --main-color-hover: rgba(224,67,34,0.7);
    --main-geel: rgb(247,205,130);
    --main-geel-05: rgb(247,205,130,0.5);
    --main-grijs: rgb(91,88,79);
    --main-grijs-04: rgba(91,88,79,0.4);
    --main-groen: rgb(146,167,140);
    --main-groen-over: rgba(146,167,140,0.7);
    --main-groen-dark: rgba(146,167,140,0.3);
    --main-lichtgrijs: rgb(224,213,173);
    --wit-50: rgba(255,255,255,0.8);
    --vleesch: rgb(247,158,107);
    --logobruin: rgb(247,205,130);
    --logobruin-50: rgba(247,205,130,.5);
    --donkerblauw:rgb(0,0,25);
}

article {
    box-sizing: border-box;
    margin: 0 auto;
}

section {
  padding:2rem 0;
}
html, body{width:100%;padding:0;margin:0;}
body {
    background: var(--main-lichtgrijs);
    /* padding-top: 60px; */
    /* background-image: url(https://grotesprong.nl/img/internet-backgr.jpg); */
    background-attachment:fixed;
    font-family: 'Alef','Open Sans', sans-serif;
    /* font-size: 1em; */
    position: relative;
    height: 100%;

    color:#462300;

    	font-size:calc(2.2vw + 0.5rem );
}

body div.bgbody {
    /* zie responsive classes */
}




#pagefooter {
  display:flex;
  justify-content:center;
  position:fixed;
  box-sizing: border-box;
  bottom:0;
  width:100%;
    border-top: 1px solid #404040;
    background:rgb(247,205,130);
    /* color: #FFF; */
    height:40px;
    font-size:16px;
}
#pagefooter > * {text-align:center;margin:auto;}

/* uit qisign */
#mainindex::after {
/* content: " kijk voor meer op (" attr(data-href) ")  "; */
}

h1, .gs-pagetitle h1 {
    font-size: 2.5em;
    font-size:calc(3vw + 1rem );
    font-weight: 400;
}

h1,
h2,
h3 {
    font-family: Aldrich, 'Open Sans', sans-serif;
}

h2, .gs-pagetitle {
    font-size: 2rem;
    font-size:calc(2.5vw + 1rem );
    font-weight: 400;
    text-shadow: 1px 1px 2px black;
    color: var(--main-geel);
}

a {
    color: var(--main-geel);
    transition: 1s all;
}

a:hover,
a:active {
    color: var(--main-geel);
    text-decoration: none;
    text-shadow: 0 0 10px var(--main-grijs) , 1px 0 10px black;
}

ul {
    list-style-image: url(../img/star.png);
}

.inside {
    list-style-position: inside;
}

h1 > p {
    font-size: 60%;
    margin-top: 2rem;
    line-height: 1.5rem;
}

caption {
    font-size: 120%;
}

span[title] {
    text-decoration: underline;
}

#home {
    padding-top: 60px;
    padding-bottom: 0px;
    overflow: auto;
    position: relative;
}



/* start sprong navigation */
@media (min-width:992px) {
    nav #main-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav article img {
        display:inline;
        height: 60px;
    }
    nav > image, #mobilelogo {
         display:none;
    }
}

nav {

    background-color: rgba(255,255,255,1);
    border: none;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.8);
    margin: 0;
    padding: 0;
}

nav #main-menu > * {

    display: flex;
    justify-content:center;
   /*  align-items: center; */
    margin: 0px;
}


#site-navigation a, .dropdown a, nav ul, nav ul a {
  font-size:20px;
  margin:0;
  padding:0;
}

button {
  border:none;
  border-color:transparent;
  background-color: var(--main-color-hover);
  color: var(--main-geel);
  cursor:pointer;
  min-width:130px;
  font-size:20px;
  transition-duration: 2s;
}
button:hover {
  filter:hue-rotate(70deg);
  color:white;
  transition-duration: 2s;
}

nav ul li {
    display: block;
    margin: 0 5px;
    min-width:130px;
}
/* dropdown */
nav ul li ul {
    visibility: hidden;
     opacity: 0;
    position: absolute;
    transition: all 0.5s ease;
    padding-left: 0;
    top:27px;
    left: 0;
    width:100%;
     display: none;
    background-color: white;
    z-index: 1000;
}
li.dropdown-parent {
       min-width: 180px;

}
nav ul li:hover > ul,
nav ul li:focus-within > ul,
nav ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    transition: all 1s;
}

nav ul li ul li {
    clear: both;
    width: 100%;
    margin:0;
}

/* einde dropdown */

#site-navigation ul li ul li a{
/* font-size:16px; */
}

nav-link.active {
    /* text-shadow: none; */
}

footer ul li {
  display: inline-block;
}

/* nav mobile */
@media only screen and (max-width: 992px) {
    #site-navigation #main-menu img {
         display:none;
    }
    .gs-tweekolom div {text-align: center;}

}
/* #site-navigation > input:checked + #main-menu ul {
     display:block;
    padding-top:15px;
}
#site-navigation > input:checked + #main-menu ul li {
     height:auto;
    text-align:left;
    padding-left:15px;
}
#site-navigation > input:checked + #main-menu ul li ul {
    visibility: visible;
     opacity: 1;
    position: relative;
    padding-top: 0;
    top:auto;
    left: auto;
     display: block;
    z-index: 100000;
} */

/* einde navigatie  --------------------------------   NAV  ------- */

.gs-pagetitle {
    text-align: center;
}
.gs-pagetitle img, .gs-tweekolom img {
  max-width:99%;
}


#kreet article,
#aanpak article,
#overmij article {
    padding: 50px 5%;
    background-color: var(--wit-50);
}

#kreet > * ,
#aanpak > * {
    text-align: center;
}

/* --------------------cursussen---------- */


#aanpak {
    margin: 50px auto;
}
.card-aanpak {
    flex: 1 1 auto;
}

.card-aanpak ul {
    padding: 0;

    /* list-style-type:none;
    list-style-image:none; */
}


/* CARDS ------------------------- */
.cardgroup-sprong {
  box-sizing: border-box;;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 0 20em;
    margin-bottom: 50px;
    background-color: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 25px 1px rgba(255, 255, 255, 0.425) , 0 0 50px 20px rgba(0, 0, 0, 0.25) inset;
}



.card header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color-hover);
  padding: 20px;
  text-align: center;
}

.card header h2 {
    margin: auto;
    padding: 1rem;
}

.card footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.card section {
    padding: 2rem;
    flex: 1;
    background-color: var(--donkerblauw);
}

.card section h3:before {
    content:url(../img/star.png);
}
.card section h3{
    color:green;
}

.cardgroup-sprong header img[src*='wordpress'] {
    background-color: rgba(255,255,255,0.7);
    border: solid 15px rgba(255,255,255,0.1);
}

.cardgroup-sprong header img {
    max-width: 250px;
}

.cardgroup-sprong footer {
    display: flex;
    background-color: var(--main-color-hover);
    justify-content: center;
}

.cardgroup-sprong {
    color: var(--main-geel);
}

.cursussen.cardgroup-sprong header {
     min-height: 300px;
}


form {
  padding-right:2em;
}


/* ----------------------------------- einde cursussen ------aanpak-------------------- */
/* /////////////////      CONTACT  //////////////////////////////////////////////////// */
/* start sprong contact */
#contact {
    display: flex;
    background: var(--wit-50);
    color: var(--main-grijs);
    padding: 80px 0 80px 0;
    justify-content: space-around;
}

#contact div {
    flex: 1 1 50%;
    padding: 0 1rem;
}

#contact-form {
    display: flex;
    flex-direction: column;
}

#contact-form > * {
    flex: 1 1 100%;
}

#contact a,
#info a {
    color: var(--main-geel);
    font-weight: bold;
    text-shadow: 0 0 5px var(--main-grijs) , 1px 0 1px black;
    letter-spacing: 0.05em;
    transition: all 0.5s;
}

#contact a:hover,
#contact a:active ,
#info a:hover,
#info a:active {
    /* color: var(--main-grijs); */
    text-decoration: none;
    text-shadow: 0 0 10px var(--main-grijs) , 1px 0 10px black;
}

#contact h3 {
    font-weight: 400;
    text-shadow: 1px 1px 2px black;
}

/* #contact .text-center p { padding: 0 0 60px 0; } */
#contact h2,
#contact h3 {
    padding: 0 0 20px 15px;
    color: var(--main-geel);
}

.form-control {
  background-color: var(--logobruin);
border: 5px solid var(--main-color);
border-radius: 0px;
color: var(--main-grijs);
margin: 10px 0 10px 0;
transition: all 1s;
padding: 15px;
width:100%;
}

/* #contact ::placeholder {
  color: var(--donkerblauw);
  color:black;
} */

/* #contact input {
    width: 100%;
    height: 30px;
}

#contact textarea {
    width: 100%;
} */

/* breedtes gelijkmaken */
input, select, textarea{
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
}


.form-control:focus {
    color: white;
    background: var(--main-grijs);
    border-color: transparent;
    box-shadow: none;
}

.form-control:focus:invalid {
    border-color: var(--main-color);
    box-shadow: none;
}

[placeholder]::-webkit-input-placeholder,
[placeholder]::-moz-placeholder,
[placeholder]::-ms-input-placeholder {
    color: var(--donkerblauw);
    transition: color 2s;
    padding-left: 10px;
}

[placeholder]::-moz-placeholder {
    transition: color 2s;
    margin-left: 10px;
}

[placeholder]:focus::-webkit-input-placeholder,
[placeholder]:focus::-moz-placeholder,
[placeholder]:focus::-ms-input-placeholder {
    color: var(--donkerblauw);
    transition: opacity 0.5s 0.5s ease;
    opacity: 0;
}

form input[type="submit"] {
  background: var(--main-grijs);
    color: white;
    font-weight: 600;
    letter-spacing: 1px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

form input[type="submit"]:hover {
    background: var(--main-grijs);
    border-color: transparent;
    color: #FFF;
}

#contact .address {
    padding: 20px;
    padding-top: 0;
    margin: 0;
}

#contact .fa {
    color: var(--main-grijs);
    font-size: 20px;
    padding: 6px 10px 6px 0;
}

/* end sprong contact //////////////////////// */
/* start sprong footer */


/* nog bootstrap... */
.shrink {
    height: 50px;
    transition: all 0.5s;
}

.grow {
    height: 70px;
    transition: all 0.5s;
}

/* end sprong navigation */
/* einde grid ///////////////////////////////////////////// */
#info-load {
    /* display:none; */
}

/* BUTTONS */

button {

}

a.button {
  text-decoration:none;
  text-shadow: 2px 2px 3px black;
  box-shadow: 2px 1px 8px 4px rgba(0,0,0,0.3);
  font-size:120%;
  background-color: var(--main-color-hover);
  color: var(--main-geel);
  border-color: var(--main-groen-over);
}
a.button:hover {
    background-color: var(--main-color);
    border-color: var(--main-groen-dark);
    box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.3);
    transition: .5s all;
}

a.button-primary {
    transition: 3s all;
    padding:2rem;

}
a.button-primary:hover {
  padding:3rem;
  filter:hue-rotate(180deg);
}


.button-success {
    transition: 1s all;
}
.btn-kleiner-parent {
     margin: 2rem auto;
}
a.button-kleiner {
    background-color: var(--main-color-hover);
    padding: 1rem;
    margin: 1rem auto;
    filter:hue-rotate(180deg);
    color: white;
}
a.button-kleiner:hover {
    padding:1.5rem;
    filter:hue-rotate(0deg);
    color:var(main-color);
}
.logo {
    margin-left: -15px;
}

hr {
    height: .2rem;
    background-image: url(../img/internet-backgr.jpg);
}

#info hr {
    background-image: none;
    background-color: var(--main-color);
}

/* #cursussen article ul.zk-list-inside
 {
	list-style-position: outside;
} */
#kreet div.bg,
.bg-contact,
#overmij div.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 230%;
    z-index: -1;

    /* background-position: center; */
    background-repeat: no-repeat;
}

#kreet,
#contact-wrapper,
#overmij {
    position: relative;
    /* padding: 50px 0; */
    overflow: hidden;
}
#overmij {
  padding-bottom:6em;
}



/* #aanpak a,
#kreet a {
    color: var(--main-color);
    font-weight: bold;
}

#aanpak a:hover,
#kreet a:hover {
      font-weight: bold;
    text-shadow: 0 0 1px var(--main-grijs);
} */

#aanpak .container,
#kreet .container {
    padding: 50px 0;
    background-color: var(--wit-50);
}

#wordpress-load .form-control::placeholder,
#html-load .form-control::placeholder,
#dreamweaver-load .form-control::placeholder {
    color: var(--main-grijs);
}

#info {
    padding-top: 50px;
    position:relative;
}

#info article > div.card {
    height: calc(100%);
    margin: 15px;

    /* background-color:var(--main); */
}

#info h1 {
    /* color:var(--wit-50); */
    text-align: center;
}

header.d-flex div {
    margin: auto;
    background-color: indianred;
}

header.d-flex div h1 {
    margin: 15px;
}

/* .flex-card-aanpak > div.card {
    height: calc(100%);


}
.flex-card-aanpak > section, #info article {
    min-width: 300px;
} */
.filter img {
    float: left;
    margin-right: 2rem;
    filter: sepia() blur(2px) drop-shadow(1px 5px 5px black);
    transition: all 1s;
}

.filter img:hover {
    filter: sepia();
}

.paddingtop {
    padding-top: 50px;
}

.paddingbottom {
    padding-bottom: 50px;
}

.gs-list-inside {
    padding:0;
    list-style-position: inside;
    list-style-image: url('../img/star.png');
}

.gs-list-inside li::after  {
    position:absolute;
    margin-left:.4rem;
   content:url('../img/star.png');

}

.gs-list-nomargin {
    /* list-style-position: inside; */
    list-style-image: url('../img/star.png');
    padding-left: 0;
}

/* half dekkende zwarte achtergrond met witte tekst */
.zk-half-trans-bg-zw {
    background-color: rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.425);
    color: white;
    padding-bottom: 50px;
    padding-top: 50px;
}

.zk-half-trans-bg-zw h1,
.zk-half-trans-bg-zw h2,
.zk-half-trans-bg-zw h3 {
    /* color:white; */
}

/* /* start sprong zk-bg-white */
.zk-bg-white {
    background: #F9F9F9;
    border-bottom: 1px solid #f0f0f0;
    padding: 60px 0 60px 0;
}

.zk-bg-white h2 {
    font-weight: 400;
    padding-bottom: 20px;
}

.zk-bg-white h3 {
    font-weight: 400;
    padding-bottom: 6px;
}

.zk-bg-white a {
    color: rgba(187,82,28,1.00);
    text-decoration: underline;
}

.zk-bg-white .fa {
    background: #ffa400;
    border-radius: 50%;
    color: #FFF;
    font-size: 28px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.zk-bg-white .fa:hover {
    background: #303030;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* end sprong zk-bg-white */
.gs-green {
    color: #cccc99;
}

.gs-darkgreen {
    color: #7D7D3E;
}

.gs-skin {
    color: #ffcc99;
}

.gs-skin-txt {
    color: #462300;
}

.blue {
    color: #06C;
}

.green {
    color: #090;
}

/* start sprong team */
#team {
    background: #F9F9F9;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 60px 0 60px 0;
}

#team .col-md-3 {
    margin-bottom: 20px;
}

#team h2 {
    font-weight: 400;
    padding: 0 0 20px 0;
}

#team h3 {
    background: #FFF;
    color: #ffa400;
    font-weight: 600;
    padding: 10px;
}

#team img {
    cursor: pointer;
    display: inline-block;
    margin-top: 60px;
    margin-bottom: 10px;
    position: relative;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#team img:hover {
    border-radius: 50%;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.7;
}

/* end sprong team */
/* start sprong portfolio */
#portfolio {
    text-align: center;
    padding: 60px 0 100px 0;
}

#portfolio h2 {
    font-weight: 400;
    padding: 0 0 20px 0;
}

#portfolio p {
    margin-bottom: 60px;
}

#portfolio .col-md-3 {
    padding: 4px;
}

#portfolio .image_thumb {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

#portfolio .image_thumb .image_overlay {
    background: #ffa400;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    top: 0;
    left: 0;
    bottom: 0;

    /* padding-top: 46px; */
    text-align: center;
}

#portfolio .image_thumb:hover .image_overlay {
    opacity: 0.9;
}

#portfolio .image_thumb .image_overlay .fa {
    background: #EEE;
    border-radius: 50%;
    color: #444;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    opacity: 1;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#portfolio .image_thumb a:hover {
    text-decoration: none;
}

/* end sprong portfolio */
footer .social_icon a {
    border: 1px solid #FFF;
    border-radius: 50%;
    color: #FFF;
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    margin: 0 4px 24px 6px;
}

footer .social_icon a:hover {
    border-color: transparent;
    background: #ffa400;
}

/* end sprong footer */
/* startsprong  go top */
.go-top {
    background-color: var(--main-lichtgrijs);
    border-radius: 50%;
    bottom: 2em;
    right: 2em;
    color: #666;
    display: none;
    position: fixed;
    text-decoration: none;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.go-top:hover {
    color: #F9F9F9;
}

/* end sprong go top */
/* start sprong blok inner container */




@media (min-width: 768px) {
    article {
        width: 700px;
    }
    .card {
        margin: 1em;
    }
    body div.bgbody {
         position: fixed;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        z-index: -10;
        display: block;
        background-image: url(../img/internet-backgr.jpg);
        background-size: 100% auto;
        background-repeat: repeat-y;
        width: 100%;
        height: 1200%;
    }


    /* font sizes */
    body{
        font-size:calc(1vw + .5rem );
    }

    #site-navigation a  {font-size:20px;}


    h1, .gs-pagetitle h1 {
        font-size: 2.5em;
        font-size:calc(3vw + .5rem );
    }
      h2 {
        font-size:calc(2vw + .5rem );
      }



    /* twee kolommen mod */
    .gs-tweekolom {
        display:flex;
        align-items: center;
        min-height:calc(100vh - 100px);
    }
    .gs-tweekolom > * {
      flex: 1 1 50%;
    }

    #contact{background-color: transparent;}

    #contact-wrapper div.bg-contact,
    #kreet div.bg,
    #overmij div.bg
     {
        background: url(../img/internet-white.jpg) repeat;
        background-size: 100%;
        background-blend-mode: luminosity;
        background-color: #42531d;
        filter:hue-rotate(180deg);
}
}

@media (min-width: 992px) {
    article {
        width: 900px;
    }

}

@media (min-width: 1200px) {
    article {
        width: 1000px;
    }
    #site-navigation a  {font-size:20px;}
}

/* end sprong page container */
@media only screen and (max-width:1024px) {
    .logo {
        height: 50px;
    }


}

@media only screen and (max-width: 1199px) {
}

/* start sprong 768 media quires */
@media only screen and ( max-width: 768px ) {
  #pagefooter {
    justify-content: center;
  }
  #pagefooter > * {text-align:center;margin:auto 0;}
  #pagefooter button {
    min-width:auto;
    width:auto;
    font-size: 10px;
  }
  #pagefooter div {
    font-size:10px;
  }
    h2 {
        /* font-size: 1.2rem; */
    }
    #contact {
        background-color: var(--donkerblauw);
    }
    #contact .formsection {
        flex: initial;
    }
}

/* end sprong 768 media quires */
/* start sprong 680 media quires */
@media only screen and ( max-width: 680px ) {
    nav li a {
        border-bottom: 1px solid #f6f6f6;
        line-height: normal;
        height: 40px;
    }

    #contact {
        display: block;
    }
}

/* end sprong 680 media quires */
/* start sprong 600 media quires */
@media only screen and ( max-width: 640px ) {
}

/* end sprong 600 media quires */
@media only screen and (min-width:1200px) {
}


/* GLOBALE STIJLEN moet naar layout stylesheet */
/* properties voor een flex-item */


[data-flex-20w] {flex: 1 1 20%;}[data-flex-30w] {flex: 1 1 30%;}
[data-flex-40w] {flex: 1 1 40%;}[data-flex-50w] {flex: 1 1 50%;}
[data-flex-60w] {flex: 1 1 60%;}[data-flex-70w] {flex: 1 1 70%;}
[data-flex-80w] {flex: 1 1 80%;}