/* Weights - 400/700 */
html {
   font-family: var(--body-font);
   color: var(--main-text-color);
   line-height: 1.5; 
   font-weight: 400;
   font-style: normal;
   font-size: 16px;  }

/* Global Links
---------------------------------- */

a {
	color: var(--link-color);
	text-decoration: none; 
  }
  
a:focus, 
a:hover {
	color: var(--link-hover-color);
	outline: none;
	text-decoration: none; }

a:active {
   color: var(--link-active-color); }
   
.button {
   padding: .6em 1em .5em;
   font-family:  var(--body-font);
   font-size: 100%;
   font-weight: 700;
   line-height: 1;
   color: white; 
   background: var(--link-color);
   display: inline-block;
   text-transform: uppercase;
   letter-spacing: 0px;
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
   -webkit-transition: all .35s ease-in-out;
   -moz-transition:    all .35s ease-in-out;
   -o-transition:      all .35s ease-in-out;
   -ms-transition:     all .35s ease-in-out;
   transition:         all .35s ease-in-out; }
   
   .button:focus, .button:hover, .button:active { color: white; }
   .button:hover, .button:focus { background: var(--link-hover-color); }
   .button:active { background: var(--link-active-color); }

   
   
/* Firefox Seleted Text
------------------------------------ */

*::-moz-selection,
*::selection {
    background: #242f55;
    color: #fcd314; }


/* Headings - 400/700
------------------------------------ */

h1, h2, h3, h4 { 
  font-weight: 600; 
  color: var(--main-title-color);
  }
  
h2 { 
  }

h1 {
  font-size: 200%;
  margin-bottom: .5em;
  line-height: 1;
  font-family:  var(--headline-font);
  }

@media only screen and (min-width: 360px)  { h1 { font-size: 200%; } }
@media only screen and (min-width: 740px)  { h1 { font-size: 220%; } }
@media only screen and (min-width: 1400px) { h1 { font-size: 240%; } }

h2 {
	font-size: 1.75rem;
	line-height: 1.3;
	margin-bottom: .25em;
  }
  
@media only screen and (min-width: 740px)  { h2 { font-size: 160%; } }

h3 {
	font-size: 1.4rem;
	margin-bottom: .4rem;
}

h4 {
	font-size: 1.3rem;
	margin-bottom: .3rem;
	}
  
  
h1 a,
h2 a { display: inline-block; }



  
/* Icons
---------------------------------- */

@font-face {
   font-family: 'trilogyicons';
   src:    url('https://s3.amazonaws.com/icomoon.io/31537/Trilogy/Trilogy-Icons.eot?qu7a6n');     src:    url('https://s3.amazonaws.com/icomoon.io/31537/Trilogy/Trilogy-Icons.eot?qu7a6n#iefix') format('embedded-opentype'),         url('https://s3.amazonaws.com/icomoon.io/31537/Trilogy/Trilogy-Icons.woff2?qu7a6n') format('woff2'),         url('https://s3.amazonaws.com/icomoon.io/31537/Trilogy/Trilogy-Icons.ttf?qu7a6n') format('truetype'),         url('https://s3.amazonaws.com/icomoon.io/31537/Trilogy/Trilogy-Icons.woff?qu7a6n') format('woff'),         url('https://s3.amazonaws.com/icomoon.io/31537/Trilogy/Trilogy-Icons.svg?qu7a6n#Trilogy-Icons') format('svg');}


.icons {
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
 
.icons { font-family: 'trilogyicons'; }   

.icons.circle {
   background: var(--button-bg-color); 
   color: white !important;
   font-size: 16px;
   height: 16px;
   width: 16px;
   margin: 0 0 0 .25em;
   text-align: center;
   line-height: 16px;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   padding: 10px;
   -webkit-transition: all .35s ease-in-out;
   -moz-transition:    all .35s ease-in-out;
   -o-transition:      all .35s ease-in-out;
   -ms-transition:     all .35s ease-in-out;
   transition:         all .35s ease-in-out; 
}

.icons.circle:hover {
   color: white !important;
   background-color: var(--button-bg-active-color);
   -moz-transform: scale(1.15);
   -webkit-transform: scale(1.15);
   -o-transform: scale(1.15);
   -ms-transform: scale(1.15);
   transform: scale(1.15);   
}

/* Text Elements
---------------------------------- */

p { 
	margin: 0 0 1.5em; 
	}

p:last-child { margin-bottom: 0; }

small { font-size: .9em; display: block; }

.meta small { text-transform: uppercase; padding-bottom: .75em;}

blockquote {
  font-weight: 300; 
}

strong { font-weight: 600; }


/* Lists
---------------------------------- */
main ul,
section ul,
main ol,
section ol      { margin: 0 0 1.5em 1.5em; }