:root{
  --primary-color: #c72727;
  --secondary-color: #f99500;
  --light-color: lightgray;
  --dark-color: #333;
  --max-width: 1100px;
}
   
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  line-height: 1.4rem
}

a {
  text-decoration: none;
}

p {
  text-align: left;
}

ul {
  list-style: none;
}
img{
  width: 100%;
}

.py-1 { padding: 1.5rem 0 }
.py-2 { padding: 2rem 0 }
.py-3 { padding: 3rem 0 }
.p-1 { padding: 1.5rem }
.p-2 { padding: 2rem }
.p-3 { padding: 3rem }

.btn{
  display: flex;
  border: none;
  background: var(--light-color);
  color: #333;
  padding: 0.5rem 1.5rem;
  align-items: center;
  justify-content: center;
 
}

.btn-light { background: var(--light-color)}
.btn-primary{ background: var(--primary-color)}
.btn-secondary{ background: var(--secondary-color)}

.text-primary {
  color: white;
}
.text-secondary {
  color:#0284d0;
}



     /*-- NAVBAR styling --*/
.navbar {
  display:flex;
  align-items: center;
  justify-content: space-between;
  background-color: lightgrey;
  color: blue; /* Our Ancestors */
  width: 100%;
  height: 70px;
  /*position: fixed;*/
  top: 0px;
  padding: 0 30px;
}
.navbar a {  /* affect all the boxes except Memoir */
  color: #333;
  padding: 10px 20px;
  margin: 0 5px;
  text-decoration:none;
 }

.navbar ul {
  display: flex;
  list-style-type: none;
 }
 
.navbar ul li {
  color: var(--dark-color);  /* only the link for Memoir*/
  text-decoration: none;
  padding: 10px 20px;
  position: relative;
}
.navbar ul li a{
  color: var(--dark-color);/* only the links for Home, About and Families*/
  column-gap: 20px;
}

              /*-- HIDE NESTED UL BY DEFAULT --*/
.navbar ul li ul {
  display: none;
}

.navbar ul li:hover {
  cursor: pointer;
  background: grey;
  color: #fff;
  border-radius: 10px;
}

.navbar ul li:hover a{
  color: #fff
}
            /* ---NESTED DROPDOWN TO SHOW--- */ 

.navbar ul li:hover ul {
  display: block;
  position: absolute;
  right: 0;  
  width: 250px;
}

.navbar ul li:hover ul li {
  display: block;
  background: #e7e7e7;
  border:black 2px solid;
  border-radius: 10px;
  margin-bottom: 3px;
 }

.navbar ul li:hover ul li a {
  color: #333;
  text-align: right;
  
  
}  

.navbar ul li:hover ul li:hover {
  background: #e0e0e0;
  color: inherit;
}

                 /*-- THE 'FAMILY' PAGE --*/
 .showcase {
  background: url('/images/family3.jpg') no-repeat center center/cover;
  height: 770px;
}

.showcase .showcase-content {
  color: black;
  text-align: center;
  padding-top: 32%;
}

.showcase .showcase-content h1 {
  font-size: 70px;
  text-align: center;
  color: darkblue;
}

/*  ------- MEMOIR SECTION ---------*/
.box-A{
  display: flex;
  justify-content:center;
  /*background: pink;
  border: grey 2px solid;*/
  align-content: center;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  width: auto;
  flex: 1;
  line-height: 1.3rem;
}

.box-A .box-left {
float: left;
/*background: lightgrey;*/
width: 16.4vw;
height: 35.4vh;
margin: 10px;
padding: 0px;

}

.box-A .box-left img{
display: block;
margin: auto;
margin-top: 15px;
border-radius: 50%;
border: blue 3px solid;


}
.box-A .box-right{
float: right;
background: palegreen;
border: blue 2px solid;
border-radius: 15px;
width: 30vw;
margin:25px;
padding: 30px 10px;
text-align: center;
}

.box-B {
  display: flex;
  flex-direction:column;
  align-items: center;
  /*background: lightyellow;
  border: grey 2px solid;*/
  border-radius: 15px;
  width: 70vw;
  margin: 2vw 17vw;
  padding: 0PX;
}

.box-B .box-B1{
background: lightgrey;
border:black 1px solid;
width: 70vw;
margin: 10px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border-radius: 15px;
text-align: center;
font-weight:bold;
}
.box-B .box-B1-Note{
background: lightgrey;
border:black 1px SOLID;
width: 60vw;
margin: 1.5rem 0px 1.5rem 0px;
padding: 1.5rem 10px 1.5rem 10px;
border-radius: 15px;
text-align: center;
font-weight:bold;
font-size: 1.25rem;
line-height: 1.5rem;
}

.box-B .index{
float: center;
background: yellow;
border:black 1px solid;
width: 40vw;
margin: auto;
margin-top: 20px;
/*padding: auto;*/
padding: 10px 10px 10px 10px;
border-radius: 15px;
list-style: none; 
text-decoration: none;
font-size: 1.25rem;

}

.box-B .index ul{
list-style: none;
}
.box-B .index ul li a{
text-decoration: none;
}

.box-B .box-B2{
padding: 0px 0px 5px 0px;
/*background: palegreen;
border: red 2px solid;*/
width: 60vw;
margin: auto;
padding: 20px 0px 10px 0px  ;
font-size: larger;
line-height: 1.7rem;
}

.box-B .box-B2 h2{
padding: 0px 0px 10px 0px;
}

.box-B2 .indent{ 
margin: 10px 0px 10px 40px;
}

  /*------ THE FOOTER SECTION  ------*/

  .main-footer{
    background: var(--dark-color);
    color: #fff;
  }
  
  .main-footer img{
    width: 150px;
  }
  .main-footer a{
    color: #fff;
  }
  .main-footer .footer-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.5rem;
    padding: 10px;
    
    
  }
  .main-footer .footer-container{
    background: #444;
    /*grid-column:1 / span 3;*/
    /*padding: 5rem;*/
    text-align: left;
    padding: 0 10px;
    /*font-size: .9rem;*/
    
  }

.main-footer .footer-container input [type='email']{
  width: 90%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}  

.main-footer .footer-container input [type='submit']{
  width: 90%;