:root {
    --mys-color-palatte-purple: #683968;
    --mys-color-palatte-blue: #4A718D;
    --mys-color-palatte-blue: #34586E;
    --mys-color-palatte-lightblue: #2D728F;
    --mys-color-palatte-cream: #F6F6E9;
    --mys-color-palatte-cream: #F6E3C4;
    --mys-color-palatte-gold: #DFB160;
    --mys-color-palatte-pink: #FFACBC;
    --mys-color-palatte-green: #A3C14A;

    --body-max-width: 100%;
    --body-width: 100%;
    --body-bg-color: #363640;
    --body-bg-color: #FFF;
    --body-font-color: #515158;

    --main-margin-top: 10px;
    --main-padding: 10px;
    --main-width: 100%;

    --main-a-colour: #cddc39;

    --logo-color: #DDDDDD;
    --logo-color: #1C94D0;
    --logo-color: #683968;
    --logo-color: #2D728F;

    --logo-class-color-yogasports: #2D728F;
    --logo-class-color-bikram: #A00A00;

    --heading-color: #DDDDDD;
    --heading-color: rgba(255,255,255,0.6);
    --heading-color: #1C94D0;
    --heading-color: #D3714A;
    --heading-color: #5B64E3;
    --heading-color: #EC7E31;
    --heading-color: #2D728F;

    /*--nav-a-color: #AB3428;
    --nav-a-bg-color: #f2f2f2;

    --nav-a-hover-color: #f2f2f2;
    --nav-a-hover-bg-color: #3B8EA5;*/

    --nav-a-hover-color: #AB3428;
    --nav-a-hover-bg-color: #f2f2f2;

    --nav-a-hover-color: #3B8EA5;
    --nav-a-hover-bg-color: #f2f2f2;

    --nav-a-color: #f2f2f2;
    --nav-a-bg-color: #50AEDD;

    --table-th-border-size: 3px;
    --table-th-border-style: solid;
    --table-th-border-color: gray;
    --table-th-border-color: #2D728F;

    --table-td-border-size: 1px;
    --table-td-border-style: solid;
    --table-td-border-color: gray;
    --table-td-border-color: #2D728F;

    --table-tableKey-a-colour: #2D728F;
    --table-tableFootnote-a-colour: #2D728F;

    --fieldset-border-size: 1px;
    --fieldset-border-style: solid;
    --fieldset-border-color: #2D728F;
}


  
@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 300;
    src: local("Roboto Light"),local("Roboto-Light"),url(fonts/Roboto-300.woff2) format("woff2"),url(fonts/Roboto-300.woff) format("woff"),url(fonts/Roboto-300.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 400;
    src: local("Roboto"),local("Roboto-Regular"),url(fonts/Roboto-400.woff2) format("woff2"),url(fonts/Roboto-400.woff) format("woff"),url(fonts/Roboto-400.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"),local("Roboto-Medium"),url(fonts/Roboto-500.woff2) format("woff2"),url(fonts/Roboto-500.woff) format("woff"),url(fonts/Roboto-500.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 700;
    src: local("Roboto Bold"),local("Roboto-Bold"),url(fonts/Roboto-700.woff2) format("woff2"),url(fonts/Roboto-700.woff) format("woff"),url(fonts/Roboto-700.ttf) format("truetype");
}

@font-face {
    font-family: 'BrushScriptMT';
    src: url('fonts/BrushScriptMT.woff2') format('woff2'),
        url('fonts/BrushScriptMT.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Magnolia-Script';
    font-style: normal;
    font-weight: normal;
    src: local('Magnolia-Script'), url('fonts/Magnolia_Script.woff') format('woff');
}

body {
    margin: 0 auto;
    padding: 0;
    width: var(--body-width);
    overflow: none;

    background-color: var(--body-bg-color);
    color: var(--body-font-color);
    font-weight: 400;
    font-size: 14px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    line-height: 1.2857;
}

header {
    float: left;
    width: 100%;
}

main {
    margin-top: var(--main-margin-top);
    padding: var(--main-padding);   
    max-width: var(--main-width);
}

footer {
    max-width: var(--main-max-width);
    width: 100%;
    float: left;
    text-align: center;
}

h2, h3, h4 { 
    font-size: 1.5em
    color: var(--heading-color);
}

h1 {
    color: #3399DD;
    padding-top: 10px;
    font-family: 'Titillium Web', sans-serif;
    font-size: 1.8em;
}

h2.classComingSoon, h3.tellMeMore { 
    text-align: center;
}

a {
    color: var(--main-a-colour);
    color: var(--nav-a-bg-color);
    text-decoration: none;
}
  
    a:hover {
      text-decoration: underline;
    }   

.border {
    border:1px solid black;
}

.imageRight { 
    float: right; 
    padding: 5px 5px 5px 10px;
}

.imageLeft { 
    float: left; 
    padding: 5px 10px 5px 5px;
}

#websiteLogoText {
    margin:10px 20px; 
    float: left; 
    color: var(--logo-color);
    font-family: 'BrushScriptMT', cursive;
    font-size:7em; 
}

#websiteLogoImage {
    margin:30px 0px 10px 10px;
    width: 98%;
    /*float: left;*/
}

nav {
    margin: 0 auto;
    padding-top: 0px;
    width: 100%;
    float: left;
    display: block;
}

/* old nav bar css */
nav.solidBar {
    background-color: var(--nav-a-bg-color);
    border-top:  var(--fieldset-border-size) var(--fieldset-border-style) var(--fieldset-border-color);
    border-bottom:  var(--fieldset-border-size) var(--fieldset-border-style) var(--fieldset-border-color);
    align-items: center;
}

/* set up for neon nav bar css*/
nav.neonBar1 {
    background-color: none;
    font-family: 'Dancing Script', cursive;
    font-family: 'Tilt Neon', cursive;
    /*font-family: 'Poiret One', cursive;*/
    font-size: 35px;
}

nav.neonBar2 {
    background-color: none;
    font-family: 'Dancing Script', cursive;
    font-size: 35px;
}

.solidBar #navbarMenuItems {
    margin: auto auto;
    width: 880px;
}

.neonBar1 #navbarMenuItems {
    margin: 0 auto;
    width: 1100px;
}

.neonBar2 #navbarMenuItems {
    margin: 0 auto;
    width: 1100px;
}

h1.neon {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    /*font-family: 'Comfortaa', cursive;*/
    font-family: 'Dancing Script', cursive;
    font-size: 80px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
    /*animation: blinker 2.5s linear infinite;*/
  }
  
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

  nav.neonBar1 a {
    margin: 0 2px;
    padding: 14px 16px;
    float: left;

    color: rgb(165, 15, 206);
    
    text-align: center;
    text-decoration: none;
  }
  
  nav.neonBar1 a:hover { 
    color: var(--mys-color-palatte-lightblue);
    
    text-decoration: none;
}

nav.neonBar2 a {
    margin: 0 2px;
    padding: 14px 16px;
    float: left;

    color: rgb(165, 15, 206);
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--mys-color-palatte-purple), 0 0 20px var(--mys-color-palatte-purple), 0 0 25px var(--mys-color-palatte-purple), 0 0 30px var(--mys-color-palatte-purple), 0 0 35px var(--mys-color-palatte-purple);
    
    text-align: center;
    text-decoration: none;
  }
  
  nav.neonBar2 a:hover { 
    color: white;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--mys-color-palatte-lightblue), 0 0 20px var(--mys-color-palatte-lightblue), 0 0 25px var(--mys-color-palatte-lightblue), 0 0 30px var(--mys-color-palatte-lightblue), 0 0 35px var(--mys-color-palatte-lightblue);
    
    text-decoration: none;
}

.neonBar3 {
    animation: neonAnim 2s alternate-reverse infinite;
    color: #683968;
    font-family: Cursive;
    font-size: 72px;
}
@keyframes neonAnim {
from {
    text-shadow:
      0 0 10px rgba(104, 57, 104, .7),
      0 0 40px rgba(104, 57, 104, .7),
      0 0 100px rgba(104, 57, 104, .7);
  }
  to {
    text-shadow:
      0 0 5px rgba(104, 57, 104, .7),
      0 0 20px rgba(104, 57, 104, .7),
      0 0 60px rgba(104, 57, 104, .7);
  }
}
    /* Style the links inside the navigation bar */
    nav.solidBar a {
        margin: 0 2px; 
        padding: 4px 16px;
        
        background-color: var(--nav-a-bg-color);
        color: var(--nav-a-color);
        text-align: center;
        text-decoration: none;
        font-size: 20px;
	display: inline-block;
    }

        /* Change the color of links on hover */
        nav.solidBar a:hover {
            background-color: var(--nav-a-hover-bg-color);
            color: var(--nav-a-hover-color);
            text-decoration: none;
        }

        /* Add a color to the active/current link */
        nav.solidBar a.active {
            background-color: #4CAF50;
            color: white;
        }


fieldset{
    max-width: 1160px;
    border:  0 var(--fieldset-border-style) var(--fieldset-border-color);
    margin: auto;
    overflow: auto;
}

.divider {
    border:  var(--fieldset-border-size) var(--fieldset-border-style) var(--fieldset-border-color);
}

.divider2 {
    background-color: var(--nav-a-bg-color);
    height: 3px;
}


.underConstruction {
    max-width: 1180px;
    border:  var(--fieldset-border-size) var(--fieldset-border-style) var(--fieldset-border-color);
    text-align: center;
}

#title {
    display: inline;
    font-size: 3em;
}

#subtitle {
    display: inline;
    font-size: 0.5em;
}

#banner {
    float: right;
    font-size: .75em;
}

#banner h2, #banner p {
    margin-top: .5em;
    margin-bottom: .5em;
}

#banner .underConstruction {
    padding: 10px;
    max-width: 100%;
    border:  var(--fieldset-border-size) var(--fieldset-border-style) var(--fieldset-border-color);
    text-align: center;
}

table {
    margin: 0 auto;
    width: 40%;
    text-align: center;
}

th, td {
    padding: 2px;
}

th {
    border-bottom: var(--table-th-border-size) var(--table-th-border-style) var(--table-th-border-color);
    font-size: 1em;
}

td {
    border-bottom: var(--table-td-border-size) var(--table-td-border-style) var(--table-td-border-color);
}

td:nth-child(1) { 
    font-weight: bold;
    text-align: left;
}
x
.tableKey td { 
    text-align: center;
    font-weight: normal;
}

.tableKey img { 
    vertical-align: middle;
}

.tableKey a { 
    color: var(--table-tableKey-a-colour);
}


.introSpecialSpot {
    margin: 5px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    font-family: 'Magnolia-Script';
    font-size: 1.1em;
    color: var(--mys-color-palatte-cream);
    text-align: center;
    background: var(--mys-color-palatte-purple);
}
.introSpecialSpot p {
    margin: 0;
    padding: 0;
}
.introSpecialSpot .line {
    padding-top: .2em;
    padding-bottom: .2em;
}
.introSpecialSpot .line1 {
    padding-top: 1.8em;
    font-size: 1.5em;
}

.introSpecialSpot .line2 {
    font-size: 2em;
}

.introSpecialSpot .line3 {
    font-size: 1.1em;
}

.comeTryClass {
    margin: 0 auto;
    width: 70%;

}

.timetable {
    width: 70%;
    table-layout: fixed;
}

.timetable th {
    width: 9.9%;
}

.timetable td {
    vertical-align: middle
}

/*.timetablePrintable {
    width: 2048px;
}*/

.timetablePrintableBlack {
    color: black;
}

.timetablePrintableBlack th {
    border-color: black;
}

.timetablePrintableBlack td {
    border-color: black;
}

.timetablePrintableHeaderSpacer {
    color: white;
}

#classIcons {
    font-size: .8em;
}

#classIcons h2 {
    margin-bottom: 0;
}

.tablePublicHoliday td {
    font-weight: .8em;
    text-align: center;
    font-weight: bold;
}

.tableFootnote td {
    padding-top: 1em;
    text-align: center;
    font-weight: normal;
}

.tableFootnote li {
    padding: 2px;
    text-align: left;
}


.tableFootnote a { 
    color: var(--table-tableFootnote-a-colour);
}

#priceList { 
    width: 50%;
}

#priceList td { 
    padding: 5px;
}


.subText {
    font-size: smaller;
    font-weight: bold;
}



.eventGrid, .pageGrid2Col {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    margin-right: auto;
    margin-left: auto;
    padding:1em; 
    justify-items: center;
    text-align: center;
}

.forcedInline {
    display: inline;
}

.centerVerticalContainer {    
    position: relative;
    top: 0px;
    left: 0px;
}
  
.centerVertical {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.socialMediaLinks img, .socialMediaLinks span {
    vertical-align: middle;
}

.socialMediaLinks span {
    font-size:2.5em
}

.socialMediaLinksBanner span { 
    font-size:1.5em;
}

.socialMediaLinks a {
    color: black;
}
    .socialMediaLinks a:hover {
        color: black;
    }

.centerText, .eventTitle, .pageGridTitle {
    text-align: center;
}

.leftText {
    text-align: left;
}

.rightText {
    text-align: right;
}

.justifyText {
    text-align: justify;
}

.gridContainer, .bookingsPage .gridContainer {
    margin: 0;
    padding: 0;
    width: 100%;
    /*height: 100%;*/
    position: relative;
  }

  .bookingsPage .gridContainer {
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
  }

.pageGrid {
    display: grid; 
    position: relative;
    grid-template-columns: repeat(1, 1fr); 
    margin-right: auto;
    margin-left: auto;
    padding: 1em; 
    justify-items: center;
    text-align: center;
}

.pageGrid img {
    padding: 5px;
}

.pageGrid1 { 
    grid-template-columns: repeat(1, 1fr); 
}

.pageGrid2 { 
    grid-template-columns: repeat(2, 1fr); 
}

.pageGrid3 { 
    grid-template-columns: repeat(3, 1fr); 
}

.pageGrid4 { 
    grid-template-columns: repeat(4, 1fr); 
}

.pageGrid5 { 
    grid-template-columns: repeat(5, 1fr); 
}

.pageGrid6 { 
    grid-template-columns: repeat(6, 1fr); 
}

.pageGrid7 { 
    grid-template-columns: repeat(7, 1fr); 
}  

.photoGrid {
    display: grid; 
    position: relative;
    grid-template-columns: repeat(1, 1fr); 
    margin-right: auto;
    margin-left: auto;
    padding:1em; 
    justify-items: center;
    text-align: center;
}

.photoGrid img {
    padding: 5px;
}

.photoGrid1 { 
    grid-template-columns: repeat(1, 1fr); 
}

.photoGrid2 { 
    grid-template-columns: repeat(2, 1fr); 
}

.photoGrid3 { 
    grid-template-columns: repeat(3, 1fr); 
}

.photoGrid4 { 
    grid-template-columns: repeat(4, 1fr); 
}

.photoGrid5 { 
    grid-template-columns: repeat(5, 1fr); 
}

.bookingsPage fieldset {
    width: auto;
}

.bookingsPage fieldset fieldset {
    border: none;
}

.bookingsPage fieldset #priceList {
    width: auto;
    border: none;
}

.sendMessage { 
    margin: auto;
    width: 30%;
}

.sendMessage h3{ 
    margin-bottom: 0;
}

.underConstruction .sendMessage { 
    width: 100%;
}

.underConstruction .pageGrid2Col { 
    width: 70%;
}


#timeslotContent {
    max-width: 750px;
    margin: 0 auto;
    padding: 10px;
    border: 1px #FFF solid;
}

#schedule {
    margin: 10px 2px;
    width: 99%;
    height: 500px;
}

.swiper {
    width: 300px;
    height: 100%;
  }

.swiper-slide {
    margin-bottom: 20px;
}

.swiper-button-prev {
    color: #AAAAAA !important;
}

.swiper-button-next {
    color: #AAAAAA !important;
}

.row {
    display: flex;
}

.column {
    flex: 50%;
}

header {
    position: fixed;
    top: 0;
    background-color: #FFFFFF;
    z-index: 999;
}

main {
    margin-top: 100px;
}

.pricingImg {
    margin: auto;
}

@media only screen and (max-width: 800px) {
    .pageGrid {
        display: block; 
        /* position: relative;
        grid-template-columns: repeat(1, 1fr); */
        margin-right: auto;
        margin-left: auto;
        padding: 1em; 
        justify-items: center;
        text-align: center;
    }

    .pricingImg {
        width: 100%;
    }
  }