html
{
	height:100%;
	width:100%;
    background-color:#777;
}
body
{
	height:100%;
	width:100%;
    margin:0;
    font-size:19px;
    font-family:Courier, Verdana, sans-serif;
	line-height:1.6;
    word-spacing:-.2em;
}
p,
h2,
h3
{
    margin:0;
}
input
{
    font-family:Courier, Verdana, sans-serif;
}


.page
{
	overflow:auto;
	position:relative;
	width:100%;
	min-width:400px;
    max-width:1800px;
    margin:0 auto;
	background-color:#FAFAFA;
    box-shadow:0 0 8px 4px rgba(0,0,0,0.3);
    z-index:1;
}

header
{
    position:fixed;
    width:100%;
    min-width:400px;
    max-width:1800px;
    height:80px;
    background-color:rgba(250,250,250,0.75);
    z-index:999;
    transition:background-color .2s linear, box-shadow .2s linear, box-shadow 200ms linear;
    -webkit-transition:background-color 200ms linear, box-shadow 200ms linear;
    -ms-transition:background-color 200ms linear, box-shadow 200ms linear;
}
header:hover
{
    /* background-color:rgba(250,250,250,1); */
    background-color:rgba(240,240,250,1);
    box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.5);
}

header > .container
{
	width:100%;
	min-width:400px;
    max-width:1800px;
    height:100%;
    margin:0 auto;
}
header .icon
{
    position:relative;
    display:inline-block;
    height:100%;
    font-family:"Apple Chancery";
    font-size:38px;
    /* color:#0083c8; */
    /* color:#00924b; */
    color:#BCA27C;
}
header .icon > div
{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    top:calc(50% - 4px);
    transform:translateY(-50%);
    white-space:nowrap;
}
header .icon > div.letter
{
	margin-left:8px;
}
header .icon > div.word
{
    overflow:hidden;
    transition:width .4s, color .4s;
}
header .icon img
{
    height:40px;
    margin-top:20px;
}
header:hover .icon > .maven,
header .icon > .maven.show
{
    width:113px;
}
header:hover .icon > .massages,
header .icon > .massages.show
{
    width:155px;
}

header > .container > .menu
{
    float:right;
    height:100%;
    padding-right:40px;
}
header > .container > .menu > .item
{
    display:table-cell;
    vertical-align:middle;
    height:80px;
    padding:0 22px;
    color:#000;
    cursor:pointer;
}
header > .container > .menu > .item.current
{
    font-weight:600;
    color:#156ba8;
    cursor:default;
}
header > .container > .menu > .item:hover
{
    color:#156ba8;
}


.banner
{
    position:relative;   
    /* top:-70px; */
    height:700px;
    width:100%;
    /* margin-bottom:-220px; */
    object-fit:cover;
}

.body
{
    z-index:2;
    position:relative;
    width:100%;
    /* padding-top:40px; */
    background-color:rgba(250,250,250,0.75);
}



/* ABOUT */
.section
{
    position:relative;
    width:80%;
    max-width:calc(100% - 300px);
    margin:0 auto 60px;
}
.section.bio
{
    padding-left:120px;
}
.section.bio > h2
{
    margin:32px 0 30px;
    font-size:1.8em;
    /* color:#0083c8; */
    /* color:#00924B; */
    /* color:#CB8142; */
    color:#BCA27C;
}
.section.bio > p
{
    text-indent:40px;
}


.section.book {
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
}

#book,
#certificates {
	padding:6px 10px;
	background-color:#3CB0FD;
	border-radius:4px;
    color:#FFF;
	text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
}
#book:hover,
#certificates:hover {
	background-color:#3498DB;
}

.section.massages
{
    position:relative;
}
.section > h3
{
    height:35px;
    /* color:#00924B; */
    /* color:#00924B; */
    color:#BCA27C;
}
.section.massages > .grid
{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    grid-gap:10px;
}

.section.massages > .grid > .massage
{
    overflow:hidden;
    height:35px;
    /* background-color:#BDDBCC; */
    background-color:#E1D7C7;
    cursor:pointer;
}
.section.massages > .grid > .massage > h3
{
    text-align:center;
}
.section.massages > .massage {
    margin-left:25px;
}
.section.massages > .massage > .header > h3 {
    display:inline-block;
    margin:15px 0 0;
}
.section.massages > .massage > .header > .prices {
    display:inline-block;
    margin-left:6px;
}
.section.massages > .massage > .description
{
    text-indent:24px;
}







.contactMe .field
{
	position:relative;
}

.contactMe .field > input,
.contactMe .field > textarea
{
	box-sizing:border-box;
	height:34px;
	width:100%;
	background-color:#fff;
	font-size:0.8em;
	border-left:3px solid #E1D7C7;
	border-top:3px solid #E1D7C7;
	border-right:3px solid #E1D7C7;
	border-bottom:3px solid #E1D7C7;
	border-radius:5px;
	text-indent:5px;
	line-height:1.1em;
	transition:margin-top 0.4s;
	margin-bottom:10px;
    resize:none;
    outline:none;
}
.contactMe .field > textarea
{
    height:200px;
    padding:7px 4px;
}
.contactMe .field input:focus,
.contactMe .field > input:required:valid,
.contactMe .field > textarea:focus,
.contactMe .field > textarea:required:valid
{
	margin-top:38px
}

.contactMe .field > label
{
	position:absolute;
	left:8px;
	top:0px;
	text-align:left;
	font-size:1.05em;
	line-height:36px;
	pointer-events:none;
	transition-duration:0.4s;
	-webkit-transition-property:top, left, font-size;
	-webkit-transition-duration:0.4s;
}
.contactMe .field input:focus + label,
.contactMe .field > input:required:valid + label,
.contactMe .field > textarea:focus + label,
.contactMe .field > textarea:required:valid + label
{
	transition-duration:0.3s;
	left:0px;
	color:#BCA27C;
}






/* footer
{
    height:100px;
} */