/* ************************************************** *\
Hello, world! 
If you can read and understand this file, you should 
volunteer for the NTSC web team! 
ntsc.ca/contact-us 
\* ************************************************** */


.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:20px;
	right:20px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
   
}


/* ************************************************** */
/* Start of 2020 template changes */


.camera_thumbs_cont {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1d4ae0;
    height: 15px; /* was not set. 0 will hide BRC  */
    opacity: .8 ; /* added new attribute BRC */
}

.camera_thumbs_cont ul li {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 4px;  /* was 45px BRC  */
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 4px solid #FFFFFF;   /* was 1px BRC  */
}
.camera_commands,.camera_next,.camera_prev {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background: #1d4ae0;
    cursor: pointer
}

.camera_next:hover,.camera_prev:hover {
    background: #1d4ae0;
}

.camera_caption>div {
    padding: 10px 20px;
    color: white;
    font-size: 25px;
    line-height: 1em
}

/* Page elements and tags */
body {
    font: 110%/1.3em Lato, Ubuntu, Helvetica, Arial, sans-serif;
}

h2, .gadgetStyle002 h2  {
    text-transform: uppercase;
    font-size: 200%;
}

h3, .gadgetStyle002 h3 {
    text-transform: uppercase;
    font-size: 150%;
}

.normal, h2.normal {
    font-size: 100%;
}

.big {
    font-size: 150%;
}

.bigger, h2.bigger {
    font-size: 120%;
}

.smaller {
    font-size:80%;
}

.small {
    font-size:50%;
}

ul {margin-left: 1.1em;}

li {margin-bottom: .5em !important;}

.nobullet li {
    list-style: none;
}
.nobullet {
    margin-left: 0 !important;
}

/* ******************** */
/* Theme colours */

.fg1 {
    color: #1D4AE0;
}

.fg2 {
    color: #0070f0;
}

.fg3 {
    color: #8700b5;
}

.fg-accent1 {
    color: #e5361e;
}
.fg-accent2 {
    color: #ff8500;
}

/* new colours below here */
.bg1, .bg-dark {
    background: #1D4AE0;
    color: #fff;
}

.bg2, .bg-med {
    background: #0070f0;
    color: #fff;
}

.bg3, .bg-light {
    background: #8700b5 ;
    color: #fff;
}

.bg4, .bg-heavy {
    background: #d11010 ;
    color: #fff;
}


.bg-red, .bg-accent1, .bg-stop {
    background-color: #e5361e;
    color: #fff;
}
.bg-orange, .bg-accent2, .bg-warn {
    background-color:#ff8500;
    color: #fff;

}

.bg-lightred, .bg-accent3 {
    background-color: #E42217;
    color: #fff;
}


/* override colors as needed */
.gadgetStyleNone,
.bg1 .gadgetStyleNone,
.bg2 .gadgetStyleNone,
.bg3 .gadgetStyleNone, 
.bg4 .gadgetStyleNone, 
.bg1-accent1 .gadgetStyleNone 
 {
    color: inherit;
}
.bg2-accent2 .gadgetStyleNone {
    color:#000;
}

.bg2-accent3 .gadgetStyleNone {
    color:#000;
}



.bg1 h2, 
.bg2 h2, 
.bg3 h2, 
.bg4 h2,
.bg-dark h2, 
.bg-med h2, 
.bg-light h2, 
.bg-heavy h2, 
.bg-accent1 h2, 
.bg-accent2 h2,
.bg-accent3 h2  {
  color:#fff;
}

.bg1 h3, .bg2 h3, .bg3 h3, .bg4 h3, .bg-dark h3, .bg-med h3, .bg-light h3, .bg-heavy h3, .bg-accent1 h3, .bg-accent2 h3, .bg-accent3 h3  {
  color:#fff;
}

.bg1 h4:not(.gadgetTitleH4), 
.bg2 h4:not(.gadgetTitleH4), 
.bg3 h4:not(.gadgetTitleH4), 
.bg4 h4:not(.gadgetTitleH4), 
.bg-dark h4:not(.gadgetTitleH4), 
.bg-med h4:not(.gadgetTitleH4), 
.bg-heavy h4:not(.gadgetTitleH4), 
.bg-light h4:not(.gadgetTitleH4), 
.bg-accent1 h4:not(.gadgetTitleH4), 
.bg-accent2 h4:not(.gadgetTitleH4),
.bg-accent3 h4:not(.gadgetTitleH4)  {
  color:#fff;
}

.bg-accent2  {
}

/* Link colours */
a.buttonStyle003, a:link.buttonStyle003 {
    background: #0070f0 !important;
}

.bg1 a:link:not(.stylizedButton), 
.bg2 a:link:not(.stylizedButton), 
.bg3 a:link:not(.stylizedButton), 
.bg4 a:link:not(.stylizedButton), 
.bg-red a:link:not(.stylizedButton), 
.bg-lightred a:link:not(.stylizedButton), 
.bg-accent1 a:link:not(.stylizedButton), 
.bg-orange a:link:not(.stylizedButton), 
.bg-accent2 a:link:not(.stylizedButton), 
.bg-accent3 a:link:not(.stylizedButton), 
.bg-stop a:link:not(.stylizedButton),
.bg1 a:visited:not(.stylizedButton), 
.bg2 a:visited:not(.stylizedButton), 
.bg3 a:visited:not(.stylizedButton), 
.bg4 a:visited:not(.stylizedButton), 
.bg-red a:visited:not(.stylizedButton), 
.bg-lightred a:visited:not(.stylizedButton), 
.bg-accent1 a:visited:not(.stylizedButton), 
.bg-orange a:visited:not(.stylizedButton), 
.bg-accent2 a:visited:not(.stylizedButton), 
.bg-accent3 a:visited:not(.stylizedButton), 
.bg-stop a:visited:not(.stylizedButton) {
    color:#fff;
    padding: 2px;
}


.bg1 a:link:hover:not(.stylizedButton), 
.bg2 a:link:hover:not(.stylizedButton), 
.bg3 a:link:hover:not(.stylizedButton), 
.bg4 a:link:hover:not(.stylizedButton), 
.bg-red a:link:hover:not(.stylizedButton), 
.bg-lightred a:link:hover:not(.stylizedButton),
.bg-accent1 a:link:hover:not(.stylizedButton), 
.bg-accent3 a:link:hover:not(.stylizedButton),
.bg-stop a:link:hover:not(.stylizedButton) {
    background-color:#ffa11a;
    color:#000;
    border-radius: 2px;
}

.bg-orange a:link:hover:not(.stylizedButton), 
.bg-accent2 a:link:hover:not(.stylizedButton) {
    background-color:#fff;
    color:#000;
    border-radius: 2px;
}

/* ******************** */
/* global classes that get used everywhere */
ul.inline {
    margin: 0;
}

.inline li {
    list-style-type: none;
    display: inline-block;
    white-space: nowrap;
}

.nopad {
    padding: 0;
}

ul.nopad {
    margin:0;
    padding:0;
}

.nopad li {
    margin:0;
    padding:0;
}

.pad {
    padding: 20px;
}

.hpad, .padlr {
    padding: 0 20px;
}

.vpad {
    padding: 20px 0;
}

.padmore {
    padding: 40px;
}

.pad.heading {
padding-bottom: 0;
}

.spacer {
    margin-top: .5em;
}

.reverse {
    color: #fff;
}

.nopad .pill,
.pill {

    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;

}

.nopad .pill {
    background: #fff;
    color: #000;
}

.fa-stack .fa-circle {
color: #ffa11a;
}



/* regions */


/* ******************** */
/* infobar / pre-header */

#infobar {
    padding: 10px;
}

.bg-green {
    background-color: #94c943;
    color: #fff;
}

.bg-green a:hover {
    color: #0070f0 !important;
}

/* ******************** */
/* Header */

/* ******************** */
/* header things */

.WaGadgetLoginForm .loginContainer.loginContainer .loginLink {
    background: #e5361e;
}

.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink {
    color: #e5361e;
}


.mobilePanel ul.secondLevel {
    display: none;
}

.WaGadgetLoginForm .loginContainer.loginContainer .loginLink, 
.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink {
    width: max-content;
    position: absolute;
    line-height: initial;
    padding: 0 10px;
    right: 0;
    max-width: 25em;
}

.WaGadgetLoginForm .loginContainer.loginContainer .loginLink:before {
    position: initial !important;
    margin-right: 10px;
}

/* ******************** */
/* Subheader */

#subhead {
    min-height:350px;
    /* default background, override as needed */
    background-image: url(https://sf.wildapricot.org/ThemeSharedRes/HeaderBackgroundImages/tinted_tiles_partly_cloudy_03.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover !important;
   /* border-bottom: 2px solid #1d4ae0; */
}
#subhead>table {
    background: #ffffffdb;
    background-color:rgba(255, 255, 255, 0.99) /* BRC */
}
#subhead h1 {
line-height: 90%;
    font-size: 290%;
 /* padding-bottom: 20px; */
}

#subhead .WaLayoutTable {
    padding: 20px;
    box-shadow: 0 0 5px 5px #00000045;
}


.subnav .WaGadgetCustomMenu.menuStyle001 ul li a {
      background: transparent; 
}

.subnav  {
margin:0;
}

.subnav li:before {
    content: none !important;
}


.subnav a {
    background: #0070f0;
    padding: 10px;
    color: #fff !important;
    display: inline-block;
    text-decoration: none;
}

/* Fancy ordered lists */
ol.bubble {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol.bubble li {
  counter-increment: my-awesome-counter;
  margin-left: 1em;
}
ol.bubble li::before {
  content: counter(my-awesome-counter) ". ";
  color: #fff;
  font-weight: bold;
      background: #0070f0;
      padding: 5px;
      border-radius: 10px;
      margin-right: 10px;
      display:inline-block;  

}

/* ******************** */
/* Event listings */
.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] a {
    background: #1D4AE0 !important;
} 

.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] span {
    background: #0070f0 !important;
}

.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td>div {
        background: #1D4AE0 !important;

}

.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar .eventDivItem:hover, .WaGadgetEventsStateCalendar .monthViewType .EventListCalendar .eventContainerHover {
    background: #0070f0 !important;}

.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton,.navigationOuterContainer input.nextButton, .navigationOuterContainer input.typeButton, .navigationOuterContainer input[type=submit] {
    background: #0070f0 !important;
}

.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton:hover,.navigationOuterContainer input.nextButton:hover, .navigationOuterContainer input.typeButton:hover, .navigationOuterContainer input[type=submit]:hover {
    background: #1D4AE0 !important;
}


.infoOuterContainer {
    background: #eee;
    color: #000;
}

/* fix a WA bug */
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer ul.registrationInfo li:before {
    content: inherit;
}

/* directory */
/* make the 1998-era javascript presentable */

.genericListTable tr.hover td, .membersTable tr.hover td {
    color: white;
    background-color: #0070f0;
}

tr.hover a {
color: #fff !important;
}


/* ******************** */
/* Footer */

.zonePlace.zoneFooter1 {
  margin-top: 10px;
}
.zonePlace.zoneFooter1, .zonePlace.zoneFooter2, .zoneWAbranding {
    background: #1d4ae0;
    color:#fff !important;
    padding:10px;
}

.zonePlace.zoneFooter1 a:link, 
.zonePlace.zoneFooter2 a:link, 
.zoneWAbranding a:link {
    color:#fff;
}

.zoneWAbranding {
    margin:0;
    margin-top: -3em;
}

#idFooterPoweredByContainer {
height:none;
font-size: 80%;
}

#id_Footer1 {
}

#id_Footer2 {
    padding:0;
}
#id_Footer1>div {
}
#id_Footer1>div .gadgetStyleBody {
}

#id_Footer1>div a {
    color: #4AAEEC;
}
#id_Footer1>div a:hover {
    color: #ffa11a;
}

#id_Footer1>div .fa {
    color: #fff;
}


#footer_tag {color:#fff;}
#footer_tag .fa {
    color: #ffa11a;
}

#footer_tag h2 {
    margin:0;
    padding:0;
}

#footer_tag li {
    margin-right:1em;
}

/* What is this? */

.WaGadgetCustomMenu.menuStyle001 ul li a  {
    font-family: inherit;
    font-size: 100%;
    width: min-content;
    padding: 10px;
}

.WaGadgetCustomMenu.menuStyle001 ul li a:hover  {
    color: #1d4ae0;
    text-decoration: underline;
}


/* ******************** */
/* subheader */





/* ******************** */
/* For the 3-col vert alternating block */
.rel>.placeHolderContainer { position: relative }

.pic-b {
left:0;
right:0;
bottom:0;
margin-bottom: 0;
position: absolute;
}

.hband {
    min-height:20em;
}

/* Full width */
div#idHeaderContentHolder,
div#id_Header1 {
    max-width: none;
}
.zonePlace.zoneHeader1,
.zonePlace.zoneHeader2 {
    padding: 0;
}

.fw,
.fixedwidth,
#subhead table,
.section table,
.WaLayoutContainer table {
    max-width: 1200px;
    margin: 0 auto;
}




/* Go full width */
/*
.WaPlaceHolder {
    max-width: none;
}

.section .WaLayoutTable,
.bg1 .WaLayoutTable,
.bg2 .WaLayoutTable,
.bg3 .WaLayoutTable,
.bg-accent1 .WaLayoutTable,
.bg-accent2 .WaLayoutTable {
    margin: 0 auto;
    max-width: 1200px;
}


*/

/* green/blue/black icons */
    li.beginner:before {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f111";color:#080;margin-right:.5em}
li.intermediate:before {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f0c8"; color:#04c;margin-right:.5em}

li.advanced:before {color: #000; font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f0c8";transform:rotate(45deg);display:inline-block;margin-right:.5em  }
li.expert:before {color: #000; font-weight: 900;content: "\2666\2666";margin-right:.5em;}

li.beginner,
li.intermediate ,
li.advanced ,
li.expert {
    list-style-type:none;
}

.fas.fa-parking {
    color: #080;
}

/* ************************************************** */
/* Libraries */

/* Featherlight */

.fullsize .featherlight-content {
    width: 90%;
    height: 90%;
}

.featherlight-loading .featherlight-content {
    background: transparent !important;
/*    height: 50%;*/
/*        animation: falling 2s;*/
    animation: fade-in-move-down 2s ease-out forwards;
    animation-iteration-count: infinite;
}

.featherlight-loading .featherlight-close {
    display:none;
}
.featherlight-loading .featherlight-content:before {
    content: "\f2dc";
    font: normal normal normal 14px/1 FontAwesome;
    /*animation: fa-spin 2s infinite linear; */
    /*animation: fade-in-move-down 3s ease-out forwards;*/

    animation-iteration-count: infinite;
    color: #ddd;
    font-size:700%;
}

@keyframes falling
{
  from {transform: translateY(0); opacity: 0;}
  to { transform: translateY(400px); opacity: 1;}
}

@keyframes fade-in-move-down {
  0% {
    opacity: 0;
    transform: translateY(-15rem) rotate(90deg) ;
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}


/* ************************************************** */
/* Responsive breakpoints */

@media (max-width: 991px) {
 #logo {
    width: auto;
    height: 160px;
    margin-left: 10px;

}
#tagline {
    width: auto;
    height: 90px;
}

}

/* larger than mobile breakpoint */
@media (min-width: 767px) {
.mobileonly {
    display:none;
}


.col2 {
    columns:2;
}

.col3 {
    columns:3;
}

.col4 {
    columns:4;
}

}

@media (max-width: 767px) {
/* WA uses the mobile panel and stacks columns here and smaller */
#logo {
    width: auto;
    height: 120px;
    margin-left: 10px;

}

#tagline {
    width: auto;
    height: 60px;
}

#subhead h1 {
    font-size: 290%;
}


.pic-b {
position: relative;
}

}



/* even smaller. Phones */
@media screen and (max-width: 479px) {
#logo {
    width: auto;
    height: 70px;
    margin-left: 10px;
}

#tagline {
    width: auto;
    height: 45px;
}

#subhead h1 {
    font-size: 290%;
}
}

.waPaymentSystemIcon.Amex { 
display: none; 
}

.waPaymentSystemIcon.Discover { 
display: none; 
}


/* ************************************************** */
/* disabled */

/*
.lead {
    color:#fff;
    padding: 10px;
    background: #315bb8;
    font-size: 120%;
    padding: 20px;

}

.lead b, .lead strong {
    color: #ffa11a;
}*/

/* ************************************************** */
/*Wild Apricot legacy styles for compatibility with version 5.0. End. */

/* Nicely styled tables - Mark, Nov 2016 */
/*.styled th {
background-color:#AEE6FF;
padding-bottom:2px;
padding-top:2px;
border-bottom: 1px solid #53729b;

}

.styled td {
border-bottom: 1px solid #ccc;
padding-bottom:2px;
padding-top:2px
}

.styled tbody tr:nth-child(odd) {
   background-color: #f6f6f6;
}
*/
/* end */


/*
 .hidden, .typeButton {display: block!important;} 

.button {   visibility :visible;}

#idEventsTitleMainContainer > div.pageTitleContainer.eventsTitleContainer > h1,#idIdentifyUserContainer > div.titleContainer > h1 > a, #idRegistrationFormContainer > div.titleContainer > h1 > a, #idEventRegistrationConfirmationContainer > div.titleContainer > h1 > a {
font-weight: normal!important; 
text-transform: uppercase!important;
font-family: 'Michroma', sans-serif!important; 
color: rgb(212, 62, 120)!important;
font-size: 1.4em!important; 
white-space: normal!important;
background: #fff!important;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0)!important; }
*/

/*
p.social { vertical-align: bottom!important; padding: 0 0 0 2em ; }
*/
/* Calendar view, set background colour so that text is readable */
/*.WaGadgetEvents.WaGadgetEventsStateCalendar #idEventListCalendar .EventListCalendar td > div {

    background: rgb(207, 22, 84);
}*/



/* Login Color correction on click */
/*
.loginForm a:visited {
color: rgb(0, 204, 255)!important;
}

#footer {
    background: #b0b0b0;
    clear: both;
    padding: 1em 0;
}

#footer .container {
margin: 0 auto;
}
*/


/* ************************************************** */
/* end transmission */
/* ************************************************** */