@import url('http://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700');
@import url('../js/google-code-prettify/prettify.css');
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

a:hover, a:focus {
    color: #FF6801 !important;
    text-decoration: underline;
}

/****************************************************************************
Header
******************************************************************************/
h2.header-titel {}
.header-titel span {display:none;} /*color:#FF6801;*/
@media (max-width: 767px) {.header-titel span {display:inline-block;}}


.affix {top: 0;width: 100%;}
.affix + .top-50 {padding-top: 50px;}

.top-10 {padding-top:10px;}
/*.top-50 {padding-top: 25px;}*/ /*breadcrumb*/

.top-25 {padding-top: 25px;}
.top-80 {padding-top: 80px;}

.t-50 {margin-top: 50px;}
.section-success {background-color: #DFF0D8 !important;color: #555;}
.section-info{background-color: #D9EDF7 !important;color: #555 !important;}
a.btn-success {background-color:#6FBF91;/*color:#000;*/}

    .section-warning {
    background-color: #E4E599 !important;
    
    color: #5d5d5d !important;

}


/***************************************************************************************
Menu in Grün
***************************************************************************************/

#custom-bootstrap-menu.navbar-default .navbar-brand {color: rgba(51, 51, 51, 1);}
#custom-bootstrap-menu.navbar-default {font-size: 16px;background-color: #F8F8F8;border-width: 1px;border-radius: 4px;z-index: 1000;}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {color: rgba(51, 51, 51, 1);background-color: rgba(248, 248, 248, 0);}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {color: rgba(51, 51, 51, 1);background-color: #E7E7E7;}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {color: #fff;background-color:#BDBE00; }/*#E38E47;*/
#custom-bootstrap-menu .dropdown-menu > .active > a, #custom-bootstrap-menu .dropdown-menu > .active > a:hover, #custom-bootstrap-menu .dropdown-menu > .active > a:focus {background-color: #BCBE00;}

/*************** submenu ****************/
#custom-bootstrap-submenu.navbar-default .navbar-brand {color: rgba(51, 51, 51, 1);}
#custom-bootstrap-submenu.navbar-default {font-size: 16px;background-color: #F8F8F8;border-width: 1px;border-radius: 4px;z-index: 2;}
#custom-bootstrap-submenu.navbar-default .navbar-nav>li>a {color: rgba(51, 51, 51, 1);background-color: rgba(248, 248, 248, 0);}
#custom-bootstrap-submenu.navbar-default .navbar-nav>li>a:hover,#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {color: rgba(51, 51, 51, 1);background-color: #E7E7E7;}
#custom-bootstrap-submenu.navbar-default .navbar-nav>.active>a,#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {color: rgba(0, 0, 0, 1);background-color: #E7E7E7;}
#custom-bootstrap-submenu .dropdown-menu > .active > a, #custom-bootstrap-menu .dropdown-menu > .active > a:hover, #custom-bootstrap-menu .dropdown-menu > .active > a:focus {background-color:#E4E599;}

/***************************************************************************************
Menu 
***************************************************************************************/

/*body {padding-top: 50px;}*/
nav.navbar-default {border-color: none ! important;}
/*
nav.navbar.shrink  {
  border-color: none ! important;
  box-shadow : 0px 0px 10px #666 !important;
}
*/
nav.navbar  {border-color: none ! important;-moz-box-shadow: 0 4px 2px -2px gray;-webkit-box-shadow: 0 4px 2px -2px gray;box-shadow: 0 4px 2px -2px gray;box-shadow: 0 4px 2px -2px gray;}
nav.navbar.affix  img  {display: block ! important;}

.oben{background-color:#eeeeee;color:#666;height:100px;} /*höhe header*/
.navbar-brand {padding: 5px 0px 0px 10px !important;height: 50px;}
.navbar-brand > img {display: none ! important;max-height: 40px ! important;height: 40px ! important;}
.section {position: relative;padding: 35px 0 !important;}

@media (max-width: 767px) {
	.oben{min-height:65px ! important;}	
	.oben img {
		/*width:70px;display:none*/
		
    display: block;
    margin-top: 10px !important;
    text-align: center;
    margin: 0 auto;
    max-width: 200px;
margin-bottom: 0px;
	
	}	
	.affix + .top-50 {padding-top: 60px !important;}	
	/*.navbar-brand > img {display: block ! important;max-height: 40px ! important;height: 40px ! important;}	*/
	.navbar-brand > img {
    display: none !important;
    max-height: 40px ! important;
    height: 40px ! important;
}
	
	.header-text{display:none !important;}
	.header-titel{font-size:25px;}
	.img-thumbnail {margin:0px;}
}

@media (max-width: 768px)and(max-width: 991px) {
	.affix + .top-50 {padding-top: 60px !important;}
	.navbar-brand > img {display: block! important;max-height: 40px ! important;height: 40px ! important;}	
	.header-text{display:none !important;}
}
@media (max-width: 991px) {
	.affix + .top-50 {padding-top: 50px !important;}
	/*.header-text{display:none !important;}*/
}

@media (max-width: 480px) {
	h2, .h2 {font-size: 25px !important;}
.oben {
    height: 60px ! important;
}
.oben img {
    display: block;
    margin-top: 0px !important;
    text-align: center;
    margin: 0 auto;
    max-width: 150px;
}
}

@media (max-width: 360px) {
	.affix + .top-50 {padding-top: 50px !important;}
	.oben{height:58px ! important;}
	.header-titel{font-size:18px;}
	h2, .h2 {font-size: 20px !important;}
}


/**********************************************************
Text Farbe
**********************************************************/
.text-primary {color: #337AB7 ! important;}
.slogan {margin-top: 23px;}
.modal-header-danger {color:#fff;padding:9px 15px;border-bottom:1px solid #eee;background-color: #d9534f;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
/*.section-success {background-color: #966009 !important;color: #ffffff;}*/
.section-success {background-color: #896022 !important;background: #896022 !important;color: #ffffff;}
/*********************** margin menu ************************/
.section.first{margin-top:0px;padding: 0px 0px !important;} 
.first{margin-top:0px;padding: 0px 0px !important;}
.fa.fa-check-square-o {color: #337AB7;font-size: 14px;padding-right: 10px;}

/*
.fa.fa-diamond::before {
    content: "\f219";
}
*/

@media (max-width: 767px) {
.hr-hide{display: block !important;}
.section {position: relative !important;padding: 15px 0px !important;}
.slogan {margin-top: 0px;}
}
/*min-width: 768px AND*/

@media ( max-width: 991px) {
	
}

@media ( max-width: 1199px) and (min-width:992px){
}
/**/
@media (min-width:992px){
.slogan {padding-left: 30px !important;}	
}

@media (min-width:1200px){
	
}
@media (max-width:1281px){
	/*.oben img{min-height:85px ! important;}*/
}
/***********************************************************************************
Menu Button
**************************************************************************************/
.navbar-collapse.in {
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

/*.section.heading {position: relative;padding: 15px 0;}*/
/*******************************************************************************************
modifizierte Modalbox
********************************************************************************************/

body.modal {overflow-y: hidden;}
body.modal-open, .modal-open .navbar-fixed-top {margin-right: 0 !important;padding-right:0px !Important;}
body.noscroll { overflow: hidden; }
body.modal-open {height: auto;overflow: inherit;}
/*
.modal-content {background-color: #2F3238 ! important;color:white;}
.modal-title {font-family: 'Open Sans', Arial, sans-serif;color:#fff;line-height: 30px;font-size: 30px;font-weight: 300;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}
.modal-header {border-bottom: 1px solid #537281 ! important;}
.modal-footer {font-family: 'Open Sans', Arial, sans-serif;border-top: 1px solid #537281 ! important;}
.modal-header .close {color: #fff !important;opacity: 1 !important;}
button.close {font-size: 40px !important;}
*/
.close {font-size: 51px !important;font-weight: bold;line-height: 20px !important;opacity: 0.5;filter: alpha(opacity=20) !important;}


.glyphicon-chevron-right::before, .glyphicon-chevron-left::before {background-color: #2F3238;opacity:0.7;padding: 2px 10px;}
.glyphicon-chevron-right.gal::before, .glyphicon-chevron-left.gal::before {background-color: transparent;opacity: 0.8;padding: 2px 10px;}

.label-default.gal {background-color: #dedede;color:#666;}

.ekko-lightbox .glyphicon-chevron-left {padding-left: 0px !important;}
.ekko-lightbox .glyphicon-chevron-right {padding-right: 0px !important;}

a.glyphicon:hover {outline:none;}

.para { 
  /*background: url(images/bg.jpg) no-repeat center center fixed;*/
  background : url('../../img/background/background-screen1.jpg') no-repeat center center fixed !important;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
/*
background-size: contain;
*/
}
/***********************************************************************************
parallax
************************************************************************************/
#produkte { background: url(../../images/home1.jpg) 50% 0 fixed; height: auto;  margin: 0 auto; width: 100%; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.3);padding: 200px 0;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;}

.divider {height: 10px;width:100%;display:block;margin: 9px 0;overflow: hidden;background-color: red;}
.gallery{display: inline-block;margin-top: 20px;}
.klein {width:300px;}
.well-warning{background-color:#F0AD4E;}
.titel{background:#eeeeee;}
.hr-hide{display:none;}
.logo-footer{display: block;max-width: 50% ! important;height: auto;}
/***********************************************************************************
Karusell
**************************************************************************************/
.carousel-fade .carousel-inner .item {opacity: 0;transition: opacity 1s linear;}
.carousel-fade .carousel-inner .active {opacity: 1;}
.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right {left: 0;opacity: 0;z-index: 1;}
.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {opacity: 1;}
.carousel-fade .carousel-control {z-index: 2;}
.carousel-caption {max-width: 220px;background:#68a4c4;opacity:0.8 ! important;border:0px solid;border-radius:5px;position: absolute;left: 70% ! important;right: 20px ! important;bottom: 20px;z-index: 10;padding-top: 0px;padding-bottom: 0px;color: #ffffff;text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);}
.carousel-caption h2{color:#fff; z-index: 11; opacity:1; margin-top: 0px;margin-bottom: 0px;}
.toggleHeading {animation-delay: 0.5s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;-o-animation-delay: 0.5s;-moz-transition: none !important;}
.toggleCaption {animation-delay: 1.5s;-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s;   -o-animation-delay: 1.5s;   -moz-transition: none !important;}

/**************************************************************************************
Karusell neu
*************************************************************************************/

.item img {width: 100%;}
.carousel-indicators.test li {display: inline-block;width: 48px;height: 48px;margin: 10px;text-indent: 0;cursor: pointer;border: none;border-radius: 50%;background-color: #E5E0E0;/*box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);  */ box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);}
ol.carousel-indicators.test  li.test1  {width: 24px !important;height: 24px !important;background-image: url("../../images/logo_indi_24.png") ;}
.carousel-indicators.test .active {width: 24px;height: 24px;margin: 10px;background-color: #55D2DB;}
 @media (max-width: 767px) {
	ol.carousel-indicators.test  li.test1  {width: 48px !important;height: 48px !important;background-image: url("../../images/logo_indi.png") ;}
	.carousel-indicators.test .active {width: 48px !important;height: 48px !important;margin: 10px;background-color: #D9534F;}	 
}
.carousel-indicators.test {bottom: 0px;}
/*************************************************************************
Content Karusell
**************************************************************************/

.carousel-inner .item img {
	width:100%;
	height:100%;
}
.item .thumbnail {
	margin-bottom:0;
}
.carousel-control.left, .carousel-control.right {
	background-image:none ;
}
.carousel-control {
	background:	none;
	color:#999;
	padding: 4px 0;
	width:26px;
	top:auto;	
	left:auto;
	bottom:0;
	opacity:1 !important;
	text-shadow:none;
}
.carousel-control.right {
	right:10px;
}
.carousel-control.left {
	right: 40px;
}
.carousel-indicators.team {
  bottom:0px !important;
  margin-bottom: 0px;
}
.carousel-indicators.team li {
  background-color: #337AB7 !important;
  background-color: #337AB7 !important;
}

.carousel-indicators.team .active {
  background-color: #D9534F !important;
}
.scrollup {width: 40px;height: 40px;position: fixed;bottom:20px;right:20px;display: none;background-color: #FF6801;padding: 2px 8px;border-radius: 5px;outline: 0 !important;outline-offset: 0px !important;-webkit-box-shadow: 1px 1px 7px 1px rgba(0,0,0,0.92);-moz-box-shadow: 1px 1px 7px 1px rgba(0,0,0,0.92);box-shadow: 1px 1px 7px 1px rgba(0,0,0,0.92);}

.leistungen h3  {margin:20px 0 20px 0 !important;}
/*.section.leistungen img  {margin:20px 0 20px 0;}
*/

.panel-warning > .panel-heading {color: #fff;background-color: #E38E47;border-color: #E38E47;}

.list-group-item {
    border: 0px solid #999999;
}



/*************************************************************************
Pricing Box
**************************************************************************/

.panel-pricing {-moz-transition: all .3s ease;-o-transition: all .3s ease;-webkit-transition: all .3s ease;overflow: hidden;}
.panel-pricing:hover {box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);}
.panel-pricing .panel-heading {padding: 20px 10px;}
.panel-pricing .panel-heading .fa {margin-top: 10px;font-size: 58px;}
.panel-pricing .list-group-item {color: #777777;border-bottom: 1px solid rgba(250, 250, 250, 0.5);}
.panel-pricing .list-group-item:last-child {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
.panel-pricing .list-group-item:first-child {border-top-right-radius: 0px;border-top-left-radius: 0px;}
.panel-pricing .panel-body {background-color: #f0f0f0;font-size: 40px;color: #777777;padding: 20px;margin: 0px;}

/************************************************************************************/
/* Listen Punkte*/

ul.preise li:first-child {width:30%}
ul.preise li:nth-child(2) {width:12%}
ul.preise li:last-child {width:auto}


ul.li-icon {list-style-type: none;}
.right-sidebar {border-left: 1px solid #f5f5f5;padding: 0 0 0 30px;-webkit-box-shadow: inset 1px 0 0 0 rgba(0,0,0,.01);box-shadow: inset 1px 0 0 0 rgba(0,0,0,.01);max-width:262px;}
.right-sidebar.stick {margin-top: 110px;position: fixed;top: 0;width: 20%;}

@media (max-width: 767px) {
	.right-sidebar {border-left: 1px solid #f5f5f5;padding: 0 0 0 30px;-webkit-box-shadow: inset 1px 0 0 0 rgba(0,0,0,.01);box-shadow: inset 1px 0 0 0 rgba(0,0,0,.01);max-width:100%;}
	.right-sidebar.stick {margin-top: 0px;position: relative ! important;top: 0;width: 100%;max-width:100%;}
	footer.section .col-md-4.col-sm-4.col-xs-11 {border-bottom: 1px solid #555;padding-bottom: 10px;}
}
@media (max-width: 991px) {
	.right-sidebar.stick {margin-top: 0px;position: relative ! important;top: 0;width: 100%;max-width:100%;}	
}

.responsive-video {padding-bottom: 56.25%;position: relative;overflow: hidden;displax: block;height: 0;}
.responsive-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}

/***************************************************** work **************************************************/
.head {background-color: #68A4C4;opacity:0.7;border-radius: 10px;margin-top:150px;margin-bottom:150px; }
.head h1 {font-family: 'Open Sans', Arial, sans-serif;color:#fff;line-height: 1.1em;font-size: 48px;font-weight: 300;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}

h3.entry-title {
    color: #515151;
background-color:#EFEFEF;/* #d6d981*/
padding: 10px;
border-radius: 5px;
}

/***************************************************** footer **************************************************/
footer.section.bg-grey, .section.bg-grey{background-color:#3a3a3a;color:#fff;}/*898989*/
footer.section{padding:20px 0px 0 0 ! important;}
footer a {color:#999;}
footer h3 {padding-bottom:20px;color:#B9BE00;}
#sub-footer {text-shadow: none;color: #f5f5f5;padding: 0;padding-top: 10px;margin: 20px 0 0 0;}
#sub-footer {background: #666;}
#sub-footer ul.social-network {float: right;}
ul.social-network {list-style: none;margin: 0;}
ul.social-network li {display: inline;margin: 0 5px;}
ul.link-list {margin: 0;padding: 0;list-style: none;}
ul.link-list li {margin: 0;padding: 2px 0 2px 0;list-style: none;}

.list-group-item.text {min-height:60px;}


blockquote { border-left: 5px solid #337AB7 !important;}
.thumb p {padding-left:20px;}

/***************************************************** 
Galerie Reihen 
**************************************************/
.col-md-5.test:nth-child(3n+1) {clear: left;}
/*.col-sm-6.test:nth-child(2n+1) {clear: left;}*/
.col-md-4.profil:nth-child(4n+1) {clear: left;}

.thumb.profil img {max-height:250px;}


/*.farbe h4 {font-family: "Open Sans",Arial,sans-serif;font-size:150%;font-weight:400;}*/
a.farbe {color:#333;}
a.farbe:hover {text-decoration:underline !important;}
a.farbe:focus {text-decoration:none;}

a.farbe.collapsed::before {font-family: 'Glyphicons Halflings';content: "\e080";/*"\e114"*/float: right;color: #333;margin: 10px;}
a.farbe::before {font-family: 'Glyphicons Halflings';content: "\e114";/*"\e114"*/float: right;color: #333;margin: 10px;}
a.collapsed  {color:#333;outline:none ! important;}
a:focus  {color:#333;outline:none ! important;}
.list-inline > li {display: inline-block;padding-left: 20px ! important;padding-right: 0px ! important;}
h4.panel-title {font-size:18px ! important;}

.dropdown-submenu {position: relative;}
.dropdown-submenu>.dropdown-menu {top: 0;left: 100%;margin-top: -6px;margin-left: -1px;-webkit-border-radius: 0 6px 6px 6px;-moz-border-radius: 0 6px 6px;border-radius: 0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>a:after {display: block;content: " ";float: right;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 5px 0 5px 5px;border-left-color: #ccc;margin-top: 5px;margin-right: -10px;}
.dropdown-submenu:hover>a:after {border-left-color: #fff;}
.dropdown-submenu.pull-left {float: none;}
.dropdown-submenu.pull-left>.dropdown-menu {left: -100%;margin-left: 10px;-webkit-border-radius: 6px 0 6px 6px;-moz-border-radius: 6px 0 6px 6px;border-radius: 6px 0 6px 6px;}
/****************************************************************************************************/
.dropdown-submenu {position: relative;}
.dropdown-submenu>.dropdown-menu {top: 0;left: 100%;margin-top: -6px;margin-left: -1px;-webkit-border-radius: 0 6px 6px 6px;-moz-border-radius: 0 6px 6px;border-radius: 0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>a:after {display: block;content: " ";float: right;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 5px 0 5px 5px;border-left-color: #ccc;margin-top: 5px;margin-right: -10px;}
.dropdown-submenu:hover>a:after {border-left-color: #f6691c;}
.dropdown-submenu.pull-left {float: none;}

.dropdown-submenu.pull-left>.dropdown-menu {left: -100%;margin-left: 10px;-webkit-border-radius: 6px 0 6px 6px;-moz-border-radius: 6px 0 6px 6px;border-radius: 6px 0 6px 6px;}
.form select {display: none;}

@media (max-width: 767px) {
	#custom-bootstrap-submenu{ display: none; }
	.form select {display: inline-block;}
}
/**************************************** Login Gross *****************************************************/
#login-dp{
    min-width: 250px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
    font-size:12px    
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0    
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
.btn-fb{
    color: #fff;
    background-color:#3b5998;
}
.btn-fb:hover{
    color: #fff;
    background-color:#496ebc 
}
.btn-tw{
    color: #fff;
    background-color:#55acee;
}
.btn-tw:hover{
    color: #fff;
    background-color:#59b5fa;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
}
/**************************************** Login Gross *****************************************************/
.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
 /* height: 230px;*/
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}
.table input {padding-left:0px !important;}
.control-label {
    font-size: 18px !important;
}
/****************************************** Preloader **************************************************/
#preloader {background-color: #fff;bottom: auto;height: 100%;left: auto;position: fixed;right: auto;top: auto;width: 100%;z-index: 9999;}
.book {
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-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: #41aba0;
  width: 50px;
  height: 60px;
  -webkit-transform-origin: 0% 50%;
      -ms-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: #41aba0;
  }
  29.9% {
    background: #41aba0;
  }
  30% {
    -webkit-transform: perspective(200px) rotateY(-90deg);
            transform: perspective(200px) rotateY(-90deg);
    background: #41aba0;
  }
  54.999% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  60% {
    -webkit-transform: perspective(200px) rotateY(-180deg);
            transform: perspective(200px) rotateY(-180deg);
    background: #41aba0;
  }
  100% {
    -webkit-transform: perspective(200px) rotateY(-180deg);
            transform: perspective(200px) rotateY(-180deg);
    background: #41aba0;
  }
}

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

/****************************************** eof Preloader **************************************************/