/*fonts*/
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 8, 2018 */



@font-face {
    font-family: 'deliciousbold';
    src: url('../fonts/delicious-bold-webfont.woff2') format('woff2'),
         url('../fonts/delicious-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'deliciousbold_italic';
    src: url('../fonts/delicious-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/delicious-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'delicious_heavyregular';
    src: url('../fonts/delicious-heavy-webfont.woff2') format('woff2'),
         url('../fonts/delicious-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'deliciousitalic';
    src: url('../fonts/delicious-italic-webfont.woff2') format('woff2'),
         url('../fonts/delicious-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'deliciousroman';
    src: url('../fonts/delicious-roman-webfont.woff2') format('woff2'),
         url('../fonts/delicious-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'delicious_smallcapsregular';
    src: url('../fonts/delicious-smallcaps-webfont.woff2') format('woff2'),
         url('../fonts/delicious-smallcaps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/*einde fonts*/

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

.vcontent{
    display: flex;
    flex-flow: column nowrap;
    height:100%;
}
.vbottom{
    margin-top:auto;
    margin-bottom:50px;
}
.vspacebottom{
    margin-bottom:65px;
}

.vspace{
    margin-bottom:13px;
    margin-top:13px
}

.vfull{
    height: 100vh;
    overflow:auto;
}
.vfull2{
    min-height: 100vh;
    height:100vh;
    overflow:auto;
}

.vflex{
    height:100% !important;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}
.CrowlModalBtnOK{
    background-color:#ff4b21 !important;
    color:white !important;
    border-radius:17px !important;
    padding:13px !important;
    padding-left:30px !important;
    padding-right:30px !important;
}

.sharebutton{
    background-color:#ff4b21;
    color:white;
    border-radius:17px;
    padding:13px;
    padding-left:30px;
    padding-right:30px;
}
.sharegrey{
    background-color:#94a8b0;
}
.sharewhite{
    background-color:white;
    color:black !important;
}

.multicol{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    column-gap: 5vw;
    font-size:1rem;
    text-align: justify;
}
#home{
    background-color:#eef3f7 !important;
}

#werf{
    height:100vh;
    background-image:url(../images/werfsite.jpg);
    background-position: center center;
    background-size:cover;
    background-repeat: no-repeat;
    font-family: 'delicious_smallcapsregular';
    color:#deffff;
}

#team{
    height:100vh;
    background-image:url(../images/team.jpg);
    background-position: center center;
    background-size:cover;
    background-repeat: no-repeat;
    font-family: 'delicious_smallcapsregular';
    color:#deffff;
}

.turndown{
    z-index:30000;
    position:fixed !important;
    bottom:0;
    width:100%;
    text-align:center;
    padding-bottom:20px;
}
.turndown a{
    background-color:#ff4b21 !important;
}

#sharework{
    background-color:#ff4b21;
}

#sharework h2, #solutions h2{
    font-family:'deliciousbold';
    font-size:3.3em;
    color:white;
}
#solutions h2{
    color:#ff4b21;
}

#sharework h3{
    font-size:2.3em;
    color:black;
}
#sharework span, #solutions ul li{
    color:black;
    font-size:1.3em;
}

#solutions ul li{
    list-style-type: disc;
}

#contact{
    background-color:#94a8b0;
    padding:30px;
}

#contact a{
    color:black;
    text-decoration:none;
}

.borderline{
    background-color:white;
    border-radius:20px;
    font-size:1.5em;
    font-family:'deliciousbold';
    padding:30px;
    margin-top:20px !important;
    margin-bottom:0px !important;
}

/*film*/

 
img{ 
    max-width:100%;
}

.ani{
    width:80%;
}

#werf h3{
    font-size:3.3em;
}
#werf p{
    font-family:'deliciousbold';
    font-size:1.5em;
}

.containerm{
    width:100vw;
    margin:auto;
    /*max-width:1400px;*/
}

#navigation, .btns{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    text-align:center;
}

.transBtn:hover{
    -webkit-box-shadow: 0px 0px 2px 3px rgba(255,255,255,0.6);
    -moz-box-shadow: 0px 0px 2px 3px rgba(255,255,255,0.6);
    box-shadow: 0px 0px 2px 3px rgba(255,255,255,0.6); 
}

#logo{
    height:40vh;
    background-color:white;
    background-image:url(../images/fiscacoachlogo.png);
    background-position:center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.transBtn{
    font-size:1.2rem;
    border:2px solid white;
    padding:12px;
    font-weight:bold;
    color:white;
    display:block;
}
h6{
    font-weight: bolder;
}

#btnContainer{
    height:35vh;
}

#btmContainer{
    height:25vh;
    background-color:white;
}

#btmContainer ul{
    height:100%;
    padding-bottom:20px;
}
#btmContainer ul li a{
    display:block;
    color:black;
    font-weight: bolder;
}

.slogan{
    color:#49a7bd;
    font-size:1.7rem;
    font-style:italic;
    font-family: 'Cantata One', serif;
}

h4{
    font-size:1em;
    font-weight:bold;
}

.breath{
    padding-top:20px;
    padding-bottom:20px;
}


.middlebars{
    border-left:1px solid black;
    border-right:1px solid black;
}

.leftbars{
    border-left:1px solid black;
}


#lightsup{
    height:50vh;
    background-image:url(../images/bglampen.jpg);
    background-position:center 58%;
    background-size:cover;
    background-attachment: fixed;
}

.justify{
    text-align:justify;
}
.vh50{
    height:50vh;
}

.vh50 .col iframe, footer article{
    width:100%;
    height:50vh;
    border:0;
}

#social{
    height:10vh;
    background-color:black;
    overflow:auto;
}
#social a{
    font-size:2.4em;
    color:#49a7bd;
    margin-left:20px;
    margin-right:20px
}

.halfanimage{
    width:33%;
}

.vwrapper, .hoverPerson, #faceno{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
video{
    width:60vw;
    padding:0;
    margin:0;
}

.face{
    height:40vh;
    background-position:center center;
    background-size:cover;
    cursor:pointer;
    padding:0 !important;
    position:relative;
}

.retinashow{
    display:none;
}

.drievierde{
    width:80%;
}

@media screen and (min-width: 1900px) {
  .retinashow{
        display:block;
        text-align:center;
    }
}

@media screen and (max-width: 1000px) {
    video{
        width:100vw !important;
    }
    .drievierde{
        width:100%;
    }
    #solutions ul li{
        list-style-type: none !important;
    }
}



#face1{background-image:url(../images/face1.jpg);}
#face2{background-image:url(../images/face2.jpg);}
#face3{background-image:url(../images/face3.jpg);}
#face4{background-image:url(../images/face4.jpg);}
#face5{background-image:url(../images/face5.jpg);}
#faceno div, .hoverPerson div{
    font-size:1.2em;
    border:2px solid black;
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    text-transform: uppercase;
}

.hoverPerson div{
    color:white;
    border:2px solid white;
}

.clickPerson div{
    
}

.hoverPerson{
    background-color:rgba(0,0,0,0.6);
    height:100%;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    display:none;
}
.clickPerson{
    display:none;
    background-color:white;
    width:100%;
    height:100%;
    position:absolute;
    z-index:20000;
    top:0;
    left:0;
    padding:20px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.face:hover .hoverPerson, .solutions article {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.solutions article{
    height:43vh;
    padding:0 !important;
    margin:0 !important;
    cursor:pointer;
}

.hoverSolution{
    display:none;
}

.solution{
    position:relative;
    cursor:pointer;
}

.solution:hover .hoverSolution{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position:absolute;
    left:0;
    top:0;
    z-index:2000;
    width:100%;
    background-color:white;
    height:100%;
}
.iosHoverSolution{
    display: inline-block;
    text-align: center;
    position:absolute;
    left:0;
    top:0;
    z-index:2000;
    width:100%;
    background-color:white;
    height:100%;
}


.hoverSolution p{
    padding-left:10px;
    padding-right:10px;
    font-size:1.2em;
    line-height:1.1em;
}

#banner2{
    height:70vh;
    background-image:url(../images/banner2.jpg);
    background-size:cover;
    background-position:80% center;
}
#banner2 .col{
    height:20vh;
    margin-top:50vh;
    background-color:rgba(73, 167, 189, 0.8);
}

.whiteborderBtn{
    font-size:1.2em;
    border:2px solid white;
    color:white;
    padding:10px;
    min-width:15vw;
    padding-left:30px;
    padding-right:30px;
    text-transform: uppercase;
}


.blackborderBtn{
    font-size:1.2em;
    border:2px solid black;
    color:black;
    padding:10px;
    min-width:15vw;
    padding-left:30px;
    padding-right:30px;
    text-transform: uppercase;
}

.vh20{
    min-height:20vh;
}

.vh15{
    min-height:15vh;
}

.vh40{
    min-height:40vh;
}


.blueback{
    background-color:#49a7bd;
}
.bluelink{
    color:#49a7bd;
    font-size:1.5em;
}

.blueback .col, .lightblueback .col{
    overflow:auto;
    flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.notopmargin{
    margin-top:-20px;
}

.lightblueback{
    background-color:#67c2ce;
}

.margintop20{
    margin-top:20px !important;
    display:inline-block;
}

#btmContainer ul li a:hover{
    background-color:#67c2ce !important;
    color:white;
}
#btmContainer ul li a{
    padding-top:4px;
    padding-bottom:4px;
}

.blackborderBtn:hover{
    color:white;
    background-color:#67c2ce !important;
    border:3px solid white !important;
}
footer{
    margin-bottom:0;
}
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}

@-webkit-keyframes bounceIn {

0% {
opacity: 0;
-webkit-transform: scale(0.8);
}

50% {
opacity: 1;
-webkit-transform: scale(1.05);
}

100% {
opacity: 1;
-webkit-transform: scale(1);
}
}

@-moz-keyframes bounceIn {

0% {
opacity: 0;
-moz-transform: scale(0.8);
}

50% {
opacity: 1;
-moz-transform: scale(1.05);
}

100% {
opacity: 1;
-moz-transform: scale(1);
}
}

@-o-keyframes bounceIn {

0% {
opacity: 0;
-o-transform: scale(0.8);
}

50% {
opacity: 1;
-o-transform: scale(1.05);
}

100% {
opacity: 1;
-o-transform: scale(1);
}
}

@keyframes bounceIn {

0% {
opacity: 0;
transform: scale(0.8);
}

50% {
opacity: 1;
transform: scale(1.05);
}

100% {
opacity: 1;
transform: scale(1);
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-moz-keyframes fadeIn {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-o-keyframes fadeIn {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes fadeIn {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.delay {
-webkit-animation-delay: 0.30s;
-moz-animation-delay: 0.30s;
-o-animation-delay: 0.30s;
animation-delay: 0.30s;
}

.delay-three {
-webkit-animation-delay: 0.60s;
-moz-animation-delay: 0.60s;
-o-animation-delay: 0.60s;
animation-delay: 0.60s;
}

.delay-two {
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-o-animation-delay: 1.0s;
animation-delay: 1.0s;
}

.delay-one {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}

@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}

100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}

100% {
opacity: 1;
-moz-transform: translateY(0);
}
}

@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}

100% {
opacity: 1;
-o-transform: translateY(0);
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}

100% {
opacity: 1;
-moz-transform: translateY(0);
}
}

@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}

100% {
opacity: 1;
-o-transform: translateY(0);
}
}

@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}

@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}

100% {
opacity: 1;
-moz-transform: translateX(0);
}
}

@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}

100% {
opacity: 1;
-o-transform: translateX(0);
}
}

@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}

100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}

@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}

100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}

@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}

100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}

@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}

100% {
opacity: 0;
transform: translateX(-20px);
}
}

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}

100% {
opacity: 0;
}
}

@-moz-keyframes fadeOut {
0% {
opacity: 1;
}

100% {
opacity: 0;
}
}

@-o-keyframes fadeOut {
0% {
opacity: 1;
}

100% {
opacity: 0;
}
}

@keyframes fadeOut {
0% {
opacity: 1;
}

100% {
opacity: 0;
}
}

.animated.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}

.animated.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
     #banner, #lightsup{ background-attachment: scroll !important; }
    .vh15{
        min-height:150px !important;
    }
    .vh50{
        min-height:60vh !important;
    }
    .vh40{
        min-height:50vh !important
    }
    footer article{
        min-height:50vh !important;
    }


}

@media handheld, only screen and (max-width: 668px) {
     #banner, #lightsup{ background-attachment: scroll !important; }
    .vh15{
        min-height:150px !important;
    }
    .vh50{
        min-height:70vh !important;
    }
    .vh40{
        min-height:60vh !important
    }
    footer article{
        min-height:50vh !important;
        margin-bottom:30px !important;
        margin-top:30px !important;
    }
    #social{
        min-height:20vh !important;
        padding-top:10px;
        padding-bottom:10px;
    }
    .face{
        min-height:100vh !important;
    }
    #banner{
        height: 110vh !important;
    }
    
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      #btmContainer, #btnContainer{
          height:230px !important;
      }
      #banner{
          height:200vh !important;
          overflow:auto;
      }
}