/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* 21Things Website    */
/* Start your style declarations here    */
/*****************************************/

.hhs-top-bar.hhs-alt-nav {
    background: #ebe0ce !important;
}

.zig-zag-line {
  --a: 90deg; /* control the angle */
  --s: 13px; /* size of the zig-zag */
  --b: 2px;  /* control the thickness */
  
  background: #cca76e;
  height: calc(var(--b) + var(--s)/(2*tan(var(--a)/2)));
  width: 100%;
  --_g:var(--s) repeat-x conic-gradient(from calc(var(--a)/-2) at bottom,
    #0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a));
  mask: 50% calc(-1*var(--b))/var(--_g) exclude,50%/var(--_g);
}
.zig-zag-line-red {
  --a: 90deg; /* control the angle */
  --s: 13px; /* size of the zig-zag */
  --b: 4px;  /* control the thickness */
  
  background: #c2251d;
  height: calc(var(--b) + var(--s)/(2*tan(var(--a)/2)));
  width: 100%;
  --_g:var(--s) repeat-x conic-gradient(from calc(var(--a)/-2) at bottom,
    #0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a));
  mask: 50% calc(-1*var(--b))/var(--_g) exclude,50%/var(--_g);
}

.multiline {
	margin: 20px 0;
	padding: 0;
	height: 20px;
	border: none;
	color: #333;
	background-image: linear-gradient(currentColor, currentColor 33.33%, transparent 33.33%, transparent 100%);
	background-size: 100% 3px;
}
.vertical-lines {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	color: #a8927b;
	background-image: linear-gradient(90deg, #a8927b, #a8927b 33.33%, transparent 33.33%, transparent 100%);
	background-size: 4px 100%;
}
/* HTML: <div class="wavy-line"></div> */
.wavy-line {
    --s: 6px;
    --b: 2px;
    --m: 1.0;
    background: #a3815b;
    --R: calc(var(--s)* sqrt(var(--m)* var(--m) + 1) + var(--b) / 2);
    height: calc(var(--R)* 2);
    width: 100%;
    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    mask: radial-gradient(var(--R) at left 50% bottom calc(var(--m)* -1* var(--s)), var(--_g)) calc(50% - var(--s)* 2) calc(50% - var(--s) / 2 - var(--b) / 2) / calc(var(--s)* 4) calc(var(--s) + var(--b)) repeat-x, radial-gradient(var(--R) at left 50% top calc(var(--m)* -1* var(--s)), var(--_g)) 50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(var(--s)* 4) calc(var(--s) + var(--b)) repeat-x;
}
.wavy-line-red {
    --s: 6px;
    --b: 2px;
    --m: 1.0;
    background: #c2251d;
    --R: calc(var(--s)* sqrt(var(--m)* var(--m) + 1) + var(--b) / 2);
    height: calc(var(--R)* 2);
    width: 100%;
    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    mask: radial-gradient(var(--R) at left 50% bottom calc(var(--m)* -1* var(--s)), var(--_g)) calc(50% - var(--s)* 2) calc(50% - var(--s) / 2 - var(--b) / 2) / calc(var(--s)* 4) calc(var(--s) + var(--b)) repeat-x, radial-gradient(var(--R) at left 50% top calc(var(--m)* -1* var(--s)), var(--_g)) 50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(var(--s)* 4) calc(var(--s) + var(--b)) repeat-x;
}
.deep-zig-zag-line {
    --a: 50deg;
    --s: 14px;
    --b: 3px;
    --_g: var(--s) repeat-x conic-gradient(from calc(var(--a) / -2) at bottom, #0000, #000 1deg calc(var(--a) - 1deg), #0000 var(--a));
    background: #cca76e;
    height: calc(var(--b) + var(--s) /(2* tan(var(--a) / 2)));
    mask: 50% calc(var(--b)* -1) / var(--_g) exclude, 50% / var(--_g);
    width: 100%;
}
}
.vertical {
            border-left: 5px solid black;
            height: 200px;
        }

h2.smaller {
    font-size: 40px;
}
@media (max-width: 992px) {
  h2.smaller {
    font-size: 30px;
  } }

h2.smallere {
    font-size: 32px;
}
@media (max-width: 992px) {
  h2.smaller {
    font-size: 25px;
  } }

h2.smallerer {
    font-size: 30px;
}
@media (max-width: 992px) {
  h2.smallerer {
    font-size: 25px;
  } }

p.montserrat {
  font-family: Montserrat, Helvetica, sans-serif;
 font-weight: 900;
  text-transform: uppercase;
}
p.signature {
  line-height: 1.0em;
}
.roboto-con {
   text-transform: uppercase;
   font-size: 16px;
  font-weight: 900 !important;
    font-family: Roboto Condensed;
}
  
.subh6 {
  font-family: georgia, palatino;
  font-size: 14px;
  
  font-style: italic;
}
img.shadow {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
}
h6 { padding-top:20px; }

/* Events */

div.event-calendar-custom-css-button {
    background-color: #c2251d;
    color: rgb(255, 255, 255);
    font-family: Montserrat, sans-serif;
    font-style: normal;
    font-weight: 800;
    text-decoration: none;
    font-size: 16px;
}
.event-calendar-event-button {
    background-color: #c2251d;
    border: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    color: #fff;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 15px 25px;
    text-transform: uppercase;
}
.event-calendar-event-cta a {
    display: inline-block;
    font-family: inter;
    font-size: 16px !important;
    padding: 15px 30px;
    transition: .2s;
  color: #fff;
}

.event-calendar-event-cta a:hov {
    background-color: #c2251d;
    color: #fff !important;
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.event-calendar-event-type {
    text-transform: uppercase;
}