.clear { clear:both;} #header { background: #000; height: auto; width: 100%; display: block; } #header #slider { height: 600px; width: 100%; background: #000 url("/theme/img/headerfoto.jpg") center top no-repeat; background-size: cover; } #header .container { position: relative; } #header .logo { position: absolute; top: 250px; left: 0px; } #header .cd { width:450px; position: absolute; top: 350px; right: 50px;} #header .desktop .topfoto { width: 100%; height: auto; max-width: 1500px; } #header .mobile-only { display: none;} #header .mobile-only .topfoto { width: 100%; height: auto; } #header .desktop { display: block;} #headernieuws { background: #fff url("/theme/img/header-img.jpg") center top; width: 100%; height: 225px; } #headernieuws .container { position: relative; } #headernieuws .logo { width: 500px; } #headernieuws .home { position: absolute; top: 10px; left: 10px; display: inline-block; font-size: 35px; background: #793941; color: #fff; padding: 5px; border-radius: 5px; } #nieuwspagina h1 { text-align: center; margin: 30px 0; font-family: 'Open Sans', sans-serif; font-size: 50px; font-weight: 100; } #nieuwspagina .inleiding { padding-bottom: 30px; } #nieuwspagina h3 {font-family: 'Open Sans', sans-serif; font-weight: 400; } #nieuwspagina .item { margin-bottom: 50px; } #nieuwspagina .nieuwsfoto { float: right; margin: 0 0 20px 20px; } #nieuwspagina p { padding-bottom: 10px; line-height: 22px; } #nieuwspagina a.but { border: 1px solid #333; color: #333; padding: 8px 12px; border-radius: 3px; } #nieuwspagina a.but:hover { color: #fff; text-decoration: none; } #nieuwspagina span.datum { margin-left: 20px; color: #aaa;} #menu { position: absolute; height: 50px; width: 100%; background: #111; } /* #793941 */ #menu.fixed { position: fixed; top: 0px; z-index: 99999999;} #menu .container { position: relative; } #menu ul { list-style-type: none; margin: 0px; padding:0px;} #menu ul.menu { position: absolute; left: 1px; } #menu ul.menu li { float: left; margin: 0 30px 0 0;} #menu ul.menu li a { color: #fff; line-height: 50px; font-family: 'Taviraj', serif; font-size: 18px;} #menu ul.menu li a:hover { color: #d6af42; text-decoration: none; } #menu ul.social { position: absolute; right: 1px; margin-top: 20px;} #menu ul.social li { float: left; margin: 0 0 0 10px;} #menu ul.social li a { color: #fff; line-height: 50px; font-size: 35px; } #menu ul.social li a:hover { color: #d6af42; text-decoration: none; } #nieuws { background: linear-gradient(#431b39, #28071d); color: #eee; padding: 90px 0 100px 0; } #nieuws h2 { color: #eee; text-align: center; margin: 15px 0 30px 0; font-family: 'Open Sans', sans-serif; font-size: 50px; font-weight: 100; } #nieuws h3 {font-family: 'Open Sans', sans-serif; font-weight: 100; margin: 10px 0; } #nieuws p { padding-bottom: 20px; line-height: 25px; font-size: 14px; } #nieuws a.but { border: 1px solid #eee; color: #eee; padding: 8px 12px; border-radius: 3px; font-size: 14px; } #nieuws a.but:hover { color: #fff; text-decoration: none; } #nieuws a.nieuwslink { display: block; overflow: hidden; width: 100%; height: auto; border: 1px solid #333; padding: 0px; margin: 0px; transition: 1s;} #nieuws a.nieuwslink img { width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;} #nieuws a.nieuwslink:hover img { width: 150%; height: 150%; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);} #biografie { background: #111; padding: 70px 20px; color: #fff; margin: 0px; min-height: 800px;} #biografie .container { position: relative; min-height: 750px;} #biografie h1 { margin-bottom: 30px; font-family: 'Open Sans', sans-serif; font-size: 50px; font-weight: 100; } #biografie p { margin-bottom: 20px; line-height: 30px; } #biografie img.biofoto { } #discografie { background: linear-gradient(#390d50, #28071d); padding: 60px 0px; color: #333; } #discografie h3 { text-align: center; margin-bottom: 50px; font-family: 'Open Sans', sans-serif; font-size: 50px; font-weight: 100; color: #fff;} #discografie .row a { display: block; margin-bottom: 30px; box-shadow: #000 2px 2px 2px; transition: .5s;} #discografie .row a:hover { display: block; margin-bottom: 30px; box-shadow: #000 8px 8px 8px; transition: .5s; margin: -5px 0 0 -5px;} #discografie a.btn { border: 2px solid #fff; padding: 10px 20px; border-radius: 5px; color: #fff; } #discografie a.btn:hover { background: #fff; color: #333; } #discografie .whitebut { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 100; padding: 10px 20px; border: 1px solid #fff; border-radius: 4px; color: #fff; margin-bottom: 10px; } #discografie .whitebut:hover { border: 1px solid #fff; border-radius: 4px !important; color: #fff; text-decoration: none;} #agenda { background: #222; padding: 50px 0; color: #eee;} #agenda h3 { text-align: center; color: #fff; margin-bottom: 40px; font-family: 'Open Sans', sans-serif; font-size: 50px; font-weight: 100; } #agenda h6 { text-align: center; margin-bottom: 40px; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 100; } #agenda table { color: #eee; } #agenda table thead { font-weight: 700; color: #eee;} .table>tbody>tr>td { line-height: 35px !important; border-top: 1px solid #333 } #agenda .btn-red { background: #d83530; font-weight: 800; font-family: 'Open Sans', sans-serif; font-size: 13px; padding: 5px 10px; border-radius: 4px; color: #fff;} #agenda .btn-yellow { background: #d69c1f; font-weight: 800; font-family: 'Open Sans', sans-serif; font-size: 13px; padding: 5px 10px; border-radius: 4px; color: #fff; } #agenda .btn-yellow:hover { background: #d83530; font-weight: 800; font-family: 'Open Sans', sans-serif; font-size: 13px; padding: 5px 10px; border-radius: 4px; color: #fff;} #agenda-mobile { display: none; } #agenda-mobile .item { width: 100%; padding: 10px 0 20px 0; border-top: 1px solid #444;} #agenda-mobile .item:first-child { border: 0px;} #agenda-mobile .item h5 { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 100; margin-top: 10px; } #agenda-mobile .item h4 { margin: 0px; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 25px; font-weight: 100; } #agenda-mobile .whitebut { font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 100; padding: 5px 10px; border: 1px solid #fff; border-radius: 4px; color: #fff; } #agenda-mobile .whitebut:hover { border: 1px solid #fff; border-radius: 4px !important; color: #fff; text-decoration: none;} #fanclub { background: #b7ada4 url("/theme/img/fanclub-bg2.png") left bottom no-repeat; padding: 50px 0; color: #333; } #fanclub h3 { text-align: center; margin-bottom: 50px; font-family: 'Open Sans', sans-serif; font-size: 50px; font-weight: 100; } #fanclub p { margin-bottom: 20px; line-height: 30px; } #fanclub .melding { background: #793941; color: #fff; } #fanclub .melding p { margin: 0px; } #media { background: #111; padding: 50px 0 100px 0; color: #333; } #media img { margin: 0px auto; } #media h3 { text-align: center; margin-bottom: 50px; font-family: 'Open Sans', sans-serif; font-size: 50px; font-weight: 100; color: #fff;} #media .whitebut { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 100; padding: 10px 20px; border: 1px solid #fff; border-radius: 4px; color: #fff; } #media .whitebut:hover { border: 1px solid #fff; border-radius: 4px !important; color: #fff; text-decoration: none;} #contact { background: #111 url('/theme/img/footerfoto.jpg') center bottom no-repeat; background-size: cover; padding-top: 500px; background-attachment: fixed; height: 800px;} #contact #balk { background: rgba(0,0,0,.7); width: 100%; color: #fff; font-size: 12px; line-height: 16px; padding: 20px 0; } #contact #balk h4 { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 100; } #contact #logobalk { background: #333; width: 100%; color: #fff; min-height: 120px; padding: 20px 0; } #contact #logobalk a { display: inline-block; padding: 10px;} #contact #logobalk img { margin-bottom: 10px; opacity:0.8; height: 40px; } #contact #logobalk img.buronl { height: 25px; margin-bottom: 20px;} #contact #logobalk img:hover { opacity: 1; } #contact #logobalk p { padding: 10px 0 0 0; margin-top: 20px; color: #aaa; font-size: 14px; } #contact a { color: #aaa; } /* MOBILE */ @media screen and (max-width: 1000px) { iframe { width: 100%; height: 400px; } #contact { height: auto !important; } #fanclub h4 { font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 100; text-align: center; padding: 20px 0; } #biografie .biofoto { opacity: 0.6; } #menu ul.menu li { float: left; margin: 0 20px 0 0;} .cd { margin-left: -120px; } } @media screen and (max-width: 768px) { #header .desktop { display: none;} #header .mobile-only { display: block;} #fanclub #plaats { margin-top: 15px !important; } #nieuws img { width:100%; } #nieuws p { padding: 0px;} #nieuws .item { margin-bottom: 30px; } .cd { margin-left: -120px; } .menu { display: none; } #menu ul.social { right: 20px !important; } } @media screen and (max-width: 500px) { #header { width: 100%; } #header #slider { height: 375px; } #headernieuws { background: #161313 url("/theme/img/header-img.jpg") -750px top; width: 100%; height: 225px; } #headernieuws .logo { width: 250px; position: absolute; left:10px; top: 30px; margin-top: 20px; } #header .desktop { display: none;} #header .mobile-only { display: block;} .logo { width: 95%; position: absolute; left:10px; top: 300px; margin-top: 260px; z-index: 9999999; } .cd { display: none !important;} .menu { display: none; } #menu ul.social { right: 20px !important; } #nieuws { padding: 90px 20px 40px 20px; } #nieuws p { padding: 0px;} #nieuws .item { padding-bottom: 30px; } #biografie .biofoto { width: 100%; opacity: 1; } #discografie .item img { border: 5px solid #fff; } #agenda table { display: none; } #agenda-mobile { display: block; } #fanclub #plaats { margin-top: 15px !important; } #fanclub h4 { font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 100; text-align: center; padding: 20px 0; } iframe { width: 100%; height: 250px; } #contact { height: auto !important; padding: 0px;} } @media screen and (min-height: 1000px) { #contact { background: #111 url('/theme/img/footerfoto.jpg') center 200px no-repeat; background-size: cover; padding-top: 500px; background-attachment: fixed; height: 800px;} } /* ANIMATED */ /* Wobble Horizontal */ @-webkit-keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Sweep To Right */ .hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #793941; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: white; } .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }