@charset "UTF-8";

/*
Theme Name: Julia Griefahn
Theme URI: http://juliagriefahn.coach/
Author: Lena Byeloglaz
Author URI: https://westwerk.eu
Description: Individual website design
Version: 1
Template: twentytwentyone
*/




@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100;
	src:
		local('Roboto Thin'),
		local('Roboto-Thin'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxIIzI.woff2 */
		url('font/Roboto_100.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src:
		local('Roboto Light'),
		local('Roboto-Light'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2 */
		url('font/Roboto_300.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 100;
	src:
		local('Roboto Thin Italic'),
		local('Roboto-ThinItalic'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOiCnqEu92Fr1Mu51QrEzAdLw.woff2 */
		url('font/Roboto_100italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	src:
		local('Roboto Light Italic'),
		local('Roboto-LightItalic'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2 */
		url('font/Roboto_300italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto'),
		local('Roboto-Regular'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2 */
		url('font/Roboto_400.woff2') format('woff2');
}

@font-face {
	font-family: 'Spectral';
	font-style: normal;
	font-weight: 200;
	src:
		local('Spectral'),
		local('Spectral-Light'),
		url('font/Spectral-Light.woff2') format('woff2');
}



/************************************************
*	Global										*
************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
sub {vertical-align: sub;}
sup {vertical-align: super;}

div, ul, li, ol, p, table, tr, td {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/************************************************
*	Content										*
************************************************/


body {
	background: #ffffff;
	color: #2f4b5f; font-size: 14px; font-weight:300; font-family: Roboto, sans-serif; line-height:22px;
	margin: 0px; padding: 0px; overflow-y: scroll;
	}
	

b {font-weight:400;}

a:link, a:visited, a:hover  {color:#41677d; text-decoration:underline;}
a:hover  {text-decoration:none;}
p {padding-bottom:10px; text-align:justify;}
.wp-block-column p {text-align:left;}

h1, h2, .zitat_content h3 {display:block; width:100%; height:auto; font-family: Spectral, sans-serif; font-size: 22px; font-weight:200; margin:0px; padding:0 0 20px 0; text-align:center; line-height:normal;}
h4 {font-weight:400; font-size: 16px; line-height:normal;}

#bild_cont {display:block; position:fixed; width:100vw; height:100vh; overflow:hidden; padding:0px; margin:0px; background-color:#000;}	
.bild_paralax_v {display:block; position:absolute; left:0px; top:0px; width:100vw; height:100vh; overflow:hidden; padding:0px; margin:0px;}
.bild_paralax { display:block; width:100%; height:100%; position:absolute; left:0px; top:0px; padding:0px; margin:0px; overflow:hidden;}
.bild_paralax video { width:100%; height:100%; padding:0px; margin:0px;}

.logo_intro {display:block; overflow:hidden; position:absolute; left:0px; top:0px; width:100%; height:100vh; background-image:url(img/logo_intro_m.png); background-repeat:no-repeat; background-position:center center; background-size:80% auto;}

.content {display:none; position:relative; width:100%; height:auto; float:left; }
.wp-block-cover {height:60vh;}
#loch1, #loch2 {height:70vh; overflow:hidden; padding:0px;}
#loch1 video {display:none;}

.wp-block-group {padding:0px; margin:0px;}

#home {margin:0px; padding:0px; color:#FFF; 
background-image: url(img/bg_down_weiss.svg), url(img/muster_bg_m.jpg);
background-repeat: no-repeat, repeat;
background-position: center 101%;
background-size: 102% auto, auto;}
.wp-block-group__inner-container, #home, #about, #about2, #scoaching {padding:40px 20px; }
#meet .wp-block-group__inner-container {padding:40px 20px; }
#loch2 .wp-block-cover__inner-container {padding:0px; margin:0px; width:100%; height:70vh; background-image:none; position:absolute; top:10px;}




.zitat_content {vertical-align:middle; line-height:normal; background-image:url(img/zitat_rame.svg); background-repeat:no-repeat; background-position:center; background-size:100% 100%; padding:0px 5%;}
.zitat_content p {text-align:right; font-style:italic; padding:0px;}
.zitat_bild {width:30%; vertical-align:middle;}
.zitat_bild img {width:90%; height:auto; max-width:250px;}


.pageCont {display:block; position:relative; float:left; width:100%; margin:0px; background-color:#FFF; padding:0px; overflow:hidden; }
.thema {display:block; width:100%; height:auto; position:relative; float:left; margin:0px; padding:40px 20px;}
.grau {background-color:#ece6da;}
.bg_down_gold {background-image:url(img/bg_down_gold.svg); background-repeat:no-repeat; background-position:center 101%; background-size:102% auto;}

.bereich {display:inline-block; position:relative; width:100%; height:auto; float:left; padding:0px; margin:0px; line-height:normal;}
.bereich_content {display:block; position:relative; width:250px; height:250px; padding:0px; margin:5px auto;
-moz-border-radius: 125px 125px 125px 125px; -webkit-border-radius: 125px 125px 125px 125px; border-radius: 125px 125px 125px 125px; overflow:hidden; background-color:#5f888e; color:#FFF; text-align:center; font-size:20px; cursor:pointer;
}
.bereich_content img {width:auto; height:120px; margin:30px auto 10px auto;}
.bereich_content p {text-align:center; padding:0px 10%;}

.bereich_table {display:block; position:relative; width:100%; height:auto;  margin:0 auto;}
.bereich_tr {display:block;  width:100%; height:auto; }
.bereich_td {display:block; width:100%; height:auto; padding:0px; text-align:left;}
.bereich_td h1 {text-align:left;}
.bereich_td p {text-align:left;}

.bereich_bild {display:block; position:relative; width:100%; height:auto; padding:0px; margin:0px 0px 10px 0px;}
.bereich_bild_content {display:block; position:relative; width:200px; height:200px;  padding:0px; margin:0px auto;}
.bereich_bild_content img {width:100%; height:100%; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; overflow:hidden;}
.bereich_bild_icon {display:block; position:absolute; left:120px; top:0px; width:80px; height:80px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; overflow:hidden; background-color:#5f888e; text-align:center; padding:0px;}
.bereich_bild_icon img {width:auto; height:60%; margin-top:20%; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}




.jetzt_loslegen {display:block; width:150px; height:auto; border:solid 1px #2f4b5f; padding:7px 0px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-align:center; position:relative; float:left; cursor:pointer;}
.jetzt_loslegen a:link, .jetzt_loslegen a:visited, .jetzt_loslegen a:hover  {color:#2f4b5f; text-decoration:none;}

#meet p {text-align:center;}
.jetzt_mail {display:block; width:250px; height:auto; border:solid 1px #ffffff; padding:7px 0px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-align:center; cursor:pointer; margin:0px auto;}

.jetzt_mail a:link, .jetzt_mail a:visited, .jetzt_mail a:hover  {color:#ffffff; text-decoration:none;}


#kontakt {background-image: url(img/bg_down_weiss.svg); background-repeat: no-repeat; background-position: center 101%; background-size: 102% auto;}
#kontakt a:link, #kontakt a:visited, #kontakt a:hover  {color:#ffffff; text-decoration:none;}

.thema li {list-style:outside; margin-left:20px;}

/* Menu | Footer */

.logo { display:block; position:fixed; width:80%; height:auto; text-align:center; top:0px; left:10%; margin:-100px 0px 0px 0px; padding:0px; z-index:100; }
.logo img {display:block; position:relative; cursor:pointer; width:100%; height:auto; margin:0px;}

.header-nav {display:block; position:fixed; width:120px; height:300px;top:0px; left:100%; pointer-events:none; margin:0px; padding:0px; z-index:101;}
.header-menu-container {display:block; position:absolute; width:120px; height:300px; top:0px; left:0px; background-image:url(img/menu_bg.svg); background-repeat:no-repeat; background-position:top left; background-size:100% auto;}
.header-menu-container ul {display:block; padding:0; position:relative; width:100%; margin:60px 0px 0px 0px;}
.header-menu-container li  {display:block;  position:relative; font-size:14px; line-height:normal; padding:0px 20px 2px 0px;  width:100%; height:auto; text-align:right; pointer-events:auto; color:#fff; cursor:pointer; text-transform:uppercase; font-family: Spectral, sans-serif; }
.header-menu-container a:link, .header-menu-container a:visited, .header-menu-container a:hover  {color:#fff; text-decoration:none; text-transform:none; font-size:10px;}


.menu_btn {display:none; position:fixed; width:30px; height:30px; top:10px; left:100%; margin-left:-50px; cursor:pointer; z-index:102;}
.menu_btn img {width:100%; height:100%; }


footer {display:none; position:relative; width:100%; min-height:150px; height:auto; float:left; font-weight:400; color:#FFF; font-size:14px; background-color:#5f888e; padding:0px; margin:0px; }
.logo_f {display:block; position:absolute; width:120px; height:120px; top:0px; left:100%; background-image:url(img/logo_footer.svg); background-repeat:no-repeat; background-position:center 0px; background-size:100% auto; margin:-30px 0px 0px -140px;}

.main-nav {display:block; position:relative; width:100%; height:auto; }
.menu {display:block;  width:50px; height:auto; padding:0; position:relative; margin:20px auto 0 50px;}
.menu li  {display:block;  position:relative; width:auto; height:auto; font-size:14px; line-height:auto; padding:2px 0px; cursor:pointer; color:#fff; text-transform:uppercase; font-family: Spectral, sans-serif; }
.menu a:link, .menu a:visited, .menu a:hover  {color:#fff; text-decoration:none; text-transform:uppercase;}

.info_f {display:block; position:absolute; width:100%; height:auto; top:120px; left:0px; text-align:center; font-size:12px; font-family: Spectral, sans-serif; }
.info_f a:link, .info_f a:visited, .info_f a:hover  {color:#fff; text-decoration:underline;}


@media only screen and (min-width: 481px) {
	.logo_intro {background-size:60% auto;}
}


@media only screen and (min-width: 720px) {
	body {font-size:16px; line-height:28px;}
	h4 {font-size: 18px; line-height:normal;}
	h1, h2, .zitat_content h3 {font-size:24px; line-height:normal;}
	.logo_intro {background-size:50% auto; background-image:url(img/logo_intro2.png);}
	
	.wp-block-group__inner-container, .thema, #home, #about, #about2, #scoaching, #meet .wp-block-group__inner-container {padding:80px 10%;}
	#loch2 .wp-block-cover__inner-container {background-image:url(img/bg_down_gold.svg); background-repeat:no-repeat; background-position: center bottom;
	background-size:102% auto;}
	
	
	.bereich {width:50%; line-height:normal;}
	.bereich_content {margin:10px auto;}
	
	.bereich_table {display:table;}
	.bereich_tr {display:table-row;}
	.bereich_bild {display:table-cell; width:50%;  margin:0px;}
	.bereich_td {display:table-cell; width:50%; vertical-align:top; padding:0px;}
	
	.bereich_bild_content {margin:0px; width:250px; height:250px;}
	.bereich_bild_icon {top:0px; width:100px; height:100px; left:150px;}
	
	.jetzt_loslegen {width:170px;}
	.jetzt_mail {width:300px;}
	.jetzt_tel {width:300px; float:right;}


	/* Menu | Footer */
	
	.logo {width:50%; left:25%;}
	.menu_btn {top:20px; margin-left:-60px;}
	.header-nav, .header-menu-container {width:150px; height:400px;}
	.header-menu-container ul {margin:70px 0px 0px 0px;}
	.header-menu-container li  {font-size:16px; padding:0px 20px 5px 0px;}
	.header-menu-container a:link, .header-menu-container a:visited, .header-menu-container a:hover  {font-size:12px;}
	
	footer {min-height:140px; text-align:center;}
	
	.logo_f {width:170px; height:170px; margin:-40px 0px 0px -200px;}
	.info_f {top:110px;}
}

@media only screen and (min-width: 1000px) {
	body {font-size:18px; line-height:32px;}
	h4 {font-size: 20px; line-height:normal;}
	p {padding-bottom:20px;}
	h1, h2, .zitat_content h3 {font-size:26px; line-height:normal;}
	
	#home {background-image: url(img/bg_down_weiss.svg), url(img/muster_bg.jpg); }

	.zitat_bild {width:30%;}
	.zitat_content {padding:0px 10%;}
	
	.bereich_bild_content {width:300px; height:300px;}
	.bereich_bild_icon {width:100px; height:100px; left:200px;}
	
	.jetzt_loslegen {width:190px;}
	.jetzt_mail {width:310px;}
	
	
	/* Menu | Footer */
	.menu_btn {top:20px; margin-left:-80px;}
	.header-nav, .header-menu-container {width:180px; height:400px;}
	.header-menu-container ul {margin:80px 0px 0px 0px;}
	.header-menu-container li  {font-size:18px; line-height:normal; padding:0px 30px 8px 0px;}
	.header-menu-container a:link, .header-menu-container a:visited, .header-menu-container a:hover  {font-size:14px;}
	
	footer {min-height:150px;}
	.logo_f {width:200px; height:200px; margin:-60px 0px 0px -250px;}
	.menu {display:inline-block; width:auto;  margin:50px auto 0px auto;}
	.menu li {display:inline-block; padding:0px; margin:0 20px; font-size:16px;}
	.info_f {top:120px;}
}

@media only screen and (min-width: 1200px) {
	body {font-size:20px; line-height:36px;}
	p {padding-bottom:25px;}
	h4 {font-size: 22px; line-height:normal;}
	h1, h2, .zitat_content h3 {font-size:30px; line-height:normal;}
	.logo_intro {background-size:40% auto;  background-image:url(img/logo_intro.png);}
	.wp-block-group__inner-container, .thema, #home, #about, #about2, #scoaching, #meet .wp-block-group__inner-container {padding:100px 15%;}

	.zitat_content {line-height:normal;}
	
	.bereich {width:50%; line-height:normal;}
	.bereich_content {margin:10px auto;}
	
	.bereich_bild_content {width:350px; height:350px;}
	.bereich_bild_icon {width:120px; height:120px; left:230px;}
	
	.jetzt_loslegen {width:200px;}
	.jetzt_mail {width:330px;}
	
	
	/* Menu | Footer */
	.logo {width:40%; left:30%;}
	footer {min-height:180px;}
	.logo_f {width:230px; height:230px; margin:-70px 0px 0px -280px;}
	.menu {margin:60px auto 0 auto;}
	.menu li {margin:0 30px; font-size:18px;}
	.info_f {top:140px; font-size:14px;}
}


@media only screen and (min-width: 1600px) {
	body {font-size:22px; line-height:40px;}
	h4 {font-size: 24px; line-height:normal;}
	p {padding-bottom:30px; }
	h1, h2, .zitat_content h3 {font-size:34px; line-height:normal;}
	.zitat_content {line-height:normal;}
	.wp-block-group__inner-container, #home, #about, #about2, #scoaching, .thema {padding:120px 25%;}
	
	.bereich {width:33%; line-height:normal;}
	
	.bereich_bild_content {width:400px; height:400px;}
	.bereich_bild_icon {left:280px;}

	.jetzt_loslegen {width:220px;}
	.jetzt_mail {width:350px;}
	
	
	/* Menu | Footer */
	.menu_btn {top:20px; margin-left:-80px;}
	.header-nav, .header-menu-container {width:200px; height:500px;}
	.header-menu-container ul {margin:85px 0px 0px 0px;}
	.header-menu-container li  {font-size:22px; line-height:normal; padding:0px 30px 8px 0px;}
	
	footer {min-height:200px;}
	.logo_f {width:250px; height:250px;  margin:-80px 0px 0px -300px;}
	.menu {margin:70px auto 0 auto;}
	.menu li {margin:0 40px; font-size:20px;}
	.info_f {top:150px; font-size:16px;}
	
	
}