/**  Body */
body {
    box-sizing: border-box;     
    font-size: 16px;  
    font-family: "Helvetica", sans-serif;
    line-height: 180%;
    margin: 0;
    padding: 0;    
}

a {
    cursor: pointer;
    text-decoration: none;
}
p {
    max-width: 100%;
}
button {
    border: none;
    background-color: transparent;
    cursor: pointer;   
    text-decoration: none;
}

/* Outerwrap */
.outerwrap, main, .headerwrap {   
    margin: 0 auto;
    text-align: center;    
    padding: 0;    
    max-width: 100%;
    box-sizing: border-box;
    display: block;    
    
}

.headerwrap a.edit-box {
    display: none;
}


/** JS MENU */

.menu-line {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px auto;
}

.menubutton {
    display: none;
    cursor: pointer;   
    margin: 5px  auto;     
    position: relative;
}
.menucontent {
    position: relative;      
    text-decoration: none;  
    transition: all .25s ease;
    width: 100%;
    max-width: 100%;
}
 .menuitem {
	margin: 0 15px;  	
    padding: 5px 20px; 
	text-align: center; 
    position: relative;    
    text-transform: uppercase;    
    box-sizing: border-box;   
    cursor: pointer;   
    text-align: bottom;
	display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    
}
/*dropdown 1 */
.menuwrap1 {
    display: inline-block;
    vertical-align: top;
    
}
.menubutton1 {
    text-transform: uppercase;
    text-decoration: none;     
    box-sizing: border-box;   
    cursor: pointer;    
    position: relative;  
    text-align: bottom;
	display: inline-block;
    margin: 0 15px;  
    font-size: 14px;
    text-align: center;
}
.menucontent1 {
    width: 260px;
    text-align: left;
    margin:  0;
    display: none;
    position: absolute;    
    z-index: 50;
    background-color: white;
}
.menuitem1{
    position: relative;
    margin: 0;
	display: block; 
	padding: 5px 12px;
   
}

/*dropdown 2 */
.menuwrap2 {       
    position: relative;
    display: block; 
    padding: 0;  
     
}

.menubutton2 {    
    text-transform: uppercase;
    text-decoration: none;   
    cursor: pointer;   
    position: relative;
    margin: 0;
	display: block; 
	padding: 0 10px;
	z-index: 99;
} 

.menucontent2 {
    width: 260px;
    text-align: left;
    margin:  0;
    display: none;   
    background-color: white;
    z-index: 99;

}
.menuitem2 {
    position: relative;   
	display: block; 
	padding: 5px 12px;
	z-index: 99;    
}

/** CSS MENU */

.css-menu ul {
    list-style-type: none;
    margin: 0;       
}

.css-menu li, .css-menu li a  {
    display: inline-block;
    vertical-align:middle;  
    text-decoration: none;   
    cursor: pointer;
    line-height: 140%; 
   
}
.css-menu li {
    padding: 0 20px;
}
.css-menu p {
    margin: 0;
}
.menu-node {
    padding: 0 0 0 10px;
}
.css-menu ul {
    padding: 0 ;
    margin: 0;
    
}
.submenu1 {      
    position: absolute;
    width: 200px;
    text-align: left;
    display: none;
    z-index: 50;
    margin: 10px 0;
   
}

.submenu2 {    
    position: absolute;
    left: 200px;
    top: 0;
    display: none;
    width: 240px;
    text-align: left;
    z-index: 50;
    margin: 0;
    padding: 20px 0;  
}
.css-menu .submenu1 li, .css-menu .submenu2 li {
    display: none;    
    display: block;
    width: auto;   
    text-align: left;  
    margin: 20px 0 10px 0;   
    
}
.css-menu .submenu1 li { 
    position: relative;  
    padding: 10px ; 
    margin: 0;   
    width: 200px;  
    box-sizing: border-box; 
}


.css-menu .submenu2 ul {
    position: absolute;
    margin: 0;
    padding: 20px 0;  
}

.css-menu .submenu2  li a{
    padding: 0;
    margin: 0;
    position: relative;
   
}

  li:hover .submenu1  {
    display: block;
    animation: delay ease 1.5s;    
    animation-fill-mode: forwards;
 } 

 .submenu1 li:hover  .submenu2 {
    display: block;
    animation: delay ease 1.5s;   
    animation-fill-mode: forwards;
}


/** Main */
main{
    animation: delay ease 2s;   
    animation-fill-mode: forwards;
    width: 100%;
    max-width: 100%;
}

/** Columns */

 .content-column-right, .content-column-left, .sidebar-column-left, .sidebar-column-right,   .half-column-1, .half-column-2, .third-column-1, .third-column-2, .third-column-3, .fourth-column-1, .fourth-column-2, .fourth-column-3, .fourth-column-4, .three-fourths-column-1, .three-fourths-column-2, .two-thirds-column-1, .two-thirds-column-2, .box, .box2, .column-1, .column-2, .column-3 {
    
    display: inline-block; 
    vertical-align: top;   
    box-sizing: border-box;    
    max-width: 100%;    
} 

.full-column {
   display: block;
   margin: auto;
   box-sizing: border-box;  
   max-width: 100%;
}
.content-column-left, .content-column-right {  
    width: 70%;    
}
.sidebar-column-left, .sidebar-column-right  {   
   width: 30%;
}

.half-column-1, .half-column-2 {       
    width: 50%;     
}

.third-column-1, .third-column-2 {  
    width: 33%;    
}
.third-column-3 {
    width: 34%;
}

.two-thirds-column-1, .two-thirds-column-2 {   
    width: 66%;     
}
.fourth-column-1, .fourth-column-2, .fourth-column-3, .fourth-column-4 {
    width: 25%;
}
.three-fourths-column-1, .three-fourths-column-2 {
    width: 75%;
}
.box {
	border: 1px solid #ddd;
	margin: 20px 0 ;
	padding: 20px;
}

/** Contact Form */

.contact-form {
   box-sizing: border-box;
   max-width: 100%; 
   text-align: left;
   width: 700px;
   margin: auto;
}



/**BUTTONS and Boxes*/

.adminbutton {    
    color: white;      
    margin:   5px auto;
    padding: 5px 7px;       
    font-size: 14px;    
    cursor: pointer;    
    text-decoration: none;     
    background-color: #3e4871;
    display: block;       
    border-radius: 2px;    
    font-style: normal;
    width: 140px;
	text-align: center;
}

a.adminbutton:hover {
   color: #bbb;      
}
a.adminbutton:visited {
    color: white;    
}

.edit-box {
    font-size: 12px;
    border: 1px solid #bbb;
    padding: 2px 0;
    display: block;
    margin: 0;
    width: 30px;
    line-height: 100%;
    text-align: center;
    float: none;
    clear: both;
}
a.edit-box {
    background-color: #3e4871;
    padding: 5px;
    margin: 5px auto;
    color: white;
}
a.return  {
    display: block;
    margin: auto;
    text-align: center;
    font-size: 14px;  
    padding-top: 20px;
}

/** Members */
.comment-box, .reply-box {
    color: black;
    border: 1px solid #bbb;
    box-sizing: border-box;
    max-width: 100%;
    
}
.comment-box h3, .reply-box h3 {
    text-align: right;
    color: #888;
    font-size: 12px;
    margin: 0;
}
.comment-box h5, .reply-box h5 {
   margin: 0;
   

}
.commentbutton {    
    color: black; 
    margin:   5px auto;
    padding: 5px 7px;       
    font-size: 14px;    
    cursor: pointer;    
    text-decoration: none;     
    background-color: #bbb;          
    border-radius: 2px;       
    width: 140px;
	text-align: center;
    display: block;
}
.add-update-member-post .image-small {
    padding: 5px;
}
/**  IMAGES */
img.avatar {
    width: 60px;    
    padding: 0;
    border: 1px solid #888;
    border-radius: 50%;
    vertical-align: middle; 
   display: inline-block;
   
}

figure {
    max-width: 100%; 
  
}
img {
    max-width: 100%;    
    display: block;   
    box-sizing: border-box; 
    object-fit: contain;  
    margin: auto;
}  

.image-center {   
    float: none;
}
.image-right {   
    float: right;   
    margin: 0 0 0 20px;
}
.image-left {    
    float: left;    
    margin: 0 20px 0 0;
}


.image-xsmall {
    width: 100px;
    max-width: 100%;
}
.image-small {
    width: 150px;
    max-width: 100%;
}

.image-medium {
    width: 300px;
    max-width: 100%;
}
.image-large {
    width: 450px;
    max-width: 100%;
   
}
.image-xlarge {
    width: 600px;
    max-width: 100%;
}

.image-full {    
    max-width: 100%;
}

figcaption {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    padding: 15px;
    line-height: 120%;
}

.one-edge-shadow {
  box-shadow: 0 10px 6px -6px black;
  border: 1px solid #bbb;
} 
/** Forms */
label {
	font-size: 16px;
}
input, textarea, select {
    box-sizing: border-box;
    font-size: 14px;
	border: none;	
    padding: 3px 10px;    
    vertical-align: bottom;   
    max-width: 100%;
    background-color: #eee;
    font-family: 'OpenSans', sans-serif;
    border-radius: 0;
	font-size: 14px;
    width: 100%;
}

.open input {
    width: 300px;
}
input.submitbutton {   
    background-color:  #5cbbf7;
    background-color: #3e4871;
    color: white;
    width: auto;
    font-size: 14px;   
    border-radius: 3px;
    max-width: 200px;   
    margin: 10px 0;
}

textarea {       
   margin: 0px auto;  
   line-height: 1.6;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
}

input[type=checkbox], input[type=radio] {
    max-width: 20px;
    padding: 0;
    margin: 3px;   
    vertical-align: middle;
}
input[type=color] {
    width: 15px;
    padding: 0;
    height: 15px;   
}
input.filter {
    width: 60px; 
    padding: 3px 5px;  
    margin: 5px auto;
}
.field {
    z-index:-1;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0 ;
}
input.subject {
    display: none;
}

#filter-id, .submitbutton {
    width: 100px;
   
}
/** Other tags and classes */
blockquote {
    margin: 0 auto;
    padding: 0 20px;
}
.caption {
    text-align: center;
    margin: auto;
    max-width: 400px;    
}

ul , ol {
list-style-position: inside;
}

.error {
    color: red;
    padding: 10px;  
}


.open main {
    text-align: center;
}
.searchterm {
    background-color: pink;
}
.search-results-box {
    position: absolute;
    top: 0%;
    background-color: white;
    padding: 20px;
    text-align: left;
    width: 600px;
   
}
.search-box {
    background-color: white;
    padding: 20px;
    text-align: left;
    margin: auto;
    max-width: 100%;
    width: 300px;
    box-sizing: border-box;
    
}
a.arrow {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
   
}
/**  Dropdowns and Toggles */

.dropdownwrap  {
    width: 100%;    
    position: relative;
    display: inline-block; 
    padding: 0;
    text-align: center;
}

.dropdownbutton1 {
    
    padding: 8px;
    text-align: center; 
    cursor: pointer;
    margin: 10px auto;
    width: 140px;
}

.dropdowncontent {
   position: relative;
   text-align: left;
   padding: 0;  
    max-width: 100%;
}
.dropdowncontent2 {
   position: relative;
   text-align: center;   
   padding: 0;    
}
.toggle-button, .toggle-button-centered {  
    cursor: pointer;
    max-width: 100%;     
    margin: 7px auto;
    text-align: left;
}
.toggle-button-centered {
    text-align: center;
}
.toggle-banner-media {     
    box-sizing: border-box;
    cursor: pointer;
    max-width: 100%;    
    text-align: center;
    margin: 10px auto;   
    color: #888;
    padding: 5px;   
    font-size: 16px;
    border-radius: 2px;  
    background-color: #94c9ba;
    width: 100%;   
}
/** POSTS */

.post-categories {
    text-align: center;
}

.meta {
    margin: auto;
    text-align: center;
}
.meta-line {
    width: 80px;  
    border-top: 4px double #ddd; 
    display: inline-block;
    margin: 0 10px;
 }

.post-title2 {
    display: none;
}

.post-date, .post-author {    
    font-size: 12px;
    text-align: center;
    margin: auto;
    display: inline-block;
    color: #bbb;
}
.prev-comment-box {
   padding: 20px;
   border: 1px solid #ddd;
}


img.featured-image  {
    max-width: 100%;   
    margin: auto;    
    padding-bottom: 40px;
}
.post-categories a {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    margin: auto;
    color: #8d8d8d;
}

.post-content {
    display: block;
    margin: auto;
    max-width: 100%;
     box-sizing: border-box;
    clear: both;
    float: none;
}

.posts-by-year, .posts-by-position {
    margin: auto;
    width: 260px;
    max-width: 100%;
    text-align: left;
}
/** Comments */
 .reply-box, .comment-box {
    padding: 5px 10px;
    box-sizing: border-box;
    background-color: #eee; 
    margin: 0 0 0 30px;
    max-width: 100%;
    text-align: left;  
    font-size: 14px;
   
}     

.reply-box {
    margin-left: 40px;
    background-color: #ddd;
}


/**  STYLES FOR FOOTER */
footer  {
    clear: both;
	float: none;	
    display: block;
    text-align: center;  
    margin: 80px auto; 
    max-width: 100%;
}
footer a.menuitem {
    font-size: 12px;
    margin: 3px 10px;
}
a.logout, .footer-copyright {
    text-decoration: none;
    font-size: 14px;
   
}
a.footer-open-button {
    text-decoration: none;
    font-size: 14px;
    display: none;
}

.lilaavenue-link a{
    font-size: 12px;
    color: #888;
}
a.footer-open-button {    
    display: none;
    color: #eee;
}
a.footer-open-button:hover {
    color: #eee;
}

/** STYLES FOR IMAGE GRIDS */
.categorywrap {   
    text-align: center;  
    display: inline-block;
}
.categorycount {
    visibility: hidden;
}
.categorywrap:hover .categorycount {
    visibility: visible;
}

.postgridcolumn, .linkgridcolumn, .imagegridcolumn { 
    box-sizing: border-box;
    display: inline-block;   
    position: relative;
    vertical-align: top;
    line-height: 140%;
    max-width: 100%;
    position: relative;
}
img.galleryimage {
    padding: 0;  
    max-height: 100%;
    margin: 10px auto;
    }

 .play-button {
    display: none;
 }

/** STYLES FOR SLIDESHOWS */



.slideshowimage {
    box-sizing: border-box;	  
    text-align: center;   
    margin: 0 auto;       
    max-width: 100%;
    display: block;
   
}
.slideshowimage img {
    width: 600px;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
}
.slideshowthumb {
	display: inline-block;
    box-sizing: border-box;	
    margin: 0 5px;
    line-height: 70%;
    border: 3px solid gray;
}
.slideshowthumb img {
    box-sizing: border-box;		
	width: 90px;
    max-width: 100%;
    padding: 0;
}
.slideshow-nav-left1, .slideshow-nav-right1,  .slideshow-nav-left2, .slideshow-nav-right2 {   
    box-sizing: border-box;
    display: inline-block;
    font-size:  24px; 
    color: black;
    padding: 15px 0;
    margin: 0;
    cursor: pointer;       
    vertical-align:top;
    width: 30px;
}
.slideshow-nav-left2, .slideshow-nav-right2 {
	display: none;
}
.slideshow-nav-left1, .slideshow-nav-right1 {
   margin-top: 200px;
}

/** Text align and hidden*/
.centered {
    text-align: center;
    margin: auto;    
}
.right {
    text-align: right;
}
.left {
    text-align: left;    
}
.hidden {
    display: none;
}

/** KEYFRAMES */
@keyframes delay {
   0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/** BREAKPOINTS */


 @media only screen and (max-width: 700px) {  
    
    .blockquote {
        padding: 5px;
        margin: 0 auto;
    }
     .image-left, .image-right {
       display: block;
       margin:  auto;      
       float: none;  
       clear: both;
    }
    
   .content-column-left, .content-column-right,  .sidebar-column-left, .sidebar-column-right {        
        display: block;        
        width: 100%;
        margin:  auto;        
    }  
    .three-fourths-column-1, .three-fourths-column-2, .two-thirds-colulumn-1, .two-thirds-column-2{
        width: 100%;
   } 
    .meta-line {
        width: 40px;         
        margin: 0 5px;
    }
    .slideshowimage {
        width: 80%;
        max-width: 80%;
    }
    .slideshow-nav-left1, .slideshow-nav-right1 {
	    display: none;
        
	}
	.slideshow-nav-left2, .slideshow-nav-right2 {
		display: inline-block;
        margin: 0;         
  } 
   

}

@media only screen and (max-width: 600px) {  
   
    .half-column-1, .half-column-2 {
        width: 100%;
    }
     .fourth-column-1, .fourth-column-2, .fourth-column-3, .fourth-column-4 {
         width: 50%;
     }
		
    .third-column-1, .third-column-2, .third-column-3  {
        width: 100%;
    }
   
}

@media only screen and (max-width: 550px) { 
    
    
    /** JS Menu - copy to style at breakpoint where menu button appears*/
    .menubutton {
        display: block;
        margin: auto;
    }     
    .menucontent  {      
        display: none;           
    }    
    .menuwrap1 {
        display: block; 
        margin: auto;        
    }    
    .menucontent1, .menucontent2 { 
        text-align: left;
        width: 100%;
        position: relative;
    }    
    .menuitem, .menubutton1, .menubutton2 {       
        box-sizing: border-box; 
        margin: 0 auto;
        font-size: 16px;
        border: none;
        display: block;
    }
    .menuitem, .menuwrap1 {  
        padding: 15px 0;        
    }
    .current {
        border: none;        
    }  

    /** Other styles */
    footer a.menuitem {
        padding: 0;
        display: inline-block;
    }    
        
    .content-column-left, .content-column-right, .full-width-column, .sidebar-column-left, .sidebar-column-right {
        margin: 0 auto;
        padding: 0;        
    }    
   .fourth-column-1, .fourth-column-2, .fourth-column-3, .fourth-column-4 {
        width: 100%;
    }     
}

 

@media  only screen and (max-width: 350px) {  
    
    .postgridcolumn {        
        width: 100%;
        margin: 5px auto;
    }
   
    .meta-line {
        width: 20px;         
        margin: 0 5px;
     }
}
@media print {
    .pagebreak {
        page-break-before: always;
      }
  }