/* General
---------------------------------------------------------*/

body {
    color: #333;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 120%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Rotating Elements On Hover
 * @source http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html
---------------------------------------------------------*/

.rotate {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow: hidden;
}
.rotate:hover {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

/* Buttons
---------------------------------------------------------*/

.btn {
    background: transparent url('../images/bg-btn.png') no-repeat;
    border: none;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    padding: 2px 5px 0;
    text-align: center;
    text-decoration: none;
    width: 140px;
}
.btn:hover,
.btn-active {
    background-position: top right;
    color: black;
}

.btn-large {
    background-image: url('../images/bg-btn-large.png');
    height: 79px;
    padding-top: 25px;
    width: auto;
}
.btn-large-2-lines,
#menu .btn-page-251,
html.de #menu .btn-page-253 {
    padding: 15px 25px 10px;
}
html.de #menu .btn-page-251,
html.de #menu .btn-page-254 {
    padding: 15px 10px 10px;
}

.btn-contact-data {
    font-size: 13px;
    padding: 15px 0;
    margin-right: 10px;
}

/* Custom Grid
---------------------------------------------------------*/

.row {
    clear: both;
}
.col-2 {
    float: left;
    width: 16.6666667%;
}
.col-3 {
    float: left;
    width: 25%;
}
.col-4 {
    float: left;
    width: 33.3333333%;
}
.col-6 {
    float: left;
    width: 50%;
}
.col-8 {
    float: left;
    width: 66.6666667%;
}

/* Home
---------------------------------------------------------*/

#home {
    padding-top: 20px;
}
#home .languages {
    padding-top: 45px;
}

#app-link a {
    display: inline-block;
    width: 57px;
    height: 57px;
}
#app-link img {
    border: 1px solid #ddd;
    border-radius: 10px;
}

/* Performances Dropdown
---------------------------------------------------------*/

#performances {
    position: relative;
    z-index: 1500;
    float: right;
}
#performances .inner-container {
    background: transparent url('../images/performances-arrow.png') no-repeat right bottom;
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 135px;
}
html.fr #performances .inner-container {
    background-image: url('../images/performances-arrow-fr.png');
}
html.de #performances .inner-container {
    background-image: url('../images/performances-arrow-de.png');
}
html.en #performances .inner-container {
    background-image: url('../images/performances-arrow-en.png');
}
#performances .inner-container .dropdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 172px;
}
#performances .inner-container .dropdown .performances-list {
    background-color: black;
    color: white;
    font-size: 14px;
    line-height: 150%;
    text-align: right;
    padding: 10px 10px 60px 10px;
}
#performances .inner-container .dropdown .performances-list hr {
    background-color: white;
    height: 1px;
    margin: 5px 0 10px;
}
#performances .inner-container .dropdown .performances-list a { color: white; }
#performances .inner-container .dropdown .performances-list a:hover { text-decoration: none; }

#performances .inner-container .dropdown .dominos {
    position: absolute;
    bottom: -43px;
    left: 0;
}

/* Theater Dropdown
---------------------------------------------------------*/

#theater {
    position: relative;
    z-index: 1500;
}
#theater .inner-container {
    background: transparent url('../images/theater-arrow.png') no-repeat right bottom;
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 135px;
}
html.fr #theater .inner-container {
    background-image: url('../images/theater-arrow-fr.png');
}
html.de #theater .inner-container {
    background-image: url('../images/theater-arrow-de.png');
}
html.en #theater .inner-container {
    background-image: url('../images/theater-arrow-en.png');
}
#theater .inner-container .dropdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 172px;
}
#theater .inner-container .dropdown .performances-list {
    background-color: black;
    color: white;
    font-size: 14px;
    line-height: 150%;
    text-align: right;
    padding: 10px 10px 60px 10px;
}
#theater .inner-container .dropdown .performances-list hr {
    background-color: white;
    height: 1px;
    margin: 5px 0 10px;
}
#theater .inner-container .dropdown .performances-list a { color: white; }
#theater .inner-container .dropdown .performances-list a:hover { text-decoration: none; }

#theater .inner-container .dropdown .dominos {
    position: absolute;
    bottom: -43px;
    left: 0;
}

/* Animations
---------------------------------------------------------*/

#animation {
    display: absolute;
    z-index: 1800;
}

/* Breadcrumbs
---------------------------------------------------------*/

#breadcrumbs {
    position: relative;
    text-transform: lowercase;
    z-index: 1100;
}
#breadcrumbs ul li {
    background: transparent url('../images/bg-breadcrumb.png') repeat-x;
    display: inline-block;
    color: #666;
    font-size: 12px;
    margin-left: -4px;
}
#breadcrumbs ul li a {
    background: transparent url('../images/bg-breadcrumb-middle.png') no-repeat right top;
    color: #666;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 0 55px 0 45px;
    height: 15px;
}
#breadcrumbs ul li.last-child a {
    background-image: url('../images/bg-breadcrumb-end.png');
}
#breadcrumbs ul li a:hover {
    text-decoration: underline;
}


/* Make display-inline work in IE7. */
html.ie7 #breadcrumbs ul li,
html.ie7 #breadcrumbs ul li a {
    *display: inline;
    zoom: 1;
}

/* Dominos
---------------------------------------------------------*/

#dominos div {
    background: transparent no-repeat left top;
    position: absolute;
    left: 50%;
    z-index: 750;
}
#dominos .dominos-left {
    background-image: url('../images/dominos-left.png');
    top: 317px;
    margin-left: -493px;
    width: 196px;
    height: 343px;
    z-index: 600;
}
#dominos .dominos-left-2 {
    background-image: url('../images/dominos-left-2.png');
    top: 408px;
    margin-left: -297px;
    width: 75px;
    height: 92px;
    z-index: 800;
}
#dominos .dominos-left-3 {
    background-image: url('../images/dominos-left-3.png');
    top: 500px;
    margin-left: -297px;
    width: 129px;
    height: 160px;
}
#dominos .dominos-middle {
    background-image: url('../images/dominos-middle.png');
    top: 469px;
    margin-left: -115px;
    width: 225px;
    height: 85px;
    z-index: 800;
}
#dominos .dominos-right {
    background-image: url('../images/dominos-right.png');
    top: 360px;
    margin-left: 295px;
    width: 173px;
    height: 180px;
    z-index: 500;
}

body.page-youtube {
    background: white url('../images/bg-dominos.png') no-repeat center 325px;
}
body.page-youtube #dominos {
    display: none;
}

/* Content
---------------------------------------------------------*/

#content {
    background: transparent url('../images/bg-content.png') no-repeat 170px top;
    margin-top: 165px;
    min-height: 335px;
    padding-bottom: 160px;
    position: relative;
}
#content .content-area {
    position: relative;
}
#content h1 {
    font-weight: bold;
    margin-bottom: 15px;
}
#content p,
#content ul,
#content ol {
    margin-bottom: 15px;
}

/* Default page */
body.page-default .content-area {
    height: 215px;
    padding: 20px 25px 100px;
    overflow-y: scroll;
    width: 570px;
}

/* Empty Page */
body.page-empty #content {
    background: none;
}

/* Menu
---------------------------------------------------------*/

#menu {
    position: relative;
    margin-top: -104px;
    z-index: 1000;
    
    display:flex;
    justify-content: center;
}

/* Artists
---------------------------------------------------------*/

#content.full-artist-image {
    background: none;
}

#artists {
    position: relative;
}
#artists .artist-link {
    background: transparent no-repeat left top;
    display: block;
    position: absolute;
    text-indent: -9999px;
}
#artists .artist-link:hover {
    background-position: right top;
}

#artists .marc {
    background-image: url('../images/artiesten/marc.png');
    width: 178px;
    height: 250px;
    top: 90px;
    left: 200px;
}

#artists .marc2019 {
    background-image: url('../images/artiesten/2019-marc-overview.png');
    width: 209px;
    height: 250px;
    top: 90px;
    left: 190px;
    z-index: 790;
}

#artists .tabitha {
    background-image: url('../images/artiesten/tabitha.png');
    width: 258px;
    height: 248px;
    top: 115px;
    left: 430px;
    z-index: 700;
}

#artists .tabitha2019 {
    background-image: url('../images/artiesten/2019-tabitha-overview.png');
    width: 293px;
    height: 248px;
    top: 105px;
    left: 360px;
    z-index: 700;
}

#artists .peter {
    background-image: url('../images/artiesten/peter.png');
    width: 217px;
    height: 275px;
    top: 60px;
    left: 620px;
    z-index: 650;
}

#artists .peter2019 {
    background-image: url('../images/artiesten/2019-peter-overview.png');
    width: 204px;
    height: 275px;
    top: 65px;
    left: 610px;
    z-index: 650;
}
#artists .benneth {
    background-image: url('../images/artiesten/benneth.png');
    width: 253px;
    height: 188px;
    top: -27px;
    left: -35px;
    z-index: 780;
}

#artists .benneth2019 {
    background-image: url('../images/artiesten/benneth.png');
    width: 253px;
    height: 188px;
    top: -10px;
    left: 155px;
    z-index: 600;
}

#artists .bart {
    background-image: url('../images/artiesten/bart.png');
    width: 176px;
    height: 300px;
    top: -67px;
    left: 207px;
}
#artists .trompet {
    background-image: url('../images/artiesten/trompet.png');
    width: 140px;
    height: 264px;
    top: -70px;
    left: 390px;
}

#artists .trompet2019 {
    background-image: url('../images/artiesten/trompet.png');
    width: 140px;
    height: 264px;
    top: -90px;
    left: 400px;
}

#artists .niels {
    background-image: url('../images/artiesten/niels.png');
    width: 184px;
    height: 300px;
    top: -70px;
    left: 572px;
}

#artists .niels2019 {
    background-image: url('../images/artiesten/niels.png');
    width: 184px;
    height: 300px;
    top: -100px;
    left: 542px;
}

#artists .beatbox {
    background-image: url('../images/artiesten/beatbox.png');
    width: 163px;
    height: 300px;
    top: 5px;
    left: 775px;
    z-index: 625;
}

#artists .fabri2019 {
    background-image: url('../images/artiesten/2019-fabri-overview.png');
    width: 188px;
    height: 290px;
    top: -20px;
    left: 740px;
    z-index: 300;
}

#artists .jeffreybart2019 {
    background-image: url('../images/artiesten/2019-jeffrey-bart-overview.png');
    width: 278px;
    height: 355px;
    top: -170px;
    left: -10px;
    z-index: 300;
    transform: rotate(-5deg);
}

#artist {
    color: #333;
    height: 260px;
    padding: 75px 300px 0 50px;
    position: relative;
}
#artist h1 {
    font-size: 26px;
    text-align: center;
}
#artist p a {
    color: black;
    text-decoration: none;
}
#artist p a:hover {
    text-decoration: underline;
}

/* Artist images on detail pages. */
#artist-image {
    background: transparent no-repeat left top;
    position: absolute;
    top: -50px;
    right: 0;
    width: 300px;
    height: 385px;
}
#artist-image.artist-image-2 {
    background-image: url('../images/artiesten/large/2019-marc-verloop.png');
}
#artist-image.artist-image-5 {
    background-image: url('../images/artiesten/large/2019-tabitha-verloop.png');
}
#artist-image.artist-image-3 {
    background-image: url('../images/artiesten/large/2019-peter-verloop.png');
}
#artist-image.artist-image-7 {
    background-image: url('../images/artiesten/large/2019-bart-verloop.png');
}
#artist-image.artist-image-9 {
    background-image: url('../images/artiesten/large/trompet.png');
}
#artist-image.artist-image-8 {
    background-image: url('../images/artiesten/large/niels.png');
}
#artist-image.artist-image-10 {
    background-image: url('../images/artiesten/large/beatbox.png');
}
#artist-image.artist-image-14 {
    background-image: url('../images/artiesten/large/benneth.png');
    top: -160px;
    width: 600px;
    height: 700px;
    right: 10px;
    z-index: 1000
}
#artist-image.artist-image-15 {
    background-image: url('../images/artiesten/large/2019-jeffrey-bart-verloop.png');
}
#artist-image.artist-image-16 {
    background-image: url('../images/artiesten/large/2019-fabri-verloop.png');
}

/* Slideshow
---------------------------------------------------------*/

body.page-gallery #content {
    background: none;
}

#slideshow {
    position: relative;
    min-height: 335px;
}
#slideshow .slides {
    overflow: hidden;
    width: 100%;
    height: 335px;
}
#slideshow .slides img {
    max-height: 100%;
}
#slideshow .slides .cycle-control {
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 800;
}
#slideshow .slides .cycle-prev {
    background: transparent url('../images/btn-slideshow-prev.png') no-repeat;
    width: 62px;
    height: 62px;
    margin-top: -31px;
    left: 15px;
}
#slideshow .slides .cycle-next {
    background: transparent url('../images/btn-slideshow-next.png') no-repeat;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    right: 0;
}

/* Create A Group
---------------------------------------------------------*/

#group {
    color: #333;
    height: 300px;
    padding: 25px 80px 10px 80px;
    position: relative;
    overflow-y: scroll;
}

/* Artist Images */
.group-artist {
    background: transparent no-repeat;
    position: absolute;
    left: 50%;
    z-index: 850;
}
.group-artist.group-artist-top {
    background-image: url('../images/artiesten/create-group-page/artist-top.png');
    width: 250px;
    height: 165px;
    margin-left: -125px;
    top: 15px;
}
.group-artist.group-artist-right {
    background-image: url('../images/artiesten/create-group-page/artist-right.png');
    width: 75px;
    height: 148px;
    margin-left: 428px;
    top: 280px;
}
.group-artist.group-artist-bottom {
    background-image: url('../images/artiesten/create-group-page/artist-bottom.png');
    width: 75px;
    height: 131px;
    margin-left: -243px;
    top: 435px;
}
.group-artist.group-artist-left {
    background-image: url('../images/artiesten/create-group-page/artist-left.png');
    width: 92px;
    height: 140px;
    margin-left: -510px;
    top: 276px;
}

#group .intro {
    text-align: center;
}
#group form {
    margin-top: 15px;
}
#group form .row {
    margin-bottom: 15px;
}
#group form .row .col-2 {
    padding-top: 9px;
}
#group form input.form-text {
    width: 100%;
    height: 23px;
}
#group hr {
    background-color: #333;
    border-bottom: 1px solid white;
    height: 1px;
    margin-bottom: 15px;
}
#group form label.checkbox {
    display: block;
    margin-bottom: 10px;
}
#group form .btn-submit {
    float: right;
}

/* Contact
---------------------------------------------------------*/

#contact {
    color: #333;
    height: 300px;
    padding: 25px 80px 10px 80px;
    position: relative;
    overflow-y: scroll;
}
#contact form .row {
    margin-bottom: 10px;
}
#contact form label {
    display: block;
    padding-top: 7px;
}
#contact form .row .column-middle-left div {
    padding-right: 20px;
}
#contact form .row .column-middle-right div {
    padding-left: 20px;
}
#contact form input.form-text {
    width: 100%;
    height: 23px;
}
#contact form .form-textarea {
    width: 100%;
    height: 50px;
}
#contact form .btn-submit {
    float: right;
}
form .error {
    color: #CC0000;
}
#content form p.error {
    padding-top: 10px;
    margin: 0;
}
#contact form .last-error {
    padding-top: 0;
}

/* Contactdata
---------------------------------------------------------*/

#contactdata {
    color: #333;
    height: 310px;
    padding: 25px 25px 0 80px;
}
#contactdata p a {
    color: black;
    text-decoration: none;
}
#contactdata p a:hover {
    text-decoration: underline;
}
#contactdata .ipad-front {
    float: left;
    margin-top: 35px;
}
#contactdata .ipad {
    float: right;
}

/* Footer
---------------------------------------------------------*/

#footer {
    color: #666;
    font-size: 10px;
    padding: 20px 0;
    position: relative;
    text-transform: lowercase;
    z-index: 1100;
}
#footer a {
    color: #666;
    text-decoration: none;
}
#footer a:hover {
    text-decoration: underline;
}
#footer .right-column {
    text-align: right;
}

/* Landing page addendum
---------------------------------------------------------*/
.content_container { position: relative; }
.content_container .app_link { display: none; } 

.content_container .app {
	position: absolute;
	top: -21px;
	right: 83px;
}
.content_container .app a {
	display: inline-block;
	width: 140px;
	height: 55px;
}

.content_container .app a.app_store {
	margin-right: 15px;
	background: url('../images/img-app-store.png') 0 -55px no-repeat;
	color: transparent;
}

.content_container .app a.app_store:hover { background: url('../images/img-app-store.png') 0 0 no-repeat; }

.content_container .app a.google_play {
	background: url('../images/img-google-play.png') 0 -55px no-repeat;
	color: transparent;
}

.content_container .app a.google_play:hover { background: url('../images/img-google-play.png') 0 0 no-repeat; }

.content_container .arrow {
	position: absolute;
	top: 50px;
	right: 35px;
	width: 210px;
	height: 72px;
	background: url('../images/img-app-arrow.png') 0 0 no-repeat;
}

.content_container .arrow_down {
	position: absolute;
	bottom: -55px;
	left: 180px;
	width: 161px;
	height: 55px;
	background: url('../images/img-arrow-down-small.png') 0 0 no-repeat;
}
.content_container .arrow_down2 {
	position: absolute;
	bottom: -53px;
	left: -30px;
	width: 159px;
	height: 58px;
	background: url('../images/img-arrow-down-theater.png') 0 0 no-repeat;
}