@charset "UTF-8";
/* CSS Document */


/*--------------------------------------------------------------
Nav base styles
--------------------------------------------------------------*/


/* Base styles that apply to all menus */

.menu a.logo {
    display: none;
}

.menu-section {
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid hsl(0, 0%, );
}

.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	/*background: hsl(0, 0%, 15%);*/
}

.menu li a {
    font-family: roboto, sans-serif;
	display: block;
	text-decoration: none;
	color: white;
	padding: .6em 1em;
}

.menu li a:hover {
    color: #bea67e;
	/*background: hsl(0, 0%, 25%);*/
}

@media screen and (min-width: 52em) {
    
    .menu li a {
	    padding: .6em .8em;
    }
    
}

    
@media screen and (min-width: 60em) {
    
    .menu a.logo {
        z-index: 100;
        position: absolute;
        display: block;
        background: url('../images/brand/logo_reverse.png') no-repeat 0 0; 
        background-size: contain;
        width: 170px;
        height: 90px;
        top: 50px; left: 25px;
    }
    
    .menu li a {
	    padding: .6em .9em;
    }
    
}

@media screen and (min-width: 70em) {
    
    .menu a.logo {
        width: 200px;
        height: 100px;
        top: 50px; left: 40px;
    }
    
}

@media screen and (min-width: 80em) {
    
    .menu a.logo {
        width: 200px;
        height: 100px;
        top: 50px; left: 42px;
    }
    
}

@media screen and (min-width: 90em) {
    
    .menu a.logo {
        width: 220px;
        height: 100px;
        top: 50px; left: 48px;
    }
    
}



/*--------------------------------------------------------------
Nav multi level styles
--------------------------------------------------------------*/


    @media screen and (max-width: 52em){
    
	.multi-level-nav ul ul li a {
		padding-left: 2em;
	}

	.dropdown-toggle {
		display: none;
	}   
   
}

    @media screen and (min-width: 52em){
    
    
	.multi-level-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
	}	

	.multi-level-nav li {
        flex: 1 0 auto;
		position: relative;
	}

	li.has-children > a {
		padding-right: 0;
	}

	.multi-level-nav ul ul {
		display: none;
		position: absolute;
		z-index:100;
        background: hsla(0, 0%, 15%, .6);
	}

	.multi-level-nav ul ul li {
        flex: 1 1 auto;
	}

	.multi-level-nav ul .toggled-on {
		display: flex;
	}

	.dropdown-toggle {
		margin: 0;
		padding: 0 .5em;
		border: 0;
		font-family: 'FontAwesome';
		content: "";
		text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
		background-color: transparent;
	}

	.dropdown-toggle:after {
		position: relative;
		top: 0;
		left: 0;
		width: 42px;
		color: white;
		content: "\f107";
		line-height: 1em;	
	}

	.dropdown-toggle:hover,
	.dropdown-toggle:focus {
		background: hsl(0, 0%, 25%);
	}

	.dropdown-toggle.toggle-on:after {
		content: "\f106";
	}
}



/*--------------------------------------------------------------
Social media nav styles
--------------------------------------------------------------*/


/* Find src URL and add in correct social media icon. */
.social-menu li a:before {
    font-family: 'Fontawesome';
    -webkit-font-smoothing: antialiased;
    content: '\f08e';
}


.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }

.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }

.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }

.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }

.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }

.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }

.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }

.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }


/* Flexbox stuff */



@media screen and (max-width: 52em){
    
    .social-menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

}
    
    @media screen and (min-width: 52em){
        
    .social-menu li a:before {
        font-family: 'Fontawesome';
        -webkit-font-smoothing: antialiased;
        font-size: 1.2em;
        content: '\f08e';
    }
    
    .social-menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }      

}

    @media screen and (min-width: 60em){
        
    .social-menu li a:before {
        font-size: 1.3em;
    }
        
}



/*--------------------------------------------------------------
Styles for mixed menu (drop-down + social)
--------------------------------------------------------------*/


.nav-mixed {
    display: flex;
    background: hsl(0, 0%, 15%);
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
    padding: 5% 8% ;
}


.navbar-toggle {
    position: absolute;
    top: 10px;
    right: 25px;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

.main-nav {
    display: none;
}

.active {
  display: block;
}


    @media screen and (min-width: 30em){
    .navbar-toggle {
        top: 18px;
        right: 30px;   
    }

}

    @media screen and (min-width: 40em){
    .navbar-toggle {
        top: 30px;
        right: 45px;   
    }

}

    @media screen and (min-width: 52em){
    
    .nav-mixed {
        flex-direction: row;
        background: rgba(0, 0, 0, 0.6);
        height: 70px;
        align-items: center;
        padding: 1em 0 .6em;
    }
    
    .main-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 90%;
        margin-left: 5%;
    }
    
    .navbar-toggle {
        display: none;
    }
    
    }
    
    @media screen and (min-width: 60em){

    .nav-mixed {
        height: 100px;
        padding: 1em 2em;
    }
    
    .main-nav {
        width: 80%;
        margin-left: 22%;       
    }
       
}

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

   
    .main-nav {
        width: 75%;
        margin-left: 27%;
    }
       
}

@media screen and (min-width: 80em){
    
    .main-nav {
        width: 75%;
        margin-left: 30%;
    }
       
}


/*--------------------------------------------------------------
Header styles minus navigation
--------------------------------------------------------------*/


/*--------------------------------------------------------------
HERO IMAGE MOBILE
--------------------------------------------------------------*/


.hero-mobile {  
    position: relative;
    width: 100%;
    height: 250px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow-y: hidden;
}

.hero-mobile h1 {
    position: relative;
    margin: 0;
    width: 50%;
    top: 10%;
    left: 10%;  
}


/* MOBILE IMAGE */

    .m-home {
     background-image: url('../images/hero/spa_480w.jpg'); }

    .m-about {
     background-image: url('../images/hero/relaxation_480w.jpg'); }

     .m-holistic-massage {
     background-image: url('../images/hero/holistic-massage_480w.jpg'); }

    .m-massage-therapy {
        background-image: url('../images/hero/massage-therapy_480w.jpg'); }

    .m-massage-types {
        background-image: url('../images/hero/reflexology_480w.jpg'); }

    .m-sports-massage {
        background-image: url('../images/hero/massage_480w.jpg'); }
    
    .m-blog {
        background-image: url('../images/hero/human_body_running_480w.jpg'); }
    
    .m-contact {
        background-image: url('../images/hero/rosemary_480w.jpg'); }

    .m-sitemap {
        background-image: url('../images/hero/coconut-oil_480w.jpg'); }

    .m-thankyou {
        background-image: url('../images/hero/wellness_480w.jpg'); }


/*--------------------------------------------------------------
HERO IMAGE LARGE SCREEN
--------------------------------------------------------------*/


    .hero-image {
        width: 100%;
        height: auto;
}

    .hero-inner {
        display: none;
}
    


    @media screen and (min-width: 30em) {
    
    .hero-mobile {
        height: 220px;
    }  
    
    .hero-mobile h1 {
        width: 45%;
        top: 15%;
        left: 5%;
    }
}


    @media screen and (min-width: 40em) {
    
    .hero-mobile {
        height: 250px;
    } 
    
    .hero-mobile h1 {
        width: 220px;
        top: 15%;
        left:5%;
    }
    
    
    .home {
        background-image: url('../images/hero/spa_640w.jpg'); }
    
    .about {
        background-image: url('../images/hero/relaxation_640w.jpg'); }
    
    .holistic-massage {
        background-image: url('../images/hero/holistic-massage_640w.jpg'); }
    
    .massage-therapy {
        background-image: url('../images/hero/massage-therapy_640w.jpg'); }

    .massage-types {
        background-image: url('../images/hero/reflexology_640w.jpg'); }
    
    .sports-massage {
        background-image: url('../images/hero/massage_640w.jpg'); }
    
    .blog {
        background-image: url('../images/hero/human_body_running_640w.jpg'); }
     
    .contact {
        background-image: url('../images/hero/rosemary_640.jpg'); }

    .thankyou {
        background-image: url('../images/hero/wellness_640w.jpg'); }
        
    .sitemap {
        background-image: url('../images/hero/coconut-oil_640w.jpg'); }

}


    @media screen and (min-width: 52em) {
    
    
    .hero-mobile {
        display: none;
    }
       
   .hero-image {      
        height: 400px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow-y: hidden;
        position: relative;
    }
    
    .hero-inner {
        display: block;
        text-align: center;
        position: absolute;    
        width: 55%;
        top: 80%;
        left: 93%;
        transform: translate(-50%, -50%);
        color: white;
    }
    
    .hero-image img {
        width: 50%;
    }

     .hero-inner h1 {
       margin: 0 0 .1em 0;
    }

    .hero-inner h2 {
        display: none;
    }
    
    
    .home {
        background-image: url('../images/hero/spa_832w.jpg'); }
    
    .about {
        background-image: url('../images/hero/relaxation_832w.jpg'); }
    
    .holistic-massage {
        background-image: url('../images/hero/holistic-massage_832w.jpg'); }
    
    .massage-therapy {
        background-image: url('../images/hero/massage-therapy_832w.jpg'); }

    .massage-types {
        background-image: url('../images/hero/reflexology_832w.jpg'); }
    
    .sports-massage {
        background-image: url('../images/hero/massage_832w.jpg'); } 

    .blog {
        background-image: url('../images/hero/human_body_running_832w.jpg'); }
     
    .contact {
        background-image: url('../images/hero/rosemary_832w.jpg'); }
            
    .thankyou {
        background-image: url('../images/hero/wellness_832w.jpg'); }
        
    .sitemap {
        background-image: url('../images/hero/coconut-oil_832w.jpg'); }

    }


    @media screen and (min-width: 60em) {
    
   
    .hero-inner {  
        top: 80%;
        left: 95%;
    }
    
    
   .home {
        background-image: url('../images/hero/spa_960w.jpg'); }
    
    .about {
        background-image: url('../images/hero/relaxation_960w.jpg'); }
    
    .holistic-massage {
        background-image: url('../images/hero/holistic-massage_960w.jpg'); }
    
     .massage-therapy {
        background-image: url('../images/hero/massage-therapy_960w.jpg'); }

    .massage-types {
        background-image: url('../images/hero/reflexology_960w.jpg'); }
    
    .sports-massage {
        background-image: url('../images/hero/massage_960w.jpg'); }

    .blog {
        background-image: url('../images/hero/human_body_running_960w.jpg'); }
    
    .contact {
        background-image: url('../images/hero/rosemary_960w.jpg'); }

    .thankyou {
        background-image: url('../images/hero/wellness_960w.jpg'); } 
        
    .sitemap {
        background-image: url('../images/hero/coconut-oil_960w.jpg'); }
    
}


    @media screen and (min-width: 70em) {
       
    
    .hero-image {
        height: 500px;
    }
    
    .hero-inner {
        width: 28%;
        top: 55%; left: 20%;
    }
    
    .hero-image img {
        width: 50%;
    }

     .hero-inner h1 {
       margin: 0 0 .1em 0;
    }

    .hero-inner h2 {
        display: block;
        font-size: 1.3em;
        line-height: 1.6em;
        margin: 0 0 .1em 0;
    }

    .hero-inner button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 10px 25px;
      color: black;
      background-color: #ddd;
      text-align: center;
      cursor: pointer;
    }

    .hero-inner button:hover {
      background-color: #555;
      color: white;
    }
    
    
    .home {
        background-image: url('../images/hero/spa_1920w.jpg'); }
    
    .about {
        background-image: url('../images/hero/relaxation_1920w.jpg'); }
    
    .holistic-massage {
        background-image: url('../images/hero/holistic-massage_1920w.jpg'); }
    
    .massage-therapy {
        background-image: url('../images/hero/massage-therapy_1920w.jpg'); }

    .massage-types {
        background-image: url('../images/hero/reflexology_1920w.jpg'); }
    
    .sports-massage {
        background-image: url('../images/hero/massage_1920w.jpg'); }
    
    .blog {
        background-image: url('../images/hero/human_body_running_1920w.jpg'); }
    
    .contact {
        background-image: url('../images/hero/rosemary_1920w.jpg'); }

    .thankyou {
        background-image: url('../images/hero/wellness_1920w.jpg'); } 
        
    .sitemap {
        background-image: url('../images/hero/coconut-oil_1920w.jpg'); }
    
    }


    @media screen and (min-width: 90em){
    
    .main-nav {
        width: 75%;
        margin-left: 30%;
    }
       
}