@charset "UTF-8";
html {
box-sizing: border-box; }
*, *::after, *::before {
box-sizing: inherit; }
html {
box-sizing: border-box; }
*, *::after, *::before {
box-sizing: inherit; }
/*
* Symbolset
* www.symbolset.com
* Copyright © 2013 Oak Studios LLC
*
* Upload this file to your web server
* and place this within your tags.
*
*/
@font-face {
font-family: "SSSocialRegular";
src: url("ss-social-regular.eot");
src: url("ss-social-regular.eot?#iefix") format("embedded-opentype"), url("ss-social-regular.woff") format("woff"), url("ss-social-regular.ttf") format("truetype"), url("ss-social-regular.svg#SSSocialRegular") format("svg");
font-weight: normal;
font-style: normal; }
/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
html:hover [class^="ss-"] {
-ms-zoom: 1; }
.ss-icon, .ss-icon.ss-social-regular,
[class^="ss-"]:before, [class*=" ss-"]:before,
[class^="ss-"].ss-social-regular:before, [class*=" ss-"].ss-social-regular:before,
[class^="ss-"].right:after, [class*=" ss-"].right:after,
[class^="ss-"].ss-social-regular.right:after, [class*=" ss-"].ss-social-regular.right:after {
font-family: "SSSocialRegular";
font-style: normal;
font-weight: normal;
text-decoration: none;
text-rendering: optimizeLegibility;
white-space: nowrap;
/*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased; }
[class^="ss-"].right:before,
[class*=" ss-"].right:before {
display: none;
content: ''; }
.ss-facebook:before, .ss-facebook.right:after {
content: ''; }
.ss-twitter:before, .ss-twitter.right:after {
content: ''; }
.ss-linkedin:before, .ss-linkedin.right:after {
content: ''; }
.ss-googleplus:before, .ss-googleplus.right:after {
content: ''; }
.ss-appdotnet:before, .ss-appdotnet.right:after {
content: ''; }
.ss-zerply:before, .ss-zerply.right:after {
content: ''; }
.ss-reddit:before, .ss-reddit.right:after {
content: ''; }
.ss-steam:before, .ss-steam.right:after {
content: ''; }
.ss-tumblr:before, .ss-tumblr.right:after {
content: ''; }
.ss-wordpress:before, .ss-wordpress.right:after {
content: ''; }
.ss-blogger:before, .ss-blogger.right:after {
content: ''; }
.ss-posterous:before, .ss-posterous.right:after {
content: ''; }
.ss-quora:before, .ss-quora.right:after {
content: ''; }
.ss-youtube:before, .ss-youtube.right:after {
content: ''; }
.ss-vimeo:before, .ss-vimeo.right:after {
content: ''; }
.ss-vine:before, .ss-vine.right:after {
content: ''; }
.ss-letterboxd:before, .ss-letterboxd.right:after {
content: ''; }
.ss-flickr:before, .ss-flickr.right:after {
content: ''; }
.ss-instagram:before, .ss-instagram.right:after {
content: ''; }
.ss-500px:before, .ss-500px.right:after {
content: ''; }
.ss-etsy:before, .ss-etsy.right:after {
content: ''; }
.ss-pinterest:before, .ss-pinterest.right:after {
content: ''; }
.ss-svpply:before, .ss-svpply.right:after {
content: ''; }
.ss-readmill:before, .ss-readmill.right:after {
content: ''; }
.ss-dropbox:before, .ss-dropbox.right:after {
content: ''; }
.ss-pinboard:before, .ss-pinboard.right:after {
content: ''; }
.ss-delicious:before, .ss-delicious.right:after {
content: ''; }
.ss-dribbble:before, .ss-dribbble.right:after {
content: ''; }
.ss-behance:before, .ss-behance.right:after {
content: ''; }
.ss-github:before, .ss-github.right:after {
content: ''; }
.ss-octocat:before, .ss-octocat.right:after {
content: ''; }
.ss-stackoverflow:before, .ss-stackoverflow.right:after {
content: ''; }
.ss-paypal:before, .ss-paypal.right:after {
content: ''; }
.ss-kickstarter:before, .ss-kickstarter.right:after {
content: ''; }
.ss-foursquare:before, .ss-foursquare.right:after {
content: ''; }
.ss-yelp:before, .ss-yelp.right:after {
content: ''; }
.ss-skype:before, .ss-skype.right:after {
content: ''; }
.ss-rdio:before, .ss-rdio.right:after {
content: ''; }
.ss-spotify:before, .ss-spotify.right:after {
content: ''; }
.ss-lastfm:before, .ss-lastfm.right:after {
content: ''; }
.ss-soundcloud:before, .ss-soundcloud.right:after {
content: ''; }
.ss-link:before, .ss-link.right:after {
content: '🔗'; }
.ss-phone:before, .ss-phone.right:after {
content: '📞'; }
.ss-mail:before, .ss-mail.right:after {
content: '✉'; }
.ss-like:before, .ss-like.right:after {
content: '👍'; }
.ss-rss:before, .ss-rss.right:after {
content: ''; }
.ss-share:before, .ss-share.right:after {
content: ''; }
.ss-apple:before, .ss-apple.right:after {
content: ''; }
.ss-microsoft:before, .ss-microsoft.right:after {
content: ''; }
.ss-windows:before, .ss-windows.right:after {
content: ''; }
.ss-android:before, .ss-android.right:after {
content: ''; }
.ss-blackberry:before, .ss-blackberry.right:after {
content: ''; }
/* Legacy */
.ss-fivehundredpx:before, .ss-fivehundredpx.right:after {
content: ''; }
.curtains {
width: 100%;
z-index: 1;
position: relative; }
.curtains > li {
-webkit-transform: translateZ(0);
background: #eee;
display: block;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
z-index: 1; }
.curtains > li.hidden {
display: none; }
.curtains > li:first-child {
z-index: 2; }
@font-face {
font-family: 'EuclidFlex-Bold-WebS';
src: url("../fonts/EuclidFlex-Bold-WebS.eot");
src: url("../fonts/EuclidFlex-Bold-WebS.woff") format("woff"), url("../fonts/EuclidFlex-Bold-WebS.woff2") format("woff2");
font-weight: bold;
font-style: normal; }
/* ==========================================================================
Reset adapted from Twitter Bootstrap
https://github.com/twitter/bootstrap/
========================================================================== */
html, body {
margin: 0;
padding: 0; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block; }
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1; }
audio:not([controls]) {
display: none; }
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
a:hover,
a:active {
outline: 0; }
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic; }
button,
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: middle; }
button,
input {
*overflow: visible;
line-height: normal; }
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0; }
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button; }
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; }
textarea {
overflow: auto;
vertical-align: top; }
[role="navigation"]::after, .tour-date::after {
clear: both;
content: "";
display: table; }
body {
background-color: #000; }
.section {
background-color: #eee; }
.section-cover {
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat; }
#preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #eee;
/* change if the mask should have another color then white */
z-index: 99;
/* makes sure it stays on top */ }
#status {
width: 150px;
height: 150px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url(../img/status.gif);
/* path to your loading animation */
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
margin: -75px 0 0 -75px;
/* is width and height divided by two */ }
section {
margin: 0; }
.center {
max-width: 90%;
margin-left: auto;
margin-right: auto; }
.center::after {
clear: both;
content: "";
display: table; }
@media screen and (min-width: 800px) {
.center {
max-width: 60%;
margin-left: auto;
margin-right: auto; }
.center::after {
clear: both;
content: "";
display: table; } }
.center-large {
max-width: 90%;
margin-left: auto;
margin-right: auto; }
.center-large::after {
clear: both;
content: "";
display: table; }
.promo-wrap {
display: table;
width: 100%;
table-layout: fixed; }
.left, .right {
vertical-align: middle; }
@media screen and (min-width: 700px) {
.left, .right {
display: table-cell;
width: 50%; } }
.left h3, .right h3 {
color: #FDE1C1;
font-size: 14px;
margin-top: 4em; }
.left a, .right a {
color: #FDE1C1;
text-decoration: none; }
.left {
color: #FDE1C1;
text-align: center;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1.2;
padding-top: 5em; }
@media screen and (min-width: 800px) {
.left {
padding-top: 0; } }
.right {
background: transparent url("../img/motiv-album.png") center no-repeat;
background-size: 50%;
height: 100vh; }
body {
font-family: "EuclidFlex-Bold-WebS", Helvetica, Arial, sans-serif; }
p {
margin: 0 0 13px;
font-size: 20px;
line-height: 26px;
color: #000; }
p small {
font-size: 18px;
color: #000; }
p a {
border-bottom: 1px solid #9882AF; }
p a:hover {
background-color: #cbc0d7; }
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 400;
color: #000;
text-rendering: optimizelegibility; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-weight: normal;
color: #1a1a1a; }
h1 {
font-size: 50px;
line-height: 52px;
text-align: center; }
h1 small {
font-size: 18px; }
h2 {
font-size: 24px;
line-height: 52px; }
h2 small {
font-size: 18px; }
h3 {
line-height: 39px;
font-size: 18px; }
h3 small {
font-size: 14px; }
h4, h5, h6 {
line-height: 26px; }
h4 {
font-size: 14px; }
h4 small {
font-size: 12px; }
h5 {
font-size: 12px; }
h6 {
font-size: 11px;
color: #1a1a1a;
text-transform: uppercase; }
ul, ol {
padding: 0;
margin: 0 0 13px 25px; }
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0; }
ul {
list-style: disc; }
ol {
list-style: decimal; }
li {
line-height: 26px; }
ul.unstyled,
ol.unstyled {
margin-left: 0;
list-style: none; }
strong {
font-weight: bold; }
em {
font-style: italic; }
ol {
margin: 0; }
p {
font-size: 1em;
line-height: 1.3em; }
.section-title {
font-size: 2em;
padding-top: 1.2em;
padding-bottom: .3em;
line-height: 1.5;
color: #eee;
text-transform: uppercase;
letter-spacing: .1em;
margin-bottom: 1.5em; }
@media screen and (min-width: 800px) {
.section-title {
padding-top: 1em;
font-size: 3.5em; } }
fieldset {
background-color: #9882AF;
border: 1px solid #ddd;
margin: 0 0 0.75em;
padding: 1.5em; }
input,
label,
select {
display: block;
font-family: "EuclidFlex-Bold-WebS", Helvetica, Arial, sans-serif;
font-size: 1em; }
label {
margin-bottom: 0.375em;
color: #9882AF;
font-size: .8em;
text-transform: uppercase;
letter-spacing: .1em; }
label.required::after {
content: "*"; }
label abbr {
display: none; }
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea,
select[multiple=multiple],
textarea {
background-color: #9882AF;
border: none;
border-radius: 0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
font-family: "EuclidFlex-Bold-WebS", Helvetica, Arial, sans-serif;
font-size: 1em;
margin-bottom: 1.5em;
padding: 1em;
-webkit-transition: border-color;
transition: border-color;
width: 100%; }
input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, textarea:hover,
select[multiple=multiple]:hover,
textarea:hover {
border-color: #c4c4c4; }
input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus,
select[multiple=multiple]:focus,
textarea:focus {
border-color: #477dca;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7);
outline: none; }
textarea {
resize: vertical;
min-height: 140px; }
button {
background-color: #9882AF;
color: #eee;
font-family: "EuclidFlex-Bold-WebS", Helvetica, Arial, sans-serif;
border: none;
padding: 1em 1.5em;
margin-bottom: 3em;
text-transform: uppercase;
letter-spacing: .1em; }
button:hover {
background-color: #b2a1c3; }
.uniform__potty {
position: absolute;
top: -9999px;
left: -9999px; }
.button-bar {
display: block;
width: 60%;
margin: 0 auto;
padding-left: 3.4em;
padding-right: 1.3em;
padding-bottom: 1em;
padding-top: 1em;
font-size: .8em;
border-top: 2px solid #FDE1C1;
border-left: 2px solid #FDE1C1;
border-right: 2px solid #FDE1C1; }
.button-bar:last-child {
border-bottom: 2px solid #FDE1C1; }
@media screen and (min-width: 735px) {
.button-bar {
display: inline-block;
width: auto;
border-right: none;
border-bottom: 2px solid #FDE1C1; }
.button-bar:last-child {
border-right: 2px solid #FDE1C1; }
.button-bar:hover {
background-color: rgba(255, 255, 255, 0.4); } }
.social-button {
display: inline-block; }
.social-button a {
font-size: 1.5em;
margin-right: 0.5em; }
.social-button a:hover {
color: #cbc0d7; }
#introduction {
background-color: #000;
background-image: url(../img/bg-album.jpg);
background-size: 250px 250px;
color: #000;
width: 100%; }
h2.promo {
line-height: 1;
color: #FDE1C1;
font-size: .9em; }
.big {
display: block;
margin-top: .2em;
font-size: 3.8em; }
.am {
background: url(../img/am.svg) 8px center no-repeat; }
.it {
background: url(../img/it.svg) 8px center no-repeat; }
.sp {
background: url(../img/sp.svg) 8px center no-repeat; }
[role="navigation"] {
position: fixed;
top: 0;
width: 100%;
z-index: 200;
-webkit-transition: background ease-in-out .8s;
transition: background ease-in-out .8s; }
@media screen and (max-width: 700px) {
[role="navigation"] {
background: url(../img/bg-album.jpg);
background-size: 250px 250px; } }
[role="navigation"].dark {
background: url(../img/bg-album.jpg);
background-size: 250px 250px;
-webkit-transition: background ease-in-out .8s;
transition: background ease-in-out .8s; }
[role="navigation"] .nav-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-left: 0;
margin-bottom: 0; }
[role="navigation"] .nav-item {
list-style: none;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3; }
@media screen and (min-width: 700px) {
[role="navigation"] .nav-item {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; } }
@media screen and (max-width: 700px) {
[role="navigation"] .nav-item.play {
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
background: url("../img/play.svg") center no-repeat;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; } }
[role="navigation"] .nav-item .nav-link {
display: block;
padding-top: .5em;
padding-bottom: .6em;
padding-left: .6em;
padding-right: .6em;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
letter-spacing: .1em;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #FDE1C1;
cursor: pointer;
text-align: center;
line-height: 1; }
[role="navigation"] .nav-item .nav-link:focus {
outline: none; }
@media screen and (min-width: 1000px) {
[role="navigation"] .nav-item .nav-link:hover {
background-color: #FDE1C1;
color: #000; } }
@media screen and (min-width: 480px) {
[role="navigation"] .nav-item .nav-link {
font-size: 20px; } }
.modal {
/* These styles MUST be included. Do not change. */
position: fixed;
display: block;
top: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: 999999;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
/* Specify the width of your pageslide here */
width: 100%;
overflow: scroll;
/* These styles are optional, and describe how the pageslide will look */
background-color: #eee;
color: #FFF; }
@media screen and (min-width: 768px) {
.modal {
width: 50%; } }
.modal.open {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
.modal-inner {
position: absolute;
top: 6em;
left: 2em;
right: 2em; }
.close-btn {
font-size: 30px;
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
background-image: url(../img/close_btn.svg);
background-position: 15px center;
background-repeat: no-repeat;
height: 64px;
text-align: center;
text-decoration: none;
color: #ddd;
display: block;
cursor: pointer; }
.tour-pic {
background-image: url(../img/say-yes-dog-02.jpg) !important; }
.tour {
color: #FF6363;
background-color: #eee; }
.tour .section-title {
background-color: #FF6363; }
.date {
text-transform: uppercase;
letter-spacing: 0.2em; }
.tour-dates {
margin-bottom: 6em; }
.tour-date {
display: block;
border-top: 2px solid #FF6363; }
.tour-date.future a {
color: #FF6363; }
.tour-date.past {
border-top: 2px solid #ffb0b0; }
.tour-date.past a {
color: #ffb0b0; }
.tour-date:hover {
background-color: #FF6363; }
.tour-date:hover a {
color: #eee; }
.tour-date:hover.past {
background-color: #ffb0b0; }
.tour-date.today a:after {
content: "today!";
margin-left: 1.5em;
color: #000; }
.tour-date .tour-link {
color: #FF6363;
display: block;
padding-top: 0.5em;
padding-bottom: 0.7em;
padding-left: 1em;
padding-right: 1em;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .1em;
width: 100%; }
.contact-pic {
background-image: url("../img/bg-concerts.jpg") !important; }
.contact {
background-color: #eee;
color: #9882AF; }
.contact .center {
padding-bottom: 4em; }
.contact .section-title {
background-color: #9882AF; }
.contact a, .contact p {
text-decoration: none;
color: #9882AF; }
.contact .social-list {
margin: 0;
padding: 0;
display: inline-block;
margin-bottom: 1.5em; }