html, body {
display:block;
}
@font-face {
font-family: 'bebasregular';
src: url('BEBAS___-webfont.eot');
src: url('BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
url('BEBAS___-webfont.woff') format('woff'),
url('BEBAS___-webfont.ttf') format('truetype'),
url('BEBAS___-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}
header {
padding-top: 32px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
header.scrolled {
background: rgba(54, 130, 172, 0.8) none repeat scroll 0 0 !important;
padding-bottom: 20px;
}
.menu {
text-align: right;
width: 100%;
line-height: 42px;
display: block;
}
.menu li {
display: inline-block;
vertical-align: middle;
margin-left: 43px;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
color: white !important;
font-size: 14px;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: bolder;
}
.menu__weight{
font-weight: 300 !important;
}
.menu li:last-child a {
display: inline-block;
padding: 15px 23px;
background: #e12200;
line-height: 1;
}
.flexslider {
width: 100%;
height: 900px;
position: relative;
}
.flexslider ul {
width: 100%;
height: 100%;
}
.flexslider ul li {
width: 100%;
height: 900px;
background-size: cover;
position: relative;
}
.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: 29px;
text-align: center;
z-index: 200;
}
.flexslider .flex-control-nav li {
display: inline-block;
margin: 0 5px;
}
.flexslider .flex-control-nav li a {
display: block;
width: 22px;
height: 22px;
background: #d6e4ea;
font-size: 0;
}
.flexslider .flex-control-nav li a.flex-active {
background: white;
}
.productContainer {
border: 1px solid #ebebeb;
padding: 20px;
margin-bottom: 30px;
}
.productImage img {
max-width: 100%;
}
.productImage {
margin-bottom: 24px;
}
.productName {
text-align: center;
color: #3682ac;
font-size: 16px;
font-weight: 700;
font-family: 'Roboto', sans-serif;
margin-bottom: 17px;
}
.productStatus {
font-size: 14px;
color: #8d8d8d;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin-bottom: 17px;
}
.productStatus .left {
float: left;
}
.productStatus .right {
float: right;
}
.productButton a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: white;
background: #3682ac;
text-align: center;
}
.sectionTitle {
font-size: 42px;
font-weight: 700;
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: uppercase;
margin-bottom: 70px;
letter-spacing: 1px;
}
#products {
margin-top: 95px;
}
#productInfoTabs {
margin-top: 66px;
}
.infoTabs {
display: table;
border: 0;
width: 100%;
border-collapse: collapse;
}
.infoTabs li {
display: table-cell;
float: none;
text-align: center;
margin: 0;
border: 1px solid #ebebeb;
}
.infoTabs li a {
padding: 0;
border: 0 !important;
text-transform: uppercase;
height: 54px;
line-height: 54px;
border-radius: 0 !important;
display: block;
margin: 0;
color: #8d8d8d;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
background: white !important;
outline: none;
padding: 0 30px;
}
.infoTabs li a.nav-dot-current {
transform: scale(1.2);
font-weight: 700;
color: #3682ac !important;
box-shadow: 2px 0px 38px 0px rgba(0, 0, 0, 0.2);
}
#cdPersen, #dvdPersen, #bluRay, #prijzen, #diensten, #veelGesteldeVragen, #korting, #video, #replicate, #promoot, #service {
background-size: 100% 100%;
}
#cdPersen {
background-image: url(../img/prodinfo1.jpg);
}
#dvdPersen, #video {
background-image: url(../img/prodinfo2.jpg);
}
#bluRay, #replicate {
background-image: url(../img/prodinfo3.jpg);
}
#prijzen, #promoot {
background-image: url(../img/prodinfo4.jpg);
}
#diensten, #service {
background-image: url(../img/prodinfo5.jpg);
}
#veelGesteldeVragen {
background-image: url(../img/prodinfo6.jpg);
}
#productInfoTabs .tab-content, #overigeInfo .tab-content{
margin-top: 30px;
}
.prodInfoItem {
height: 300px;
color: white;
padding-top: 78px;
text-align: center;
font-family: 'Roboto', sans-serif;
}
.prodInfoItem:nth-child(1), .prodInfoItem:nth-child(2), .prodInfoItem:nth-child(3) {
border-bottom: 1px solid white;
}
.prodInfoItem:nth-child(1), .prodInfoItem:nth-child(2), .prodInfoItem:nth-child(4), .prodInfoItem:nth-child(5) {
border-right: 1px solid white;
}
.prodInfoTitle {
font-size: 18px;
font-weight: 700;
margin-bottom: 18px;
text-transform: uppercase;
}
.prodInfoTitle a{
color: white;
text-decoration: none;
}
.prodInfoTitle a:hover{
border-bottom: 3px solid;
}
.prodInfoText {
font-size: 14px;
line-height: 28px;
}
.prodInfoText a{
color:white;
text-decoration: none;
}
.prodInfoText a:hover{
border-bottom: 1px solid;
}
#productInfoTabs .tab-pane {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}
#overigeInfo {
margin-top: 95px;
}
#korting {
position: relative;
}
#korting video {
width: 100%;
height: 623px;
background: black;
display: block;
}
#video, #replicate, #promoot, #service {
height: 623px;
}
.videoOverlay {
background-color: rgba(8, 22, 38, 0.4);
position: absolute;
width: 100%;
height: 100%;
color: white;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
.videoOverlay i {
cursor: pointer;
}
.tab-pane > img {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tab-pane {
position: relative;
}
ul.tab-content {
margin-bottom: 0;
}
#blueSection {
margin-top: 100px;
padding-top: 110px;
background-image: url(../img/blueBg.jpg);
background-size: cover;
}
#blueSection .infoTabs li a {
background: transparent !important;
color: white;
text-shadow: none;
}
#blueSection .infoTabs li {
width: 25%;
}
#blueSection .infoTabs {
margin-bottom: 80px;
background: transparent;
}
#blueSection .infoTabs li.active a {
transform: scale(1.2);
font-weight: 700;
color: #3682ac !important;
box-shadow: 2px 0px 38px 0px rgba(0, 0, 0, 0.2);
background: white !important;
}
#bedrijf p {
color: white;
font-size: 16px;
line-height: 28px;
font-family: 'Roboto', sans-serif;
margin-bottom: 35px;
}
#bedrijf {
margin-bottom: 237px;
}
#contactForm label {
display: block;
color: white;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 12px;
text-transform: uppercase;
margin-bottom: 2px;
min-height: 10px;
}
#contactForm input[type="text"] {
width: 100%;
height: 42px;
background: transparent;
border: 0;
border-bottom: 1px solid white;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 14px;
margin-bottom: 24px;
}
#contactForm input#name, #contactForm input#phone, #contactForm input#lastName {
font-weight: 700;
}
#contactForm button#submit {
display: block;
margin: 46px auto 0;
background: transparent;
font-family: 'Roboto', sans-serif;
font-weight: 700;
text-transform: uppercase;
width: 228px;
height: 58px;
font-size: 14px;
border: 1px solid white;
color: white;
}
#contact {
margin-bottom: 115px;
}
.siteContacts .itemTitle {
font-size: 20px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 40px;
}
.siteContacts {
color: white;
font-family: 'Roboto', sans-serif;
}
.siteContacts .itemInfo p {
font-size: 16px;
margin-bottom: 40px;
line-height: 28px;
}
.siteContacts .itemInfo p:last-child {
margin-bottom: 60px;
}
.itemSocials {
font-size: 30px;
}
.itemSocials li {
display: inline-block;
vertical-align: middle;
margin-right: 25px;
}
.itemSocials li a {
color: white !important;
}
#vestigingen {
margin-bottom: 93px;
}
#voorwaarden {
color: white;
font-family: 'Roboto', sans-serif;
margin-bottom: 81px;
}
.voorwaardenTitle {
font-size: 20px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 25px;
}
.voorwaardenText {
font-size: 16px;
line-height: 28px;
margin-bottom: 42px;
}
.voorwaardenText span {
font-weight: 700;
}
#voorwaarden a {
display: block;
width: 168px;
height: 58px;
line-height: 58px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
border: 1px solid white;
color: white;
text-align: center;
margin-top: 22px;
}
.main-footer {
background-color: #202324;
color: #fff;
padding-top: 40px;
line-height: 1.42857;
}
.main-footer * {
line-height: 1.42857;
}
.main-footer h3 {
font-size: 20px;
margin: 5px 0 15px;
font-family: 'bebasregular';
}
.main-footer a, .main-footer a:hover {
color: #a2b8c8;
font-family: Arial;
font-size: 12px;
}
.main-footer .left-sep {
position: relative;
}
.main-footer .left-sep:after {
background: rgba(0, 0, 0, 0) url("../img/footer-separator.png") no-repeat scroll center center;
content: "";
height: 172px;
position: absolute;
right: 0;
top: 0;
width: 2px;
}
.main-footer .right-sep {
position: relative;
}
.main-footer .right-sep:after {
background: rgba(0, 0, 0, 0) url("../img/footer-separator.png") no-repeat scroll center center;
content: "";
height: 172px;
left: 0;
position: absolute;
top: 0;
width: 2px;
}
.main-footer ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.main-footer ul li {
margin-bottom: 3px;
}
.main-footer ul.triang li:before {
background: rgba(0, 0, 0, 0) url("../img/triang.png") no-repeat scroll center center;
content: "";
display: inline-block;
height: 10px;
margin-right: 9px;
width: 7px;
}
.main-footer ul.footer-social li {
display: inline-block;
}
.main-footer ul.footer-social li a {
display: block;
height: 34px;
width: 34px;
}
.main-footer ul.footer-social li a.fb {
background-position: -8px -123px;
}
.main-footer ul.footer-social li a.tw {
background-position: -56px -123px;
}
.main-footer ul.footer-social li a.gg {
background-position: -102px -123px;
}
.main-footer ul.footer-social li a.yt {
background-position: -148px -123px;
}
.main-footer .sub-footer {
padding: 70px 15px 10px;
}
.main-footer .sub-footer hr {
border-top-color: #797b7c;
margin: 0 0 5px;
}
.main-footer .sub-footer small {
color: rgba(255, 255, 255, 0.5);
font-family: Arial;
font-size: 11px;
text-transform: uppercase;
}
.main-sprite {
background-image: url("../img/sprites.png");
background-repeat: no-repeat;
}
.slides li:first-child video {
width: 100%;
height: 100%;
}
.sliderCamera {
background-image: url(../img/cam.png);
width: 1900px;
height: 899px;
position: absolute;
top: 0;
right: 0;
z-index: 100;
}
.sliderCamera .cameraVideoBox {
bottom: 247px;
height: 268px;
position: absolute;
right: 386px;
width: 477px;
}
.sliderCamera .cameraVideoBox video {
width: 100%;
height: 100%;
background: black;
}
#slider .container-fluid > .row {
position: relative;
}
#slider .container-fluid > .row > .container {
position: absolute;
bottom: 0;
z-index: 101;
right: 0;
left: 0;
}
.sliderText {
background: rgba(104,154,182,0.8);
color: white;
font-family: 'Roboto', sans-serif;
padding-top: 30px;
line-height: 24px;
font-size: 15px;
font-weight: 300;
padding-bottom: 40px;
padding-left: 30px;
padding-right: 30px;
letter-spacing: 0.3px;
}
.sliderText p {
margin-bottom: 21px;
}
.mobileButton {
background: transparent;
border: 0;
line-height: 40px;
padding: 0;
margin: 0;
font-size: 30px;
display: none;
color: white;
}
#products .sectionTitle {
margin-bottom: 64px;
}
#productInfoTabs .sectionTitle {
margin-bottom: 62px;
}
#overigeInfo .sectionTitle {
margin-bottom: 63px;
}
.modalWindow {
background-color: white;
bottom: 10%;
box-shadow: 2px 0 38px 0 rgba(0, 0, 0, 0.2);
left: 0;
margin: 0 auto;
max-width: 1110px;
/* padding: 60px 65px 30px; */
padding: 20px 65px 65px 65px;
position: fixed;
right: 0;
top: 10%;
z-index: 10000;
display: none;
}
.modalTitle {
font-family: "Roboto",sans-serif;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
}
.modalBody {
height: 95%;
max-height: 95%;
overflow-y: auto;
}
/* .modalBody p {
padding: 0 10px;
} */
.modalBody div {
}
.modalBody div#intro {
background-size: 100% 100%;
}
.modalBody div#sidebar {
width: auto;
}
.modalBody div#intro .container{
width: auto;
}
.modalBody div#intro .infobox {
margin-bottom: 10px;
}
.modalBody div#intro .infobox img {
width: 198px;
}
.modalBody div#sidebar #menu_vert li {
top: -15px;
padding-bottom: 5px;
}
.modalBody p:after {
content: " ";
display: table;
clear: both;
}
.modalBody h3 {
margin: 0;
}
.modalClose a {
display: inline-block;
height: 15px;
outline: medium none !important;
position: relative;
width: 15px;
}
.modalClose a span {
background: #3682ac none repeat scroll 0 0;
border-radius: 1px;
display: block;
height: 3px;
position: absolute;
top: 6px;
width: 18px;
background: #f00;
}
.modalClose a span:first-child {
transform: rotate(45deg);
}
.modalClose a span:last-child {
transform: rotate(-45deg);
}
.modalClose {
top: 10px;
position: absolute;
right: 10px;
text-align: center;
}
.body-overflow {
overflow: hidden;
}
#voorwaarden {
background: #fff;
color: #000;
padding: 10px 0px;
max-height: 300px;
}
#voorwaarden .voorwaarden-warp{
padding: 30px 100px;
}
#voorwaarden .voorwaardenTitle {
color: #3682ac;
margin-bottom: 5px;
}
#voorwaarden .voorwaardenText {
line-height: 18px;
}
#voorwaarden a {
color: #337ab7;
border: 1px solid #337ab7;
}
._mCS_1 .mCSB_dragger .mCSB_dragger_bar{
background-color: #3682ac;
border-radius:0;
}
._mCS_1 .mCSB_dragger:hover .mCSB_dragger_bar{
background-color: #3682ac;
}
._mCS_1 .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background-color: #3682ac;
}
._mCS_1 .mCSB_dragger .mCSB_draggerRail{
background-color: #3682ac;
}
#videobox .row{
display: block;
position: relative;
}
.vimeoFrame{
overflow: hidden;
position:absolute;
width:100%;
height:900px;
top: 0;
text-align: center;
}
.vimeoFrame #vimeoVideo{
width:1900px;
height:1100px;
bottom: -100px;
right: 0;
position: absolute;
}
.vimeoFrame .textContainer{
text-align: left;
position: absolute;
width: 100%;
bottom: 0;
}
.vimeoFrame .replay{
background: rgba(104,154,182,0.8);
color: white;
font-family: 'Roboto', sans-serif;
position: absolute;
bottom: 20px;
width: 120px;
border: 0;
padding: 3px 5px;
z-index: 100;
display: none;
}
#products .productContainer{
padding: 0;
}
#products .productContainer .productImage{
margin: 0;
position: relative;
}
#products .productContainer .productImage a{
display: block;
position: absolute;
height: 10%;
left: 25%;
right: 25%;
bottom: 5%;
}
@media (max-width: 767px) {
#voorwaarden .voorwaarden-warp{
padding: 30px 40px;
}
.vimeoFrame{
overflow: auto;
position: static;
height: auto!important;
}
.vimeoFrame .textContainer{
position: static;
}
.vimeoFrame #vimeoVideo{
display: none;
}
#products{
margin-top: 95px!important;
}
}