/*//////////////////////////////////////////////////////////////////////////
                        /                                                                          /
                        /    REMEMBER: THIS FILE IS LOCATED @ assets/components/csssweet/custom/   /                                                              
                        /                                                                          /
                        /                                                                          /
                        //////////////////////////////////////////////////////////////////////////*/


/*  body {overflow: hidden;} */   /* uncomment when using .grid-margin-x and .grid-margin-y with .grid-frame */




/* body {font-family: 'Ubuntu Condensed', sans-serif;} */
 body {font-family: Optima, sans-serif;
     background: #ddd;
 } 

  
p {line-height: 1.6;
    margin-bottom: 0;
}

body a {
    text-decoration: underline;
    color: #000;
}



/* ChrisRayPaintings ThoughtfulDAUBS */


.header-generic, .header-home {padding: 2em 1em 1em 1em; text-align: center;}

/* .header-generic p:nth-of-type(1) span:nth-of-type(1) {color: teal;} */
/* .header-generic p:nth-of-type(1) {color: #999;} */

.header-generic p:nth-of-type(1),
.header-home p:nth-of-type(1){
    font-family: 'Babylonica', cursive;
    font-size: 180%;
    line-height: .9;
}

/* .header-generic p:nth-of-type(2) span:nth-of-type(1) {color: #000;} */ 
.header-generic p:nth-of-type(1) span:nth-of-type(1),
.header-home p:nth-of-type(1) span:nth-of-type(1){color: red;}




.header {
    position: relative;
    z-index: 10;
    height: 250px;
}


/* painting titles in page headers */
.header cite {position: absolute;
                      z-index:20;
                      bottom: 0;
                      left: .5em;
                      color: #fff;
                      font-size: .9rem;
                      font-weight: normal;
}


@media print, screen and (min-width: 50em) {
    
   .header-generic {text-align: left;}

}


@media print, screen and (min-width: 64em) {
    
    .header {height: 400px;}

}

@media print, screen and (min-width: 75em) {
    
    .header {height: 500px;}

}

@media print, screen and (min-width: 90em) {
    
    .header {height: 600px;}

}


 .header:after {
  content: "";
  position: absolute;
  background: #111;
  background: rgba(0, 0, 0, .3); 
/* fallback for old browsers
Chrome 10-25, Safari 5.1-6
 W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 opacity: .65;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0; 
 z-index: 15;
} 



.off-canvas-content {
    position: relative;
    z-index: 50;
} 

.partial {padding: 0;}

.partial:not(.home) {padding: 2em .5em;}

@media print, screen and (min-width: 50em) {
    .partial:not(.home) {padding: 3em 1em;}
    .partial:not(.spiel) {padding: 3em 1em;}
}

@media print, screen and (min-width: 64em) {
    .partial:not(.home) {padding: 4em 5%;}
    .partial:not(.spiel) {padding: 4em 5%;}
}

@media print, screen and (min-width: 75em) {
    .partial:not(.home) {padding: 4em 10%;}
    .partial:not(.spiel) {padding: 4em 10%;}
} 





h1 {
  color: #000;
  font-family: 'Babylonica', cursive;
  font-size: 3.5rem;
  line-height: .7;
 }
 
 h2 {
  font-family: Optima, sans-serif;
  font-size: 2.5rem;
 }
 
 @media print, screen and (min-width: 40em) {
     h1 {color: #777; line-height: 1;}
     
 }
 
/* @media print, screen and (min-width: 50em) {
  h1 {font-size: 4rem;} 
 } */ 
 @media print, screen and (min-width: 64em) {
  h1 {font-size: 5rem;} 
 } 
 @media print, screen and (min-width: 75em) {
  h1 {font-size: 6rem;} 
 } 
 


.main-heading {
width: 100%;
color: #fff;
margin-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
}



@media print, screen and (min-width: 64em) {
    .main-heading {font-size: 6rem;}  
}

@media print, screen and (min-width: 75em) {
    .main-heading {font-size: 8rem;} 
}


.menu a {color: #333;}
.menu a:hover {color: #000;}

.menu .active > a {
    background: none;
    color: lavender;
    color: rgb(83, 98, 172);
    border-bottom: solid 1px lavender;
    
}

.main-heading cite {font-weight: normal;}


/* h3 {font-size: 1.5em;} */

/* wayfinder menu animated li bottoms */
.menu li {
    font-size: 1rem; }
.menu li:after {
    display: block;
    content: '';
    border-bottom: solid 1px lavender;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -o-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: -webkit-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; }
.menu li:hover:after {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1); }
    


.fi-asterisk {
            font-size: .5rem;
            color: lavender;
            color: rgb(83, 98, 172);
            line-height: 2;
            vertical-align: text-top;
}
.fi-arrow-up {
            font-size: 2rem;
            color: lavender;
            color: rgb(83, 98, 172);
            line-height: 2;
}



footer {
  padding: 1em;
/*   background-color: lavender;
background-color: rgb(83, 98, 172); */
  color: #333; 
}

/* footer a {color: white;} */
footer a {text-decoration: none;} 


.acknowledgement {
    padding-top: 3em; 
    font-size: 1.5em; 
    line-height: 40px;
}
.fi-home {
    font-size: 2em;
    color: lavender;
    color: rgb(83, 98, 172);
}

/* .instagram-glyph {font-size: 2em;}

.instagram-glyph a {text-decoration: none;}

.instagram-glyph a:hover {color: #777;} */


/* 
.fi-at-sign {font-size: 2em;
             color: lavender;
             color: rgb(83, 98, 172);
} */


.enquire {padding: 0 1em 0 0; color: #fff;}