@charset "utf-8";

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content Main */
.content, .content2, .content3{
  width:100%;
  background-image: linear-gradient(to bottom,#fff,#C9C9C9);
  position: relative;
  padding-top:3rem;
}
.content2{
  display:block;
  background-image: linear-gradient(to bottom,#C9C9C9,#fff);
 }
 
 .content3{
 	background:#fff;
 }
 
.content-inner, .content2-inner, .content3-inner, .footer-inner{
	max-width:160rem;
	padding:0 2rem;
	margin:auto;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- menubox index */
.content-flex{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	column-gap:2rem;
	row-gap:2rem;
	margin:auto;
	margin-top:3rem;
}

.content-flex > div{
	background-image: linear-gradient(to bottom left,#C9C9C9,#fff);
	border:0;
	flex-basis:35rem;
	min-width:20rem;
	max-width:51rem;
	flex-grow:1;
	flex-shrink:1;
	transition: all 0.6s ease-in-out;
}

.link-box-inner-headline{
	display:block;
	line-height:5rem;
	letter-spacing:0.25rem;
	font-size:1.5rem;
	font-weight:bolder;
	padding-left:2rem;
}
.link-box-inner-content{
	font-size:1.4rem;
	padding:1rem 2rem 2rem 2rem;
	text-align:justify;
}

a.link-box-inner-link:link, a.link-box-inner-link:visited{
	text-decoration:none;
	width:100%;
	height:100%;
	color:#000;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Grid 3: Content links */
.link-box-inner#contentlink-adult,
.link-box-inner#contentlink-support,
.link-box-inner#contentlink-standinclass,
.link-box-inner#contentlink-video,
.link-box-inner#contentlink-faq,
.link-box-inner#contentlink-team,
.link-box-inner#contentlink-kontakt{
	display:block;
	min-height:15rem;
	box-shadow: 0px 0px 2px #939393;
	transition: all 0.5s ease-in-out;
}
#contentlink-adult-image,
#contentlink-support-image,
#contentlink-standinclass-image,
#contentlink-video-image,
#contentlink-faq-image,
#contentlink-team-image,
#contentlink-kontakt-image{
	display:block;
	width:100%;
	height:25rem;
	opacity:0.8;
	box-shadow: 0px 2px 5px #939393;
}
#contentlink-adult-image{
	background:url("images/contentlink-adult.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}
#contentlink-support-image{
	background:url("images/contentlink-support.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}
#contentlink-standinclass-image{
	background:url("images/contentlink-standinclass.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}
#contentlink-video-image{
	background:url("images/contentlink-video.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}
#contentlink-faq-image{
	background:url("images/contentlink-faq.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}
#contentlink-team-image{
	background:url("images/contentlink-team.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}
#contentlink-kontakt-image{
	background:url("images/contentlink-kontakt.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}

#contentlink-adult:hover > #contentlink-adult-image,
#contentlink-support:hover > #contentlink-support-image,
#contentlink-standinclass:hover > #contentlink-standinclass-image,
#contentlink-video:hover > #contentlink-video-image,
#contentlink-faq:hover > #contentlink-faq-image,
#contentlink-team:hover > #contentlink-team-image,
#contentlink-kontakt:hover > #contentlink-kontakt-image{
	opacity:1.0;
}



.content-flex > div:hover{
/*	cursor:pointer; */
	box-shadow: 0px 0px 2px #939393;
}

.content-flex > div h3{
	margin:0;
	padding:0 0 1rem 0;
	font-size:1.5rem;
}

.link-box-outer{
	display:block;
	height:100%;
}

.link-box-inner{
	position:relative;
	height:100%;
}

.link-box-outer:after{
	transition: all ease-in-out .6s;
	background: none repeat scroll 0 0 #1a4a86;
	content: "";
	display: block;
	height: 3px;
	width: 0;
	margin-top:-3px;
}


.link-box-outer:hover:after{
	width:100%;
	cursor:pointer;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- fs-grid01 */
.fs-grid01-01{grid-area:grid01-01;background:rgba(255,255,255,0.4);border:1px solid #D2D2D2;box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);}
.fs-grid01-02{grid-area:grid01-02;background:rgba(255,255,255,0.4);border:1px solid #D2D2D2;box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);}
.fs-grid01-03{grid-area:grid01-03;background:rgba(255,255,255,0.4);border:1px solid #D2D2D2;box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);}

fs-grid01{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	"grid01-01"
	"grid01-02"
	"grid01-03";
	row-gap:2rem;
	column-gap:2rem;
	padding-bottom:3rem;
}

@media screen and (min-width: 801px) {
	fs-grid01{
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
		"grid01-01 grid01-02"
		"grid01-03 grid01-03";
	}
}

@media screen and (min-width: 1200px) {
	fs-grid01{
		display:grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows:1fr;
		grid-template-areas:
		"grid01-01 grid01-02 grid01-03 grid01-03";
	}
}

.fs-grid01-01-flex-outer,
.fs-grid01-02-flex-outer,
.fs-grid01-03-flex-outer{
	display:flex;
	flex-wrap:wrap;
	align-items: stretch;
}

.fs-grid01-03-flex-outer{
	height:100%;
}

.fs-grid01-01-flex-image,
.fs-grid01-02-flex-image,
.fs-grid01-03-flex-image{
	flex-basis:15rem;
	flex-grow:1;
	flex-shrink:1;
	min-width:20rem;
	min-height:25rem;
	background-position: top center;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0.8;
}

@media screen and (max-width: 800px) {
	.fs-grid01-01-flex-outer,.fs-grid01-02-flex-outer,.fs-grid01-03-flex-outer{
		display:block;
		align-items: stretch;
	}
	.fs-grid01-01-flex-image,
	.fs-grid01-02-flex-image,
	.fs-grid01-03-flex-image{
		min-height:40rem;
	}
}

.fs-grid01-01-flex-image{background-image:url("images/fs-grid01-01-flex-image.jpg");}
.fs-grid01-02-flex-image{background-image:url("images/fs-grid01-02-flex-image-interesse.jpg");}
.fs-grid01-03-flex-image{background-image:url("images/fs-grid01-03-flex-image.jpg");}

.fs-grid01-01-flex-content,
.fs-grid01-02-flex-content,
.fs-grid01-03-flex-content{
	flex-basis:30rem;
	min-width:30rem;
	flex-grow:1;
	flex-shrink:1;
	padding:0 1rem 1rem 1rem;
}

.fs-grid01-01-flex-content h3,
.fs-grid01-02-flex-content h3,
.fs-grid01-03-flex-content h3{
	color:#1a4a86;
	font-size:1.6rem;
}
.fs-grid01-01-flex-content p,
.fs-grid01-02-flex-content p,
.fs-grid01-03-flex-content p{
	font-size:1.5rem;
	color:#3F3F3F;
	line-height:1.7rem;
	text-align:justify;
}

.content-inner a{
	text-decoration: none;
}

#fs-grid01-01-link:hover > div > .fs-grid01-01-flex-image, 
#fs-grid01-02-link:hover > div > .fs-grid01-02-flex-image,
#fs-grid01-03-link:hover > div > .fs-grid01-03-flex-image{
	opacity:1;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- fs-grid02 */
fs-grid02{
	/* background:#C9C9C9; */
	display:grid;
	width:100%;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- fs-grid ff. */
.fs-grid02-01{grid-area:grid02-01;background-image:url(images/grid02-image-charity.png);background-repeat:no-repeat;background-position:center center;background-size:75%;}
.fs-grid02-02{grid-area:grid02-02;}
.fs-grid02-03{grid-area:grid02-03;background-image:url(images/grid02-image-verein.png);background-repeat:no-repeat;background-position:center center;background-size:75%;}

fs-grid02 > div{min-height:30rem;padding:0 1rem;}

.fs-grid02-02 h3{
	color:#1a4a86;
	font-size:1.6rem;
}

fs-grid02{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	"grid02-01 grid02-03"
	"grid02-02 grid02-02";
	row-gap:2rem;
	column-gap:2rem;
	padding-bottom:5rem;
}

@media screen and (min-width: 801px) {
	.fs-grid02-01{grid-area:grid02-01;background-image:url(images/grid02-image-charity.png);background-repeat:no-repeat;background-position:center center;background-size:50%;}
	.fs-grid02-02{grid-area:grid02-02;}
	.fs-grid02-03{grid-area:grid02-03;background-image:url(images/grid02-image-verein.png);background-repeat:no-repeat;background-position:center center;background-size:50%;}

	fs-grid02 > div{min-height:30rem;padding:0;}

	fs-grid02{
		display:grid;
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-areas:
		"grid02-01 grid02-02 grid02-03";
	}
}


@media screen and (max-width: 800px) {
	.fs-grid01-01-flex-outer,.fs-grid01-02-flex-outer,.fs-grid01-03-flex-outer{
		display:block;
		align-items: stretch;
	}
	.fs-grid01-01-flex-image,
	.fs-grid01-02-flex-image,
	.fs-grid01-03-flex-image{
		min-height:40rem;
	}
}

.fs-grid01-01-flex-image{background-image:url("images/fs-grid01-01-flex-image.jpg");}
.fs-grid01-02-flex-image{background-image:url("images/fs-grid01-02-flex-image-interesse.jpg");}
.fs-grid01-03-flex-image{background-image:url("images/fs-grid01-03-flex-image.jpg");}

.fs-grid01-01-flex-content,
.fs-grid01-02-flex-content,
.fs-grid01-03-flex-content{
	flex-basis:30rem;
	min-width:30rem;
	flex-grow:1;
	flex-shrink:1;
	padding:0 1rem 1rem 1rem;
}

.fs-grid01-01-flex-content h3,
.fs-grid01-02-flex-content h3,
.fs-grid01-03-flex-content h3{
	color:#1a4a86;
	font-size:1.6rem;
}
.fs-grid01-01-flex-content p,
.fs-grid01-02-flex-content p,
.fs-grid01-03-flex-content p{
	font-size:1.5rem;
	color:#3F3F3F;
	line-height:1.7rem;
	text-align:justify;
}

.content-inner a{
	text-decoration: none;
}

#fs-grid01-01-link:hover > div > .fs-grid01-01-flex-image, 
#fs-grid01-02-link:hover > div > .fs-grid01-02-flex-image,
#fs-grid01-03-link:hover > div > .fs-grid01-03-flex-image{
	opacity:1;
}


.topmenu-outer{
	display:flex;flex-wrap:no-wrap;column-gap:0.5rem;justify-content:flex-end;
	position:fixed;
	top:1.5rem;
	right:1rem;
}

.topmenu-link{
	width:3rem;
	border:0;
	text-align:center;
	padding:1rem 0;
}
.topmenu-logintext{
	color:#fff;
	font-size:1.2rem;
}

#loginbox::before{
	content: "";
	display: block;
	margin-top: -200px;
	height: 200px;
}

@media screen and (max-width: 800px) {
	.topmenu-login-expanded{
		display:none;
	}
	.topmenu-login{
		color:#fff;
	}
	.content-inner{
		padding:0 0.5rem;
	}
}

p{
	font-size: 1.3rem;
	font-weight:bolder;
	line-height: 2.2rem;
}
@media screen and (min-width: 600px) {
	p{
		font-size: 1.5rem;
		line-height: 2.2rem;
		font-weight:normal;
	}
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------------- topmenu */
.topmenu-link i{font-size:2rem;color:#fff;}
#link-red:hover {border-bottom: 2px solid #a00d0d;}
.topmenu-link#link-blue:hover {border-bottom: 2px solid #1a4a86;}
.topmenu-link#link-yellow:hover {border-bottom: 2px solid #f6c313;}
.topmenu-link#link-green:hover {border-bottom: 2px solid #0e490f;}


.topmenu-login-expanded > div > .topmenu-link{width:3rem;}

.topmenu-link:hover, .topmenu-login-expanded:hover{
	cursor:pointer;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------- form elements */
.formbutton-blue{
	padding: 1rem 2rem;
	border:0;
	border-radius:0.25rem;
	background:rgba(39,171,225,0.6);
	color:#fff;
	margin-top:1.8rem;
}
.formbutton-blue:hover{
	cursor:pointer;
	background:rgba(39,171,225,0.4);
}

.login-input{
	padding:0.5rem 0;
	text-align:center;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------- content links */

a.box-link-blue:link, a.box-link-blue:visited, .box-button-blue, .box-button-blue:visited{
	margin-top:1.6rem;
	padding: 1rem 2rem;
	border:0;
	border-radius:0.25rem;
	background:rgba(26,74,134,0.6);
	color:#fff;
	text-decoration:none;
	font-size:1.3rem;
}
a.box-link-blue:hover, .box-button-blue:hover{
	cursor:pointer;
	background:rgba(26,74,134,0.9);
}

.box-interest, .box-login, .box-method, .box-training, .box-charity{
	overflow:hidden;
	padding:0;
	margin:0;
	min-height:40rem;
	border:1px solid #000;
	transition: all 0.5s ease-in-out;
	border-radius: 1rem 1rem 0 0;
	box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
	background:#D2D2D2;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- content box model */

.box-login-inner{
	background:url("images/box-login.jpg");
	background-position: top center;
	background-repeat:no-repeat;
	background-size:150%;
	/* transition: all 0.5s ease-in-out; */
	transition: all 0.5s ease-in-out;
	padding-top:5rem;
}

.box-interest-inner{
	min-height:30rem;
	background:url("images/box-interest.jpg");
	background-position: top center;
	background-repeat:no-repeat;
	background-size:150%;
	/* transition: all 0.5s ease-in-out; */
	transition: all 0.5s ease-in-out;
	padding-top:5rem;
}

.box-method-inner{
	min-height:30rem;
	background:url("images/box-method.jpg");
	background-position: top center;
	background-repeat:no-repeat;
	background-size:150%;
	/* transition: all 0.5s ease-in-out; */
	transition: all 0.5s ease-in-out;
	padding-top:5rem;
}

.box-training-inner{
	min-height:30rem;
	background:url("images/box-training.jpg");
	background-position: top center;
	background-repeat:no-repeat;
	background-size:150%;
	/* transition: all 0.5s ease-in-out; */
	transition: all 0.5s ease-in-out;
	padding-top:5rem;
}

.box-charity-inner{
	min-height:30rem;
	background:url("images/box-charity.jpg");
	background-position: top center;
	background-repeat:no-repeat;
	background-size:150%;
	/* transition: all 0.5s ease-in-out; */
	transition: all 0.5s ease-in-out;
	padding-top:5rem;
}

.box-interest-inner:hover, .box-login-inner:hover, .box-method-inner:hover, .box-training-inner:hover, .box-charity-inner:hover{
	background-size:155%;
}

.content-grid > div > a{
	text-decoration:none;
	padding-bottom:4rem;
}

.box-inner-transparent{
	display:block;
	height:20rem;
}
.box-inner-grey-head{
	display:block;
/*	background-image: linear-gradient(to bottom, rgba(58,54,54,0), rgba(58,54,54,1)); */
/*	background-image: linear-gradient(to bottom, rgba(98,91,91,0), rgba(98,91,91,1)); */
	background-image: linear-gradient(to bottom, rgba(236,236,236,0), rgba(210,210,210,1.00));
	font-size:1.6rem;
	letter-spacing:0.2rem;
	color: #433E3E;
	padding:10rem 0 2rem 2rem;
}

.box-inner-grey-content{

/*	background: #3a3636; */
/*	background: #625B5B; */
/*	background: #fff; */
	background: rgba(210,210,210,1.00);
	padding:0.5rem 2rem;
}
.box-inner-grey-content-text{
	min-height:5rem;
}

.box-inner-grey-content-text h3{
	font-size:1.6rem;
	color: #433E3E;
	padding:0;
}

.box-inner-grey-content > div > p{
	color:#433E3E;
	font-size:1.6rem;
}
.box-inner-grey-content-button{
	display:block;
	min-height:5rem;
	text-align:right;
}

.box-method, .box-training, .box-charity > a{
	background-image:url("images/more-img.png");
	background-repeat:no-repeat;
	background-position: right bottom;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- menubox index */


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- Header */

fs-header{
  width: 100%;
  height: 8rem;
  background:rgba(0,0,0,0.6);
  padding:0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: fixed;
}

fs-header h1 {
  font-size: 30px;
  text-indent: 40px;
  font-weight: bold;
}

.shrink {
	height:5rem;
}

.shrink h1{
	color:#ff0000;
}

.flexbox#header{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	width:100%;
	position:relative;
	margin:0 0;
}

.flexelement#headerleft{
	order: 1;
	flex-grow: 1;
	flex-shrink: 0;
}

#headerleftlogo{
	padding: 0;
}

.flexelement#headerright{
	order: 2;
	flex-grow: 3;
	flex-shrink: 1;
	flex-basis: 75%;
	position: relative;
	
}
.logolink{
	display:block;
	height:7rem;
	width:25rem;
	text-decoration:none;
	background-image: url("images/fiellascript_logo_single.png");
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
	transition: 0.5s;
	text-align:right;
	margin:0;
	margin-top:0.5rem;
	padding:0;
	padding-top:1rem;
	line-height:1.8rem;
}

.shrink .logolink{
	height:5rem;
	margin:0;
	text-align:left;
	padding:1.5rem 0 0 4rem;
	background-size:4rem;
	transition: 0.5s;
}

#logolink-line1{font-family:Courier New;font-size:1.6rem;color:#fff;letter-spacing:0.1rem;}
#logolink-line2{font-family:Courier New;font-size:1.3rem;color:#fff;}
#logolink-line3{font-family:Courier New;font-size:1.1rem;color:#fff;}

.shrink #logolink-line1{
	font-size:1.8rem;
}
.shrink #logolink-line2, .shrink #logolink-line3{
	display:none;
}

.topmenu-outer{
	display:flex;flex-wrap:no-wrap;column-gap:0.5rem;justify-content:flex-end;
	position:fixed;
	top:1.5rem;
	right:1rem;
	transition: 0.5s;
}

.shrink .topmenu-outer{
	top:0.25rem;
}

.shrink .topmenu-outer i{
	font-size:1.6rem;
	padding-top:0.25rem;
}

.shrink .topmenu-logintext{
	font-size:1rem;
}

.topmenu-link{
	width:3rem;
	border:0;
	text-align:center;
	padding:1rem 0;
}
.topmenu-logintext{
	color:#fff;
	font-size:1.1rem;
	padding:0 1rem;
}

#loginbox::before{
	content: "";
	display: block;
	margin-top: -200px;
	height: 200px;
}

@media screen and (max-width: 800px) {
	.topmenu-login-expanded{
		display:none;
	}
	.topmenu-login{
		color:#fff;
	}
}
@media screen and (min-width: 801px) {
	.topmenu-login{
		display:none;
	}
}

.topmenu-link i{font-size:2rem;color:#fff;}
#link-red:hover {border-bottom: 2px solid #a00d0d;color:#a00d0d;}
.topmenu-link#link-blue:hover {border-bottom: 2px solid #1a4a86;}
.topmenu-link#link-yellow:hover {border-bottom: 2px solid #f6c313;}
.topmenu-link#link-green:hover {border-bottom: 2px solid #0e490f;}

#link-red .topmenu-link i{font-weight:bolder;}

.topmenu-login-expanded > div > .topmenu-link{width:3rem;}

.topmenu-link:hover, .topmenu-login-expanded:hover{
	cursor:pointer;
}

@media screen and (max-width: 800px) {
	.topmenu-login-expanded{
		display:none;
	}
	.topmenu-login{
		color:#fff;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Accordion */

.acc {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.acc li {
  list-style-type: none;
  padding: 0;
}

.acc_ctrl {
 /*  background: transparent; */
  background-image: linear-gradient(#efefef, #fff);
  border: 1px solid #d9d9d9;
  cursor: pointer;
  display: block;
  outline: none;
  padding: 2rem 1rem;
  position: relative;
  text-align: center;
  width: 100%;
  font-size:1.4rem;
}

.acc_ctrl:before {
  background: #A00D0D;
  content: '';
  height: 2px;
  margin-right: 37px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 14px;
}

.acc_ctrl:after {
  background: #A00D0D;
/*  background: #44596B; */
  content: '';
  height: 2px;
  margin-right: 37px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
}

.acc_ctrl.active:before {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.acc_panel {
  background: transparent;
  display: none;
  overflow: hidden;
}