@charset utf-8;
/**
 * SenCSS - Sensible Standards CSS framework
 *
 * Copyright (c) 2008-2009 Kilian Valkhof (kilianvalkhof.com)
 * Visit sencss.kilianvalkhof.com for more information and changelogs.
 * Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php
 *
 */
* { -moz-box-sizing:border-box;box-sizing:border-box;}
html,body,div,span,object,iframe,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,fieldset,form,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{vertical-align:baseline;margin:0;padding:0}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {display:block}
body{background:#2E3C9B;color:#000;font:100%/1.5em Lato, Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;position:relative}
textarea{font:101%/1.5em Lato, Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;width:100%;margin:0;padding:.29em 0}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
:focus{outline:none}
a{text-decoration:underline;border:0}
a:hover,a:focus{text-decoration:none}
a img{border:0}
abbr,acronym{border-bottom:1px dotted;cursor:help;font-variant:small-caps}
address,cite,em,i{font-style:italic}
blockquote p{margin:0 1.5em 1.5em;padding:.75em}
code,kbd,tt{font-family:"Courier New", Courier, monospace, serif;line-height:1.5}
del{text-decoration:line-through}
dfn{border-bottom:1px dashed;font-style:italic}
dl{margin:0 0 1.5em}
dd{margin-left:1.5em}
h1,h2,h3,h4,h5,h6{font-weight:700;padding:0}
h1{font-size:2em;margin:0 0 .75em}
h2{font-size:1.5em;margin:0 0 1em}
h3{font-size:1.1666em;margin:0 0 1.286em}
h4{font-size:1em;margin:0 0 1.5em}
h5{font-size:.8333em;margin:0 0 1.8em}
h6{font-size:.666em;margin:0 0 2.25em}
img{display:inline-block;vertical-align:text-bottom}
ins{text-decoration:overline}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
ol{list-style:outside decimal}
p{font-weight:300;margin:0 0 1.5em}
pre{font-family:"Courier New", Courier, monospace, serif;margin:0 0 1.5em}
sub{top:.4em;font-size:.85em;line-height:1;position:relative;vertical-align:baseline}
sup{font-size:.85em;line-height:1;position:relative;bottom:.5em;vertical-align:baseline}
ul{list-style:outside disc}
ul,ol{margin:0 0 1.5em 1.5em;padding:0}
li ul,li ol{margin:0 0 1.5em 1.5em;padding:0}
table{border-collapse:collapse;border-spacing:0;margin:0 0 1.5em;padding:0}
caption{font-style:italic;text-align:left}
tr.alt td{background:#eee}
td{border:1px solid #000;vertical-align:middle;padding:.333em}
th{font-weight:700;vertical-align:middle;padding:.333em}
button{cursor:pointer;display:block;font-size:1em;height:2em;line-height:1.5em;margin:1.75em 0 0;padding:0 .5em}
button::-moz-focus-inner{border:0}
fieldset{border:0;position:relative;margin:0 0 1.5em;padding:1.5em 0 0}
fieldset fieldset{clear:both;margin:0 0 1.5em;padding:0 0 0 1.5em}
input{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;font-size:12px;height:1.5em;line-height:1.5em;width:100%;margin:0 0 .75em;padding:.29em 0}
input[type=file]{height:2.25em;padding:0}
select{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;font-size:1em;height:2.25em;_margin:0 0 1.3em;margin:0 0 .8em;padding:.2em 0 0}
optgroup{font-weight:700;font-style:normal;text-indent:.2em}
optgroup + optgroup{margin-top:1em}
option{font-size:1em;height:1.5em;text-indent:1em;padding:0}
label{cursor:pointer;display:block;height:auto;line-height:1.4em;width:100%;margin:0;padding:0}
label input{background:0;border:0;height:1.5em;line-height:1.5em;width:auto;margin:0 .5em 0 0;padding:0}
legend{font-size:1.1666em;font-weight:700;left:0;margin:0;padding:0}
dt,strong,b{font-weight:500}
em, i {font-weight:400}
.amp{font-family:Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", "URW Chancery L", Gentium, serif;font-style:italic}
.quo{font-family:Georgia, Gentium, "Times New Roman", Times, serif}
.lquo{font-family:Georgia, Gentium, "Times New Roman", Times, serif;margin:0 0 0 -.55em}
.introParagraphArticle:first-letter{float:left;font-size:3.2em;font-weight:700;line-height:1em;margin:0 0 -.2em;padding:.125em .1em 0 0}
.message{background:#eee;border:1px solid #999;margin:1.5em;padding:.666em}
.error{background:#fee;border:1px solid red;margin:1.5em;padding:.666em}
.notice{background:#eef;border:1px solid #00f;margin:1.5em;padding:.666em}
.success{background:#efe;border:1px solid #0f0;margin:1.5em;padding:.666em}
.warning{background:#ffe;border:1px solid #ff0;margin:1.5em;padding:.666em}
.aside-left{clear:left;float:left;overflow:hidden;margin:0 1.5em 1.5em 0}
.aside-right{clear:right;float:right;overflow:hidden;margin:0 0 1.5em 1.5em}
.horizontalForm button{clear:left;float:left;margin:.25em 0 0}
.horizontalForm input,.horizontalForm textarea{float:left;width:49%;margin:0 0 .8em}
.horizontalForm select{float:left;_margin:0 0 1.25em;margin:0 0 .75em}
.horizontalForm label{clear:left;float:left;width:49%;padding:.375em 0}
.horizontalForm label input{height:1em;line-height:1.5em;width:auto;margin:.25em .5em 0 0}
.horizontalForm label.singleLine{clear:both;float:none;height:1.5em;width:100%;padding:0}
.plugin_picture {
  max-width:100%;
  margin-bottom:1.5em;
  margin-right:15px;
  display:inline;
}
  .plugin_picture img{max-width:100%;}
  .plugin_picture.align-right {float:right;margin-right:0;margin-left:1.5em;margin-right:-5em;}
  .plugin_picture.align-left {float:left;margin-right:1.5em;margin-left:0;}
  .plugin_picture.align-center {display:block;width:100%;text-align:center;float:none;margin-right:0;}

.errorlist {
    float:right;
    display:block;
    font-weight:bold;
    list-style:none;
    margin:0 0 0;
    padding:3px 0;
    width:225px;
    line-height:16px;
  }

a,
button {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}


#parallaximg {
  margin:auto;
  padding:0;
  height:275px;
  position:relative;
  background-size:cover;
  overflow:hidden;
}
  #parallaximg .parallax-layer1{width:100%;}

/* slider */
#slider {

}
    #slider .plugin_picture {
        width:100%;
        margin:auto;
        text-align: center;
    }
        #slider .plugin_picture img {
            max-height:364px;
            max-width:100%;
            margin:auto;
        }

.inner {
    margin:auto;
    width:960px;
    position:relative;
    padding:0px 10px;
    overflow:hidden;
}


/*=page-404/500*/
.centered {text-align:center;}
.centered h2{margin:40px 0 0;}
.centered p{margin:0 0 60px;}


/*          HEADER - NAV */

header {
  height: 150px;
  background: url('../img/topbg.png') repeat-x bottom center;
  position: relative;
  display: block;
  z-index: 50;
}
 header h1 {
   margin:10px 0 0;
 }
  header h1 a {
   background: url('../img/logo.png') no-repeat center;
   height: 116px;
   width: 174px;
   float: left;
    text-indent: -99999em;
  }
 header h2 {
   color: rgb(69,190,194);
   font-size: 16px;
   line-height:1;
   position:absolute;
   top:22px;
   right:10px;
   font-family: 'Ubuntu';
   font-style: italic;
   font-weight:300;
   margin-bottom:0;
 }
 header nav {
    position:absolute;
    bottom:20px;
    right:10px;
 }
  header nav ul {
    overflow: hidden;
    list-style: none;
    margin:0;padding:0;
  }
   header nav ul li {
     float: left;
     margin-left: 10px;
     overflow: hidden;
   }
    header nav ul li.mmenu {display:none;}
    header nav ul li a {
      border-radius: 5px;
      height: 44px;
      line-height:44px;
      width: 105px;
      display: block;
      text-align: center;
      background: rgb(46,60,155);
      color: #fff;
      font-family: 'Ubuntu';
      text-decoration: none;
    }
   header nav ul .selected a,
   header nav ul .ancestor a,
   header nav ul li:focus a,
   header nav ul li:hover a {  background: rgb(69,190,194) }

   header nav ul li a img { vertical-align:middle}
/*              BANNER              */

#banner {
  min-height: 275px;
  margin-top:-11px;
  overflow:hidden;
  background:#fff;
}

/*/   Page-Home    \*/

 .client-block {
   margin: auto;
   width: 1000px;
   height: 110px;
   border-radius: 5px;
   background: rgb(69,190,194);
   padding: 0px 20px;
   z-index: 30;
   position: relative;
   margin-top:-100px;
   margin-bottom:0px;

 }
  .client-block li {
    list-style:none;
    float: left;
    width: 138px;
    height: 100px;
    position: relative;
    text-align: center;
    background:transparent;
    margin: 0 9px;
   -webkit-transition:all 0.6s ease;
   -moz-transition:all 0.6s ease;
   transition:all 0.6s ease;
  }
    .client-block li:first-child {margin-left:0;}
  .client-block li:hover,
  .client-block .activeSlide,
  .client-block li.current {
    background:rgb(46,60,155);
   -webkit-transition:all 0.6s ease;
   -moz-transition:all 0.6s ease;
   transition:all 0.6s ease;
  }

  .client-block li:after,
  .client-block .activeSlide:after,
  .client-block .current:after {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 69px 0 69px;
    border-color: transparent;
    position: absolute;
    left: 0;
    top:0;
    content: '';
    display: block;
   -webkit-transition:all 0.6s ease;
   -moz-transition:all 0.6s ease;
   transition:all 0.6s ease;
  }
  .client-block li:hover:after,
  .client-block .activeSlide:after ,
  .client-block .current:after {
    border-color: transparent transparent rgb(46,60,155) transparent; 
    border-width: 0 69px 27px 69px;
    top: -27px;
  }

  .client-block li img {
    max-width: 100%;
    max-height: 100%;
    z-index: 20;
    position: relative;
  }
#main {
  overflow: hidden;
  position: relative;
  z-index: 50;
}
#main a {  color: inherit; }


/*/   Portfolio list    \*/

 .information {overflow:hidden;}
  .information .textblock {
   width: 470px;
   float: left;
   padding-right: 10px;
 }
   .information .textblock p {
    font-size: 16px;
    line-height: 25px;
  }
   .information .textblock h2 {
    font-size: 30px;
    font-weight: 100;
    font-family: 'Ubuntu';
  }
 .quotes {
  width: 440px;
  height: 230px;
  float: left;
  position: relative;
  padding: 0px 70px;
  overflow: hidden;
}
  .quotes .slidequotes {
   height: 216px;
   max-width: 300px;
   margin: auto;
 }
  .quotes blockquote {  display: block }
   #main #content .quotes blockquote p {
    font-size: 18px;
    font-weight: 100;
    font-family: 'Ubuntu';
    line-height: 1.1;
    margin:0 0 10px;
    padding:0;
    width:300px;
    display:block;
  }
.quotes blockquote cite {
    line-height:1.1;
    color:#2e3c9b;
    font-style:normal;
    font-weight:600;
    display:block;
  }
.quotes blockquote cite span {
     font-style:italic;
     font-weight:400;
     display:block;
  }

#content .project {
  overflow: hidden;
  width:960px;
}

/*         page-portfolio-detail        */

  .portfoliobg .inner {
    position:relative;
    padding:0;
  }
    .portfoliobg .inner img {max-width:100%;display:block;}


#banner .project-info {
   background: rgba(250,250,250,0.9);
   display: block;
   height: 250px;
   overflow: hidden;
   border-radius: 5px;
   position:absolute;
   bottom:0;
   width:100%;
  overflow-y:auto;
 }
#banner .project-textblock {
  width: 66%;
  float: left;
  padding: 20px;
  padding-top: 30px;
  color:#444;
  font-weight:300;

 }
    #banner .project-info h2 {
      font-family: 'Ubuntu';
      font-size: 30px;
      color:#2E3C9B;
      font-weight:300;
    }
      .project-info h2 a {color:inherit;text-decoration:none;}
      .project-info h2 a b {
         background:url(../img/icon-link-hover.png) no-repeat 0 0;
         display:inline-block;
         width:20px;
         height:20px;
         margin-left:10px;
       }
       .project-info h2 a:hover,
       .project-info h2 a:focus {
         color:#4FC5C9;
       }
       
       .project-info h2 a:hover b,
       .project-info h2 a:focus b {
         background:url(../img/icon-link.png) no-repeat 0 0;
       }
       
#banner .project-features {
   float: left;
   width:33%;
   padding: 20px;
   padding-top: 30px;
 }
    #banner .project-features ul {
      list-style:none;
      margin-left: 0;
      font-weight:300;
    }

/*              MAIN                */

#main {
  height: auto;
  background: url('../img/main-kartelbg.png') repeat-x top center; 
  padding:40px 0 20px;
  margin-top: -21px;

}
 #main #content {
   color: #2e3c9b;
 }
  #main h2 {
    font-family: 'Ubuntu';
    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
  }
  #main h3 {
    font-family: 'Ubuntu';
    font-weight: 300;
  }
  #main h4 {
    font-family: 'Ubuntu';
    font-weight: 300;
  }

  #main p {
    font-size: 16px;
    line-height: 22px;
  }
  
  #main p q {
    font-style:italic;
    font-weight:400;
    display:block;
    margin-bottom:10px;
  }
  #main p cite {
    display:block;
    text-align:right;
    font-style:normal;
  }

/*/   Tekstpagina    \*/

 #content {
  height: auto;
  padding:0;
  font-weight:300;
}

 #content .button {
    border-radius: 5px;
    padding: 10px 14px;
    display: inline-block;
    background: rgb(46,60,155);
    color: #fff;
    min-width:105px;
    text-align: center;
    margin: 5px;
    font-family: 'Ubuntu';
    text-decoration: none;
    transition: all 0.3s ease-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: initial;
 }
#content .button:hover {
    background-color: rgb(69, 190, 194);
}

  #content .textblock {
   float: left;
   width: 500px;
   max-width:500px;
   margin-bottom:30px;
 }
   #content .textblock ul,
   .specific-info ul,
   #banner .project-features ul {
    list-style-image: url('../img/check.png');
    margin-left: 23px;
    margin-top:23px;
  }
    #content .textblock ul li ,
    .specific-info ul li{
     font-size: 16px;
     line-height: 34px;
     font-weight: 100;
   }
  #content aside {
   float: right;
   width: 300px;
   margin-bottom:30px;
 }
   .service{
    list-style: none;
    margin: 0;
    padding:0;
  }
   .service a {
     margin-bottom:5px;
     display: block;
     line-height:45px;
     padding-left: 70px;
     border-radius: 10px;
     overflow: hidden;
     color: rgb(46,60,155);
     text-decoration: none;
     background-color:#fff;
     background-position:15px center;
     background-repeat:no-repeat;
   }

    .service ul a {background-color:#EEF9FD;}

    .service a:hover,
    .service a:focus,
    .service ul .selected>a,
    .service .selected>a {
      background-color:#C6F1F4;
    }

#main .tweet {
  font-size:30px;
  line-height:1.1;
  color:#DCF4FE;
  display:block;
  clear:both;
  gfloat:left;
  font-family:"Ubuntu";
  background:#45bec2;
  font-weight:300;
  padding:10px;
  text-decoration:none;
  margin-bottom:30px;
}
#main .tweet:hover,
#main .tweet:focus {
  color:#fff;
  background:rgb(46,60,155);
}

.tweet img {vertical-align:middle}

/*          Page-contact               */

#banner #google-maps {
  display: block;
  height: 300px;
  width: 100%;
  background:#2E3C9B;
  color:#2E3C9B;
}
#main .contactform {
  float: left;
  width: 66%;
  max-width:500px;
  padding:0 20px 0 0;
  margin-bottom:20px;
}
#main .specific-info {
  float: right;
  width: 33%;
  padding: 20px;
}
#main .specific-info ul li p {font-size:14px;}
.specific-info .contactgegevens {  margin-bottom: 20px }
.specific-info .contactgegevens ul {
    list-style: none;
    margin: 0 0 1.5em;
    padding:0;
}
   .specific-info .contactgegevens ul li {  padding-left: 70px; line-height:31px;}
   .specific-info .contactgegevens ul .marker {  background: url('../img/contact1.png')no-repeat 0 5px }
   .specific-info .contactgegevens ul .phone {  background: url('../img/contact2.png')no-repeat 0 3px }
   .specific-info .contactgegevens ul .mail {  background: url('../img/contact3.png')no-repeat 0 11px }

#main #content .voorwaarden .plugin_file , #main #content .voorwaarden p , #main #content .voorwaarden em {
    display:inline;

}
#main .voorwaarden {
  font-size:14px;
  line-height:1.57;
}

.voorwaarden ul li p a {
    line-height: 34px;
    font-weight: 100;
}
.voorwaarden ul li p a span {
    line-height: 34px;
    font-weight: 100;
}
.contactform label {
  width: 20%;
  float: left;
  text-align: right;
  padding-right: 36px;
  position: relative;
  line-height:45px;

}

.contactform input {
  width: 79%;
  float: left;
  border-radius: 10px;
  height: 45px;
  border: none;
  position: relative;
  margin: 0;
  padding-left:20px;
  font:inherit;
  border:1px solid rgb(69,190,194) 
}

.contactform textarea {
  width: 79%;
  height:7.5em;
  float: left;
  border-radius: 10px;
  margin-bottom: 0px;
  border: none;
  position: relative;
  padding-left:20px;
  font:inherit;
  border:1px solid rgb(69,190,194) 
}
.contactform button {
  background: rgb(69,190,194) url('../img/icon-verzenden.png')no-repeat;
  background-position: 5% 15px;
  color: #fff;
  width: 79%;
  height: 45px;
  text-align: center;
  border-radius: 10px;
  margin-top: 0px;
  margin-left:20%;
  border: none;

}
.contactform button:hover {
  background-position: 95% 15px;
  background-color:#2E3C9B;
}

 .contactform ul li input,
 .contactform ul li textarea {  margin-bottom: 20px }

.contactform .errorlist ~ input,
.contactform .errorlist ~ textarea {margin-bottom:38px;}

.contactform > form > ul {
  list-style: none;
  margin: 0;
}
.contactform ul li {
  position: relative;
  list-style: none;
  overflow: hidden;
  font-size: 16px;
  font-weight: 300;
   margin-bottom: 0 !important
}
 .contactform ul li ul {  list-style: none }

.contactform .errorlist {
  position: absolute;
  right: 0px;
  text-align: right;
  bottom: 14px;
  color: #F3009A;
  font-style: italic;
  font-size: 12px;
}

/*              FOOTER              */

footer {
  padding: 30px 10px;
  margin-top: -11px;
  background: url('../img/bottombg.png') repeat-x top center;
  color: #fff;
  position: absolute;
  width: 100%;
  position: relative;
  z-index: 99;
}
 footer .inner {
   overflow: hidden;
   font-size:16px;
 }
 footer .contact,
 footer .address {
   width: 33%;
   float: left;
 }
 footer h3 {
   font-size: 30px;
   font-family: 'Ubuntu';
   margin-bottom: 0.5em;
   margin-top: 10px;
   font-weight: 300;
   line-height: 22px;
   opacity:0.6;
 }
 footer div p,
 footer address {
   display: block;
   line-height: 22px;
   font-weight: 400;
   margin-bottom:0;
   opacity:0.6;
 }

  footer div a {
    color: #fff;
  }
 footer address {  font-style: normal }
 footer .info {
   text-align: right;
   width: 33%;
   float: right;
 }

@media only screen and (max-width:1000px) {
  .client-block {
    width:100%;
    margin:-100px 0 0;
    border-radius:0;
  }

}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 967px) {
  .inner {width:100%;}
  
  header h1 a {
   background: url('../img/logo2x.png')no-repeat center;
   background-size:cover;
  }

  .intro,
  #content .textblock {width:66%;padding-left:10px;}

  .twitter-feeds,
  #content aside {width:33%;padding-right:10px}

  .client-block li {width:15.5%;margin:0 0.5%;padding:0 1%}
    .client-block li:after {border-width:0 !important;}

  #page-portfolio-list #content .textblock {width:50%;}
  #page-portfolio-list #content .quotes {width:50%;}

  #banner .project-info {
    position:relative;
    border-radius:0;
    height:auto;
  }
  #content .project {width:100%;margin:0;}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 780px) {
  #banner {min-height:150px;}
  #default-parallaximg,
  #banner #google-maps { height:150px; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 750px) {
  header nav ul li {display:none;}
  header nav ul li.mmenu {display:block;}
}

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


  header h1 a {width:125px}
  #page-home #banner {display:none;}

  footer .inner {margin-top:0;font-size:14px;}
  footer h3 {font-size:20px;}

  #page-portfolio-list #content .textblock,
  #content .textblock,
  #content aside,
  #main .contactform,
  #main .specific-info,
  .twitter-feeds,
  #banner .project-textblock,
  #banner .project-features {width:100%;float:none;padding:0 10px;}

  #page-portfolio-list #content .quotes {
    display:block;
    width:100%;
  }

  #banner {min-height:0;}
  #parallaximg,
  #banner #google-maps { height:100px; }

  #content .container ul {overflow:visible;}
  .container ul li,
  .container ul li a {
    width:100%;
  }

  #main #content .quotes blockquote p {font-size:14px;}

}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

  .quotes blockquote {width:100% !important ;}
  .quotes blockquote p{width:100% !important ;}


  footer .contact, footer .address { width:50%;margin-bottom:1.5em;}
  footer .info { width:100%;float:left;text-align:left; margin-bottom:1.5em;}


  .contactform label {width:40%;}
  .contactform input,
  .contactform textarea {width:59%;}
  .contactform button {width:59%;margin-left:40%;}
}