/*
=====================================================================
*   Ceevee v1.0 Layout Stylesheet
*   url: styleshout.com
*   03-18-2014
=====================================================================

   TOC:
   a. General Styles
   b. Header Styles
   c. About Section
   d. Service Section
      1. Seb
      2. emdr
      3.hsp
      4.hypnose
   e. Portfolio Section
   f. Call To Action Section
   g. Testimonials Section
   h. Contact Section
   i. Footer

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General Styles
/* ------------------------------------------------------------------ */
:root { 
   --background: #2B2B2B;
   --primary: #565e60;
   --secondary: #353d3f;
   --middark: #a1b2c4;
   --darkblue: #595d66;
   --midblue: #95a4c3;
   --lightblue: #b9c2d4;
   --backgroundl: #E5F3FD;
   --test: red;

/*on dark background*/
   --textlight: #fff; /* Header Text*/
   --textprimd: #c5c5c5; 
}‚


body { background: #0f0f0f; }

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   position: relative;
   height: 800px;
   min-height: 500px;
   width: 100%;
   background: var(--background) url(../images/header-background.jpg) no-repeat top center;
   background-size: cover !important;
	-webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
}

/* vertically center banner section */
header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 85%;
   padding-bottom: 30px;
   text-align: center;
}

header .banner-text { width: 100%; }
header .banner-text h1 {
   font: 90px/1.1em 'opensans-bold', sans-serif;
   color: var(--textlight);
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   
}
header .banner-text h3 {
   font: 18px/1.9em 'librebaskerville-regular', serif;
   color: var(--textlight);
   margin: 0 auto;
   width: 70%;
   
}
header .banner-text h3 span,
header .banner-text h3 a {
   color: var(--textlight);
}


/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 12px 'opensans-bold', sans-serif;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color: var(--midblue); }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   min-height: 48px;
   width: auto;

   /* center align the menu */
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */

   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: var(--darkblue);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: var(--midblue); } 



/* ------------------------------------------------------------------ */
/* c. About Section
/* ------------------------------------------------------------------ */

#about {
   background: var(--background);
   padding-top: 96px;
   padding-bottom: 66px;
   overflow: hidden;
}

#about a, #about a:visited  { color: var(--textlight); }
#about a:hover, #about a:focus { color: var(--textlight); }

#about h2 {
   font: 22px/30px 'opensans-bold', sans-serif;
   color: var(--textlight);
   margin-bottom: 12px;
}
#about p {
   line-height: 30px;
   color: var(--textprimd);
   font-size: 17px;
}
#about .profile-pic {
   position: relative;
   width: 120px;
   height: 120px;
   border-radius: 100%;
}
#about .contact-details { width: 41.66667%; }
#about .download {
   width: 58.33333%;
   padding-top: 6px;
}
#about .main-col { padding-right: 5%; }

/* ------------------------------------------------------------------ */
/* d. Service Section
/* ------------------------------------------------------------------ */


.education {
   margin-bottom: 8px;
   padding-bottom: 4px;
   border-bottom: 1px solid var(--backgroundl);
}

/*SEB*/
#seb {
   background: var(--backgroundl);
   padding-top: 90px;
   padding-bottom: 72px;
   overflow: hidden;
   color: var(--primary);
}

#seb a, #seb a:visited  { color: var(--lightblue); }
#seb a:hover, #seb a:focus { color: var(--midblue); }

#seb h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
}
#seb h1 span {
   border-bottom: 3px solid var(--darkblue);
   padding-bottom: 0px;
}
#seb h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
}

#seb .header-col { padding-top: 9px; }
#seb .main-col { padding-right: 10%; }

#seb .custom-description {
   margin-bottom: 20px; /* Adjust this value to your liking */
}

#seb .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: var(--secondary);
   margin-bottom: 18px;
   margin-top: 9px;
}
#seb .info span {
   margin-right: 5px;
   margin-left: 5px;
}
#seb .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}

/*EMDR*/
#emdr {
   background: var(--backgroundl);
   padding-top: 90px;
   padding-bottom: 72px;
   overflow: hidden;
   color: var(--primary);
}

#emdr a, #emdr a:visited  { color: var(--lightblue); }
#emdr a:hover, #emdr a:focus { color: var(--midblue); }

#emdr h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
}
#emdr h1 span {
   border-bottom: 3px solid var(--darkblue);
   padding-bottom: 0px;
}
#emdr h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
}

#emdr .header-col { padding-top: 9px; }
#emdr .main-col { padding-right: 10%; }

#emdr .custom-description {
   margin-bottom: 100px; /* Adjust this value to your liking */
}

#emdr .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: var(--secondary);
   margin-bottom: 18px;
   margin-top: 9px;
}
#emdr .info span {
   margin-right: 5px;
   margin-left: 5px;
}
#emdr .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}
/*HSP*/
#hsp {
   background: var(--backgroundl);
   padding-top: 90px;
   padding-bottom: 72px;
   overflow: hidden;
   color: var(--primary);
}

#hsp a, #hsp a:visited  { color: var(--lightblue); }
#hsp a:hover, #hsp a:focus { color: var(--midblue); }

#hsp h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
}
#hsp h1 span {
   border-bottom: 3px solid var(--darkblue);
   padding-bottom: 0px;
}
#hsp h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
}

#hsp .header-col { padding-top: 9px; }
#hsp .main-col { padding-right: 10%; }

#hsp .custom-description {
   margin-bottom: 20px; /* Adjust this value to your liking */
}

#hsp .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: var(--secondary);
   margin-bottom: 18px;
   margin-top: 9px;
}
#hsp .info span {
   margin-right: 5px;
   margin-left: 5px;
}
#hsp .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}
/*hypnose*/
#hypnose {
   background: var(--backgroundl);
   padding-top: 90px;
   padding-bottom: 72px;
   overflow: hidden;
   color: var(--primary);
}

#hypnose a, #hypnose a:visited  { color: var(--lightblue); }
#hypnose a:hover, #hypnose a:focus { color: var(--midblue); }

#hypnose h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
}
#hypnose h1 span {
   border-bottom: 3px solid var(--darkblue);
   padding-bottom: 0px;
}
#hypnose h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
}

#hypnose .header-col { padding-top: 9px; }
#hypnose .main-col { padding-right: 10%; }

#hypnose .custom-description {
   margin-bottom: 20px; /* Adjust this value to your liking */
}

#hypnose .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: var(--secondary);
   margin-bottom: 18px;
   margin-top: 9px;
}
#hypnose .info span {
   margin-right: 5px;
   margin-left: 5px;
}
#hypnose .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}

/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0;}

/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }

/* Clearfix for .slides */
.slides:before,
.slides:after {
   content: " ";
   display: table;
}
.slides:after {
   clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }

/* Slider Styles */
.slides { zoom: 1; }
.slides > li {
   /*margin-right: 5px; */
   overflow: hidden;
}

/* Control Nav */
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -20px;
    text-align: left;
}
.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    display: inline;
}
.flex-control-paging li a {
    width: 12px;
    height: 12px;
    display: block;
    background: #ddd;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);
}
.flex-control-paging li a:hover {
    background: #CCC;
    background: rgba(255, 255, 255, .7);
}
.flex-control-paging li a.flex-active {
    background: var(--textlight);
    background: rgba(255, 255, 255, .9);
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* h. Contact Section
/* ------------------------------------------------------------------ */

#contact {
   background: var(--background);
   padding-top: 96px;
   padding-bottom: 102px;
   color: var(--textlight);
   font-size: 18px;
}
#contact .section-head { margin-bottom: 30px; }

#contact a, #contact a:visited  { color: var(--lightblue); }
#contact a:hover, #contact a:focus { color: var(--textlight); }

#contact h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: var(--textlight);
   margin-bottom: 6px;
}
#contact h1 span { display: none; }
/*mail zeichen*/
#contact h1:before {
   font-family: 'FontAwesome';
   content: "\f0e0";
	padding-right: 10px;
	font-size: 72px;
   line-height: 72px;
   text-align: left;
   float: left;
   color: var(--textlight);
}
/*Adresse and Phone*/
#contact h4 {
   font: 18px/24px 'opensans-bold', sans-serif;
   color: var(--textlight);
   margin-bottom: 6px;
   
}
#contact p.lead {
   font: 22px/36px 'opensans-light', sans-serif;
   padding-right: 3%;
   color: (var(--textlight));
}
#contact .header-col { padding-top: 6px; }


/* contact form */
#contact form { margin-bottom: 30px; }
/*form exmp Name* */
#contact label {
   font: 20px/24px 'opensans-bold', sans-serif;
   margin: 12px 0;
   color: var(--textlight);
	display: inline-block;
	float: left;
   width: 26%;
   font-weight: 300;
}
#contact input,
#contact textarea,
/*input boxen for form*/
#contact select {
   padding: 18px 20px;
	color: var(--secondary);
	background: var(--primary);
	margin-bottom: 42px;
	border: 0;
	outline: none;
   font-size: 15px;
   line-height: 24px;
   width: 65%;
   font-size: 18px;
}
/*when input boxes are selected*/
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	color: var(--darkblue);
	background-color: var(--secondary);
   font-size: 18px;
}
/*submit button*/
#contact button.button {
	text-transform: uppercase;
	letter-spacing: 3px;
	color:var(--textlight);
   background: var(--darkblue);
	border: none;
   cursor: pointer;
   height: auto;
   display: inline-block;
	border-radius: 3px;
   margin-left: 26%;
}
#contact button.button:hover {
	color: #0D0D0D;
	background: var(--textlight);
}
/*sternchen*/
#contact span.required {
	color: var(--lightblue);
	font-size: 13px;
}

/* Align the table to the left with some space */
#contact table {
   margin-left: 10px;  /* Adjust as needed */
   width: auto;
   border-collapse: separate;
   border-spacing: 2em 0;
}


/* Style for table header and cells */
#contact th, td {
   padding: 10px;
   text-align: center;
   font-weight: 300;
}

/* Add space after the table */
#contact .table-space {
   margin-bottom: 70px;
}

#contact table tr td:first-child {
    text-align: left;
}



#message-warning, #message-success {
   display: none;
	background: #0F0F0F;
	padding: 24px 24px;
	margin-bottom: 36px;
   width: 65%;
   margin-left: 26%;
}
#message-warning { color: #D72828; }
#message-success { color: #717459; }

#message-warning i,
#message-success i {
   margin-right: 10px;
}
#image-loader {
   display: none;
   position: relative;
   left: 18px;
   top: 17px;
}


/* ------------------------------------------------------------------ */
/* i. Footer
/* ------------------------------------------------------------------ */

footer {
   padding-top: 48px;
   margin-bottom: 48px;
   color: #303030;
   font-size: 14px;
   text-align: center;
   position: relative;
}

footer a, footer a:visited { color: #525252; }
footer a:hover, footer a:focus { color: var(--textlight); }

/* copyright */
footer .copyright {
    margin: 0;
    padding: 0;
 }
footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 24px;
}
.ie footer .copyright li {
   display: inline;
}
footer .copyright li:before {
    content: "\2022";
    padding-left: 10px;
    padding-right: 10px;
    color: #095153;
}
footer .copyright  li:first-child:before {
    display: none;
}


/* Go To Top Button */
#go-top {
	position: absolute;
	top: -24px;
   left: 50%;
   margin-left: -30px;
}
#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #525252;

	-webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;

   color: var(--textlight);
   font-size: 21px;
   line-height: 60px;
 	border-radius: 100%;
}
#go-top a:hover { background-color: var(--primary); }