@import url("css/bootstrap.css");

/* ====== Import font Avenir LT Std 95 Black ====== */
@font-face {
    font-family: 'AvenirLTStd95Black';
    src: url('fonts/avenirltstd-black-1-webfont.eot');
    src: url('fonts/avenirltstd-black-1-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/avenirltstd-black-1-webfont.woff') format('woff'),
         url('fonts/avenirltstd-black-1-webfont.ttf') format('truetype'),
         url('fonts/avenirltstd-black-1-webfont.svg#AvenirLTStd95Black') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ====== Import font Avenir LT Std 35 Light ====== */
@font-face {
    font-family: 'AvenirLTStd35Light';
    src: url('fonts/avenirltstd-light-1-webfont.eot');
    src: url('fonts/avenirltstd-light-1-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/avenirltstd-light-1-webfont.woff') format('woff'),
         url('fonts/avenirltstd-light-1-webfont.ttf') format('truetype'),
         url('fonts/avenirltstd-light-1-webfont.svg#AvenirLTStd35Light') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* ====== Import font Axiforma Black ====== */
@font-face {
    font-family: 'AxiformaBlack';
    src: url('fonts/Axiforma-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ====== Import font Axiforma Medium ====== */
@font-face {
    font-family: 'AxiformaMedium';
    src: url('fonts/Axiforma-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ====== Algemeen ====== */
html { overflow-y:scroll; }
body { margin:0 auto; padding:0; text-align:center; }
body.editor { text-align:left; }


/* ====== Algemene stijlen ====== */
a, a:link, a:visited, a:active, a:hover { color:#666666; text-decoration:underline; }
a.button, a:link.button, a:visited.button, a:active.button, a:hover.button {border:1px solid #7F5F00; background-color:#FFC000;padding:4px; text-decoration:none;color:#000; }
h2 { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; color:#666666; text-transform:uppercase; margin:0; padding:0; } 
h3 { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#666666; text-transform:uppercase; margin:0; padding:0; } 
h4 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#707172; text-transform:none; text-decoration:none; }

/* ====== DNN stijlen ====== */
.Head { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; font-size:26px; color:#666666; text-transform:uppercase; line-height:28px; } 
.Head2 { font-family:'AvenirLTStd95Black', Verdana, Arial, Helvetica, sans-serif; font-size:26px; color:#666666; text-transform:uppercase; line-height:28px; } 
.SubHead { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#666666; text-transform:uppercase; }
.SelectedTab { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; font-weight:normal; }
.Normal { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; }
.NormalBold { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
input.NormalTextBox, textarea.NormalTextBox, select.NormalTextBox, .OptIn_TextBox { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; text-transform:none; }
a.CommandButton, a.CommandButton:link, a.CommandButton:visited, a.CommandButton:active { font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; color:#666666; text-decoration:underline; }
a.CommandButton:hover { color:#333333;}
.PagingTable { border:1px solid #DDDDDD; }
hr { height:0; border:0; border-top:1px solid #666666; }
strong { color:#000; }
select.target, select.target option{ font-family:'AvenirLTStd35Light', Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#666; padding:5px; }

/* ===== Contentpane ===== */
.contentpane p, .contentpane td, .contentpane .Normal, 

/* responsive */
img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    border: 0;
    padding: 0;
    vertical-align: top;
}

body {
    background-color: #000;
    color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 26px;
    font-weight: bold;
}

.content {
    padding: 0 15%;
}

.box {
    position: relative;
    top: 159px;
}

.dvimg {
    width: 31%;
    margin: 0 1%;
    float: left;
    transition: transform 0s ease-in-out;
}

.dvimg:hover {
    transform: scale(1.1);
}

.buttons {
    display: flex;
    justify-content: center;
    margin: 75px 0;
}

@media only screen and (max-width: 790px) {
    .container {
        width: 100%;
        margin-top: 100px;
    }
    .buttonbox {
        width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .dvimg {
        width: 62%;
        margin: 4% 20%;
    }
    .buttons {
        margin: 20px 0;
    }
}

@media (max-device-width: 535px) {
    img[data-src-960px] {
        content: attr(data-src-960px, url);
    }
}

@media (min-device-width: 960px) {
    img[data-src-1260px] {
        content: attr(data-src-1260px, url);
    }
}