﻿html, body {padding:0; margin:0; width:100%; min-width:320px; height:100%; overflow:hidden; font-family:arial, sans-serif;}
body {
	scrollbar-base-COLOR:#c0d0a9;
	scrollbar-arrow-COLOR:#000; 
	scrollbar-shadow-COLOR:#000;
	scrollbar-lightshadow-COLOR:#000;
	scrollbar-darkshadow-COLOR:#72825e;
	scrollbar-highlight-COLOR:#c0d0a9;
	scrollbar-3dlight-COLOR:#000;
}

.wrapper {width:100%; height:100%; overflow:hidden;
background:#c1d0a9;
background:-moz-linear-gradient(left, #c1d0a9 0%, #ffffff 51%, #c1d0a9 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#c1d0a9), color-stop(51%,#ffffff), color-stop(100%,#c1d0a9));
background:-webkit-linear-gradient(left, #c1d0a9 0%,#ffffff 51%,#c1d0a9 100%);
background:-o-linear-gradient(left, #c1d0a9 0%,#ffffff 51%,#c1d0a9 100%);
background:-ms-linear-gradient(left, #c1d0a9 0%,#ffffff 51%,#c1d0a9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1d0a9', endColorstr='#c1d0a9',GradientType=1);
background:linear-gradient(left, #c1d0a9 0%,#ffffff 51%,#c1d0a9 100%);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.page {width:100%; height:100%; max-width:672px; margin:0 auto; border-left:1px solid #000; border-right:1px solid #000; position:relative;}
.header {height:150px; width:100%; position:relative;}
#contact .header {background:url(files/heading8.jpg) no-repeat center 0;}
#about .header {background:url(files/heading7.jpg) no-repeat center 0;}
#recommendations .header {background:url(files/heading6.jpg) no-repeat center 0;}
#being .header {background:url(files/heading5.jpg) no-repeat center 0;}
#coachees .header {background:url(files/heading4.jpg) no-repeat center 0;}
#process .header {background:url(files/heading2.jpg) no-repeat center 0;}
#products .header {background:url(files/heading3.jpg) no-repeat center 0;}
#coaching .header {background:url(files/heading1.jpg) no-repeat center 0;}

.header ul {padding:0; margin:0; list-style:none; width:100%; height:30px; position:absolute; left:0; bottom:0;z-index:100;}
.header ul ul {position:absolute; right:-9999px;}
.header ul li.menu {display:block; width:12.5%; float:left; height:30px; line-height:30px; border-bottom:1px solid #fff;}
.header ul li.back {width:100%; height:150px; position:absolute; left:0; top:-120px; z-index:-1;}
.header ul li.menu a {display:block; text-align:center; background:#72825e; color:#fff; text-decoration:none; font:normal 14px/30px arial, sans-serif;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.header ul li.menu span {display:block; text-align:center; background:#72825e; color:#fff; cursor:default; font:normal 14px/30px arial, sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header ul li.menu:hover > a,
.header ul li.menu:hover > span {background:#92a27e;}
.header ul li.menu:hover {position:relative;}

.header ul li.menu:hover > ul {right:50%; top:30px; width:140px; margin-right:-70px;}
.header ul li.menu:hover > ul li {width:100%;}
.header ul li.menu:hover > ul li:hover a {background:#92a27e;}

#contact .header ul .contact > a,
#about .about > a,
#recommendations .recommendations > a,
#being .being > a,
#coachees .coachees > a,
#process .process > span,
#products .products > a,
#coaching .coaching > a {background:#92a27e;}

.header ul li.back span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0;
transition:0.5s 0.1s;
}
.header ul li.back span:nth-of-type(1) {background:url(files/heading8.jpg) no-repeat center 0;}
.header ul li.back span:nth-of-type(2) {background:url(files/heading7.jpg) no-repeat center 0;}
.header ul li.back span:nth-of-type(3) {background:url(files/heading6.jpg) no-repeat center 0;}
.header ul li.back span:nth-of-type(4) {background:url(files/heading5.jpg) no-repeat center 0;}
.header ul li.back span:nth-of-type(5) {background:url(files/heading4.jpg) no-repeat center 0;}
.header ul li.back span:nth-of-type(6) {background:url(files/heading2.jpg) no-repeat center 0;}
.header ul li.back span:nth-of-type(7) {background:url(files/heading3.jpg) no-repeat center 0;}
.header ul li.back span:nth-of-type(8) {background:url(files/heading1.jpg) no-repeat center 0;}

.header ul li.contact:hover ~ li.back span:nth-of-type(1),
.header ul li.about:hover ~ li.back span:nth-of-type(2),
.header ul li.recommendations:hover ~ li.back span:nth-of-type(3),
.header ul li.being:hover ~ li.back span:nth-of-type(4),
.header ul li.coachees:hover ~ li.back span:nth-of-type(5),
.header ul li.process:hover ~ li.back span:nth-of-type(6),
.header ul li.products:hover ~ li.back span:nth-of-type(7),
.header ul li.coaching:hover ~ li.back span:nth-of-type(8) {opacity:1}

.footer {position:absolute; left:0; bottom:0; width:100%; height:48px; border-top:1px solid #000;}
.footer .logo {display:block; width:89px;  margin:8px auto;}
#contact .footer {background:url(files/heading8.jpg) no-repeat center 0;}
#about .footer {background:url(files/heading7.jpg) no-repeat center 0;}
#recommendations .footer {background:url(files/heading6.jpg) no-repeat center 0;}
#being .footer {background:url(files/heading5.jpg) no-repeat center 0;}
#coachees .footer {background:url(files/heading4.jpg) no-repeat center 0;}
#process .footer {background:url(files/heading2.jpg) no-repeat center 0;}
#products .footer {background:url(files/heading3.jpg) no-repeat center 0;}
#coaching .footer {background:url(files/heading1.jpg) no-repeat center 0;}

.content {background:#fafafa; position:absolute; top:151px; bottom:49px; left:0; right:0; overflow:hidden; overflow-y:scroll;
-webkit-overflow-scrolling: touch;
}
.content-inner {padding:10px 20px;}
.content-inner h1 {color:#c00020; font-size: 20px;}
.content-inner h2 {color:#c00020; font-size: 18px; margin:0; padding:0;}
.content-inner p {color:#000; font-size:15px; line-height:18px;}
.content-inner ul li {color:#000; font-size:15px; line-height:18px;}
.content-inner p.a-right {float:left; margin:0; padding:0;}
.content-inner p.fontSize {float:right; margin:0; padding:0; display:none;}
.content-inner p.fontSize span {cursor:pointer;}
.content-inner p.fontSize span.big {font-size:18px; margin-left:10px;}
.content-inner a {color:#22340b; font-size:15px;}
.content-inner a:hover {color:rgb(192,0,32);}
.content-inner .iframe1 {width:68%; height:0; padding-bottom:51%; position:relative; float:left; margin-right:3%;}
.content-inner .iframe1 iframe {width:100%; height:100%; position:absolute; left:0; top:0;}
.content-inner .iframe2 {width:68%; height:0; padding-bottom:51%; position:relative;}
.content-inner .iframe2 iframe {width:100%; height:100%; position:absolute; left:0; top:0;}
.content-inner .iframe3 {width:68%; height:0; padding-bottom:38.2%; position:relative;}
.content-inner .iframe3 iframe {width:100%; height:100%; position:absolute; left:0; top:0;}

.fb-like {display:block; width:100%; float:right;}

#coachees,#recommendations .content-inner ul {margin-top:0;}
#process .content-inner ul {margin-top:-10px;}
.content-inner img.left-image {display:block; float:left;}
#contact .content-inner img.left-image {padding-right:50px;}

#contact #contactpic {display:block; width:35%; max-width:200px; text-align:center; margin-top:30px; float:left;}
#contact #contactpic img {display:block; width:100%;}
#contact #contactform {display:block; width:60%; text-align:left; float:right;}
#contact #contactform #msg {padding:0; margin: 30px 0;}
#contact #contactform #msg p {padding:0; margin:10px 0; width:100%;}
#contact #contactform #msg p label.right {display:block; width:70px; float:right; text-align:left; margin-left:5px;}
#contact #contactform #msg p input {width:calc(94% - 80px); height:20px; padding:0 2%; border:1px solid #92a27e; color:#000;}
#contact #contactform #msg p textarea {width:calc(94% - 80px); height:130px; padding:0 2%; border:1px solid #92a27e; color:#000;}

#contact #contactform #msg p.rightAlign {text-align:right; margin-right:5%;}
#contact #contactform #msg p input#myName {width:42%; height:20px; padding:0 2%; border:1px solid #92a27e; margin-right:5%; margin-left:5%; float: left;}
#contact #sendbutton {width:100px; height:22px; background:#72825e; color:#fff; font-weight:700; border-radius:5px; border:0; outline:0; cursor:pointer; 
	float:right; margin-right:20px;}


@media screen and (max-device-width: 640px) and (orientation: landscape) {
html, body {height:auto; overflow:auto; overflow-x:hidden;}
.wrapper {height:auto; overflow:hidden;}
.page {height:auto; overflow:hidden;}
.content {position:static; height:auto; padding-top:30px; overflow:visible;}
.content-inner .iframe1,.content-inner .iframe2 {width:100%; height:0; padding-bottom:75%; position:relative; float:none; margin-right:0;}
.content-inner .iframe3 {width:100%; height:0; padding-bottom:56%; position:relative; float:none; margin-right:0;}
.fb-like {margin-bottom:10px;}
#contact #contactpic {display:none;}
#contact #contactform {margin:0 auto;}
.content-inner p.fontSize {display:block;}
#contact .content-inner img.left-image {display:none;}
#contact #contactform #msg p label.right {width:80px;}
#contact #contactform #msg p input {width:calc(94% - 85px);}
#contact #contactform #msg p textarea {width:calc(94% - 85px);}
#contact #sendbutton {margin-right:20px;}
.footer {position:static;}
.content-inner p.fontSize {display:block;}
}

@media only screen and (max-width:600px) {
.wrapper {background:#fafafa;}
.header ul li.menu {width:25%; position:absolute;}
.header ul li.menu:hover {position:absolute;}
.header ul li.coaching {right:0; top:0;}
.header ul li.being {right:0; top:30px;}
.header ul li.products {right:25%; top:0;}
.header ul li.process {right:25%; top:30px;}
.header ul li.coachees {right:50%; top:0;}
.header ul li.recommendations {right:50%; top:30px;}
.header ul li.about {right:75%; top:0;}
.header ul li.contact {right:75%; top:30px;}
.content {top:181px;}
#contact #contactpic {display:none;}
#contact #contactform {display:block; width:95%; margin:0 auto; float:none;}
#contact #contactform #msg p label.right {width:75px;}
#contact #contactform #msg p input {width:calc(94% - 80px);}
#contact #contactform #msg p textarea {width:calc(94% - 80px);}
#contact #sendbutton {margin-right:20px;}
#contact .content-inner img.left-image {display:none;}
.content-inner p.fontSize {display:block;}
}

@media only screen and (max-width:500px) {
html, body {height:auto; overflow:auto; overflow-x:hidden;}
.wrapper {height:auto; overflow:hidden;}
.page {height:auto; overflow:hidden;}
.content {position:static; height:auto; padding-top:30px; overflow:visible;}
.content-inner .iframe1,.content-inner .iframe2 {width:100%; height:0; padding-bottom:75%; position:relative; float:none; margin-right:0;}
.content-inner .iframe3 {width:100%; height:0; padding-bottom:56%; position:relative; float:none; margin-right:0;}
.fb-like {margin-bottom:10px;}
.footer {position:static;}
}

@media only screen and (max-device-width:480px) {
#contact #contactform {display:block; width:95%; margin:0 auto; float:none;}
#contact #contactform #msg p {clear:right;}
#contact #contactform #msg p input#myName {width:35%; margin-right:0;}
}

@media only screen and (max-width:360px) {
#contact-form #contactform #msg p.rightAlign {margin-right: 5px;}
 #contact-form #contactform #msg p input#myName {width:110px; margin-left:5px;}
}
