/*
Theme Name: Joanne Bath Theme
Theme URI: https://www.joannebath.co.nz
Version: 1.0
Description: A custom theme for Joanne Bath
Author: Dave Murray at Satellite Design
Template: Divi
*/


@import url("../Divi/style.css");

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');


@font-face { font-family: "sound-font"; src:url("fonts/sound-font.eot"); src:url("fonts/sound-font.eot?#iefix") format("embedded-opentype"), url("fonts/sound-font.woff") format("woff"), url("fonts/sound-font.ttf") format("truetype"), url("fonts/sound-font.svg#sound-font") format("svg"); font-weight: normal; font-style: normal; }


*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; }

html { font-size: 62.5%; }

body { line-height: 1.7; color: #777; padding: 0; box-sizing: border-box; }




/*-----------------------------------------------[BASIC TEXT STYLES]-------------------------------------------------------*/


h1 {
	font-size: 2rem !important;
	padding: 3rem 0 0.5rem 0;
}

h2 {
	font-size: 1.7rem !important;
	line-height: 1.6 !important;
	padding: 3rem 0 2rem 0;
}

h2 a {
	position: relative;
	text-decoration: none;
}

h2 a:hover {
	color: #3d5647;
}

h2 > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: -3px;
	left: 0;
	background-color: #000;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}

h2 > a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}


h3 {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: normal;
	font-size: 1.3rem !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3rem 0 0.5rem 0;
}

p {
	font-size: 1.5rem !important;
	line-height: 1.6;
	padding-bottom: 1rem;
	color: #333;
}


/*-----------------------------------------------[HOMEPAGE STYLES]-------------------------------------------------------*/

.wrapper { margin-top: 0; min-height: 100vh; }

.homepage-image { margin: 0 !important; width: 100% !important; }

.column-1 { width: 15% !important; margin: 0 3% 0 4% !important; }

.column-2 { width: 56% !important; margin: 0 !important; }

.column-3 { width: 22% !important; margin: 0 !important; }

.logo { width: 80% !important; margin: 30rem auto 1rem auto !important; }

.about-joanne { margin-bottom: 2rem !important; }

.joanne-bath { top: 65rem !important; position: relative; }



.audio-player { margin: 0 !important; left: -0.6rem; }

.audio-player .et_audio_container { padding: 0 !important; }

.audio-player h2, .audio-player p, .mejs-duration { display: none; }

.mejs-time-slider, .mejs-time-current, .mejs-horizontal-volume-current, .mejs-horizontal-volume-total { background-color: rgba(119, 116, 114, 1) !important; height: 2px !important; }

.mejs-time-handle-content { background-color: #dcb6bb !important; border-color: #dcb6bb !important; }

.mejs-horizontal-volume-handle { background-color: #dcb6bb !important; border-color: #dcb6bb !important; border-radius: 50% !important; 	margin-top: -1px !important; }

a.mejs-horizontal-volume-slider { top: 0; }

.et_audio_container .mejs-volume-button button:before { color: #dcb6bb !important; }

.et_audio_container .mejs-volume-button button { margin-top: -0.2rem !important; }

.et_audio_container .mejs-playpause-button.mejs-play button:before{ font-family: "sound-font" !important; content:"\65"!important; color: #dcb6bb !important; }

.et_audio_container .mejs-playpause-button.mejs-pause button:before{ font-family: "sound-font" !important; content:"\66"!important; color: #dcb6bb !important; }




.satellitedesign { text-align: center; text-transform: uppercase; letter-spacing: 1px; margin: 10rem 0 10rem 0 !important; }

.satellitedesign p { color: #c3848e; font-size: 1.3rem !important; line-height: 1.4 !important; }

.satellitedesign p a { color: #c3848e; transition: 0.5s; -webkit-transition: 0.5s; }

.satellitedesign a:hover { color: #3d5647; letter-spacing: 2px; }


/*---------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------[RESPONSIVE STYLES]-----------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/


@media only screen and ( min-width: 2350px ) { 

/*body { background-color: IndianRed !important; }*/

}


/*---------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( max-width: 2349px ) { 

/*body { background-color: orange !important; }*/

}

/*---------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( max-width: 1779px ) { 

/*body { background-color: SpringGreen !important; }*/

}

/*---------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( max-width: 1499px ) {

/*body { background-color: yellow !important; }*/

}


/*---------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------[iPAD LANDSCAPE]------------------------------------------------------*/

@media only screen and ( max-width: 1099px ) {

/*body { background-color: SlateBlue !important; }*/

#page-container { width: 100% !important; margin-top: -13rem !important; box-shadow: none !important; overflow: hidden; }

.column-1 { width: 15% !important; margin: 0 3% 0 2% !important; }

.column-2 { width: 65% !important; }

.column-3 { width: 15% !important; }

.logo { margin: 26rem auto 1rem auto !important; }

.joanne-bath { top: 62rem !important; }



}



/*--------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------[iPAD PORTRAIT]------------------------------------------------------*/

@media only screen and ( max-width: 980px ) {

/*body { background-color: Teal !important; }*/

#page-container { margin-top: -5rem !important; }

.column-1 { width: 15% !important; margin: 0 2% 0 0 !important; }

.column-2 { width: 68% !important; }

.column-3 { width: 15% !important; }

.logo { margin: 24rem auto 1rem auto !important; }

.joanne-bath { top: 58rem !important; }

h1 { font-size: 1.8rem !important; }

h2 { font-size: 1.6rem !important; }

h3 { font-size: 1.2rem !important; }

p { font-size: 1.4rem !important; }

.satellitedesign { margin: 7rem 0 3rem 0 !important; }

}	
	
/*---------------------------------------------[iPHONE LANDSCAPE]-----------------------------------------------------*/

@media only screen and ( max-width: 767px ) {

/*body { background-color: LightSalmon !important; }*/

#page-container { margin-top: -4rem !important; }

.wrapper.et_pb_with_background.et_section_regular { background-image: url('https://joannebath.co.nz/wp-content/uploads/2018/12/joanne-bath-background-tall.jpg') !important; }

.column-1 { display: none; }

.column-2 { width: 85% !important; margin: 0 7.5% !important; }

.column-3 { display: none; }

.logo { margin: 12rem auto 1rem auto !important; }

h1 { font-size: 2rem !important; }

h2 { font-size: 1.8rem !important; }

h3 { font-size: 1.4rem !important; }

p { font-size: 1.6rem !important; line-height: 1.8 !important; }



}	
	




/*---------------------------------------------[iPHONE PORTRAIT]-----------------------------------------------------*/

@media only screen and ( max-width: 479px ) {

/*body { background-color: LightSkyBlue !important; }*/

#page-container { margin-top: -6rem !important; }

.logo { width: 100% !important; margin: 15rem auto 0 auto !important; }


}