/*
 * Starsale
 * Author: Hippics Design
 */

/* algemeen */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 300;
    src: local('Nunito-Light'), url("../fonts/nunito-light.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito-Regular'), url("../fonts/nunito-normal.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: local('Nunito-Bold'), url("../fonts/nunito-bold.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family:"Eras ITC";
    src:url("../fonts/eras-medium-itc.eot"),
        url("../fonts/eras-medium-itc.ttf") format("truetype");
}
@font-face {
    font-family:"Eras ITC";
    src:url("../fonts/eras-bold-itc.eot"),
        url("../fonts/eras-bold-itc.ttf") format("truetype");
    font-weight:bold;
}
body {
    color:#004812;
    background-color:#f3f3f3;
    font-family:"Nunito","Nunito","Helvetica Neue",Helvetica,Arial,sans-serif;
}
a {
    color:#fe921e;
}
a:hover, a:active, a:focus {
    outline:0;
}
.img-max-width {
    width:100%;
}

.form-control, .btn {
    border-radius:0;
}
.form-error {
    color:red;
}
.btn {
    vertical-align:top;
}
.social > div, .social > a {
    display:inline-block;
    vertical-align:top;
    max-width:200px !important;
}

/* header */
header .container {
    background-color:#cfddd2;
}
    header img.logo {
        width:100%;
        max-width:333px;
        margin:10px 0;
        padding:0 10px;
    }
    @media (max-width: 768px) {
        header img.logo {
            max-height:80px;
            width:auto;
        }
    }
    header .row > div:first-of-type {
        padding:0;
        background-color:#fff;
    }
    header .row .header-text {
        text-align:right;
        font-size:26px;
        font-weight:bold;
    }
    header .flags a img {
        max-height:20px;
        float:right;
        margin:0 0 10px 10px;
    }
    @media (max-width: 992px) {
        header .row .header-text {
            font-size:18px;
        }
        header .flags a img {
            max-height:16px;
        }
    }

/* navbar */
.navbar, .navbar>.container {
    background-color:#004812;
    border-radius:0;
    border:0;
}
.navbar {
    margin:0;
    min-height:35px;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin:0 -15px;
}
.navbar-default .navbar-nav > li > a {
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    padding:8px 30px 8px 30px;
}
@media (min-width: 992px) and (max-width: 1200px) {
    .navbar-default .navbar-nav > li > a {
        font-size:12px;
        padding:8px 22px 8px 22px;
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    .navbar-default .navbar-nav > li > a {
        font-size:12px;
        padding:8px 10px 8px 10px;
    }
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
    color:#fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color:#eee;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color:#dddddd;
    background-color:#004812;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color:#fe921e;
    background-color:#004812;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color:#004812;
}
    /* mobile navbar */
    .navbar-default .navbar-toggle {
        border-color:#fff;
    }
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color:#fe921e;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color:#fff;
    }
    @media (max-width: 767px) {
        .navbar-default .navbar-nav .open .dropdown-menu > li > a {
            color:#fff;
        }
        .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
        .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
            color:#fff;
        }
        .navbar-default .navbar-nav .dropdown-menu {
            margin-left:20px;
        }
    }

    /* submenu */
    #subnavbar {
        border-color:#004812;
    }
    #submenu {
        margin-top:20px;
        margin-bottom:20px;
        padding-left:20px;
    }
    @media (max-width: 767px) {
        #submenu {
            margin-top:0;
            background-color:#cfddd2;
            margin-left:-15px;
            margin-right:-15px;
            padding:0 15px;
        }
    }
    #submenu ul > li {
        float:none;
    }
    #submenu .navbar-nav > li > a {
        padding:6px 30px 6px 30px;
        color:#004812;
        cursor:pointer;
    }
    #submenu .navbar-nav > .active > a,
    #submenu .navbar-nav > .active > a:hover,
    #submenu .navbar-nav > .active > a:focus {
        font-weight:bold;
        background:url(../img/minilogo.png) no-repeat left center;
    }
    #submenu .navbar-nav > .active {
        background:url(../img/minilogo.png) no-repeat left center;
    }
    #submenu .navbar-toggle {
        background-color:#fff;
        border-color:#fe921e;
    }
    #submenu .navbar-toggle .icon-bar {
        background-color:#fe921e;
    }

    .left-item {
        border-bottom:2px solid #004812;
        padding:20px;
        margin:0 5px 0 5px;
    }
    .left-item:first-of-type, :not(.left-item) + .left-item {
        border-top:2px solid #004812;
    }
    .left-item .title {
        font-weight:bold;
        font-size:16px;
        margin:0 0 10px 0;
    }

/* content */
.container {
    background-color:#fff;
}
.left-sidebar {
    margin-bottom:20px;
}
.left-post-image {
    float:left;
    max-width:300px;
    max-height:300px;
    margin:4px 14px 5px 0;
    box-shadow:2px 2px 4px rgba(0,0,0,.4);
}
.main-content {
    font-family:"Nunito","Helvetica Neue",Helvetica,Arial,sans-serif;
    /*font-family:"Helvetica Neue", "Helvetica", "Arial", sans-serif;*/
}
    .main-content .body-header-image {
        margin:0 -15px;
        position:relative;
    }
    .main-content .body-header-image .description {
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        background:rgb(255, 255, 255) transparent;
        background:rgba(255, 255, 255, 0.6);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
    }
    .main-content .body-header-image .description p {
        padding:10px;
        text-align:center;
        font-weight:bold;
        font-size:24px;
        margin:0;
    }
    @media (max-width: 992px) {
        .main-content .body-header-image .description p {
            font-size:20px;
        }
    }
    @media (max-width: 768px) {
        .main-content .body-header-image .description p {
            font-size:16px;
            padding:0;
        }
    }

    .main-content .content {
        margin:20px 0;
    }
    .main-content .content img, .main-content .content p {
        margin-bottom:12px;
    }

    .main-content .inschrijfformulier label {
        font-weight:normal;
    }

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

/* veulens overzicht */
.main-content .veulens > .col {
    margin-bottom:20px;
    font-size:13px;
}
    .main-content .veulens > .col > div {
        background-color:#e8e8e8;
    }
    .main-content .veulens > .col > div img {
        float:left;
        margin:0;
        width:125px;
        height:190px;
    }
    .main-content .veulens > .col > div .prijs {
        background-color:#004812;
        color:white;
        text-align:right;
        font-size:14px;
        font-weight:bold;
        padding:10px;
    }
    .main-content .veulens > .col > div .geslacht {
        text-align:right;
        padding:0 10px;
    }
    .main-content .veulens > .col > div .tekst {
        text-align:right;
        padding:0 10px;
    }
    .main-content .veulens > .col > div .naam a {
        /*background-color:#004812;*/
        color:#004812;
        padding:10px;
        font-weight:bold;
        font-size:13px;
        display:block;
        height: 4em;
    }
    .main-content .veulens-table th > a {
        color:#004812;
    }

.filters {
    margin-bottom:20px;
}
.filters form {
    display:inline-block;
}
.filters .form-control {
    width:auto;
    display:inline-block;
}

/* veulen details */
.main-content .veulen-details {
    background-color:#f3f3f3;
}
    .main-content .veulen-details img.pasfoto {
        float:left;
        width:125px;
        height:190px;
        margin:0;
    }
    .main-content .veulen-details .prijs {
        background-color:#004812;
        color:white;
        text-align:right;
        font-size:15px;
        font-weight:bold;
        padding:10px;
    }
    .main-content .veulen-details .prijs span {
        float:left;
        margin-left:10px;
    }
    .main-content .veulen-details .naam {
        color:#004812;
        padding:10px;
        font-weight:bold;
        font-size:13px;
        display:block;
    }
    .main-content .veulen-details .tekst {
        margin:10px;
    }
    .main-content .veulen-details table.tekst tr td:first-of-type {
        font-weight:bold;
        padding:0 20px 0 10px;
        vertical-align:top;
    }
    @media (max-width: 768px) {
        .main-content .veulen-details table.tekst tr td:last-of-type {
            padding-left: 10px;
        }
    }
    .main-content .veulen-details img.foto {
        float:right;
        width:250px;
        height:165px;
        margin:10px;
    }

    .main-content .veulen table.extra {
        margin:10px;
        width:99%;
    }
    .main-content .veulen .filmpje {
        padding-left:10px;
        padding-right:12px;
        vertical-align:top;
    }
    .main-content .veulen .stamboom tr td {
        vertical-align:middle;
    }
    table.stamboom strong {
        font-weight:normal;
    }
    table.stamboom>tbody>tr>td {
        padding:2px 8px;
    }

/* topstars */
.main-content .topstars > div {
    min-height: 260px;
}
.main-content .topstars > div .topstarimage {
    margin-left:10px;
    margin-right:10px;
}
.main-content .topstars > div img {
    box-shadow:1px 1px 2px rgba(0,0,0,.4);
    padding:2px;
}
.main-content .topstars > div p {
    margin:0;
    text-align:center;
}

/* small image list */
.image-list {
    list-style:none;
    padding:0;
}
.image-list img {
    width:90px;
    float:left;
    margin:4px 10px 5px 0;
    box-shadow:1px 1px 2px rgba(0,0,0,.2);
    padding:2px;
}
.image-list li {
    overflow:hidden;
}
.image-list h2 {
    margin-top:10px;
}
.image-list .title {
    margin-top:5px;
    margin-bottom:5px;
    font-size:20px;
}
.image-list a {
    color:#004812;
    text-decoration:none;
}
.image-list a:hover li {
    background-color:#dcdcdc;
}

/* pagination */
ul.paginate {
    list-style:none;
    margin:20px 0 20px 0;
    padding:0;
    display:block;
}
ul.paginate>li {
    display:inline-block;
}
ul.paginate>li a, ul.paginate>li span {
    color:#004812;
    padding:9px 9px 9px 9px;
    font-size:16px;
    display:block;
}
ul.paginate>li a:hover, ul.paginate>li a.current {
    color:#FFFFFF;
    background:#004812;
}
ul.paginate>li a.current {
    font-weight:bold;
}

/*
 * Process
 */
/* colors */
.nl-process {
    padding-top: 20px;
  }
  .process-list {
    display: table;
    table-layout: fixed;
    width: 100%;
    counter-reset: process-count;
    height: 54px;
    padding-left: 0;
  }
  .process-item {
    display: table-cell;
    text-align: center;
  }
  .process-item:first-child {
    pointer-events: none;
  }
  .process-item:first-child .process-content:before {
    display: none;
  }
  .process-item:last-child .process-content:after {
    display: none;
  }
  .process-item:last-child .process-active-bar {
    display: none !important;
  }
  .process-content {
    position: relative;
  }
  .process-content .process-active-bar, .process-content:before, .process-content:after {
    content: '';
    position: absolute;
    background: #e5e5e6;
    border-radius: 2px;
    height: 4px;
    top: 12px;
    transition: all 120ms ease-in;
  }
  .process-content .process-active-bar {
    position: absolute;
    background: #004812;
    z-index: 2;
    left: calc(50% + 20px);
    right: calc(100% - 20px);
    transition: all 300ms ease-out;
  }
  .process-content:before {
    right: calc(50% + 20px);
    left: -2px;
  }
  .process-content:after {
    left: calc(50% + 20px);
    right: 0;
    z-index: 1;
  }
  .process-content .circle {
    position: relative;
    background: #e5e5e6;
    display: inline-block;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    transition: all 300ms ease-in;
  }
  .process-content .circle span {
    color: #999;
  }
  .process-content .circle span:before {
    counter-increment: process-count;
    content: counter(process-count);
  }
  .process-content .des {
    padding-top: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
  }
  .process-content .des span {
    color: #bbb;
    transition: color 120ms ease-in;
  }
  .process-item.is-active .process-content .process-active-bar {
    display: block;
    right: calc(-50% + 20px);
  }
  .process-item.is-active .process-content .circle {
    background: #004812;
  }
  .process-item.is-active .process-content .circle span {
    color: #fff;
    display: inline-block;
    animation: scale0to1 300ms forwards;
  }
  .process-item.is-active .process-content .circle span:before {
    content: "\f00c";
    font: normal normal normal 14px/1 FontAwesome;
  }
  .process-item.is-active .process-content .des span {
    color: #909393;
  }
  .process-item.is-current .process-content .circle {
    background: #004812;
  }
  .process-item.is-current .process-content .circle span {
    color: #fff;
  }
  .process-item.is-current .process-content .des span {
    color: #909393;
  }
  .process-item.all-complete .process-content .process-active-bar, .process-item.all-complete .process-content:before, .process-item.all-complete .process-content:after, .process-item.all-complete .process-content .des {
    width: 0;
    opacity: 0;
  }
  .process-item.all-complete .process-content .circle {
    transform: scale(0);
  }
  @keyframes scale0to1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes slideDown {
    0% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      transform: translate3d(0, 100%, 0);
      opacity: 0;
    }
  }
  @keyframes slideUp {
    0% {
      transform: translate3d(0, 100%, 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  

/* internationale resultaten */
@media (max-width: 767px) {
    .internationale-resultaten span.info {
        display: block;
        word-wrap: break-word;
    }
}
.internationale-resultaten .breeder-row {
    font-size: 11px;
}

/* footer */
footer {
    background-color:#dcdcdc;
    border-bottom:32px solid #004812;
}
    footer .container {
        background:none;
    }
    footer h4 {
        font-weight:bold;
    }
    footer #kwpn-logo {
        float:right;
        max-height:36px;
        max-width:100px;
        margin-top:10px;
    }

/* print */
@media print {
    html {
        -webkit-print-color-adjust:exact;
    }
    a[href]:after {
        content:none;
    }
}