/*
Theme Name: British Race Festival
Author: TAG Media Services
Author URI: http://tagmedia.nl/
Description: Website British Race Festival, ontwikkeld door TAG Media Services
Version: 1.0
Text Domain: britishracefestival
*/
@import url("/fonts.googleapis.com/css?family=Roboto:700,400,100,300,300italic");
@import url("/fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic");
.margin-top-20 {
    margin-top: 20px
    }
.margin-top-10 {
    margin-top: 10px
    }
.margin-bottom-10 {
    margin-bottom: 10px
    }
.margin-bottom-20 {
    margin-bottom: 20px
    }
body {
    background-color: #f6f6f6;
    margin: 0
    }
.img-responsive, div.left article img {
    display: block;
    max-width: 100%;
    height: auto;
    vertical-align: middle
    }
.logo {
    float: left;
    margin-bottom: 20px;
    width: 275px;
    height: 149px
    }
img {
    border: 0
    }
.btn-red {
    background-color: #900406;
    color: #fff
    }
.btn-red:hover, .btn-red:active, .bnt-red:focus {
    color: #fff !important
    }
a:link, a:visited {
    color: #900406;
    text-decoration: none
    }
a:hover, a:active {
    color: #900406;
    text-decoration: underline
    }
.container {
    width: 100%;
    margin: 0 auto
    }
header {
    width: 1000px;
    margin: 0 auto
    }
header a {
    text-decoration: none
    }
footer .kop {
    text-align: right
    }
.spacer .kop p, footer .kop p {
    color: #000 !important
    }
.kopje p {
    margin: 0;
    color: #000;
    display: inline;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 18pt;
    text-transform: uppercase
    }
header .kopje {
    clear: right;
    text-align: right
    }
header .tickets {
    background-color: #900406;
    width: 150px;
    float: right;
    min-height: 40px;
    padding: 5px 10px 5px 10px;
    margin-left: 20px;
    text-decoration: none;
    border-radius: 4px
    }
header .tickets .bestel {
    margin: 0;
    color: #fff;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 12pt;
    text-transform: uppercase
    }
header .tickets .korting {
    margin: 0;
    color: #fff;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 9pt;
    text-transform: uppercase;
    font-style: italic
    }
.left article {
    margin: 10px 20px 10px 20px
    }
body, .left article p, .tijdschema, .left table {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 11pt
    }
.foto {
    width: 100%;
    height: 400px
    }
nav, .menu {
    position: relative;
    z-index: 2;
    height: 40px;
    width: 100%;
    margin: 0 auto;
    background-color: #1c3f81;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-top: 20px;
    clear: both
    }
nav ul, .menu ul {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    line-height: 40px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 10pt;
    text-transform: uppercase
    }
nav li, .menu li {
    float: left;
    background-color: #1c3f81;
    position: relative
    }
nav li a, .menu li a {
    display: block;
    padding-left: 14px;
    padding-right: 14px
    }
nav li a:link, nav li a:visited, .menu li a:link, .menu li a:visited {
    color: #fff;
    text-decoration: none
    }
nav li a:hover, nav li a:active, .menu li a:hover, .menu li a:active {
    color: #fff;
    text-decoration: none;
    background-color: #900406
    }
.menu .current_page_item, .mobile-nav .current_page_item {
    background-color: #900406;
    font-weight: bold
    }
.mobile-nav {
    display: none
    }
.mobile-nav ul {
    width: 100%;
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    line-height: 40px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 10pt;
    text-transform: uppercase
    }
.mobile-nav li {
    float: none;
    text-align: center;
    background-color: #242424;
    border-bottom: 1px solid #000;
    border-top: 1px solid #404040
    }
.mobile-nav li:first-child {
    border-top: none
    }
.mobile-nav li:last-child {
    border-bottom: none
    }
.mobile-nav li a {
    display: block;
    padding-left: 20px;
    padding-right: 20px
    }
.mobile-nav li a:link, .mobile-nav li a:visited {
    color: #fff;
    text-decoration: none
    }
.mobile-nav li a:hover, .mobile-nav li a:active {
    color: #fff;
    text-decoration: none;
    background-color: #900406
    }
.sitepicker {
    border-bottom: 1px solid #1d1d1d;
    background-color: #fff !important;
    margin-bottom: 5px
    }
.sitepicker .kalenderitem {
    display: inline;
    border: 1px solid #1d1d1d;
    margin: 0;
    padding: 0
    }
.sitepicker div {
    margin-top: 2px;
    margin-bottom: 2px
    }
.sitepicker .kalenderitem {
    margin: 0
    }
.sitepicker .kalenderitem .dag p {
    font-weight: 700
    }
.sitepicker .kalenderitem .dag {
    text-align: center;
    display: inline-block;
    margin: 0
    }
.sitepicker .kalenderitem .maand p {
    color: #fff
    }
.sitepicker .kalenderitem .maand {
    background-color: #1d1d1d;
    padding: 0 2px;
    margin: 0;
    display: inline-block;
    line-height: normal
    }
.sitepicker .content p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 300;
    font-size: 10pt;
    text-transform: uppercase;
    padding: 0 2px;
    display: inline
    }
.sitepicker .content p a.active {
    color: #000;
    text-decoration: none
    }
.content {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #fff
    }
.left {
    display: inline;
    float: left;
    width: 60%;
    background-color: #fff
    }
.right {
    display: inline;
    float: left;
    width: 40%;
    background-color: #fff
    }
.left .kop {
    background-color: #900406
    }
.right .kop {
    background-color: #1c3f81
    }
.kop h2, .kop p {
    margin: 0;
    color: #fff;
    font-size: 16pt;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    padding: 10px;
    padding-left: 20px !important;
    line-height: 1
    }
.right article {
    height: 125px;
    display: table;
    width: 100%
    }
.fix {
    display: table-cell;
    vertical-align: middle
    }
.right article p {
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: "Roboto", sans-serif;
    text-shadow: 1px 1px 1px #242424;
    font-size: 14pt
    }
.right article a {
    color: #fff;
    text-decoration: none
    }
.spacer, footer {
    clear: both;
    background-color: #f6f6f6
    }
.credits {
    clear: both;
    float: right;
    padding-right: 5px
    }
.footerafb {
    width: 100%;
    clear: both
    }
.footerafb .afb {
    background-repeat: no-repeat;
    background-position: center center;
    width: 32.8%;
    height: 300px;
    vertical-align: middle;
    display: table;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    float: left;
    margin-right: 4px;
    text-shadow: 1px 1px 1px #242424
    }
.footerafb .afb p {
    font-family: "Roboto", sans-serif;
    font-size: 16pt;
    color: #fff;
    padding: 20px;
    border: 1px solid #fff;
    margin: 40px;
    text-align: center
    }
.footerafb .afb p:hover, .footerafb .afb p:active {
    color: #fff;
    border: 1px solid #900406
    }
.footerafb a {
    text-decoration: none
    }
header form {
    float: right;
    margin: 0;
    padding: 0;
    clear: right
    }
header form p {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 11pt;
    color: #121317
    }
header .invoer {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 11pt;
    color: #fff;
    background-color: #121317;
    border: 0;
    width: 195px;
    height: 36px;
    line-height: 36px;
    margin: 0;
    padding: 0;
    padding-left: 10px
    }
header .submit {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 11pt;
    color: #fff;
    background-color: #900406;
    border: 0;
    width: 40px;
    margin: 0;
    padding: 0;
    height: 36px;
    line-height: 36px
    }
.calendar_slick {
    padding-left: 5px;
    padding-right: 5px
    }
.calendar_slick div {
    text-align: center
    }
.bigpic, .banner_slick {
    width: 1000px;
    min-height: 350px;
    margin: 0 auto
    }
.slick-slider {
    margin-bottom: 0 !important
    }
.sitepicker, .slick-slide, .slick-slide a {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* non-prefixed version, currently
                                      not supported by any browser */
    }
div.simplesocialbuttons {
    height: 20px;
    margin: 10px auto 10px 0;
    text-align: left;
    clear: left
    }
div.simplesocialbutton {
    float: right
    }
div.ssb-button-googleplus {
    width: 70px
    }
div.ssb-button-fblike {
    width: 80px
    }
div.ssb-button-twitter {
    width: 90px
    }
div.ssb-button-pinterest {
    width: 100px
    }
.fb-like iframe {
    max-width: none !important
    }
.tijdschema {
    line-height: 30px
    }
.tijdschema .hokje {
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    font-weight: bold
    }
.tijdschema .q {
    background-color: #025855
    }
.tijdschema .r {
    background-color: #900408
    }
.tijdschema .d {
    background-color: #af1a1e
    }
.tijdschema .vr {
    background-color: #914304
    }
.tijdschema .fp {
    background-color: #097603
    }
@media screen and (min-width: 1050px) {
    .container {
        width: 1050px
        }
    nav, .menu {
        width: 1050px !important
        }
    nav ul, .menu ul {
        margin-left: 25px;
        margin-right: 25px
        }
    }
@media screen and (max-width: 1000px) {
    header, .bigpic, .royalSlider, .content, .banner_slick {
        width: 100%
        }
    nav, .menu {
        background: none
        }
    nav ul, .menu ul {
        width: 170px
        }
    nav li, .menu li {
        float: none;
        background-color: #242424;
        border-bottom: 1px solid #000;
        border-top: 1px solid #404040
        }
    nav li:first-child, .menu li:first-child {
        border-top: none
        }
    nav li:last-child, .menu li:last-child {
        border-bottom: none
        }
    header .kopje {
        margin-right: 5px
        }
    }
@media screen and (max-width: 780px) {
    .left, .right, .right article, .footerafb .afb {
        width: 100%
        }
    header form p {
        display: none
        }
    }
@media screen and (min-width: 720px) {
    .kopje {
        height: 60px;
        line-height: 60px
        }
    }
@media screen and (max-width: 580px) {
    .footerafb .afb {
        width: 100%;
        height: 150px;
        margin: 0
        }
    header form {
        display: none
        }
    header .tickets {
        float: none !important;
        margin: 0 auto !important
        }
    .logo {
        float: none !important;
        margin: 0 auto !important;
        display: block !important;
        margin-bottom: 10px !important
        }
    .bigpic, .banner_slick {
        min-height: initial !important
        }
    .bigpic {
        margin-top: 0 !important
        }
    header .kopje {
        text-align: center;
        margin-top: 10px
        }
    footer .kop {
        text-align: center
        }
    nav, .menu {
        display: none
        }
    .mobile-nav {
        display: block !important;
        position: relative;
        z-index: 2;
        width: 100%;
        margin: 0 auto;
        margin-top: 20px;
        clear: both
        }
    .bigpic, .royalSlider {
        height: 200px;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover
        }
    }
/*  
 
 RoyalSlider
 
 */
.royalSlider {
    overflow: hidden
    }
/**
*  Slides area (set background here)
*/
.royalSlider .royalWrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
    }
.royalSlider .royalSlide, .royalSlider .royalWrapper {
    /* Bakground behind slides */
    background: #fff;
    background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
    background: -o-linear-gradient(top, #fff 0%, #fff 100%);
    background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
    background: linear-gradient(top, #fff 0%, #fff 100%)
    }
/* slides holder, grabbing container */
.royalSlider .royalSlidesContainer {
    position: relative;
    left: 0;
    top: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important
    }
/* slide item */
.royalSlider .royalSlide {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    list-style: none !important;
    position: relative;
    float: left;
    overflow: hidden;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
    }
/* 

	Direction Navigation (arrows) 

*/
.royalSlider .arrow {
    /*background:url(../img/controlsSprite.png) no-repeat 0 0;*/
    background-color: #C00;
    background-repeat: no-repeat;
    background-position: 0 0;
    /* change arrows size here */
    width: 45px;
    height: 90px;
    top: 55%;
    margin-top: -45px;
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 25
    }
/* left arrow */
.royalSlider .arrow.left {
    background-position: top left;
    left: 0
    }
/* right arrow */
.royalSlider .arrow.right {
    background-position: top right;
    right: 0
    }
/* Control navigation container (bullets or thumbs) */
.royalSlider .royalControlNavOverflow {
    width: 100%;
    overflow: hidden;
    position: absolute;
    margin-top: -20px;
    z-index: 25
    }
/* This container is inside ".royalControlNavContainer"  
   and is used for auto horizontal centering */
.royalSlider .royalControlNavCenterer {
    float: left;
    position: relative;
    left: -50%
    }
/* Control navigation container*/
.royalSlider .royalControlNavContainer {
    float: left;
    position: relative;
    left: 50%;
    display: none
    }
/* Scrollable thumbnails containers */
.royalSlider .royalControlNavThumbsContainer {
    left: 0;
    position: relative
    }
.royalSlider .thumbsAndArrowsContainer {
    overflow: hidden;
    width: 100%;
    position: relative
    }
.royalSlider .royalControlNavOverflow.royalThumbs {
    width: auto;
    position: relative;
    overflow: hidden;
    margin-top: 4px
    }
/* 

	Control navigation (bullets, thumbnails)
	
*/
.royalSlider .royalControlNavOverflow a {
    background: #0C0 none no-repeat scroll 0 0;
    width: 20px;
    height: 20px;
    float: left;
    cursor: pointer;
    position: relative;
    display: block;
    text-indent: -9999px
    }
/* Current control navigation item */
/* Hover state navigation item */
/* Thumbnails */
.royalSlider .royalControlNavOverflow a.royalThumb {
    /*background: none no-repeat 0 0;*/
    /*background-color: ;*/
    width: 144px;
    height: 60px;
    /* thumbnails spacing, use margin-right only */
    margin-right: 4px
    }
.royalSlider .royalControlNavOverflow a.royalThumb.current {
    background-position: -3px -3px !important;
    border: 3px solid #C00 !important;
    width: 138px;
    height: 54px
    }
.royalSlider .royalControlNavOverflow a.royalThumb:hover {
    background-position: -3px -3px;
    border: 3px solid #00C;
    width: 138px;
    height: 54px
    }
/* 

	Thumbnails navigation arrows 
	
*/
.royalSlider .thumbsArrow {
    width: 38px;
    height: 68px;
    cursor: pointer;
    display: block;
    position: relative;
    z-index: 25;
    background: #C99
    }
.royalSlider .thumbsArrow.left {
    float: left
    }
.royalSlider .thumbsArrow.right {
    float: right
    }
/* Captions container */
.royalSlider .royalCaption {
    z-index: 2;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /*font: normal normal normal 1em/1.5em Georgia, serif;
    	color:#FFF;		*/
    }
/* Caption item */
.royalSlider .royalCaptionItem {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0
    }
/* Loading (welcome) screen */
.royalSlider .royalLoadingScreen {
    background: #FFF;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99
    }
/* Loading screen text ("Loading...") */
.royalSlider .royalLoadingScreen p {
    width: 100%;
    position: absolute;
    margin: 0 auto;
    top: 45%;
    text-align: center
    }
/* single slide image preloader */
.royalSlider .royalPreloader {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
    z-index: 0;
    background-image: url(../img/preloader.gif)
    }
.royalSlider .grab-cursor {
    cursor: pointer
    }
.royalSlider .grabbing-cursor {
    cursor: pointer
    }
/* Cursor used if mouse dragging is disabled */
.royalSlider .auto-cursor {
    cursor: auto
    }
.royalSlider .royalHtmlContent {
    position: absolute;
    top: 0;
    left: 0
    }
.royalSlider .non-draggable {
    cursor: auto
    }
.royalSlider .fade-container .royalSlide {
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 10
    }
.royalSlider .royalImage {
    max-width: none;
    margin: 0;
    padding: 0 !important;
    border: 0 !important
    }
/* Slider with thumbs (used to add padding based on thumbnails size)*/
.royalSlider.minimal.with-thumbs {
    padding-bottom: 62px
    }
/* 
	Left and right navigation arrows 	
*/
.royalSlider.minimal .arrow {
    background: url(/images/controls-sprite.png) no-repeat 0 0;
    /* change arrows size here */
    width: 34px;
    height: 70px;
    margin-top: -35px;
    -moz-opacity: 0.8;
    opacity: 0.8
    }
/* arrow position in slider with thumbs */
.royalSlider.minimal.with-thumbs .arrow {
    margin-top: -66px
    }
/* Arrow down state */
.royalSlider.minimal .arrow:active {
    /*background-color: rgba(0,0,0,0.6);*/
    }
/* left arrow */
.royalSlider.minimal .arrow.left {
    background-position: top left;
    left: 0
    }
/* right arrow */
.royalSlider.minimal .arrow.right {
    background-position: top right;
    right: 0
    }
/* Arrow hover state */
.royalSlider.minimal .arrow:hover {
    -moz-opacity: 1;
    opacity: 1
    }
/* Arrow disabled state */
.royalSlider.minimal .arrow.disabled {
    -moz-opacity: 1;
    opacity: 1
    }
.royalSlider.minimal .arrow.left.disabled {
    background-position: -34px 0
    }
.royalSlider.minimal .arrow.right.disabled {
    background-position: -132px 0
    }
/* 
	Bullets and thumbnails navigation	
*/
.royalSlider.minimal .royalControlNavOverflow a {
    background: url(/images/controls-sprite.png) no-repeat -1px -166px transparent;
    width: 16px;
    height: 16px
    }
/* Current bullet */
.royalSlider.minimal .royalControlNavOverflow a.current {
    background-position: -1px -183px !important
    }
/* Bullet hover state */
/* Bullets nav sub-container */
/* Bullets nav container */
.royalSlider.minimal .royalControlNavOverflow {
    margin-top: -20px
    }
/* Thumbnails main container */
.royalSlider.minimal .thumbsAndArrowsContainer {
    float: left;
    background: #fff;
    margin-top: 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px
    }
.royalSlider.minimal .royalControlNavOverflow.royalThumbs {
    margin-top: 4px
    }
/* Thumbnails */
.royalSlider.minimal .royalControlNavOverflow a.royalThumb {
    background-color: transparent;
    background-position: 0 0;
    width: 80px;
    height: 45px;
    /* thumbnails spacing, use margin-right only */
    margin-right: 4px;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    border: 2px solid #FFF
    }
/* Thumbnail hover state*/
.royalSlider.minimal .royalControlNavOverflow a.royalThumb:hover {
    background-position: 0 0;
    border: 2px solid #9fbdc3
    }
/* Current thumbnail */
.royalSlider.minimal .royalControlNavOverflow a.royalThumb.current {
    background-position: 0 0 !important;
    border: 2px solid #9fbdc3 !important
    }
/* 

	Thumbnails navigation arrows 
	
*/
.royalSlider.minimal .thumbsArrow {
    background: url(/images/controls-sprite.png) no-repeat 0 0;
    width: 28px;
    height: 57px;
    -moz-opacity: 0.8;
    opacity: 0.8
    }
.royalSlider.minimal .thumbsArrow.left {
    background-position: -116px -132px;
    left: 0
    }
.royalSlider.minimal .thumbsArrow.right {
    background-position: -156px -132px;
    right: 0
    }
.royalSlider.minimal .thumbsArrow:hover {
    -moz-opacity: 1;
    opacity: 1
    }
.royalSlider.minimal .thumbsArrow.disabled {
    -moz-opacity: 1;
    opacity: 1
    }
.royalSlider.minimal .thumbsArrow.left.disabled {
    background-position: -36px -132px
    }
.royalSlider.minimal .thumbsArrow.right.disabled {
    background-position: -76px -132px
    }