@charset "utf-8";

/* --------------------------------------- */
/* --- The Satisfactorie - www.tsfo.nl --- */
/* --------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

ol, ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/* remember to define focus styles! */

:focus {
    outline:0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration:none;
}

del {
    text-decoration:line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse:collapse;
    border-spacing:0;
}

/* ####################### Hierboven de reset ####################### */

html,body{
    background-color:#E6E6E6;
    width:33280px; /* x pagina's x 2560px */
    overflow:auto;
    overflow-x: hidden;
}

#header-navigation{
    position:absolute;
    left:0;
    top:0;
    width:33280px; /* x pagina's x 2560px */
    height:109px;
    clear:both;
    background-color:#ffffff;
}

#nav-bg{
    position:absolute;
    left:0;
    top:0;
    width:33280px; /* x pagina's x 2560px */
    height:30px;
    clear:both;
    background-color:#817E7B;
    /* background:url(../img/navigatiebalk_grijs.jpg) 0px 0px repeat-x; */
}

.smoke{
    margin-top:-261px;
    width:2560px;
    height:269px;
    z-index:25;
    background:url(../img/rook_5.png) 0px 0px no-repeat;
}
/*
#smoke{
    position:absolute;
    left:0;
    top:0;
    margin-top:109px;
    width:2560px;
    height:269px;
    background:url(../img/rook_4.png) 0px 0px repeat-x;
}
*/
.navtop{
    position:absolute;
    top:0;
    left:0;
    margin-left:440px;
    width:620px;
    height:200px;
    z-index:100;
}

.navtop li{
    float:left;
    font-family:Arial;
    font-weight:bold;
    font-size:12px;
    height:27px;
    line-height:25px;
}

.nh{
    width:55px;
}

.nc{
   width:125px;
}

.no{
    width:59px;
}

.nt{
    width:116px;
}

.nvc{
    width:64px;
}

.comm-disp{
    display:none;
}

.scanz{
    cursor:pointer;
}

.navhome{
    background:url(../img/tabs.png) -7px 0px no-repeat;
    width:55px;
    color:#fff;
}

.navcenc{
    background:url(../img/tabs.png) -68px 0px no-repeat;
    width:125px;
    color:#fff;
}

.navoff{
    background:url(../img/tabs.png) -195px -140px no-repeat;
    width:59px;
    color:#fff;
}

.navon{
    background:url(../img/tabs.png) -195px -78px no-repeat;
    width:59px;
    color:#fff;
}

.navtsfo{
    background:url(../img/tabs.png) -321px 0px no-repeat;
    width:116px;
    color:#fff;
}

.navc{
    background:url(../img/tabs.png) -441px 0px no-repeat;
    width:64px;
    color:#fff;
}

.subnav{
    position:absolute;
    top:0;
    left:0;
    margin-left:17px;
    margin-top:27px;
    width:154px;
    height:85px;
}

.subnav2{
    position:absolute;
    top:0;
    left:0;
    margin-left:177px;
    margin-top:27px;
    width:154px;
    height:70px;
}

.subnav3{
    position:absolute;
    top:0;
    left:0;
    margin-left:341px;
    margin-top:27px;
    width:154px;
    height:70px;
}

.subnav li, .subnav2 li, .subnav3 li{
    color:#817E7B;
    float:left;
    clear:both;
    height:20px;
    font-size:12px;
    text-align:left;
    width:154px;
    height:16px;
    letter-spacing:1px;
}

.subnav a, .subnav2 a, .subnav3 a{
    color:#817E7B;
    text-decoration:none;
}

.subnav a:hover, .subnav2 a:hover, .subnav3 a:hover{
    color:#ED8127;
    text-decoration:none;
}

.subnav li:hover, .subnav2 li:hover, .subnav3 li:hover{
    color:#ED8127;
    text-decoration:none;
}

.subnav .active, .subnav2 .active, .subnav3 .active{
    color:#ED8127;
}

.grid-960{
    top:0;
    position:absolute;
    width:960px;
}

.grid-nav{
    width:100%;
    float:left;
    clear:both;
    height:109px;
}

.grid-nav-left{
    margin-top:44px;
    margin-left:60px;
    width:296px;
    height:53px;
    float:left;
}

.grid-nav-right{
    width:664px;
    height:58px;
    float:left;
}

.grid-header{
    width:100%;
    float:left;
    clear:both;
    height:261px;
}

.grid-content{
    margin-top:20px;
    width:100%;
    float:left;
    clear:both;
}

.grid-footer{
    margin-top:20px;
    padding-top:5px;
    width:100%;
    float:left;
    clear:both;
    border-top:2px solid #817E7B;
    font-family:Arial;
    color:#F6A61C;

}

.grid-footer a{
    text-decoration:none;
    font-weight:bold;
    color:#817E7B;
    font-size:12px;
}

.grid-footer a:hover{
    color:#F6A61C;
}

.beton{
    top:0;
    margin-top:370px;
    position:absolute;
    width:1363px;
    height:438px;
    background:url(../img/beton.jpg) 0px 0px no-repeat;
}

.page{
    float:left;
    width:2560px;
}

.tussen{
    float:left;
    width:2560px;
}

.header-oranje, .header-groen, .header-blauw{
    position:absolute;
    top:0;
    margin-top:109px;
    width:2560px;
    height:261px;
}

.header-oranje-hf, .header-groen-hf, .header-blauw-hf, .header-blauw-hf2, .header-groen-hf2, .header-oranje-hf2{
    top:0;
    float:left;
    margin-top:109px;
    width:50%;
    height:261px;
}

.header-blauw-hf, .header-groen-hf, .header-oranje-hf2{
    float:right;
}

.header-oranje, .header-oranje-hf, .header-oranje-hf2{
    background:url(../img/balk_oranje_3.png) 0px 0px repeat-x;
}

.header-groen, .header-groen-hf, .header-groen-hf2{
    background:url(../img/balk_groen_2.png) 0px 0px repeat-x;
}

.header-blauw, .header-blauw-hf, .header-blauw-hf2{
    background:url(../img/balk_blauw_1.png) 0px 0px repeat-x;
}

.header-tekst{
    position:absolute;
    top:109px;
    left:0px;
    width:600px;
    height:259px;
    font-family:Arial;
    font-size:12px;
    line-height:18px;
    color:#FFFFFF;
    z-index:20;
}

.header-tekst p{
    width:545px;
    margin:5px 2px;
}

/* Home elementen */

#recent-werk{
    position:absolute;
    right:0;
    margin-top:-16px;
    width:440px;
    height:215px;
    background:url(../img/recentwerk_2.png) 0px 0px no-repeat;
}

.vlek-links{
    position:absolute;
    left:-330px;
    top:108px;
    width:323px;
    height:229px;
    background:url(../img/vlek_links.png) 0px 0px no-repeat;
}

.vlek-rechts{
    left:900px;
    top:108px;
    position:absolute;
    width:323px;
    height:229px;
    background:url(../img/vlek_rechts.png) 0px 0px no-repeat;
}

#beeld-home{
    position:absolute;
    top:0;
    left:600px;
    width:510px;
    height:298px;
    margin-top:85px;
    background:url(../img/home_beeld_9.png) 0px 0px no-repeat;
}

#home-acties{
    margin-left:-20px;
    width:627px;
    height:242px;
    background:url(../img/acties_1.png) 0px 0px no-repeat;
}

#cc-home{
    position:absolute;
    top:0;
    margin-top:-50px;
    left:575px;
    width:423px;
    height:521px;
    background:url(../img/cc-home_1.png) 0px 0px no-repeat;
}

#cc-huisstijl{
    position:absolute;
    top:0;
    margin-top:10px;
    left:650px;
    width:384px;
    height:381px;
    background:url(../img/cc-huisstijl_1.png) 0px 0px no-repeat;
}

#cc-print{
    position:absolute;
    top:0;
    margin-top:30px;
    left:500px;
    width:500px;
    height:373px;
    background:url(../img/cc-print.png) 0px 0px no-repeat;
}

#cc-advertenties{
    position:absolute;
    top:40px;
    left:550px;
    width:412px;
    height:405px;
    background:url(../img/cc-advertenties_2.png) 0px 0px no-repeat;
}

#cc-meer{
    position:absolute;
    top:0;
    left:500px;
    width:530px;
    height:368px;
    background:url(../img/cc-meer.png) 0px 0px no-repeat;
}

#cc-website{
    position:absolute;
    top:0;
    left:475px;
    width:534px;
    height:394px;
    background:url(../img/cc-muis.png) 0px 0px no-repeat;
}

#cc-webshop{
    position:absolute;
    top:0;
    left:550px;
    width:415px;
    height:371px;
    background:url(../img/cc-webshop_2.png) 0px 0px no-repeat;
}

#cc-tsfo{
    position:absolute;
    top:0;
    margin-top:44px;
    left:500px;
    width:832px;
    height:326px;
    background:url(../img/cc-tsfo_7.png) 0px 0px no-repeat;
}

#cc-contact{
    position:absolute;
    top:0;
    margin-top:55px;
    left:525px;
    width:472px;
    height:355px;
    background:url(../img/cc-contact.png) 0px 0px no-repeat;
}

#cc-onlinemarketing{
    position:absolute;
    top:0;
    left:525px;
    width:533px;
    height:412px;
    background:url(../img/cc-onlinemarketing_2.png) 0px 0px no-repeat;
}

#cc-conversieoptimalisatie{
    position:absolute;
    top:0;
    left:475px;
    width:591px;
    height:429px;
    background:url(../img/cc-conversieoptimalisatie_1.png) 0px 0px no-repeat;
}

#cc-emailmarketing{
    position:absolute;
    top:0;
    left:575px;
    width:533px;
    height:430px;
    background:url(../img/cc-emailmarketing.png) 0px 0px no-repeat;
}

#cc-zoekmachineoptimalisatie{
    position:absolute;
    top:0;
    left:575px;
    width:412px;
    height:428px;
    background:url(../img/cc-zoekmachineoptimalisatie.png) 0px 0px no-repeat;
}

#cc-socialmedia{
    position:absolute;
    top:0;
    left:575px;
    width:412px;
    height:408px;
    background:url(../img/cc-socialmedia.png) 0px 0px no-repeat;
}

.blog{
    margin-left:7px;
    float:left;
    clear:both;
    width:908px;
    height:66px;
}

.scan{
    float:left;
    clear:both;
    width:923px;
    height:41px;
    padding:15px;
    margin-top:20px;
    background:url(../img/knop_twijfel.png) 0px 0px no-repeat;
    cursor:pointer;
}

.scanclick{
    position:absolute;
    margin-top:-15px;
    margin-left:-15px;
    width:953px;
    height:71px;
}

.scan-expand{
    float:left;
    clear:both;
    width:931px;
    height:346px;
    margin-top:20px;
    padding-left:15px;
    padding-top:15px;
    background:url(../img/witvlak_scan_1.png) 0px 0px no-repeat;
    display:none;
    
}

.scroll{
    cursor:pointer;
}

.jaar-10{
    top:0;
    left:0;
    position:absolute;
    margin-left:-50px;
    width:95px;
    height:107px;
    background:url(../img/10jaar_3.png) 0px 0px no-repeat;
}

/* home */

#cs1{
    position:absolute;
    top:0;
    margin-top:109px;
    /* margin-left:356px; */
    width:1847px;
    height:1154px;
    background:url(../img/cs1_1.png) 0px 0px no-repeat;
}

#cs2{
    position:absolute;
    top:0;
    margin-top:0;
    /* margin-left:356px; */
    width:2559px;
    height:1417px;
    background:url(../img/cs2.png) 0px 0px no-repeat;
}

#cs3{
    position:absolute;
    top:0;
    margin-top:108px;
    /* margin-left:356px; */
    width:1778px;
    height:776px;
    background:url(../img/cs3.png) 0px 0px no-repeat;
}

#cs4{
    position:absolute;
    top:0;
    margin-left:680px;
    width:1381px;
    height:719px;
    background:url(../img/cs4.png) 0px 0px no-repeat;
}

#cs5{
    position:absolute;
    top:0;
    width:1493px;
    height:734px;
    background:url(../img/cs5.png) 0px 0px no-repeat;
}

.witvlak{
    position:absolute;
    top:0;
    width:180px;
    height:290px;
    padding:15px;
    padding-top:17px;
    /* background:url(../img/wit_vlak_2.png) 0px 0px no-repeat; */
}

.witvlak p{
    width:180px;
    color:#817E7B;
    font-family:Arial;
    font-size:12px;
    line-height:18px;
}

.wvlink-online, .wvlink-offline{
   position:absolute;
   top:0;
   margin-top:280px;
   font-family:Arial;
   font-size:14px;
   font-weight:bold;
   color:#84B819;
   padding-left:15px;
   background:url(../img/pijl_groen.png) 0px 3px no-repeat;
   line-height:12px;
   cursor:pointer;
   z-index:30;
}

.wvlink-offline{
    color:#009EDE;
    background:url(../img/pijltje.png) 0px 3px no-repeat;
}

.wv1{
    margin-left:23px;
    margin-top:425px;
}

.wv2{
    margin-left:242px;
    margin-top:425px;
}

.wv3{
    margin-left:460px;
    margin-top:425px;
}

.wv4{
    margin-left:678px;
    margin-top:425px;
}

#vlakken-home{
    margin-top:20px;
    margin-left:25px;
    width:860px;
    height:332px;
    background:url(../img/home_vlakken_1.png) 0px 0px no-repeat;
}

#payoff{
    position:absolute;
    width:555px;
    height:45px;
    margin-left:190px;
    margin-top:15px;
    text-align:center;
}

.cta-blauw{
    position:absolute;
    top:0;
    margin-top:190px;
    width:363px;
    height:52px;
    line-height:61px;
    background:url(../img/knop_home_1.png) 0px 0px no-repeat;
}

.cta-oranje{
    position:absolute;
    top:0;
    margin-top:190px;
    width:329px;
    height:54px;
    background:url(../img/knop_oranje.png) 0px 0px no-repeat;
}

.cta-roze{
    position:absolute;
    top:0;
    margin-top:190px;
    width:413px;
    height:54px;
    background:url(../img/knop_roze.png) 0px 0px no-repeat;
}

.heading{
    height:50px;
    width:175px;
    margin-top:2px;
    text-align:center;
}

.grootvlak, .grootvlak-fp{
    float:left;
    width:636px;
    margin-right:5px;
}

.grootvlak-fp{
    margin-left:-7px;
}

.gv-top{
    width:636px;
    height:12px;
    background:url(../img/gv-top.png) 0px 0px no-repeat;
}

.gv-repeater{
    width:636px;
    font-family:Arial;
    font-size:12px;
    color:#444444;
    background:url(../img/gv-repeater.png) 0px 0px repeat-y;
}

.portfolio{
    margin:0px 32px;
    line-height:18px;
    padding-bottom:20px;
}

.gv-bottom{
    width:636px;
    height:12px;
    background:url(../img/gv-bottom.png) 0px 0px no-repeat;
}

.kleinvlak{
    float:left;
    width:314px;
    /* background:url(../img/kleinvlak.png) 0px 0px no-repeat; */
}

.kv{
    float:left;
    clear:both;
}

.kv-top{
    width:314px;
    height:12px;
    background:url(../img/kv-top.png) 0px 0px no-repeat;
}

.kv-repeater{
    width:314px;
    background:url(../img/kv-repeater.png) 0px 0px repeat-y;
}

.kv-bottom{
    width:314px;
    height:12px;
    background:url(../img/kv-bottom.png) 0px 0px no-repeat;
}

.kv-inhoud{
    font-family:Arial;
    font-size:12px;
    margin:0px 25px;
    padding:10px 0px;
    line-height:18px;
}

.kv-titel{
    display:block;
    font-family:Georgia;
    font-weight:bold;
    font-style:italic;
    font-size:18px;
    line-height:22px;
    color:#444;
    margin-bottom:5px;
}

/*
.gbi{
    display:block;
    font-family:Georgia;
    font-weight:bold;
    font-size:18px;
    line-height:22px;
    color:#444;
}
*/

.oml, .oml:hover{
    font-family:Arial;
    font-size:12px;
    color:#E53387;
    font-weight:bold;
    cursor:pointer;
}

.vml, .vml:hover,.tvml, .tvml:hover{
    font-family:Arial;
    font-size:12px;
    color:#007FE0;
    font-weight:bold;
    cursor:pointer;
    text-decoration:underline;
}

.nvml, .nvml:hover{
    font-family:Arial;
    font-size:12px;
    color:#007FE0;
    font-weight:bold;
    cursor:pointer;
    text-decoration:underline;
}

.kv-line{
    float:left;
    font-family:Arial;
    font-size:12px;
    vertical-align:top;
    padding-top:5px;
    margin-left:5px;
}

.kv-list{
    clear:both;
}

.kv-list-end{
    clear:both;
    padding-top:10px;
}

#ccbg{
    width:935px;
    height:562px;
    padding:10px 10px 10px 15px;
    background:url(../img/ccbg.png) 0px 0px no-repeat;
}

#hbg{
    width:962px;
    margin-left:-2px;
    height:440px;
    padding:10px 10px 10px 15px;
    background:url(../img/witvlak_440pixels_1.png) 0px 0px no-repeat;
}

#website-cta, #webshop-cta, #print-cta, #advertenties-cta{
    position:absolute;
    width:169px;
    height:42px;
    margin-top:405px;
    margin-left:13px;
}

#webshop-cta{
    margin-left:243px;
}

#print-cta{
    margin-left:475px;
}

#advertenties-cta{
    margin-left:705px;
}

.pimg{
    border:1px solid #A9A8A7;
    margin-bottom:10px;
    margin-top:5px;
}

.offline_knop_twijfel_oranje{
    float:left;
    clear:both;
    margin-top:3px;
    margin-left:1px;
    width:314px;
    height:95px;
    background:url(../img/offline_knop-twijfel.png) 0px 0px no-repeat;
}

.home_knop_twijfel{
    float:left;
    clear:both;
    margin-top:3px;
    margin-left:1px;
    width:314px;
    height:95px;
    background:url(../img/home_knop-twijfel.png) 0px 0px no-repeat;
}

.online_knop_twijfel_roze{
    float:left;
    clear:both;
    margin-top:3px;
    margin-left:1px;
    width:314px;
    height:95px;
    background:url(../img/knop_twijfel_roze.png) 0px 0px no-repeat;
}

.knop-left, .knop-right{
    float:left;
    height:88px;
    width:208px;
    margin:0px 7px 0px 2px;
    text-align:center;
    padding-left:1px;
    padding-top:1px;
}

.knop-right{
    margin:1px 0px 0px 2px;
    width:88px;
    padding-left:3px;
}

.knop-link{
    position:absolute;
    width:314px;
    height:95px;
}

#zoekmachine-optimalisatie, #social-media, #conversie-optimalisatie, #e-mail-marketing{
    display:none;
}

.stepcarousel{
    position:relative;
    overflow:scroll;
    width:567px;
    height:75px;
}

    .stepcarousel .belt{
        position:absolute;
        left:0;
        top:0;
    }

    .stepcarousel .panel{
        float:left;
        overflow:hidden;
        width:167px;
        height:75px;
        padding:10px;
        border-right:1px solid #DDD;
    }

    .stepcarousel .invis{
        border-right:1px solid #FFF;
    }

    .panel .titel{
        font-family:Georgia;
        font-weight:bold;
        font-style:italic;
        font-size:16px;
        line-height:22px;
        color:#444;
    }

    .titel a, .titel a:hover{
        text-decoration:underline;
        color:#444;
}

.nactive{
    background:url(../img/navibalk_active.jpg) 0px 0px no-repeat;
}

.social-media{
    right:0;
    margin-top:-15px;
    position:absolute;
    /* background:url(../img/twitter-linkedin-facebook.png) 0px 0px no-repeat; */
    width:76px;
    height:25px;
}

.social-media .link{
    float:left;
    width:24px;
    height:25px;
    margin-right:1px;
}

#concept-en-creatie-tsfo{
    display:none;
}