/*
===============================================
Ladies Auxiliary - Knights of Columbus of Oceanside, Father Joseph O'Connell Council #3481. All rights reserved.
Site Updated:  April 30th 2018
===============================================
*/

/*
===========================================
*************************   GENERAL FEATURES   *************************
===========================================
*/





/* News & Events section */
.photolinks {
	width: 100%; height: 40px;
	margin: 0; padding: 0;
	font-size: 0.85em;
}
.photolinks span { margin: 0 8px; }

.ne_box { 
	width: 100%;
	padding: 0; margin: 0 0 40px 0;
}
.ne_box div.ne_box_hdr { 
	width: 100%;
	border-bottom: solid 1px #1a4774;
	padding: 0; margin: 0 0 3px 0;
	font-size: 1.1em;
	text-transform: uppercase;
	font-weight: bold;
	color: #37579b;
}
.ne_box div.subtitle { 
	width: 100%;
	font-weight: bold; text-align: center;
	border-bottom: none 0;
}





.officers_box { 
	width: 100%;
	margin: 12px 0 0 0 !important;
}
.officers_box ul { 
	width: 100%;
	list-style: none;
	margin: 0; padding: 0;
}
.officers_box ul li { 
	margin: 0 0 3px 0;
}
.officers_box span { 
	font-weight: bold;
}

@media (min-width:992px){
.officers_box { 
	width: 750px;
	margin: 5px auto 0 auto !important;
}

}



/* Contact Us section */
.lax-address {
	padding-left: 15px;
}
.lax-cont01 {
	width: 80px;
	float: left;
	font-weight: bold;
}





/* Presidents and LofY sections */
.section_01, .section_01a {
	width: 100%; float: none;
	margin: 0; padding: 0;
}
.sect_row {
	width: 100%; height: 15px; 
	margin: 0 0 5px 0; padding: 0;
}
.sect_row_Name, .sect_row_Date {
	float: left; 
	margin: 0; padding: 0;
}
.sect_row_Name { width: 70%; }
.sect_row_Date { width: 30%; }

.namelistings, .namelistings2 {
	width: 100%;
	margin: 0 0 35px 0;
	padding: 0 0 5px 0;
}
.namelistings-l {
	width: 45%;	
	font-weight: bold;
	float: left;	
}
.namelistings-r {
	width: 55%;
	float: right;
}
.namelistings-l .sml, .namelistings-r .sml, .fin  {
	font-size: 0.85em;
}
.fin  {
	width: 80%;
	margin:  0 auto;
}

.namelistings_title {
	width: 100%;
	font-weight: bold;
	border-bottom: solid 1px #454545;
	margin:  0 0 3px 0;
}

.namelistings2 .name_sect01, .namelistings2 .name_sect02, .namelistings2 .name_sect03 {
	width: 80%;
	margin:  0 auto;
	padding: 0;
}
.name_sect02 { display: none; }
.name_sect03 { display: none; }




@media (min-width:768px){
.section_01 {
	width: 320px; float: left;
	margin: 0 0 15px 0;
}
.section_01a {
	width: 500px; float: left;
	margin: 0 0 15px 0; padding: 0;
}
.namelistings {
	width: 350px;
	margin: 0 auto 15px auto;
	padding: 0 0 5px 0;
}

.namelistings2 {
	width: 100%;
	margin: 0 0 25px 0;
	padding: 0 0 5px 0;
}
.namelistings2 .name_sect01, .namelistings2 .name_sect02, .namelistings2 .name_sect03 {
	float: left; 
	margin:  0 auto 3px auto;
}
.namelistings2 .name_sect01 { width: 100%; }
/*.namelistings2 .name_sect01 { width: 180px; }*/
.namelistings2 .name_sect02 { width: 100px; }
.namelistings2 .name_sect03 { width: 220px; }

.fin  {
	width: 100%;
	margin:  0;
}
}



@media (min-width:992px){
.section_01, .section_01a  { width: 450px; }
.section_01a { margin: 0 20px 15px 0; }
.sect_row    { height: 18px; }

.namelistings2 .name_sect03 { width: 140px; }
}



@media (min-width:1200px){
.section_01a  { width: 500px; }
.namelistings2 .name_sect03 { width: 220px; }
}





/* About Us section */
.lax-abt-pic {
	font-family: 'Quicksand';
	font-weight: bold;
	font-size: 1.5em;
	color: #37579b; /* dark blue */
	text-align: center;
}
.lax-abt-pic img {
	margin: 0 0 5px 0;
}
.lax-abt-caption h3 {
	float: left;
	margin-bottom: 20px;
}
.lax-abt-caption h3.base {
	width: 95%; float: none;
	text-align: center;
	margin: 0 auto;
}
.lax-abt-caption .banner-btn-box {
	min-width: 190px;
	float: right;
	text-align: right;
}

.lax-banner-cont2 img {
    width: 100%;
	height: auto;
}
.lax-banner-cont2 figcaption {
    width: 100%;
	font-size: 0.9em;
	font-weight: bold;
	padding: 3px 0 0 0; 
}


@media (min-width:768px){
.lax-abt-pic {
	font-size: 1.35em;
	line-height: 18px;
}
.lax-abt-pic img {
	width: 100%;
}
.lax-abt-caption h2 { font-size: 1.7em; }
.lax-abt-caption h3 { 
	font-size: 1.45em;
}
.lax-abt-caption h3.base {
	width: 90%; 
}


.lax-banner-cont2 img {
    width: auto;
	height: auto;
}
.lax-banner-cont2 .col-md-6 {
	max-width: 100%;
	flex: 0 0 100%;
	margin: 0 auto;
	text-align: center; 
}
}



@media (min-width:1200px){
.lax-abt-pic {
	font-size: 1.5em;
}
.lax-abt-caption h3 { 
	margin-bottom: 0px;
}
.lax-abt-caption h3.base {
	width: 70%; 
}
.lax-abt-caption2 .banner-btn-box {
	min-width: 190px;
	float: right;
	text-align: right;
}
.lax-banner-cont2 .col-md-6 {
	max-width: 50%;
	flex: 0 0 50%;
	margin: 0;
	text-align: left; 
}
}










/* Auxiliary Board section */
.frame_members  {
	width: 140px; height: 225px; 
	float: left;
	margin: 0 6px; padding: 0;
	text-align: center;
	font-size: 1em;
	line-height: 15px;
}
.frame_members img  { margin-bottom: 3px; }
.frame_members div  { font-size: 1em; font-weight: bold; color: #37579b }

.frame_row  {
	height: 230px; 
	margin: 0 auto 15px auto; padding: 0;
	clear: both;
}
.row2mem, .row3mem, .row4mem, .row5mem { width: 90%; }



@media (min-width:768px){
.row2mem  { width: 306px; }
.row3mem  { width: 460px; }
.row4mem  { width: 610px; }
.row5mem  { width: 762px; }
}






/* Annual Events section */
.lax-banner-cont2 ul {
	list-style-image: url(../images/arrowhd_blu.png);
}
.lax-banner-cont2 ul li {
	font-size: 1em;
	margin: 0 0 5px 0;
	text-indent: 0;
	text-align: left;
	line-height: 18px;
}
.lax-banner-cont2 ul li a, .lax-banner-cont2 ul li a:visited { text-decoration: none; }


@media (min-width:768px){
.lax-banner-cont2 ul {
	list-style-image: url(../images/arrowhd_blu.png);
	margin: 0 0 0 50px;
}
.lax-banner-cont2 ul li {
	font-size: 1.05em;
	line-height: 20px;
}
}


@media (min-width:992px){
.lax-banner-cont2 ul li a:hover { text-decoration: underline; }
}





h1.lax-events {
	width: 100%;
	color: #37579b !important;
	font-size: 1.5em;
	text-align: center;
	line-height: 23px;
}
h1.lax-events br {
	display: none;
}
h1.lax-events a, h1.lax-events a:visited { text-decoration: none; color: #37579b; }

.banner-btn-box2 {
	width: 100%;
	text-align: center;
	margin: 30px 0;
}

a.hdr-btn-lrg, a.hdr-btn-lrg:visited {
	display: inline;
	font-size: 1.1em; font-weight: bold;
	color: #fff; text-decoration: none;
	padding: 6px 10px !important;
	line-height: 15px;
	background-color: #3894de;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: solid 2px #37579b;
	white-space: normal;
}


@media (min-width:768px){
h1.lax-events {
	font-size: 2.5em;
	line-height: 35px;
}
h1.lax-events br {
	display: block;
}
h1.lax-events a:hover { text-decoration: underline; }


a.hdr-btn-lrg, a.hdr-btn-lrg:visited {
    transform: translate(-50%,-50%);
	font-size: 2em; 
	padding: 7px 30px !important;
	line-height: 19px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}
}


@media (min-width:992px){
h1.lax-events br { display: none; }
a.hdr-btn-lrg:hover {
	color: #37579b;
	background-color: #ede281;
	border: solid 2px #37579b;
}
}
@media (min-width:1200px){
h1.lax-events br { display: block; }
}







/* Photo Gallery section */
.technology, .technology_nil { /*header of 2nd demo*/
	width: 100%; /*height: 16px;*/
	border-bottom: solid 1px #1a4774;
	padding: 0; margin: 10px 0;
	font-size: 12px; font-weight: bold;
	color: #1a4774; text-align: left;
	cursor: pointer;
}
.technology:link, .technology:active, .technology:visited { color: #1a4774; }

.openlanguage   { color: #1a4774; } /*class added to contents when they are open*/
.closedlanguage { color: #1a4774; }  /*class added to contents when they are closed*/
.thelanguage_nil { /* Non-collapsible photo box */
	width: 100%;
	padding: 0; margin: 0; 
}
.photolinks {
	width: 100%; height: 25px;
	margin: 0; padding: 0;
	font-size: 11px; text-align: right;
}
.photolinks span { margin: 0 8px; }

.photobox01 {
	width: 150px; height: 160px;
	margin: 5px 10px 20px 5px; 
	font-size: 0.9em; font-weight: bold;
	line-height: 15px;
	float: left; text-align: center;
}
.photobox01 img {
	margin-bottom: 5px; 
	width: 100%; height: auto;
}
.photobox01 a:link      { color: #1a4774; text-decoration: none; }
.photobox01 a:visited   { color: #1a4774; text-decoration: none; }
.photobox01 a:hover     { color: #1a4774; text-decoration: underline; }


.photoboxftr {
	width: 100%; height: 50px;
	margin: 5px 0 0 0; 
	font-size: 11px;
	text-align: right;
}


@media (min-width:768px){
.photobox01     { width: 160px; }
.photobox01 img { margin-bottom: 2px; }
}



@media (min-width:992px){
.photobox01 { width: 165px; height: 175px; }
}





/* What it Means section */
.WhatitMeans_MainPic {
	width: 100%; height: auto;
	position: relative;
	margin: 0 0 20px 0;
}
.WhatitMeans_MainPic img {
	width: 100%; height: auto;
}

.WhatitMeans_caption {
	width: 100%;
	position: absolute;
	left: 0; bottom: 0;
	font-family: 'Quicksand'; font-weight: bold;
	background-color: rgba(0, 0, 0, 0.65);
	margin: 0; padding: 4px 0;
}
.WhatitMeans_intro {
	font-size: 1.1em;
	text-align: center;
	text-indent: 0;
	color: #fff;
	line-height: 18px;
}
.WhatitMeans_title {
	width: 75%;
	font-size: 1.2em;
	text-align: center;
	color: #ede282;
	line-height: 15px;
	margin: 0 auto;
}




@media (min-width:768px){
.WhatitMeans_caption {
	padding: 8px 0;
}
.WhatitMeans_intro {
	font-size: 1.75em;
	text-align: left;
	text-indent: 60px;
}
.WhatitMeans_title {
	width: 100%;
	font-size: 2.15em;
	line-height: 45px;
}
}



@media (min-width:992px){
.WhatitMeans_intro {
	font-size: 2em;
	text-indent: 80px;
}
.WhatitMeans_title {
	font-size: 2.85em;
	line-height: 45px;
}
}


@media (min-width:1200px){
.WhatitMeans_MainPic {
	margin: 0 0 60px 0;
}
.WhatitMeans_caption {
	padding: 12px 0;
}
.WhatitMeans_title {
	font-size: 3.2em;
	line-height: 65px;
}
}









/* Our Charities section */
.link { 
	width: 100%;
	padding: 0; margin: 0 0 40px 0;
}
.link-boxes { 
    width: 100%;
	padding: 0; margin: 0;
}

.link-box. .link-box2 { 
    width: 100%; 
	padding: 0; margin: 0 0 30px 0;
}
.link .title, .link-box .title, .link-box2 .title { 
    font-weight: bold; 
	color: #003971; padding-bottom:3px;
}
.link a, .link-box a                 { font-weight: bold; padding-bottom:3px; }
.link a:hover, .link-box a:hover     { text-decoration: none; }


.nobold { font-weight: normal !important; }



@media (min-width:768px){
.link-box, .link-box2 { 
    width: 245px;  
	float: left; margin: 0 0 15px 0;
}
.link-box  { min-height: 160px; }
.link-box2 { min-height: 160px; }

}



@media (min-width:1200px){
.link-box, .link-box2 { 
    width: 280px;  
}


}







/* Benefits section */
.benefits-row, .benefits-row2 { 
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin: 0 0 50px 0;
}
.benefits-row figure, .benefits-row2 figure { 
	float: left;
}
.benefits-row2 figure { 
	margin: 0 0 50px 0;
}
.benefits-row figure img, .benefits-row2 figure img { 
	width: 100%;
	margin: 0 0 4px 0;
}

.benefits-row2 h2 { 
	font-size: 1.4em;
}



@media (min-width:768px){
.benefits-row figure { 
	width: 220px;
	margin: 0 13px 0 0;
}
.benefits-row figcaption { 
	font-size: 0.85em;
	line-height: 13px;
}

.benefits-row2 figure { 
	text-align: center; 
	margin: 0;
}
.benefits-row2 figure img { 
	width: 80%;
	margin: 0 0 5px 0;
}
.benefits-row2 figcaption { 
	width: 80%;
	margin: 0 auto;
	text-align: left;
}
}



@media (min-width:992px){
.benefits-row2 h2 { 
	font-size: 1.75em;
}

.benefits-row figure { 
	width: 300px;
	margin: 0 13px 0 0;
}
.benefits-row figcaption { 
	font-size: 0.85em;
}

.benefits-row2 figure { 
	text-align: center;
}
.benefits-row2 figcaption { 
	width: 80%;
	margin: 0 auto;
	text-align: left;
}
}



@media (min-width:1200px){
.benefits-row figure { 
	width: 360px;
}
.benefits-row figcaption { 
	font-size: 1em;
}

.benefits-row2 figure { 
	width: 100%;
	
}
.benefits-row2 figure img { 
	width: 367px;
	float: left;
	margin: 0 13px 0 0;
}
.benefits-row2 figcaption { 
	width: 150px;
	font-size: 1em;
	line-height: 16px;
	float: left;
}
}
