html, body {  
	margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    font-family: Calibri, sans serif, Arial;
    text-align: center;
    display: table;
    table-layout: fixed
}

a:active
{
  text-decoration: none;
  outline: 2px solid red;
}

.language {
	display:inline-block;
	padding-bottom:10px;
}

.flagge {
    width: 30px;
    border: 1px solid #f1f1f1;
}

#container{
	/*margin-left: auto;
    margin-right: auto;
    background-size: 100% auto;*/
    height: 100%;
    display: table-row;
}

#wrapper{
	/*margin-left: auto;
    margin-right: auto;
    height: 100%;
    background-color: #ededed;
    display: table-row;*/
	background: #d10039;
}

#logo-wrapper {
	max-width: 100%;
	background: #e7eaeb;
    background: -moz-linear-gradient(top, #fff 0%, #e7eaeb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #e7eaeb));
    background: -webkit-linear-gradient(top, #fff 0%, #e7eaeb 100%);
    background: -o-linear-gradient(top, #fff 0%, #e7eaeb 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e7eaeb 100%);
	background: linear-gradient(to bottom, #fff 0%, #e7eaeb 100%);
}

#logo {
    /* border-bottom: 1px solid silver; 
	background-color : transparent;*/
	max-width: 1000px;
    margin: auto;
	padding: 10px;
}

#logo img {
    max-width: 100%;
	max-height: 100px;
    padding: 15px 0px;
    /*margin-left: auto;
    margin-right: auto;*/
}

#header-wrapper{
	/* min-height: 100px;*/
}
#header {
	min-height: 50px;
	color: #fff;
	padding: 5px;
	font-size: 2em;
	font-weight: bold;
	margin-top: 10px;
}

#menu-wrapper {
	background:#FFFFFF;
	/*text-align: left;*/
	border-bottom: 1px solid silver;
	width: 100%;
	margin: 0 auto;
}
#submenu-wrapper {
	background:#D0D0D0;
	text-align: left;
	/*max-height: 40px;*/
	
}

#main_menu {
	display:inline-block;
	margin: 5px 0px 0px 0px;
}


.mainmenu, .submenu {
	display: inline-block;
	width: 100px;
	padding: 5px 20px;
	margin: 10px;
	background: #0072bb;
	color: white;
    text-decoration: none;
    border: 2px solid #0072bb;
	border-radius: 4px;
    font-family: Calibri,Arial;
    font-size: 1.1em;
	float:left;
}


.mainmenu a, .submenu a {
	font-family: Calibri,Arial;
    font-size: 1.1em;  
	text-decoration: none;
	color: white;
}

.mainmenu:hover, .submenu:hover, input[type="button"]:hover {
	background:#fff;
	border: 2px solid black;
	color:#0072bb;
}

.mainmenu:hover a, .submenu:hover a {
	color:#0072bb;
}

/*
#mainmenu a {
	text-decoration: none;
	color:#404040;
	font-size:0.9em;
	font-weight:bold;
	border: 1px solid black;
	border-radius:8px;
	padding: 5px 5px;
	background:white;
}
#submenu a{
	text-decoration: none;
	color:#000000;
	font-size:0.9em;
	font-weight:bold;
	border: 1px solid black;
	border-radius:6px;
	padding: 3px 3px;
	background:white;
}
*/

/*
.menue_active {
	color:white !important;
	font-size:0.9em;
	border: 1px solid black;
	border-radius:8px;
	padding: 5px 5px;
	background:#A00000 !important;	
}
.sub_menue_active{
	color:black !important;
	font-size:0.9em;
	border: 1px solid black;
	border-radius:6px;
	padding: 3px 3px;
	background:#A0A0A0 !important;	
}
*/

#content-wrapper {
	margin-top: 0px;
    margin-bottom: 0px;
    background-color: #fff;
    height: 100%;
}

.pw-img {
    height: 20px;
    vertical-align: middle;
    margin-left: 5px;
}

#kurzer_inhalt {
	margin-left: auto; 
	margin-right: auto; 
	text-align: left; 
	background:#FFFFFF;
	max-width:1000px;
	height: 100%;
	font-size:1em;
	padding-top:5px;
	padding-bottom:15px;
	padding-left:10px;
	padding-right:10px;
	/*overflow: scroll;*/
}

#inhalt {
	margin-left: auto; 
	margin-right: auto; 
	text-align: left; 
	background:#FFFFFF;
	max-width:1000px;
	height: auto;
	font-size:1em;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:15px;
	padding-right:15px;
	/*overflow: scroll;*/
}
/*
#inhalt p {
	padding-left:15px;
}
*/

/*
#inhalt a {
    display: list-item;
    list-style-type: disclosure-closed;
    list-style-position: inside;
}
*/

.table_info {
    border: none !important;
}

.table_info tr {
    border: none;
}

.info_td {
    border: none;
}

.table_info p {
    margin: 5px 40px 5px 0px;
    padding: 5px 10px 5px 0px;
    font-size: 18px;
	text-align:center;
}

.info_zahl {
    font-size: 48px;
    font-weight: bold;
	color:#0072bb;
}

.abfrage_einheiten {
    min-width: 200px;
}

.img_download{
	width: 30px;
	float: left;
	padding: 0px 5px 0px 0px;
	margin-top: -3px;
	display: block;
}

#menu{
	max-width:100%;
	margin-left: auto;
    margin-right: auto;
	padding-top: 4px;
	padding-bottom:4px;
	padding-left:10px;
	padding-right:10px;
}


#mainmenu a:hover, #submenu a:hover{
	background: #D0D0D0;
}

#mainmenu a:focus, #mainmenu a:focus::after, #mainmenu a:active, #submenu a:focus, #submenu a:focus::after, #submenu a:active{
	background: #CBCED0;
}

#sticky-top{
	width:1000px;
	margin-left: auto; 
	margin-right: auto;
}

.sticky {
    position: fixed;
    max-width: 100%;
	margin-left:auto;
	margin-right:auto;
    top: 0;
    z-index: 100;
    border-top: 0;
}
	
#footer-wrapper {
	margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    display: table-row;
}

#footer {
	background: #484848;
    font-size: 0.8em;
    color: #F0F0F0;
    padding: 10px;
}

#ergebnisse_gruppenauswahl {
    float: left;
    margin: 15px 15px;
}

#ergebnisse_einheitenauswahl {
    float: left;
    margin: 15px 15px;
}

#ergebnisse_fragenauswahl {
    margin: 15px 15px;
}

#erg p {
    float: right;
}

#kontakt_1  {
	float: left;
	margin-left: auto; 
	margin-right: auto; 
	margin-top:10px;
	text-align: left; 
	background:#FFFFFF;
	max-width:500px;
	min-height:500px;
	font-size:100%;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:10px;
	padding-right:10px;
}
#kontakt_2 {
	float:left;
	margin-left: auto; 
	margin-right: auto; 
	margin-top:10px;
	text-align: left; 
	background:#FFFFFF;
	max-width:500px;
	min-height:500px;
	font-size:100%;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:10px;
	padding-right:10px;
}


#seitenzahl {
	text-align:center;
	color:#000000;
	padding-left:0px;
	margin-top:-33px;
	padding-right:10px;
	float:right;
}

@media (min-width: 480px) and (max-width: 600px) {
  #seitenzahl {
	text-align:center;
	color:#000000;
	padding-left:0px;
	margin-top:-18px;
	padding-right:10px;
	float:right;
	}
}

@media (max-width: 480px) {
  #seitenzahl {
	text-align:center;
	color:#000000;
	padding: 5px 10px 4px 0px;
	margin-top:-24px;
	float:right;
	}
}


h1{
	font-size: 1.8em;
	color:#404040;
	margin-bottom: 5px;
	/*padding: 4px 4px 0 4px;*/
	/*padding-left: 15px;*/
}

h2{
    margin-top: 10px;
    font-size: 1.6em;
    color: #306060;
    padding: 10px 0px 0px 0px;
}

input[type=radio]:focus,
input[type=textarea]:focus
{
  outline: 1px solid red;
}

input[name="name"], #pwd_run {
    height: 1.5em;
    border-radius: 4px;
    padding: 6px;
    border: 2px solid #23344394;
	width: 85%;
}

input[type="email"], input[name="email"], input[name="bezeichnung"], input[name="projekt"], .input_neue_orgeinheit, #verantwortlich {
	height: 1.5em;
    border-radius: 4px;
    padding: 6px;
    border: 2px solid #23344394;
}

/* Login-Seite */
input[name="kurzname"], input[type="password"] {
	height: 1.5em;
    border-radius: 4px;
    padding: 6px;
    border: 2px solid #23344394;
	width: 15%;
}

@media (max-width: 800px) {
	input[name="kurzname"], input[type="password"] {
		height: 1.5em;
		border-radius: 4px;
		padding: 6px;
		border: 2px solid #23344394;
		width: 20%;
	}
}
/* Login-Seite Ende */

input[type="submit"] {
    background: #0072bb;
    padding: 5px 20px;
    margin: 4px 0px 4px 0px;
    color: white;
    text-decoration: none;
    border: 2px solid #0072bb;
    font-family: Calibri,Arial;
    font-size: 1.1em;
    border-radius: 4px;
}

input[type="submit"]:hover {
	background:#fff;
	border: 2px solid black;
	color:#0072bb;
}

input[type="button"] {
	background: #0072bb;
    padding: 5px 20px;
    margin: 4px 0px 4px 0px;
    color: white;
    text-decoration: none;
    border: 2px solid #0072bb;
    font-family: Calibri,Arial;
    font-size: 1.1em;
    border-radius: 4px;
}


.bild_haken_gruen{
	display:none;
}

.button_anfang, .button_abbruch, .button_ende {
	margin: 4px 4px;
	padding: 2px 2px;	
}

.button_weiter, .button_zurueck {
    border: 1px solid #000000;
    background: #E8E8E8;
    padding: 2px 6px;
	margin: 4px 4px;
	border-radius:2px;
    color: #000000;
    text-decoration: none;
}

.button_weiter:hover, .button_zurueck:hover{
    border-top-color: #D0D0D0;
    background: #D0D0D0;
    color: #000000;
    border: 1px solid black;
}

.button_weiter:focus, .button_zurueck:focus{
    background: highgrey;
    color: #000000;
    border: 1px solid black;
}

/*
.button_weiter:active, .button_zurueck:active {
   border-top-color: #d1d1d1;
   background: #d1d1d1;
   } 
*/


.plan_spfeil, .plan_spitze, .plan_heute, .plan_pfeil_vorbei, .plan_ende {
	width:27px;
	height:27px;
	padding: 3px 3px;
}

#doc_a img, #doc_b img, #doc_c img, #doc_x img{
	width:35px;
	height:35px;
	padding: 3px 3px;
}

#doc_a a, #doc_b a, #doc_c a, #doc_x a{
	display:table-cell;
}

/* DASHBOARD */

/* Navigation */

.user_menu {
  display: table-row;
  padding: 10px 10px;
  width: 100%;
  float: left;
  margin: 0 auto;
  text-align: center;
}

.user_menu_auswahl:hover img {
    background: #f0f0f0;
}

.user_menu_auswahl img:hover {
    background: #f0f0f0;
	color: #0072bb;
	/*outline: 1px solid black;*/
}

.user_menu_auswahl:hover, span:hover {
	color: #0072bb !important;
	font-weight:bold;
}


.user_menu_auswahl {
  display: inline-grid;
  font-size: 1em;
  /*border: 3px solid black;*/
  padding: 0px 15px;
  margin: 2px 20px;
  vertical-align: middle;
  float: left;
  text-align: center;
  /*grid-template-rows: 20% 20% 20% 20% 20%;*/
  /*background: aqua;*/
  border-radius: 4px;
}

@media (max-width: 800px) {
	.user_menu_auswahl {
		padding:5px 0;
	}
}

.menu_icon {
	width: 60px;
	float: left;
	margin: 2px 12px;
	border: 3px solid black;
	border-radius: 5px;
	image-rendering: auto;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	/* Safari - deprecated */
	image-rendering: -webkit-optimize-contrast;
}

/* Beteiligung und Top/Low */

.Willkommen_Text {
	/*padding-left:15px;*/
}

#dashboard_beteiligung_chart {
	/*width: 240px;*/
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

#dashboard_beteiligung {
  display: table-footer-group;
}

#dashboard_beteiligung p {
	font-weight:normal;
}

#dashboard_beteiligung_chart text[text-anchor~="middle"]:nth-child(1) {
  font-size: 20px;
}

#dashboard_gesamtzufriedenheit text[text-anchor~="middle"]:nth-child(1) {
  font-size: 20px;
}

.td_beteiligung text[text-anchor~="middle"]:nth-child(1) {
  font-size: 10px;
  font-weight:bold;
}

/* Horizontale Zentrierung der Zelle */
/*
div[id*="benchmark_quote_"] {
	text-align:center;
}
*/

.td_beteiligung table {
	display: table-cell;
}

#dashboard_gesamtzufriedenheit {
  padding: 0px 0px 60px 0px;
  /*width: 260px;*/
}

#dashboard_gesamtzufriedenheit svg {
  margin: 5px 10px;
}

.table_dashboard_inhalt {
	width: 100%;
}

.table_dashboard_inhalt th {
	text-align: center;
	font-size:1.2em;
	border:none;
	font-weight: normal;
	width: 33%;
}

.table_dashboard_inhalt td {
	font-weight: bold;
	text-align: center;
	/*background: #bbb;*/
	border:none !important;
}

.table_dashboard_inhalt tr {
	border: none !important;
}
/*
.table_dashboard_inhalt th:nth-child(1) {
	border: none !important;
}
*/

#dashboard_top_low {
	text-align: center;
	display:grid;
}

.top-low {
	margin: 1px 2px;
	padding: 1px 2px 1px 15px;
}

.dashboard_top_low_bezeichnung {
  display: block;
  text-align: left;
  padding: 4px 2px 0px 5px;
}

.dashboard_top_low_grün {
	border: 2px solid green;
	border-radius: 20px;
	vertical-align: middle;
	display: inline-block;
	padding: 3px;
	margin: 0px 10px 0 0;
	background: green;
	color: white;
	float:left;
}

.dashboard_top_low_gelb {
	border: 2px solid #ecc700;
	border-radius: 20px;
	vertical-align: middle;
	display: inline-block;
	padding: 3px;
	margin: 0px 10px 0 0;
	background: #ecc700;
	color: white;
	float:left;
}

.dashboard_top_low_rot {
	border: 2px solid red;
	border-radius: 20px;
	vertical-align: middle;
	display: inline-block;
	padding: 3px;
	margin: 0px 10px 0 0;
	background: red;
	color: white;
	float:left;
}

.pfeil_top_low {
	height: 40px;
}


/* Mittelwerte */

/*
#dashboard_trennzeile {
  padding: 1px 0px;
  margin: 12px 0px;
  font-size: 1.4em;
  font-weight: bold;
  text-align: left;
}
*/

#dashboard_trennzeile {
  padding: 0px 0px;
  margin: 12px 0px;
  font-size: 1.4em;
  font-weight: bold;
  text-align: left;
  background: #d0d0d0;
  color: black;
  box-shadow: -5px 0px 0px 0px #d0d0d0, 5px 0px 0px 0px #d0d0d0;
}

.trennzeile_text {
  padding: 5px 15px;
}

#dashboard_trennzeile h3 {
  /*padding-left: 15px;*/
}

.berichte {
	/*padding-left: 15px;*/
}

.berichte p {
	padding-left: 1px;
}

.berichte a {
	/*
	vertical-align: middle;
	padding: 7px 1px 0px 7px;
	*/
	display: block;
	font-size: 18px;
}

.td_inhalt {
  /*background: black;*/
  padding:0
}

.wert_grün {
	text-align: center;
	font-weight:bold;
	color:#0b0;
	font-size: 1.6em;
}

.wert_gelb {
	text-align: center;
	font-weight:bold;
	color:#ecc700;
	font-size: 1.6em;
}

.wert_rot {
	text-align: center;
	font-weight:bold;
	color:red;
	font-size: 1.6em;
}


.td_beteiligung {
  padding: 5px 5px 5px 5px;
  vertical-align: middle;
  text-align:center;
}

/* Gauge / Tacho settings */
.td_inhalt div {
  max-height: 80px !important;
  padding: 0px 5px 0px 20px;
}


text {
  font-size: 12px;
  /*font-weight: bold;*/
}


/* Gauge / Tacho settings end */


/*  Dashboard-CPF Maßnahmen */


#workshop input {
	/*margin-left: 15px;*/
}



/* Dashboard Ende */


/* CPF */

.table_einheit_bearbeiten {
  width: 100%;
}

.table_einheit_bearbeiten th {
	background: #bbb;
}

/* CPF Ende */

/* TRESOR */
.table_tresor {
	border-width: 1px;
	max-width:100%;
	border: 1px solid grey;
	margin-bottom:10px;
}
.tresor_download_ja {
	color: #A00000;
}

#tresor img{
	width:30px;
	height:30px;
}


table {
	background:white;
	border-collapse:collapse;
	/*margin-left:15px;*/
	width:100%;
}

tr {
    border: 1px solid grey;
    background: white;
}

th {
    /*background-color: #E0E0E0; */
    border: 1px solid grey;
	padding: 5px 5px;
	text-align:left;
}

td {
	background-color: #FFFFFF;
	padding: 3px 5px;
	border:1px solid darkgrey;
   /* white-space: pre-wrap;*/
	overflow-wrap: break-word;
	text-align:left;
	/*font-weight:bold;*/
}

td input {
    margin: 10px 2px;
	vertical-align: middle;
	padding: 2px 5px;
}

td select {
    margin: 5px 2px;
	max-width: 90%;
}

textarea {
    margin: 5px 2px;
	padding: 2px 5px;
	font-family: Calibri, sans serif, Arial;
}


/* Dashboard Tacho Table CSS */
/*
* {
	box-sizing:border-box;
}

table {
	width:100%;
}

table, td, tr, th {
	border:2px solid black;
	border-collapse: collapse;
	text-align: left;
}

td, tr, th {
	padding:1em;
}


th {
	background:#eee;
	font-weight: bold;
}
*/

@media screen and (max-width:700px) {
	
	table, tr, td {
		padding:0;
		border:1px solid black;
	}

	table {
		border:none;
	}

	thead {
		display:none;
	}

	tr {
		float: left;
		width: 100%;
		margin-bottom: 2em;
	}

	td {
		float: left;
		width: 100%;
		padding:1em;
	}

	td::before {
		content:attr(data-label);
		word-wrap: break-word;
		/*background: #eee;*/
		/*border-right:2px solid black;*/
		/*width: 20%;*/
		float:left;
		padding:1em;
		font-weight: bold;
		margin:-1em 1em -1em -1em;
	}
}


/* Dashboard Tacho Table CSS Ende */


.neue_massnahme select {
    width: 700px;
}

#error-msg {
    padding-top: 8px;
	color:red;
	font-weight:bold;
}

#error-msg span {
	font-weight:bold;
	color:red;
}

#datum_beginn, #datum_ende {
    min-height: 16px;
	font-family: inherit;
}

.textarea_disabled {
	background: #C0C0C0; !important;
}

input:required {
    border: 2px solid red;
}

input:required:valid {
    border-color: #7a7a7a;
}

.table_benutzer_bearbeiten {
    border-collapse: collapse;
}

.table_benutzer_bearbeiten td {
    border: none;
}

.table_benutzer_bearbeiten textarea {
    margin: 10px 2px 2px 5px;
    padding: 7px 5px;
	background: #ececec;
}

.table_benutzer_bearbeiten input[name="email"] {
  width: 85%;
}

/* Org-Strukturen */
.tree_main {
	font-size: 1.0em;
	color:#404040;
	font-weight:bold;
}

#invalid_projekt{
	background:white;
}

.img_historie{
	float:left;
}
/* Benutzerliste */

.table_benutzerliste td{
	width:100%
}

.table_benutzerliste td:nth-child(1) {
  width: 10% !important;
}

.table_benutzerliste td:nth-child(6), .table_benutzerliste td:nth-child(7) {
	text-align:center !important;
}
/*
.table_benutzer_bearbeiten tr,td {
    text-align: left !important;
}
*/
.table_benutzer_bearbeiten input {
    margin-bottom: 12px;
	margin-left:5px;
}

.table_benutzer_bearbeiten  select {
    margin-bottom: 12px;
	margin-left:5px;
}

/* Neue Maßnahme */
.neue_massnahme {
	width:100%;
}

/* Supervisor */
.table_supervisor {
	width: 100%;
}

.table_supervisor th:nth-child(4), .table_supervisor td:nth-child(4), .table_supervisor td:nth-child(5) {
	text-align:center !important;
}

/*Statistik*/
.statistik {
  width: 100%;
}

.statistik td:nth-child(2), .statistik td:nth-child(3) {
	text-align:center !important;
}

.td_zwischenzeile{
	background-color:#D0D0D0;
	font-weight: bold;
}

/* CPF Select Liste */
select {
  min-width: 200px;
  width: 100%;
  -moz-padding-start: calc(10px - 3px);
  background: #f0f0f0;
  color: black;
  font-family: calibri, Arial;
  font-size: 1em;
  border: 2px solid gray;
  border-radius: 4px;
  padding: 7px;
}

option.auswahl_zwischenzeile {
    background-color: #d0d0d0;
    color: #5d5d5d;
}

.progress {
	width: 100%;
}

#td_sonstiges_ziel, #td_sonstiges_massnahme {
    display: none;
}

/* Maßnahmen anzeigen */

.table_massnahme_anzeigen {
	width:100%;
}

@media (max-width: 800px) {
	.table_massnahme_anzeigen td:nth-child(1) {
		font-weight: bold;
		width:25%;
	}
}

.table_massnahme_anzeigen td:nth-child(1) {
	font-weight: bold;
	width:20%;
}


/* Abschnitt Seitenanimation bei langen Ladezeiten */

#preload-wrapper {
  width: 100%;
  height: 100vh;
  background: whitesmoke;
  opacity: 0.8;
  position: absolute;
  visibility:hidden;
}

#preload-wrapper.loaded {
	visibility: hidden;
}

/* book animation start */
.book {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: relative;
  margin: 0 auto;
  border: 5px solid #ecf0f1;
  width: 100px;
  height: 60px;
}

.book__page {
  position: absolute;
  left: 50%;
  top: -5px;
  margin: 0 auto;
  border-top: 5px solid #ecf0f1;
  border-bottom: 5px solid #ecf0f1;
  border-right: 5px solid #ecf0f1;
  background: #3498db;
  width: 50px;
  height: 60px;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-animation: flip 1.2s infinite linear;
          animation: flip 1.2s infinite linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.book__page:nth-child(1) {
  z-index: -1;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.book__page:nth-child(2) {
  z-index: -2;
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.book__page:nth-child(3) {
  z-index: -3;
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(600px) rotateY(0deg);
            transform: perspective(600px) rotateY(0deg);
  }
  20% {
    background: #217dbb;
  }
  29.9% {
    background: #217dbb;
  }
  30% {
    -webkit-transform: perspective(200px) rotateY(-90deg);
            transform: perspective(200px) rotateY(-90deg);
    background: #3498db;
  }
  54.999% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  60% {
    -webkit-transform: perspective(200px) rotateY(-180deg);
            transform: perspective(200px) rotateY(-180deg);
    background: #3498db;
  }
  100% {
    -webkit-transform: perspective(200px) rotateY(-180deg);
            transform: perspective(200px) rotateY(-180deg);
    background: #3498db;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(600px) rotateY(0deg);
            transform: perspective(600px) rotateY(0deg);
  }
  20% {
    background: #217dbb;
  }
  29.9% {
    background: #217dbb;
  }
  30% {
    -webkit-transform: perspective(200px) rotateY(-90deg);
            transform: perspective(200px) rotateY(-90deg);
    background: #3498db;
  }
  54.999% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  60% {
    -webkit-transform: perspective(200px) rotateY(-180deg);
            transform: perspective(200px) rotateY(-180deg);
    background: #3498db;
  }
  100% {
    -webkit-transform: perspective(200px) rotateY(-180deg);
            transform: perspective(200px) rotateY(-180deg);
    background: #3498db;
  }
}

/* book animation end */

/* lds-spinner animation start */

.lds-spinner {
  color: #cb1b18;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-top:280px;
}

.lds-spinner p {
    position: absolute;
    margin-top: 90px;
    margin-left: 10px;
    text-align: center;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #3498db;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* lds-spinner animation end */