/*@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300*/');

html, body {
	margin: 0;
	padding: 0;
}
html {
	
}
nav {
	text-align: center;
}
h1,h2,h3,h4 {
	font-weight: normal;
	
}
h3 {
	font-size: 1.5em;
	margin: 0;
}
h4 {
	text-align: right;
	margin: 0;
	font-size: 1.5em;
	font-weight: 400;
}
body {
	font-family: 'Indie Flower', cursive;
	background-image: url("../img/bg.jpg");
	background-size: auto;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-origin: bottom;
	width: 100vw;
	max-height: 100vh;
	overflow: hidden;
	min-width: 960px;
}
/* Preloader
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body.preloader-site {
    overflow: hidden;
}

#splash_screen {
    height: 100%;
    width: 100%;
    background: #FFF;
    position: fixed;
    /*text-align: center;*/
    top: 0;
    left: 0;
    z-index: 9999999;
    -webkit-transition: all 950ms ease-out;
       -moz-transition: all 950ms ease-out;
         -o-transition: all 950ms ease-out;
            transition: all 950ms ease-out;
}

#splash_screen .preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    /*left: calc(50vw - 32px);*/
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Audio player
______________________________________________________*/

#audio_player button {
	border-radius: 20%;
}


/*// Thunder*/
#thunder {
	top: 0;
	position: absolute;
	height: 100vh;
	width: 100vw;
	background-image: url("../img/thunder.png");
}

/* Intro / Splash screen
______________________________________________________*/
#splash_screen {

}
#welcome {
	display: none;
	height: 100%;
    width: 100%;
	background-image: url("../img/bg-intro2.jpg")!important;
	background-size: cover;
	text-align: center;
	font-size: 3em;
	
}
.display-flex {
	display: flex!important;
	align-items: center;
	justify-content: center;
	
	/*transition: opacity 0.3s linear 2s;*/
}
.intro {
}
#s01 {
	font-size: 1.5rem;
	text-align: left;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow:  -20px 20px 60px #8baeae, 20px -20px 60px #bdecec;
	padding:  2em;
}
main {
}

section {
	padding-left: 1.5em;
	padding-right: 1.5em;
	font-size: 1.4em;
	letter-spacing: 2px;
}

#audio_player {
	position: absolute;
	top: 0;
	right: 0;
}

#container {
	margin-top: 25vh;
	/*height: 75vh;*/
	/*overflow: auto;*/
	
}
#cards {
	position: absolute;
	height: 75vh;
	top: 100vh;
	min-width: 500px;
	padding-top: 2vh;


}
.card {
	padding-top: 1em;
/*	padding-left: 1em;
	padding-right: 1em;*/

}
#front, #back {
	background-color: rgba(255,255,255,0.94);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 2px solid rgba(121,121,121,0.5);
	box-shadow: rgba(0, 0, 0, 0.22) 1px 1px 8px;
	position: fixed;
	height: 100%;
	width: 100%;
	padding-bottom: 200px;
}
#panel {
/*	position: absolute;
	height: 75vh;
	top: 150vh;
	
	overflow-y: scroll;

	margin-left: 10%;*/
	
}

#panel p {
	margin: 0.5em;
}


/*
	Intro carte id
*/

#carte-id {
	/*box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);*/
	margin-top: 1em;
	margin-bottom: 1.5em;
	border-radius: 8px;
	/*border: 1px solid blue;*/
	/*width: 70%; 
	margin-left: 15%; */
	text-align:  left; 
	border-bottom: 1px double rgba(0, 0, 0, 0.4); 
	background-image: url('../img/aurel.png'); 
	background-size: contain; 
	background-repeat: no-repeat; 
	min-height: 250px;
	padding: 1em;
	-webkit-transition: all 300ms ease-out;
       -moz-transition: all 300ms ease-out;
         -o-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
}
#carte-id:hover {
	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
	transform: perspective(800px) /*rotateY(5deg)*/ scale(1.01); 
	background-image: url('../img/aurel2.png'); 
		-webkit-transition: all 300ms ease-out;
       -moz-transition: all 300ms ease-out;
         -o-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
	/*margin-bottom: 2.5em;*/

}
#carte-id table {
	width: 70%;
    margin-left: 40%;
    line-height: 2em;
}
#carte-id table tr>td:first-child{
	font-size: 0.8rem;
	color: rgba(0,0,0,0.6);
	letter-spacing: 4px;
	text-align: right;
}
/*#carte-id:before {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}*/

/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {
	#container {
		
	}
	#cards {
		width: 90%;
		margin-left: 5%;
	}
}

/* Larger than phablet */
@media (min-width: 550px) {
	#container {
		
	}
}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {
	#container {
		
	}
	#menu {

	}
	#menu, #cards {
		width: 50%;
		margin-left: 25%;
	}
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
}

/*	Other
_________________________________________*/

.component{
  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
  width: 750px;
  margin:0 auto;
  padding: 3rem;
}

.component blockquote.quote {
    position: relative; 
    text-align: center;
    padding: 1rem 1.2rem;
    width: 80%;  /* create space for the quotes */
    color: #484748;
    margin: 1rem auto 2rem;
}
.component blockquote.EN {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0 100%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to top, #039be5 4px, transparent 4px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.component blockquote.DE {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 100%,
    linear-gradient(to top, #039be5 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}
    

/* -- create the quotation marks -- */
.component blockquote.quote:before,
.component blockquote.quote:after{
    font-family: FontAwesome;
    position: absolute;
    color: #039be5;
    font-size: 34px;
}

.component blockquote.EN:before{
    content: "\f10d";
    top: -12px;
    margin-right: -20px;
    right: 100%;
}
.component blockquote.EN:after{
    content: "\f10e";
    margin-left: -20px;
    left: 100%;  
    top: auto;
    bottom: -20px;
}
.component blockquote.DE:before{
    content: "\f10e";
    margin-right: -20px;
    bottom: -20px;
    right: 100%;
}
.component blockquote.DE:after{
    content: "\f10d";
    margin-left: -20px;
    left: 100%;  
    top: -20px;
    bottom: auto;
}

.zitat1 {
  position: relative;
  /*font-family: 'Verdana', serif;*/
  font-size: 1em;
  line-height: 1.5em;
  color: #424242;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 5px 8px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.5);
}
.zitat1 cite {
  /*font-family: 'Verdana', sans-serif;*/
  font-size: 0.6em;
  font-weight: 700;
  float: right;
  color: #f7931e;
}
.zitat1 cite:before {
  content: '\2015'' ';
}
.zitat1:after {
	content: '\201d';
	position: absolute;
	top: 0.28em;
	right: -20px;
	font-size: 6em;
	font-style: italic;
	z-index: -1;
	color:  #b5d0dc;
	text-shadow: 1px 3px 0 #969696, 1px 7px 2px #aba8a8;
	opacity: 0.5;

}
.sidekick {
  position: relative;
  padding-left: 1em;
  border-left: 0.2em solid #039be5;
  font-family: 'Roboto', serif;
  font-size: 2.4em;
  line-height: 1.5em;
  font-weight: 100;
}
.sidekick:before, .sidekick:after {
  font-family: Calibri;
    color: #039be5;
    font-size: 34px;
}
.sidekick:before {content: '\201e'}
.sidekick:after {content: '\201c';}
.sidekick cite {font-size: 50%; text-align:center; top:50%}
.sidekick cite:before {content: ' \2015 '}


/* Introduction page
______________________________*/
.right {
	text-align: right;
}
.left {
	text-align: left;
}

figure.intro_left {
	margin: 0;
	margin-right: 1em;
	padding-top: 1.1em;
	max-width: 45%;
	float: left;
	margin-bottom: 0em;
}
.intro_left figcaption {
	text-align: center;
	font-size: 1em;
	
	margin: 0;
}
.intro_left img {
	max-width: 100%;
/*	border:  1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}
figure.intro_center {
	margin: 0;
    margin-right: 1em;
	margin-left: 1em;
	padding-top: 1.1em;
	max-width: 93%;
	margin-bottom: 2em;
}
.intro_center figcaption {
	text-align: center;
	font-size: 1em;
	
}
.intro_center img {
	max-width: 100%;
	border:  1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
/*.intro_center {
	max-width: 90%;
	border:  1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}*/


.demo {
	width: auto;
}
.demo>div{
	width: 100%;
}
figure.intro_center_small {
	max-width: 60%;
	margin-left: 20%;
}
.intro_center_small figcaption {
	text-align: center;
	font-size: 1em;
}
.intro_center_small>img {
	max-width: 100%;
	border:  1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
/*
	Intro carte id
*/

#carte-id td, #carte-id tr {
	background-color: unset!important;
	border: none!important;
}
#carte-id {
	margin-top: 1em;
	margin-bottom: 1.5em;
	border-radius: 8px;
	text-align:  left; 
	border-bottom: 1px double rgba(0, 0, 0, 0.4); 
	/*background-image: url('../../img/aurel2.png'); */
	background-size: contain; 
	background-repeat: no-repeat; 
	min-height: 250px;
	padding: 1em;
	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
	transform: perspective(800px) scale(1.01); 
	-webkit-transition: all 300ms ease-out;
       -moz-transition: all 300ms ease-out;
         -o-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
}
#carte-id:hover {
	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
	transform: perspective(800px) scale(1.01); 
	/*background-image: url('../../img/aurel2.png'); */

}
#carte-id table {
	width: 70%;
    margin-left: 30%;
    line-height: 2em;
}
#carte-id table tr>td:first-child{
	font-size: 0.8rem;
	color: rgba(0,0,0,0.6);
	letter-spacing: 4px;
	text-align: right;
}

/*	Other
_________________________________________*/

.component{
  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
  width: 750px;
  margin:0 auto;
  padding: 3rem;
}

.component blockquote.quote {
    position: relative; 
    text-align: center;
    padding: 1rem 1.2rem;
    width: 80%;  /* create space for the quotes */
    color: #484748;
    margin: 1rem auto 2rem;
}
.component blockquote.EN {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0 100%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to top, #039be5 4px, transparent 4px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.component blockquote.DE {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 100%,
    linear-gradient(to top, #039be5 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}
    

/* -- create the quotation marks -- */
.component blockquote.quote:before,
.component blockquote.quote:after{
    font-family: FontAwesome;
    position: absolute;
    color: #039be5;
    font-size: 34px;
}

.component blockquote.EN:before{
    content: "\f10d";
    top: -12px;
    margin-right: -20px;
    right: 100%;
}
.component blockquote.EN:after{
    content: "\f10e";
    margin-left: -20px;
    left: 100%;  
    top: auto;
    bottom: -20px;
}
.component blockquote.DE:before{
    content: "\f10e";
    margin-right: -20px;
    bottom: -20px;
    right: 100%;
}
.component blockquote.DE:after{
    content: "\f10d";
    margin-left: -20px;
    left: 100%;  
    top: -20px;
    bottom: auto;
}

.citation {
  position: relative;
  /*font-family: 'Verdana', serif;*/
  font-size: 1em;
  line-height: 1.5em;
  color: #424242;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 5px 8px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.5);
  background-image: url("../../img/quote3.svg");
  background-repeat: no-repeat;
  background-position: left;
  border: none;
}
.citation cite {
  /*font-family: 'Verdana', sans-serif;*/
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.2em;
  float: right;
  color: #f7931e;
}
.citation cite:before {
  content: '\2015'' ';
}
.citation:after {
	content: '\201d';
	position: absolute;
	top: 0.28em;
	right: -20px;
	font-size: 6em;
	font-style: italic;
	z-index: -1;
	color:  #b5d0dc;
	text-shadow: 1px 3px 0 #969696, 1px 7px 2px #aba8a8;
	opacity: 0.5;

}
/*.citation {
  position: relative;
  font-size: 1em;
  line-height: 1.5em;
  color: #424242;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 5px 8px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,.5);
  background-image: url("../../img/quote3.svg");
  background-repeat: no-repeat;
  background-position: left;
  border: none;
}
.citation cite {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.2em;
  float: right;
  color: #f7931e;
}
.citation cite:before {
  content: '\2015'' ';
}
.citation:after {
	content: '\201d';
	position: absolute;
	top: 0.28em;
	right: -20px;
	font-size: 6em;
	font-style: italic;
	z-index: -1;
	color:  #b5d0dc;
	text-shadow: 1px 3px 0 #969696, 1px 7px 2px #aba8a8;
	opacity: 0.5;
}*/


.sidekick {
  position: relative;
  padding-left: 1em;
  border-left: 0.2em solid #039be5;
  font-family: 'Roboto', serif;
  font-size: 2.4em;
  line-height: 1.5em;
  font-weight: 100;
}
.sidekick:before, .sidekick:after {
  font-family: Calibri;
    color: #039be5;
    font-size: 34px;
}
.sidekick:before {content: '\201e'}
.sidekick:after {content: '\201c';}
.sidekick cite {font-size: 50%; text-align:center; top:50%}
.sidekick cite:before {content: ' \2015 '}


.pink {
	color: #895d8b;
}
figure figcaption {
	/*color:  #f0f;*/
	color: #ba22c1;
	text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
}

figure.intro_left {
	margin: 0;
	margin-right: 1em;
	margin-top: -2em;
	padding-top: 0.5em;
	max-width: 40%;
	float: left;
	margin-bottom: 0em;
}
.intro_left figcaption {
	text-align: center;
	font-size: 1em;
	margin: 0;
}
.intro_left img {
	max-width: 100%;
	/*border:  1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}
figure.intro_center {
	margin: 0;
    margin-right: 1em;
	margin-left: 1em;
	padding-top: 1.1em;
	max-width: 93%;
	margin-bottom: 2em;
}
.intro_center figcaption {
	text-align: center;
	font-size: 1em;
}
.intro_center img {
	max-width: 100%;
	border:  1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

/*figure.intro_center_small {
	margin: 0;
  margin-right: 1em;
	margin-left: 1em;
	padding-top: 1.1em;
	margin-left: 20%;
	max-width: 60%;
	margin-bottom: 2em;
}
.intro_center_small figcaption {
	text-align: center;
	font-size: 1em;
}
.intro_center_small>img {
	max-width: 100%;
	border:  1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.vignette {
	border: 1px solid black;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}*/


/*
	Contact form
*/


#footer {
	background-color: initial!important;
}


.smallinput {
	max-width: 100%;
	height: 100%;
	border: none;
	background-color: rgba(121, 121, 121, 0);
}
.smallbtn {
	font-size: 1em; 
	font-weight: bold;
	padding-left: 0.3em;
	padding-right: 0.3em;
	background-color: rgba(0, 0, 0, 0);

/*	height: 2em!important;
	line-height: initial!important;
	padding: 0 0.5em!important;
	color: red;
	margin-left: 1em!important;*/
}

hr {
	border: none;
	min-height: 60px;
	background-image: url("../img/line4.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
}


#contact {
	text-align: center;
}

#contact form {
	text-align: right;
}
#sending {
	display: none;
}
.padded {
	padding-left: 4em;
	padding-right: 4em;
	margin-bottom: 200px;
	min-height: 125vh;
}

#subb {
	width: 80%;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	background-color: #5a5a5a;
	border-radius: 4px;
	border: 0;
	color: #ffffff !important;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	height: 2.85em;
	line-height: 2.95em;
	padding: 0 1.5em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

#error {
	padding: 0!important;
}
#error li {
	text-align: left;
	list-style: none;
}