::-webkit-scrollbar {
  background: transparent;
  width: 15px;
}
::-webkit-scrollbar-thumb{
  background: #f48120;
  border-radius: 10px;
  border: 5px solid #ffffff;
}
::-webkit-scrollbar-track{
  width: 10px;
  background: #ffffff;
  border: 5px solid #ffffff;
}
::selection {
    background-color: #f48120;
    color: #ffffff;
}
::-o-selection{
    background-color: #f48120;
    color: #ffffff;
}
::-moz-selection{
    background-color: #f48120;
    color: #ffffff;
}
::-ms-selection{
    background-color: #f48120;
    color: #ffffff;
}
::-webkit-selection{
    background-color: #f48120;
    color: #ffffff;
}
::placeholder{
  color: black;
  opacity: 0.3;
}
:-ms-input-placeholder{
  color: black;
}
::-ms-input-placeholder{
  color: black;
}
body{
  margin: 0;
  padding: 0;
}
body.noScroll{
  overflow: hidden;
}
:root{
  --slide2BG: url("../sources/indexCarousel/carrefour.jpg");
  --slide3BG: url("../sources/indexCarousel/playzone_open.jpg");
  --slide4BG: url("../sources/indexCarousel/foodcourt.jpg");
  --slide5BG: url("../sources/indexCarousel/maasai_market.jpg");
  --slide1BG: url("../sources/indexCarousel/homeBG.jpg");
  --wideTile: url("../sources/homeTiles/social_media.jpg");
  --wideTileSQ: url("../sources/homeTiles/social_media_SQ.jpg");
  --tallTile: url("../sources/homeTiles/stay_safe.jpg");
  --sqTile1: url("../sources/homeTiles/playzone_home.jpg");
  --sqTile2: url("../sources/homeTiles/explore.jpg");
}

@media screen and (min-width: 50px) and (max-width: 900px){
  div#header{
    display: none;
  }
  div#resHeader{
    position: fixed;
    background: #ffffff;
    z-index: 3;
  	width: 100%;
  	height: 70px;
  	top: 0;
  	left: 0;
    box-shadow: 0px 0px 30px -10px #323232;
    overflow: hidden;
    transition: color 0.3s, height 0.3s, border-bottom 0.5s;
  }
  div#resHeaderLogo{
    opacity: 1;
    position: absolute;
    top: -10px;
    left: -30px;
    background-image: url("../sources/system/SF_logo_only.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 90px;
    height: 90px;
  }
  div#resHeaderTitleCon{
    position: absolute;
    display: table;
    width: calc(100% - 120px);
    height: 70px;
    text-align: left;
    vertical-align: middle;
    margin: 0 60px;
  }
  div#resHeaderTitle{
    display: table-cell;
    height: auto;
    color: #6d6e70;
    font-family: montExtraBold;
    font-size: 1.5em;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: middle;
    letter-spacing: 5px;
    padding-top: 2px;
    padding-left: 15px;
  }
  div#drawerIcon{
    position: absolute;
    top: 22px;
    right: 20px;
    background-image: url("../sources/system/drawerIcon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 30px;
    height: 24px;
  }
  div#closeIcon{
    position: absolute;
    top: 28px;
    right: 28px;
    background-image: url("../sources/system/closeIcon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 30px;
    height: 30px;
  }
  div#drawerIcon:hover, div#closeIcon:hover{
    cursor: pointer;
  }
  div#headerDrawer{
    z-index: 5;
    position: fixed;
    background: #ffffff;
    background-image: url("../sources/system/headerGraphicR.svg");
    background-attachment: absolute;
    background-position: bottom left;
    background-size: auto 250px;
    background-repeat: no-repeat;
  	width: 100vw;
  	height: 100%;
  	top: 0;
  	left: 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.5s;
  }
  #headerDrawer.active{
    transform: translateY(0%);
    transition: transform 0.5s;
  }
  div#drawerLinksCon{
    top: 60px;
    left: 0;
    position: absolute;
    width: calc(100% - 7.5vw);
    height: auto;
    padding: 0 7.5vw;
    transition: left 0.5s;
  }
  #drawerLinksCon.active{
    left: -100vw;
    transition: left 0.5s;
  }
  div#drawerStoreLinksCon{
    top: 60px;
    left: 100vw;
    position: absolute;
    width: calc(100% - 7.5vw);
    height: auto;
    padding: 0 7.5vw;
    transition: left 0.5s;
  }
  #drawerStoreLinksCon.active{
    left: 0;
    transition: left 0.5s;
  }
  div#drawerBackButton{
    opacity: 1;
    display: inline-block;
    color: #f48120;
    font-family: montExtraBold;
    font-size: 1.5em;
    line-height: 2em;
    text-transform: uppercase;
    letter-spacing: 5px;
    transition: opacity 0.3s;
  }
  div#drawerBackButton:hover{
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  a.drawerLinks, a.drawerStoreLinks{
    opacity: 1;
    color: #6d6e70;
    text-decoration: none;
    font-family: montExtraBold;
    font-size: 1.5em;
    line-height: 2em;
    text-transform: uppercase;
    letter-spacing: 5px;
    transition: opacity 0.3s;
  }
  a.drawerLinks:hover, a.drawerStoreLinks:hover{
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  .drawerLinks.active, .drawerStoreLinks.active{
    opacity: 0.5;
    color: #f48120;
    pointer-events: none;
  }
  div#drawerSocialCon{
    bottom: 30px;
    left: 7.5vw;
    position: absolute;
    width: auto;
    height: auto;
  }
  div.content{
    z-index: 1;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: #ffffff;
    color: #6d6e70;
    text-align: center;
    box-shadow: 0px 0px 50px -15px #323232;
  }
  .content.shadowless{
    box-shadow: none;
  }
  div#psuedoPadding{
    z-index: 1;
    position: relative;
    width: 2px;
    height: 80vw;
  }
  div#scrollDownIconHolder{
    display: none;
  }
  div#backToTopCon{
    background-image: url("../sources/system/top.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 45px;
    height: 46px;
  }
  a#backToTop{
    z-index: 3;
    opacity: 1;
    position: fixed;
    right: 40px;
    bottom: 0px;
    transform: translateY(100px);
    text-decoration: none;
    transition: opacity 0.3s, transform 0.8s;
  }
  #backToTop.active{
    transform: translateY(-30px);
    transition: transform 0.8s;
  }
  a#backToTop:hover{
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  div.resTitleCon{
    display: inline-block;
    position: relative;
    width: calc(100% - 15vw);
    height: auto;
    background: #f48120;
    color: #ffffff;
    font-family: montLight;
    font-size: 0.85em;
    text-align: left;
    vertical-align: top;
    padding: 7.5vw 7.5vw;
  }
  span.resTitle{
    font-family: montBold;
    font-size: 2.5em;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
  }
  span.resSubTitle{
    font-family: montLight;
    font-size: 1em;
    text-align: center;
    color: #ffffff;
  }
  span.resTitleBodyTitle{
    font-family: montBold;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: left;
    color: #ffffff;
  }
  span.resTitleBody{
    font-family: montLight;
    font-size: 1em;
    text-align: left;
    color: #ffffff;
  }
  .noRes{
    display: none;
  }
  a.uniLink{
    color: #f48120;
    text-decoration: none;
  }
  .uniLink:hover{
    opacity: 0.8;
    transition: opacity 0.3s;
  }

  /*---------------------------------------------*/

  /*Home Page*/
  #psuedoPadding.home{
    height: 90vw;
  }
  div#primeHomeBG{
    z-index: 0;
    position: fixed;
    width: 100vw;
    height: calc(90vw - 70px);
    margin-top: 70px;
    background: #ffffff;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  table#primeHomeBGInner{
    height: calc(90vw - 70px);
    width: auto;
  }
  td.primeHomeSlide{
    position: relative;
    background: #ffffff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 60px;
    background-size: contain;
    height: calc(20vw - 70px);
    max-height: calc(20vw - 70px);
    width: 100vw;
    min-width: 100vw;
  }
  div#slide1Logo, div#slide2Logo, div#slide3Logo, div#slide5Logo{
    display: none;
  }
  div#slide1Con, div#slide2Con, div#slide3Con, div#slide4Con, div#slide5Con{
    position: absolute;
    background: #ffffff;
    width: calc(100% - 15vw);
    height: calc(25vw - 30px);
    bottom: 0;
    left: 0;
    padding: 15px 7.5vw;
    text-align: left;
    vertical-align: top;
  }
  td#slide1{
    background-image: var(--slide1BG);
  }
  td#slide2{
    background-image: var(--slide2BG);
  }
  td#slide3{
    background-image: var(--slide3BG);
  }
  td#slide4{
    background-image: var(--slide4BG);
  }
  div#slide4Logo{
    display: inline-block;
    position: absolute;
    top: calc(90vw - 24vw);
    left: 7.5vw;
    height: auto;
    width: auto;
  }
  img.slideLogos{
    height: 9vw;
    margin-right: 30px;
  }
  td#slide5{
    background-image: var(--slide5BG);
  }
  div#primePrevCon, div#primeNextCon{
    position: fixed;
    top: 55vw;
    background: #ffffff;
    color: #f48120;
    font-family: montBold;
    font-size: 2em;
    text-transform: uppercase;
    border: 1px solid #f48120;
    transition: color 0.3s, background 0.3s;
  }
  div#primePrevCon{
    left: -5px;
    padding: 10px 15px 10px 15px;
  }
  div#primeNextCon{
    right: -5px;
    padding: 10px 15px 10px 15px;
  }
  div#primePrevCon:hover, div#primeNextCon:hover{
    cursor: pointer;
    background: #f48120;
    color: #ffffff;
    transition: color 0.3s, background 0.3s;
  }
  #primePrevCon.inactive, #primeNextCon.inactive{
    display: none;
  }
  span.slideTitle{
    color: #6d6e70;
    font-family: montBold;
    font-size: 2em;
    line-height: 0.9em;
    text-transform: uppercase;
  }
  span.slideSubTitle{
    color: #ffffff;
    font-family: montLight;
    font-size: 1.2em;
    line-height: 2em;
  }
  a.slideLink{
    color: #f48120;
    font-family: montReg;
    font-size: 1em;
    line-height: 2em;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  a.slideLink:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  a.carouselImgLink{
    opacity: 1;
    transition: opacity 0.3s;
  }
  a.carouselImgLink:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  div.slideNowOpen{
    display: none;
  }
  span.homeStrongerText{
    color: #f48120;
    font-family: montExtraBold;
    font-size: 2.5em;
    text-transform: uppercase;
    line-height: 0.8em;
  }
  span.homeStrongText{
    color: #6d6e70;
    font-family: montExtraBold;
    font-size: 1em;
    text-transform: uppercase;
    line-height: 0.8em;
  }
  div#homeTiles{
    width: 100%;
    height: auto;
  }
  div#squareHomeTileCon{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin-top: -4px;
  }
  div#tallHomeTile{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100vw;
    background: var(--tallTile);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -4px;
  }
  div#wideHomeTile{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  div#wideHomeTileDEFAULT{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100vw;
    background: var(--wideTileSQ);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  div#sqHomeTile1, div#sqHomeTile2{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100vw;
    background-attachment: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    white-space: nowrap;
    margin-top: -4px;
  }
  div#sqHomeTile1{
    background-image: var(--sqTile1);
  }
  div#sqHomeTile2{
    background-image: var(--sqTile2);
    background-position: top;
  }
  a.homeTitleLink{
  	display: block;
  	height: 100%;
  	background: rgba(0,0,0,0.4);
  	text-decoration: none;
  	vertical-align: bottom;
    text-align: left;
  	transition: background 0.5s;
  }
  a.homeTitleLink:hover{
  	background: rgba(0,0,0,0.15);
  	transition: background 0.5s;
  }
  div.homeTileCon{
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 40px);
    padding: 20px 20px;
  }
  span.hometileTitle{
    display: inline;
    color: #ffffff;
    font-family: montBold;
    font-size: 2.5em;
    text-transform: uppercase;
  }
  span.hometileSubTitle{
    display: inline;
    color: #ffffff;
    font-family: montLight;
    font-size: 0.9em;
  }

  /*---------------------------------------------*/

  /*Stores Page*/
  #psuedoPadding.stores{
    height: 100vh;
  }
  div#storesBG{
    z-index: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-image: url("../sources/storesBG.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: absolute;
    background-size: 250% auto;
  }
  div#storesHeaderCon{
    z-index: 1;
    position: absolute;
    top: calc(70px + 5vw);
    left: 5vw;
    right: 5vw;
  }
  div#storesTitleCon{
    display: none;
  }
  div#storesCatList{
    display: none;
  }
  div#storesButtonCon{
    display: inline-block;
    position: relative;
    width: 100%;
  }
  div#storesDropList{
    z-index: 0;
  	display: none;
  	background-color: #ffffff;
  	position: absolute;
  	top: 3em;
  	width: 50%;
  	height: auto;
    padding: 5px 15px;
    border: 1px solid #f48120;
    overflow-y: hidden;
  }
  div#storesDropList.active{
    display: block;
  }
  div#storesButton{
    z-index: 2;
    display: inline-block;
    position: relative;
    width: auto;
  	background-color: #f48120;
    color: #ffffff;
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 15px;
  }
  div#storesButton:hover{
    cursor: pointer;
  }
  a.storesCatOption{
    display: inline-block;
    color: #f48120;
    font-family: montBold;
    font-size: 1em;
    line-height: 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s, opacity 0.3s;
  }
  a.storesCatOption:hover{
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  .storesCatOption.active{
    opacity: 0.4;
    pointer-events: none;
    color: #6d6e70;
  }
  div#listOfStores{
    display: block;
    vertical-align: top;
    padding-left: 10px;
    border-left: 2px solid #f48120;
  }
  a.storeLink{
    opacity: 1;
    font-family: montReg;
    font-size: 0.9em;
    line-height: 1em;
    text-decoration: none;
    color: #6d6e70;
    transition: opacity 0.3s;
  }
  a.storeLink:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  a.storeLinkDisabled{
    pointer-events: none;
    opacity: 0.6;
    font-family: montReg;
    font-size: 0.8em;
    text-decoration: none;
    color: #6d6e70;
  }
  div#SC_services, div#SC_HnB, div#SC_speciality, div#SC_AnF, div#SC_restaurants{
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: absolute;
    background-size: auto 90%;
    height: 40vh;
    width: 100%;
    opacity: 0.1;
  }
  div#SC_services{
    background-image: url("../sources/stores/storeCatIcons/services.svg");
    bottom: -5px;
  }
  div#SC_HnB{
    background-image: url("../sources/stores/storeCatIcons/HnB.svg");
    bottom: -5px;
  }
  div#SC_speciality{
    background-image: url("../sources/stores/storeCatIcons/speciality.svg");
    bottom: -5px;
  }
  div#SC_AnF{
    background-image: url("../sources/stores/storeCatIcons/AnF.svg");
    bottom: -5px;
  }
  div#SC_restaurants{
    background-image: url("../sources/stores/storeCatIcons/restaurants.svg");
    bottom: -5px;
  }
  div.storeSecTitle{
    z-index: 1;
    position: absolute;
    bottom: 20px;
    left: 7.5vw;
    color: #ffffff;
    font-family: montBold;
    font-size: 2.5em;
    line-height: 0.9em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: left;
    height: auto;
    overflow: hidden;
  }
  table.storeBG{
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 100%;
    height: 50vh;
    padding: 20px 7.5vw;
  }
  img.storeLogo{
    height: 60px;
  }
  td.storeTitle{
    color: #ffffff;
    font-family: montBold;
    font-size: 1.8em;
    letter-spacing: 0.1em;
    line-height: 1em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
  }
  div.storeBio.res, div.storeInfo{
    display: inline-block;
    position: relative;
    width: calc(100% - 15vw);
    height: auto;
    color: #6d6e70;
    font-family: montLight;
    font-size: 0.85em;
    line-height: 1.4em;
    text-align: left;
    vertical-align: top;
    padding: 0 7.5vw;
  }
  div.storeBio.res{
    padding: 30px 0;
  }
  div.storeBio{
    display: none;
  }
  div.storeInfo{
    padding-top: 30px;
  }
  span.storeBioTitles{
    font-family: montBold;
  }
  span.storeInfoTitle{
    color: #6d6e70;
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
  }
  a.storeTargetLinks{
    opacity: 1;
    font-family: montReg;
    font-size: 1em;
    color: #f48120;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  a.storeTargetLinks:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  span.storesPhone{
    display: none;
  }
  div.storesInfoStrong{
    display: inline-block;
    background-color: #f48120;
    color: #ffffff;
    padding: 5px 15px;
    line-height: 1.5em;
  }

  /*---------------------------------------------*/

  /*Events Page*/
  div#eventSecTitleCon{
    display: none;
  }
  div#eventCurrentCon{
    position: relative;
    width: calc(100% - 15vw);
    height: auto;
    text-align: left;
    padding: 4.5vw 7.5vw;
    padding-bottom: 0;
  }
  span.noMessage{
    color: #6d6e70;
    font-family: montBold;
    font-size: 2em;
    line-height: 1em;
    text-transform: uppercase;
  }

  div.eventEntry{
    width: 100%;
    height: auto;
    text-align: left;
    padding-bottom: 60px;
  }
  div.eventSecPoster, div.eventSecPoster.portrait{
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: absolute;
    background-size: contain;
    text-align: left;
    vertical-align: top;
  }
  div.eventSecPoster{
    width: 100%;
    height: 30vw;
    max-height: 30vw;
  }
  div.eventSecPoster.portrait{
    width: 60vw;
    height: 75vw;
    max-height: 75vw;
  }
  div.eventSecInfo{
    display: inline-block;
    position: relative;
    width: 100%;
    height: auto;
    text-align: left;
    vertical-align: top;
    padding-top: 30px;
  }

  div.eventSeparator{
    position: relative;
    opacity: 0.3;
    width: 90vw;
    height: 2px;
    left: 50vw;
    margin-left: -45vw;
    background-color: #6d6e70;
  }

  span.eventTitle{
    font-family: montBold;
    font-size: 2.2em;
    line-height: 0.8em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  span.eventDuration{
    font-family: montReg;
    font-size: 1em;
    line-height: 1.5em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  span.eventSubTitle{
    font-family: montBold;
    font-size: 1em;
    line-height: 1em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  span.eventSubTitleInfo{
    font-family: montLight;
    font-size: 0.85em;
    line-height: 0.9em;
    text-align: left;
    color: #6d6e70;
  }
  a.eventLink{
    opacity: 1;
    font-family: montBold;
    font-size: 1.2em;
    text-decoration: none;
    color: #f48120;
    transition: opacity 0.3s;
  }
  a.eventLink:hover{
    opacity: 0.3;
    transition: opacity 0.3s;
  }
  div#hallsBG{
    width: 100%;
    height: auto;
    text-align: left;
    margin: 7.5vw 0;
  }
  div#hallPane{
    z-index: 2;
    display: inline-block;
    width: calc(100% - 15vw);
    height: auto;
    text-align: left;
    vertical-align: top;
    padding: 5vw 7.5vw;
    background-color: #000000;
  }
  div#eventHallTitle{
    font-family: montBold;
    font-size: 2em;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: left;
    color: #f48120;
  }
  div#eventHallSubTitle{
    font-family: montLight;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: left;
    color: #ffffff;
  }
  div.hallLink{
    display: none;
  }
  div#hallsButtonCon{
    display: inline-block;
    position: relative;
    width: 100%;
  }
  div#hallsDropList{
    z-index: 2;
  	display: none;
  	background-color: #000000;
  	position: absolute;
  	top: 3em;
  	width: 50%;
  	height: auto;
    padding: 5px 15px;
    border: 1px solid #f48120;
    overflow-y: hidden;
  }
  div#hallsDropList.active{
    display: block;
  }
  div#hallsButton{
    z-index: 2;
    display: inline-block;
    position: relative;
    width: auto;
  	background-color: #f48120;
    color: #ffffff;
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 15px;
  }
  div#hallsButton:hover{
    cursor: pointer;
  }
  div.hallLinkDrop{
    display: inline-block;
    color: #f48120;
    font-family: montBold;
    font-size: 1em;
    line-height: 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s, opacity 0.3s;
  }
  div.hallLinkDrop:hover{
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  div.hallLinkDrop.active{
    opacity: 0.4;
    pointer-events: none;
    color: #6d6e70;
  }
  div#hallDescCon{
    z-index: 1;
    position: relative;
    display: inline-block;
    width: calc(100% - 15vw);
    height: 50vh;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    vertical-align: top;
    text-align: right;
    padding: 5vw 7.5vw;
  }
  div.hallDesc{
    display: none;
    position: absolute;
    top: 3.5vw;
    right: 7.5vw;
    width: 35vw;
    font-family: montLight;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: right;
    color: #ffffff;
  }
  span.hallTitle{
    font-family: montBold;
    font-size: 2.5em;
    line-height: 1.2em;
    text-transform: uppercase;
  }
  span.hallMeaning{
    font-family: montLight;
    font-size: 0.9em;
    line-height: 0.6em;
  }
  div#newsSecCon{
    width: 100%;
    height: auto;
    text-align: left;
  }
  div#newsNav{
    display: inline-block;
    position: relative;
    width: calc(100% - 15vw);
    height: auto;
    text-align: left;
    vertical-align: top;
    padding: 0 7.5vw;
    padding-bottom: 5vw;
  }
  span#newsTitle{
    font-family: montBold;
    font-size: 4em;
    text-transform: uppercase;
    color: #f48120;
  }
  div#listofMonths{
    display: none;
  }
  div#newsButtonCon{
    display: inline-block;
    position: relative;
    width: 100%;
  }
  div#newsDropList{
    z-index: 1;
  	display: none;
  	background-color: #ffffff;
  	position: absolute;
  	top: 3em;
  	width: 50%;
  	height: 40vh;
    padding: 5px 15px;
    border: 1px solid #f48120;
    overflow-y: scroll;
  }
  div#newsDropList.active{
    display: block;
  }
  div#newsButton{
    z-index: 2;
    display: inline-block;
    position: relative;
    width: auto;
  	background-color: #f48120;
    color: #ffffff;
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 15px;
  }
  div#newsButton:hover{
    cursor: pointer;
  }
  div.newsMonthDrop{
    display: inline-block;
    color: #f48120;
    font-family: montBold;
    font-size: 1em;
    line-height: 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s, opacity 0.3s;
  }
  div.newsMonthDrop:hover{
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  .newsMonthDrop.active{
    opacity: 0.4;
    pointer-events: none;
    color: #6d6e70;
  }
  div#newsBodyPanel{
    display: inline-block;
    position: relative;
    width: calc(100% - 15vw);
    height: auto;
    padding-top: 0;
    padding-left: 7.5vw;
    padding-right: 7.5vw;
    text-align: left;
  }
  div.newsMonth{
    display: inline-block;
    opacity: 1;
    font-family: montBold;
    font-size: 1em;
    text-transform: uppercase;
    color: #6d6e70;
    transition: color 0.3s, opacity 0.3s;
  }
  .newsMonth.active{
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  div.newsMonth:hover{
    cursor: pointer;
    color: #f48120;
    transition: color 0.3s;
  }
  div.newsBody{
    display: none;
    width: 100%;
    height: auto;
    font-family: montBold;
    font-size: 1em;
    text-align: left;
  }
  div.newsPoster{
    width: 100%;
    height: 30vw;
    background-repeat: no-repeat;
    background-position: left center;
    background-attachment: absolute;
    background-size: contain;
  }
  div.newsPoster.portrait{
    width: 60vw;
    height: 75vw;
    background-repeat: no-repeat;
    background-position: left;
    background-attachment: absolute;
    background-size: contain;
  }
  span.newsEntryTitle{
    font-family: montBold;
    font-size: 2.2em;
    text-transform: uppercase;
    line-height: 0.9em;
    color: #6d6e70;
  }
  span.newsEntryDate{
    font-family: montLight;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #6d6e70;
  }
  span.newsEntrySubTitle{
    font-family: montBold;
    font-size: 1em;
    text-transform: uppercase;
    color: #6d6e70;
  }
  span.newsEntrySubText{
    font-family: montLight;
    font-size: 1em;
    color: #6d6e70;
  }
  span.newsEntryText{
    font-family: montLight;
    font-size: 0.9em;
    color: #6d6e70;
  }
  div.newsSeparator{
    display: inline-block;
    opacity: 0.35;
    background: #f48120;
    width: 100%;
    height: 4px;
  }

  /*---------------------------------------------*/

  /*Gallery Page*/
  div#galleryTitleHolder{
    width: 100%;
    background-color: #f48120;
    height: auto;
    text-align: center;
    padding-top: 95px;
    padding-bottom: 35px;
    vertical-align: middle;
  }
  span#galleryTitle{
    font-family: montBold;
    font-size: 3em;
    text-transform: uppercase;
    color: #ffffff;
  }
  span#galleryTitleSpacing{
    letter-spacing: 0.3em;
  }
  span#gallerySubTitle{
    font-family: montLight;
    font-size: 0.9em;
    color: #ffffff;
  }
  div#albumList{
    width: 100%;
    height: auto;
    line-height: 0.72em;
  }
  div.albumTileCon{
    display: inline-block;
    width: 100%;
    height: 25vh;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
  }
  div.albumLinkCon{
    width: 100%;
    height: 100%;
    position: relative;
  }
  div.albumLink{
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  a.albumLinkTarget{
    z-index: 4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  div.albumLink:hover, a.albumLinkTarget:hover{
    cursor: pointer;
  }
  div.albumTileTitleCon{
    display: table-cell;
    width: calc(100vw - 1.95vw);
    height: calc(25vh - 1.8vw);
    background-color: rgba(0, 0, 0, 0.1);
    color: #ffffff;
    vertical-align: middle;
    text-align: center;
    line-height: 1.1em;
    padding: 1vw 1vw;
    transition: background-color 0.5s, color 0.5s;
  }
  .albumLinkCon:hover .albumTileTitleCon{
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    color: #f48120;
    transition: background-color 0.5s, color 0.5s;
  }
  div.albumTileTitle{
    font-family: montBold;
    font-size: 1.5em;
    line-height: 1em;
    text-transform: uppercase;
    padding: 0vh 2vw;
  }
  div.albumTileSubTitle{
    font-family: montLight;
    font-size: 0.85em;
    padding: 0vh 2vw;
  }
  div#galleryPopUpCon{
    display: none;
    z-index: 5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.9);
    overflow: hidden;
  }
  div.galleryPopUpClose{
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 15px;
    font-family: montBold;
    font-size: 2em;
    text-transform: uppercase;
    padding: 5px 13px;
    background-color: #f48120;
    color: #ffffff;
    transition: background-color 0.3s, color 0.3s;
  }
  div.galleryPopUpClose:hover{
    cursor: pointer;
    background-color: #ffffff;
    color: #f48120;
    transition: background-color 0.3s, color 0.3s;
  }
  div.galleryPopUp{
    position: absolute;
    top: 0px;
    bottom: -15px;
    right: 0;
    left: 0;
    background: #ffffff;
    overflow-x: scroll;
    overflow-y: visible;
    transform: translateY(100vh);
    transition: transform 0.5s;
  }
  .galleryPopUp.active{
    transform: translateY(0vh);
    transition: transform 0.5s;
  }
  div.albumTitleHolder{
    width: calc(100% - 15vw);
    height: auto;
    text-align: left;
    vertical-align: center;
    padding: 5vw 7.5vw;
  }
  span.albumTitle{
    font-family: montBold;
    font-size: 3em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f48120;
  }
  span.albumSubTitle{
    font-family: montReg;
    font-size: 0.9em;
    color: #6d6e70;
  }
  div.albumCon{
    width: calc(100% - 15vw);
    background-color: #ffffff;
    font-family: montReg;
    font-size: 0.8em;
    line-height: 1.5em;
    padding: 0 7.5vw;
    padding-bottom: 7.5vw;
    -webkit-column-count: 1;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 1;
    -moz-column-gap: 0;
    -moz-column-fill: auto;
    column-count: 1;
    column-gap: 0;
    column-fill: auto;
  }
  div.galleryLandscape, div.galleryPortrait, div.gallerySquare{
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: relative;
    background-size: cover;
    width: 100%;
    margin-bottom: 6px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
  }
  div.galleryLandscape{
    height: 55vw;
  }
  div.galleryPortrait{
    height: 180vw;
  }
  div.gallerySquare{
    height: 100vw;
  }

  /*---------------------------------------------*/

  /*About Page*/
  div#aboutBG{
    z-index: 0;
    position: fixed;
    width: 100vw;
    height: 80vw;
    background-image: url("../sources/aboutBG.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
  }
  div#aboutHolder{
    display: none;
  }
  div.aboutSecOne, div.aboutSecTwo{
    display: inline-block;
    position: relative;
    width: calc(100% - 15vw);
    height: auto;
    font-family: montLight;
    font-size: 0.85em;
    line-height: 1.4em;
    text-align: left;
    vertical-align: top;
    padding: 0 7.5vw;
  }
  div.aboutSecOne{
    padding: 7.5vw 0;
  }
  div.aboutSecTwo{
    padding-bottom: 7.5vw;
  }
  span.aboutSecTitle{
    font-family: montBold;
    font-size: 2em;
    text-transform: uppercase;
    text-align: center;
    color: #6d6e70;
  }

  /*---------------------------------------------*/

  /*Contacts Page*/
  div#resContactsBG{
    z-index: 0;
    display: block;
    position: fixed;
    width: 100%;
    height: calc(80vw - 70px);
    margin-top: 70px;
  }
  div#contactsPadding{
    display: none;
  }
  div.contactsTitle{
    color: #f48120;
    width: calc(100% - 15vw);
    font-family: montBold;
    font-size: 2.5em;
    letter-spacing: 5px;
    line-height: 0.8em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: top;
    margin-top: 5vh;
    padding: 2vw 7.5vw;
  }
  div.contactsConSmall, div.contactsConLarge{
    display: inline-block;
    position: relative;
    width: calc(100% - 15vw);
    height: auto;
    color: #6d6e70;
    font-family: montLight;
    font-size: 0.85em;
    text-align: left;
    vertical-align: top;
    padding: 0 7.5vw;
  }
  .left.noRes{
    display: none;
  }
  span.contactsSecTitle{
    font-family: montBold;
    font-size: 1em;
    text-transform: uppercase;
  }
  a.contactsLinks{
    opacity: 1;
    color: #f48120;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  a.contactsLinks:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  span#contactsPhone{
    display: none;
  }
  iframe#contactsMaps{
    width: 100%;
    height: 100%;
  }
  div#parking_logo{
    display: inline-block;
    width: auto;
    height: 60px;
  }
  div#parking_desc{
    display: inline-block;
    width: auto;
    min-height: 60px;
    min-height: auto;
    padding-left: 15px;
    vertical-align: top;
  }
  span.contactFormLabel{
    font-family: montBold;
    text-transform: uppercase;
    line-height: 1.5em;
    text-align: left;
    vertical-align: top;
    color: #f48120;
  }
  input[type=text].contactFormInput{
    width: 80%;
    height: auto;
    color: #6d6e70;
    font-family: montReg;
    font-size: 1em;
    border: 1px solid #6d6e70;
    padding: 5px 5px;
  }
  textarea#contactFormMessage{
    width: 80%;
    height: 15vh;
    color: #6d6e70;
    font-family: montReg;
    font-size: 1em;
    border: 1px solid #6d6e70;
    padding: 5px 5px;
  }
  input[type=submit]#contactFormInput, input[type=reset]#contactFormInput{
    width: auto;
    height: auto;
    background-color: #f48120;
    color: #ffffff;
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
    border: 1px solid #f48120;
    padding: 10px 10px;
    transition: background-color 0.3s, color 0.3s;
  }
  input[type=submit]#contactFormInput:hover, input[type=reset]#contactFormInput:hover{
    cursor: pointer;
    background-color: #ffffff;
    color: #f48120;
    transition: background-color 0.3s, color 0.3s;
  }
  div#contactFormResponseCon{
    width: 35%;
    display: inline-block;
  }
  iframe#contactFormResponse{
    background-color: #ffffff;
    border: 1px solid white;
  }

  /*---------------------------------------------*/

  /*Footer*/
  table#footer{
    display: none;
  }
  div#resFooter{
    z-index: 1;
    position: relative;
    display: block;
    background: #ffffff;
    background-image: url("../sources/system/footerGraphic.svg");
    background-attachment: absolute;
    background-position: bottom;
    background-size: auto 200%;
    background-repeat: no-repeat;
    width: calc(100% - 15vw);
    height: auto;
    text-align: left;
    padding: 7.5vw 7.5vw;
  }
  div#resFooterDivider{
    width: 100%;
    height: 3px;
    margin-bottom: 7.5vw;
    background-color: #f48120;
  }
  div#resFooterLogo{
    background-image: url("../sources/system/SF_logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 277px;
    height: 65px;
  }
  span.SFContacts{
    font-family: montReg;
    font-size: 0.85em;
    color: #6d6e70;
  }
  span.footerTitle{
    font-family: montBold;
    font-size: 1em;
    text-transform: uppercase;
    color: #f48120;
  }
  a.footerLinks{
    margin-right: 15px;
    transition: opacity 0.3s;
  }
  a.footerLinks:hover{
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  div#rights{
    color: #f48120;
    font-family: montBold;
    text-transform: uppercase;
    font-size: 0.75em;
    text-align: left;
  }
  span#rightsSpacing{
    letter-spacing: 0.6em;
  }
}

@media screen and (min-width: 901px){
  div#header{
    background: #ffffff;
    background-image: url("../sources/system/headerGraphic.svg");
    background-attachment: absolute;
    background-position: top right;
    background-size: auto 150px;
    background-repeat: no-repeat;
    position: fixed;
    z-index: 3;
  	width: calc(100% - 10vw);
  	height: 65px;
  	top: 0;
  	left: 0;
    vertical-align: bottom;
    padding: 15px 5vw;
    box-shadow: 0px 0px 30px -10px #323232;
    overflow: hidden;
    transition: color 0.3s, height 0.3s, border-bottom 0.5s, top 0.3s;;
  }
  #header.hide{
    top: -100px;
    transition: top 0.3s;;
  }
  div#resHeader{
    display: none;
  }
  div#headerDrawer{
    display: none;
  }
  #header.expand{
    height: 55vh;
    border-bottom: 5px solid #f48120;
    transition: height 0.3s, border-bottom 0.5s;
  }
  div#headerGraphicR{
    z-index: -1;
    display: inline-block;
    position: absolute;
    background-image: url("../sources/system/headerGraphicR.svg");
    background-attachment: absolute;
    background-position: bottom left;
    background-size: auto 200px;
    background-repeat: no-repeat;
    top: calc(55vh - 170px);
    left: 0;
    width: 80vw;
    height: 200px;
  }
  div#headerDropDownTitle{
    z-index: -1;
    position: absolute;
    top: calc(55vh - 5vh);
    right: 5vw;
    color: #f48120;
    font-family: montBold;
    font-size: 3.5em;
    letter-spacing: 0.3em;
    text-align: right;
    vertical-align: bottom;
    line-height: 0.8em;
    text-transform: uppercase;
    margin-right: -0.2em;
  }
  table#headerTable{
    z-index: 1;
    width: 100%;
  }
  div#headerLogo{
    background-image: url("../sources/system/SF_logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 277px;
    height: 65px;
  }
  td#headerExtraInfoLSec{
    width: auto;
    font-family: montLight;
    font-size: 0.7em;
    text-align: right;
    vertical-align: middle;
    line-height: normal;
    color: #6d6e70;
    padding-right: 1vw;
    border-right: 1px solid #6d6e70;
  }
  td#headerExtraInfoRSec{
    font-family: montLight;
    font-size: 0.7em;
    text-align: right;
    line-height: normal;
    color: #6d6e70;
    padding-left: 1vw;
    border-left: 1px solid #6d6e70;
  }
  a.headerSMLinks{
    margin-left: 15px;
    transition: opacity 0.3s;
  }
  a.headerSMLinks:hover{
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  table#headerTableLinks{
    position: relative;
    bottom: -10px;
    right: 0;
  }
  td.headerLinksCon{
    width: auto;
    padding-right: 2vw;
    text-align: right;
    vertical-align: bottom;
  }
  a.headerLinks{
    opacity: 1;
    text-decoration: none;
    font-family: montExtraBold;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 5px;
    padding-bottom: 18px;
    color: #6d6e70;
    transition: opacity 0.3s, color 0.3s;
  }
  a.headerLinks:hover{
    opacity: 0.8;
    color: #f48120;
    transition: opacity 0.3s, color 0.3s;
  }
  .headerLinks.active{
    pointer-events: none;
    opacity: 0.5;
    color: #f48120;
    transition: opacity 0.3s, color 0.3s;
  }
  .headerLinks.disabled{
    pointer-events: none;
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  div.headerLinkHolder{
    position: relative;
  }
  div.headerLinkIndicator{
    z-index: -1;
    display: none;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -7px;
    width: 8px;
    height: 8px;
    background: #f48120;
    transform: rotate(45deg);
  }
  .headerLinkIndicator.active{
  	display: block;
  }
  div#headerStoresListHolder,
  div#headerEventsHolder,
  div#headerSearchHolder{
    display: none;
    position: absolute;
  	top: 100px;
    left: 5vw;
    right: 5vw;
    bottom: 5px;
    height: auto;
  }
  #headerStoresListHolder.active,
  #headerEventsHolder.active,
  #headerSearchHolder.active{
    display: inline-block;
  }
  div#headerStoresListCon{
    position: relative;
  	top: 5px;
    bottom: 0;
    height: auto;
    vertical-align: top;
  }
  div.headerListofStores{
    display: inline-block;
    width: calc(17.5vw - 1.5vw);
    height: auto;
    padding-top: 2vw;
    padding-right: 1.5vw;
    vertical-align: top;
  }
  a.headerCatTitle{
    opacity: 1;
    font-family: montBold;
    font-size: 0.95em;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    color: #f48120;
    transition: opacity 0.3s;
  }
  a.headerCatTitle:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  td.headerEventsSec{
    width: 50%;
    height: auto;
    padding: 2vw 0vw;
    vertical-align: top;
  }
  td.headerEventsSec.left{
    padding-right: 5vw;
    /*border-right: 1px solid rgba(87,87,87,0.5);*/
  }
  table.headerEventEntry{
    padding: 0vh 0vh;
    width: 45vw;
    height: auto;
  }
  td.headerEventSecPosterCon{
    width: 20vw;
    height: auto;
    vertical-align: top;
    text-align: right;
  }
  div.headerEventSecPoster{
    width: 20vw;
    height: 10vw;
    max-height: 10vw;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
  }
  td.headerEventSecInfo{
    width: 23vw;
    height: auto;
    text-align: left;
    vertical-align: top;
    padding-left: 2vw;
  }
  span.headerEventTitle{
    font-family: montBold;
    font-size: 2em;
    line-height: 0.8em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  span.headerEventDuration{
    font-family: montReg;
    font-size: 1em;
    line-height: 1.5em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  a.headerEventLink{
    opacity: 1;
    font-family: montBold;
    font-size: 0.9em;
    text-decoration: none;
    color: #f48120;
    transition: opacity 0.3s;
  }
  a.headerEventLink:hover{
    opacity: 0.3;
    transition: opacity 0.3s;
  }
  div.headerInfoStrong{
    display: inline-block;
    font-family: montBold;
    font-size: 1.2em;
    color: #f48120;
    line-height: 1.5em;
  }
  input[type=search]#headerSearchEntry{
    width: calc(60% - 2vw);
    height: auto;
    color: #6d6e70;
    font-family: montReg;
    font-size: 1.2em;
    border: 1px solid #f48120;
    padding: 15px 15px;
    margin-top: 20px;
  }
  input[type=submit]#headerSearchGo{
    width: auto;
    height: auto;
    background-color: #f48120;
    color: #ffffff;
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
    border: 1px solid #f48120;
    padding: 16px 16px;
    transition: background-color 0.3s, color 0.3s;
  }
  input[type=submit]#headerSearchGo:hover{
    cursor: pointer;
    background-color: #ffffff;
    color: #f48120;
    transition: background-color 0.3s, color 0.3s;
  }
  span.headerSearchTitle{
    color: #f48120;
    font-family: montBold;
    font-size: 1.2em;
    line-height: 2em;
    text-transform: uppercase;
  }
  td#headerSearchTips{
    color: #6d6e70;
    font-family: montReg;
    font-size: 0.9em;
    vertical-align: top;
  }
  a.headerSearchLinks{
    color: #6d6e70;
    font-family: montReg;
    font-size: 0.9em;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  a.headerSearchLinks:hover{
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  svg#homeIcon{
    position: relative;
    bottom: -2px;
    height: 1.1em;
    width: auto;
  }
  path.homeIconStatic{
    fill: #6d6e70;
  }
  polygon#homeIconDynamic{
    fill: #ffffff;
    transition: fill 0.3s;
  }
  #homeIcon:hover #homeIconDynamic{
    fill: #6d6e70;
    transition: fill 0.3s;
  }
  svg#searchIcon{
    display: inline-block;
    position: relative;
    bottom: -2px;
    height: 1.1em;
    width: auto;
  }
  svg#searchIcon:hover{
    cursor: pointer;
  }
  svg#searchIcon.disappear{
    display: none;
  }
  path.searchIconStatic{
    fill: #6d6e70;
  }
  circle#searchIconDynamic{
    fill: #ffffff;
    transition: fill 0.3s;
  }
  #searchIcon:hover #searchIconDynamic{
    fill: #6d6e70;
    transition: fill 0.3s;
  }
  svg#searchCloseIcon{
    display: none;
    opacity: 1;
    position: relative;
    bottom: -2px;
    height: 1.1em;
    width: auto;
    transition: opacity 0.3s;
  }
  svg#searchCloseIcon:hover{
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
  }
  svg#searchCloseIcon.active{
    display: inline-block;
  }
  div#psuedoPadding{
    z-index: 1;
    position: relative;
    width: 2px;
    height: 100vh;
  }
  div.content{
    z-index: 1;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: #ffffff;
    text-align: center;
    box-shadow: 0px 0px 50px -15px #323232;
  }
  .content.shadowless{
    box-shadow: none;
  }
  table.content{
    padding: 10vh 0vh;
    width: 80vw;
    font-family: montReg;
    font-size: 0.8em;
    line-height: 1.5em;
    color: #6d6e70;
  }
  div#backToTopCon{
    background-image: url("../sources/system/top.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    width: 45px;
    height: 46px;
  }
  a#backToTop{
    z-index: 3;
    opacity: 1;
    position: fixed;
    left: 40px;
    bottom: 0px;
    transform: translateY(100px);
    text-decoration: none;
    transition: opacity 0.3s, transform 0.8s;
  }
  #backToTop.active{
    transform: translateY(-30px);
    transition: transform 0.8s;
  }
  a#backToTop:hover{
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  span.noMessage{
    color: #6d6e70;
    font-family: montBold;
    font-size: 2em;
    text-transform: uppercase;
    text-align: left;
  }
  div#scrollDownIconHolder{
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 30px;
    height: auto;
    margin-left: -15px;
  }
  svg#scrollDownIcon{
    width: 30px;
    height: auto;
  }
  path.scrollDownBG{
    fill: #f48120;
  }
  path.scrollDownStatic{
    fill: #ffffff;
  }
  path.scrollDownDynamic{
    fill: #ffffff;
    animation: scrollDown 3s infinite;
  }
  div.resTitleCon{
    display: none;
  }
  .onlyRes{
    display: none;
  }
  a.uniLink{
    color: #f48120;
    text-decoration: none;
  }
  .uniLink:hover{
    opacity: 0.8;
    transition: opacity 0.3s;
  }

  /*---------------------------------------------*/

  /*Home Page*/
  div#primeHomeBG{
    z-index: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  table#primeHomeBGInner{
    height: 100%;
    width: auto;
  }
  td.primeHomeSlide{
    position: relative;
    background: #ffffff;
    background-attachment: fixed;
    height: 100%;
    width: 100vw;
    min-width: 100vw;
  }
  span.slideTitle{
    color: #ffffff;
    font-family: montBold;
    font-size: 3em;
    line-height: 0.9em;
    text-transform: uppercase;
  }
  .slideTitle.dark{
    color: #6d6e70;
  }
  span.slideSubTitle{
    color: #ffffff;
    font-family: montLight;
    font-size: 1.2em;
    line-height: 2em;
  }
  a.slideLink{
    color: #f48120;
    font-family: montReg;
    font-size: 1em;
    line-height: 2.5em;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  a.slideLink:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  a.carouselImgLink{
    opacity: 1;
    transition: opacity 0.3s;
  }
  a.carouselImgLink:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  div.slideNowOpen{
    position: absolute;
    bottom: 35px;
    left: 90px;
    height: auto;
    width: auto;
    color: #ffffff;
    font-family: montExtraBold;
    font-size: 7.5em;
    text-align: left;
    text-transform: uppercase;
    line-height: 0.8em;
  }
  .slideNowOpen.slide3{
    position: absolute;
    top: auto;
    left: auto;
    right: 90px;
    bottom: 90px;
  }
  span.slideNowOpenLoose{
    color: #6d6e70;
    font-family: montExtraBold;
    font-size: 6.5em;
    text-transform: uppercase;
    line-height: 0.8em;
  }
  span.homeStrongerText{
    color: #f48120;
    font-family: montExtraBold;
    font-size: 5em;
    text-transform: uppercase;
    line-height: 0.8em;
  }
  span.homeStrongText{
    color: #ffffff;
    font-family: montExtraBold;
    /*font-size: 3em;*/
    font-size: 2em;
    text-transform: uppercase;
    line-height: 0.8em;
  }
  td#slide1, td#slide2, td#slide3, td#slide4, td#slide5{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  td#slide1{
    /*background-image: linear-gradient(
      20deg,
      rgba(0,0,0,0),
      rgba(0,0,0,0),
      rgba(0,0,0,0.1),
      rgba(0,0,0,0.75)),
      url("../sources/indexCarousel/homeBG.jpg");*/
    background-image: var(--slide1BG);
  }
  div#slide1Con{
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    padding: 125px 0px 0px 70px;
  }
  td#slide2{
    background-image: var(--slide2BG);
  }
  div#slide2Con{
    position: absolute;
    top: 100px;
    right: 0;
    color: #bababa !important;
    font-size: 0.75em;
    text-align: right;
    padding: 30px 90px 0px 0px;
  }
  td#slide3{
    /*background-image: linear-gradient(
      135deg,
      rgba(0,0,0,0),
      rgba(0,0,0,0),
      rgba(0,0,0,0.75)),
      var(--slide3BG);*/
    background-image: var(--slide3BG);
  }
  div#slide3Con{
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(30vw + 90px);
    text-align: right;
    padding: 0px 90px 35px 0px;
  }
  div#slide3Logo{
    display: inline-block;
    background-image: url("../sources/stores/storelogos/alladin_logo.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: cover;
    height: 80px;
    width: 175px;
  }
  td#slide4{
    background-image: linear-gradient(
      180deg,
      rgba(0,0,0,0),
      rgba(0,0,0,0),
      rgba(0,0,0,0.75)),
      var(--slide4BG);
  }
  div#slide4Con{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    padding: 0px 0px 35px 90px;
  }
  img.slideLogos{
    height: 100px;
    margin-left: 30px;
  }
  div#slide4Logo{
    position: absolute;
    bottom: 35px;
    right: 90px;
    height: auto;
    width: auto;
  }
  td#slide5{
    background-image: var(--slide5BG);
  }
  div#slide5Con{
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    padding: 30px 90px 0px 0px;
  }
  div#slide5Logo{
    display: inline-block;
    background-image: url("../sources/stores/storelogos/miniso_logo.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: cover;
    height: 100px;
    width: 80px;
  }
  div#primePrevCon, div#primeNextCon{
    position: fixed;
    top: 52.5%;
    background: #ffffff;
    color: #f48120;
    font-family: montBold;
    font-size: 2em;
    text-transform: uppercase;
    border: 1px solid #f48120;
    transition: color 0.3s, background 0.3s;
  }
  div#primePrevCon{
    left: -5px;
    padding: 10px 15px 10px 15px;
  }
  div#primeNextCon{
    right: -5px;
    padding: 10px 15px 10px 15px;
  }
  div#primePrevCon:hover, div#primeNextCon:hover{
    cursor: pointer;
    background: #f48120;
    color: #ffffff;
    transition: color 0.3s, background 0.3s;
  }
  #primePrevCon.inactive, #primeNextCon.inactive{
    display: none;
  }
  div#homeTiles{
    width: 100%;
    height: auto;
  }
  div#squareHomeTileCon{
    position: relative;
    top: 0;
    left: 0;
    width: 66%;
    height: auto;
  }
  div#tallHomeTile{
    position: absolute;
    top: 0;
    right: 0;
    width: 34%;
    height: 66vw;
    background: var(--tallTile);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  div#wideHomeTile{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 33vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  div#wideHomeTileDEFAULT{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 33vw;
    background: var(--wideTile);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  div#sqHomeTile1, div#sqHomeTile2{
    display: inline-block;
    position: relative;
    width: 50%;
    height: 33vw;
    background-attachment: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -4px;
  }
  div#sqHomeTile1{
    background-image: var(--sqTile1);
  }
  div#sqHomeTile2{
    background-image: var(--sqTile2);
    background-position: top;
  }
  a.homeTitleLink{
  	display: block;
  	height: 100%;
  	background: rgba(0,0,0,0.4);
  	text-decoration: none;
  	vertical-align: bottom;
    text-align: left;
  	transition: background 0.5s;
  }
  a.homeTitleLink:hover{
  	background: rgba(0,0,0,0.15);
  	transition: background 0.5s;
  }
  div.homeTileCon{
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 40px);
    padding: 20px 20px;
  }
  span.hometileTitle{
    display: inline;
    color: #ffffff;
    font-family: montBold;
  	font-size: 2.5em;
    text-transform: uppercase;
  }
  span.hometileSubTitle{
    display: inline;
    color: #ffffff;
    font-family: montLight;
  	font-size: 0.9em;
  }

  /*---------------------------------------------*/

  /*Stores Page*/
  #psuedoPadding.stores{
    height: 70vh;
  }
  div#storesBG{
    z-index: 0;
    position: fixed;
    width: 100%;
    height: 70vh;
    background-image: url("../sources/storesBG.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-attachment: absolute;
    background-size: 100% auto;
  }
  div#storesHeaderCon{
    z-index: 1;
    position: absolute;
    top: 125px;
    left: 5vw;
  }
  div#storesTitleCon{
    width: 100%;
    vertical-align: top;
    line-height: 0.8em;
  }
  span#storesTitle{
    color: #f48120;
    font-family: montBold;
    font-size: 3.2em;
    letter-spacing: 0.3em;
    line-height: 0.8em;
    text-transform: uppercase;
  }
  span#storesSubTitle{
    font-family: montReg;
    font-size: 0.8em;
    color: #6d6e70;
  }
  div#storesButtonCon{
    display: none;
  }
  div#storesCatList{
    display: inline-block;
    top: 0;
    vertical-align: top;
    padding-right: 10px;
  }
  a.storesCatTitle{
    display: block;
    opacity: 1;
    font-family: montBold;
    font-size: 1em;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    color: #f48120;
    padding: 5px 10px;
    transition: opacity 0.3s, background 0.3s, color 0.3s;
  }
  a.storesCatTitle:hover{
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  .storesCatTitle.active{
    pointer-events: none;
    background: #f48120;
    color: #ffffff;
    transition: background 0.3s, color 0.3s;
  }
  div#listOfStores{
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
    border-left: 2px solid #f48120;
  }
  a.storeLink{
    opacity: 1;
    font-family: montReg;
    font-size: 0.8em;
    text-decoration: none;
    color: #6d6e70;
    transition: opacity 0.3s;
  }
  a.storeLink:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  a.storeLinkDisabled{
    pointer-events: none;
    opacity: 0.6;
    font-family: montReg;
    font-size: 0.8em;
    text-decoration: none;
    color: #6d6e70;
  }
  div.storeSecTitleCon{
    z-index: 1;
    position: relative;
    background-color: #f48120;
    height: 80px;
    padding-top: 110px;
    padding-bottom: 20px;
    padding-left: 10vw;
    padding-right: 10vw;
    overflow: hidden;
  }
  div#SC_services, div#SC_HnB, div#SC_speciality, div#SC_AnF, div#SC_restaurants{
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: absolute;
    background-size: auto 90%;
    height: 100%;
    width: 50%;
    opacity: 0.1;
  }
  div#SC_services{
    background-image: url("../sources/stores/storeCatIcons/services.svg");
    bottom: -5px;
  }
  div#SC_HnB{
    background-image: url("../sources/stores/storeCatIcons/HnB.svg");
    bottom: -5px;
  }
  div#SC_speciality{
    background-image: url("../sources/stores/storeCatIcons/speciality.svg");
    bottom: -5px;
  }
  div#SC_AnF{
    background-image: url("../sources/stores/storeCatIcons/AnF.svg");
    bottom: -5px;
  }
  div#SC_restaurants{
    background-image: url("../sources/stores/storeCatIcons/restaurants.svg");
    bottom: -5px;
  }
  div.storeSecTitle{
    z-index: 1;
    position: absolute;
    bottom: 20px;
    left: 10vw;
    color: #ffffff;
    font-family: montBold;
    font-size: 4em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: left;
    height: 80px;
    overflow: hidden;
  }
  table.storeBG{
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 50vh;
    padding: 2vh 10vw;
  }
  img.storeLogo{
    height: 80px;
  }
  td.storeTitle{
    color: #ffffff;
    font-family: montBold;
    font-size: 2.5em;
    letter-spacing: 0.1em;
    line-height: 1em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
  }
  div.storeBio, div.storeInfo{
    display: inline-block;
    position: relative;
    width: calc(49.5% - 8vw);
    height: auto;
    color: #6d6e70;
    font-family: montLight;
    font-size: 0.85em;
    line-height: 1.5em;
    text-align: left;
    vertical-align: top;
    padding: 8vh 0;
  }
  div.storeBio{
    margin-left: 10vw;
    padding-right: 3vw;
  }
  div.storeBio.res{
    display: none;
  }
  div.storeInfo{
    padding-left: 3vw;
  }
  span.storeBioTitles{
    font-family: montBold;
  }
  span.storeInfoTitle{
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
  }
  a.storeTargetLinks{
    opacity: 1;
    font-family: montReg;
    font-size: 1em;
    color: #f48120;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  a.storeTargetLinks:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  span.storesResPhone{
    display: none;
  }
  div.storesInfoStrong{
    display: inline-block;
    background-color: #f48120;
    color: #ffffff;
    padding: 5px 15px;
    line-height: 1.5em;
  }

  /*---------------------------------------------*/

  /*Events Page*/
  div#eventSecTitleCon, div#eventCurrentCon{
    position: relative;
    width: calc(100% - 20vw);
    height: auto;
    text-align: left;
    padding: 3vh 10vw;
  }
  span#eventSecTitle{
    color: #f48120;
    font-family: montBold;
    font-size: 4em;
    text-transform: uppercase;
  }
  span#eventSecSubTitle{
    color: #6d6e70;
    font-family: montReg;
    font-size: 0.9em;
  }
  div.eventEntry{
    width: 100%;
    height: auto;
    text-align: left;
  }
  div.eventSecPoster, div.eventSecPoster.portrait{
    display: inline-block;
    position: relative;
    width: 65%;
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: contain;
    text-align: left;
    vertical-align: top;
  }
  div.eventSecPoster{
    background-position: left top;
    height: 27.5vw;
    max-height: 27.5vw;
  }
  div.eventSecPoster.portrait{
    background-position: right top;
    height: 40vw;
    max-height: 40vw;
  }
  div.eventSecInfo{
    display: inline-block;
    position: relative;
    width: 32%;
    height: 25vw;
    min-height: 25vw;
    max-height: 35vw;
    text-align: left;
    vertical-align: top;
    padding-left: 2vw;
  }
  div.eventSeparator{
    position: relative;
    opacity: 0.3;
    width: 90vw;
    height: 2px;
    left: 50vw;
    margin-left: -45vw;
    background-color: #6d6e70;
  }
  span.eventTitle{
    font-family: montBold;
    font-size: 2.2em;
    line-height: 0.8em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  span.eventDuration{
    font-family: montReg;
    font-size: 1em;
    line-height: 1.5em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  span.eventSubTitle{
    font-family: montBold;
    font-size: 1em;
    line-height: 1em;
    text-transform: uppercase;
    text-align: left;
    color: #6d6e70;
  }
  span.eventSubTitleInfo{
    font-family: montLight;
    font-size: 0.85em;
    line-height: 0.9em;
    text-align: left;
    color: #6d6e70;
  }
  a.eventLink{
    opacity: 1;
    font-family: montBold;
    font-size: 1.2em;
    text-decoration: none;
    color: #f48120;
    transition: opacity 0.3s;
  }
  a.eventLink:hover{
    opacity: 0.3;
    transition: opacity 0.3s;
  }
  div#hallsBG{
    position: relative;
    width: 100%;
    height: 80vh;
    text-align: left;
    margin: 5vh 0;
  }
  div#hallPane{
    z-index: 2;
    display: inline-block;
    position: relative;
    width: 22.5%;
    height: calc(100% - 4.4vw);
    text-align: left;
    vertical-align: top;
    padding: 2.2vw 0;
    background-color: #000000;
  }
  div#eventHallTitle{
    font-family: montBold;
    font-size: 2em;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: left;
    color: #f48120;
    padding-left: 2vw;
  }
  div#eventHallSubTitle{
    font-family: montLight;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: left;
    color: #ffffff;
    padding: 0 2vw;
  }
  div#hallsButtonCon{
    display: none;
  }
  div.hallLink{
    font-family: montBold;
    font-size: 1.2em;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: left;
    padding: 1vh 2vw;
    color: #ffffff;
    background-color: rgba(255,255,255,0);
    border-left: 5px solid rgba(255,255,255,0);
  }
  div.hallLink:hover{
    cursor: pointer;
    background-color: rgba(255,255,255,0.3);
  }
  div.hallLink.active{
    border-left: 5px solid white;
  }
  div#hallDescCon{
    z-index: 1;
    display: inline-block;
    position: absolute;
    width: calc(77.5% - 6vw);
    height: calc(100% - 4.4vw);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
    vertical-align: top;
    text-align: right;
    padding: 2.2vw 3vw;
  }
  div.hallDesc{
    display: none;
    position: absolute;
    top: 2.2vw;
    right: 3vw;
    width: 20vw;
    font-family: montLight;
    font-size: 0.9em;
    text-align: right;
    color: #ffffff;
  }
  span.hallTitle{
    font-family: montBold;
    font-size: 3em;
    line-height: 1.2em;
    text-transform: uppercase;
  }
  span.hallMeaning{
    font-family: montLight;
    font-size: 0.9em;
    line-height: 0.6em;
  }
  div#newsSecCon{
    width: 100%;
    height: auto;
    text-align: left;
    padding-top: 30px;
  }
  div#newsNav{
    display: inline-block;
    position: relative;
    width: calc(24% - 5vw);
    height: auto;
    text-align: left;
    vertical-align: top;
    padding-left: 5vw;
    padding-bottom: 10vh;
  }
  span#newsTitle{
    font-family: montBold;
    font-size: 4em;
    text-transform: uppercase;
    color: #f48120;
  }
  div#listofMonths{
    display: inline-block;
    position: relative;
    width: 100%;
  }
  div#newsButtonCon{
    display: none;
  }
  div#newsBodyPanel{
    display: inline-block;
    position: relative;
    width: calc(75% - 5vw);
    height: auto;
    padding-right: 5vw;
    padding-bottom: 0;
    text-align: left;
  }
  div.newsMonth{
    display: inline-block;
    opacity: 1;
    font-family: montBold;
    font-size: 1em;
    text-transform: uppercase;
    color: #6d6e70;
    transition: color 0.3s, opacity 0.3s;
  }
  .newsMonth.active{
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  div.newsMonth:hover{
    cursor: pointer;
    color: #f48120;
    transition: color 0.3s;
  }
  div.newsBody{
    display: none;
    width: calc(100% - 5vw);
    height: auto;
    min-height: calc(100vh - 360px - 21vh);
    font-family: montBold;
    font-size: 1em;
    text-align: left;
    padding-right: 5vw;
  }
  div.newsPoster{
    width: calc(100% - 5vw);
    height: 25vw;
    background-repeat: no-repeat;
    background-position: left center;
    background-attachment: absolute;
    background-size: contain;
  }
  div.newsPoster.portrait{
    width: 25vw;
    height: 30vw;
    background-repeat: no-repeat;
    background-position: left;
    background-attachment: absolute;
    background-size: contain;
  }
  span.newsEntryTitle{
    font-family: montBold;
    font-size: 2.2em;
    text-transform: uppercase;
    line-height: 0.9em;
    color: #6d6e70;
  }
  span.newsEntryDate{
    font-family: montLight;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #6d6e70;
  }
  span.newsEntrySubTitle{
    font-family: montBold;
    font-size: 1em;
    text-transform: uppercase;
    color: #6d6e70;
  }
  span.newsEntrySubText{
    font-family: montLight;
    font-size: 1em;
    color: #6d6e70;
  }
  span.newsEntryText{
    font-family: montLight;
    font-size: 0.9em;
    color: #6d6e70;
  }
  div.newsSeparator{
    display: inline-block;
    opacity: 0.35;
    background: #f48120;
    width: 100%;
    height: 4px;
  }

  /*---------------------------------------------*/

  /*Gallery Page*/
  div#galleryTitleHolder{
    width: 100%;
    background-color: #f48120;
    height: auto;
    text-align: center;
    padding-top: 125px;
    padding-bottom: 35px;
    vertical-align: middle;
  }
  span#galleryTitle{
    font-family: montBold;
    font-size: 4em;
    text-transform: uppercase;
    color: #ffffff;
  }
  span#galleryTitleSpacing{
    letter-spacing: 0.3em;
  }
  span#gallerySubTitle{
    font-family: montLight;
    font-size: 0.9em;
    color: #ffffff;
  }
  div#albumList{
    width: 100%;
    height: auto;
    text-align: left;
    line-height: 0.7em;
  }
  div.albumTileCon{
    display: inline-block;
    width: 25%;
    height: 25vh;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    background-size: cover;
  }
  div.albumLinkCon{
    width: 100%;
    height: 100%;
    position: relative;
  }
  div.albumLink{
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  a.albumLinkTarget{
    z-index: 4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  div.albumLink:hover, a.albumLinkTarget:hover{
    cursor: pointer;
  }
  div.albumTileTitleCon{
    display: table-cell;
    width: calc(100vw - 1.85vw);
    height: calc(25vh - 1.95vw);
    background-color: rgba(0, 0, 0, 0.1);
    color: #ffffff;
    vertical-align: middle;
    text-align: center;
    line-height: 1.1em;
    padding: 1vw 1vw;
    transition: background-color 0.5s, color 0.5s;
  }
  .albumLinkCon:hover .albumTileTitleCon{
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    color: #f48120;
    transition: background-color 0.5s, color 0.5s;
  }
  div.albumTileTitle{
    font-family: montBold;
    font-size: 1.5em;
    line-height: 1em;
    text-transform: uppercase;
    padding: 0vh 2vw;
  }
  div.albumTileSubTitle{
    font-family: montLight;
    font-size: 0.85em;
    padding: 0vh 2vw;
  }
  div#galleryPopUpCon{
    display: none;
    z-index: 5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.9);
    overflow: hidden;
  }
  div.galleryPopUpClose{
    position: absolute;
    top: 0;
    right: 0;
    font-family: montBold;
    font-size: 2em;
    text-transform: uppercase;
    padding: 12px 20px;
    background-color: #f48120;
    color: #ffffff;
    transition: background-color 0.3s, color 0.3s;
  }
  div.galleryPopUpClose:hover{
    cursor: pointer;
    background-color: #ffffff;
    color: #f48120;
    transition: background-color 0.3s, color 0.3s;
  }
  div.galleryPopUp{
    position: absolute;
    top: 0px;
    bottom: -15px;
    right: calc(10vw - 0.4vw - 30px - 14px);
    left: calc(10vw - 0.4vw - 30px);
    background: #ffffff;
    overflow-x: scroll;
    overflow-y: visible;
    transform: translateY(100vh);
    transition: transform 0.5s;
  }
  .galleryPopUp.active{
    transform: translateY(0vh);
    transition: transform 0.5s;
  }
  div.albumTitleHolder{
    height: auto;
    text-align: left;
    vertical-align: center;
    padding: 30px 30px;
  }
  span.albumTitle{
    font-family: montBold;
    font-size: 3.5em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f48120;
  }
  span.albumSubTitle{
    font-family: montReg;
    font-size: 0.9em;
    color: #6d6e70;
  }
  div.albumCon{
    width: 80vw;
    background-color: #ffffff;
    font-family: montReg;
    font-size: 0.8em;
    line-height: 1.5em;
    padding: 30px 30px;
    -webkit-column-count: 2;
    -webkit-column-gap: 6px;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 6px;
    -moz-column-fill: auto;
    column-count: 2;
    column-gap: 6px;
    column-fill: auto;
  }
  div.galleryLandscape, div.galleryPortrait, div.gallerySquare{
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: relative;
    background-size: cover;
    margin-bottom: 6px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
  }
  div.galleryLandscape{
    width: calc(40vw - 3px);
    height: 25vw;
  }
  div.galleryPortrait{
    width: calc(40vw - 3px);
    height: 60vw;
  }
  div.gallerySquare{
    width: calc(40vw - 3px);
    height: calc(40vw - 3px);
  }

  /*---------------------------------------------*/

  /*About Page*/
  div#aboutBG{
    z-index: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image:
      linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,0.8)),
      url("../sources/aboutBG.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-size: cover;
  }
  div#aboutHolder{
    position: fixed;
    top: 120px;
    right: 5.5vw;
    text-align: right;
    width: 60vw;
    height: auto;
    color: #ffffff;
  }
  span#aboutTitle{
    font-family: montBold;
    font-size: 2.5em;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: center;
    color: #f48120;
  }
  span#aboutSubTitle{
    font-family: montLight;
    font-size: 1em;
    text-align: center;
    color: #ffffff;
  }
  span#aboutHighlightsTitle{
    font-family: montBold;
    font-size: 1.8em;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
  }
  span#aboutHighlights{
    font-family: montLight;
    font-size: 0.8em;
    text-align: center;
    color: #ffffff;
  }
  div.aboutSecOne, div.aboutSecTwo{
    display: inline-block;
    position: relative;
    width: calc(50% - 12vw);
    height: auto;
    color: #6d6e70;
    font-family: montLight;
    font-size: 0.85em;
    line-height: 1.5em;
    text-align: left;
    vertical-align: top;
    padding: 10vh 0vh;
  }
  div.aboutSecOne{
    padding-right: 2vw;
  }
  div.aboutSecTwo{
    padding-left: 2vw;
  }
  span.aboutSecTitle{
    font-family: montBold;
    font-size: 2em;
    text-transform: uppercase;
    text-align: center;
    color: #6d6e70;
  }

  /*---------------------------------------------*/

  /*Contacts Page*/
  div#resContactsBG{
    display: none;
  }
  div#contactsPadding{
    display: inline-block;
    width: 2px;
    height: 60px;
  }
  div.contactsTitle{
    display: inline-block;
    width: calc(100% - 20vw);
    font-family: montBold;
    font-size: 4em;
    letter-spacing: 0.3em;
    line-height: 0.8em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: top;
    margin-top: 5vh;
    padding: 4vh 0vh;
    color: #f48120;
  }
  div.contactsConSmall, div.contactsConLarge{
    display: inline-block;
    height: auto;
    font-family: montLight;
    font-size: 0.85em;
    padding-bottom: 5vh;
    text-align: left;
    vertical-align: top;
    color: #6d6e70;
  }
  div.contactsConSmall{
    width: calc(35% - 12vw);
  }
  div.contactsConLarge{
    width: calc(65% - 12vw);
  }
  .left{
    padding-left: 2vw;
  }
  .right{
    padding-right: 2vw;
  }
  span.contactsSecTitle{
    font-family: montBold;
    font-size: 1em;
    text-transform: uppercase;
  }
  a.contactsLinks{
    opacity: 1;
    color: #f48120;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  a.contactsLinks:hover{
    opacity: 0.4;
    transition: opacity 0.3s;
  }
  a#contactsResPhone{
    display: none;
  }
  iframe#contactsMaps{
    width: 100%;
    height: 60vh;
    border: 1px solid #f48120;
  }
  div#parking_logo{
    display: inline-block;
    width: auto;
    height: 60px;
  }
  div#parking_desc{
    display: inline-block;
    width: auto;
    min-height: 60px;
    min-height: auto;
    padding-left: 15px;
    vertical-align: top;
  }
  span.contactFormLabel{
    font-family: montBold;
    font-size: 1.5em;
    text-transform: uppercase;
    line-height: 1.5em;
    text-align: left;
    vertical-align: top;
    color: #f48120;
  }
  input[type=text].contactFormInput{
    width: 80%;
    height: auto;
    color: #6d6e70;
    font-family: montReg;
    font-size: 1em;
    border: 1px solid #6d6e70;
    padding: 5px 5px;
  }
  textarea#contactFormMessage{
    width: 80%;
    height: 15vh;
    color: #6d6e70;
    font-family: montReg;
    font-size: 1em;
    border: 1px solid #6d6e70;
    padding: 5px 5px;
  }
  input[type=submit]#contactFormInput, input[type=reset]#contactFormInput{
    width: auto;
    height: auto;
    background-color: #f48120;
    color: #ffffff;
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
    border: 1px solid #f48120;
    padding: 10px 10px;
    transition: background-color 0.3s, color 0.3s;
  }
  input[type=submit]#contactFormInput:hover, input[type=reset]#contactFormInput:hover{
    cursor: pointer;
    background-color: #ffffff;
    color: #f48120;
    transition: background-color 0.3s, color 0.3s;
  }
  div#contactFormResponseCon{
    width: 35%;
    display: inline-block;
  }
  iframe#contactFormResponse{
    background-color: #ffffff;
    border: 1px solid white;
  }

  /*---------------------------------------------*/

  /*Footer*/
  div#resFooter{
    display: none;
  }
  table#footer{
    z-index: 1;
    position: relative;
    background: #ffffff;
    background-image: url("../sources/system/footerGraphic.svg");
    background-attachment: absolute;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    color: #6d6e70;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-top: 10px;
    font-family: montBold;
    font-size: 10px;
    line-height: 16px;
  }
  td#homeFooterSpacing{
    height: 5vh;
  }
  td.footerSec{
    color: #6d6e70;
    font-family: montLight;
    font-size: 1.1em;
    padding: 5vh 5vh;
    text-align: left;
    vertical-align: top;
  }
  span#SFFLogo{
    font-family: montExtraBold;
    font-size: 2.5em;
    text-transform: uppercase;
    color: #6d6e70;
  }
  span.SFContacts{
    font-family: montReg;
    font-size: 1em;
    color: #6d6e70;
  }
  span.footerTitle{
    font-family: montBold;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #f48120;
  }
  a.footerLinks{
    text-decoration: none;
    font-family: montReg;
    font-size: 1em;
    text-transform: uppercase;
    color: #6d6e70;
    transition: opacity 0.3s, color 0.3s;
  }
  a.footerLinks:hover{
    opacity: 0.8;
    color: #f48120;
    transition: opacity 0.3s, color 0.3s;
  }
  td#rights{
    color: #f48120;
    font-family: montBold;
    text-transform: uppercase;
    font-size: 0.9em;
    text-align: center;
    padding-bottom: 5vh;
  }
  span#rightsSpacing{
    letter-spacing: 1em;
  }

  /*---------------------------------------------*/

  /*Search*/
  td.searchCatCon{
    padding-top: 5vh;
    text-align: left;
  }
  div.searchStoreCard{
    display: inline-block;
    background: #ffffff;
    padding: 20px 20px;
    margin: 10px 10px;
    width: 120px;
    max-width: 120px;
    height: auto;
    vertical-align: top;
    transition: background 0.3s;
  }
  div.searchStoreCard:hover{
    cursor: pointer;
    background: #f9c08f;
    transition: background 0.3s;
  }
  div.searchStoreLogo{
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid #f48120;
  }
  span.searchCatTitle{
    color: #f48120;
    font-family: montBold;
    font-size: 4em;
    letter-spacing: 0.3em;
    line-height: 1.2em;
    text-transform: uppercase;
  }
  span.searchStoreName{
    font-family: montBold;
    font-size: 1.1em;
  }
  span.searchStoreLoc{
    font-family: montReg;
    font-size: 0.9em;
    line-height: 0em;
  }
}

@keyframes scrollDown{
  0% {transform: translateY(0px);}
  50% {transform: translateY(140px);}
  100% {transform: translateY(0px);}
}

/*Fonts*/
@font-face {
    font-family: montExtraBold;
    src: url('fonts/montserrat-extrabold-webfont.eot');
	  src: url('fonts/montserrat-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/montserrat-extrabold-webfont.woff') format('woff'),
	     url('fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
	     url('fonts/montserrat-extrabold-webfont.ttf') format('truetype'),
	     url('fonts/montserrat-extrabold-webfont.svg#webfont') format('svg');
    font-display: block;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: montBold;
    src: url('fonts/montserrat-bold-webfont.eot');
	  src: url('fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/montserrat-bold-webfont.woff') format('woff'),
	     url('fonts/montserrat-bold-webfont.woff2') format('woff2'),
	     url('fonts/montserrat-bold-webfont.ttf') format('truetype'),
	     url('fonts/montserrat-bold-webfont.svg#webfont') format('svg');
    font-display: block;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: montReg;
    src: url('fonts/montserrat-regular-webfont.eot');
	  src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/montserrat-regular-webfont.woff') format('woff'),
	     url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
	     url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
	     url('fonts/montserrat-regular-webfont.svg#webfont') format('svg');
    font-display: block;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: montLight;
    src: url('fonts/montserrat-light-webfont.eot');
	  src: url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/montserrat-light-webfont.woff') format('woff'),
	     url('fonts/montserrat-light-webfont.woff2') format('woff2'),
	     url('fonts/montserrat-light-webfont.ttf') format('truetype'),
	     url('fonts/montserrat-light-webfont.svg#webfont') format('svg');
    font-display: block;
    font-weight: normal;
    font-style: normal;
}