<style type="text/css">

* {
   font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
    /*line-height: inherit;*/
    text-align: inherit;
    color: inherit;
    text-decoration: none;
    list-style: none; /**/
    list-style: bullet ;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box; 

   -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

}



* {
  margin:0;
}
/*for testing */

/* 
* {
    border:1px solid red;
}  */

 body {
  text-rendering: optimizeLegibility;

  font-family: DunbarTextRegular;

   color:#000;
  
background-color: rgb(111,204,221);
background-color: #fff;




}

.footer {
  margin-top:2rem;
  margin-bottom:4rem;
}

.footer .C-icon {
  font-size:2rem;
  margin-bottom:1rem;
}

.footer .C-icon a{
  text-decoration: none;
}

html,body{height:100%;}
.content {padding: 0%;}
.content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto; 
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;


}

.anchor:before {
  content:"";
  display:block;
  width: 0;

  height:1rem; /* fixed header height*/
  margin:-1rem 0 0; /* negative fixed header height */

/*old*/
}


:target:before {
  content:"";
  display:block;
  width: 0;

/*   height:4rem; fixed header height*/
 /*  margin:-4rem 0 0; negative fixed header height */

  height:4em; /* fixed header height*/
  margin:-4em 0 0; /* negative fixed header height */



}



.content .hero > img{
 /*   max-height:50%;
    max-width:50%; */
max-width:20em;
 
   display:block;
    margin:auto;
    
}


a {
   text-decoration:none;
   color:inherit;
/*  color:#808285; 
  text-decoration:none;
  
  border-bottom:4px solid #808285; 

  border-bottom:4px solid #000; */


}

#nav a:hover{
  text-decoration: none;

}

a:hover {
text-decoration: underline;
}

#nav a, .intro a  {
  border-bottom:0; 
  color:inherit;
}

#nav a:hover, .intro a:hover  {
 /* border-bottom:0; 
  color:inherit; */


}



#nav a {
    font-family: DunbarTextMedium;

}

#nav .C-icon a  {
    font-family: CIcon;

font-size:2rem;
color:blue;
}



a:hover, a:active {
/*
  color:#20e3e3;    
  border-bottom:4px dashed #20e3e3; */

}





::selection {

  background: rgba(23,227,227,.3); color: #000; text-shadow: none; /* Safari */

  }
  

::-moz-selection, {
    background: rgba(0,204,246,.3); color: #000; text-shadow: none;  /* Firefox */
  }



/* styles for header */
#header-wrap {
    position: fixed;
    _position:absolute;
    top:0;
     _top:expression(eval(document.body.scrollTop));

    z-index: 100;  /**/

height:2rem;

    top: 0;
    width: 100%;
    padding-top:0;
    padding-left:0;
   height:auto;


    }
 

#header-wrap, #header{

      /* background-color:#fff; leave blank for clear*/
}



#wrap { 

     max-width: 1280px;
    max-width: 800px;
     margin: 0 auto;
     margin-top:2rem;
    padding-left:15px;
    padding-right:15px;

 
}





#header{
    max-width: 1280px;
     margin: 0 auto;
     padding-top:.5rem;
     padding-bottom:.5rem;
     padding-left:.5rem;

}

ul#nav {
    padding-left:.2em;


margin: 0 auto;
text-align:center; 
    
}

ul#nav  > li {
    display: inline-block;
    /*background-color:blue;
    background-color:#fff;*/
}


#nav li {
    font-size: 1rem;
    line-height: 1.2em;/**/
   /* padding-right:10px; 
    padding-right:.5em;*/
    padding-right:.25em;
}

/*
.banner img{
  display:inline;
  max-width:.75rem;
} */
/*
.nav ul li.icon {
background-image: url("images/C_icon.svg");
width: 100px;
}*/

.banner {
 /* font-size:5.0rem; */
font-size:4.0rem;

  line-height: 1.0;
  font-family:DunbarLowBold;
}


.icon img {
    height: 1rem;
   /* width: 1rem;*/
   /* padding-left: -0.2rem;
    padding-right: 0.8rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem; */
   /* background-image: url("images/C_icon.svg"); */
/*background-color:blue;*/
margin-bottom:-.125rem;
}

.nav ul li {
  display: inline-block !important; 
}


.intro p + .intro p {
  margin-bottom:1em;
  margin-top:50rem;

}

.intro {
  
  text-align: center;
  margin:0 auto;
  margin-bottom:2rem;
 
}

.h1 {
   font-size:3.2rem;
     line-height: 1.2em; 

}

.intro .h1 {
    line-height: 1.1em; 


   max-width:12em;
   max-width:10em;
    /*padding:0 1em;*/


     margin:0 auto;
     margin-bottom:1rem;
     font-family:DunbarTallRegular;
}

.intro .h2 {
  font-size:1.2rem;
  line-height: 1.3em;
   max-width:20rem;

    padding:0 1em;
     margin:0 auto;
    margin-bottom:2rem;
}

.boxes h2 {
margin-bottom:.5em;
}

.content {
  margin-bottom:10rem;
}


.intro a {

  border-bottom:0;
  
/*
border-bottom: .1em solid rgba(0,0,0,0);


  -webkit-transition: border-color 1s linear;
     -moz-transition: border-color 1s linear; 
       -o-transition: border-color 1s linear; 
          transition: border-color 1s linear;

          */
}

.intro a:hover{
/*border-bottom: .1em solid rgba(0,0,0,1); */
color:inherit; /* */


  border-color: rgba(0,0,0,1);

text-decoration: underline;




}

.package {
   /* max-width:300px; */
  border:1px solid #000;
 /* padding:1rem ; */
  margin-top:3rem;

padding:.4rem .4rem;

    padding-bottom:1rem;

    padding-top:1rem;

}

.package figure, .package figcaption {
  margin:0 1rem;

}

.package .button {
/*margin:.4rem .4rem;*/
text-align:center;
margin:0 auto;

margin-bottom:.5rem;



}

.order .specimen{
  /*max-width:300px;*/

  max-width:20rem;

   max-width:30rem;

     max-width:40rem;
  
  padding:1rem ;
  padding-left:0;

}
.order .specimen .button {
  margin-left:.5rem;

}

.order .specimen figure, .order .specimen figcaption{ 
margin-left:1rem;
}

.caption {
    font-family:DunbarTextRegular, AdobeBlank;
/*    font-size:.8em;
    line-height:1.6em; */

    font-size:1rem;
    line-height:1.8em;
}

.contact-info {
  margin-top:1rem;
}

.copyright-info {
    margin-top:4rem;
    font-size:.8rem;
    letter-spacing: 1px;
    /*font-size:1rem; */
}

.distributorIcon {
  height:2rem;
  display:inline-block;
vertical-align: top;

}
.distributorIcon img {
/*  float:left; */
  padding:0;
  margin:0;

}

.licensingOptionsImage {
display:inline-block;
vertical-align: top;

}

.licensingOptionsText {
display:inline-block;
  font-size:.8rem;
  line-height: 1.4em;

  padding-top:0rem;
  padding-left:.1rem;
  margin-top:-.2rem;
}

.individualStyles {
  border:1px solid #000;
    margin-top:3rem;

    margin-bottom:1rem;
}

.typefaceContainer {
      margin-bottom:6rem;
}


.specimen figure {
  margin-bottom:.5rem;
  margin-left:0;
    margin-right:0;

  /*margin-bottom:-.1em; */
  margin-bottom:0;
  margin-top:0;
  margin-top:-.1em;

line-height:1em;

}

.paragraphView{
  /*heigh and width needs to be set to maximum glyph size, can't figure out how to make it flexible yet*/
  
    height: 200px;
  width:300px;
  
  margin-right:10px;
  margin-bottom:10px;
  
  /*padding-right:40px;*/
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0;
  /*background-color : #d1d1d1; */
  

}

figure.paragraphView {
resize: none;
overflow:hidden;



}

.specimen figure.paragraphView  {
  margin-bottom:.25rem;
}


.paragraphView {
   overflow: hidden;
   text-overflow: hidden;
   display: -webkit-box;
   line-height: 1.3em;     /* fallback */
   max-height: 7.6em;      /* fallback */
  max-height: 7.7em; 

 /*  -webkit-line-clamp: 6; /* number of lines to show */
 /*  -webkit-box-orient: vertical; */
}

.specimen figure.paragraphView {
   line-height: 1.3em; 

      line-height: 1.3rem; 
}


.specimen .DunbarText figure {
  margin-bottom:.5rem;
  margin-left:0;
    margin-right:0;

  margin-bottom:.5rem;
  margin-top:0;

}

.specimen .DunbarText {
max-width:50ch;
}

figcaption {
  line-height:1em;
}

.option{
  padding-left:.5rem;
  padding-right:.5rem;
}

.specimen figcaption {

  font-family:DunbarTextMedium;
  font-size:.7rem;
   font-size:.8rem;
/*
    margin-bottom:.8em; */

    z-index: 1;
    position:relative;

    /* display: inline; */
    color:blue;
      color:#000;
    background-color: #74FAD4; /*00fff*/
    background-color: rgba(116, 250, 212, .8);

    box-shadow: .2em 0em 0 #74FAD4, -.1em 0 0 #74FAD4 ;

    box-shadow: .2em 0em 0 rgba(116, 250, 212, .8), -.1em 0 0 rgba(116, 250, 212, .5) ;

    padding: 0em 0em;
    box-decoration-break: clone;


display:table;
margin-top:0;
margin-bottom:2rem;
padding-bottom:.1em;/**/
line-height:1.2em;
}



.series {
  margin-bottom:6rem;
  margin-top:4rem;
}

figcaption.selected-styles {
  margin-top:.5rem;
}

.series .label, .packages .label,  .label {
  font-size:.7rem;
   font-size:.8rem;
   /*text-transform: capitalize; */

    z-index: 1;
    position:relative;

    background-color: rgba(116, 250, 212, .8);

    box-shadow: .2em 0em 0 rgba(116, 250, 212, .8), -.1em 0 0 rgba(116, 250, 212, .5) ;

    padding: 0em 0em;
    box-decoration-break: clone;



margin-top:0;
margin-bottom:2rem;
padding-bottom:.1em;/**/
line-height:1.2em;


}

.series figcaption {

  text-align: center;
margin-top:0;
}

/*resets family package to white*/
figcaption.familyPackage  {
    background-color: rgba(255, 255, 255, .8);

    box-shadow: .2em 0em 0 rgba(255, 255, 255, .8), -.1em 0 0 rgba(255, 255, 255, .5) ;

    padding: 0em 0em;
    box-decoration-break: clone;
}

.special {
  color: rgba(116, 250, 212, .8);
color:#000;
  color:blue;
  margin-top:.5em;
  
}

.specimen figcaption a, .series .label, .packages .label {
  color:#000;
}



.specimen figcaption, .series figcaption {
  margin-bottom:1rem;
}

figure.familyLabel   {
  margin-top:1em;
}



figure {
  line-height: 1.2em;
}

.DunbarText > figcaption {
  margin-bottom:2rem;
}

.specimen .h1 {
  margin-bottom:.1em;
}


section:focus, figure:focus {
  outline:0;
}

.specimen a{
  border-bottom:0;
  text-decoration: none;
}

.series a, .special, .packages a {
   font-family:DunbarTextMedium;

}

.special a {
  text-decoration: underline;
}

.packages .special a:hover {
  text-decoration: underline;
}

.specimen a:hover, .series a:hover, .packages a:hover{
font-family:DunbarTextBold;
cursor: pointer;
text-decoration: none;
}

/*
 .blink {
    animation: blink 1s steps(5, start) infinite;
    -webkit-animation: blink 1s steps(5, start) infinite;
  }

  @keyframes blink {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink {
    to {
      visibility: hidden;
    }
  } */

.card {
  text-align:left;


  margin-left: 5px;
  margin-right: 3px;
  margin-top:10px;
  
  margin-top:40px;
  
  font-size:23px;
  line-height:1.3em;
  max-width:400px;
  
}

.small {
  font-size:16px;
}
      
.center {
  margin-left: auto;
    margin-right: auto;
  text-align:center;
}     

.underline  {
  /* text-decoration: underline; 
text-decoration-color: #A7A9AC;*/


 /* border-bottom:2px solid #000; */
}


.signup {
  margin-top:2em;
}

input#tlemail  {
  border:1px solid;
  font-size:.9rem;
  margin-right:1em;
}

input, textarea {
 outline: none;
}

.signup input[type=submit] {
background-color: inherit;
margin-top:1em;
}


.content {  
    height: 100%;
    padding: 0px;
    margin-top:4em;
}



.special {
 
  font-size:.7rem;
  font-size:.8rem;
  line-height: 1.2em;
  display:inline-block;
 /* padding-top:1rem; */
}

.label {
   margin-right:1rem;
     /* text-transform: capitalize; */

  /* margin-bottom:1rem; */
}

img {
  /*outline: 1px solid rgb(111,204,221);
  outline-offset: -1px;*/
}

/*for testing, puts red line around all elements*/






.breakpoint_indicator::before { /* BREAKPOINT INDICATOR */
    content: 'XXS';
}
.breakpoint_indicator { /* BREAKPOINT INDICATOR */
    display: inline-block;
    font-family: Verdana , AdobeBlank;
    font-size: 9px;
    position: fixed;
    top: 0;
    left: 0;
    padding: .5em;
    margin: 0;
    color: rgba(0,0,0, 0.5);
    z-index: 9999999999;

 display:none;  /*  */

}


button:focus {
  display:none;
}




.button {
  display: flex;
  overflow: hidden;

  margin: 10px;
  margin:0px;
  padding: 12px 12px;

  cursor: pointer;
  user-select: none;
  transition: all 60ms ease-in-out;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: none;
  text-transform: capitalize;

  color: blue;
  color:#000;
  background-color:#fff;
  border: 4px solid #000;
  border-radius: 4px;

 

  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
 
  justify-content: center;
  align-items: center;
  flex: 0 0 160px;

 
}

.button{
  margin-left:0;
  margin-right:0;
}

.button.-regular {
  color: #fff;
  background-color: blue;
  
}

.button {
    font-family:DunbarTextBold;
    font-size:1.3rem;
    line-height:1.2em;

   /* padding:2px;
    height:;
    border:2px solid #fff; */
    max-width:30em;
}

.full-width-image {
  max-width: 100%;
}



/*licensing options */

.boxes {
/* display:none; */
 display:block;
margin:0 1em 0 1em;

}

/*only display on product page
.store-page-product .boxes {
  display:block
} */


.boxes li {
  font-size:.8rem; /*use this to resize everything since big styles use 2em */
}



.box {
     font-family: DunbarTextMedium;
font-size:.8rem;
/* margin-left:1rem; */
}

.box li.licenseSize, .box li.web {
 /* margin-right:5rem;*/
 min-width:24%;
 min-width:12em;
  min-width:10em;

 padding-right:1.0rem;
 /*min-width:20%; */
}



.big  {
   font-size:3rem;
    font-size:2em;
   font-family: DunbarTextBold;
padding-bottom:0;
line-height:1.2em;

}

.box li {
  display:inline-block;
min-width:6em;
 /* margin-right:2rem;*/
  padding-right:2.3rem;
  padding-bottom:.5rem;


  line-height:1em;
}




.box li:last-of-type {
  margin-right:.5rem;

}

ul.box  {
  margin-bottom:1rem;
}

.box {
  padding:.8rem;
padding-right:0rem;

/*  border:8px solid blue; */
  border:6px solid blue;

  color: blue;
}





/*media queries start */

@media screen and (min-width: 640px) {
  .card {
    max-width:600px;
    margin-left: 30px;
    margin-top:50px;
  
    font-size:36px;
    line-height:1.2em;
  }


}



/* Media Queries Start */


@media (min-width: 20em) {
    .breakpoint_indicator::before {content: 'XS';}
}
@media (min-width: 30em) {
    .breakpoint_indicator::before {content: 'S';}

}

@media (min-width: 48em) {
 .breakpoint_indicator::before {content: 'M';}
 
.intro .h1 {
  font-size:4.4rem;
  line-height: 1.1em;

   max-width:13em;

 }

.intro .h2 {
  font-size:2.2rem;
  font-size:2.0rem;
  font-size:1.6rem;
  line-height: 1.3em;
   max-width:20em;
}


  .card {
    max-width:600px;
    margin-left: 30px;
    margin-top:50px;
  
    font-size:36px;
    line-height:1.2em;
  }

.order .specimen{

     max-width:40rem;

padding-left:2.5rem; 
padding-top:1.5rem;

}

.package {

/*
padding-left:2.5rem; 
padding-right:2.5rem; 
padding-top:1.5rem;

padding-bottom:1.5rem; */

padding:1.5rem 2.5rem 2.5rem 2.5rem;

}



}


@media (min-width: 66em) {
.breakpoint_indicator::before {content: 'L';}

}

@media (min-width: 80em) {
    .breakpoint_indicator::before {content: 'XL';}
}


@media (min-width: 96em) {
    .breakpoint_indicator::before {content: 'XXL';}
    /*body {zoom: 115%} */



}
@media (min-width: 125em) {
    .breakpoint_indicator::before {content: 'XXXL';}
 /*body {zoom: 150%} */

  }



/* Media Queries end */



</style>