/*****************************
main.css for K and A site.
Page is coded in order from top to bottom.
Use (Apple+f) to search for keywords.

Media Queries are seperated and shown at the bottom of the page.
******************************/

/**************************************************/
/* Load Google Fonts Locally
/**************************************************/

/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Sans'), local('JosefinSans'), url(../fonts/josefin.woff) format('woff');
}

/**************************************************/
/* Setting by tag type
/**************************************************/

 body {
	background-image: url("../img/woodBackground1.jpg");
	background-repeat:repeat-x, repeat-y;
	background-attachment:fixed;
	background-size:cover;
	background-color:black;



}

 * {

	font-family: 'Josefin Sans', serif;

 }

div p{

}

h1 {
	text-align:center;
	font-size:3vw;
	font-family: 'Merriweather', serif;
}
/*USED BECAUSE h2 WAS IN USE WHEN I THOUGHT OF THIS*/
h3 {
	font-family:times;
	font-weight:lighter;
	font-style:italic;
	text-align:center;
	font-size:2vw;
	padding:0;
	margin:0;
	position:relative;
	top:-2vw;
	text-align:center;
}

h3 {
	margin:0;
	padding:0;
}



h5 {
	text-align:center;
}




#header {
	background-color:transparent;
	margin:0;
	padding:0;
	margin-top:2%;
}

button {
    font-family:'Merriweather';
}

/******************************/
/*Header
/******************************/






#hair img {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


#acupuncture img {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}





/*refers to logoNavBar*/



	#mobileWelcome {
		display:none;
		width:90%;
		margin-top:10px;
		padding:5%;


	}






.logo {

		text-align:center;






	background-color:red;


}

.logo img {
		position:relative;
		bottom:60%;

}




/*
.contactBar {
	height:150px;
	background-color:#c9a575;
}







/*Welcome page */

#welcome {
	background-color:white;
    text-align:center;
}

#welcome p {
	text-align:center;
    font-size:1.6vw;
}

/*adds a page break for small devices*/
#smallHeader {
	display:none;
}

#welcome img {
    max-width:100%;
    position:relative;
    max-height:50vw;
    padding-top:2%;
    padding-bottom:2%;
}

.column {
    float: left;
    width: 96%;
    padding-left:2%;
    padding-right:2%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/*center the image */

/******************************/
/*Video Header
/******************************/

#video_header {
    min-width:100vw;
    display:block;
    box-sizing:border-box;
    text-align:center;
}

#myVideo {
    right: 0;
    bottom: 0;
    margin-top:100px;
    margin-bottom:50px;
    width:75%;
    border-style:solid;
    border-color:white;
}

#video_link_message {
    display:none;
}

/******************************/
/*Header Mobile
/******************************/




/*****************************
Stylists
******************************/
/*edits the header only*/
#stylists {

	color:white;
	background-color:transparent;




	/*background-color:rgba(255,255,255,0.7);
	background-color:hsla(0,0,0,0);*/
	




}





/*.column:nth-child(n+2) {
	margin-left:4%;
}


/*tells images to fit inside their div. because they are bigger*/
#stylists img {
	max-width:100%;
}


 #stylists .boxContentImage{
	max-width:100%;
	margin-top:0%;
}








#stylists h2 {
	text-align:center;
	font-size:1.3em;

	font-weight:lighter;

	text-align:center;
	margin-bottom:-10px;
}


#stylists h3 {
	margin-bottom:20px;
}

#adamText {
	position:relative;
	top:3px;
}


/*****************************
Hair
******************************/

#hair {
	
	background-color:rgba(141,198,63,0.5);
	color:white;


}

#hair .boxContentText{
	font-size:2vw;
	margin-top:7%;
	text-align:left;
	
}



#hair img {

}

.centerMobileImageHorizontal {
	display:none;
}

.hairImagesMobile {
	max-width:60vw;

}



/*****************************
Nails
******************************/
#nails {
	color:white;
	background-color:rgba(0,0,0,0.6);
	
}

#nails p {



	text-align:left;
}

/*img*/
#heartNails {

		height:50%;
		float:right;
		margin-left:5%;
		margin-bottom:50px;
		}

#mobileNails {
	display:none;
	
}





.nailsGroup {
	
	text-align:center;
	clear:both;
	margin-top:10%;

}
/*
.nailsGroup img {
	width:14%;
	border-radius:10px;
	margin:2.4%;
	max-width:12%;
}

#extraNails {
	display:none;
}

#nailsTextMobile {
	display:none;
}

#nailsMobile {
	float:left;
}
*/

/*****************************
Acupuncture
******************************/

#acupuncture {
	
	background-color:rgba(255,255,255,0.5);
	color:white;


}

#acupuncture .boxContentText{
	font-size:1.8vw;
	margin-top:7%;
	text-align:left;
	
}

.acuImg {
	margin-top:50px;
}




/*****************************
Embed Social
******************************/



/*****************************
Prices
******************************/
#prices {
	color:white;
	text-align:center;
	background-color:rgba(205,165,0,0.5);
	margin:0px;
}

#prices p {
		background-color:rgba(0,0,0,0);
		font-size:1.5vw;
}

.columns {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    -ms-column-count: 3;
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    -ms-column-gap: 40px;
    column-gap: 40px;

    -webkit-column-rule: 4px outset white; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset white ; /* Firefox */
    -ms-column-rule: 4px outset white ; /* Firefox */
    column-rule: 4px outset white;

    font-size:1.2vw;
    background-color:black;
    color:white;
    padding-top:5%;
    padding-bottom:5%;
}

#hairColumn2 {
	display:inline-block;
	position:relative;
	right:0px;
	float:right;
}






/*****************************
Contact
******************************/




#map {
   		width:60%;
   		height:90%;
		padding-top:2.5%;
     }




/*****************************
Footer
******************************/



#footer {
	background-color:rgba(0,0,0,1);
	color:grey;
	padding:5%;
}

#footer p {
	font-size:1.5vw;
}

#footer img {
	float:right;
	padding:1%;
	width:23%;
	cursor:pointer;
}

#footer .unevenBoxSmallR {

	top:10px;
}

/********/
/*Social*/
/********/

#footer .social {




	padding-left:2vw;
}










/*****************************
Nav Positions
******************************/





/*****************************
Social Icons (Footer)
******************************/

.social {
	float:right;
	padding:0.5%;
}

/*****************************
Media Queries
******************************/


@media(max-width:1050px){
	

	/*****************************
	Prices
	******************************/
	#prices {

		color:white;
		text-align:center;
		background-color:rgba(205,165,0,0.5);
		margin:0px;
	}

	#prices p {
			background-color:rgba(0,0,0,0);
			padding-top:5%;
			padding-bottom:5%;
			font-size:2vw;
	}

	.columns {
	    -webkit-column-count: 3; /* Chrome, Safari, Opera */
	    -moz-column-count: 3; /* Firefox */
	    -ms-column-count: 3;
	    column-count: 3;

	    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
	    -moz-column-gap: 40px; /* Firefox */
	    -ms-column-gap: 40px;
	    column-gap: 40px;

	    -webkit-column-rule: 4px outset white; /* Chrome, Safari, Opera */
	    -moz-column-rule: 4px outset white ; /* Firefox */
	    -ms-column-rule: 4px outset white ; /* Firefox */
	    column-rule: 4px outset white;

	    font-size:1.9vw;
	    background-color:black;
	    color:white;
	    padding-top:2%;
	    padding-bottom:2%;

	}

	#hairColumn2 {
		display:inline-block;
		position:relative;
		right:0px;
		float:right;
	}

		#prices p {
		padding-left:10px;
		padding-right:10px;
		background-color:rgba(0,0,0,0);
		font-size:1.7vw;
	}

	/*****************************
	Footer
	******************************/

	#footer p {
	font-size:2vw;
	}
	.spaPackage {
	max-height:90vh;
	min-height:30vw;
	}
	.spaPic {
		margin-top:2vw;
	}

	#goldSpaPackage {
	background-color:rgba(255,222,0,0.4);
	max-height:90vh;
	min-height:30vw;

	}
    
    #video_header {
    min-width:100vw;
    display:block;
    box-sizing:border-box;
    text-align:center;
    background-color:transparent;;
    }

    #myVideo {
        right: 0;
        bottom: 0;
        padding-top:75px;
        padding-bottom:75px;
        width:100%;
    }
    
   #video_header {
    min-width:100vw;
    display:block;
    box-sizing:border-box;
    text-align:center;
    }

    #myVideo {
        display:none;
    }
    #video_link_message {
        display:block;
        width:100%;
        background-color:white;
        height:50px;
        text-align:center;
    }
    #video_link_message p {
        color:blue;
        position:absolute;
        height:100px;
    }
    #video_container * {
        width:100%;
        text-align:center;
    }
    .column {
    float: left;
    width: 96%;
    padding-left:2%;
    padding-right:2%;
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    #welcome p {
	text-align:center;
        margin-bottom:50px;
        font-size:2vw;
    }
    #header {
        background-color:transparent;
        margin:0;
        padding:0;
        margin-top:2%;
        height:680px;
    }

}

@media(max-width:700px) {
	.spaPicPositioner {
	text-align:right;
	position:relative;
	top:-1vw;
	}
	#prettyPrincessPackageIcon, #goldSpaPackageIcon, #mensSpaPackageIcon {
	margin-top:2vw;
	}
	.spaPackage {
	max-height:90vh;
	min-height:100vw;
	}

	#prices p {
		padding-left:10px;
		padding-right:10px;
		background-color:rgba(0,0,0,0);
		font-size:4vw;
	}

	#goldSpaPackage {
	background-color:rgba(255,222,0,0.4);
	max-height:90vh;
	min-height:100vw;

}

	#heartNails	{
		display:none;
	}

	.centerImage {
		text-align:center;
	}

	#mobileNails {
		display:initial;
		position:relative;

		margin-top:-15vw;
		min-width:250px;

	}
	#acupuncture h2 {
	
		font-size:4vw;


	}
    #welcome p {
	text-align:center;
    font-size:4vw;
    }
    
}

@media (max-width:400px) {
	.mobileNavFix{
		position:relative;
		top:-35px;
	}
}