/* Flexslider */ .flexslider {background:none; border:none; margin-bottom:0;} .flexslider:hover .flex-direction-nav .flex-prev, .flexslider:hover .flex-direction-nav .flex-next {opacity:1;} .flexslider .flex-direction-nav .flex-prev, #nieuwsBox .flexslider .flex-direction-nav .flex-next {opacity:1;} .flexslider-controls {margin:0; position:absolute; right:-25px; width:100px; bottom:60px;} .flexslider-controls li {float:left; list-style:none; padding:0; margin:0;} .flexslider-controls li a {display:block; width:22px; height:22px; text-align:center; line-height:18px; color:#455159; background:white; margin-right:8px; font-weight:bold; border:solid 1px white;} .flexslider-controls li.flex-active a {background:#455159; color:white; border:solid 1px #999;} /* Slider */ #slider {position:relative; width:100%; margin:0 auto;} #slider .link {position:absolute; width:200px; height:140px; background-repeat:no-repeat; text-align:center;} #slider .link h3 {margin:0; background:#455159; color:white; font-size:1.2em; text-align:center; padding:10px 20px; display:inline-block; font-weight:normal;} #slider .link:hover h3 {background:#0f4e5d;} #slider .link:hover .arrowDown:after {border-top-color: #0f4e5d} #slider .link div {transform:rotate(3deg); background-repeat:no-repeat; background-position:-15px -28px; height:120px; margin-top:16px; padding-top:1px} #slider .link div span, #slider .link div small {color:white; display:block;} #slider .link div span {font-size:1.5em; font-family: 'KG Les Bouquinistes de Paris';} #slider .link div small {font-size:.9em; margin-top:-6px; text-transform:uppercase;} #slider .link.n1 {left:6.8%; bottom:8px} #slider .link.n1 div {background-image:url(../img/link-smoke-01.png); text-align:left; padding-left:55px;} #slider .link.n2 {left:38.2%; bottom:52px;} #slider .link.n2 div {background-image:url(../img/link-smoke-01.png); background-position:-10px -20px; transform:rotate(-3deg);} #slider .link.n3 {left:66%; top:130px;} #slider .link.n3 div {background-image:url(../img/link-smoke-02.png); background-position:-10px -20px; transform:rotate(-3deg); margin-top:1px;} #slider .link.n3 div span {margin-top:12px;} #slider .link.n3 div small {margin-left:45px} #slider .paging {margin:0; position:absolute; right:100px; bottom:25px;} #slider .paging li {float:left; list-style:none; padding:0; margin:0;} #slider .paging li a {display:block; width:22px; height:22px; text-align:center; line-height:18px; color:#455159; background:white; margin-right:8px; font-weight:bold; border:solid 1px white;} #slider .paging li.active a {background:#455159; color:white; border:solid 1px #999;} #slider .flexslider-controls {position:absolute; z-index:2; right:20px; bottom:60px;} #slider .flex-direction-nav {display:none;} /* grootseBox */ #grootseBox {height:165px; background:#e7eaeb; padding-top:1px;} #grootseBox .crow, #inspiratieBox .crow, #designtegelsBox .crow, #shopBox > .crow {width:1130px; margin:48px auto 0;} #grootseBox .crow .ccol {float:left; width:20%;} #grootseBox .crow .ccol a {color:#595959;} #grootseBox .crow .ccol a:hover img {opacity:0.65;} #grootseBox .crow .ccol a:hover {color:#0f4e5d;} #grootseBox .crow .ccol span, #grootseBox .crow .ccol img {float:left; display:block;} #grootseBox .crow .ccol img {margin-right:15px;} #grootseBox .crow .ccol span {margin-top:9px} #grootseBox .crow .ccol.n1 span {margin-top:0;} /* ontwerpBox */ #ontwerpBox {position:relative;} #ontwerpBox h3, #inspiratieBox h3, #shopBox h3, #nieuwsBox h3 {text-align:center; font-weight:300; color:#62696d; margin:60px 0; font-size:2em;} #ontwerpBox .bannerImg {width:100%;} #ontwerpBox .contact {position:absolute; bottom:20px; left:30px; font-family: 'KG Les Bouquinistes de Paris'; font-size:1.15em; transform:rotate(-8deg);} #ontwerpBox .contact .txt {display:block;} #ontwerpBox .contact .txt.n2 {margin-top:8px; margin-left:45px;} #ontwerpBox .contact .bannerCurve {position:absolute; right:0; top:-5px; width:30px;} #ontwerpBox .startLink {position:absolute; right:110px; bottom:50px; font-size:1.6em; text-transform:uppercase; font-weight:bold; color:#F79651; height:43px; line-height:43px; padding-right:60px; background:url("../img/start-arrow.png") no-repeat right top;;} #ontwerpBox .startLink:hover {background-position:right -44px; color:#60CAF1;} /* inspiratieBox */ #inspiratieBox .crow .ccol {width:550px; height:400px; float:left; position:relative;} #inspiratieBox .crow .ccol:last-child {float:right;} #inspiratieBox .crow.n2 {margin-top:30px;} #inspiratieBox .crow .ccol .bg {width:100%;} #inspiratieBox .crow .ccol footer {height:60px; background:#E6EAEB;} #inspiratieBox .crow .ccol footer h4 {float:left; font-size:1.7em; margin:0; margin-top:15px; margin-left:20px; color:#0f4d5c; font-weight:300;} #inspiratieBox .crow .ccol footer img {float:right; width:60px; height:60px; display:block;} #inspiratieBox .crow .ccol.n2 footer h4 {margin-left:30px;} #inspiratieBox .crow .ccol.n2 footer img {float:left;} #inspiratieBox .crow.n2 .ccol footer {top:0; bottom:initial;} #inspiratieBox .crow .ccol p, #nieuwsBox .flexslider .flex-caption {position:absolute; font-family: 'KG Les Bouquinistes de Paris'; color:white; font-size:1.9em; text-align:center; text-shadow:2px 0 1px rgba(0, 0, 0, 0.75); opacity:0; transition:all 300ms ease;} #inspiratieBox .crow.n1 .ccol.n1 p {bottom:90px; left:25px; transform:rotate(-4deg);} #inspiratieBox .crow.n1 .ccol.n2 p {top:20px; left:20px; transform:rotate(-3deg);} #inspiratieBox .crow.n2 .ccol.n1 p {bottom:20px; right:20px; transform:rotate(-3deg);} #inspiratieBox .crow.n2 .ccol.n2 p {top:85px; left:160px; transform:rotate(3deg);} #inspiratieBox .crow .ccol:hover p {opacity:1;} #inspiratieBox .bottomLink {margin-bottom:30px;} /* designtegelsBox */ #designtegelsBox {height:auto; background:#E7E1DE; transition:all 300ms ease;} #designtegelsBox .crow {margin-top:0;} #designtegelsBox .crow .ccol {width:24%; float:left; height:222px; position:relative; transition:all 300ms ease;} #designtegelsBox .crow .ccol.n2 {width:48%; margin-left:1.1%;} #designtegelsBox .crow .ccol:last-child {float:right;} #designtegelsBox .crow .ccol.n1 img {position:absolute; bottom:0; left:-30px;} #designtegelsBox .crow .ccol.n2 h4 {text-align:center; font-weight:normal; font-size:1.6em; margin-top:32px;} #designtegelsBox .crow .ccol.n2 p {width:95%; margin:0 auto; text-align:center; margin-bottom:0; overflow:hidden; height:85px; transition:all 300ms ease;} #designtegelsBox .crow .ccol.n2 .bottomLink {padding:0;} #designtegelsBox .crow .ccol.n3 img {position:absolute; bottom:0; right:-30px;} #designtegelsBox.fixed .crow {height:auto;} #designtegelsBox.fixed .crow .ccol {height:350px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:225px;} /* shopBox */ #shopBox .crow.n1 > .ccol.n1 span {position:absolute; top:0; display:block; font-size:1.2em; color:#888; left:115px; top:65px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:257px; height:257px; float:left; margin-right:32px; /*background:#026981;*/ position:relative;} #shopBox .crow.n1 .ccol img, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol img {width:100%; margin-bottom:6px;} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details {height:72px; background:#E7EAEB; color:#888; font-size:1.2em;} #shopBox .crow.n1 .ccol .details div, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details div {float:left;} #shopBox .crow.n1 .ccol .details div:first-child {width:80px; text-align:center; line-height:72px;} #shopBox .crow.n1 .ccol .details div:last-child {padding-top:11px; padding-left:20px; border-left:solid 1px #ddd; height:72px;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:257px; height:257px; position:absolute; background:#026981; opacity:0; height:182px; transition:all 300ms ease;} #shopBox .crow.n1 .ccol a:hover .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol a:hover .overlay {opacity:0.2; transition:all 300ms ease;} #shopBox .crow.n1 .ccol:last-child, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol:last-child {margin-right:0;} #shopBox > .row:last-child > div:first-child {width:550px; height:550px;} #shopBox .crow.n2 {margin-top:32px;} #shopBox .crow.n2 > .ccol {width:548px; height:548px; float:left;} #shopBox .crow.n2 > .ccol img {width:100%;} #shopBox .crow.n2 > .ccol.n2 {margin-left:32px;} #shopBox .crow.n2 > .ccol.n2 .crow.n1 .ccol {margin-right:30px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 {height:260px; width:100%; position:relative} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .shopChemImg {width:212px; display:block; position:absolute; bottom:0;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {width:388px; height:52px; display:block; position:absolute; right:0; top:35px; font-size:1.2em; color:#aaa;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink span {display:block;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink span:first-child {color:#888; font-size:1.15em; margin-top:-3px} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink span:last-child {font-size:.9em;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink .arrow {position:absolute; right:0; top:3px; width:53px; height:43px; background:url(../img/onder-arrow.png) no-repeat left top;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink:hover .arrow {background-position:left -44px;} #shopBox .bottomLink {margin-top:30px; margin-bottom:30px;} #shopBox .ccol.n2 .crow.n1 {margin-top:0;} /* nieuwsBox */ #nieuwsBox {height:683px; background:#F5F5F5; padding-top:1px;} #nieuwsBox .lowerSlider {height:445px; width:940px; margin: 0 auto; position:relative;} #nieuwsBox .flexslider .flex-prev {left:-80px !important; background-image:url(../img/slider-low-arrow-left.png); text-indent: -9999px;} #nieuwsBox .flexslider .flex-next {right:-80px !important; background-image:url(../img/slider-low-arrow-right.png); text-indent: 9999px;} #nieuwsBox .flexslider .flex-prev:before, #nieuwsBox .flexslider .flex-next:before {display:none;} #nieuwsBox .flexslider .flex-prev, #nieuwsBox .flexslider .flex-next {width:52px; height:43px; background-position:left top; background-repeat:no-repeat; transition:none;} #nieuwsBox .flexslider .flex-prev:hover, #nieuwsBox .flexslider .flex-next:hover {background-position:left -43px; transition:none;} #nieuwsBox .flexslider .flex-caption {position:absolute; top:90px; margin-left:38px; z-index:1; opacity:1; transform:rotate(-5deg); text-shadow:1px 0 1px rgba(0, 0, 0, 1); font-size:3em; line-height:45px;} #nieuwsBox .flexslider .flex-caption img {width:25px; height:auto; position:absolute; left:70px;} /* Media queries */ @media (max-width:1199px) { /* #slider {width:100%;} */ #slider .link.n1 {bottom:0;} #slider .link.n2 {bottom:15px;} #slider .link.n3 {top:60px;} #grootseBox .crow {width:940px;} #ontwerpBox .contact {left:10px; bottom:10px;} #ontwerpBox .startLink {width:270px; font-size:1.3em; right:90px; bottom:30px;} #grootseBox .crow, #inspiratieBox .crow, #designtegelsBox .crow, #shopBox > .crow {width:960px;} #inspiratieBox .crow .ccol {width:470px; height:350px;} #inspiratieBox .crow.n2 {margin-top:16px;} #designtegelsBox .crow .ccol {height:260px;} #designtegelsBox .crow .ccol.n2 p {width:80%; height:125px;} #designtegelsBox.fixed .crow .ccol {height:450px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:310px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:215px; height:210px;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:215px; height:152px;} #shopBox > .crow.n1 .ccol.n1 img {height:212px;} #shopBox .crow.n1 > .ccol.n1 span {top:50px; left:95px} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details, #shopBox .crow.n1 .ccol .details div:first-child, #shopBox .crow.n1 .ccol .details div:last-child {height:54px; line-height:54px;} #shopBox .crow.n1 .ccol .details div:last-child {padding-top:4px; line-height:22px;} #shopBox .crow.n2 > .ccol {width:462px; height:480px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {top:0; width:365px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 {height:240px;} #nieuwsBox {height:auto; padding-bottom:50px;} #nieuwsBox .lowerSlider {width:800px; height:380px;} #nieuwsBox .flexslider .flex-caption {font-size:2.2em; top:50px;} } @media (max-width:991px) { #slider .link.n1 {bottom:-20px;} #slider .link.n2 {bottom:15px;} #slider .link.n3 {top:60px; left:65%} #grootseBox .crow, #inspiratieBox .crow, #designtegelsBox .crow, #shopBox > .crow {width:840px;} #grootseBox .crow .ccol img {margin-right:5px;} #grootseBox .crow .ccol span {margin-top:12px; font-size:.9em;} #ontwerpBox .contact {bottom:70px; left:-15px;} #ontwerpBox .startLink {position:static; left:initial; right:initial; display:block; width:280px; font-size:1.32em; margin:30px auto 0;} #inspiratieBox .crow .ccol {width:410px; height:312px;} #designtegelsBox .crow .ccol img {width:250px;} #designtegelsBox .crow .ccol.n2 h4 {margin-top:25px;} #designtegelsBox .crow .ccol {height:280px;} #designtegelsBox .crow .ccol.n2 p {width:80%; margin:0 auto; height:150px;} #designtegelsBox.fixed .crow .ccol {height:480px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:350px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:185px; height:192px;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:185px; height:130px;} #shopBox > .crow.n1 .ccol.n1 img {height:192px;} #shopBox .crow.n1 > .ccol.n1 span {top:45px; left:80px} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details, #shopBox .crow.n1 .ccol .details div:first-child, #shopBox .crow.n1 .ccol .details div:last-child {height:54px; line-height:54px; font-size:.9em;} #shopBox .crow.n1 .ccol .details div:last-child {padding-top:4px; line-height:22px;} #shopBox .crow.n2 > .ccol {width:402px; height:402px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {top:-15px; width:365px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 {height:190px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .shopChemImg {width:180px;} #nieuwsBox .lowerSlider {width:690px; height:325px;} #nieuwsBox .flexslider .flex-caption {font-size:1.8em; top:80px; line-height:30px; margin-left:20px;} } @media (max-width:860px) { #grootseBox {height:auto; padding-bottom:40px;} #grootseBox .crow {width:auto;} #grootseBox .crow .ccol {float:none; width:300px; margin:0 auto 20px;} #grootseBox .crow .ccol:after {clear:both; content:""; display:block;} #grootseBox .crow .ccol.n1 span, #grootseBox .crow .ccol span {font-size:1em; margin-top:0; margin-top:18px;} #grootseBox .crow .ccol img {margin-right:10px;} #grootseBox .crow .ccol br {display:none;} #ontwerpBox .contact {left:10px} #ontwerpBox .contact .txt {font-size:.9em;} #ontwerpBox .contact .txt.n2 {margin-left:15px;} #ontwerpBox .contact .bannerCurve {right:-20px; width:25px;} #grootseBox .crow, #inspiratieBox .crow, #designtegelsBox .crow, #shopBox > .crow {width:700px;} #inspiratieBox .crow .ccol {width:340px; height:270px;} #inspiratieBox .crow .ccol p {font-size:1.5em;} #designtegelsBox .crow .ccol img {width:220px;} #designtegelsBox .crow .ccol.n2 h4 {margin-top:15px;} #designtegelsBox .crow .ccol {height:270px;} #designtegelsBox .crow .ccol.n2 p {height:165px;} #designtegelsBox.fixed .crow .ccol {height:530px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:425px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:332px; height:296px; margin-bottom:20px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n1 .ccol, #shopBox .crow.n2 {margin-bottom:20px;} #shopBox .crow.n1 .ccol:nth-child(2n), #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol:nth-child(2n) {margin-right:0;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:332px; height:234px;} #shopBox > .crow.n1 .ccol.n1 img {height:292px;} #shopBox .crow.n1 > .ccol.n1 span {top:75px; left:155px} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details, #shopBox .crow.n1 .ccol .details div:first-child, #shopBox .crow.n1 .ccol .details div:last-child {height:54px; line-height:54px; font-size:1em;} #shopBox .crow.n1 .ccol .details div:last-child {padding-top:4px; line-height:22px;} #shopBox .crow.n2 > .ccol {width:100%; clear:both; height:430px; text-align:center; margin-bottom:20px;} #shopBox .crow.n2 > .ccol img {width:430px;} #shopBox .crow.n2 > .ccol.n2 {margin-left:0; height:530px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {top:50px; width:400px; font-size:1.3em; text-align:left;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .shopChemImg {width:230px;} #nieuwsBox .lowerSlider {width:540px; height:260px;} #nieuwsBox .flexslider .flex-prev {} #nieuwsBox .flexslider .flex-next {} #nieuwsBox .flexslider .flex-caption {top:30px; line-height:30px; margin-left:10px;} } @media (max-width:767px) { #slider .link {display:none;} #ontwerpBox .contact {display:none;} #ontwerpBox h3, #inspiratieBox h3, #shopBox h3, #nieuwsBox h3 {font-size:1.8em;} #grootseBox .crow, #inspiratieBox .crow, #designtegelsBox .crow, #shopBox > .crow {width:580px;} #inspiratieBox .crow .ccol {width:280px; height:232px;} #inspiratieBox .crow .ccol p {font-size:1.8em;} #designtegelsBox .crow .ccol.n1, #designtegelsBox .crow .ccol.n3 {display:none;} #designtegelsBox .crow .ccol.n2, #designtegelsBox .crow .ccol.n2 p {width:100%;} #designtegelsBox .crow .ccol.n2 {padding-top:20px; padding-bottom:50px;} #designtegelsBox .crow .ccol {height:200px;} #designtegelsBox .crow .ccol.n2 h4 {margin-top:0;} #designtegelsBox .crow .ccol.n2 p {height:90px;} #designtegelsBox.fixed .crow .ccol {height:350px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:230px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:272px; height:256px; margin-bottom:20px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n1 .ccol, #shopBox .crow.n2 {margin-bottom:20px;} #shopBox .crow.n1 .ccol:nth-child(2n), #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol:nth-child(2n) {margin-right:0;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:272px; height:192px;} #shopBox > .crow.n1 .ccol.n1 img {height:252px;} #shopBox .crow.n1 > .ccol.n1 span {top:65px; left:130px} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details, #shopBox .crow.n1 .ccol .details div:first-child, #shopBox .crow.n1 .ccol .details div:last-child {} #shopBox .crow.n1 .ccol .details div:last-child {} #shopBox .crow.n2 > .ccol {width:100%; clear:both; height:430px; text-align:center; margin-bottom:20px;} #shopBox .crow.n2 > .ccol img {width:430px;} #shopBox .crow.n2 > .ccol.n2 {margin-left:0; height:500px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {top:50px; width:320px; font-size:1.3em; text-align:left;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .shopChemImg {width:230px;} #nieuwsBox .lowerSlider {width:400px; height:190px;} #nieuwsBox .flexslider .flex-caption {display:none;} } @media (max-width:620px) { #slider .flexslider-controls.n1 {right:-20px;} #grootseBox .crow, #inspiratieBox .crow, #designtegelsBox .crow, #shopBox > .crow {width:100%;} #inspiratieBox .crow .ccol, #inspiratieBox .crow .ccol:last-child {width:430px; height:322px; float:none; margin:0 auto;} #inspiratieBox .crow .ccol:first-child {margin-bottom:20px;} #designtegelsBox .crow .ccol.n2 p {width:430px;} #designtegelsBox .crow .ccol.n2 {margin:0;} #designtegelsBox .crow .ccol {height:220px;} #designtegelsBox .crow .ccol.n2 p {height:110px;} #designtegelsBox.fixed .crow .ccol {height:390px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:270px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:430px; height:auto; float:none;margin:0 auto 20px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n1 .ccol, #shopBox .crow.n2 {margin-bottom:20px; height:auto;} #shopBox .crow.n1 .ccol:nth-child(2n), #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol:nth-child(2n) {margin-right:auto;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:430px; height:304px;} #shopBox > .crow.n1 .ccol.n1 img {height:390px;} #shopBox .crow.n1 > .ccol.n1 span {top:95px; left:200px; font-size:1.6em;} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details, #shopBox .crow.n1 .ccol .details div:first-child, #shopBox .crow.n1 .ccol .details div:last-child {font-size:1.15em; height:80px; line-height:80px;} #shopBox .crow.n1 .ccol .details div:last-child {line-height:26px; padding-top:12px;} #shopBox .crow.n2 > .ccol {width:100%; clear:both; height:auto; text-align:center; margin-bottom:20px;} #shopBox .crow.n2 > .ccol img {width:430px;} #shopBox .crow.n2 > .ccol.n2 {margin-left:0; height:auto; margin-bottom:0;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 { height:auto;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {width:400px; font-size:1.3em; text-align:left; position:relative; top:initial; left:initial; height:80px; margin:20px auto 0;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .shopChemImg {display:block; clear:both; position:static; top:initial; left:initial; width:230px; margin:0 auto; width:250px;} #nieuwsBox .lowerSlider {width:430px; height:200px;} #nieuwsBox .flexslider .flex-prev, #nieuwsBox .flexslider .flex-next {display:none;} } @media (max-width:480px) { #inspiratieBox .crow .ccol, #inspiratieBox .crow .ccol:last-child {width:340px; height:265px; float:none; margin:0 auto;} #inspiratieBox .crow .ccol p {font-size:1.5em;} #designtegelsBox .crow .ccol.n2 p {width:80%;} #designtegelsBox .crow .ccol {height:250px;} #designtegelsBox .crow .ccol.n2 p {height:140px;} #designtegelsBox.fixed .crow .ccol {height:440px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:325px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:340px; height:auto;} #shopBox .crow.n1 .ccol, #shopBox .crow.n1 .ccol, #shopBox .crow.n2 {margin-bottom:20px; height:auto;} #shopBox .crow.n1 .ccol:nth-child(2n), #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol:nth-child(2n) {margin-right:auto;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:340px; height:240px;} #shopBox > .crow.n1 .ccol.n1 img {height:330px;} #shopBox .crow.n1 > .ccol.n1 span {top:85px; left:160px; font-size:1.6em;} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details, #shopBox .crow.n1 .ccol .details div:first-child, #shopBox .crow.n1 .ccol .details div:last-child {font-size:1.15em; height:80px; line-height:80px;} #shopBox .crow.n1 .ccol .details div:last-child {line-height:26px; padding-top:12px;} #shopBox .crow.n2 > .ccol {width:100%; clear:both; height:auto; text-align:center; margin-bottom:20px;} #shopBox .crow.n2 > .ccol img {width:340px;} #shopBox .crow.n2 > .ccol.n2 {margin-left:0; height:auto; margin-bottom:0;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 { height:auto;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {width:320px; font-size:1.3em; text-align:left; position:relative; top:initial; left:initial; height:80px; margin:20px auto 0;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .shopChemImg {display:block; clear:both; position:static; top:initial; left:initial; width:230px; margin:0 auto; width:250px;} #nieuwsBox .lowerSlider {width:340px; height:160px;} } @media (max-width:380px) { #grootseBox .crow .ccol {float:none; width:280px;} #ontwerpBox .startLink {font-size:1.2em; width:260px;} #inspiratieBox .crow .ccol, #inspiratieBox .crow .ccol:last-child {width:230px; height:198px;} #inspiratieBox .crow .ccol p {display:none;} #designtegelsBox .crow .ccol {height:310px;} #designtegelsBox .crow .ccol.n2 p {height:200px;} #designtegelsBox.fixed .crow .ccol {height:630px;} #designtegelsBox.fixed .crow .ccol.n2 p {height:520px;} #shopBox .crow.n1 .ccol, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol {width:230px; height:auto;} #shopBox .crow.n1 .ccol, #shopBox .crow.n1 .ccol, #shopBox .crow.n2 {margin-bottom:20px; height:auto;} #shopBox .crow.n1 .ccol:nth-child(2n), #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol:nth-child(2n) {margin-right:auto;} #shopBox .crow.n1 .ccol .overlay, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .overlay {width:230px; height:163px;} #shopBox > .crow.n1 .ccol.n1 img {height:230px;} #shopBox .crow.n1 > .ccol.n1 span {top:55px; left:105px; font-size:1.4em;} #shopBox .crow.n1 .ccol .details, #shopBox .crow.n2 > .ccol.n2 .crow:first-child .ccol .details, #shopBox .crow.n1 .ccol .details div:first-child, #shopBox .crow.n1 .ccol .details div:last-child {font-size:1.15em; height:80px; line-height:80px;} #shopBox .crow.n1 .ccol .details div:last-child {line-height:26px; padding-top:12px;} #shopBox .crow.n2 > .ccol {width:100%; clear:both; height:auto; text-align:center; margin-bottom:20px;} #shopBox .crow.n2 > .ccol img {width:230px;} #shopBox .crow.n2 > .ccol.n2 {margin-left:0; height:auto; margin-bottom:0;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 { height:auto;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink {width:200px; font-size:1.2em; text-align:left; position:relative; top:initial; left:initial; height:80px; margin:0; margin-left:30px; margin-top:20px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .onderLink .arrow {right:-50px;} #shopBox .crow.n2 > .ccol.n2 .crow.n2 .shopChemImg {display:block; clear:both; position:static; top:initial; left:initial; width:230px; margin:0 auto; width:250px;} #nieuwsBox .lowerSlider {width:230px; height:110px;} }