/* CSS Document */

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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

body {
margin:0;
padding:0;
color: #232323;
line-height: 1.450;
}

@font-face {
	font-family: 'Museo 500';
	src: url('../fonts/Museo-500.eot');
	src: url('../fonts/Museo-500.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Museo-500.woff2') format('woff2'),
		url('../fonts/Museo-500.woff') format('woff'),
		url('../fonts/Museo-500.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

body, p, td, td p {
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 16px;
}

h1, h2, h3, h4, h5, h6, p {
margin-bottom:20px;
}

h1 {
font-family: 'Museo 500';
font-size:34px;
color:#EE3533;
margin-bottom:15px;
}

h2 {
font-size:18px;
margin-bottom:0;
}

h3 {
font-family: 'Museo 500';
font-size:26px;
}

a {
text-decoration:none;
color:#EE3533;
}

a:hover {
text-decoration:underline;
}

a:active, a:focus { 
outline: 0; 
} 

textarea, input[type="text"], input[type="submit"], input[type="email"] {
-webkit-appearance: none;
}

#headerwrapper {
width: 100%;
height:auto;
}

#header {
width:100%;
max-width:1240px;
height:auto;
margin-left:auto;
margin-right:auto;
padding:20px 20px 20px 20px;
}

#logo {
float: left;
width:40%;
height:auto;
}

#logo img {
max-width:280px;
height:auto;
display:block;
}

#header-right {
float:left;
width:60%;
height:auto;
}

#social-lang {
width:auto;
float:right;
height:auto;
padding-bottom:5px;
text-align:right;
}

#social-lang img {
height:30px;
width:auto;
display:inline-block;

margin-left:5px;
}

#social-lang div {
display:inline;
}


#search {
clear:right;
width:100%;
height:auto;
text-align:right;
position:relative;
}

#search input {
border:solid 1px #999999;
line-height:30px;
width:250px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding-left:10px;
}

#search input[type=submit] {
position:absolute;
top:2px;
right:1px;
width:30px;
background-image:url(../layout/search.gif);
background-position:center center;
background-repeat:no-repeat;
background-color:#FFFFFF;
border:none;
height:28px;
}

#navwrapper {
width: 100%;
height:auto;
background-color:#EEEEEE;
padding-top:6px;
padding-bottom:1px;
z-index:99;
position:relative;
}

#mobile-logo {
display:none;
}

#mobile-search {
display:none;
}

#label {
position: absolute;
top:10px;
right:20px;
z-index:10;
}

#label img {
width:140px;
height:auto;
}

#navwrapper.stick #label {
display:none;
}

#navwrapper.stick {
position:fixed;
top:0;
text-align:right;
}

#navwrapper.stick #mobile-logo {
display: block;
position:absolute;
top:0;
left:20px;
width:130px;
}

#navwrapper.stick #mobile-logo img {
max-width:100%;
height:auto;
}

/*#contentwrapper.stick {
margin-top:47px;
}*/

#nav {
width:100%;
max-width:1240px;
height:auto;
margin-left:auto;
margin-right:auto;
position:relative;
}

#sfeerwrapper {
width: 100%;
height:auto;
position:relative;
}


#contentwrapper {
width: 100%;
height:auto;
max-width:1240px;
padding:20px;
padding-bottom:50px;
margin-left:auto;
margin-right:auto;
}

#content {
float:left;
width:68%;
height:auto;
padding-right:30px;
}

#breadcrumbs {
width:100%;
height:50px;
line-height:50px;
font-size:12px;
color:#1C3F5C;
}

#breadcrumbs ul {
padding: 0;
margin: 0;
float: left;
}

#breadcrumbs ul li { display: inline; }

#breadcrumbs ul li a {
width:auto;
color:#1C3F5C;
text-decoration: none;
float: left;
}

#breadcrumbs ul li a:after {
content:">";
padding-left:10px;
padding-right:10px;
}

#breadcrumbs ul li a:hover span {
text-decoration:underline;
}

#column {
float:left;
width:32%;
height:auto;
}

#floordesigner {
padding:10px;
color:#FFFFFF;
background-image: url(../layout/bg-floordesigner.jpg);
background-position:center bottom;
background-size: 100% auto;
margin-top:20px;
}

#webshop {
padding:10px;
color:#FFFFFF;
background-image: url(../layout/bg-webshop.jpg);
background-position:center center;
background-size: cover;
margin-top:30px;
}

#column h3 {
font-size:22px;
font-weight:normal;
}

#floordesigner a.button-black {
width:49%;
}

#webshop a.button-black {
width:100%;
}

a.button-black {
display:block;
float:left;
background-color:#040404;
color:#FFFFFF;
height:60px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
padding-left:50px;
text-align:center;
font-size:15px;
padding-top:9px;
line-height:18px;
margin-top:10px;
}

a.button-black span {
font-size:23px;
line-height:23px;
}

a.floordesigner {
margin-right:1%;
background-image:url(../layout/icon-floordesigner.png);
background-repeat:no-repeat;
background-size: auto 40px;
background-position:9px 9px;
}

a.appstore {
margin-left:1%;
background-image:url(../layout/icon-appstore.png);
background-repeat:no-repeat;
background-size: auto 40px;
background-position:9px 9px;
}

a.webshop {
background-image:url(../layout/icon-webshop.png);
background-repeat:no-repeat;
background-size: auto 40px;
background-position:9px 9px;
}

a.button-black:hover {
text-decoration:none;
background-color: #333333;
}

#referentiewrapper {
width: 100%;
height:auto;
background-color:#F5F5F5;
}

#referentie {
width:100%;
/*max-width:1240px;*/
height:auto;
padding-top:20px;
padding-bottom:20px;
text-align:center;
}

#cataloguswrapper {
width: 100%;
height:auto;
background-image:url(../layout/bg-catalogus.jpg);
background-position:top center;
background-size:cover;
}

#catalogus {
width:100%;
max-width:1240px;
padding:45px 20px 30px 20px;
margin-left:auto;
margin-right:auto;
height:auto;
text-align:center;
}

#catalogus h4 {
font-family: 'Museo 500';
color:#FFFFFF;
font-size:36px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

#catalogus p {
color:#FFFFFF;
font-size:24px;
font-weight:bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

#catalogus p a {
color:#FFFFFF;
text-decoration:underline;
}

#catalogus p a.catalogus {
text-decoration:none;
display:inline-block;
line-height:50px;
padding-left:20px;
padding-right:20px;
background-color:#FFFFFF;
text-shadow: none;
font-family: 'Museo 500';
color:#EE3533;
font-weight:normal;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
margin-top:15px;
}

#catalogus p a.catalogus.view {
margin-right:10px;
}

#catalogus p a.catalogus.download {
margin-left:10px;
color: #FFFFFF;
background-color:#EE3533;
}

#logoscroll {
width: 100%;
height:auto;
background-color:#EE3533;
}

#footerwrapper {
width: 100%;
height:auto;
background-color:#2F2F2F;
}

#footer {
width:100%;
max-width:1240px;
height:auto;
margin-left:auto;
margin-right:auto;
padding:20px;
padding-bottom:0;
color:#BFBFBF;
}

#footer h6 {
color:#FFFFFF;
font-weight:normal;
font-size: 22px;
}

#footer a {
color:#BFBFBF;
}

#footer p:last-child {
margin-bottom:0;
}

#footertext {
float:left;
width:52%;
height:auto;
padding-right:80px;
padding-bottom:20px;
}

#footertext ul, #footerlinks ul {
list-style-type:none;
padding:0;
margin:0;
margin-bottom:20px;
}

#footertext li { 
display:inline;
margin:0;
padding:0;
}

#footertext li:after {
content:",";
margin-left:-2px;
display:inline-block;
}

#footertext li.mx_last:after {
display:none;
}

#footertext p:last-child a {
color: #FFFFFF;
text-decoration:underline;
}

#footerlinks {
float:left;
width:24%;
height:auto;
padding-bottom:20px;
}

#footercontact {
float:left;
width:24%;
height:auto;
padding-bottom:20px;
}

#footercontact td {
vertical-align:top;
}

#footercontact td p {
padding:0;
margin:0;
}

#footercontact tr:first-of-type td {
padding-bottom:15px;
vertical-align:top;
}

#footercontact td:first-of-type {
font-family: FontAwesome;
padding-right:8px;
text-align:center;
}

#footercontact a:hover {
text-decoration: none;
color:#FFFFFF;
}

#copywrapper {
width: 100%;
height:auto;
background-color:#0E0E0E;
text-align:right;
}

#copy {
width:100%;
max-width:1240px;
height:auto;
margin-left:auto;
margin-right:auto;
padding: 10px 20px 10px 20px;
color:#666666;
font-size:12px;
}

#copy a {
color:#666666;
}

.clear {
clear:both;
}

a.button-red {
display:inline-block;
background-color:#EE3533;
color:#FFFFFF;
padding:5px 10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
}

a.button-red:hover {
background-color:#CC0000;
text-decoration:none;
}

/*gegevens module*/

.item-row {
width:100%;
height:auto;
clear:left;
background-color:#F5F5F5;
margin-top:10px;
}

.name, .value {
float:left;
width:50%;
padding:8px 10px;
}

.name {
border-right: solid 10px #FFFFFF;
}

.value {
color:#EE3533;
}

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

#floordesigner a.button-black {
width:100%;
}

a.floordesigner {
margin-right:0;
}

a.appstore {
margin-left:0;
}

} /* end mediaquery */

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

#content {
width:100%;
padding-right:0;
}

#column {
width:100%;
}

#floordesigner {
float:left;
width:49%;
margin-right:1%;
}

#webshop {
float:left;
width:49%;
margin-left:1%;
margin-top:20px;
}

#floordesigner a.button-black {
width:49%;
}

a.floordesigner {
margin-right:1%;
}

a.appstore {
margin-left:1%;
}

#footertext {
padding-right:50px;
}

} /* end mediaquery */

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

#logo {
width:50%;
}



#header-right {
width:50%;
}

#search {
display:none;
}

#navprepend {
position:relative;
}

#mobile-search {
display:block;
position:absolute;
top:10px;
right:10px;
z-index:10;
}
.searchbox{
    position:relative;
    min-width:30px;
    width:0%;
    height:30px;
    float:right;
    overflow:hidden;
    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#FFFFFF;
    width:100%;
    height:30px;
    margin:0;
    padding:0px 55px 0px 15px;
    font-size:16px;
}

.searchbox-input::-webkit-input-placeholder {
    color: #333333;
}
.searchbox-input:-moz-placeholder {
    color: #333333;
}
.searchbox-input::-moz-placeholder {
    color: #333333;
}
.searchbox-input:-ms-input-placeholder {
    color: #333333;
}

.searchbox-icon,
.searchbox-submit{
    width:30px;
    height:30px;
    display:block;
    position:absolute;
    top:0;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:30px;
    text-align:center;
    cursor:pointer;
	background-image:url(../layout/search.gif);
	background-size:19px 21px;
	background-position:center center;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}



.searchbox-open{
    width:100%;
}


#social-lang {
width:100%;
}

#social-lang div {
display:block;
}

#social {
width:100%;
clear:both;
height:auto;
}

#lang {
clear: both;
width:100%;
height:auto;
}

#floordesigner a.button-black {
width:100%;
}

a.floordesigner {
margin-right:0;
}

a.appstore {
margin-left:0;
}

a.webshop {
margin-top:80px;
}

#footertext {
width:100%;
height:auto;
padding-right:0;
}

#footerlinks {
width:50%;
}

#footercontact {
width:50%;
}

} /* end mediaquery */

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

h1, h3 {
font-size:22px;
}

#logo {
width:100%;
text-align:center;
padding-top:50px;
}

#logo img {
max-width:60%;
height:auto;
display:inline-block;
}

#header-right {
position: absolute;
top:10px;
left:0;
width:100%;
}

#social {
width:35%;
float:left;
clear:none;
text-align:left;
padding-left:5px;
}

#lang {
width:65%;
float:left;
clear:none;
padding-right:10px;
}

#breadcrumbs {
display:none;
}

#floordesigner, #webshop {
width:100%;
}

#floordesigner a.button-black {
width:49%;
}

a.floordesigner {
margin-right:1%;
}

a.appstore {
margin-left:1%;
}

a.webshop {
margin-top:10px;
}

#catalogus h4 {
font-size:30px;
}

#catalogus p {
font-size:24px;
}

#catalogus p a.catalogus {
line-height:40px;
}

} /* end mediaquery */

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

#footerlinks, #footercontact {
width:100%;
}

} /* end mediaquery */

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

#floordesigner a.button-black {
width:100%;
}

a.floordesigner {
margin-right:0;
}

a.appstore {
margin-left:0;
}

.name, .value {
width:100%;
}

.name {
padding-bottom:0;
border:0;
}

} /* end mediaquery */