@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&family=Playfair+Display:wght@400;500;600&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@300&display=swap');

body {
    /* background:#070e21; */
    /* background:#19183f; */
        background-color: #040814; /* For browsers that do not support gradients */
        background-image: linear-gradient(180deg, #040814, #0e1c42);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #f6f6f6;
    font-weight:300;
    line-height: 1.5;
    margin: 0;
}

.contain {
    width:65%;
    margin:auto;
}

p {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: left;
}

.small {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    font-size:12px;
}



p.bottom {
    margin-bottom:30px;
}

p.intro {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: left;
    font-size:21px;
}

.button {
    margin: auto 20px;
    min-height: 30px;
    font-size:18px;
    font-weight: 700;
    background:#040814;
    color:#d6d6d6;
    border-radius: 5px;
    padding: 10px 25px;
    text-decoration: none;
    border: 1px solid #d6d6d6;
    box-shadow: 0px 2px 5px rgba(233, 233, 233, 0.199);
    transition-duration: 1s; 
}

.button:hover {
    color:#040814;
    background: #d6d6d6;
}

@media screen and (max-width: 700px) {
.button {
    margin: 10px auto;
    display: block;
}


  }



.center {
    text-align: center;
}

.smallButton {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    color:#040814;
    font-size:12px;
    background:#fff;
    padding:5px 6px;
    border:1px solid transparent;
    border-radius:5px;
    text-decoration: none;
}

.smallButton:hover {
    background:#040814;
    border:1px solid #fff;
    color:#fff;
}


strong {
    font-weight:600;
}


a {
    /* color: #666; */
        color: #d6d6d6;
    text-decoration: underline;    
}

a:hover {
    /* color: #666; */
    text-decoration: none;  
}

.stars {
    background:#000 url(media/stars.jpeg);
    background-size: cover;
    width:100%;
    height:600px;
}

header {
    display: flex;
    align-content: space-around;
    background: #00000082;
    /* opacity: 65%; */
    color: #fff;
    padding:30px;
    align-items: center;
}

.inner {
    background: #000;
    opacity: 100%;
}


.topnav {
    width:185%;
    overflow: hidden;
  }
  
.topnav a {
/* float: left; */
display: inline-block;
color: #f2f2f2;
text-align: right;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
  
  .topnav a:hover {
color: #f2f2f2;
text-decoration: underline;
  }
  
  
  .topnav .icon {
display: none;
  }
  
  @media screen and (max-width: 700px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
  float: right;
  display: block;
}


  }
  
  @media screen and (max-width: 700px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

.logoImage {
    background: url(media/ccaclogo.svg) no-repeat center center;
    background-size: contain;
    height:80px;
    width:150px;
    margin-right:20px;

}  

.logo {
    width:75%;
    color:#fff;
    font-size:20px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;

}

.titleHero {
    position: relative;
    top: 20%;
    margin:auto;
    font-size: 58px;
    line-height: 1.25;
    font-weight:400;
    font-family: 'Playfair Display', serif;
    color:white;
    text-align: center;
}

@media (max-width: 650px) {
.titleHero {
     top: 5px;
}
  }

h1 {
    /* color: #666; */
    color: #d6d6d6;
    margin-bottom: 24px;
    font-size: 38px;
    line-height: 1.25;
    font-weight:400;
    font-family: 'Playfair Display', serif;
    text-align: center;
}

h2 {
    /* color: #151515; */
    color: #d6d6d6;
    margin-bottom: 24px;
    font-size: 28px;
    line-height: 1.25;
    font-weight:400;
    font-family: 'Source Sans Pro', serif;
    text-align: center;
}

h3 {
    color: #d6d6d6;
    margin-top:44px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.25;
    font-weight:800;
    font-family: 'Source Sans Pro', serif;
    text-align: left;
}

h3.center {
    text-align: center;
}

h3.dates {
    /* color: #151515; */
    color: #d6d6d6;
    font-size: 22px;
    line-height: 1.25;
    font-weight:600;
    font-family: 'Source Sans Pro', serif;
    text-align: left;
}

.h3small {
    /* color: #151515; */
    color: #d6d6d6;
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.25;
    font-weight:700;
    font-family: 'Source Sans Pro', serif;
    text-align: left;
}

h4 {
    font-size: 18px;
    line-height: 1;
    font-weight:700;
    margin-bottom:-10px;
}

.cta {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    margin-bottom: 40px;
}

.roundButton1, .roundButton2, .roundButton3 {
    background-color: #45a6c4;
    border-radius: 50%;
    border:2px solid #d6d6d6;
    width: 150px;
    height: 150px;
    margin: 0 15px;
    display: inline-block;
    transition-duration: 0.5s;
        text-decoration: none;
}
.roundButton1text, .roundButton2text, .roundButton3text {
    margin-top:36px;
    color: #040814;
    text-align: center;
    font-size: 24px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.roundButton1:hover, .roundButton2:hover, .roundButton3:hover {
    /* background-color: #040814;
    color: #d6d6d6; */
    border:2px solid #45a6c4;
    box-shadow:0px 0px 16px 9px rgba(207, 207, 207, 0.6)
}


@media (max-width: 750px) {
.cta {
flex-direction: column;

}
.roundButton1, .roundButton2, .roundButton3 {
margin:10px auto;

}
  }


.linksTextBlock h2 {
    margin-top:50px;
    margin-bottom: 14px;
    text-align: left;
}

.linksTextBlock p {
    text-align: left;
}

li {
    margin:1em 0;
    line-height: 1.25;
}



hr.short {
    border-top: 1px solid #666;
    width:50px;
    text-align: center;
}

hr.blog {
    border-top: 1px solid #666;
    width:350px;
    text-align: center;
    margin: 30px auto 40px;
}

#textBlock {
    width:55%;
    margin:50px auto;  
    text-align: left;  
}

@media (max-width: 550px) {
    #textBlock {
        width:85%;
        margin:10px auto;  
        text-align: center;  
    }
  }

#textBlockProgramme {
    width:55%;
    margin:50px auto;  
    text-align: left;  
}

#textBlockProgramme p{
    text-align: left;  
}

#textBlockProgramme hr.short {
    margin-top:50px;
    margin-bottom:50px;    

}

.lightBox {
    color:#040814;
    background:#d6d6d6;
    padding:30px;
    border-radius: 30px;
}

.lightBox h2, .lightBox h3 {
    color:#040814;
    margin:10px;
}

.datesLightBox  {
    color:#040814;
}

.specialBox {
    color:#040814;
    background:#d6d6d6;
    padding:30px;
    border-radius: 30px;
    margin-top:50px;
}

.specialBox h2, .specialBox h3 {
    color:#040814;
    margin:10px;
}

.specialBox .dates {
    color:#040814;
}

.spacer {
    margin:150px;
}

.spacerSmall {
    margin:50px;
}

.blueButton {
    margin:20px auto;
    font-size:14px;
    font-weight: 700;
    background:#040814;
    color:#d6d6d6;
    border-radius: 4px;
    min-height: 56px;
    padding: 8px 32px;
    letter-spacing: 0.071em;
    text-decoration: none;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.199);
    transition-duration: 1s; 

}

.blueButton:hover {
    color:#040814;
    background: #d6d6d6;
}


.moreInfo {
    font-size: 12px;
    /* color:#333; */
    color: #d6d6d6;
    text-decoration: none;
}

.moreInfo:hover {
    font-size: 12px;
    text-decoration: underline;
}

.greyBox {
    background-color: #d4d4d4;
}

#textBlockBlog {
    width:55%;
    margin:50px auto;  
    text-align: center;  
}


@media (max-width: 800px) {
    #textBlockBlog {
        width:90%;
        margin:20px auto;  
        text-align: left;  
    }
  }

#textBlockBlog p{
    text-align: left;  
}

.blogFlex {
    display: flex;
    align-content: space-around; 
}

@media (max-width: 800px) {
    .blogFlex {
        display: flex;
        flex-direction: column;
    }
  }


.blogImage {
    width:35%;
    height:150px;
    background-repeat: no-repeat;
       /* box-shadow: 2px 3px #14285a; */
    /* border: 1px solid #666; */
}

@media (max-width: 400px) {
    .blogImage {
        width:85%;
        height:100px;   
    }
  }


.blogText {
    width:65%;
    padding-left:30px;
}

@media (max-width: 800px) {
    .blogText {
        width:95%;
        padding-left:5px;
    }
  }

/* for the blog page only, the posts will use alt tags so are within the html */
.exhib { 
    background-image: url(media/exhib.jpg);
    background-size: contain;
}

.filters { 
    background-image: url(media/filters.jpg);
    background-size: contain;
}

.obsJan { 
    background-image: url(media/obsJan.jpeg);
    background-size: contain;
    width:200px;
}

.deepSkyJan24 { 
    background-image: url(media/gazing.jpeg);
    background-size: contain;
    width:177px;
    height:auto;
}

.miceFeb24 { 
    background-image: url(media/mice24.jpeg);
    background-size: contain;
    width:187px;
    height:auto;
}

.eyepieces { 
    background-image: url(media/eyepieces.jpg);
    background-size: contain;
    width:187px;
    height:auto;
    margin-top:25px;
}

.marchObs { 
    background-image: url(media/marchObs.jpg);
    background-size: contain;
    width:187px;
    height:auto;
    margin-top:25px;
}

.solarImage { 
    background-image: url(media/solarMar25/solarThumb.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width:155px;
    height:155px;
    margin-top:25px;
    border-radius: 50%;
}

.dec25 { 
    background-image: url(media/Dec25/Dec25jwb1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width:155px;
    height:155px;
    margin-top:25px;
    border-radius: 50%;
}

/* blog pages */

a.blogReturn {
    font-size: 13px;
    text-decoration: none ;
    text-align: left;
    padding-left:5px;
}

a.blogReturn:hover {
    text-decoration: underline;
}

#blogPostFlex {
    width:75%;
    display: flex;
    align-content: space-around;
    margin:30px auto;
}

@media (max-width: 1344px) {
    #blogPostFlex {
      flex-direction: column;
      width:90%;
    }
  }

  @media (max-width: 400px) {
    #blogPostFlex {
        width:90%;
    }
  }  

.blogPostImage {
    width:30%;
    margin-top: 30px;
    margin-right:20px;
}

.blogPostText {
    width:65%;
    text-align: left;
    margin-left:30px;
}

.blogPostTextOnly {
    width:65%;
    text-align: left;
    margin:30px auto;
}

.blogPostTextOnly p {
    text-align: left;
}

.blogList {
    font-weight:700;
    /* color:darkslateblue; */
    color: #917ef0;
    font-size:18px;
}

.signed {
    font-family: 'Playpen Sans', sans-serif;
    font-size:18px;
    /* color:blue; */
    color: #a87dee;
}

table {
    width:75%;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    width:max-content;
    padding: 10px;
    }

.solarPhotos {
    display: flex;
    flex-direction: column;
    width:90%;
    margin:auto;
  }  

.solarImages {
    height: 600px;
    width:700px;
    margin:20px auto;
  }

.solar1 {
    background-image: url(media/solarMar25/solar1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}
.solar2 {
    background-image: url(media/solarMar25/solar2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}
.solar3 {
    background-image: url(media/solarMar25/solar3.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}
.solar4 {
    background-image: url(media/solarMar25/solar4.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}
.solar5 {
    background-image: url(media/solarMar25/solar5.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}
.solar6 {
    background-image: url(media/solarMar25/solar6.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}
.solar7 {
    background-image: url(media/solarMar25/solar7.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}

.solar8 {
    background-image: url(media/solarMar25/solar8.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:500px;
}
.solar9 {
    background-image: url(media/solarMar25/solar9.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:500px;
}
.solar10 {
    background-image: url(media/solarMar25/solar10.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:500px;
}
.solar11 {
    background-image: url(media/solarMar25/solar11.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}
.solar12 {
    background-image: url(media/solarMar25/solar12.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:700px;
}



.solar20 {
    background-image: url(media/solarMar25/solar20.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:500px;
}
.solar21 {
    background-image: url(media/solarMar25/solar21.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
    width:500px;
}

.solarTextSmall {
    font: size 12px;
    font-style: italic;
}

.fa-camera {
    margin-right:20px;
}

@media (max-width: 600px) {
    .blogPostImage {
        width:75%;
        margin-top: 5px;
    }
    
    .blogPostText {
        width:95%;
        text-align: left;
        margin-left:5px;
    }
    .deepSky { 
        display:none;
    }  

    .toolTip .toolTiptext {
        top: -5px;
        left: 105%;
      }

  }


.exhibImage {
    background-image: url(media/exhib.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:200px;
}

.obsJanImage {
    background-image: url(media/obsJan.jpeg);
    background-repeat: no-repeat;
    background-size: contain;
    height:200px;
}

.obsMar25Image {
    background-image: url(media/marchObs.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:200px;
}

.obsDec25Image {
    background-image: url(media/Dec25/Dec25jwb1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height:200px;
}

.deepSky { 
    background-image: url(media/gazing.jpeg);
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height:300px
}

.deepSkyblog {
    width:65%;
    margin:30px auto;
}

.deepSkyblog p {
    text-align: left;
}

.deepSkyblog h2 {
    text-align: left;
}


/* toolTip container */
.toolTip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted white;
}

/* toolTip text */
.toolTip .toolTiptext {
  visibility: hidden;
  width: 220px;
  top: 100%;
  left: 50%;
  margin-left: -160px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 25px;
  border-radius: 6px;
 
  /* Position the toolTip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the toolTip text when you mouse over the toolTip container */
.toolTip:hover .toolTiptext {
  visibility: visible;
}

@media (max-width: 600px) {
.toolTip .toolTiptext {
    top: -5px;
    left: 105%;
  }
}

@media (max-width: 600px) {
    .deepSkyblog {
        width:85%;
        margin:10px auto;
    }
  }


/* Rod's sale images */

.sale1, .sale2, .sale3, .sale4, .sale5, .sale6 {
    padding:5px;
    margin:10px;
}

.sale1 { 
    background-image: url(media/sale/sale1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: 500px;
}
.sale2 { 
    background-image: url(media/sale/sale2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: 500px;
}
.sale3 { 
    background-image: url(media/sale/sale3.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: 500px;
}
.sale4 { 
    background-image: url(media/sale/sale4.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: 500px;
}
.sale5 { 
    background-image: url(media/sale/sale5.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: 500px;
}
.sale6 { 
    background-image: url(media/sale/sale6.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: 500px;
}



/* end of Rod's Sale images */

p.subtitle {
    font-weight: 600;
    font-size:18px;
}


.images {
    width:55%;
    margin:30px auto;
    display: block;
}

.janImage1 {
    background-image: url(media/Jan2024/m42Orion_David.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    height:550px;
  /* box-shadow: 2px 3px #14285a; */ 
    /* border: 1px solid #666; */
    width:493px;

}
.janImage2 {
    background-image: url(media/Jan2024/m42Orion2_David.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    height:450px;
       /* box-shadow: 2px 3px #14285a; */
    /* border: 1px solid #666; */
    width:416px;
}
.janImage3 {
    background-image: url(media/Jan2024/image3.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    height:500px;
       /* box-shadow: 2px 3px #14285a; */
    /* border: 1px solid #666; */
    width:407px;

}
.janImage4 {
    background-image: url(media/Jan2024/image4.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    height:413px;
       /* box-shadow: 2px 3px #14285a; */
    /* border: 1px solid #666; */
    width:550px;

}

.dec25Image1 {
    background-image: url(media/Dec25/Dec25jwb1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    height:550px;
  /* box-shadow: 2px 3px #14285a; */ 
    /* border: 1px solid #666; */
    /* width:493px; */

}
.dec25Image2 {
    background-image: url(media/Dec25/Dec25jwb2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    height:450px;
       /* box-shadow: 2px 3px #14285a; */
    /* border: 1px solid #666; */
    /* width:416px; */
}
.dec25Image3 {
    background-image: url(media/Dec25/Dec25jwb3.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    height:450px;
       /* box-shadow: 2px 3px #14285a; */
    /* border: 1px solid #666; */
    /* width:407px; */

}

.creditText {
    font-size:15px;
    margin: 10px 20px 40px

}

.creditText .name {
    font-size:18px;
    margin: 10px 20px 10px;
    font-style: italic;

}



@media (max-width: 750px) {
    .images {
        width:85%;
        margin:30px auto;
        display: block;
    }
}




.programmeButton {
    margin:20px auto;
    font-size:14px;
    font-weight: 700;
    text-transform: uppercase;
    /* background-color: #666; */
    background-color: #a2b6c9;
    color:#040814;
    border-radius: 4px;
    min-height: 56px;
    padding: 8px 32px;
    letter-spacing: 0.071em;
    text-decoration: none;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.199);
    transition-duration: 1s; 
}


.programmeButton:hover {
    /* background-color: #1e1e1e; */
    background-color: #6094c3;
    text-decoration: none;
    color:#040814;
}


#greyBanner {
    background-color: #f6f6f6;
    height:112px;
    border-top: 0.5px solid  #888;  
}


#socialBannerWrap {
    /* background-color: #161616; */
    background-color: #000;
    height:112px;
    border-bottom:1px solid #979797;
    /* margin-top:30px; */
}

.socials {
    margin:auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 115px;
    width:400px;
}

a.socialFB {
    background-image:url(media/fb_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height:50px;
    width: 50px;
    margin-left: 20px;
}

a.socialF {
    background-image:url(media/flickr_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height:50px;
    width: 50px;
}

a.socialW {
    background-image:url(media/whatsapp.png);
    background-size: contain;
    background-repeat: no-repeat;
    height:50px;
    width: 50px;
}

a.socialD {
    background-image:url(media/discord.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height:38px;
    width: 50px;
}

#contactContainer {
    background-color: #f6f6f6;  
    padding:50px; 
}

@media (max-width: 850px) {
#contactContainer {
    background-color: #f6f6f6;  
    padding:20px; 
}

.contact {
    margin:50px auto;
    width: 85%; 
}
  }


iframe {
    margin:30px auto;
    border:1px solid #333;
    text-align: center; 
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.199);
}



#map {
    position: relative; 
    text-align: center;   
}

#map iframe {
    text-align: center;
    margin: 30px auto;
    height: 350px;
    width: 500px;
    left: 0;
    top: 0;
    position: relative; 
}


.nextPageText, .linksTextBlock {
    width:75%;
    display: flex;
    justify-content: space-between;
    margin:auto;
}

.left {
    width:35%;
    padding:20px;
}

.spacer {
    margin-top:100px;
}

.smallSpacer {
    margin-top:50px;
}

.nextImage {
    background-image: url(media/ccaclogo3.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height:280px;
    width:280px;
    margin-top:30px;
    /* border: 1px solid #666; 
     border-radius: 50%; */
    padding: 3px; 
}

/* .nextImage2 {
    background-image: url(media/happyAstronomer.png);
    background-size: contain;
    background-repeat: no-repeat;
    height:280px;
    width:280px;
    margin-top:30px;
    border: 1px solid #666; 
    /* border-radius: 50%; 
    padding: 3px; 
} */

@media (max-width: 815px) {
    .nextImage{
        display:none;
    }
      }


.right {
    width:65%;
    padding:30px;
    margin-bottom:50px;
}

.atomic {
    background-image: url(media/atomic.png);
    background-size: contain;
    background-repeat: no-repeat;
    height:80px; 
}

@media (max-width: 815px) {
    .left {
        width:0%;
        padding:0px;
    }

    .right {
        margin:auto;
        width:85%;
        padding:30px;
        margin-bottom:50px;
    }    
      }

/* .obsFlex {
    width:75%;
    display: flex;
    justify-content: space-between;
    margin:auto;
}

.obsLeft {
    width:35%;
    margin:20px auto;
}
.obsRight {
    width:75%;
    margin:20px auto;
} */

@media (max-width: 1000px) {
    .nextImage2 {
        margin:0px auto;
    }

    .obsP {
        text-align: center;
    }


    .obsFlex {
        width:85%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        margin:auto;
    }

    .obsLeft {
        width:85%;
        padding:0px;
    }

    .obsRight {
        margin:auto;
        width:85%;
        padding:30px;
        margin-bottom:50px;
    }    
      }

.obsFlex h3 {
    margin: 25px 0px 0px;
    font-size: 24px;
}





.linksTextBlock .left {
    width:25%;
    padding:0px;
}

.linksTextBlock .right {
    width:75%;
    padding:20px;
}

.linksDrawing {
    background-image: url(media/drawings.png);
    background-size: contain;
    background-repeat: no-repeat;
    height:200px;
    margin-top:30px;
}

.southRod {
    background-image: url(media/rod.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    height:400px;
    margin-top:30px;
}

@media (max-width: 850px) {
    .linksTextBlock {
        margin:10px auto 0;
        padding:15px;
        width:85%;
        flex-direction: column;
    }

    .linksDrawing {
        display: none;
    }
  }



/* Privacy page */
#textBlockPrivacy {
    margin:50px auto;
    width:75%;
    text-align: left;  
}

.privacyTitle {
    margin-top:30px;
    font-size: 18px;
    font-weight: 700;    
}

.privacyText {
    text-align: left;    
}

.directionsWrap {
    width:100%;
    background:#171d34;
    /* background-color: #14285a; */
    color:#fff;

  }

.directionsText {
    margin:30px auto 0;
    padding:30px;
    text-align: left !important;
    width:65%;
}

.directionsText p {
    text-align: left;
}

@media (max-width: 750px) {
    .directionsText {
        margin:10px auto 0;
        padding:15px;
        width:85%;
    }
  }

/* join page */

/* body.joinPage {

} */

.plips {
position: absolute;
display: block;
top:50%;
box-sizing: border-box;
}

.plip1 {
    background: #6094c3;
    height:120px;
    width:135px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    margin-bottom:20px;
}
.plip2 {
    background: #6094c3;
    height:120px;
    width:135px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    margin-bottom:20px;
}
.plip3 {
    background: #6094c3;
    height:120px;
    width:135px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.plipImage1 {
    background-image: url(media/m51_small.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height:100px;
    width:100px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    top:8px;
    left:20px;
}
.plipImage2 {
    background-image: url(media/rosetta_small.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height:100px;
    width:100px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    top:8px;
    left:20px;
}
.plipImage3 {
    background-image: url(media/scope_small.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height:100px;
    width:100px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    top:8px;
    left:20px;
}

@media (max-width: 615px) {
    .plips {
        display:none;
    }
  }


.join {
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.joinImage {
    background-image: url(media/members.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
    margin:auto;
    height:241px;
    width:446px;
       /* box-shadow: 2px 3px #14285a; */
    /* border: 1px solid #666; */
}

.joinRight {
    width:45%;
}

li {
    text-align: left;
    margin:30px 10px 10px;
    
}

.gocardless {
    background-image: url(media/pay-with-light-lrg-en.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: block; 
    height:50px;
    width:250px;
    margin:auto;
}

.buttonFlex {
display: flex;
justify-self: center;
}

.buttonFlexCol {
    width:45%;
    margin:20px;
}

@media (max-width: 615px) {
    .buttonFlex {
        display: flex;
        justify-self: center;
        flex-direction: column;
        }
        
    .buttonFlexCol {
        width:45%;
    }
  }

/* Bios / committee page */

.committee {
    text-align: center !important;
}

.chairman {
    text-align: center;
    margin-bottom: 20px;
    display: inline-block;
}

.chairImage {
       /* box-shadow: 2px 3px #14285a; */
    border: 1px solid #666;
    border-radius: 50%;
    padding: 3px;
}

.chairman .bioTitle {
    font-size:30px;
}

.chairman .bioImage {
       /* box-shadow: 2px 3px #14285a; */
    border: 1px solid #666;
    padding: 3px; 
}

.chairman .bioName {
    font-size: 28px;
}

.chairman .bioDescription {
    font-size:18px;
}

.bioGrid {
display:grid;
grid-template-columns: 50% 50%;
}



.gridBox1, .gridBox2, .gridBox3, .gridBox4, .gridBox5, .gridBox6 {
padding:20px;
margin:10px;
border:solid 1px #666;
border-radius: 10px;
} 

@media (max-width: 950px) {
    .bioGrid {
        grid-template-columns: 100%;
        margin: auto;
    }

    #committee #textBlock {
        width:90%;
        margin:auto;
    }
    /* .gridBox1, .gridBox2, .gridBox3, .gridBox4, .gridBox5, .gridBox6 {
        margin:auto;
        }  */


  }

.bioImage {
       /* box-shadow: 2px 3px #14285a; */
    border: 1px solid #666;
    border-radius: 50%;
    padding: 3px; 
    text-align: center !important;
}


.bioTitle {
    font-size: 28px;
    text-align: center !important;
}

.bioTitle .smaller {
    font-size: 22px;
}

.bioText {
    font-size: 28px;
}

.bioGridTony {
    text-align: center;
    width:95%;
    margin: auto;
    border:solid 1px #666;
    border-radius: 10px;
    padding:20px;
}


/* .adminButton {
    background: #999;
    color:#fff;
    transition-duration: 1s; 
    padding:10px 5px;
    border-radius: 5px;
}

.adminButton:hover {
    background: #fff;
    color:#999;
} */

#footer {
    /* background-color: #161616; */
    background-color: #000;
    padding:50px;
    color: #999;   
    font-size:14px;
    text-align: center !important;
    font-family: 'Source Sans Pro', sans-serif;
}

.privacyLink {
    color:#fff;
    font-size:14px;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    text-decoration: none;
}

.pipeSpace {
    margin-left:5px;
    margin-right:5px;
}

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* The actual popup */
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }


/* Astro photo SIG */

.fullWidth {
    margin:auto;
    padding:20px;
    border-top:2px solid #fff;
    border-bottom:2px solid #fff;
}
/* .imageTest {
    background: url(media/photoSIG/test1.jpg) no-repeat;
    background-size: contain;
    height:1000px;
    width:auto;
    margin-top:20px;
    }

.imageTest2 {
    background: url(media/photoSIG/test2.png) no-repeat;
    background-size: contain;
    height:1000px;
    width:auto;
    margin-top:20px;
    } */

    form {
        margin-bottom: 20px;
      }
      #thumbnails img {
        width: 150px;
        margin: 10px;
        cursor: pointer;
      }