/* this file pretty stripped back of surplus 
 background: url(greenf.jpg); background-size: cover;  background-repeat: no-repeat;*/
 
 
 article { margin-bottom: 40px; }


/* new for photo top, this is essentially intro in other css */
article img { 
    float: right;
    margin: 0 0 10px 10px;
}

article span {
    float: left;
    width: 0.7em;
    font-size: 400%;
     font-family: algerian, courier;
    color: #B0171F;
    line-height: 80%;
    font-weight: normal;
}

article p {
    padding:10px; 
   
     border-style: dotted;
    border-radius: 10px;
    border-width: 1px;
    border-color:  #009933; 
  
    
     -moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
     
     font-size: 90%;
     
  line-height: 1.57em;
  letter-spacing: 0.04em;
}
 
 h5 { color: #453c37; 
 font-size: 105%;
 font-family: "Steinem Bold", Arial, sans-serif;
 
  letter-spacing: 0.06em;} 

 h5 span {  color: #ffbf00; }
 
 
 
 #bl-sm { color: #B0171F;  font-weight: bold; font-size: 80%; }
.what-linda {
        border-top: 2px solid  #ffbf00; 
   color: #5B5B5B;
    font-size: 80%;
    margin: 10px 5px 0 5px;
    font-weight: bold;}
    
.what-linda img {
    float: right;
      margin: 0 0 10px 10px;
    
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 5%;
}

.introd {font-family: "Steinem Bold", Arial, sans-serif;
 line-height: 1.57em;
  letter-spacing: 0.06em;
  color: #453c37;
  font-weight: bold;
  font-size: 105%;
  background-color: #ffffff;
  
  
  
 
  

  
   padding:10px; 
 
 	border-color:  #B0171F; 
     border-style: dotted;
    border-radius: 10px;
    border-width: 1px;
    
   

 
    -moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  
 
  }
  
   h1 { font-family: "Steinem Bold", Arial, sans-serif;
 
  letter-spacing: 0.06em;
  color: #453c37;
  font-size: 130%;
     
} 

h1 span { color:  #B0171F; }
  
  section {
    max-width: 700px; 
  margin: 10px auto 0;  
  padding: 10px;
} 

  .head-wrap {
    max-width: 1000px; 
  margin: 10px auto 0;  
  padding: 10px;
} 
  
  
  #pin{ color: #FF82AB; } 
#red { color: #B0171F;  }




body {
    
      font-family: verdana, sans-serif;
 
    padding: 0;
    margin: 0;
    background-color:#fffafa;
}

.col-1 {width: 60%; 
padding-top: 30px; padding-bottom: 10px; padding-right: 30px; padding-left: 10px;
 
     }
.col-2 {
  width: 40%; padding-top: 30px; padding-bottom: 10px; padding-right: 10px; padding-left: 30px; 
  }

[class*="col-"] {
 float: left;
} 

.row {
     max-width: 1000px; 
     margin: auto;
     
}

.row::after {
 content: "";
 clear: both;
 display: table;
} 

@media only screen and (max-width: 768px) {
 /* For mobile phones: */
 [class*="col-"] {
  width: 100%;
  padding: 10px;
 }
}





/* amber #ffbf00; */
.home { 


 border-radius: 10px;

padding: 10px;

    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.8);
     box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.8);
     

}





.home p {
background-color: #fffafa; 

font-size:90%;

padding: 10px; 
border-radius: 10px;

line-height: 1.57em;
  letter-spacing: 0.04em;
  color: #453c37;
  

}



.topnav {
 background-color: #696969; /* #8E8E8E; */
 overflow: hidden;
 
 
 /* 3 lines here in other css to make fixed */ 
}


.topnav a {
    
 float: left;
 display: block;
 color: #ffffff;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;

}



.topnav a.active {
    background-color: #ffbf00;
}




.topnav a:hover:not(.active) {
 background-color: #B0E2FF;
 color: black;
}


.topnav .icon {
 display: none;
} 



   
    
@media screen and (max-width: 600px) {
     .topnav a:not(:first-child) {display: none;}
     .topnav a.icon {
     float: right;
     display: block;
       
 }
}
 
 
@media screen and (max-width: 600px) {
 .topnav.responsive {position: relative; }
 .topnav.responsive a.icon {
  
  position: absolute;
  right: 0;
  top: 0;
  
  }
 .topnav.responsive a {
    
 float: none;
 display: block;
 text-align: left;
 
  
 padding: 10px 16px;
 }
 /* the addition of the padding line above and the topnav a style below make the mobile menu narrow to suit banner */
 .topnav.responsive a:hover:not(.active) {  /* this addition is the sole fix for responsive icon too big issue NEEDS TO GO TO OTHER PAGES */
 background-color: transparent;
 color: black;
 }

 .topnav a {padding: 6px 16px; }
 } 

       
h4 { color: #453c37; }


h2 {
     color: #453c37;  
     font-size: 120%;
}

h3 {
     color:    #fffafa; 
     font-size: 120%;
}


* {
 box-sizing: border-box;
}







header.logo { width: 100%; }