/*your custom style goes in this file*/
/*if you're overriding style blocks from genstyle.css, you only need to include the attributes you're overriding, not the whole block*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gelasio:wght@400;500;700&display=swap');

h1 {font: 42px 'Gelasio', 'Open Sans', Verdana, Helvetica, sans-serif; color: #274e71; margin: .3em 0 .3em 0; letter-spacing: -1px;} 
h2 {font: 38px 'Gelasio', Arial, Verdana, Helvetica, sans-serif; color: #406993; font-weight:normal; margin: .3em 0; letter-spacing: 1px;}
h3 {font: 30px 'Gelasio', 'Open Sans', Verdana, Helvetica, sans-serif; color: #274e71; padding: 0; letter-spacing: -1px; text-align: left; 	margin-bottom: -2px;}
h4 {font: normal 28px 'Roboto', 'Open Sans', Verdana, Helvetica, sans-serif; color: #406993; margin: .3em 0;}
h5 {font: normal 24px 'Roboto', 'Open Sans', Verdana, Helvetica, sans-serif; color: #6c9fcc; margin: .3em 0; font-variant: small-caps;}
h6 {font: normal 24px 'Roboto', 'Open Sans', Verdana, Helvetica, sans-serif; color: #406993; margin: .3em 0;}

hr.fancy {background: transparent url('../img/hr.png') center center no-repeat; color: #eee;  border: none; height: 30px;}


figure {
    margin: 10px;
    display: table;
    width: 600px;
}

figcaption {
    text-align: center;
    display: table-caption;
    caption-side: bottom;
    margin-top: 1em;
    font: normal 20px 'Roboto', 'Open Sans', Verdana, Helvetica, sans-serif; 
    color: #406993;
}

.brand, .brand a, .brand a:hover  {font: 38px 'Gelasio', Verdana, Helvetica, sans-serif; color: #ffffff; letter-spacing: -1px; text-decoration: none; margin: 0;}
.slogan {font-size: 22px; font-family: 'Gelasio', cursive, Verdana, Helvetica, sans-serif; color: #ffffff; padding-left: 10px; margin: 0 0 30px 0;}
section.module p {font-family: 'Gelasio'; font-size: 20px; color: #ffffff;}
.plainheader {font-family: 'Roboto', Verdana, Helvetica, sans-serif;}
/* .snip * {-webkit-transition: all 0.35s; transition: all 0.35s; -webkit-box-sizing: border-box; box-sizing: border-box;} */
.snip * {
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
  
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
/* .snip2 * {-webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: all 0.45s ease;  transition: all 0.45s ease;} */
/* .snip2 * {
    transition: all 0.45s ease; 
    box-sizing: border-box; 
  } */

  .snip2 {
    position: relative;
    display: inline-block;
  }
  
  .snip2 figcaption {
    position: absolute;
    top: 0;
    left: 0;
    background-color:rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  .snip2:hover figcaption {
    opacity: 1;
  }
   
  
.snip2 h2 {font-size: 26px; margin: 0; font-family: 'Gelasio'; color: #6c9fcc; text-align:center;}
.snip2 p {margin-top: 12px; color: #fff!important; font-family: 'Gelasio', serif!important; font-size: 16px!important;}
.snip h3 {font-size: 44px; font-weight: 400; font-family: 'Open Sans'; color: #fff; line-height: 1; letter-spacing: 1px; text-transform: uppercase; margin: 3px 0;}

@media (max-width: 767px) {
    .snip2 {
      display: flex;
      justify-content: center;
    }
  }

/* styles for home page surname cloud post */
.surnames-cloud, .surnames-cloud a {
  font-family: Verdana, Tahoma, Arial;
  padding: 2px 2px 2px 2px;
  letter-spacing:  0.0em;
  word-spacing:    0.0em;
  text-decoration: none;
  font-weight:     normal;
  text-align:      center;
  font-size:		 14px;
}

a.size1      { font-size: 200%; }
a.size2      { font-size: 190%; }
a.size3      { font-size: 180%; }
a.size4      { font-size: 170%; }
a.size5      { font-size: 160%; }
a.size6      { font-size: 150%; }
a.size7      { font-size: 140%; }
a.size8      { font-size: 130%; }
a.size9      { font-size: 120%; }
a.size0      { font-size: 100%; }

.surnames-cloud a {
-webkit-text-size-adjust: none;
}
  
a.size1      { color: #000099; }
a.size1:link    { color: #000099; }
a.size1:visited { color: #000099; }
  
a.size2      { color: #3333CC; }
a.size2:link    { color: #3333CC; }
a.size2:visited { color: #3333CC; }
  
a.size3      { color: #006633; }
a.size3:link    { color: #006633; }
a.size3:visited { color: #006633; }
  
a.size4      { color: #993300; }
a.size4:link    { color: #993300; }
a.size4:visited { color: #993300; }
  
a.size5      { color: #CC0033; }
a.size5:link    { color: #CC0033; }
a.size5:visited { color: #CC0033; }
  
a.size6      { color: #666666; }
a.size6:link    { color: #666666; }
a.size6:visited { color: #666666; }
  
a.size7      { color: #CC9900; }
a.size7:link    { color: #CC9900; }
a.size7:visited { color: #CC9900; }
  
a.size8      { color: #999933; }
a.size8:link    { color: #999933; }
a.size8:visited { color: #999933; }
  
a.size9      { color: #000000; }
a.size9:link    { color: #000000; }
a.size9:visited { color: #000000; }
  
a.size0      { color: #000000; }
a.size0:link    { color: #000000; }
a.size0:visited { color: #000000; }