@font-face {
  font-family: "robotoregular";
  src: url('font/robotoregular.eot');
  src: url('font/robotoregular.eot') format('embedded-opentype'),
       url('font/robotoregular.woff2') format('woff2'),
       url('font/robotoregular.woff') format('woff'),
       url('font/robotoregular.ttf') format('truetype'),
       url('font/robotoregular.otf') format('opentype'),
       url('font/robotoregular.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "sanseriflf";
  src: url('font/sanseriflf.eot');
  src: url('font/sanseriflf.eot') format('embedded-opentype'),
       url('font/sanseriflf.woff2') format('woff2'),
       url('font/sanseriflf.woff') format('woff'),
       url('font/sanseriflf.ttf') format('truetype'),
       url('font/sanseriflf.otf') format('opentype'),
       url('font/sanseriflf.svg#sanseriflf') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "opensanscondensed";
  src: url('font/opensanscondensed.eot');
  src: url('font/opensanscondensed.eot') format('embedded-opentype'),
       url('font/opensanscondensed.woff2') format('woff2'),
       url('font/opensanscondensed.woff') format('woff'),
       url('font/opensanscondensed.ttf') format('truetype'),
       url('font/opensanscondensed.otf') format('opentype'),
       url('font/opensanscondensed.svg#opensanscondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Gelasio&family=PT+Sans&family=Source+Sans+Pro&display=swap');

html {
font-family: 'PT Sans', sans-serif;
padding: 15px;
background-color: #ff0000;
}

        body {
border:solid black 3px;
            margin: 0;
background-color: #C0C0C0;
        }

        h1 {
padding-bottom:15px;
            font-family: 'robotoregular', serif;
            font-weight: 600;
            text-align: center;
}


h2 {
            font-family: 'robotoregular', serif;
            font-weight: 600;
            text-align: center;
        }


        p {
            font-family: 'PT Sans', sans-serif;
            font-weight: 200;  
        }

/* mobile */

@media only screen and (max-width: 600px) {
h1 {
font-size: 20px;
}

h2 {
font-size: 100%;
}
p {
font-size: 10px;
}
#text {
font-size: 100%;
}
a {
font-size: 80%;
}
}


a {
  color: #0000EE;
}

a:hover {
  opacity: 0.4;
}


/* below for the ebook list  */
        ul {
font-family: 'PT Sans', sans-serif;
            font-weight: 200; }


        .logo {
border-bottom:solid black 3px;
        padding-top: 0px;
 background-color: #C0C0C0;
        background-image: url("img/logo.jpg") no-repeat top center;
        }








	   .logo img {
		border:solid black 2px;
		}


/* Mobile */

@media only screen and (max-width: 600px) {
 .logo img{
margin-top: 15px;
width: 80%;
height: 200%;
		}
}

@media only screen and (min-width: 600px) {
.logo img{
width: 50%;
height: 200%;
		}
}


     
        .header {
            background-color: #C0C0C0;
            margin: 0px;
            text-align: center;
            float: center;
            color: #4f889f;
            padding: 44px;
            width: auto;
            height: 250;
        }
	.nav {
font-family: 'PT Sans', sans-serif;
      	 text-align: center;
background-color: #e6e6e6;
            width: auto%;
            margin: 0px;
border-bottom:solid black 3px;
list-style: none;
     	}

/* mobile */

@media only screen and (min-width: 600px) {
.nav {
font-size: 1.8rem;
padding: 30px 40px;
}
}

	.nav nav-link {
      	 text-align: center;
		 line-height: 40px;
		 height: 40px;
            font-size: 1.8rem;
     	}
.nav a {
text-decoration: none;
color: red;
display: inline;
transition: .3s background-color;
border-bottom: 3px solid black;
} 	

.nav a:hover {
background-color: #9e9e9e;	
     		
     		}
     		
.nav a.active {
border-bottom: 3px solid yellow;
background-color: #9e9e9e;
color: red;
cursor: default;
}
  
        .container div {
    /*         padding: 2%;     */
padding-top: 10px;
            box-sizing: border-box;
         min-height: 500px;
    border-top:solid black 3px;
        }
        .left-col, .right-col {
          background-color: #C0C0C0;
            width: 20%;
            float: left;
        }


        .center-col {
         padding: 2%;  
background-color: #e6e6e6;
background-image: url('');
        border-top:solid black 2px;
        border-left:solid black 3px;
        border-right:solid black 3px;
            width: 60%;
            float: left;
 }

/* mobile */

@media only screen and (min-width: 600px) {
.center-col {
        border-top:solid black 2px;
        border-left:solid black 3px;
        border-right:solid black 3px;
}
}


        .div01 {
            background-color: #fbd603;
        }
.btn {
  background-color: yellow;
  border: solid red 2px;
  color: red;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 16px;
}

/* Darker background on mouse-over */
.btn:hover {
  opacity: 0.4;
}
        .footer {
            clear: both;
            font-family: 'PT Sans', sans-serif;
font-weight: bold;
background-color: #C0C0C0;;
            text-align: center;
            height: 60px;
            padding-top: 20px;
            box-sizing: border-box;
        border-top:solid black 3px;
        }



.rightbook{
    float:right;
}

.leftbook{
    float:left;
}


/*  counter  */
.countup {
padding-top: 40px;
font-family: 'PT Sans', sans-serif;
  text-align: center;
  }
.countup .timeel {
border: solid 2px black;
color: black;
  display: inline-block;
  padding: 23px 40px 10px;
  background: red;
  margin: 0;
  /* min-width: 2.6rem; */
  /* border-radius: 10px 0 0 10px; */
}
.countup .timeel p{
 /* border-radius: 0 10px 10px 0; */
padding: 8px;
border: solid 1px yellow;
  background: black;
  color: yellow;
  display: inline-block;
font-weight: bold;
}


/* mobile   */



@media only screen and (max-width: 600px) {
        .container div {
    /*         padding: 2%;     */
padding-top: 10px;
       /*  min-height: 500px; */
        }
        .left-col, .right-col {
            display: none
        }


        .center-col {
        border-left:solid black 0px;
        border-right:solid black 0px;
    border-top:solid black 3px;
         padding: 2%;  
background-color: #e6e6e6;
background-image: url('');
            width: 100%;
 }
html {
font-family: 'PT Sans', sans-serif;
padding: 5px;
background-color: #ff0000;
}

.nav {
font-weight: bold;
font-size: 1.0 rem;
padding: 15px 15px;

}
.footer {   height: 80px;
            padding-top: 20px;
}
b {
font-size: 0.8rem;
}
}

hr {
margin-top: 68px;
background-color: rgb(255 161 14);
border: 2px solid rgb(154 76 9);
}