/*
    Ayon Baxter's Editions'
*/
/* 
    Created on : Dec 17, 2019, 7:52:43 PM
    Author     : Ayon Abdiel-HP
*/
body{
    
    width: auto;
   
}
/* Header/Logo Title */
.header {
  padding: 2px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 16px;
}

.footdiv
{
width:100%;
height:auto;
display:inline-block;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the tab */
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
 
}

.form-group{
    margin-bottom:15px;
    margin-left: 40px;
}


input[type=text] [type=email]{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
  background-color: lightblue;
}

input[type=email]:focus {
  border: 3px solid #555;
  background-color: lightblue;
}

textarea[type=textarea] {
  width: 40%; 
  padding: 12px 20px;
}
textarea[type=textarea]:focus {
  
  border: 3px solid #555;
  background-color: lightblue;
  
  border-radius: 4px;
}

/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
        padding: 10px 1% 10px 25px;
}
.divTableRow {
	display: table-row;
      
        
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
         
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px; 
        
}
.divCell-10{
        width: 98%;
        border: 2px;
	display: inline-block;
	padding: 5px 10px;
        

}

.divTableCell-15{
        width: 12%;
        border: 2px;
	display: table-cell;
	padding: 3px 10px;

}


.divTableCell-30{
        width: 25%;
        border: 2px;
	display: table-cell;
	padding: 3px 10px;
}

.divTableCell-50{
        width: 48%;
        border: 2px;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.fulltext {
    display: inline-block;
    width: 100%;
    text-align: justify; 
}
.image80 {
    width:88%;
    height: auto;
}

.imagemobile {
    width:2%;
    height: auto;    
} 

.page {
        display: inline-block;
        float: left;
	padding: 1% .5% 1% .5%;
        text-align: justify;
        max-width: 30%;
        width: 100%;
}

.book-width {
    width: 80%;
}
.normal_div{
    display: inline;
    float: none;
    width: available;
    height: auto;
    text-align: center;
    align-items: center;
}
centre-page{
        display: inline-block;
        float: left;
	padding: 10px 2px 10px 5px;
        text-align: center;
        align-items: center;
        min-height: 370px;
}

.big-text{
font-size: x-large;
}
.clearfix{
  text-align: justify;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
  
}

.img-f-R {
    float: right;
    padding: 0px 20px 5px 10px;
    width: 25%;
}
.imag-f-L {
    float: left;
    padding: 0px 20px 5px 10px;
    width: 25%;
    
}

img.t {
  vertical-align: text-top;
}

audio { 
    width: 25%; height: 45px; 
    display: inline-block;
    box-shadow: 5px 10px 20px rgba(0,0, 0, 0.4);
    border-radius: 90px;
    transform: scale(1.05);
    padding: 0px 20px 0px 30px;
}



.big-text{
    font-size: x-large;
}
.main {
    display: inline;
    width: auto;
}
.main article {
    display: block;
    float: right;
    width: 100%;
    padding: 0px 1% 1px; 
}
.main beside {
    display: inherit;
    color: white;
    padding: 0px 5% 10px;
    width: 18%;
    float: right;
}

span.b {
    display: inline-block;
    width: 100%;
    height:50%;
    padding: 5px;
}

.block2 {
  display: inherit;
  width: 100%;
  height: 25%;
  margin: 1em;
}
.style1 {
    color: #000066;
    font-size: 150%;
    font-weight: bold;
}
.style2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 200%;
}
.style3 {
    font-size: 125%;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
}
.style4 {
    color: #000066
}

.style5 {
    font-size: 125%;
    font-style: italic;
    font-weight: bold;
}
.style6 {
    font-size: 100%;
    font-weight: bold;
}

.style7 {
    font-size: 75%;
    font-style: italic;
    color: #000000;
}
.style8 {
    font-size: 80%
}
.style9 {
    font-size: 120%;
    font-weight: bold;
}
.style9A {
    font-family: "Times New Roman", Times, serif;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
}
.style10 {
    font-size: 120%
}
.style11 {
    color: #FF0000
}

.style12 {
    color: #0000FF
}	

.style13 {
    color: #0000FF
}
.style14 {
    font-weight: bold;
    font-size: 140%;
    color: #0000FF;
}
.style15 {
    font-size: 130%
}
.style17 {
    color: #0000FF; font-size: 140%; 
}
.style18 {
    color: #0000FF; font-size: 130%; 
}
.style22 {
    font-size: 160%
}
.style23 {
    color: #FF0000
}
.style25 {  
    font-size: small
}
.style26 {
    color: #E60000;
    font-size: 125%;
}
.style27 {  
    font-size: 150%
}

/*sets the styles for the popup dialog*/
.modalDialog { 
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target { /*changes the icon from pointer to a pointing finger over selectable items, and its opacity*/
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div { /*sets the styles for divisions in side the dialog popup*/
	width: 30%;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	}

.modalDialogMed { /*Same as .modalDialog except a medium size version*/
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialogMed:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialogMed > div {
	width: 45%;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	}

.close { /*styling for the X close button on the popup button*/
	background:#000066;
	color:yellow;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 65px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 20px 12px 12px 20px;
	-moz-border-radius: 12px;
	border-radius: 12px 8px 8px 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px  #000;
	box-shadow: 1px 1px 3px #000;
}
/* the colour of the close button changes when the mouse hovers over it*/
.close:hover { 
        background: #00d9ff;
        color:red; 
}

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

/* When the screen is less than 820 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 820px) {
    .topnav a:not(:first-child) 
    {display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;
    }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
 .divTable{
	display: table;
	width: 98%;
        padding: 10px 1% 10px 25px;
}
.divTableRow {
	display: table-row;       
} 
    .divCell-10{
            width: 95%;
            border: 2px;
            display: table;
            padding: 5px 10px;
    }
    .divTableCell-15{
        width: 98%;
        border: 2px;
	display:table;
	padding: 5px 20px 5px 10px;
        font-size: x-large;  
    }
    
    .divTableCell-25{
          width: 98%;
          border: 2px;
          display: table-cell;
          padding: 3px 10px;
      }
    .divTableCell-30{
        width: 98%;
        border: 2px;
	display: table-cell;
	padding: 3px 10px;
    }
    .divTableCell-50{
        width: 50%;
        border: 2px;
	display: table-cell;
	padding: 3px 10px;
    }
    .divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
    }
    .divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
    }
    .divTableBody {
	display: table-row-group;
    }
    .page {
        display: inline-block;
        float: right;
        min-width: 80%;
	padding: 10px 1% 10px 6px;
        font-size: x-large;
     
    }    
    .imagemobile {
        width:10%;
        height: auto;    
    } 
        
    
    iframe {
    width: 100%;
    height: 110px;
    background-color: #4CAF50;
    border: none;
    }
    
    audio {
        width: 75%;
    }
    
    textarea[type=textarea] {
    width: 80%; 
    padding: 12px 20px;
    }
   
    button {
    width: 80%;
    }
}
/* end @media*/
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

 button {
  background-color: #0000FF;
  color: #ffffff;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: center;
  font-size: 32px;
  font-weight: bold; 
  margin: 4px 2px;
  width: 26%;
  cursor: pointer;
  border-radius: 25px;
}

.button {
    width: auto;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsiveiframe {
  position: absolute;
  top: 230px;
  left: 0;
  bottom: 300px;
  right: 0;
  width: 100%;
  height: 75%;
}

iframe {
    width: 100%;
    height: 100px;
    background-color: #5e9da0;
    border: none;
}