/* cantata-one-regular - latin */
@font-face {
  font-family: 'Cantata One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cantata-one-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Cantata One'), local('CantataOne-Regular'),
       url('../fonts/cantata-one-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cantata-one-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cantata-one-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cantata-one-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cantata-one-v9-latin-regular.svg#CantataOne') format('svg'); /* Legacy iOS */
}


html {
	overflow-y: scroll;
}
/* Preloading CSS Background Images */

body::before {
  content: url('/content/media/supervision-praxis-du-bois.jpg');
  display: none;
}
body {
	color: #333;
	font-size: 17px;
	font-family: "Calibri", Helvetica, Arial, sans-serif;
	font-weight: 300;
	background-color: #2a2a2a;
   	background-image: url('/content/media/supervision-praxis-du-bois.jpg');
    background-repeat: no-repeat;
	background-attachment:fixed;
    background-position: center center;
    background-size: cover;

}
#inhalt {padding-bottom: 3em;}/*	position:relative;*/
#header {
    color: white;
    height: 210px;/**/
    padding: 10px 30px;
    width: 100%;
}
#header .inner {position:relative;} /*GR*/

p {
	color: #444;
}

h1,h2,h3,h4,h5 {
	font-family: 'Cantana One', serif;
	font-weight: 300;
}

.feature {
	max-width: 31.33%;
	float: left;
	background-color: #eee;
	margin: 0 1%;
	padding: 20px;
}

.feature:last-child {
	margin-right: 0px;
}

.feature:first-of-type {
	margin-left: 0px;
}

.hidden {visibility:hidden;}

.logo {
	float: left;
}
.autoheight {padding-bottom:10px !important;}

#nav,
#pattern {
	float: right;
	padding-top: 15px;
	font-size:	17px;
	width: 100%;/**/
	margin-top:-40px;
}

/*Mobil-Menübutton für Desktopansicht ausblenden*/
a.menu-link {
	display: none;
	}
/*keine Menü Höhenangabe */
.js nav[role=navigation] {
	max-height: none;
}
/* menüeinzug */
nav[role=navigation] ul {
		/*margin: 0 0 0 -0.25em;*/
		margin: 0 3px 20px 0; float: right;
		border: 0;
}
nav[role=navigation]  li {
		/*display: inline-block;
		margin: 0 0.25em;*/
		display: inline-block;
		margin-left: 10px;
		font-family: 'Calibri', serif;
		font-weight: 300;
}
nav[role=navigation] li a {
		border: 0;
		color: white;
		text-decoration: none;
}

nav[role=navigation] li a:hover {
	color: #eb7536;
	text-decoration: none;
}



/*contentbereich */
.inner .kontakt-button {text-align:center; margin: -20px 45% 0 45%;}


.inner .kontakt-button a {
	background-image: url("/content/media/kontakt.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    font-size: 14px;
    height: 40px;
    margin-left: -30px;
    position: absolute;
    width: 65px;
}
.kontakt-button a:hover {
	background-image: url('../../content/media/kontakt-hover.png');
	text-decoration:none;	
}

/* ################# footer ##############*/
#footer {
	border-top: 1px solid #ddd;
	background: #0a8e95 none repeat scroll 0 0;
	opacity:8;
	position: fixed;
	bottom:0;
	width:100%;
	max-width:100%;
	z-index: 300;
	height: 2em;
}

#footer .display {
	display:block;
}
#footer .tablet{
	display:none;
}

#footer .mobile {
	display:none;
}

#footer .print {
	display:none;
}

#footer .inner {
	padding: 5px 20px 20px 20px !important;
}
#footer a {color:#fff;}
#footer a.p-p {
	float:right;
	margin-right:2px;
}

#footer p {
	color: #fff;
	font-size: 15px;
}

/* ende footer */
.headline {
	text-align: right;
	color: #3c9fa4;
	font-size: 35px;
	/*position: relative;*/
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 60px;
	font-weight: 400;
	font-family: 'Calibri', serif;
}

.intro {
	font-size: 24px;
	padding-bottom: 10px;
	text-align: center;
}

.inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 20px;
}

.soc {
	float: right;
	margin-left: 10px;
}

.circle {
    width:70px;
    height:70px;
    border-radius:250px;
    font-size:20px;
    color:#fff;
    line-height:70px;
    text-align:center;
    background-color:#e67548;
    margin-bottom: 15px;
}

.copyright {
	float: left;
}

.portfolio {
	padding: 20px;
	margin-top: 40px;
	background-color: #eee;
}
a.mehr {
	margin: 20px auto;
	float: right;
}
a.mehr:before {content:'>> ';}


input {
	border: 1px solid #ddd;
}

textarea {
	border: 1px solid #ddd;
}

#human {
	display: none;
}

/*nur für Impressum */
.datenschutz {font-size:14px !important;}
a.tiefer img {margin-bottom:-4px;}

/* Hinweis-Layer */
.overlay {
            position: fixed;
            background-color: rgba(60, 60, 60, 0.70);
            top: 0;
            left: 0;
            opacity: 0;
            width: 100vw;
            height: 100vh;
            z-index: 999;
            pointer-events: none;
            animation: ani 45s forwards;
            animation-delay: 1s;
        }
        .modal {
            width: 720px;
            position: absolute;
            top: 40vh;
            left: 50vw;
            opacity: 0;
            z-index: 1000;
            transform: translate(-50%, -50%);
            padding: 2rem;
            background: #f3f3f3;
            color: #444;
            animation: ani 45s forwards;
            animation-delay: 1s;
        }
        .modal header {
            font-weight: bold;
			font-size: 15px;
        }
        .modal-close {
            color: #aaa;
            line-height: 50px;
            font-size: 90%;
            position: absolute;
            right: 0;
            text-align: center;
            bottom: 0;
            width: 100px;
            text-decoration: none;
        }
        .modal-close:hover {
            color: #000;
        }
        .modal h3 {
            font-size: 26px;
            margin: 0 0 15px;
        }
		.modal p {font-size: 15px;}
		.modal li {margin-left: 16px; font-size: 15px;}
       
	   
	    @keyframes ani {
            0% {
                opacity: 0;
            }
            1% {
                opacity: 1;
            }
            99% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
		
		@media only screen and (min-width: 320px) and (max-width: 768px ) {
		        .modal {width: 320px;}		
		        .modal-close {bottom: 0 !important;}
		}
		
		
		



/* SMALL SCREENS (Smartphones) @media only screen and (max-width: 480px) ---------------------------------------------------- */
@media only screen and (min-width: 240px) and (max-width: 1024px ) {

#header {
	text-align: center;
	padding: 10px;
}

.inner {
	padding: 30px 10px;
}
.headline {
    color: #fecc2b !important;
    /*font-family: Arial, Helvetica, serif;*/
    font-size: 14px !important;
	letter-spacing: 0.02 em;
    font-weight: 400;
    left: 0;
    margin-top: 8px;
	margin-bottom: 5px;
    text-align: center;
    top: 0;
    width: auto;
}

.intro {
	font-size: 20px;
}

.logo {
	float: none;
}

/* Menübutton einblenden 
a.menu-link  {
  	    float: right;
		display: block;
		position:absolute;
		top:5px;
		right:5px;
}
a.menu-link  {
	background-image: url("../../content/media/icons/menue.png");
	background-repeat:no-repeat;
	background-color:transparent;
	width: 35px;
	height: 35px;
	float:right;
	margin: 3px;
	border-radius: 2px;
	cursor:pointer;		
}
a.menu-link:hover,
a.menu-link:active {background-color:#eee;}
*/

/*Menü einfaden   nav #nav
		.js nav[role=navigation] {
			overflow: hidden;
			max-height: 0;
		}
		nav[role=navigation].active {
			background-color: #eeeeee;
			border-radius: 2px;
			left: 0;
			max-height: 18em;
			position: absolute;
			top: 50px;
			width: 100%;
		}
		nav[role=navigation] ul {
			margin: 0;
			padding: 0;
			float: none;
		}
		nav[role=navigation].active li {
			display: block;
			width: 100%;
			texta-align:center;
			margin-left: 0;
		}
		
		nav[role=navigation].active li a {
			display: block;
			padding: 0.4em;
			border-bottom: 1px solid #ccc;
			color:#444;
			width: 100%;
		}
		nav[role=navigation].active li a:hover {
			border-bottom: 1px solid #eb7536;
			color: #eb7536;
		}
*/


#footer .print {
	display:none;
}


#footer .display {
	display:none;
}
#footer .tablet{
	display:none;
}

#footer .mobile {
	display:block;
	margin: 0 10px;
	text-align:center;
	font-size: 13px !important;
}
#footer .mobile h3, #footer .mobile p {
	color: #eee !important;
	}
#footer .mobile a {
	color: #eee;
	font-size:13px;
	}
.copyright {
	float: none;
}

.soc {
	float: left;
}

.feature {
	max-width: 100%;
	float: none;
	margin: 1%;
}

.feature:last-child {
	margin-right: 1%;
}

.feature:first-of-type {
	margin-left: 1%;
}

.unit-80 {
	width: 100%;
} 
/* Infotext über Content */
.units-row-info {
    margin: 0.6em 0 0.4em 0;
	font-size:0.8em;
}

}