body{
	background: url('../img/gandhiji6.jpg') no-repeat fixed center;
	background-size:cover;
}
@font-face {
  font-family: Staatliches;
  src: url(Staatliches-Regular.ttf);
}
@font-face {
  font-family: Courgette;
  src: url(Courgette-Regular.ttf);
}

.header{
	font-size: 38px;
	font-family: Staatliches;
}
.header a {
    text-decoration:none;
    color:#000;
}
.header a:hover {
    text-decoration:none;
    color:#000;
}
.book{
	height: auto;
}
.loading_information{
  font-size: 38px;
  font-family: sans-serif;
  color: #8B0000;
}
#cover_wrapper{
   display: none;
}
#cover_wrapper1{
   display: none;
}
#wrapper{
  width:80%;
  position:relative;
  color:#fff;
  text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;
}

#slider-wrap{
  width:860px;
  height:900px;
  position:relative;
  overflow:hidden;
}

#slider-wrap ul#slider{
  width:860px;
  height:100%;
  
  position:absolute;
  top:0;
  left:0;   
}

#slider-wrap ul#slider li{
  float:left;
  position:relative;
  width:860px;
  height:950px; 
}

#slider-wrap ul#slider li > div{
  position:absolute;
  top:20px;
  left:35px;  
}

#slider-wrap ul#slider li > div img{
  font-size:36px;
  text-transform:uppercase; 
}

#slider-wrap ul#slider li > div span{
  font-family: Neucha, Arial, sans serif;
  font-size:21px;
}

#slider-wrap ul#slider li i{
  text-align:center;
  line-height:400px;
  display:block;
  width:100%;
  font-size:90px; 
}

#slider-wrap ul#slider li .img1{
  margin-top: -12px;
}

#slider-wrap ul#slider li .img2{
  border: 1px solid;
  margin-top: -18px;
}

.facts{
  width: 90%;
  font-size: 32px;
  font-family: sans-serif;
  font-style: italic;
  position: absolute;
  color: #000;
  cursor: pointer;
  transition: 1s ease;
  margin-top: 10%;
  padding: 2px;
}

.facts:hover{
  color: #000;
  border-radius: 5px;
  background: #fff;
  opacity: .8;
}

.artist_name_bottom{
  font-size: 14px;
  font-family: sans-serif;
  font-style: italic; 
  color: #000;
  cursor: pointer;
  transition: 1s ease;
  margin-top: -51%;
  margin-left: 80%;
  background: #e3e3e3;
  opacity: .8;
}

.artist_name_bottom:hover{
  color: #000;
  border-radius: 5px;
  background: #e3e3e3;
}

.artist_name_bottom2{
    font-size: 22px;
    font-family: sans-serif;
    font-style: italic;
    color: #000;
    cursor: pointer;
    transition: 1s ease;
    margin-top: 59%;
    margin-left: 33%;
}

.artist_name_bottom2:hover{
  color: #000;
  border-radius: 5px;
  background: #fff;
}

.artist_name_bottom3{
  font-size: 22px;
    font-family: sans-serif;
    font-style: italic;
    color: #000;
    cursor: pointer;
    transition: 1s ease;
    margin-top: 63%;
    margin-left: 35%;
}

.artist_name_bottom3:hover{
  color: #000;
  border-radius: 5px;
  background: #fff;
}

.artist_name_bottom4{
  font-size: 22px;
    font-family: sans-serif;
    font-style: italic;
    color: #000;
    cursor: pointer;
    transition: 1s ease;
    margin-top: 63%;
    margin-left: 27%;
}

.artist_name_bottom4:hover{
  color: #000;
  border-radius: 5px;
  background: #fff;
}

.side_bar{
  width: 200px;
  height: 200px;
  border: 1px solid;
}

/*btns*/
.btns{
  position:absolute;
  width:99px;
  height:51px;
  top:50%;
  margin-top:-27px;
  line-height:50px;
  text-align:center;
  cursor:pointer; 
  background:rgba(0,0,0,0.1);
  z-index:100;
  
  
  -webkit-user-select: none;  
  -moz-user-select: none; 
  -khtml-user-select: none; 
  -ms-user-select: none;
  
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.btns:hover{
  background:rgba(0,0,0,0.3); 
}

#next{right:78px; border-radius:7px 0px 0px 7px;}
#previous{left:75px; border-radius:0px 7px 7px 7px;}
#counter{
  top: 30px; 
  right:35px; 
  width:auto;
  position:absolute;
}

#slider-wrap.active #next{right:78px;}
#slider-wrap.active #previous{left:75px;}


/*bar*/
#pagination-wrap{
  min-width:20px;
  margin-top:350px;
  margin-left: auto; 
  margin-right: auto;
  height:15px;
  position:relative;
  text-align:center;
}

#pagination-wrap ul {
  width:100%;
}

#pagination-wrap ul li{
  margin: 0 4px;
  display: inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  opacity:0.5;
  position:relative;
  top:0;
  
  
}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
  opacity:1;
  box-shadow:rgba(0,0,0,0.1) 1px 1px 0px; 
}




/*Header*/
h1, h2{text-shadow:none; text-align:center;}
h1{ color: #666; text-transform:uppercase;  font-size:36px;}
h2{ color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size:18px; margin-bottom:30px;} 




/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
  -webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  -moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  -o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  -ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
  transition: all 0.3s cubic-bezier(1,.01,.32,1); 
}
ul li img{
  width: 80%;
  cursor: pointer;
}

.img_details{
  width: 100%;
  height: 800px;
  padding-left: 25%;
}
.img_details .artist_name{
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  color: #fff;
  font-size: 14px;
  margin-bottom: 3%;
  margin-left: 39%;
}

.img_details .artist_name1{
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  color: #fff;
  font-size: 14px;
  margin-left: 58%;
}
.img_details .artist_name2{
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  color: #fff;
  font-size: 14px;
  margin-left: 62%;
}
.img_details .cancle_desc{
  width: 50px;
  float: right;
  font-size: 32px;
  margin-right: 19%;
  background-color: #e3e3e3;
  border-radius: 5%;
  text-align: center;
  cursor: pointer;
}
.img_details .img_description{
  width: 30%;
  margin-left: 25%;
  display: flex;
  font-family: arial;
  font-style: italic;
  font-size: 12px;
}

.img_details .description_heading{
  font-size: 20px;
  margin-top: 2%;
  color: #002633;
}

.toBeReplaced span {
    display: none;
}

.toBeReplaced:before {
    content: "“";
}
.toBeReplaced:after {
    content: "“";
}