﻿@font-face {
    font-family: 'entypo';
    src: url('fonts/entypo.otf');
	src: url('fonts/entypo.woff') format('woff'),
		 url('fonts/entypo.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gabriola';
    src: url('fonts/gabriola.ttf');
	src: url('fonts/gabriola.woff') format('woff');
	font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'hattori_hanzolight';
    src: url('fonts/Hattori_Hanzo-webfont.eot');
    src: url('fonts/Hattori_Hanzo-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Hattori_Hanzo-webfont.woff') format('woff'),
         url('fonts/Hattori_Hanzo-webfont.ttf') format('truetype'),
         url('fonts/Hattori_Hanzo-webfont.svg#hattori_hanzolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { /*font: 12px/1.4 Helvetica, sans-serif;*/ font-family: 'hattori_hanzolight'; background: #FFFF9D; color: #333;}
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
a:focus { outline: 0; }
nav { 
	font-family: 'hattori_hanzolight';
	z-index:2;
	position: relative;
	-webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
}

.nav_over {
	opacity: 0.9;
	position: relative;
	box-shadow:0 5px 4px rgba(0,0,0,.1);
	/*-webkit-filter: blur(5px);*/
	/*-webkit-filter: blur(5px); */
	-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;	
}
.parallax {
    /* The image used */
    background-image: url(background.png);

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-wrap { 
    width: 70%; margin: 40px auto 5px; 
	max-width: 95%;
	min-width: 500px;
	display: flex;
	flex-direction: column;
	background: #cdeb8e; 
    padding: 8px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
	background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
	background: -ms-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	-ms-border-radius: 16px;
	border-radius: 16px;
	height: 100%;
	overflow: hidden;
}

#main-content { 
	padding: 14px; 
	justify-content: center;
	flex: 0.9 1 auto;
}
#guts {
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	flex: 0.9 1 auto;
}
/*h1 { font: bold 32px Helvetica, Arial, Sans-Serif; letter-spacing: -1px; padding: 14px; color: #333; text-shadow: 1px 1px 1px white; }*/
p { margin: 0 0 15px 0; }
 
//*nav ul { 
    list-style: none; background: #154c85; padding: 5px 20px; width: 878px; position: relative; 
    left: -9px;
}*//
nav ul {
	-webkit-font-smoothing:antialiased;
	text-shadow:0 1px 0 #FFF;
    background: #ddd;
    list-style: none;
    margin: 0;
	padding: 0;
    width: 68%;
	position: relative;
}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
	list-style: none;
}
nav a {
    background: #cdeb8e;
    color: #444;
    display: block;
	border: 2px solid #FFFF9D;
    font: 1.6vw/50px hattori_hanzolight;
    padding: 0 25px;
	text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav .dropdown:after {
    content: ' ˃';
	font-family: sans-serif;
	font-size: 1.4vw;
	font-weight: bold;
	-webkit-transition: -webkit-transform .4s;
	   -moz-transition: -moz-transform .4s;
	    -ms-transition: -ms-transform .4s;
		 -o-transition: -o-transform .4s;
			transition: transform .4s;
	position:absolute;
	right: 28%;
}
nav .dropdown:hover:after{
	-webkit-transform:rotate(90deg);
	   -moz-transform:rotate(90deg);
	    -ms-transform:rotate(90deg);
		 -o-transform:rotate(90deg);
			transform:rotate(90deg);
}
nav li a:hover {
    background: #FFFF9D;
	border: 2px solid #FFFFEB;
}
nav li a:active {
    background: #A4BC72;
	border: 2px solid #E6E6D4;
	box-shadow:	1% 5% 20% 20% black inset;
}
nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 2;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav li:hover ul {
    opacity: 1;
	z-index: 2;
    top: 50px;
    visibility: visible;
}
nav li:hover ul a {
	background: #cdeb8e;
}
nav li ul li {
    float: none;
    width: 100%;
}
nav li ul a:hover {
    background: #FFFF9D;
}
nav li ul a:active {
    background: #A4BC72;
	border: 2px solid #E6E6D4;
	box-shadow:	1% 5% 20% 20% black inset;
}
/* Slider overlay fix */
#slider {
	z-index: 0;
	max-width: 90%;
	min-width: 90%;
}
/* Clearfix */

.group:after, .group:before {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.heading {
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	padding: 1% 0% 1% 0%;
	color: #FFE488;
	font-family:gabriola;
	font-size: 4vw;
	line-height: 75%;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
.title {
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	margin-left: 30px;
	padding: 2% 0% 0% 0%;
	color: #FFE488;
	font-family:gabriola;
	font-size: 7vw;
	line-height: 75%;
	cursor:pointer;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
.title a,.sub-title a {
	-webkit-font-smoothing: antialiased;
	color: #FFE488;
	text-decoration: none;
}

.sub-title {
	line-height: 60%;
	margin-left: 7%;
	padding: 1% 0% 2% 0%;
	color: #FFE488;
	font-family:gabriola;
	font-size: 4vw;
	z-index: 3;
	cursor:pointer;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

h2.name {
	text-align: center;
	font-size: 1.4em;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-in-out;
	-webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

#image-wrap {
	/*max-width: 25%;*/
	width: 26%;
	/*margin: auto 0% auto 75%;	/*margin: auto 5% auto 45%;*/
	background: #FFFF9D; 
    padding: 8px 8px 32px 8px;
	/*position: absolute;*/
	display: inline-block !important;
	/*flex-flow: column wrap;
	justify-content: flex-start;
	/*position: relative;*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF9D), color-stop(100%,#FFE488));
	background: -moz-linear-gradient(top, #FFFF9D 0%, #FFE488 100%);
	background: -ms-linear-gradient(top, #FFFF9D 0%, #FFE488 100%);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	z-index: 0;
	overflow: hidden;
	/*flex: 0 0 27%;
	align-self: flex-start;*/
	vertical-align: top;
	/*-webkit-transition: all 0.75s ease-out;
	transition: all 0.75s ease-out;
	/*-webkit-animation: bounce-back 0.6s ease-out;
	   -moz-animation: bounce-back 0.6s ease-out;
	     -o-animation: bounce-back 0.6s ease-out;
	    -ms-animation: bounce-back 0.6s ease-out;
	        animation: bounce-back 0.6s ease-out;*/

}
#image-wrap:hover {
	/*-webkit-animation: enlarge-bounce 0.75s ease-out forwards;
	-moz-animation: enlarge-bounce 0.75s ease-out forwards;
	-o-animation: enlarge-bounce 0.75s ease-out forwards;
	-ms-animation: enlarge-bounce 0.75s ease-out forwards;
	animation: enlarge-bounce 0.75s ease-out forwards;*/	
	/*-webkit-transform: scale(1.02,1.02);
	transform: scale(1.02,1.02);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);*/
}
#image-wrap:hover .snejana {
	-webkit-transform: translate(0%,-100%);
	transform: translate(0%,-100%);
	opacity: 0;
}
#image-wrap:hover .about {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate(0%,-100%);
	transform: translate(0%,-100%);
}
#image-wrap:hover .name {
	-webkit-transform: translate(-13.5%,0%);
	transform: translate(-13.5%,0%);
}
#image-wrap:hover .hover-me {
	-webkit-transform: translate(0%,-500%);
	transform: translate(0%,-500%);
	opacity: 0;
}
#image-wrap:hover .hover-me-arrow {
	-webkit-transform: translate(0%,-400%);
	transform: translate(0%,-400%);
	opacity: 0;
}
.hover-me-arrow {
	font-size: 2.6vw;
	font-family: Helvetica;
	text-align: center;
	line-height: 40%;
	padding: 3% 0% 4% 0%;
	opacity: 1;
	-webkit-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
.hover-me {
	text-align: center;
	padding: 2% 0% 0% 0%;
	line-height: 0%;
	font-size: 1.8vw;
	opacity: 1;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
	-webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.snejana {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
	z-index: 1;
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
	opacity: 1;
	-webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
/*.snejana:hover {
	-webkit-transform: translate(0%,-100%);
	transform: translate(0%,-100%);
	opacity: 0;
}*/

.about {
	max-width: 90%;
	/*height: calc(98% - 1.4em);*/
	flex: 1 1 auto;
	position: absolute;
	/*display: none;*/
	font-size: 100%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.9s ease;
	transition: all 0.9s ease;
	-webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.about p {
	margin: 0 0 10px 0;
}
.about-list {
	margin-left: 8%;
}
.about-content {
	max-width: 70%;
	font-size: 120%;
	/*text-align: center;*/
	/*margin-top: 3%;*/
	text-align: justify;
	padding-right: 1%;
	display: inline-block !important;
	margin-top: 2%;
	/*flex: 1 0 70%;
	align-self: flex-start;	*/
}
.certificates {
	display: flex !important;
	padding: 1.5% 1% 1% 1%;
	max-width: 90%;
	margin-left: 3%;
	/*padding-right: 1%;*/
	flex: 0 0 100%;
	flex-wrap: wrap;
	align-self: flex-start;
	align-items: flex-end;
	vertical-align: top;
	/*border: 8px solid #FFFF9D;
	border-radius: 8px;*/
}
.certificates a {
	padding: 0% 0.5% 0% 0.5%;
	flex: 0.4 0 22%;
}
.c-transition {
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.c-transition:hover {
	z-index: 2;
}
.certificates img {
	width: 100%;
	border-radius: 12px;
	border: 4px solid transparent;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	transition: all 0.4s ease;	
}
.certificates img:hover {
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	-webkit-transform: scale(1.2, 1.2);
	transform: scale (1.2, 1.2);
	border: 4px solid #FFFF9D;
}
.align-top {
	vertical-align: top;
}
.about-button {
	
}
.service-h3 {
	padding: 1% 0% 3% 0%;
	cursor: pointer;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.service-h3:hover {
	color: #FFE488;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
	/*font-size: 116%;*/
	transform: scale(1.03, 1.03);
}
.service-h3:active {
	color: gray;
	transform: scale(0.98, 0.98);
}
.service-h4 {
	font-size: 120%;
	font-weight: bold;
}
p.introduction {
	padding-top: 2.5%;
	padding-bottom: 2.5%;
	margin: auto;
	max-width: 80%;
	text-align: justify;
	font-size: 120%;
}
.psy-text {
	margin: auto;
	max-width: 80%;
	text-align: justify;
	padding-bottom: 1%;
}
.psy-text-title {
	margin: auto;
	max-width: 80%;
	text-align: center;
	padding-top: 2.5%;
	padding-bottom: 2%;
}
.hypnotherapy {
	padding-top: 2.5%;
	padding-right: 1%;
	padding-left: 10%;
	float: left;
	max-width: 15%;
	max-height: 15%;
	margin: auto;
}
.psychology {
	padding-top: 2.5%;
	padding-right: 1%;
	padding-left: 5%;
	padding-bottom: 2%;
	float: left;
	max-width: 12%;
	max-height: 12%;
	margin: auto;
}
.homeimg {
	padding-top: 2.5%;
	padding-right: 10%;
	padding-left: 10%;
	max-width: 70%;
	max-height: 70%;
	margin: auto;
}
.pssimg {
	padding-top: 0.5%;
	padding-right: 5%;
	padding-left: 5%;
	text-align: right;
	max-width: 15%;
	max-height: 15%;
	margin: auto;
}
.font120 {
	font-size: 120%;
}
.indented {
	margin-left: 4%;
}
.text-right {
	text-align: right;
}
.justified {
	text-align: justify;
}
.first-line-indent {
	margin-top: 2%;
	/*text-indent: 4%;*/
}
#map {
	width: 60%;
	height: 450px;
	/*background: #FFFF9D;*/
	display: inline-block !important;
	border-radius: 8px;
	vertical-align: top;
}
.contact-page-info {
	padding-left: 10%;
	width: 25%;
	height: 100%;
	display: inline-block !important;
	vertical-align: top;
	font-size: 120%;
}
.contact-page-info h2{
	padding-bottom: 4%;
}
.info-symbols {
	font-size: 400%;
	padding: 0% 0% 0% 0%;
	line-height: 40%;
}
.contact-page-after-s {
	display: inline-block !important;
	vertical-align: 60%;
}
footer { color: #999; margin: 0 auto; width: 70%;  }
#footer-id {
	font-size: 110%;
	padding: 0% 0% 3vw 0%;
	position: relative;
	display: flex !important;
	flex: 1 1 auto;
}
.footer-copyright {
	margin: 0 0 0 0;
	display: inline-block;
}
.footer-hidden {
	position: absolute;
	z-index: -1;
	top: 0%;
	opacity: 0;
	color: black;
	font-weight: bold;
}