body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
 
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.image-responsive{
    width:100%;
    height: 400px;
    margin-top: 60px;
}

.datediv {
	/*border: 1px solid #000;*/
	margin-left: auto;
	margin-right: auto;
}

.nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
    height:70px;
    font-family:'Poppins', sans-serif;
    background-color:rgba(0,0,0,0.2);
    position:fixed;
    z-index:1;
    width:100%;
    transition:0.2s;
}


.logo{
    z-index:1;
    /*background-color: #fff;*/
}

.logo img{
    width:150px;
}

.menu-list {
    display: flex;
    width: 45%;
    justify-content: space-around;
}

    .menu-list li {
        list-style: none;
    }

    .menu-list a {
        color: #fff;
        text-decoration: none;
        letter-spacing: 3px;
        font-weight: bold;
        font-size: 16px;
        transition: 0.2s;
        text-transform: uppercase;
    }

        .menu-list a:hover {
            color: #708090;
            transition: 0.2s;
        }

.menu div{
    width:25px;
    height:3px;
    margin:5px;
    background-color:#fff;
    z-index:3;
}

.menu{
    display:none;
    cursor:pointer;
}


.hd1 {
	text-align: center;
	margin-top: 40px;
}
.subhd1 {
	color: blue;
}
.container {
	display: flex;
	width: 80%;
	margin: auto;
	padding: 10px;
}
.box-1 {
	margin-right: 60px;
	width: 20%;
}
.box-2 {
	width: 60%;
	font-size: 20px;
}
#more {
	display: none;
}
.accessory {
	height: 6px;
	background-image: radial-gradient(
		closest-side,
		hsla(0, 0%, 50%, 1.0),
		hsla(0, 0%, 50%, 0) 100%);
		position: relative;
		width: 90%;
	)
}
.accessory-head {
	height: 6px;
	background-image: radial-gradient(
		closest-side,
		hsla(0, 0%, 50%, 1.0),
		hsla(0, 0%, 50%, 0) 100%);
		position: relative;
	)
}
hr.style-hr {
	overflow: visible;
	padding: 0;
	border: none;
	border-top: medium double #333;
	color: #333;
	text-align: center;
}
hr.style-hr:after {
	content: "/@/";
	display: inline-block;
	position: relative;
	top: -0/7em;
	font-size: 1.5em;
	padding: 0 0.25m;
	background: #EEE8CD;
}
.col-md-12 {
	width: 100%;
}
.myimg {
	width: 80%;    
}
.myimg2 {
	width: 80%;
	height: 80%;
}
.myimgprofile {
	width: 80%;
    border-radius: 50%;
}
.book1 {
	margin-left: 20px;
	margin-bottom: 20px;
}
.list1 {
	margin-left: 2em;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('../images/logo/books1.jpg');
  min-height: 60%;
  margin-top: 2px;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

.w3-top {
	background-color:hsla(269,19%,20%,.9);
	color: #fff;
}


/* Header text style start */
/*	.logo { 
		padding: 1em;
		background-color: rgba(0, 0, 0, 0.4);
		margin: 0 auto;
		text-align: center; }
	.logo a{
		color: #03244D;
		font-family: 'Monoton', cursive;
		font-size: 2.5em;
		line-height: 1em;
		margin: .25em;
		display: inline-block; 
		text-decoration: none;
		transition: .2s;
		-webkit-transition: .2s; }
		.logo a:first-child { 
			font-size: 5em;
			margin: 0;} 
		.logo a:hover { color: #DD550C; }*/
/* Header text style end */
/* ****************************************************************** media screen max-width:1200px ****************************************************************** */
@media screen and (max-width:1200px){
    .menu-list {
        width: 55%;
    }
}


/* ****************************************************************** media screen max-width:1000px ****************************************************************** */
@media screen and (max-width:1000px){
    .menu-list a {
        font-size: 14px;
    }
}


/* ****************************************************************** media screen max-width:76800px ****************************************************************** */
@media screen and (max-width:768px) {
    html, body {
        position: relative;
    }

    .menu-list {
        position: absolute;
        right: 0px;
        height: 400px;
        top: 60px;
        background-color: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateY(-150%);
        transition: transform 0.5s ease-in;
        z-index: 1;
    }

        .menu-list li {
            opacity: 0;
        }

    .menu {
        display: block;
    }

    .nav {
        background-color: #000;
    }
}
    .nav-active{
        transform: translateX(0%);
    }

    @keyframes navReveal{
        from{
            opacity:0;
            transform: translateY(-50px);
        }
        to{
            opacity:1;
            transform: translateY(0px);
        }
    }

    .toggle .line1{
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .toggle .line2{
        opacity:0;
    }

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

.container{
    width:80%;
    margin:100px auto;
}

.container h1{
    margin-bottom:50px;
  text-align:center;
}

.nav2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    font-family: 'Poppins', sans-serif;
    background-color: #000;
    position: fixed;
    z-index: 1;
    width: 100%;
    transition: 0.2s;
}

#mynav {
    top: 0px !important;
}