@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?89839634');
  src: url('../font/fontello.eot?89839634#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?89839634') format('woff2'),
       url('../font/fontello.woff?89839634') format('woff'),
       url('../font/fontello.ttf?89839634') format('truetype'),
       url('../font/fontello.svg?89839634#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?89839634#fontello') format('svg');
  }
}
*/
[class^="icon-"], 
[class*=" icon-"] {
    margin-left: 10px;
}
[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none; 
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
.icon-mail:before { 
    content: '\e800'; 
}
.icon-phone:before { 
    content: '\e801'; 
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

.show-for-small-only {
    display: none !important;
}

.bg-green {
    background-color: #008089;
    color: #fff;
}

img {
    max-width: 100%;
}
img.logo {
    width: 255px;
    display: block;
}
img.noloc {
    margin-top: 20px;
    width: 100px;
    display: block;
}

p a {
	color: #008089;
}
.bluebox2 a {
    color: #fff;
}

.clear {
    clear: both;
}

#siteContainer {
    padding-top: 156px;    
}
#contact {
    width: 292px;
    color: #fff;
    background: #129ca4;
    position: fixed;
    right: -246px;
    z-index: 99;
    top: 50%;
    margin-top: -100px;
    -webkit-transition: right .8s;
    -moz-transition: right .8s;
    -o-transition: right .8s;
    transition: right .8s;
}

#contact p {
    margin: 10px;
}

#contact img {
    float: left;
}

#contact:hover, #contact:focus {
    right: 0px;
}

#contactInfo {
    float: left;
}

#contactInfo a {
    padding: 10px;
    background: #fff;
    float: left;
    margin: 10px;
    color: #008089;
    text-transform: uppercase;
}

#contactInfo a:hover {
    text-decoration: none;
} 

/* ======= Navigatie ======= */
nav .extra {
    text-align: right;
    padding: 10px 30px;
}
nav .extra .col-xs-12 {
    max-width: 1400px;
}
nav .extra .fa {
    margin-left: 10px;
}

nav a {
    color: #8e8784;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

nav a:hover {
    color: #008089;
}

.navbar {
    margin-bottom: 0;
    position: fixed;
    z-index: 999;
    background-color: #fff;
    left: 0;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #ddd;
    border-radius: 0 !important;
}

.navbar-header {
    width: 25%;
    float: left;    
}

.navbar-header img {
    padding: 32px 0;
    width: 98%;
    max-width: 288px;
    /*width: 213px;*/
    -webkit-transition: all 150ms ease-in;
       -moz-transition: all 150ms ease-in;    
        -ms-transition: all 150ms ease-in;
            transition: all 150ms ease-in;
}
nav.sticker .navbar-header img {
    padding: 18px 0;
}

.navbar-collapse {
    padding-left: 0;
    width: 75%;
    float: left;
}

.navbar-nav {
    /*width: 100%;*/
    float: right;
}

.navbar-toggle {
    margin-top: 14px;
    margin-right: 0px;
}

.navbar-toggle span {
    background-color: black;
}

.navbar li ul li{
    text-align: left;
    width: 100%;
}

.nav > li > a {
    padding: 10px 6px;
    line-height: 90px;
    margin-top: 25px;
    -webkit-transition: all 150ms ease-in;
       -moz-transition: all 150ms ease-in;    
        -ms-transition: all 150ms ease-in;
            transition: all 150ms ease-in;
}
nav.sticker .nav > li > a {
    line-height: 57px;
    margin-top: 22px;
}

.navbar li ul li a{
    line-height: normal;
    padding: 10px 15px;
    text-align: left;
}

.navbar li a:hover {
    background-color: white;
}

.navbar-nav li {
    /*width: 12.5%;
    float: left;*/
}
.navbar-nav > li:not(:first-of-type) {
    margin-left: 40px;
}

.navbar-nav li a {
    width: 100%;
    padding: 0;
    text-align: center;
    font-size: 12px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    width: 100%;
    background-color: #008089;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background-color: #94cacd;
    color: white;
}

.dropdown-menu {
    padding: 0px 0;
    top: 100%;
}

.dropdown-menu>.dropdown>.dropdown-menu {
	display: none;
    left: 0;
    position: absolute;
    margin-left: 100%;
    box-shadow: none;
    border: none;
    margin-top: -34px;
}

.dropdown-menu>.dropdown:hover>.dropdown-menu, .dropdown-menu>.dropdown:focus>.dropdown-menu {
	display: block;
}

.dropdown-menu li a{
    color: white;
}

.imageBox {
    padding-left: 0;
    padding-right: 0;
}

.imageBox .btn {
	transition: all 0.3s ease;
	color: #fff;
	background-color: #008089;
	border: 4px solid #fff;
	border-radius: 0px;
	text-transform: uppercase;
	font-size: 14px;
	padding: 10px 20px;
}

.imageBox .btn:hover {
	color: #008089;
	background-color: #fff;
	border-color: #008089;
}

.imageBox span p {
	font-size: 40px;
    /*max-width: 455px;*/
    font-weight: 800;
    text-align: left;
    margin-bottom: 5%;
}

.imageBox img {
    width:100%;
}

.carousel-caption {
    left: 17.5%;
}

/*.itemSub {
    height: 100px;
}*/

.contentBox {
    padding-top: 15px;
}

.contentBox h1 {
    font-weight: bold;
    color: #008089;
    font-size: 2.2em;
    text-transform: uppercase;
}

.contentBox h2 {
    font-weight: bold;
    color: #008089;
    font-size: 1.7em;
    text-transform: uppercase;
}

.contentBox h3 {
    font-weight: bold;
    color: #008089;
    font-size: 1.3em;
    text-transform: uppercase;
}

.contentBox p {
    text-align: justify;
}

.blueBox {
    margin-top: 100px;
    background-color: #94cacd;
    color: white;
}
.blueBox2 {
    padding: 0;
}
.blueBox .col-md-6 {
    /*margin-top: -70px;*/
    /*height: 295px;*/
}

.blueBox .outerCol {
    margin-top: -70px;
}
.blueBox .col-md-8 {
    padding: 0px;
}

.blueBoxImage {
    overflow: hidden;
    padding: 0px;
}

.blueBoxImage figure,
.quoteBlock {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}
.blueBoxImage figure img {
    min-width: 100%;
    min-height: 100%;
	max-width: 100%;
    
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.blueBoxText a {
    color: #FFF;
}

.quoteBlock {
    background-color: #129ca4;
}

.blueBox4 {
    background-color: #008089;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: bold;
}

.afspraakText {
    position: absolute;
    width: 80%;
    margin-top: 25px;
    margin-left: 25px;
}

a span.afspraakText {
	color: white;
}

.quoteText {
    position: absolute;
    width: calc(100% - 80px);
    font-size: 14px;
    font-style: italic;
    margin-left: 40px;
    margin-top: 25px;
}

.quoteName {
    bottom: 0;
    position: absolute;
    left: 0;
    margin-left: 40px;
    margin-bottom: 25px;
    font-size: 22px;
}
.quoteName.smallTxt {
    bottom: auto;
    top: 0;
    margin-top: 25px;
    font-size: 14px;
    margin-left: 25px;
}

.blueBoxText {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    margin-top: 15px;
}

.blueBoxImage a, a.about {
    position: absolute;
    color: #fff;
    border: 3px solid #fff;
    padding: 10px;
    left: -65px;
    bottom: 20px;
    margin-left: 50%;
    transition: color 0.3s ease;
    transition: background-color 0.3s ease;
    z-index: 1;
}
a.about {
    position: relative;
    margin: 0;
    left: auto;
    bottom: auto;
    margin-top: 15px;
    display: block;
    text-transform: uppercase;
    width: auto;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}
a.linkedin {
    margin-top: 5px;
    display: block;
}

.blueBoxImage a:hover, a.about:hover {
    background: #fff;
    color: #000;
    text-decoration: none;
}

.blueBoxText p {
    text-align: justify;
}

.blueBoxText p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.contentVolg {
	padding-bottom: 20px;
}

.footerBox {
    background-color: #e2e0e0;
    padding-bottom: 15px;
    color: #8b8683;
}

.footerBox .row {
    padding-top: 30px;
}

.footerBox p{
    padding: 0;
    font-size: 13px;
}

.footerBox b {
    padding: 5px 0;
    text-transform: uppercase;
    display: block;
}

.footerImage {
    background-image: url(../images/footer.png);
    height: 50px;
}

footer {
    line-height: 60px;
    background-color: #afaaa8;
    text-align: center;
    color: white;
    text-transform: uppercase;
}

.sitemap .col-md-2 .footerCol {
    min-height: 90px;
    float: left;
    margin-bottom: 10px;
    width: 100%;
}

.sitemap a {
    color: #8b8683;
}

@media (max-width: 1600px) {
    
    .quoteText {
        width: calc(100% - 50px);
        font-size: 13px;
        margin-left: 25px;
    }
    .quoteName {
        margin-left: 25px;
        font-size: 20px;
    }
    .blueBoxImage a, a.about {
        border-width: 2px;
        padding: 5px 10px;
    }
    a.about {
        margin-top: 10px;
    }
    a.linkedin img {
        width: 100%;
        max-width: 20px;
    }    
    
}

@media (max-width: 1400px) {
    .navbar-header img {
        padding-top: 43;
        max-width: 98%;
        width: 180px;
    }

    .blueBoxText {
        display: none;
    }

    .blueBox4 {
        font-size: 14px;
    }

    .afspraakText {
        margin-left: 0px;
        margin-top: 10px;
    }

    .blueBoxImage img {
        width: 100%;
    }
    
    .quoteText {
        margin-top: 15px;
    }
    
}

@media (max-width: 1280px) {
    .navbar-header img {
        padding: 41px 0;
        max-width: 98%;
        width: 213px;
    }

    .imageBox span{
    	margin-bottom: -30px;
    }

    .imageBox span p {
        margin-bottom: 5%;
    }

    /*.navigation {
        width: 100%;
    }*/
    .navbar-nav > li:not(:first-of-type) {
        margin-left: 20px;
    }

    .sitemap .col-md-4 img {
        width: 100%;
    }
    .sitemap .col-md-4 img.noloc {
        width: 100px;
    }
    
    
    .imageBox span p {
        font-size: 24px;
        max-width: 500px;
    }
    
    
    .quoteText {
        /*width: calc(100% - 40px);
        margin-left: 20px;*/
        width: calc(100% - 20px);
        margin-left: 15px;
    }
    .quoteName {
        /*margin-left: 20px;
        margin-bottom: 20px;
        font-size: 18px;*/
        margin-left: 15px;
        margin-bottom: 15px;
        font-size: 16px;
    }
    a.about {
        font-size: 12px;
    }
    a.linkedin {
        display: inline;
        margin-left: 5px;
    }
    .quoteName.smallTxt {
        margin-top: 15px;
        font-size: 13px;
        margin-left: 15px;
    }
    
    
    
}

@media (max-width: 1024px) {
    #siteContainer {
        padding-top: 130px;
    }
    
    .navbar-header img {
        padding: 26px 0px 20px 0px;
        max-width: 98%;
        width: 213px;
    }

    .navbar-collapse {
        /*width: 100%;*/
    }
    .navbar-nav {
        /*float: left;
        width: 100%;*/
    }
    
    .nav > li > a {
        /*line-height: 55px;*/
        margin-top: 0;
    }
    nav.sticker .nav > li > a {
        line-height: 90px;
        margin-top: 0;
    }
    nav.sticker .navbar-header img {
        padding: 26px 0 20px 0;
    }

    .imageBox span{
        left: 15px;
    }
    .imageBox span p {
        font-size: 30px;
        max-width: 500px;
    }

    .imageBox span p{
    	font-size: 24px;
    }

    /*.col-md-8 {
        width: 100%;
    }

    .navigation {
        width: 100%;
    }*/

    .contentBox {
        width: 100%;
        padding-right: 60px;
    }

    .blueBox .col-md-8 {
        max-width: 600px;
        margin: auto;
    }

    .quoteText {
        font-size: 14px;
    }

    /*.blueBoxText {
        font-size: 20px;
    }*/

    /*.blueBoxImage, .blueBox2, .blueBox4 {
        float: left;
        width: 50%;
    }*/

    .blueBoxImage2 {
        float: right;
        margin-top: 0px !important;
    }

    /*.quoteText {
        font-size: 22px;
    }*/

    /*.quoteName {
        margin-left: 15px;
    }*/

    .afspraakText {
        margin-left: 0px;
    }

    .blueBox4 {
        margin-top: 0px !important;
    }

    .sitemap {
        width: 100%;
    }

    .sitemap .col-md-4 {
        /*display: none;*/
        width: 25%;
        float: left;
    }

    .sitemap .col-md-2 {
        width: 25%;
        float: left;
    }

    .sitemap .col-md-2 .col-xs-6 {
        width: 100%;
    }

}
@media (max-width: 960px) { 
    .quoteText,
    .quoteName.smallTxt {
        font-size: 16px;
    }
}

@media (max-width: 767px) {    
    .navbar-header img {
        max-width: 50%;
    }

    .navbar-header img {
        padding: 13px 0px 15px 0px;
    }

    .navigation {
        padding-left: 0px;
    }

    .nav>li {
        width: 100%;
        font-size: 15px;
        padding: 10px 0px;
    }

    .nav>li>a {
        line-height: 0 ;
        padding: 10px 10px;
    }

    .navbar-collapse {
        position: absolute;
        margin-top: 65px;
        z-index: 2;
        background: #fff;
        width: 100%;
        padding: 0px 16px;
        left: -16px;
        box-sizing: initial;
    }

    .navbar-nav {
        margin: 7.5px -10px;
    }

    .dropdown:hover .dropdown-menu {
    	display: none;
	}

    .navbar-header {
        width: 100%;
    }

    .navbar-collapse {
        width: 100%;
    }

    .blueBoxImage, .blueBox2, .blueBox4 {
        /* height: 180px; */
    }

    .blueBox .col-md-8, .blueBox .col-xs-12 {
        padding: 0px;
    }

    /*.quoteText, .blueBox4 {
        font-size: 13px;
    }*/
    
    /*.blueBox2.col-xs-12 {
        padding: 10px;
    }
    .quoteName {
        margin-left: 10px;
        font-size: 12px;
    }*/
    #siteContainer {
        padding-top: 125px;
    }
    .navbar-nav {
        width: 100%;
        margin: 0;
    }
    .navbar-nav > li:not(:first-of-type) {
        margin-left: 0;
    }
    
    nav.sticker .nav > li > a {
        line-height: 0;
        margin-top: 0;
    }
    nav.sticker .navbar-header img {
        padding: 13px 0 15px 0;
    }
    
    .quoteText,
    .quoteName.smallTxt {
        font-size: 14px;
    }
    .sitemap .col-md-4 {
        width: 100%;
    }
    .sitemap .col-md-4 img.logo {
        max-width: 200px;
    }
}

@media (max-width: 667px) {
    .show-for-small-only {
        display: block !important;
    }
    
    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 17px !important;
    }

    .navbar-header img {
        max-width: 100%;
        width: 200px;
    }

    .navbar-nav li a {
        font-size: 16px;
    }

    .navbar-nav {
        padding-bottom: 15px;
    }

    .imageBox span {
    	/*display: none;*/
    }
    .imageBox span p {
        font-size: 12px;
        margin-bottom: 4%;
    }

    .sitemap .col-md-2 {
        width: 50%;
        float: left;
    }
    .imageBox .btn,
    .imageBox .btn:hover {
        color: #fff;
        background-color: #008089;
        border: 2px solid #fff;
        font-size: 12px;
        padding: 5px 15px;
    }

    
}
@media (max-width: 480px) {    
    .blueBox {
        margin-top: 0;
    }
    .blueBox .outerCol {
        margin-top: 0;
    }
    .blueBoxImage, .blueBox2, .blueBox4 {
        width: 100%;
        height: auto;
    }
    .quoteBlock {
        padding-bottom: 50%;
    }
    .outerCol .row {
        margin-left: 0;
        margin-right: 0;
    }    
    .quoteText, .quoteName {
        width:  100%;
        margin: 0;
        padding: 10px;
    }
    /*.quoteName {
        padding: 20px;
        text-align: right;
    }*/
}

@media (max-width: 375px) {
    .navbar-header img {
        max-width: 100%;
        width: 200px;
    }

    #contact {
        display: none;
    }

    .navbar-nav {
        padding-bottom: 15px;
    }

    .sitemap .col-md-2 {
        width: 100%;
    }

    .contentBox {
        width: 100%;
        padding-right: 15px;
    }
}

img[align="right"],
img[align="left"] {
    margin-bottom: 20px;
}
img[align="right"] {
    margin-left: 20px;
}
img[align="left"] {
    margin-right: 20px;
}

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

.btn-primary {
    color: #fff;
    background-color: #008089;
    border-color: #008089;
}
.btn-primary:hover {
    background-color: #129ca4;
    border-color: #129ca4;
}