/* THIS IS TWM.CSS */
                                                  /*-----------------*/


*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body{
 width: 100%;
 min-height: 100vh;
 background-size: cover;
 background-position: center;
 overflow-x: hidden;
 padding: 2px; //this puts the 2 px border on the main page
}

.container-fluid {
background-color: #ffe0e0; 
width: 100%;	
overflow-x: hidden;
overflow-y: hidden;
margin:0;
padding:0;
text-align: center;
}

.container-fluid h1{
   font-weight: 500;
  font-size: 30px;
  padding-bottom: 13px;
  font-family: sans-serif;
  letter-spacing: 2px;
}

.container-fluid h2 {
color:red;
padding-top:30px;
}

.container-fluid p {
  text-align: justify;
  text-justify: inter-word;
  padding:20px;
}










/*img{	img is not used, looks cool without it
  width: 100px;
  margin: 15px;
  border-radius: 50%;
  margin-left: 70px;
  border: 3px solid #b4b8b9;
}*/

.side-bar{	/* sidebar configs go here */
 background: #1b1a1b; /* sidebar background colour with nothing selected */
 backdrop-filter: blur(15px);
 width: 15%; 	/*orig  250px This is the width of the vertical bar - needs to get bigger on smaller screen-sizes*/
 height: 100vh;
 position: fixed;
 top: 0;
 left: -400px;     /*orig value  -250px - changed this cos on lg screen size the menu bar encroached onto the page - pushed it back with -300px*/
 overflow-y: auto;
 transition: 0.6s ease;
 transition-property: left;
}

.side-bar::-webkit-scrollbar {
  width: 0px;
}

.side-bar.active{
 left: 0;
}

.side-bar .menu{
 width: 100%;
 margin-top: 40px;
}

.side-bar .menu .item{
 position: relative;
 cursor: pointer;
}

.side-bar .menu .item a{
 color: #fff;
 font-size: 16px;
 text-decoration: none;
 display: block;
 padding: 5px 5px; 				/*was *padding: 5px 30px;--initial asterisk was missing*/
 line-height: 30px;                  		/* was line-height: 60px This is the vertical height of each menu item across the WHOLE sidebar;*/
}

.side-bar .menu .item a:hover{
 background: #33363a;
 transition: 0.3s ease;
}

.side-bar .menu .item i{
 margin-right: 10px;  				/*orig 15px This is how far to the right of the i the "html entry" is */
}

.side-bar .menu .item a .dropdown{
 position: absolute;
 right: 17; /*0;*/ 				/*this is how far fom the right edge of the menu bar the chevron sits*/
 margin: 3px;					/*this is the little chevrons placement in the main-menu before expanding - above or below text*/
 transition: 0.3s ease;				/*this is the time the chevron takes to go from horizontal to vertical or the other way*/
}

.side-bar .menu .item .sub-menu{
 background: #262627;
 display: none;
}

.side-bar .menu .item .sub-menu a{
 padding-left: 20px; 			/*  distance from the left margin the expanded menu items are - was 80px originally*/
}

.rotate{
 transform: rotate(90deg);
}

.close-btn{ 				/*this is the X that close the side-bar */
 position: absolute;
 color: #f00; /* was #fff;*/
 font-size: 23px;
 right:  0px;
 margin: 15px;
 cursor: pointer;
 padding-bottom: 5px;
}

.menu-btn{				/*this refers to the hamburgerlines on main*/
 position: absolute;
 color: rgb(0, 0, 0);
 font-size: 35px;
 margin-left: 40px;		/* this was margin:25px - pushing it further to mid-screen, now using margin-left and -top*/
 margin-top:25;			/*this is now a 2 line setting */
cursor: pointer;
}

/* SCREEN BELOW IS LESS THEN 1200 ------------ SCREEN BELOW IS LESS THAN 1200 --------------- SCREEN BELOW IS LESS THEN 1200 */ 
@media (max-width: 1200px){

.container-fluid {
background-color: #e0fee0;//pale-green
/*background-color: #c8fbc8;  pale-green*/
}

.side-bar {
 width: 20&; 
}
}

/* SCREEN BELOW IS LESS THEN 992 ------------ SCREEN BELOW IS LESS THAN 992 --------------- SCREEN BELOW IS LESS THEN 992 */
@media (max-width: 992px){

.container-fluid {
background-color: azure; 
}

img{  //is only used for vertical padding - puts the gap between photies under 992 px seems to work  - try to clean this up
 width: 100px;
 margin: 15px;
 border-radius: 1%;
 margin-left: 70px;
 border: 0px solid #b4b8b9;
}

.side-bar {
 width: 25%;
}

}
/* SCREEN BELOW IS LESS THEN 768---------- SCREEN BELOW IS LESS THAN 768------------- SCREEN BELOW IS LESS THAN 768 */

@media (max-width: 768px){

.container-fluid {
/*background-color:bisque; */
background-color: #f9e79f;
}

.side-bar {
 width: 30%;
}

}

/* SCREEN IS LESS THAN 576 ------------ SCREEN IS LESS THAN 576 --------------- SCREEN IS LESS THAN 576 */
@media (max-width: 576px){

.container-fluid {
/*background-color: cyan;  */
background-color: #eafffe;  /*very pale blue pastel*/
}

.side-bar {
 width: 45%;
}


}// This bracket matches the one after 576px

}//This bracket matches the very first