@charset "utf-8";
/* fixes
-----------
cards, add cards which contains a background shadow. create multiple sizes, used on modal or other 3d-ish objects.
fix padding issues on imgcnt with various row-[n] options. spacing/padding/font-size is all that is left to fix.
box shadow - box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)
*/

/*
http://www.w3schools.com/cssref/css_selectors.asp 
div p == Selects all <p> elements inside <div> elements 
div > p Selects all <p> elements where the parent is a <div> element
div + p Selects all <p> elements that are placed immediately after <div> elements
div ~ p Selects every <p> element that are preceded by a <div> element

WebKit/Blink compatible browsers like Chrome, Opera and Safari (indicated by the -webkit prefix) 
support a non-standard pseudo-class ::-webkit- https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions

change default font size to 10px
html {font-size:62.5%}
change the default font size to 16px
body {font-size:1.6em}

Pixels	EMs	Percent	Points
1px 0.0625em
2px 0.125em
3px 0.1875em
4px 0.25em
5px 0.3125em
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.500em	50.0%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.750em	75.0%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
***** 16px	1.000em	100.0%	12pt *****
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.250em	125.0%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.500em	150.0%	18pt
60px 3.75em

*/

/* -----------------  -----------------      1em = 16px      -----------------  ----------------- */

.tabCnt, .blockCnt {display:none}
.blockLink:hover {cursor:pointer}
html{font-family: sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; font-size:62.5%; min-height:101%}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body{min-height:100vh;font-family:Verdana, Geneva, sans-serif;line-height:1.5em;font-size:1.6em;font-weight:normal}
body{text-shadow:0 -1px 0 rgba(255,255,255,0.5);
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
overflow-x:hidden;
margin:auto}

body,.color-reset,.hover-color-reset:hover {background:#fdfdfd !important}
body,.text-reset,.hover-text-reset:hover {color:#444 !important}
body.modal-opened {overflow:hidden}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,b,i,center,a,dl,dt,dd,ol,ul,li,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,section,summary,nav{display:block}
img{/*height:auto;*/border-style:none;border:0;vertical-align:middle}
.img{width:100%}
.img-mw{max-width:100%}
ol,ul{list-style:none}
caption,th{text-align:left}

.clearfix:after{content:"";display:table;clear:both;border-collapse:collapse}
.clear{clear:both;height:0;display:block}
.left{float:left !important}
.right{float:right !important}
.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}
.taj{text-align:justify}
.no-wrap{white-space:nowrap}
.wrap{white-space:normal}
.hide{display:none}
.show{display:block}
.show-inline{display:inline-block}
.img-left{position:relative;float:left;margin:.5em 1em 0 0}
.img-right{position:relative;float:right;margin:.5em 0 0 1em}
.cursor-pointer{cursor:pointer}

hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1rem 0;padding:0;
box-sizing:content-box;overflow:visible} /* set hr color and margin */

a{text-decoration:none;transition:.3s;transition-property:color,background,box-shadow;vertical-align:baseline;background-color:transparent}/* set color in custom */
a.more-link:before{content:' - ';}
a:active,a:focus,a:hover{text-decoration:underline;outline:none;outline-width:0;cursor:pointer}
a.tdu,.tdu{text-decoration: underline}
a.tdn:active,a.tdn:focus,a.tdn:hover{text-decoration: none}
b,strong{font-weight:800}
q,blockquote{quotes:none}
q:before,q:after{content:'"'}
blockquote{text-indent:1em}
.pre{white-space:pre}
ins{background-color:#fdc;color:#c44;text-decoration:none}
del{text-decoration:line-through}
mark{background-color:#ff9;color:#000;font-style:italic}
abbr{border:0;font-variant:normal}
abbr[title],dfn[title]{text-decoration:none;cursor:help}abbr[title]{border-bottom:1px dotted #333}dfn[title]{border-bottom:1px dotted #f9c}
dfn{font-style:italic}
samp{font-family:monospace}
code{white-space:pre-wrap;font-size:1.2em;display:inline-block}

sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}
figure{margin:1em 2.5em}
legend{color:#000}

button,input,optgroup,textarea,select{font:inherit !important;font-size:100% !important;margin:0}
optgroup{font-weight:600}
button,input{overflow:visible}
button,select,textarea{text-transform:none}

/* button corrections
button is used for standard buttons
.button is used in menus and dropdown lists    */
/* remove the select ouline when clicked */
.button, button, .button-3d, .menu a, .menu-block a,.dropdown-click a,.dropdown-hover a,.modal-close{border:none;display:inline-block;padding:0.6rem 0.8rem;text-align:center;text-decoration:none;color:inherit;background-color:inherit;cursor:pointer;line-height:1.7em !important}
.button:hover{text-decoration:none}button:focus,button:active {outline: 0 !important;border: 0 !important}
button.default {border:1px solid #acacac;background-color:#efefef}button.default:hover {border:1px solid #7eb4ea;background-color:#e7f2fc}
/* add a shadow for hover and remove the underline */
.button-3d:hover{box-shadow:0 .5em 1em 0 rgba(0,0,0,0.2),0 .375em 1.25em 0 rgba(0,0,0,0.19)}

/* reset default button behavior */
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;cursor:pointer}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted}
/* set disabled button options */
button.disabled:disabled,.button:disabled{cursor:not-allowed;opacity:0.3}.disabled *,:disabled *{pointer-events:none}
button:disabled:hover,.button:disabled:hover{box-shadow:none}
.button::-moz-focus-inner {border:0;border-style: none}


/* menu is used for menu and link displayes */
/* use an anchor in a menu or menu-block */
/* horizontal menu */
.menu{width:100%;overflow:hidden}.center .menu{display:inline-block;width:auto}
.menu .menu-item{float:left;width:auto;display:block}
.menu > a{float:left;width:auto}

.menu .dropdown-hover,.menu .dropdown-click{position:static;float:left}
/* vertical vertical */
.menu-block > a,.menu.mobile > a{float:none;width:100%;text-align:left}
.menu-block > a,.menu > a {border:none;white-space:normal;outline:0;display:inline-block}
.menu-block.tac a{text-align:center}
.menu > a.mobile,.menu-block > a.mobile{text-align:center}
/* clear padding on starting button in menus. */
.menu.start > a:first-of-type{padding-left:0}

/* dropdown menu */
.dropdown-click,.dropdown-hover{position:relative;cursor:pointer;display:inline-block}
.menu-block .dropdown-click,.menu-block .dropdown-hover{display:block}
.dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;margin:0;padding:0;min-width:180px}

.dropdown-hover:hover .dropdown-content,.dropdown-click.focus .dropdown-content{display:block;z-index:5}
.menu-block .dropdown-content {position:relative}
.dropdown-content a{display:block}

/*.menu-block .dropdown-hover,.menu-block .dropdown-click{width:100%}*/
.menu-block .dropdown-hover .dropdown-content,.menu-block .dropdown-click .dropdown-content{min-width:100%}
.menu-block .dropdown-hover a,.menu-block .dropdown-click a{width:100%;text-align:left;padding:.5em 1em}
/* +++++++++++++++ MAYBE TURN THIS FEATURE OFF +++++++++++++++*/
/*.menu .button:hover,.menu-block .button:hover{color:#000 !important;background-color:#dddddd !important}*/
/* END check to see if we will use this code */
/* END menu item displays */
/* end button correction */

/* form elements */
.input{padding:.8rem;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
input[type="checkbox"],input[type="radio"]{box-sizing:content-box; padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-.125em}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
textarea{overflow:auto}

fieldset.selectBox {width:300px}
.selectBox select {margin:0;padding:.8rem;display:block}

.cx-select {cursor: pointer;appearance:none !important;background-image:url(../images/select-menu_open.png);background-repeat:no-repeat;background-position:right 0 top -.4rem;outline:0;border:0;width:100%}
.cx-select{line-height:1.5em !important}
/* remove ie11 outline */
.cx-select::-ms-expand{display:none}

/* option options I'm messing around with.
.cx-select option {color:red}
.cx-select > option {background: #000 !important;color:white !important;}
.selectBox select {color:#ff0 !important}
.selectBox option{padding:40px !important;color:#FF0 !important}
*/

textarea{width:100%;min-height:10rem;-webkit-appearance: none !important;-moz-appearance: none !important;appearance: none !important;overflow: auto}
textarea[contenteditable]{-webkit-appearance: none}
.cx-textarea {
resize: none;
/*outline:2px solid #ccc;*/
outline:0;
border:0;
padding:.5rem;
}

/* add padding to the input's label */
label+.cx-select,label+.cx-textarea,label+[type="text"]{margin-top:.2rem}
[type="text"]+label{display:inline-block;margin-top:2rem}


/* hide the checkbox on modern browsers */
[type="checkbox"]:not(:checked),[type="checkbox"]:checked,
[type="radio"]:not(:checked),[type="radio"]:checked
{position:absolute;left:-9999px}
/* define the label on modern borswers */
[type="checkbox"]:not(:checked) + label,[type="checkbox"]:checked + label,
[type="radio"]:not(:checked) + label,[type="radio"]:checked + label
{position:relative;padding-left:2.4rem;padding-top:.1em;cursor:pointer;box-sizing:content-box}

/* create the box before the label on modern browers. border color is set below */
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before,
[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before{position:absolute;left:0; top:0;
width:1.25em; height:1.25em;border:2px solid #ccc;background:#fff;border-radius:4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
content:''}
/* radio uses the same css as checkmark. The only difference is the shape. Set border radius to 50% */
[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before{border-radius:50%;}

/* actual checkmark for the checkbox label. :after is used to position the checkmark on top of the box. color is set below */
[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after{position:absolute;top:.24em;left:.23em;
font-family:'Lucida Sans Unicode', 'Arial Unicode MS', Arial;content:'\2713';font-size:1.2em;line-height:0.8em; font-weight:600;
transition:all .2s}

/* actual bullet for the radio label. :after is used to position the bullet on top of the circle. color is set below */
[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after{position:absolute;top:.235em;left:.145em;
content:'\2022';font-size:1.8em;line-height:0.25em;
transition:all .2s}

/* set transition for the input's mark */
[type="checkbox"]:not(:checked) + label:after,[type="radio"]:not(:checked) + label:after{opacity:0;transform:scale(0)}
[type="checkbox"]:checked + label:after,[type="radio"]:checked + label:after{opacity:1;transform:scale(1)}

/* Just remove the input if you want to disable an option. css if you must disable a checkbox or input styles */
/* gray out the option */
input:disabled:not(:checked) + label:before, input:disabled:checked + label:before{box-shadow:none;border-color:#bbb;background-color:#ddd}
/* set the disabled checkmark color */
input:disabled:checked + label:after{color:#999}
/* set the disabled text color */
input:disabled + label{color:#aaa}
/* accessibility 
[type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before{border:2px dotted blue}*/


/* checked effects */
/* define the border and dot/checkmark color for the checkbox and radio buttons */
[type="checkbox"]:checked + label:before,
[type="radio"]:checked + label:before {border:2px solid #6c0}/* border color */
[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after,
[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after {color:#444}/* dot/checkmark color */

/* hover effects */
/* checkbox hover color */
input + label:hover:before{border:2px solid #FF0 !important}
input:disabled:not(:checked) + label:hover:before, input:disabled:checked + label:hover:before{border:2px solid #bbb !important;}
input:disabled + label:hover,input:not([disabled]) + label{cursor:default}

/* input box hover and focus border color */
input[type=file]{outline:2px solid #ccc;background:none !important}
[type="password"]:hover,[type="text"]:hover,select:hover,textarea:hover,input[type=file]:hover,.uploadFile:hover{outline:2px solid #FF0}
[type="password"]:focus,[type="text"]:focus,select:focus,textarea:focus,input[type=file]:focus,.uploadFile:focus{outline:2px solid #6F0}


/* fieldset border control */
fieldset{padding:0;border:0px solid #bbb;margin:1em 0}
/* add padding to the bottom of the fieldset legend */

fieldset legend {padding-bottom: .5em}
/* wrap radio buttons inside fieldset */
.radio span, .checkbox span{display:block;margin-bottom:.5em}
/* set padding between button and text */
.radio label>span, .checkbox label>span{display:inline !important; padding-left:.5em}
/* hide fieldset label heading from view. this is not a display none. */
.hideLabel {width:.0625em;height:.0625em;margin:-.0625em;padding:0;border:0;overflow:hidden;position:absolute;clip:rect(0 0 0 0)}

legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
audio,canvas,progress,video{display:inline-block}
audio:not([controls]){display:none;height:0}
details{display:block}
summary{display:list-item}
[hidden],template{display:none}

/* table styles */
/* HELP file updated > link is Tables */
table{border-collapse:collapse;border-spacing:0;width:100%;display:table;margin-top:1.5rem}/* default table style */
table tr th {font-weight: bold}/* default bold for headers */
.table-ct,.table-b{border:1px solid #ccc} /* table border for custom table. table-b is a border table only */
.table-b-a tr th, .table-b-a tr td {border:1px solid #ddd}/* full borders around headers and cells */
.table-row-b tr,.table-ct tr{border-bottom:1px solid #ddd} /* row border for custom table, AND adding table-b to table element */
.table-c tbody tr:nth-child(even){background-color:#f1f1f1} /* set row color to normal table */
.table-ct tr:nth-child(odd){background-color:#fff} /* set odd row color for custom table */
.table-ct tr:nth-child(even){background-color:#f1f1f1} /* set even row color for custom table */
.table-center tr th,.table-center tr td{text-align:center} /* center table objects */
.table-center-h tr th{text-align:center} /* center table headings */
table td,table th{padding:.8rem .8rem;display:table-cell;text-align:left;vertical-align:top} /* table padding and alignment correction */
table th:first-child,table td:first-child{padding-left:1em} /* add left padding to first element only */
.table-nf {width:auto !important;}
.hoverable tbody tr:hover, .hoverable li:hover{background-color:#ccc} /* highlight a row or list item with mouse hover */
.border-c {border:1px solid #696969}/* used in a div to wrap a table, IF a different border color is desired. use with border-cc to create a custom color */
.border-c table tr th{border-top:0}
.border-c table tr:last-child td {border-bottom:0}
.border-c table tr th:first-child,.border-c table tr td:first-child {border-left:0}
.border-c table tr th:last-child,.border-c table tr td:last-child {border-right:0}
.border-cc {border:1px solid green !important}/* custom color for a table. use with border-c */

/* layout styles for div use as table */
.cell-row{display:table;width:100%}.cell{display:table-cell}/* not in use */
.cell-top{vertical-align:top}.cell-middle{vertical-align:middle}.cell-bottom{vertical-align:bottom}

/* block level class */
.block{display:block}
.block-50{display:block;width:50%}
.block-60{display:block;width:60%}
.block-70{display:block;width:70%}
.block-80{display:block;width:80%}
.block-90{display:block;width:90%}
.block-100{display:block;width:100%} /* used to expand a button or object */
.inline-block{display: inline-block}
/* margins and padding */
/* margins are used on relative/inline block elements that are not full width */
.margin{margin:1em !important}.margin-1{margin:1.5em !important}.margin-2{margin:2em !important}.margin-3{margin:2.5em !important}.margin-4{margin:3em !important}
.margin-tb{margin:1em 0 !important}.margin-tb-1{margin:1.5em 0 !important}.margin-tb-2{margin:2em 0 !important}
.margin-t{margin-top:1em !important}.margin-t-1{margin-top:1.5em !important}.margin-t-2{margin-top:2em !important}
.margin-b{margin-bottom:1em !important}.margin-b-1{margin-bottom:1.5em !important}.margin-b-2{margin-bottom:2em !important}
.margin-lr{margin:0 1em !important}.margin-lr-1{margin:0 1.5em !important}.margin-lr-2{margin:0 2em !important}
.margin-l{margin-left:1em !important}.margin-l-1{margin-left:1.5em !important}.margin-l-2{margin-left:2em !important}
.margin-r{margin-right:1em !important}.margin-r-1{margin-right:1.5em !important}.margin-r-2{margin-right:2em !important}
.margin-0{margin:0 !important}
/* padding styles used to create white space */
.spadding{padding:0 .5em !important} /* fix this one */
.collection{margin:.5em 0 1em 0 !important} /* new style. used in templates */
.padding--1{padding:.5em !important}.padding--2{padding:.25em !important}
.padding{padding:1em !important}.padding-1{padding:1.5em !important}.padding-2{padding:2em !important}.padding-3{padding:2.5em !important}.padding-4{padding:3em !important}
.padding-tb{padding:1em 0 !important}.padding-tb-1{padding:1.5em 0 !important}.padding-tb-2{padding:2em 0 !important}
.padding-t{padding-top:1em !important}.padding-t-1{padding-top:1.5em !important}.padding-t-2{padding-top:2em !important}
.padding-b{padding-bottom:1em !important}.padding-b-1{padding-bottom:1.5em !important}.padding-b-2{padding-bottom:2em !important}
.padding-lr{padding-left:1em !important;padding-right:1em !important}.padding-lr-1{padding:0 1.5em !important}.padding-lr-2{padding:0 2em !important}
.padding-l{padding-left:1em !important}.padding-l-1{padding-left:1.5em !important}.padding-l-2{padding-left:2em !important}
.padding-r{padding-right:1% !important}.padding-r-1{padding-right:1.5% !important}.padding-r-2{padding-right:2% !important}
.padding-t-0{padding-top:0 !important}.padding-r-0{padding-right:0 !important}.padding-b-0{padding-bottom:0 !important}.padding-l-0{padding-left:0 !important}

/*grnh 0.0498+0.0164 (+49.1018%)
As of 2:26PM EST. Market open.
BFCH 0.1631 +0.0641 (+64.75%) 14:29 ET [OTC US]
QUOTE OVERVIEW for Tue, Feb 9th, 2021
mine 0.0098 +0.0046 (+88.46%) 14:32 ET [OTC US]
QUOTE OVERVIEW for Tue, Feb 9th, 2021

*/

/* default heading sizes */
h1{font-size:2.25em;text-align:center}h2{font-size:1.875em}h3{font-size:1.5em}
h4{font-size:1.25em}h5{font-size:1.125em}h6{font-size:1em}
h1,h2{margin:4rem 0 2rem 0;line-height:1.4em;font-weight:normal !important}
h3,h4{margin:2rem 0 1rem 0;line-height:1.3em;font-weight:normal !important}
h5,h6{margin:1rem 0 .5rem 0;line-height:1.2em;font-weight:normal !important}
h1,h2,h3{letter-spacing:-.03em}
h1{margin-top:.3rem}
h1.big {font-size:2.8em}h2.big {font-size:2.5em}h3.big {font-size:2.2em}h4.big {font-size:1.9em}h5.big {font-size:1.6em}h6.big {font-size:1.2em}
h1.bigger {font-size:3.1em}h2.bigger {font-size:2.8em}h3.bigger {font-size:2.5em}h4.bigger {font-size:2.2em}h5.bigger {font-size:1.9em}h6.bigger {font-size:1.5em}

.modal-content h1,.modal-content h2,.modal-content h3 {margin:2rem 0 1rem 0}
.modal-content h4,.modal-content h5,.modal-content h6 {margin:1rem 0 .5rem 0}

/* default font sizes */
.tiny{font-size:.625em !important}.small{font-size:.75em !important}.small-med{font-size:.875em !important}
p,.medium{font-size:1em !important;}.large{font-size:1.375em !important}.xlarge{font-size:1.875em !important}
.xxlarge{font-size:2.25em !important}.xxxlarge{font-size:3em !important}.jumbo{font-size:4em !important}
.smaller-size{font-size:60% !important}.small-size{font-size:80% !important}.big-size{font-size:120% !important}.bigger-size{font-size:140% !important}
.narrow{letter-spacing:-.0261em}.narrower{letter-spacing:-.0522em}.wide{letter-spacing:.208em}.wider{letter-spacing:.416em}

/* set top margins on replica p elements */
/*body p + p, body table + p,body div + p{margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}*/
p{margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}

/* unordered and ordered lists */
ul li, ol li{padding-left: .5em;margin-left:2em;line-height:1.7em}
ul{list-style:disc outside}
ul.blank{list-style:none outside}
ul.blank li{padding-left:0;margin-left:1em}
ol{list-style:decimal outside}
ul,ol{margin:1em 0 1.5em}
ol li ol{margin:.25em 0}
ol li ol li{padding-left:.25em;margin-left:1.2em}
li + li {margin-top: .3em}


/* create a rounded corner on an any element */
.round-smaller{border-radius:4px}
.round-small{border-radius:7px}
.round-medium{border-radius:10px}
.round-large{border-radius:13px}
.round-xlarge{border-radius:15px}
.round-xxlarge{border-radius:18px}
.round-xxxlarge{border-radius:21px}


/* create a circle on any element. Must be same width/height for perfect circle */
.circle{border-radius:50%}

/* badge and tag is used with a span tag to create a callout. add color and hover color as normal */ 
/* fix padding on different sizes */
.badge-container:before{content:"";display:table}
.badge-container:after{content:"";display:table;clear:both}

/*.display-right{}*/

.badge-container{position: relative}
.badge-container > span {float: left}
.badge-container span {white-space: nowrap}
.badge-container .badge,.badge-container .sign {position: absolute; top:.3em;right:0.7em}
p.badge-container {padding:1rem 1.8rem}

p.badge-container {padding-left:0}
/*p.badge-container > span {padding-top:.4em}*/

.badge,.sign{background-color:#333;color:#fff;display:inline-block;padding-left:.8rem;padding-right:.8rem;text-align:center}
.badge{border-radius:50%}
/*ul .badge,ul .s {padding-bottom:0;}*/


/* tooltip is used to create a callout to an element */
.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black}
.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding:.2em 0;position: absolute;z-index: 1}
.tooltip .tooltiptext::after {content: "";position: absolute;border-width: 5px;border-style: solid}
.tooltip:hover .tooltiptext {visibility: visible}
.rightTip .tooltiptext::after,.leftTip .tooltiptext::after {top:50%;margin-top:-.3125em;}
.rightTip .tooltiptext,.leftTip .tooltiptext {top:-.3125em}
.topTip .tooltiptext::after,.bottomTip .tooltiptext::after {left:50%;margin-left:-.3125em;}
.topTip .tooltiptext,.bottomTip .tooltiptext {left:50%;margin-left: -3.75em;}
.noArrow .tooltiptext::after{border:0}

/* tooltip position, pointer locations, and custom colors */
.rightTip .tooltiptext::after {right:100%;border-color: transparent orange transparent transparent}
.rightTip .tooltiptext {left:110%;  background-color:orange;color:#39C}
.leftTip .tooltiptext::after {left:100%;border-color: transparent transparent transparent black}
.leftTip .tooltiptext {right:110%}
.topTip .tooltiptext::after {top:100%;border-color: black transparent transparent transparent}
.topTip .tooltiptext {bottom:150%}
.bottomTip .tooltiptext::after {bottom:100%;border-color: transparent transparent black transparent}
.bottomTip .tooltiptext {top:150%}

/* sidebar css */
.sidebar{height:100%;position:fixed !important;z-index:2;overflow:hidden;}
.page-content-slide-l{transition:margin-left .4s}
.sidebar-left-trn{transition:margin-left .4s}.sidebar-right-trn{transition:margin-right .2s}


/*
div p == Selects all <p> elements inside <div> elements 
div > p Selects all <p> elements where the parent is a <div> element
div + p Selects all <p> elements that are placed immediately after <div> elements
div ~ p Selects every <p> element that are preceded by a <div> element

http://localhost/camx/templates/test/modal-x.html
*/

/* modal css with image animation */
.modal-btn{cursor:pointer;display:table;margin:2rem 0}img.modal-btn{cursor:zoom-in}
.modal-cnt{z-index:5;display:none;padding:0;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.modal-content{margin:0 auto;background-color:#fff;position:relative;padding:0;outline:0}
/* %% MODAL-CONTENT-WIDTH %% */
.modal-content{width:70%}
.modal-content>header,.modal-content>footer,.modal-content>div,.modal-content~.modal-close{padding:1rem 2rem}
.modal-content>img{padding:0}
.modal-close{margin-left:-.0625em;box-sizing:border-box;z-index:10;background-color:transparent}
.modal-close-warning{background-color:rgb(255,255,255);background-color:rgba(255,255,255,0.5)}
/* modal close x and bold hover overflow control */
.modal-close-warning:hover{font-weight:bold;color:#fff!important;background-color:#f42119!important}
/* reserve space for the bold hover effect. okay to remove if you remove the .modal-close:hover...bold */
.modal-close-warning::before{display:block;content:attr(data-text);font-weight:bold;height:0;overflow:hidden;visibility:hidden}
/* end of modal container */

/* sidebar overlay to grey out the main content */
.overlay{z-index:1;display:none;position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.35)}

/*  */
.flow{overflow:hidden}

/* fix an element to the top or bottom of a section */
.top,.bottom{position:fixed;width:100%;z-index:1}
.top{top:0}.bottom{bottom:0}

/* containment for sharing element location; new button over image, x in upper right corner, etc */
.display-container{position:relative;margin:auto}
.display-container:hover .display-hover{display:block}.display-container:hover span.display-hover{display:inline-block}.display-hover{display:none}
.display-tl{position:absolute;left:0;top:0}.display-tm{position:absolute;left:50.5%;top:0;transform:translate(-50.5%,0%)}.display-tr{position:absolute;right:0;top:0}
.display-l{position:absolute;top:50.5%;left:0%;transform:translate(0%,-50.5%)}.display-m{position:absolute;top:50.5%;left:50.5%;transform:translate(-50.5%,-50.5%)}.display-r{position:absolute;top:50.5%;right:0%;transform:translate(0%,-50.5%)}
.display-bl{position:absolute;left:0;bottom:0}.display-bm{position:absolute;left:50.5%;bottom:0;transform:translate(-50.5%,0%)}.display-br{position:absolute;right:0;bottom:0}
.display-absolute{position:absolute}
.ontop1{z-index: 1}
.ontop2{z-index: 2}
.ontop3{z-index: 3}
.ontop4{z-index: 4}
.ontop5{z-index: 5}
.ontop6{z-index: 6}
.ontop7{z-index: 7}
.ontop8{z-index: 8}
.ontop9{z-index: 9}
.ontop10{z-index: 10}

/* shadow is used to create a card section, etc. use with container */
.shadow-lo{box-shadow:1px 1px 5px 2px rgba(153,153,153,0.7)}
.shadow,.hover-shadow:hover{box-shadow:4px 4px 10px 5px rgba(153,153,153,0.7)}
.shadow-hi{box-shadow:7px 7px 15px 8px rgba(153,153,153,0.7)}
.shadow-higher{box-shadow:10px 10px 20px 11px rgba(153,153,153,0.7)}
.shadow-hover-none:hover{box-shadow:none !important}




/* code block used to display code or plain text */
.code,.codespan{font-family:"courier new"}
.code{font-size:1.05em}
.code{width:100%; color:#444;background-color:#fff;padding:.5em .750em;border-left:4px solid #3665B3;word-wrap:break-word;margin:1em 0}
/* inline code reference */
.codespan{color:#900;background-color:#f1f1f1;padding:0 .6%}


/* borders for various elements. bar is the same as border except larger, 6px */
.border-none{border:0 !important}.border{border:1px solid #ccc !important}.border-medium{border:3px solid #ccc !important}.border-large{border:6px solid #ccc !important}
.border-top{border-top:1px solid #ccc !important}.border-right{border-right:1px solid #ccc !important}
.border-bottom{border-bottom:1px solid #ccc !important}.border-left{border-left:1px solid #ccc !important}
.border-top-bar{border-top:6px solid #ccc !important}.border-right-bar{border-right:6px solid #ccc !important}
.border-bottom-bar{border-bottom:6px solid #ccc !important}.border-left-bar{border-left:6px solid #ccc !important}

/* check to see if we really need this one. It may not be needed anymore */
.text-shadow-dark-small{text-shadow:.125em .125em 0 #000}
.text-shadow-dark-big{text-shadow:.125em .125em 0 #000}
.text-shadow-light-small{text-shadow:.0625em .0625em 0 #ddd}
.text-shadow-light-big{text-shadow:.125em .125em 0 #ddd}
.transparent,.hover-none:hover{background-color:transparent !important}
.text-shadow-hover-none:hover{text-shadow:none!important}

/* alternating image container */
section.imgcnt .row div {display:block;text-align:center}
section.imgcnt img {width:100%}
section.imgcnt p {text-align:center;font-size:2.7em;font-style:italic;padding:20% 10%;height:100%}
section.imgcnt .row {margin-top:4em}
section.imgcnt .row:nth-child(odd) div {float:left}
section.imgcnt .row:nth-child(odd) div:first-child {float:right}
section.imgcnt p:before,section.imgcnt p:after{content:'\0022';font-weight:600}

/* background colors */
.theme-action {color: #fff !important;background-color: #074b83 !important}
.amber,.hover-amber:hover{color:#000 !important;background-color:#ffc107 !important}
.aqua,.hover-aqua:hover{color:#000 !important;background-color:#00ffff !important}
.black,.hover-black:hover{color:#fff !important;background-color:#000 !important}
.blue,.hover-blue:hover{color:#fff !important;background-color:#2196F3 !important}
.blue-grey,.hover-blue-grey:hover,.blue-gray,.hover-blue-gray:hover{color:#fff !important;background-color:#607d8b !important}
.brown,.hover-brown:hover{color:#fff !important;background-color:#795548 !important}
.cyan,.hover-cyan:hover{color:#000 !important;background-color:#00bcd4 !important}
.dark-grey,.hover-dark-grey:hover,.dark-gray,.hover-dark-gray:hover{color:#fff !important;background-color:#616161 !important}
.deep-orange,.hover-deep-orange:hover{color:#fff !important;background-color:#ff5722 !important}
.deep-purple,.hover-deep-purple:hover{color:#fff !important;background-color:#673ab7 !important}
.green,.hover-green:hover{color:#fff !important;background-color:#4CAF50 !important}
.grey,.hover-grey:hover,.gray,.hover-gray:hover{color:#000 !important;background-color:#9e9e9e !important}
.indigo,.hover-indigo:hover{color:#fff !important;background-color:#3f51b5 !important}
.khaki,.hover-khaki:hover{color:#000 !important;background-color:#f0e68c !important}
.light-blue,.hover-light-blue:hover{color:#000 !important;background-color:#87CEEB !important}
.light-green,.hover-light-green:hover{color:#000 !important;background-color:#8bc34a !important}
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover{color:#000 !important;background-color:#f1f1f1 !important}
.light-orange,.hover-light-orange:hover{color:#000 !important;background-color:#ffb347 !important}
.lime,.hover-lime:hover{color:#000 !important;background-color:#cddc39 !important}
.orange,.hover-orange:hover{color:#000 !important;background-color:#ffa300 !important}
.pale-blue,.hover-pale-blue:hover{color:#000 !important;background-color:#ddffff !important}
.pale-green,.hover-pale-green:hover{color:#000 !important;background-color:#ddffdd !important}
.pale-red,.hover-pale-red:hover{color:#000 !important;background-color:#ffdddd !important}
.pale-yellow,.hover-pale-yellow:hover{color:#000 !important;background-color:#ffffcc !important}
.pink,.hover-pink:hover{color:#fff !important;background-color:#e91e63 !important}
.purple,.hover-purple:hover{color:#fff !important;background-color:#9c27b0 !important}
.red,.hover-red:hover{color:#fff !important;background-color:#ff2222 !important}
.sand,.hover-sand:hover{color:#000 !important;background-color:#fdf5e6 !important}
.teal,.hover-teal:hover{color:#fff !important;background-color:#009688 !important}
.white,.hover-white:hover{color:#000 !important;background-color:#fff !important}
.yellow,.hover-yellow:hover{color:#000 !important;background-color:#ffeb3b !important}

/* text colors */
.text-theme-action,hover-text-theme-action:hover{color: #074b83 !important}
.text-amber,.hover-text-amber:hover{color:#ffc107 !important}
.text-aqua,.hover-text-aqua:hover{color:#00ffff !important}
.text-black,.hover-text-black:hover{color:#000 !important}
.text-blue,.hover-text-blue:hover{color:#2196F3 !important}
.text-blue-grey,.hover-text-blue-grey:hover,.text-blue-gray,.hover-text-blue-gray:hover{color:#607d8b !important}
.text-brown,.hover-text-brown:hover{color:#795548 !important}
.text-cyan,.hover-text-cyan:hover{color:#00bcd4 !important}
.text-dark-green,.hover-text-dark-green:hover,.text-dark-green,.hover-text-dark-green:hover{color:#3C8B40 !important}
.text-dark-grey,.hover-text-dark-grey:hover,.text-dark-gray,.hover-text-dark-gray:hover{color:#3a3a3a !important}
.text-deep-orange,.hover-text-deep-orange:hover{color:#ff5722 !important}
.text-deep-purple,.hover-text-deep-purple:hover{color:#673ab7 !important}
.text-green,.hover-text-green:hover{color:#4CAF50 !important}
.text-grey,.hover-text-grey:hover,.text-gray,.hover-text-gray:hover{color:#757575 !important}
.text-indigo,.hover-text-indigo:hover{color:#3f51b5 !important}
.text-khaki,.hover-text-khaki:hover{color:#b4aa50 !important}
.text-light-blue,.hover-text-light-blue:hover{color:#87CEEB !important}
.text-light-green,.hover-text-light-green:hover{color:#8bc34a !important}
.text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover{color:#f1f1f1 !important}
.text-lime,.hover-text-lime:hover{color:#cddc39 !important}
.text-orange,.hover-text-orange:hover{color:#ff9800 !important}
.text-pale-blue,.hover-text-pale-blue:hover{color:#ddffff !important}
.text-pale-green,.hover-text-pale-green:hover{color:#ddffdd !important}
.text-pale-red,.hover-text-pale-red:hover{color:#ffdddd !important}
.text-pale-yellow,.hover-text-pale-yellow:hover{color:#ffffcc !important}
.text-pink,.hover-text-pink:hover{color:#e91e63 !important}
.text-purple,.hover-text-purple:hover{color:#9c27b0 !important}
.text-red,.hover-text-red:hover{color:#f44336 !important}
.text-sand,.hover-text-sand:hover{color:#fdf5e6 !important}
.text-dark-sand,.hover-text-dark-sand:hover{color:#Fbecce !important}

.text-teal,.hover-text-teal:hover{color:#009688 !important}
.text-white,.hover-text-white:hover{color:#fff !important}
.text-yellow,.hover-text-yellow:hover{color:#d2be0e !important}
/* border colors */
.border-theme-action,.hover-border-theme-action:hover{border-color: #074b83 !important}
.border-amber,.hover-border-amber:hover{border-color:#ffc107 !important}
.border-aqua,.hover-border-aqua:hover{border-color:#00ffff !important}
.border-black,.hover-border-black:hover{border-color:#000 !important}
.border-blue,.hover-border-blue:hover{border-color:#2196F3 !important}
.border-blue-grey,.hover-border-blue-grey:hover,.border-blue-gray,.hover-border-blue-gray:hover{border-color:#607d8b !important}
.border-brown,.hover-border-brown:hover{border-color:#795548 !important}
.border-cyan,.hover-border-cyan:hover{border-color:#00bcd4 !important}
.border-dark-grey,.hover-border-dark-grey:hover,.border-dark-gray,.hover-border-dark-gray:hover{border-color:#616161 !important}
.border-deep-orange,.hover-border-deep-orange:hover{border-color:#ff5722 !important}
.border-deep-purple,.hover-border-deep-purple:hover{border-color:#673ab7 !important}
.border-green,.hover-border-green:hover{border-color:#4CAF50 !important}
.border-grey,.hover-border-grey:hover,.border-gray,.hover-border-gray:hover{border-color:#9e9e9e !important}
.border-indigo,.hover-border-indigo:hover{border-color:#3f51b5 !important}
.border-khaki,.hover-border-khaki:hover{border-color:#f0e68c !important}
.border-light-blue,.hover-border-light-blue:hover{border-color:#87CEEB !important}
.border-light-green,.hover-border-light-green:hover{border-color:#8bc34a !important}
.border-light-grey,.hover-border-light-grey:hover,.border-light-gray,.hover-border-light-gray:hover{border-color:#f1f1f1 !important}
.border-lime,.hover-border-lime:hover{border-color:#cddc39 !important}
.border-orange,.hover-border-orange:hover{border-color:#ff9800 !important}
.border-pale-blue,.hover-border-pale-blue:hover{border-color:#e7ffff !important}
.border-pale-green,.hover-border-pale-green:hover{border-color:#e7ffe7 !important}
.border-pale-red,.hover-border-pale-red:hover{border-color:#ffe7e7 !important}
.border-pale-yellow,.hover-border-pale-yellow:hover{border-color:#ffffcc !important}
.border-pink,.hover-border-pink:hover{border-color:#e91e63 !important}
.border-purple,.hover-border-purple:hover{border-color:#9c27b0 !important}
.border-red,.hover-border-red:hover{border-color:#f44336 !important}
.border-sand,.hover-border-sand:hover{border-color:#fdf5e6 !important}
.border-teal,.hover-border-teal:hover{border-color:#009688 !important}
.border-white,.hover-border-white:hover{border-color:#ffffff !important}
.border-yellow,.hover-border-yellow:hover{border-color:#ffeb3b !important}

.animate-hide{opacity:0}
.animate-input{transition:width 0.4s ease-in-out}.animate-input:focus{width:100% !important}
.animate-fade{animation:animatefade 0.8s forwards}@keyframes animatefade{0%{opacity:1}100%{opacity:0}}
.animate-opacity{animation:animateopacity 0.3s forwards}@keyframes animateopacity{from{opacity:0}to{opacity:1}}
.animate-spin{animation:animatespin 0.8s}@keyframes animatespin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.animate-zoom{animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)}to{transform:scale(1)}}
.animate-down{position:relative;animation:animatedown 0.6s cubic-bezier(0.42,0,0.58,1.0)}@keyframes animatedown{0%{top:-300px;opacity:0}100%{top:0;opacity:1}}
.animate-down-pull{position:relative;animation:animatedownpull 0.6s cubic-bezier(.25,.8,.7,1.05)}@keyframes animatedownpull{0%{top:-100%;opacity:0}100%{top:0;opacity:1}}
.animate-up{position:relative;animation:animateup 0.6s}@keyframes animateup{0%{bottom:-300px;opacity:0}100%{bottom:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 0.8s cubic-bezier(0.42, 0, 0.58, 1.0)}@keyframes animateleft{0%{right:-300px;opacity:0}100%{right:0;opacity:1}}
.animate-right{position:relative;animation:animateright 0.8s cubic-bezier(0.42,0,0.58,1.0)}@keyframes animateright{0%{left:-300px;opacity:0}100%{left:0;opacity:1}}


.opacity-lo,.hover-opacity-lo:hover{-webkit-filter:opacity(20%);filter:opacity(20%)}.opacity,.hover-opacity:hover{-webkit-filter:opacity(50%);filter:opacity:(50%)}.opacity-hi,.hover-opacity-hi:hover{-webkit-filter:opacity(80%);filter:opacity:(80%)}.opacity-off,.hover-opacity-off:hover{-webkit-filter: opacity(100%);opacity:(100%)}
/* image filters */
.sepia-lo{-webkit-filter: sepia(33%);filter:sepia(33%)}.sepia{-webkit-filter: sepia(66%);filter:sepia(66%)}.sepia-hi,.hover-sepia:hover{-webkit-filter: sepia(100%);filter:sepia(100%)}
.blur-lo{-webkit-filter: blur(2px);filter:blur(2px)}.blur{-webkit-filter: blur(4px);filter:blur(4px)}.blur-hi{-webkit-filter: blur(8px);filter:blur(8px)}.hover-blur:hover{-webkit-filter: blur(6px);filter:blur(6px)}
.brightness-lo{-webkit-filter: brightness(55%);filter: brightness(55%)}.brightness{-webkit-filter: brightness(125%);filter: brightness(125%)}.brightness-hi{-webkit-filter: brightness(170%);filter: brightness(170%)}.hover-brightness:hover{-webkit-filter: brightness(135%);filter: brightness(135%)}
.contrast-lo{-webkit-filter: contrast(55%);filter:contrast(55%)}.contrast{-webkit-filter: contrast(125%);filter:contrast(125%)}.contrast-hi{-webkit-filter: contrast(165%);filter:contrast(165%)}.hover-contrast:hover{-webkit-filter: contrast(135%);filter:contrast(135%)}
/* if blur is larger than x or y, the drop shadow will overflow the opposite side of the block for x,y repectfully. */
.drop-shadow-lo {filter: drop-shadow(3px 3px 3px rgba(153,153,153,0.8))}.drop-shadow,.drop-shadow-hover:hover {filter: drop-shadow(8px 8px 8px rgba(153,153,153,0.8))}.drop-shadow-mid {filter: drop-shadow(2px 2px 7px rgba(153,153,153,0.8))}.drop-shadow-hi {filter: drop-shadow(13px 13px 13px rgba(153,153,153,0.8))}.drop-shadow-higher {filter: drop-shadow(18px 18px 18px rgba(153,153,153,0.8))}.drop-shadow-hover-none:hover { filter: drop-shadow(0 0 0);}
.grayscale-lo{-webkit-filter: grayscale(30%);filter:grayscale(30%)}.grayscale{-webkit-filter: grayscale(65%);filter:grayscale(65%)}.grayscale-hi{-webkit-filter: grayscale(100%);filter:grayscale(100%)}.hover-grayscale:hover{-webkit-filter: grayscale(75%);filter:grayscale(75%)}
.saturate-lo{-webkit-filter: blur(30%);filter:saturate(30%)}.saturate{-webkit-filter: blur(60%);filter:saturate(60%)}.saturate-hi,.hover-saturate:hover{-webkit-filter: blur(90%);filter:saturate(90%)}
.huerotate-lo {-webkit-filter: hue-rotate(75deg);filter: hue-rotate(75deg);}.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}.huerotate-hi {-webkit-filter: hue-rotate(300deg);filter: hue-rotate(300deg);}.hover-huerotate:hover {-webkit-filter: hue-rotate(200deg);filter: hue-rotate(200deg);}
.invert-lo {-webkit-filter: invert(30%);filter: invert(30%);}.invert {-webkit-filter: invert(70%);filter: invert(70%);}.invert-hi {-webkit-filter: invert(100%);filter: invert(100%);}



/*.shadow-lo {-webkit-filter: drop-shadow(3px 3px 8px grey);filter: drop-shadow(3px 3px 8px grey)}.shadow {-webkit-filter: drop-shadow(15px 15px 8px grey);filter: drop-shadow(15px 15px 8px grey)}.shadow-hi {-webkit-filter: drop-shadow(30px 53px 15px grey);filter: drop-shadow(30px 30px 15px grey)}.shadow-mid {-webkit-filter: drop-shadow(0px 0px 8px grey);filter: drop-shadow(0px 0px 8px grey)}*/


/* accordion styles */
p.accord-p{padding: 1.8rem;margin-bottom:1rem;}
p.accord-bg{padding: 1.8rem;margin-bottom:1rem;background-color: #4fc3f7}
p.accord-x-b:before{content: '\2795';padding-right:1.5rem}
p.accord-x:after{content: '\2795';float:right}
p.accord-x-b.active:before,p.accord-x.active:after{content: "\2796";}
p.accordion.active,p.accordion:hover,p[class*="accordion-s"].active,p[class*="accordion-s"]:hover{background-color:#f0f0f0}
p.accordion,p[class*="accordion-s"],p[class*="accordion-a"]{cursor: pointer;transition: 0.3s;-webkit-touch-callout: none;user-select: none}
p[class*="accordion-a"]{text-align:right;padding-right:1.5rem}
div.accordionPanel{padding:0 1.125em;background-color:white;max-height:0;overflow:hidden;transition:0.3s ease-in-out;opacity:0;margin-bottom:.625em}
div.accordionPanel.show{opacity:1;max-height:inherit}
p.open-all{background-color:#f6f;text-align:right;margin-right:1.250em}



/*
DEFAULT




Pixels	EMs	Percent	Points
1px 0.0625em
2px 0.125em
3px 0.1875em
4px 0.25em
5px 0.3125em
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.500em	50.0%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.750em	75.0%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
***** 16px	1.000em	100.0%	12pt *****
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.250em	125.0%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.500em	150.0%	18pt
60px 3.75em
*/


/* Section elements to enclose content */
section,.section{width:100%;padding:.125em 0 .120em}
.section {background-size:cover;background-position:center;background-repeat:no-repeat}

.heroSection{background-image:url(../images/hats.png)}
.bigStory{padding:1em 0;background-image:url(../images/vote-gop.png)}


.section-1 {
background-image: url('../images/values-bg.jpg');
color: #fff
}


/* containment elements to be cleared */
/* Add any other elements to be cleared here */
.container:before,.container-1:before,.container-2:before,.container-3:before,.container-4:before,.row:before,.row-1:before,.row-2:before,.row-3:before,.row-4:before,.pageHead:before,.menu:before{content:"";display:table}
.container:after,.container-1:after,.container-2:after,.container-3:after,.container-4:after,.row:after,.row-1:after,.row-2:after,.row-3:after,.row-4:after,.pageHead:after,.menu:after{content:"";display:table;clear:both}/*table,row*/

/* define containers */
.container,.container-1,.container-2,.container-3,.container-4,.row,.row-1,.row-2,.row-3,.row-4,.pageHead{margin:0 auto;position:relative}

/*.cnt{position:relative;box-sizing:border-box}*/

/* set container padding
.container-1{padding:0 .5%}.container-2{padding:0 1%}.container-3{padding:0 1.5%}.container-4{padding:0 2%}*/

/* set cell padding */
.row > div{padding:0}.row-1 > div{padding:0 .5%}.row-2 > div{padding:0 1%}.row-3 > div{padding:0 1.5%}.row-4 > div{padding:0 2%}

.row-1.zero > div:first-child,.row-2.zero > div:first-child,.row-3.zero > div:first-child,.row-4.zero > div:first-child{padding-left:0}
.row-1.zero > div:last-child,.row-2.zero > div:last-child,.row-3.zero > div:last-child,.row-4.zero > div:last-child{padding-right:0} 

/* cell containers */
.col{float:left}

/* cells | default size for all if "m" or "s" is not in use */
/*all sizes above 768*/
.col.l-15{width:14.99999%}
.col.l-25{width:24.99999%}
.col.l-33{width:33.33333%}
.col.l-40{width:39.99999%}
.col.l-50{width:49.99999%}
.col.l-60{width:59.99999%}
.col.l-67{width:66.66666%}
.col.l-75{width:74.99999%}
.col.l-85{width:84.99999%}
.col.l-100{width:99.99999%}
@media(max-width:47.9375em){/*max width of 767px, we start reducing*/
.col.m-15{width:14.99999%}
.col.m-25{width:24.99999%}
.col.m-33{width:33.33333%}
.col.m-40{width:39.99999%}
.col.m-50{width:49.99999%}
.col.m-60{width:59.99999%}
.col.m-67{width:66.66666%}
.col.m-75{width:74.99999%}
.col.m-85{width:84.99999%}
.col.m-100{width:99.99999%}
.mtal{text-align:left}.mtac{text-align:center}.mtar{text-align:right}
.row-2 .mfull.p0 {padding:0}
.sidebar.sidebar-display {display: none}
.sidebar-button {display: block}
}
@media(max-width:26.25em){/*max width of 420px, reduce more*/
.col.s-15{width:14.99999%}
.col.s-25{width:24.99999%}
.col.s-33{width:33.33333%}
.col.s-40{width:39.99999%}
.col.s-50{width:49.99999%}
.col.s-60{width:59.99999%}
.col.s-67{width:66.66666%}
.col.s-75{width:74.99999%}
.col.s-85{width:84.99999%}
.col.s-100{width:99.99999%}
.stal{text-align:left}.stac{text-align:center}.star{text-align:right}
}

/* hide from certain sizes styles */
/* very large, newer hd screens only css 1366+ */
@media (min-width:85.375em){.hide-large{display:none !important}}
/* large desktop/laptop, tablet landscaping 768 to 1365 */
@media (min-width:48em) and (max-width:85.3125em){.hide-semi-large{display:none !important}}
/* tablet, medium screens only 421 to 767 */
@media (min-width:26.3125em) and (max-width:47.9375em){.hide-medium{display:none !important}}
/* small screens only, mobile 420- */
@media (max-width:26.25em) {.hide-small{display:none !important}.mobile{display:block;width:100%!important}}

/* min width for sidebar, etc control, 768 */
@media (min-width:48em) {.sidebar.sidebar-display {display: block !important}.sidebar-button{display:none !important}.hide-large-up{display: none !important}}


p{line-height:1.6em}
p+p{margin-top:.9em}
ul+h3{margin-top:1em}
/* address mid section first instance headings Use 'mid' class with the container class */
div.mid h2:first-child,div.mid h3:first-child,div.mid h4:first-child,div.mid h5:first-child,div.mid h6:first-child{margin-top:1em}
.notm {margin-top:0}
div.mid{margin-bottom:2em}



/* set positioning margins */
.pre-15{margin-left: 14.99999%; position:relative}.pre-25{margin-left: 24.99999%; position:relative}.pre-33{margin-left: 33.33333%; position:relative}
.pre-40{margin-left: 39.99999%; position:relative}.pre-50{margin-left: 49.99999%; position:relative}.pre-60{margin-left: 59.99999%; position:relative}
.pre-67{margin-left: 66.66666%; position:relative}.pre-75{margin-left: 74.99999%; position:relative}.pre-85{margin-left: 84.99999%; position:relative}



/*
CUSTOM
*/

/* pane-1
create a style to override the .row-1 > div {padding:0} when less than 414 px.
This style will be added/and only used when less than 414 px
It will add padding to row-[n] classes using it when less than 414.
all other rows will collapse as normal.

*/


/* TEST STYLES */
.testbg1 {background-color:blanchedalmond}.testbg2 {background-color:gainsboro}.testbg3 {background-color:lavender}.testbg4 {background-color:linen}.testbg5 {background-color:wheat}.testborder1{border:1px solid red}.testborder2{border:1px solid green}.ruler {background:url(../images/rule.png) no-repeat top left;background-color:black;height:30px}
.rulerFixed {background:url(../images/rule.png) top left; height:30px; width:100%; background-color:#000; position:fixed; z-index:10}
.testBox{position:fixed;top:0; left: 0; width:400px; height:100px; z-index:30; background-color:#ddd;margin-top:35px}
/* END TEST STYLES */

div.alertBox{line-height:13pt;padding:.4em}
div.alertBox span{font-size:1.1em;color:#cc0000;padding-right:.3em}
p+div.alertBox,ul+div.alertBox,table+div.alertBox,div+div.alertBox,section+div.alertBox,
p+div.alertBoxX,ul+div.alertBoxX,table+div.alertBoxX,div+div.alertBoxX,section+div.alertBoxX{margin:1.3rem 0}
div.alertBox+div.alertBox,div.alertBoxX+div.alertBoxX{margin:1rem 0}
div.alertBox p{line-height:1.5em;display:inline;padding-left:.5em}
div.alertBox ul,div.alertBoxX ul{list-style:none outside;margin:.5em 0}
div.alertBox ol{list-sytle:decimal outside;margin:.5em 0}
div.alertBox ul.bullet,div.alertBoxX ul.bullet{list-style:disc outside}
div.alertBox ol li{padding-left:.5em;line-height:1.7em}
div.alertBox ul li,div.alertBoxX ul li{margin-left:.25em;line-height:1.7em}
div.alertBox ul li + li,div.alertBox ol li + li {margin-top:1rem}
div.alertBox ul.bullet li,div.alertBoxX ul.bullet li{margin-left:2rem;line-height:1.7em}
div.alertBox span.note-icon {background-image:url(../images/note-icon.png);background-repeat:no-repeat;padding-left:30px; background-position:center left}
div.alertBox span.important-icon {background-image:url(../images/important-icon.png);background-repeat:no-repeat;padding-left:30px; background-position:center left}
div.alertBox span.caution-icon {background-image:url(../images/caution-icon.png);background-repeat:no-repeat;padding-left:30px; background-position:center left}
div.alertBox span.warning-icon {background-image:url(../images/warning-icon.png);background-repeat:no-repeat;padding-left:30px; background-position:center left}
div.alertBoxX {margin:.625em .3125em;line-height:.875em;border:solid 1px #cccccc;padding:.3125em}
div.alertBoxX span {color:#e60000;font-weight:bold;display:inline-block;margin-right:.625em}
.alertBoxX ol {padding-top:.3125em }

div.seeAlso dt{font-size:1.5em;margin:.9em 0 .2em}
div.seeAlso dd{padding-left:.3em;font-size:1.1em;line-height:1.2em}
div.seeAlso dd a{color:#06F}
div.seeAlso dd a:hover{color:#09F}

div.imageFigure{text-align:center;margin:2em 0 1em}
div.imageFigure img{max-width:100%}
div.imageFigure div{display:inline-block;width:auto}
div.imageFigure div p{text-align:left}
div.imageFigure div p span{font-weight:600;font-style:italic;padding-right:.7em}



/* header section */
.pageHead{min-height:88px;}.pageHead>.logoCnt{float:left;width:375px}.logoCnt>img{width:100%;display:block}
.navIcon{top:1em; right:1em; width:125px;height:50px;display:inline;position:relative;float:right;background:green url(../images/menu-icon.png) center; background-repeat:no-repeat;border-radius:3px}

.navIcon:hover {background-color:#009933;cursor:pointer;transition:background-color 0.3s linear 0s}
#upperNav{position: absolute; top:0;width:100%;z-index:10}
.nav {width:100%;margin:0 auto;padding: 0 1em 0 1em}
div.nav > div {padding-bottom:0;margin-top:1%}
#navBoxCnt h3{font-size:2.0em;line-height:1.25em;color:#ddd;margin:0;margin-bottom:.2em}

#navBox-1 a,#navBox-2 a,#navBox-3 a,#navBox-4 a{color:#fff;line-height:1.5em;padding-left:1em;display:block}
#navBox-1 a:hover, #navBox-2 a:hover, #navBox-3 a:hover, #navBox-4 a:hover{padding-left:1.05em;color:#ddd;text-decoration:none}
#navBox-4 button { background-color:#fff; line-height:1.4em; padding:0.5em 1em;display:block; width:150px;margin-left:1em}
#navBox-4 button:hover {background-color:#eee;}


#upperNav {
background:rgb(90, 90, 90);
/*opacity:.9;*/
overflow: hidden;
transition: height 0.1s linear 0s}
.closeNav {background:rgb(200,0,0);opacity:.85;
position:absolute; right:0; top:0; color:#fff; font-weight:800;text-align:center;padding:5px}
.closeNav:hover {cursor:pointer}
/* END header section */

/* section css */

/*.heroSection {padding:1em 0}*/
.heroSection h2 {font-weight:800;font-size:5.0em}

.bigStory {padding:1em 0;overflow:visible}
.bigStory h2 {font-weight:800;font-size:6.0em}
.bigStory p {font-size:3em; line-height:1.4em;color:#fff}
.bigStory a {position:relative;float:right;font-size:3.3em; line-height:1.8em;color:#ddd}
.bigStory a:hover {color:red;text-decoration:none}
.bigStory a:before {content:"~"}


/* use 'row' with imageContentCnt. DO NOT use a container if you want the content to expand full width */
.imageContentCnt div {margin-bottom:2em;padding:0}
.imageContentCnt p{padding:0 .5em}



/* custom css starts here */

@media only screen {
/* defulat css that modern 'only' browsers use */

.heroSection{background-image:url(../images/hats.png);background-size:cover;background-position:center}
.bigStory{padding:1em 0;background-image:url(../images/vote-gop.png);background-size:cover;background-position:center}
.modal-content{width:70%}
}

@media (max-width:85.3125em) {
.container{width:97%}
h1{font-size:3em;text-align:center}
h2{font-size:2.9em}
h3{font-size:2.3em}
h4{font-size:2.1em}
h5{font-size:1.5em}
h1,h2,h3{margin:1em 0 .67em 0;line-height:1.1em;letter-spacing:-.03em;}
h4,h5,h6{margin:.37em 0 .45em 0;line-height:1em}


.bigStory h2 {font-size:5em}
.bigStory p {font-size:2.5em}
.bigStory a {font-size:2.8em}
section.imgcnt p {font-size:1.9em;padding-top:20%;}

}

@media (max-width: 48em) {
.container{width:96%}
h1{font-size:2.3em;text-align:center}
h2{font-size:2em}
h3{font-size:1.8em}
h4{font-size:1.8em}
h5{font-size:1.4em}
h6{font-size:1.2em}
h1,h2,h3{margin:1em 0 .67em 0;line-height:1.1em;letter-spacing:-.03em;}
h4,h5,h6{margin:.37em 0 .45em 0;line-height:1em}

section.imgcnt p {font-size:1.2em;padding-top:20%;}
.pageHead{min-height:80px;}.pageHead>.logoCnt{width:250px}

.bigStory h2 {font-size:4em}
.bigStory p {font-size:1.5em}
.bigStory a {font-size:1.6em}
.modal-content{width:80%}
}

@media (max-width:26.25em) {

section, .section {padding:1em 0}
.site-logo-header {width:75%}
.pre-10,.pre-20,.pre-30,.pre-40,.pre-50,.pre-60,.pre-70,.pre-80,.pre-90 {margin-left:0;margin-top:20%}

h1{font-size:2.1em}
h2{font-size:1.9em}
h3{font-size:1.7em}
h4{font-size:1.45em}
h5{font-size:1.2em}
h6{font-size:1.1em}
h1,h2,h3{margin:.75em 0 .35em 0;line-height:1.1em;letter-spacing:-.03em;}h4,h5,h6{margin:.37em 0 .15em 0;line-height:1em;letter-spacing:-.03em;}
p,p.tac,p.tal,p.tar{text-align:justify}div.mid h2:first-child,div.mid h3:first-child,div.mid h4:first-child,div.mid h5:first-child,div.mid h6:first-child{margin-top:.45em}

.pageHead{min-height:55px;}.pageHead>.logoCnt{width:200px}
.navIcon{top:.7em; right:1em; width:30px;height:30px;display:inline;position:relative;float:right;background:green url(../images/sm-mobile-menu-icon.png) center; background-repeat:no-repeat;border-radius:2px}

.heroSection h2 {font-size:3.0em}
.bigStory h2 {font-size:3em}
.bigStory p {font-size:1.5em}
.bigStory a {font-size:1.6em}

.row-1 > div {padding:0}
.row-2 > div {padding:0}
.row-3 > div {padding:0}
.row-4 > div {padding:0}

section.imgcnt [class*="row"] div {width:100%; float:none !important}
section.imgcnt [class*="row"]{margin-top:4em}
section.imgcnt p {font-size:1.2em;padding-top:5%;}
.modal-content{width:90%}
}