/* CSS Document */
#mobile:not( .mm-menu ) {display: none;}
.EditMode .columns {-webkit-column-count: auto; -moz-column-count: auto; column-count:auto;}
.EditMode img.mask {display:none;}
.EditableTextEdit {min-width:100px;}
button:focus { outline:none !important; }
.stButton .stLarge:hover {background-position:0px !important;}
* {box-sizing: border-box; background-repeat:no-repeat;}

.CookieConsent {text-align:left; width:100%; background-color:#002d5c; color:#fff; padding:10px 0px 10px 12px; font-family: "letter-gothic-std",monospace;}
.CookieConsent a {font-family: "proxima-nova",sans-serif; color:#fff; text-decoration:underline;}
.CookieConsent .ConsentText {float:left; width:92%; display:inline-block; padding:5px 10px 5px 0;}
.CookieConsent .ConsentButtons {float:left; width:8%; padding:5px 10px 0 0 ; text-align:center;}
.CookieConsent input[type=submit] {width:20px; height:20px; background-image:url(/media/images/close-cookie.png); background-position:center center; cursor:pointer; color:#002d5c; background-color:#002d5c;}
@media only screen and (min-width: 1500px) {
.CookieConsent {text-align:center;}
.CookieConsent .ConsentText {float:none; width:auto;}
.CookieConsent .ConsentButtons {float:none; width:auto; padding:0px;}
}

/* ----- HTML STYLES ----- */
/* undo default styling of common (X)HTML browsers */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td, select {margin:0px; padding:0px; border:none;}
p {font-size:18px; line-height:1.4em;}
p, li, a, input, select, label {font-family: "letter-gothic-std",monospace; color:#000;}
h1, h2, h3, h4, h5, h6 {text-transform:uppercase; font-family: "letter-gothic-std",monospace;  color:#000;}
a img,:link img,:visited img { border:none; }
address {font-style:normal;}
.ErrorLabel {display:none;}
input {-webkit-appearance: none;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; }
.videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

.fadeIn {position:relative; -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-delay:0.3s; -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes fadeIn {from {opacity:0; top:50px;} to {opacity:1; top:0px;}}

#container {position: relative; max-width: 100%; margin: 0px auto; text-align: left; overflow:hidden; }
#container>div {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;}
.wrapper {margin: 0 auto; width: 1200px; max-width: 100%;}
.content {float: left; width: 80%; max-width: 100%; margin:0 10%; position:relative;}


.button {text-transform:uppercase; float:left; display:block; border:1px solid #000; padding:10px 25px; margin-top:20px;}
.button:hover {background-color:#000; color:#fff;}
.white .button {text-transform:uppercase; float:left; display:block; border:1px solid #fff; padding:10px 25px; margin-top:20px; color:#fff;}
.white .button:hover {background-color:#fff; color:#000;}
.divider {height:100px; float:left; width:100%;}
.margin {padding:80px 0;}
.wide {width:100%; clear:left;}
.copy {opacity: 0;}
.copy p {margin-bottom:20px;}
.copy.white p, .copy.white p a, .copy.white h1, .copy.white h2, .copy.white h3, .copy.white h4, .copy.white h5, .copy.white h6 {color:#fff;}
.copy p:last-child {margin-bottom:0px;}
.copy h1 {font-size:28px; margin-bottom:40px;}
.copy h2 {font-size:28px; margin-bottom:40px;}
.copy h3 {font-size:30px; margin-bottom:20px; font-weight:normal;}

@media only screen and (min-width: 768px) {
.margin {padding:100px 0;}
.wide {width:85%;}
.copy h1 {font-size:38px; margin-bottom:50px;}
.copy h2 {font-size:38px; margin-bottom:50px;}
    }
  
@media only screen and (min-width: 1200px) {
.margin {padding:120px 0;}
.wide {width:70%;}
.copy h1 {font-size:48px; margin-bottom:60px;}
.copy h2 {font-size:48px; margin-bottom:60px;}
    }


/*#Master#*/

#container #nav {position:absolute;}
#container #nav a.logo {display:block; position:absolute; top:20px; right:20px;  z-index:1;}
#container #nav a.logo img {width:180px;}
ul#menu-mainnav {position:relative; z-index:-1; opacity:0; background-color: rgba(0,0,0,0.8); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; height:auto; width:auto; padding:0px; margin:-400px 0 0 0; height:10000px; width:10000px;}
.open ul#menu-mainnav {z-index:1; opacity:1; background-color: rgba(0,0,0,0.8); -webkit-transition: all 0.5s ease; transition: all 0.5s ease;  padding-top:400px; margin-top:-400px;  padding-left:3000px; margin-left:-3000px; }
ul#menu-mainnav li a {text-transform:uppercase; color:#fff; margin-bottom:30px; font-size:18px; display:block;}
ul#menu-mainnav li a:hover {font-weight:bold;} 
#navButton {display:block; z-index:2; width: 40px; height: 30px; position: relative; margin: 40px 0 40px 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;}
#navButton span {display: block; position: absolute; height: 2px; width: 100%; background: #fff;  opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#navButton span:nth-child(1) {top: 0px;}
#navButton span:nth-child(2) {top: 14px;}
#navButton span:nth-child(3) {top: 28px;}
#navButton.open span:nth-child(1) {top: 14px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
#navButton.open span:nth-child(2) {opacity: 0;left: -40px;}
#navButton.open span:nth-child(3) {top: 14px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}

@media only screen and (min-width: 768px) {
#container #nav a.logo {top:40px; right:40px;}
#container #nav a.logo img {width:250px;}
#navButton {margin: 60px 0 60px 0;}
    }
  
@media only screen and (min-width: 1200px) {
#container #nav a.logo {top:60px; right:60px;}
#container #nav a.logo img {width:auto;}
#navButton {margin: 100px 0 100px 0;}
    }

#footer {margin-top:-101px;}
#footer .content {border-top:1px solid #fff; padding:30px 0;}
#footer .copy {float:left;}
#footer .copy p {line-height:40px; font-size:12px;}
#footer .social {float:right;}
#footer .social a {float:right; margin-left:12px; display:block; width:40px; height:40px; background-size:cover;}
#footer .social a.facebook {background-image:url(/wp-content/themes/ollyslocombe/assets/facebook.png);}
#footer .social a.email {background-image:url(/wp-content/themes/ollyslocombe/assets/email.png);}
#footer.footerAbout .content {border-top:1px solid #000;}
#footer.footerAbout .copy p {color: #000;}
#footer.footerAbout .social a.facebook {-webkit-filter: invert(100%); filter: invert(100%);}
#footer.footerAbout .social a.email {-webkit-filter: invert(100%); filter: invert(100%);}

@media only screen and (min-width: 768px) {
#footer .copy p {font-size:18px;}
#footer .social a {margin-left:18px;}
  
  }

/*#Homepage#*/
#banner {min-height:100vh;}
#banner .copy {margin-top:200px; padding-bottom:100px;}
#music {background-color:#000;}
.liveDate {float:left; clear:left; width:100%; margin-bottom:50px;}
.liveDate p.date {color:#939598; font-weight:bold;}
.liveDate p.time {margin-top:-15px;}
.liveDate .button {margin-top:0px;}
#newsFeed {background-color:#000; padding-bottom:220px;}
.newsPreview {float:left; width:100%; margin-top:50px;}
.newsPreview p.date {color:#939598; font-weight:bold;}
.newsPreview p.link a {color:#939598; font-weight:bold;}
.newsPreview p.link a:hover {color:#ffffff;}
#live {min-height:400px;}

@media only screen and (max-width: 1199px) {
#music {padding-bottom:300px;}
  }

@media only screen and (min-width: 768px) {
#banner .copy {width:50%;}
#music { background-size:600px auto;}
.liveDate {width:50%;}
.newsPreview {width:47.5%; margin-left:5%;}
.newsPreview:nth-child(2n+1) {margin-left:0;clear:left;}
#newsFeed .newsPreview:last-child {display:none;}   
}
  
@media only screen and (min-width: 1200px) {
#banner .copy {width:40%;}
.liveDate {width:30%;}
.newsPreview {float:left; width:30%; margin-left:5%;}
.newsPreview:nth-child(2n+1) {margin-left:5%; clear:none;}
.newsPreview:nth-child(3n+1) {margin-left:0; clear:left;}
#newsFeed .newsPreview:last-child {display:block;}   
    }

/*#About#*/
#listen.margin {padding:200px 0;}
@media only screen and (min-width: 1200px) {
#listen .copy p {width:35%;}
    }
#contactFeed {padding-bottom:220px;}

/*#Live#*/
#bannerLive {padding-bottom:400px;}
#bannerLive .copy:first-child {margin-top:200px;}
#bannerLive .liveDate {margin-top:40px;}

/*#Music#*/
#bannerMusic {background-color:#000; background-image:url(/wp-content/themes/ollyslocombe/assets/musicLarge.jpg);  background-position:bottom right; padding-bottom:300px; background-size:500px auto; }
#bannerMusic .content>.copy:first-child {margin-top:200px;}

.audio h3 {text-transform:none;}
.audio {float:left; width:100%; margin-top:20px;}

.audio span {color:#fff;}
.audio .controls {position:absolute;}
.audio .controlsCopy {float:left; padding-left:67px; padding-top:4px;}
.audio div.play {display:block; width:47px; height:47px; background-image:url(/wp-content/themes/ollyslocombe/assets/play.png); background-size:cover; cursor:pointer;}
.audio div.pause {display:none; width:47px; height:47px; background-image:url(/wp-content/themes/ollyslocombe/assets/pause.png); background-size:cover; cursor:pointer;}

@media only screen and (min-width: 768px) {
.audio {width:47.5%; margin-left:5%; clear:none; margin-top:20px;}
.audio:nth-child(2n+1) {margin-left:0px; clear:left;}
  }

@media only screen and (min-width: 1024px) {
.audio {width:30%; margin-left:5%; clear:none; margin-top:20px;}
.audio:nth-child(2n+1) {margin-left:5%; clear:none;}
.audio:nth-child(3n+1) {margin-left:0px; clear:left;}
  }
@media only screen and (min-width: 1280px) {
#bannerMusic {padding-bottom:400px; background-size:auto;}
  }


/*#News#*/
#news {background-color:#000; padding-bottom:400px;}
#news .content>.copy:first-child {margin-top:200px;}

.news img {width:100%; margin-bottom:50px;}
.news h3 {margin-bottom:50px;}
.news p.date {color:#939598; font-weight:bold;}
.news p.link a {color:#939598; font-weight:bold;}
.news p.link a:hover {color:#fff;}


/*#Contact#*/
#contact {background-color:#000; padding-bottom:400px;}
#contact .content>.copy:first-child {margin-top:200px;}


#wpforms-57 {float:left; width:100%; margin:20px 0 50px 0;}
#wpforms-57 label {color:#fff; margin-bottom:10px; float:left; display:inline-block; font-size:18px; font-family: "letter-gothic-std",monospace; width:100%;}
#wpforms-57 span {color:#fff;}
#wpforms-57 input[type=text] {width:100%; padding:10px 10px; font-size:18px; border-radius:0px;}
#wpforms-57 textarea {width:100%; padding:10px 10px; font-size:18px;  height:100px; border-radius:0px;}

#wpforms-57 button[type=submit] {text-transform:uppercase; font-family: "letter-gothic-std",monospace; border-radius:0px; float:left; font-size:18px; display:block; border:1px solid #fff; padding:10px 25px; margin-top:20px; color:#fff; background-color:#000; cursor:pointer;}
#wpforms-57 button[type=submit]:hover {background-color:#fff; color:#000;}

#weddingContact #wpforms-57 button[type=submit] {color:#000; background-color:#fff;}

/*#Wedding#*/

#weddingWatch {background-color:#5b4622;}
#weddingListen {background-color:#000;}
#weddingContact input[type=submit] {color:#000; background-color:#fff;}
#weddingContact #contactForm {margin-bottom:80px; float:left;}

@media only screen and (min-width: 768px) {
#weddingListen p {width:75%;}
#weddingListen {background-image:url(/wp-content/themes/ollyslocombe/assets/contact.jpg); background-position:bottom right; background-size:500px auto;}
  }
@media only screen and (min-width: 1280px) {
#weddingListen p {width:50%;}
#weddingListen {background-image:url(/wp-content/themes/ollyslocombe/assets/contact.jpg); background-position:bottom right; background-size:700px auto;}
  }

.repertoireList {float:left; width:100%; margin-top:80px; }
.repertoire {float:left; width:100%; margin-bottom:40px;}
.repertoire h3 {font-size:30px; margin-bottom:20px; text-transform:none;}
.repertoire p {font-size:16px;}

@media only screen and (min-width: 768px) {
.repertoire {float:left; width:45%; margin-left:10%;}
.repertoire:nth-child(2n+1) {margin-left:0; clear:left;}
  }
@media only screen and (min-width: 1280px) {
.repertoire {float:left; width:26.66666%; margin-left:10%;}
.repertoire:nth-child(2n+1) {margin-left:10%; clear:none;}
.repertoire:nth-child(3n+1) {margin-left:0; clear:left;}
  }