@charset "utf-8";
/* CSS Document */
#loader{
	position:fixed;
    height:100vh;
    width:100%;
    z-index:9999999;
    background:white;
}
#loader.matilda{
	background:black;
}
#container{
	opacity:1;
}
body.solarium{
    background:white;
    color:black;
}
span.alt {
    width: 1px;
    height: 1px;
    overflow: hidden;
    text-indent: -99999999px;
    display: block;
}
h1{
    line-height: 1.1;
}
h2 {
    font-size: 0.83em;
    letter-spacing: 0.4em;
    line-height: 1.2;
    font-weight: 600;
}
.logo.solarium {
    overflow: hidden;
    display: block;
    text-decoration: none;
    margin: 0 0 40px 0px;
    font-size: 400px;
    color: white;
}


body.solarium .mm-menu,
body.solarium .news-block .col{
    background: rgba(255, 255, 255, 0.85);
    color: black;
}
/*body.solarium .mm-menu h2 {
    color: black;
}*/
body.solarium .mm-menu p {
    color: #6f6f6f;
}

.solarium h2,
.solarium #intro h2{ 
    /*color: #359148;*/
    color:#6aa152;
}
.solarium .news-block .title-holder a,
.solarium .news-block .title-holder .btn [class^="icon-"]:before, 
.solarium .news-block .title-holder .btn [class*=" icon-"]:before{
    color: #359148;
}
.solarium .news-block .title-holder a.btn:hover {
    background: #359148;
}
.solarium footer{
    background:black;
    color:white;
}
.solarium footer h2{
    color:#757575;
}
.solarium i.demo-icon.icon-sunburst.gold {
    color: #ebca52;
}

.solarium #intro p{
    margin:0;
}
.bg-img {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.parallax.bg-img{
    height: 200%;
    top: -50%;
    backface-visibility: hidden;
}
footer.mm{
    background: transparent;
    position:relative;
    overflow:hidden;
}
footer.mm .bg-img{
    z-index:-1;
    background-image:url(https://thedwellhotel.s3.amazonaws.com/matilda-midnight/images/mm-pattern.svg);
    background-image:url(https://thedwellhotel.s3.amazonaws.com/matilda-midnight/images/mm-footer.jpg);
}
.solarium footer.mm .bg-img{
    background-image:url(https://thedwellhotel.s3.amazonaws.com/solarium/images/sol-pattern.svg);
}
.hero.relative {
    position: relative;
    overflow: hidden;
}
.hero .pad-box{
    position:relative;
    z-index:2;
}
.solarium .unslider .overlay::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 74%, rgba(0,0,0,0.45) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 74%,rgba(0,0,0,0.45) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 74%,rgba(0,0,0,0.45) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#73000000',GradientType=1 );
}

.solarium .unslider .overlay::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 10%, rgba(0,0,0,0.15) 39%, rgba(0,0,0,0) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.35) 10%,rgba(0,0,0,0.15) 39%,rgba(0,0,0,0) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.35) 10%,rgba(0,0,0,0.15) 39%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59000000', endColorstr='#00000000',GradientType=1 );
    opacity:0.5;
}



.btn {
    border: none;
    background-color: #3fa8ab;
}

.btn [class^="icon-"]:before, 
.btn [class*=" icon-"]:before {
    color: white;
}
.btn:hover {
    background: #107073;
}

.solarium .btn,
.solarium .btn:hover{
    background-color: #ee5666;
}



/*-- new header & nav --*/
header{
    padding:0;
}
header#sticky {
    background: transparent;
    text-align: left;
}

header#sticky .logo {
    margin: 0;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    padding: 0;
    top:15px;
    left:15px;
    text-align: center;
    position: absolute;
}

.logo .demo-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3D(-50%,-50%,0);
}
header#sticky .logo [class^="icon-"]:before, 
header#sticky .logo [class*=" icon-"]:before {
    line-height: 100px;
    font-size: 65px;
}
header#sticky .menu-trigger {
    position: absolute;
    top:15px;
    right: 15px;
    padding: 0;
    width: 70px;
    height: 70px;
    display: block;
    cursor: pointer;
    background: #bda26f
}
.menu-trigger span {
    height: 2px;
    background: white;
    width: 30px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    /*-webkit-transition:0.15s ease, opacity 0s ease;
    -moz-transition:0.15s ease, opacity 0s ease;
    -ms-transition:0.15s ease, opacity 0s ease;
    transition:0.15s ease, opacity 0s ease;*/
}
.menu-trigger span:nth-child(3n+1) {
    top: 25px;
}

.menu-trigger span:nth-child(3n+2) {
    top: 35px;
}

.menu-trigger span:nth-child(3n+0) {
    top: 45px;
}
/*
.nav-active .menu-trigger span:nth-child(3n+1) {
-webkit-transform: translateY(10px) rotate(45deg);
-moz-transform: translateY(10px) rotate(45deg);
-ms-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}

.nav-active .menu-trigger span:nth-child(3n+0) {
-webkit-transform: translateY(-10px) rotate(-45deg);
-moz-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}

.nav-active .menu-trigger span:nth-child(3n+2) {
opacity: 0;
}

*/

body.solarium header#sticky ul li a{
    color: black;
}





/*-- nav --*/

nav {
    display: none;
    position: fixed;
    width: 100%;
    z-index: 9999;
    background: #171717;
    text-align: center;
    box-sizing: border-box;
    height: 100%;
}
.solarium nav{
    background:white;
    color:black;
}
.solarium footer nav {
    background: transparent;
}
nav .logo-wrap{
    display: table;        
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 25px;
    border-bottom: 1px solid #3a3a3a;
    padding: 0 0 15px;
}
nav h1{
    color:white;
}
.solarium nav h1{
    color:black;
}
nav .logo {
    font-size: 80px;
    color: #bda26f;
    line-height: 100%;
    margin: 0 15px 0;
} 
nav .logo .demo-icon {
    position: static;
    transform: translate3D(0, 0, 0);
    top: initial;
    left: initial;
}
ul.social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}
ul.social li {
    display: inline-block;
    margin: 0 20px 0 0;
}

ul.social li:last-of-type {
    margin: 0;
}
ul.social li a {
    display: block;
    font-size: 28px;
    color: #bda26f;
}

.nav-active .page-wrap{
    display:none;
}
.nav-active footer{
    display:none;
}
nav .center {
    display: table;        
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: static;
    justify-content:center;
    align-items:center;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    top: initial;
    left: initial;
    height:100%;
    padding: 5vw 5vw 5vw 130px;
    overflow-y: scroll;
    box-sizing: border-box;
}
.social-wrap {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
        z-index: 1;
}

.social-wrap::after, 
.social-wrap::before {
    content: "";
    width: 1px;
    background: white;
    display: block;
    top: 130px;
    left: 65px;
    z-index: 1;
    position: absolute;
    height: calc(50% - 225px);
}
.social-wrap::after {
    top: initial;
    bottom: 60px;
    height: calc(50% - 155px);
}
.social-wrap ul.social {
    list-style: none;
    text-align: left;
    margin: 0 0 0 48px;
    width: auto;
    color: white;
    position: fixed;
    left: 0;
    top: 50%;
    background: transparent;
    z-index: 2;
    padding: 20px 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.social-wrap ul.social li {
    display: block;
    float: none;
    margin: 0 auto 18px;
}

.social-wrap ul.social li:last-of-type {
    margin: 0 auto 0;
}

nav::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1;
    opacity: 1;
    background-image: url(https://thedwellhotel.s3.amazonaws.com/matilda-midnight/images/mm-navbg2.png);
}
.solarium nav::after{
    background-image: url(https://thedwellhotel.s3.amazonaws.com/solarium/images/sunrise.png);
    opacity: 0.7;
}
nav .col.contact {
    padding: 0 0 0 10vw;
}




nav h2.hours {
    letter-spacing: 0.5px;
    color: white;
    margin: 8px 0 15px;
}

nav address {
    color: #8a8a8a;
}

ul.contact-list {
    list-style: none;
    margin: 15px auto;
    padding: 0;
    display: table;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.contact-list li a {
    color: #ffffff;
    font-size: 26px;
}

nav ul.contact-list li {
    margin: 0 10px;
}

nav ul.contact-list li a{
	display:block;
}

nav a.dwell-logo {
    display: block;
    font-size: 90px;
    color: #bda26f;
    border-top: 1px solid #3a3a3a;
    padding: 15px 0 0;
    margin: 25px 0 0;
}

nav .logo-wrap .logo.mm-logo {
    font-size: 92px;
}

nav .col.menu-cta {
    padding: 5vw 40px;
    box-sizing: border-box;
    background: #171717;
    border: 1px solid #bda26f;
    border-radius: 5px;
    width: 40%;
    position: relative;
    min-height: 65vh;
    display: table;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
nav .col.menu-cta::before {
    content: "";
    display: block;
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    background: #171717;
    position: absolute;
    z-index: -1;
    border-radius: 10px;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.65);
}
nav .col.contact {
    padding: 0 0 0 10vw;
    padding: 0 0 0 80px;
}

nav .menu-cta img {
    width: 70%;
    margin: 0 auto 30px;
    display: block;
    z-index: 0;
}
nav .menu-cta .text-wrap{
    position:relative;
    z-index:1;
}

.solarium nav .col.menu-cta {
    background: white;
}

.solarium .social-wrap::after, 
.solarium .social-wrap::before {
    background: black;
}


.solarium nav h2.hours {
    color: black;
}

.solarium ul.contact-list li a {
    color: black;
}

.solarium nav .logo-wrap, 
.solarium nav a.dwell-logo {
    border-color: #bda26f;
}
.solarium nav .col.menu-cta::before {
    background: white;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
}
.solarium nav address {
    color: black;
}

nav h1 {
    margin: 10px 0 30px;
    display: block;
}
nav ul.social.mob{
	display:none;
}









footer nav::after {
    display: none;
}


/*-- new intro styles --*/
#intro{
    height:100vh;
    padding:0;
}
#intro h1 {
    margin: 15px 0 35px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-size: 3.75em;
    line-height: 1.15;
}
#intro h2 {
    color: #d6ac61;
}
/*.solarium #intro h2{
    color:black;
}*/
#intro .center.wrapper { 
    max-width: 80%; 
}

.solarium #intro{
    background-color: #a5dadc;
    /*background-color:white;*/
}
.solarium #intro::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
 
    
    /*-- morning 
    background: #A1D8E9;
    background: -webkit-linear-gradient(to top, #a1d8ea, #ffdc84 , #A1D8E9);
    background: linear-gradient(to top, #a1d8ea 20%, #ffdc84 55%, #A1D8E9 100%);--*/
    
    
    /*-- new sun --*/
    background: #aadff1;
    background: -webkit-linear-gradient(to top, #aadff1, #ffdc84 , #b0e7f7);
    background: linear-gradient(to top, #aadff1 20%, #ffe98e 55%, #b0e7f7 100%);
}
.solarium #intro::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*background: radial-gradient(circle, rgb(255, 181, 0) 0%, rgb(255, 234, 161) 22%, rgba(161,216,234,0) 45%);*/
    background: radial-gradient(circle, rgb(251, 209, 80) 0%, rgb(255, 240, 189) 22%, rgba(161,216,234,0) 45%);
}


/* ============================================================================================== 
Adapted from :
Copyright (c) 2018 by WebSonick (https://codepen.io/WebSonick/pen/vjmgu) | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}



.stars, .twinkling {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    display:block;
}

.stars {
    background:#171717 url(https://thedwellhotel.s3.amazonaws.com/matilda-midnight/images/stars.png) repeat top center;
    z-index:0;
}

.twinkling{
    background:transparent url(https://thedwellhotel.s3.amazonaws.com/matilda-midnight/images/twinkling_grey2.png) repeat top center;
    z-index:1;
    -moz-animation:move-twink-back 200s linear infinite;
    -ms-animation:move-twink-back 200s linear infinite;
    -o-animation:move-twink-back 200s linear infinite;
    -webkit-animation:move-twink-back 200s linear infinite;
    animation:move-twink-back 200s linear infinite;
}



@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}
@keyframes move-clouds {
    from {background-position:500px 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds {
    from {background-position:500px 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds {
    from {background-position:500px 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds {
    from {background-position: 500px 0;}
    to {background-position:10000px 0;}
}
.clouds,
.clouds-back {
    position:absolute;
    left:0;
    right:0;
    bottom:-35%;
    width:100%;
    height:100%;
    display:block;
}
.clouds{
    bottom: -40%;
    background: transparent url(https://thedwellhotel.s3.amazonaws.com/matilda-midnight/images/neb-cloud2.png) bottom left / contain repeat-x;
    z-index: 2;
    -moz-animation: move-clouds 600s linear infinite;
    -ms-animation: move-clouds 600s linear infinite;
    -o-animation: move-clouds 600s linear infinite;
    -webkit-animation: move-clouds 600s linear infinite;
    animation: move-clouds 600s linear infinite;
    opacity: 0.65;
}
.clouds-back{
    top: -30%;
    bottom: initial;
    background: transparent url(https://thedwellhotel.s3.amazonaws.com/matilda-midnight/images/neb-cloud3.png) top center / contain repeat-x;
    z-index: 3;
    -moz-animation: move-clouds-back 1800s linear infinite;
    -ms-animation: move-clouds-back 1800s linear infinite;
    -o-animation: move-clouds-back 1800s linear infinite;
    -webkit-animation: move-clouds-back 1800s linear infinite;
    animation: move-clouds-back 1800s linear infinite;
}
.solarium .clouds{
    bottom:initial;
    background:transparent url(https://thedwellhotel.s3.amazonaws.com/solarium/images/clouds2.png) bottom left / contain repeat-x;
     z-index:1;
    -moz-animation:move-clouds 400s linear infinite;
    -ms-animation:move-clouds 400s linear infinite;
    -o-animation:move-clouds 400s linear infinite;
    -webkit-animation:move-clouds 400s linear infinite;
    animation:move-clouds 400s linear infinite;
    opacity:1;
}
.solarium .clouds-back{
    background:transparent url(https://thedwellhotel.s3.amazonaws.com/solarium/images/clouds-large.png) top center / contain repeat-x;
     z-index:2;
    -moz-animation:move-clouds-back 1600s linear infinite;
    -ms-animation:move-clouds-back 1600s linear infinite;
    -o-animation:move-clouds-back 1600s linear infinite; 
    -webkit-animation:move-clouds-back 1600s linear infinite;
    animation:move-clouds-back 1600s linear infinite;
    opacity:1;
}

/* ============================================================================================== 
end of licensed styles

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












/*-- flex styles --*/
.pad-box {
    box-sizing: border-box;
    padding: 8vw 6vw;
}
.flex{
    width:100%;
    display: table;        
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content:flex-start;
    align-items:flex-start;
}
.flex.gutter{
    justify-content: space-between;
}
.flex > *{
    position:relative;
    overflow:hidden;
}
.no-flexbox .flex > *{
    display:table-cell;
}
.half .pad-box {
    text-align: center;
}
.half{
    width:50%;
}

/*-- new mm cocktail menu --*/
.menu-intro {
    margin: 0 0 5vw;
}
.solarium .menu-intro{
    margin:0 0 3vw;
}
img.menu-img {
    display: block;
    margin: -5vw auto 40px;
    width: 65%;
    min-width: 250px;
}
.solarium img.menu-img {
    display: block;
    margin: -5vw auto -18vw;
    width: 71%;
    min-width: 250px;
    background: white;
    max-width:none;
}
.solarium img.sol-bottom{
    width: 71%;
    margin: -60px auto 10vh;
}
.menu-intro h2 {
    margin: 0 0 10px;
}
body {
    counter-reset: item;
}
.cocktail-area .desc {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: "Montserrat";
    font-weight: 300;
    font-family: "Lato";
    box-sizing: border-box;
    align-self: center;
    flex-grow: 1;
    width: 100%;
    font-size: 0.7em;
    line-height: 1.75;
    padding: 20px 12px;
    justify-content: center;
    text-align: center;
    display: table;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: center;
}

.cocktail-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cocktail-area li{
    width: calc(50% - 30px);
    border:1px solid;
    box-sizing: border-box;
    margin: 0 0 60px;
    align-self:stretch;
    display: table;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow:column;
    align-items:center;
    justify-content: center;
    overflow: visible;
    position: relative;
    counter-increment: item;
    background: #171717;
}

.cocktail-area h1 {
    font-size: 1em;
    line-height: 1.2;
    letter-spacing: 0.28em;
    font-weight: 800;
    box-sizing: border-box;
    padding: 15px 20px;
    width: 100%;
    margin: 0;
}
.cocktail-area h1.name {
    padding: 40px 20px 15px;
    box-sizing: border-box;
    margin: 0;
    border-bottom: 1px solid white;
    position:relative;
}
.cocktail-area h1.price{
    align-self:flex-end;
    border-top: 1px solid;
    position:relative;
}
.cocktail-area li:nth-of-type(1)::after, 
.cocktail-area li:nth-of-type(2)::after, 
.cocktail-area li:nth-of-type(3)::after,
.cocktail-area li:nth-of-type(4)::after,
.cocktail-area li:nth-of-type(5)::after,
.cocktail-area li:nth-of-type(6)::after{
    content: "";
    display: block;
    width: 1px;
    height: 60px;
    position: absolute;
    background: white;
    bottom: -60px;
}
.cocktail-area li::before {
    content: counter(item);
    display:block;
    font-size:20px;
    border-radius:50%;
    border:1px solid white;
    width:50px;
    height:50px;
    line-height:48px;
    position:absolute;
    top:-25px;
    background: #171717;
}

.cocktail-area h1.name::before, 
.cocktail-area h1.name::after,
.cocktail-area h1.price::before, 
.cocktail-area h1.price::after{
    content: "";
    background: white;
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    left: -4px;
    bottom: -4px;
}

.cocktail-area h1.name::after,
.cocktail-area h1.price::after{
    left: initial;
    right: -4px;
}
.cocktail-area h1.price::before,
.cocktail-area h1.price::after{
    top:-4px;
    bottom:initial;
}


/*-- solarium cocktail styles --*/
.solarium .cocktail-area li {
    background: white;
    border-image: url(https://thedwellhotel.s3.amazonaws.com/solarium/images/window_nopane.svg) 55 35 38 35 stretch stretch;
    border-width: 50px 35px 50px 35px;
    border-style: inset;
}

.solarium .cocktail-area h1 {
    color: black;
}

.solarium .cocktail-area h1.name {
    border: none;
    font-weight: 400;
    padding: 15px 0px 10px;
    font-family: "Montserrat";
    font-size: 1.3em;
    line-height: 1.3;
    letter-spacing: 0.3em;
}
.solarium .cocktail-area .desc {
    font-family: "Playfair Display";
    text-transform: capitalize;
    letter-spacing: 0.12em;
}
.solarium .cocktail-area h1.name::before, 
.solarium .cocktail-area h1.name::after,
.solarium .cocktail-area h1.price::before, 
.solarium .cocktail-area h1.price::after {
    display: none;
}



.solarium .cocktail-area li::before{
    display: none;
}
.solarium .cocktail-area li::after {
    content: "";
    display: block;
    width: 3vw;
    border: 2px solid black;
    bottom: -112px;
    height: 70px;
    z-index: -1;
    position: absolute;
    background: white;
}
.solarium .cocktail-area li:nth-of-type(5)::after,
.solarium .cocktail-area li:nth-of-type(6)::after{
    display:none;
}
.pane {
    border: 1px solid;
    flex-grow: 1;
    width:100%;
    box-sizing:border-box;
    display: table;        
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: column;
}

/*-- solarium intro --*/

.spin-sun{
    width: 60%;
    display: block;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 350s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 350s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    height: auto;
    left: 0;
    right: 0;
    z-index: 1;
    margin: auto;
    align-self: center;
}



@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}



#intro .sun{
    display:block;
    position:absolute;
    width:80%;
    top:50%; 
    left:0; 
    right:0; 
    margin:0 auto; 
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    z-index:3;
}
#intro .hand-static{
    z-index:3; 
    width:90%; 
    top:50%; 
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    position:absolute; 
    margin:0 auto; 
    opacity:1;
    left:0; 
    right:0;
}
 #intro img.hand-static.white{
    	display:none;
    }



/*-- menu callout --*/
.menu-callout {
    overflow:hidden;
    padding:0;
    height:100vh;
    text-align:center;
    position: relative;
}
.menu-callout .unslider img{
    width:auto;
    height:100%;
    position:absolute;
    left:50%;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
}
.menu-callout .overlay {
    position: absolute;
    width:100%;
    height:100%;
    margin: 0 auto;
    top: 0;
    right: 0;
    bottom:0;
    left: 0;
    padding: 0px;
    text-align:center;
    z-index: 2;
}

.menu-callout .overlay .border {
    border: 1px solid #D2B377;
    padding: 35px 30px 40px;
    margin:12px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    top: initial;
    right: initial;
    bottom: initial;
    left: initial;
    position: static;
}
.menu-callout .card {
    background: #171717;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.menu-callout .split-bg {
    position: absolute;
    width: 100%;
}
.split-bg .unslider {
    width: 50%;
    position: absolute;
    height:100vh;
    padding:0;
}
.split-bg .unslider:nth-child(2n+0){
    right: 0;
    top: 0;
    float: right;
}
.split-bg .unslider-fade {
    height:100vh;
    padding:0;
}
.menu-callout a.tel {
    color: white;
    font-size: 20px;
    line-height: 20px;
    font-weight: 300;
    margin: 0 0 12px;
    display: block;
    text-decoration: none;
    font-family: "Lato";
}
.menu-callout a.email {
    display: block;
    text-decoration: none;
    color: #e5b768;
    font-size: 15px;
    line-height: 20px;
}
.menu-callout p.hours{
    font-family: "Lato";
    font-weight: 300;
    border-bottom: 1px solid #565656;
    padding: 0 0 15px 0;
    margin: 0 0 20px;
}
.menu-callout .social {
    margin: 20px 0 0 0;
    list-style:none;
    padding:0;
}
.menu-callout .social li {
    display: inline-block;
    margin: 0 30px;
}
.menu-callout .social li:first-of-type{
    margin:0;
}
.menu-callout .social li a {
    font-size: 22px;
    display: block;
    text-decoration: none;
    font-family: "Lato";
    color: #e5b768;
    line-height: 20px;
}
.solarium .menu-callout .social li:first-of-type {
    margin: 0 10px 0 0;
}

.solarium .menu-callout .social li:last-of-type {
    margin: 0 0 0 10px;
}
.menu-callout .social li a span{
    display:block;
    width:1px;
    height:1px;
    text-indent:-9999999px;
}
.solarium .menu-callout .card {
    background: rgba(255, 255, 255, 1);
}
.menu-callout .card.one-fourth {
    width: 25%;
}   
.solarium .menu-callout a.tel {
    color: black;
}

.solarium .menu-callout p.hours {
    border-color: #ababab;
}
.menu-nav a br{
    display:none;
}
.split-bg .unslider ul li {
    background-size: cover;
    background-position: 50% 50%;
}





/*-- menu page --*/
body.matilda{
    background: #171717;
    color:white;
}
body.matilda .menu-items p,
body.matilda .menu-items h2,
body.matilda .menu-section h2.section-title,
body.matilda .wine .menu-items .price-block,
body.matilda .menu-section p.caption{
    color:white;
}
body.matilda .menu-section hr{
    border-bottom: 1px solid white;
}
.menu-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
}

.menu-nav ol {
    list-style: none;
    text-align: left;
    margin: 0 0 0 40px;
    width: auto;
    color: white;
    position: fixed;
    left: 0;
    top: 50%;
    background: #171717;
    z-index: 2;
    padding: 15px 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.solarium .menu-nav ol{
    background: white;
    color: black;
}
.menu-block section{
    box-sizing:border-box;
    padding:8vh 0;
}
.menu-block section#cocktails {
    padding: 0 0 10vh;
}
.menu-nav::after {
    content: "";
    width: 1px;
    background: white;
    display: block;
    top: 130px;
    bottom: 60px;
    left: 65px;
    z-index: 1;
    position: absolute;
}
.solarium .menu-nav::after{
    background: black;
}
.menu-block {
    width: 66.666%;
    margin: 0 auto;
}
.menu-section{
    margin: 0 0 0vh;
}

.menu-section.half {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    padding: 0 30px 0 0;
}

.menu-section.half + .menu-section.half {
    padding: 0 0 0 30px;
}
.menu-nav a {
    color: white;
    transition:color 0.35s ease;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0px;
    display: block;
    margin: 0 0 8px;
}
.solarium .menu-nav a{
    color:black;
}

.menu-nav a.current {
    color: #e5b76b;
}


/* -- section titles --*/
.menu-section h2.section-title {
    color: black;
    text-align: center;
    position: relative;
    padding: 0px 0 0 0;
    margin: 0 0 0px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.45em;
    letter-spacing: 0.3em;
    line-height: 1.4;
}
.menu-section hr{
    border: 0;
    height: 0;
    border-bottom: 1px solid black;
    margin:20px 0 30px;
}

/*-- menu items --*/
.menu-items h2 {
    color: black;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    line-height: 1.5;
    margin: 0;
}

.menu-items p {
    color: black;
    font-size: 0.89em;
    line-height: 1.4;
}
.menu-items li h2 + p {
    margin: 8px 0 0;
}

.menu-items li {
    vertical-align: top;
    margin: 0 0 30px 0;
    width: 50%;
    display: inline-block;
    float: left;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
}

.menu-items {
    margin: 0px 0 40px 0;
    padding: 0;
    list-style: none;
}

/* -- beer items --*/
.menu-items .price {
    font-family: "Lato";
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 0 2px;
    font-size: 0.78em;
    line-height: 1.5;
}
.beer .menu-items li{
    width:50%;
}
.beer .menu-items .price {
    font-size: 1em;
}
/* -- dessert box & items --*/
.menu-section.dessert {
    border: 2px solid #D2B377;
    margin: 0 0 50px 0;
}

.dessert .menu-items li {
    width: 50%;
}

.menu-section.dessert h2.section-title:before {
    width: 0;
    height: 0;
    background: transparent;
}

.menu-section.dessert h2.section-title {
    margin: -21px 0 50px 0;
}
/* -- wine items --*/
.wine .menu-items li {
    width: 50%;
    text-align: left;
    position:relative;
}
.wine .menu-items .info-block {
    padding: 0 60px 0 0;
}
.wine .menu-items.glass .info-block {
    padding: 0 110px 0 0;
}

.wine .menu-items .price-block {
    color: black;
    right: 20px;
    top: -3px;
    position: absolute;
    line-height: 20px;
}

.menu-items.glass .price-block span.price {
    margin: 0 10px 0 0;
}

.wine .menu-items .price {
    margin: 0;
    
}

#dinner-menu .caption,
#brunch-menu .caption{
    color: black;
    font-style: italic;
    text-align: center;
    margin: 70px 0 0;
}

.wine.half .menu-items li {
    width: 100%;
    float: none;
    clear: both;
    display: block;
}

.menu-section p.caption{
    color: black;
    font-size: 0.78em;
    line-height: 1.5;
    margin: 10px 0 0;
    
}
p.wine-desc {
    margin: 0 0px;
}
p.wine-desc + p.wine-desc {
    margin: 5px 0px 0;
}

footer{
    position:relative;
    z-index:3;
    background: black;
}




/*-- media queries --*/
@media only screen and (max-width: 1500px){
    .menu-callout .card.one-fourth {
        width: 35%;
    }
}
@media only screen and (max-width: 1350px){
    
    .menu-callout .card.one-fourth {
        width: 45%;
    }
}
@media only screen and (max-width: 1024px){
    .menu-callout .card.one-fourth {
        width: 50%;
    }
    .menu-block {
        width: calc(78% - 70px);
        margin: 0 70px 0 auto;
    }
    .cocktail-area li {
        width: calc(50% - 20px);
    }
    .solarium .cocktail-area li {
        width: calc(50% - 10px);
    }
    .solarium .cocktail-area h1.name {
        font-size: 1.1em;
        letter-spacing: 0.2em;
    }
    
    
    nav .col.menu-cta {
        min-height: 55vh;
        width: 65%;
    }
    
    
    
    nav .col.contact {
        padding: 0 0 0 50px;
    }
    nav .logo {
        font-size: 70px;
    }
    nav .logo-wrap .logo:last-of-type {
        font-size: 82px;
    }
    
    .logo.solarium {
        font-size: 300px;
    }
    
}
@media only screen and (max-width:950px){
    .clouds-back {
        top: -8%;
    }
    .clouds {
        bottom: -50%;
    }
    .solarium .clouds-back {
        top: 10%;
    }
    
    .solarium .clouds {
        top: 45%;
    }
    
}
@media only screen and (max-width:850px){
    .wine .menu-items.glass .info-block {
        padding: 0 110px 0 0;
    }
    .wine .menu-items .price-block {
        color: black;
        right: 0px;
        top: -3px;
        position: absolute;
        line-height: 20px;
    }
    .menu-items.glass .price-block span.price {
        margin: 0 0 0 10px;
    }
}

@media only screen and (max-width:768px){
    header#sticky .logo [class^="icon-"]:before, 
	header#sticky .logo [class*=" icon-"]:before {
        line-height: 80px;
        font-size: 55px;
    }
    header#sticky .logo {
        width: 80px;
        height: 80px;
        top: 8px;
        left:10px;
    }
    header#sticky .menu-trigger {
        right: 12px;
        width: 50px;
        height: 50px;
    }
    .menu-block {
        width: calc(100% - 60px);
        margin: 0 auto 0 60px;
    }
    .menu-trigger span {
        width: 25px;
    }
    .menu-trigger span:nth-child(3n+1) {
        top: 15px;
    }
    .menu-trigger span:nth-child(3n+0) {
        top: 35px;
    }
    .menu-trigger span:nth-child(3n+2) {
        top: 25px;
    }  
    
    .menu-nav ol {
        margin: 0 0 0 22px;
    }
    
    .menu-nav a {
        font-size: 12px;
    }
    
    .menu-nav a br{
        display:initial;
    }
    .menu-nav::after {
        top: 100px;
        bottom: 40px;
        left: 50px;
    }
    
    .menu-items li {
        padding: 0 15px;
    }
    .menu-section.half {
        padding: 0 15px 0 0;
    }
    .menu-section.half + .menu-section.half {
        padding: 0 0 0 15px;
    }
    .wine.half .menu-items li {
        padding: 0 8px 0;
    }
    .solarium .cocktail-area li::after {
        content: "";
        display: block;
        width: 4vw;
        border: 1px solid black;
        bottom: -112px;
        height: 70px;
        z-index: -1;
        position: absolute;
        background: white;
    }
    
    
    
    
    .social-wrap::after, .social-wrap::before {
        left: 50px;
    }
    
    .social-wrap ul.social {
        margin: 0 0 0 33px;
    }
    
    .social-wrap::after {
        bottom: 40px;
    }
    
    
    
    
    
    
    nav h1 {
        font-size: 35px;
    }
    
    nav .col.contact {
        padding: 0;
        margin: 50px 0 0;
    }
    
    nav .center {
        display: block;
        text-align: center;
        padding: 150px 50px 20px 100px;
        box-sizing:border-box;
    }
    
    nav .col.menu-cta {
        width: 85%;
        min-height: auto;
        margin: 0 auto;
    }
    
    .logo.solarium {
        font-size: 250px;
    }
}
@media only screen and (max-width:700px){
    .menu-section.half{
        width:100%;
        clear:both;
        display:block;
        float:none;
    }
    .menu-items li, 
    .dessert .menu-items li,
    .beer .menu-items li,
    .wine .menu-items li{
        width: 100%;
        display: block;
        float: none;
        padding: 0;
    }
    .wine .menu-items li {
        padding: 0 10px;
    }
    .menu-section.half,
    .menu-section.half + .menu-section.half{
        padding:0;
    }
    .wine.half .menu-items li {
        padding: 0 0px 0;
    }
    #intro h1 {
        font-size: 2.75em;
        line-height: 1.25;
    }
}
@media only screen and (max-width: 650px){
    
    header#sticky ul.mob{
        background: rgba(255, 255, 255, 0.95);
    }
    header#sticky ul.mob li:first-child,
    header#sticky ul.mob li{
        border-color:#dadada;
    }
    #intro .center.wrapper {
        max-width: none; 
    }
    
    
    #intro img.hand-static {
        position: static;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(-0%);
        transform: translateY(-0%);
        margin: 60px auto 20px;
        width: 80%;
        opacity: 0.5;
    }
    
    #intro .center.wrapper {
        position: relative;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(-0%);
        transform: translateY(-0%);
        margin: 0 0 60px;
        top:initial;
    }
    
    #intro {
        height: auto;
    }
    
    #intro .overlay {
        position: relative;
    }
    #intro img.sun {
        position: relative;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        margin: 50px auto 0px;
    }
    .solarium #intro::before {
        height: 60%;
        background: radial-gradient(circle, rgb(255, 181, 0) 0%, rgb(255, 234, 161) 11%, rgba(161,216,234,0) 55%);
    }
    .logo.solarium {
        font-size: 200px;
    }
    .solarium .clouds-back {
        top: -15%;
    }
    .solarium .clouds {
        bottom: initial;
        top: 20%;
    }
    #intro img.hand-static.grey{
    	display:none;
    }
    #intro img.hand-static.white{
        display:block;
    }
    .clouds-back {
        top: -2%;
    }
    .clouds {
        bottom: -30%;
    }
}

@media only screen and (max-width: 600px){
    .menu-callout .card.one-fourth{
        width: 70%;
    }
    .menu-nav{
        top: initial;
        bottom: 0px;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #b7b7b7;
        height: 60px;
        z-index: 10;
        position: fixed;
    }
    .solarium .menu-nav{
        background:black;
    }
    .menu-nav::after{
        display:none;
    }
    .menu-nav .scroll-wrap{
        white-space: nowrap;
        overflow: auto;
        position: absolute;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    .menu-nav ol,
    .solarium .menu-nav ol{
        margin: 0;
        left: 0;
        right: 0;
        overflow: auto;
        white-space: nowrap;
        box-sizing: border-box;
        top: initial;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        background: transparent;
        padding: 13px 15px 7px;
        
    }
    .menu-nav ol li{
        display:inline-block;
        margin:0 20px 0 0;
        
    }
    .menu-nav ol li:last-of-type{
        margin:0 0 0 0;
    }
    .menu-nav a {
        font-size: 14px;
        color:black;
    }
    .solarium .menu-nav a {
        color:white;
    }
    .solarium .menu-nav a.current {
        color: #e5b76b;
    }
    .menu-nav a br{
        display:none;
    }
    .menu-block {
        width: 100%;
        margin: 0 auto;
    }
    .cocktail-area li {
        width: calc(50% - 12px);
    }
    
    .social-wrap {
        display:none;
    }
    
    .social-wrap ul.social{
        display:none;
    }
    
    .social-wrap ul.social li {
        display: inline-block;
        float: left;
        margin: 0 20px 0 0;
    }
    .social-wrap::after, 
	.social-wrap::before{
       display:none;
    }
    nav .center{
        padding: 80px 30px 30px;
    }
    ul.social li a {
        font-size: 24px;
        color: #929292;
    }
    .split-bg .unslider{
    	width:100%;
    }
    .split-bg .unslider + .unslider{
    	display:none;
    }
    
    nav ul.social.mob{
        display:block;
        margin: -40px 0 65px;
    }
    
    
    .menu-callout .overlay {
        position: static;
        width: auto;
        height: auto;
    }
    
    .menu-callout .split-bg {
        position: static;
        height: 100vh;
        display: block;
    }
    
    .menu-callout .card.one-fourth {
        width: 100%;
        position: static;
        transform: translateY(0);
    }
    
    .menu-callout {
        height: auto;
    }
    
}

@media only screen and (max-width: 550px){
    .cocktail-area li,
    .solarium .cocktail-area li{
         width: 100%;
    }
    
    .cocktail-area li::after,
    .cocktail-area li:nth-of-type(1)::after, 
    .cocktail-area li:nth-of-type(2)::after, 
    .cocktail-area li:nth-of-type(3)::after{
        content: "";
        display: block;
        width: 1px;
        height: 60px;
        position: absolute;
        background: white;
        bottom: -60px;
    } 
    .cocktail-area li:last-of-type::after{
        display:none;
    }
    .solarium .menu-intro {
        margin: 0 0 8vw;
    }
    .solarium img.sol-bottom{
        width: 91%;
        margin: -45px auto 50px;
    }
    .solarium img.menu-img {
        margin: 0vw auto -125px;
        width: 91%;
        min-width: 250px;
    }
    .solarium .cocktail-area li{
        margin:0 0 35px;
    }
    .solarium .cocktail-area li::after, 
    .solarium .cocktail-area li:nth-of-type(5)::after, 
    .solarium .cocktail-area li::before {
        content: "";
        display: block;
        width: 5.5vw;
        border: 1px solid black;
        bottom: -110px;
        height: 60px;
        z-index: -1;
        position: absolute;
        background: white;
        top: initial;
        border-radius: 0;
    }
    .solarium .cocktail-area li::after {
        left: 2vw;
    }
    .solarium .cocktail-area li::before {
        right: 2vw;
    }
    .solarium .cocktail-area li:nth-of-type(6)::before,
    .solarium .cocktail-area li:nth-of-type(6)::after{
        display:none;
    }
    #intro h1 {
        font-size: 2.25em;
        line-height: 1.25;
    }
    
    
    
    
    nav .center {
        padding: 70px 15px 30px;
    }
    nav .menu-cta img {
        width: 80%;
        margin: 0 auto 20px;
    }
    nav .col.menu-cta {
        width: 90%;
        padding: 25px 15px 35px;
    }
    
    nav .col.menu-cta::before {
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
    }
    nav h1 {
        font-size: 30px;
        margin: 10px 0 20px;
    }
    h2 {
        font-size: 0.63em;
        letter-spacing: 0.24em;
        line-height: 1.2;
    }
}
@media only screen and (max-width: 480px){
    
    img.menu-img {
        margin: 5vw auto 30px;
        width: 90%;
    }
    .menu-intro {
        margin: 0 0 15vw;
    }
    
    
    
}























/*--- mm burger button --*/

@-webkit-keyframes burger1x {
    from {
        top:25px;
    }
    
    to {
        top: 35px;
    }
}

@keyframes burger1x {
    from {
        top:25px;
    }
    
    to {
        top: 35px;
    }
}
@-webkit-keyframes rotate1 {
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(-45deg);
    }
}

@keyframes rotate1 {
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(-45deg);
    }
}
@-webkit-keyframes fadeOut2 {
    from {
        opacity:1;
    }
    
    to {
        opacity:0;
    }
}

@keyframes fadeOut2 {
    from {
        opacity:1;
    }
    
    to {
        opacity:0;
    }
}

@-webkit-keyframes burger3x {
    from {
        top:45px;
    }
    
    to {
        top: 35px;
    }
}

@keyframes burger3x {
    from {
        top:45px;
    }
    
    to {
        top:35px;
    }
}
@-webkit-keyframes rotate3 {
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(45deg);
    }
}

@keyframes rotate3 {
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(45deg);
    }
}
.trigger{
    cursor:pointer;
}
.nav-active header#sticky .menu-trigger span:nth-child(3n+1){
    -webkit-animation: burger1x 0.25s both, rotate1 0.25s both;
    animation: burger1x  0.25s both, rotate1 0.25s both;
    -webkit-animation-delay: 0s, 0.25s; 
    animation-delay: 0s, 0.25s; 
}
.nav-active header#sticky .menu-trigger span:nth-child(3n+2){
    -webkit-animation: fadeOut2 0.25s both;
    animation: fadeOut2 0.25s both;
}
.nav-active header#sticky .menu-trigger span:nth-child(3n+0){
    -webkit-animation: burger3x 0.25s both, rotate3 0.25s both;
    animation: burger3x 0.25s both, rotate3 0.25s both;
    -webkit-animation-delay: 0s, 0.25s; 
    animation-delay: 0s, 0.25s; 
}


@-webkit-keyframes burger1o {
    from {
        top:35px;
    }
    
    to {
        top: 25px;
    }
}

@keyframes burger1o {
    from {
        top:35px;
    }
    
    to {
        top: 25px;
    }
}
@-webkit-keyframes rotateBack1 {
    from {
        transform: rotate(-45deg);
    }
    
    to {
        transform: rotate(0deg);
    }
}

@keyframes rotateBack1 {
    from {
        transform: rotate(-45deg);
    }
    
    to {
        transform: rotate(0deg);
    }
}
@-webkit-keyframes fadeIn2 {
    from {
        opacity:0;
    }
    
    to {
        opacity:1;
    }
}

@keyframes fadeIn2 {
    from {
        opacity:0;
    }
    
    to {
        opacity:1;
    }
}

@-webkit-keyframes burger3o {
    from {
        top:35px;
    }
    
    to {
        top: 45px;
    }
}

@keyframes burger3o {
    from {
        top:35px;
    }
    
    to {
        top:45px;
    }
}
@-webkit-keyframes rotateBack3 {
    from {
        transform: rotate(45deg);
    }
    
    to {
        transform: rotate(0deg);
    }
}

@keyframes rotateBack3 {
    from {
        transform: rotate(45deg);
    }
    
    to {
        transform: rotate(0deg);
    }
}

header#sticky .menu-trigger span:nth-child(3n+1){
    -webkit-animation: rotateBack1 0.25s both, burger1o 0.25s both;
    animation: rotateBack1 0.25s both, burger1o 0.25s both;
    -webkit-animation-delay: 0s, 0.25s; 
    animation-delay: 0s, 0.25s; 
}
header#sticky .menu-trigger span:nth-child(3n+2){
    -webkit-animation: fadeIn2 0.25s both;
    animation: fadeIn2 0.25s both;
}
header#sticky .menu-trigger span:nth-child(3n+0){
    -webkit-animation: rotateBack3 0.25s both, burger3o  0.25s both;
    animation: rotateBack3 0.25s both, burger3o 0.25s both;
    -webkit-animation-delay: 0s, 0.25s; 
    animation-delay: 0s, 0.25s; 
}


@media only screen and (max-width:768px){
    @-webkit-keyframes burger1x {
        from {
            top:15px;
        }
        
        to {
            top: 25px;
        }
    }
    
    @keyframes burger1x {
        from {
            top:15px;
        }
        
        to {
            top: 25px;
        }
    }
    @-webkit-keyframes burger3x {
        from {
            top:35px;
        }
        
        to {
            top:25px;
        }
    }
    @keyframes burger3x {
        from {
            top:35px;
        }
        
        to {
            top:25px;
        }
    }
    
    @-webkit-keyframes burger1o {
        from {
            top:25px;
        }
        
        to {
            top: 15px;
        }
    }
    
    @keyframes burger1o {
        from {
            top:25px;
        }
        
        to {
            top: 15px;
        }
    }
    @-webkit-keyframes burger3o {
        from {
            top:25px;
        }
        
        to {
            top: 35px;
        }
    }
    
    @keyframes burger3o {
        from {
            top:25px;
        }
        
        to {
            top:35px;
        }
    }
}







/*-- scroll indicators --*/

.scroll-indicator {
    position: absolute;
    z-index: 1;
    bottom: 20vmin;
    color: #e5b76b;
    text-align: center;
    display: block;
    margin: 0 auto;
    left:0;
    right:0;
    width: 24px;
    cursor: pointer;
}
.scroll-indicator .demo-icon{
    display:block;
    opacity:0;
    -webkit-animation: fadeIn 2.5s infinite ease;
    animation: fadeIn 2.5s infinite ease;
}
.scroll-indicator .lg{ 
    font-size:24px;
}
.scroll-indicator .md{
    font-size:18px;
    margin: 30px 0;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;

}
.scroll-indicator .sm{
    font-size:12px;
	-webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
    }
    
    40% {
        opacity:1;
    }
		80%{
			opacity:0;
		}    
    100% {
        opacity:0;
    }
    
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    
    40% {
        opacity:1;
    }
		80%{
			opacity:0;
		}    
    100% {
        opacity:0;
    }
  
}
@media only screen and (max-width:768px){
	.scroll-indicator{
    	    bottom: 8vmin;
    } 
    .scroll-indicator .lg{
        font-size: 18px;
    }
    .scroll-indicator .md{
        font-size: 12px;
        margin: 20px 0;
    }
    .scroll-indicator .sm{
        font-size: 8px;
    }
}






/*-- solarium scroll indicator --*/
.solarium .scroll-indicator {
    position: relative;
    width: 50px;
    height: 50px;
    bottom: initial;
}

.solarium .slider .logo .demo-icon {
    position: static;
}

.scroll-indicator span.line {
    display: block;
    width: 3px;
    height: 80px;
    overflow:hidden;
    position: absolute;
    top: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 5px, #ebca52 50px, #fff0 105px);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 5px, #ffffff 50px, #fff0 105px);
    background-size: 3px 200px;
    -webkit-animation: rays 14s infinite linear;
    animation: rays 14s infinite linear;
    background-color:#ebca5200;
}

@-webkit-keyframes rays {
  0% {
    background-position-y: -100px;
  }
  100% {
    background-position-y: 1000px;
  }
}
@keyframes rays {
  0% {
    background-position-y: -100px;
  }
  100% {
    background-position-y: 1000px;
  }
}
.scroll-indicator span.line.left {
    left: 0;
    transform: rotate(15deg);
}
.scroll-indicator span.line.right {
    right: 0;
    transform: rotate(-15deg);
}

.scroll-indicator span.line.middle {
    margin: 0 auto;
    left: 0;
    right: 0;
    height: 110px;
}