/*
   ======================================

   Written by: Steve Beeston
   Date:       February 2022
   Changes:    (none)
   Purpose:    Style sheet for Stortford Music Festival Jubilee Bish Bash 2022
   Note:       Based on style sheet for highgateromankiln.org.uk

   ======================================
*/

@import url(grid.css);
@import url(menu.css);
@import url(flex.css);


html {
   font-size: 62.5%;
   height: 100%;
}

body {
   height: 100%;
   background-color: #1C4579
}

* {
   padding: 0;
   margin: 0;
}

.no-padding {
   padding: 0;
}

.no-border {
   border-width: 0;
}

body {
   font-family: 'open sans', arial, serif;
}


/* For debugging only */
.column, .columns {border: 0px solid red;}

a {
   text-decoration: none;
   border-bottom: 1px dotted;
}

/*
   ===========================
   G E N E R A L   L A Y O U T
   ===========================
*/

.outer-wrapper {
   position: relative;
   float: left;
   width: 100%;
   /* min-height: 100%; SRB 31/10/20 */
   background: #FAF9DB;
}

header, footer {
   position: relative;
   float: left;
   width: 100%;
   /* min-height: 100%; */
   background: white;
}

header {
   z-index: 2;
   /* opacity: 0.8; SRB 11/2/22 */
   border-bottom: 1px solid #1C4579;
   /* border-bottom: 1px solid #655c4b; /* experimental SRB 14/1/21 */
   background-color: #1C4579;
}

footer {
   border-top: 1px solid #ad9f82;
   background-color: #1C4579;
}

.top-row .columns {
   padding-top: 0;
}

.inner-wrapper {
   position: relative;
	margin: 0 auto;
   width: 100%;
   max-width: 1000px; /* Note: banner and carousel images are currently 1000px wode so this cannot be larger without compromising quality */
}

.header .columns {
   padding-bottom: 5px;
}

footer .row {
   margin-bottom: 10px;
}

a.footer-social-icon img {
   max-width: 48px;
   text-decoration: none;
}

a.footer-social-icon {
   border-width: 0;
   margin-left: 3px;
}

footer p,
footer a {
   font-size: 1.6rem;
   line-height: 2.6rem;
   color: white;
}

#footer ul,
footer ul {
    list-style-type: none;
    margin-left: 0;
}

footer .column,
footer .columns {
   padding-bottom: 5px;
}

footer .social-icons a {
   border-width: 0;
}

.top-bar {
   padding: 0;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.text-left {
   text-align: left;
}

.center, .text-centre {
   text-align: center;
}

.more-padding {
   padding: 15px 110px;
}

.no-padding-top {
   padding-top: 0;
}

img {
   vertical-align: middle;
}



/* -----------
   Blockquotes
   ----------- */

blockquote {
  /* background: #f9f9f9;*/
   font-style: italic;
   border-left: 10px solid #C2B59B;
   margin: 4rem 0;
   padding: 0.5em 30px;
   quotes: "\201C""\201D""\2018""\2019";
}
blockquote p:before {
   color: #C2B59B;
   content: open-quote;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
   font-size: 7rem;
}

blockquote p:after {
   color: #C2B59B;
   content: close-quote;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
   font-size: 7rem;
}

blockquote p {
   display: inline;
}

#sponsor-row {
   background-color: #888;
   background-color: #FFF; /* SRB 16/5/22 */
   border-radius: 30px;
}

#band-logos {
   width: 95%;
   border-radius: 50px; 
   background-color: #ddd; 
   margin: 20px auto;
}




/* -----------------
   Images & captions
   ----------------- */

.caption {
   display: block;
   font-size: 16px; 
   background-color: #C2B59B; 
   border: 0px solid silver; 
   border-top-width: 0px;
   line-height: 24px; 
   padding: 3px;
}

figure {
   margin: 20px auto 20px;
}

figure.vertical {
   max-width: 400px; 
   margin: auto; 
   margin-bottom: 20px;
}



/*
   -------------------------------------------
   Classes for act names on the lineup page
   -------------------------------------------
*/

.headliner,
.support-act,
.featured-act {
   font-family: 'Alfa Slab One', arial, sans-serif;
   font-weight: 400;
   margin: 0;
}

.headliner {
   font-size: 36px;
}

.support-act {
   font-size: 24px;
}

.featured-act {
   /*float: left;*/
   color: #008cba;
   font-size: 18px;
   margin: 0 20px;
   line-height: 30px;
   display: inline-block;
}

@media only screen and (min-width: 40.063em) {

.headliner,
.support-act,
.featured-act {
   margin: 0 10px;
}


   .headliner {
      font-size: 48px;
   }

   .support-act {
      font-size: 30px;
   }

   .featured-act {
      font-size: 24px;
      line-height: 40px;
   }
}


/*
   -------------------------------------------
   Stage schedules
   -------------------------------------------
*/

table.stage-schedule {
   max-width: 340px;
   table-layout: auto;
   margin: auto;
   width: 340px; /* SRB 1/5/22 */
   text-align: left; /* SRB 1/5/22 */
}

table.stage-schedule,
table.stage-schedule tr,
table.stage-schedule th,
table.stage-schedule td {
   background: none;
   border: 0;
}

table.stage-schedule th {
   text-align: center;
}

table.stage-schedule td {
   /* font-size: 1.1em; SRB 1/5/22 */
}

td.time-cell {
   width: 60px;
   text-align: left;
}

td.performer-cell {
   /*width: 170px;*/
}

td.performer-cell a {
   font-weight: normal;
}

/*
   -------------------------------------------
   Separate listing for DJs on the lineup page
   -------------------------------------------
*/

.dance-row {
   width: 100%;
   margin: 0 auto 20px;
   border: 2px solid #008cba;
   border-radius: 10px;
}

.dance-row-title {
   width: 60px;
   line-height: 2rem;
   float: left; 
   border-bottom: 2px solid #008cba; 
   border-right: 2px solid #008cba; 
   border-bottom-right-radius: 10px; 
   color: #008cba; 
   font-family: 'Alfa Slab One', arial, sans-serif;
   font-size: 1.5rem;
}





/*
   ==========================
   HOME PAGE CAROUSEL OVERLAY
   ==========================
*/

#carousel-overlay {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 20px;
   border-radius: 10px;
   top: 45%;
   left: 20%;
   width: 60%;
   transform: none;
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
   /* background-color: RGBA(255,255,255,0.7); SRB 11/2/22 */
}

#carousel-overlay img {
   height: 800px;
   margin-top: 70px;
   background-color: RGBA(255,255,255,0.7);
   border-radius: 20px;
}

/*
   =================
   HERO IMAGE & TEXT
   =================
*/

.hero-image {
   background-image: url(../img/hero01.jpg);
   height: 100%;
   background-attachment: scroll;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(0,0,0,0.4);
   padding: 20px;
   border-radius: 10px;
}

.hero-text p {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3rem;
   color: white;
   line-height: 4rem;
}

/* EXPERIMENTAL HERO STUFF ++ SRB 26/11/20 */
.hero-text {
   top: 45%;
   left: 20%;
   width: 60%;
   transform: none;
}

.hero {
	display:table;
	height:100%;
	width:100%;
	margin:auto;
	background:url(img/wood1600x900.jpg) no-repeat 50% 50%;
	background-size:cover;
   /* Create the parallax scrolling effect SRB 2/10/20 */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
}

.hero .inner {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	max-width:none;
}



/*
   ===========================
   HOME PAGE NAVIGATION PANELS
   ===========================
*/

nav#panel a {
   text-decoration: none;
      /* SRB 29/12/20 */
      display: block;
      height: 100%;
      padding: 0;
}

nav#panel h1,
nav#panel div.title {
   background-color: #C2B59B;
   font-family: 'open sans', arial, sans-serif;
   font-weight: 400;
   font-size: 1.6rem;
   line-height: 2.4rem;
   padding: 8px;
   text-shadow: none;
   text-transform: capitalize;
}

nav#panel a h1,
nav#panel a div.title,
nav#panel a img,
nav#panel .flex-item {
   transition: 0.5s;
}

nav#panel a:hover h1,
nav#panel a:hover div.title,
nav#panel .flex-item:hover {
   background-color: #ded4bf;
}

nav#panel a:hover img {
   opacity: 0.9;
}

/* SRB 29/12/20
#contact nav#panel h1 {
   font-size: 1.6rem;
}
*/


/*
   ==========
   FLEX STUFF
   ==========


.flex-container {
   padding: 0;
   margin: 0;
   list-style: none;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   -webkit-flex-flow: row wrap;
   justify-content: flex-start;
   list-style: none;
}

.flex-item {
   padding: 0 5px;
   width: 20%;
   height: 100%;
   margin-top: 10px;

   background-color: #C2B59B;
   background-clip: content-box;
   height: auto;
}

#contact .flex-item {
   width: 33.3%;
   font-size: 1.7rem;
}
*/



a.home-page-story h3 {
    /* font-family: Marcellus, georgia; */
    font-family: 'open sans', arial, sans-serif;
    font-size: 1.1rem;
    color: white;
    background: #3459A3;
    padding: 5px 8px;
    margin: 0px;
    letter-spacing: normal;
    font: 20px 'Belgrano';
}



/*
   =====================
   NEWS
   =====================
*/

a.home-page-story {
   color: #666;
   border-bottom-width: 0px !important; /* SRB 2/4/19 */
}

a.home-page-story img {
   width: 100%;
}

a.home-page-story p {
   padding: 8px;
   border-style: solid !important;
   border-color: #ccc !important;
   border-width: 0 1px 1px 1px;
}

a.home-page-story h3 {
   font-family: 'open sans', arial, sans-serif; /* SRB 14/4/18 */ 
   font-size: 1.1rem; 
   color: white; 
   background: #3459A3; 
   padding: 5px 8px;
   margin: 0px;
   letter-spacing: normal;
   font: 20px 'Belgrano'; /* SRB 10/6/20 */
} 

p.news-headline {
   font-size: 22px;
   color: #333;
   padding: 7px;
   background-color: #DED2BA;
   line-height: 1.2em;
   line-height: 25px;
}

.news-pagination ul li {
   list-style-type: none;
}

.news-date {
   display: inline;
   font-size: 1.4rem;
   text-shadow: none; 
   margin: 20px 0;
   padding: 3px;
   border-style: solid;
   border-width: 1px 0; 
   border-color: gray;
}


/* Disabled by SRB 29/11/20 --- don't think it's used anywhere on the HRKP site 
.span-tag {
   font-size: 1.4rem;
   padding: 2px 8px 2px 8px;
   background: #C2B59B;
   color: #222;
   margin: 5px 5px 5px 0px;
   display: inline-block;
   border-bottom-width: : 0;
   text-decoration: none;
}
*/

.span-tag {
   text-decoration: none;
}

/*
   ==========
   TYPOGRAPHY
   ==========
*/

h1, h2, h3, h4, p, a, li, td, label, .site-subtitle, .pricing-table .title, .pricing-table .price {
   color: #BD1E2C; 
}

/* SRB 8/2/22
p, a {
   padding: 10px 0;
}
*/

h1, h2, h3, h4 {
   font-family: 'Saira Stencil One', skranji, georgia, serif; 
   color: #D32121;
   font-weight: 700; 
}

h1 {
   font-size: 3.5rem; 
   margin: 0;
   padding: 10px 0;
}

h2 {
   font-size: 3rem;
   padding: 10px 0;
   color: #58595B;
}

h3 {
   font-size: 2.4rem; 
   padding: 10px 0; /* was 20px SRB 28/7/19 */
   font-smoothing: antialiased !important;
   color: #BD1E2C;
}

h4 {
   font-size: 2.4rem; 
   padding: 16px 0;
   font-smoothing: antialiased !important;
}


p, a, li, td, label, input, .input, blockquote, figcaption {
   font-family: 'Open Sans', arial, sans-serif; 
   font-size: 1.6rem; 
   line-height: 2.4rem;
   color: #444;
}

p {
   margin: 20px 0;
}

nav a {
   /* font-family: 'Cormorant Garamond', serif; */
   font-family: 'Open Sans', arial, serif; /* SRB 20/12/20 */
   font-size: 2.1rem;
   font-size: 1.7rem; /* SRB 09/02/22 */
   font-size: 1.5rem; /* SRB 01/05/22 */
   /* text-shadow: 0 0 0.1px #000; --- disabled SRB 20/12/20 */
   line-height: 2.8rem;
   text-decoration: none;
}

figcaption {
   display: block;
   font-size: 1.6rem; 
   font-style: italic;
   line-height: 2.9rem; 
   font-style: italic; 
   background-color: #C2B59B; 
   background-color: #DED2BA; /* SRB 11/11/20 */ 
   border: 0px solid silver; 
   border-top-width: 0px;
   padding: 6px 3px;
   padding-left: 10px; 
}

/* This is used for the panels at the bottom of each page detailing the fonts used
   Can probably be removed after going live */
p.note {
   font-style: italic;
   background-color: cadetblue;
   color: white;
   padding: 10px;
   font-size: 1.6rem;
}

p.logo {
   background-color: #BD1E2C;
   background-color: #9B0000;
   color: #FAF9DB;
   text-align: center;
   padding: 0;
   line-height: 176px;
   font-size: 150px;
   transition: 0.5s;
}

p.logo:hover {
   opacity: 0.9;
}

ul {
   margin: 10px 20px 10px;
}

li {
   margin: 2px 0;
}

p.highlight {
   border-left: 2px solid #58595B;
   padding-left: 30px;
   margin-bottom: 30px;
}

/* SRB 8/2/22
#footer a,
footer a {
   border-bottom: none;
}
*/

footer a.cta {
    font-size: 11px;
    border: 1px solid silver;
    padding: 4px 6px;
    border-radius: 5px;
    margin-top: 14px;
    display: inline-block;
    line-height: normal;
}

header.social-icons {
   text-align: right;
}

#contact h1,
#contact h2,
#contact p,
#contact a,
#contact label
 {
   color: white;
}

form p,
form a {
   font-size: 1.4rem; 
   line-height: 2rem; 
}


/*
   =============
   PRICING TABLE
   =============
*/


pricing-table .price {
   font-size: 1.5rem;
}

.pricing-table .title {
   color: #eee;
}

.pricing-table {
    border: solid 1px #dddddd;
    margin-left: 0;
    margin-bottom: 1.25rem;
}

.pricing-table .title {
    background-color: #1C4579;
    padding: 0.9375rem 1.25rem;
    text-align: center;
    color: #eeeeee;
    font-weight: normal;
    font-size: 1.5rem;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

.pricing-table * {
    list-style: none;
    line-height: 1;
}

.pricing-table .price {
    background-color: #f6f6f6;
    padding: 0.9375rem 1.25rem;
    text-align: center;
    color: #1C4579;
    font-weight: normal;
    font-size: 1.7rem;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

/*
   ============
   CONTACT FORM
   ============
*/

label {
   margin-top: 5px;
   margin-right:10px;
   text-align: center;
   width: 80px;
   line-height: 25px;
}
		
.input {
   padding: 5px;
   margin: 5px 0px;
   border: 1px solid #b9bdc1;
   width: 400px;
   background: #eee;
   margin-bottom: 15px;
}

input[type="submit"] {
   padding: 5px 15px;
}   

input[type="submit"]:hover {
   background: #fff;
   transition-duration: 200ms;
}   


div.url {
   display: none;
}



/*
   =====================
   VOLUNTEER APPLICATION
   =====================
*/

#volunteer-form {
   max-width: 550px;
   padding: 30px;
   overflow: auto;
   border: 3px solid #d88;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
   margin: 20px auto;
}

#volunteer-form input,
#volunteer-form select {
   padding: 5px;
   margin: 5px 0px;
   border: 1px solid #b9bdc1;
}

#volunteer-form input[type=text],
#volunteer-form input[type=email] {
   width: 100%;
}

#volunteer-form input[type=submit] {
   padding: 10px 20px;
}

#volunteer-form label {
   display: block;
   float: left;
   color: white;
   margin-top: 5px;
   margin-right: 10px;
   text-align: left;
   width: 100%;
}

#volunteer-application input[type="text"], 
#volunteer-application input[type="email"], 
#volunteer-application textarea {
    text-align: left;
    color: #666;
    font-size: 1em;
}


/*
   =================
   NAVIGATION PANELS
   =================
*/

div.nav-panel {
   position: relative;
   width: 100%;
}

div.nav-panel h2 {
   position: absolute;
   top: 40%;
   width: 100%;
   color: rgba(255, 255, 255, 0.8);
   font-size: 35px;
   text-transform: uppercase;
   text-shadow: #444 3px 3px 3px;
}



/* 
   ================================
   BUTTONS
   ================================
*/

button,
a.button {
   display: inline-block;
   margin: 10px 0;
   padding-top: 0.875rem;
   padding-right: 1.75rem;
   padding-bottom: 0.9375rem;
   padding-left: 1.75rem;
   background-color: #888;
   border-color: #055;
   color: #eee;
   transition: background-color 300ms ease-out;
   border-width: 0;
}

a.small-button {
   font-size: 14px;
   padding: 6px 10px;
}

button,
a.button:hover {
   background: #d32121;
   border-color: #f52;
}

input[type=submit].button {
   background: #888;
   padding: 10px 20px;
   color: white;
   border: #c2b59b 2px solid;
   border-radius: 5px;
   cursor: pointer;
}

input[type=submit].button:hover {
   background: #666;
}



/* 
   ================================
   MESSAGES 
   ================================
*/

.success, 
.failure {
   /* font-weight: bold;*/
   font-size: 1.6rem;
   display: inline; 
   padding: 6px; 
   border-radius: 4px; 
   border-width: 2px; 
   border-style: solid; 
   margin: 3px;
   background: #066;
}

.success {
   color: white; 
}

.failure {
   color: white; 
   background-color: #BD1E2C;
}

.error {
   font-family: verdana, arial, sans-serif;
   font-size: 11px;
   color: white; 
   background-color: #BD1E2C; 
   margin: 0 5px; 
   padding: 2px 10px; 
   border-radius: 10px;
}













.jubilee-red {
   color: #D32121;
}

.jubilee-blue {
   color: #1C4579;
}

.owl-wraper, 
.owl-wrapper-outer,
.owl-item item {
   min-height: 520px;
}

#hero-image {
   display: none;
}

/*
   ===============================

   R E S P O N S I V E   S T U F F

   ===============================
*/


/* ==========
   HERO STUFF
   ==========
*/

@media only screen and (max-width: 1820px) {

   #carousel-overlay img {
      height: 750px;
      margin-top: 70px;
   }
}

@media only screen and (max-width: 1720px) {

   #carousel-overlay img {
      height: 650px;
      margin-top: 80px;
   }
}

@media only screen and (max-width: 1540px) {
   #carousel-overlay img {height: 600px;}
}

@media only screen and (max-width: 1440px) {
   #carousel-overlay img {height: 550px;}
}

@media only screen and (max-width: 1340px) {
   #carousel-overlay img {height: 500px; margin-top: 70px;}
}

@media only screen and (max-width: 1220px) {
   #carousel-overlay img {height: 450px; margin-top: 70px;}
}

@media only screen and (max-width: 1180px) {
   #carousel-overlay img {height: 430px; margin-top: 70px;}
}

@media only screen and (max-width: 1080px) {
   #carousel-overlay img {height: 420px; margin-top: 70px;}
}


@media only screen and (max-width: 1023px) {

   .featurebox {
      width: 100%;
      text-align: center;
   }

   #site-title {
      font-size: 2.5rem;
   }

   #carousel-overlay img {
      margin-top: 120px;
   }
}



@media only screen and (max-width: 900px) {

   #contact nav#panel h1 {
      font-size: 1.7rem;
      line-height: 2.2rem;
   }

   div.nav-panel h2 {
      font-size: 25px;
   }

   .more-padding {
      padding: 15px;
   }

   footer p,
   footer a {
      font-size: 1.4rem;
      line-height: 2.2rem;
   }

   #carousel {
      display: none !important;
   }
   
   #hero-image {
      display: block;
      min-width: 100%;
      overflow: hidden;
   }
}



@media only screen and (max-width: 800px) {

   h4 {
      font-size: 22px;
   }

   #site-title {
      line-height: 3rem;
   }
}



@media only screen and (min-width: 720px) {


   footer {
      text-align: left;
   }

   .social-icons {
      text-align: right;
   }


}



@media only screen and (max-width: 720px) {

   h4 {
      font-size: 22px;
   }

   /* Centre the last panel - assuming there are an odd number of panels
      Disable this if there are an even number of panels */
   nav#panel li.flex-item:nth-last-child(1):nth-child(odd) {
      margin: 10px auto;
   }

}



@media only screen and (max-width: 639px) {


   .text-right,
   .text-left,
   .social-icons {
      text-align: center;
   }

   li {
      list-style-type: none;
   }

   #contactform {
      width: 100%;
      max-width: none;
   }

   .testimonial {
      padding: 20px 4%;
      font-size: 22px;  
      line-height: 32px;
      width: 94%;
      margin: 10px auto;
   }

   h2 {
      font-size: 28px;
   }

   h3{
      font-size: 24px;
   }

   p.bio {
      text-align: left;
   }

   #kiln-menu a {
      width: 100%;
   }

   blockquote {
      text-align: left;
   }

   .hero-text {
      top: 60%;
      left: 20%;
      transform: translate(-12%,-50%);
   }

   #contact {
      width: 50%;
   }

   /* EXPERIMENTAL HERO STUFF ++ SRB 26/11/20 */
   .hero-text {
      top: 30%;
      left: 10%;
      width: 80%;
      transform: none;
   }

   header .columns {
      padding-top: 5px;
      padding-bottom: 5px;
   }

/* SRB 12/2/22
   header .large-2 {
      width: 16.66%;
      padding: 5px;
   }

   header .large-8 {
      width: 66.66%;
      padding: 5px;
   }
*/

   #site-title {
      font-size: 1.7rem;
      line-height: 2.2rem;
   }

   .menu-link {
      font-size: 1.2rem;
      line-height: 1.5rem;
      padding: 13px 7px 7px 7px;
   }

   
}



@media only screen and (max-width: 530px) {
   label {
      text-align: center;
      width: 100%;
   }

   .input {
      width: 100%;
   }

}



 /*
@media only screen and (max-width: 420px) {
   
   .hero-text p {
      font-size: 2.5rem;
      line-height: 3.5rem;
   }

}

*/
@media only screen and (max-width: 375px) {
   
   .hero-text {
      top: 70%;
      left: 10%;
      transform: translate(-6%,-50%);
   }

   /* EXPERIMENTAL HERO STUFF ++ SRB 26/11/20 */
   .hero-text {
      top: 45%;
      left: 10%;
      width: 80%;
      transform: none;
   }


}