@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: "OpenSans Regular";
	src: url("../fonts/Open_Sans/static/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "OpenSans Medium";
	src: url("../fonts/Open_Sans/static/OpenSans-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "OpenSans SemiBold";
	src: url("../fonts/Open_Sans/static/OpenSans-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "OpenSans Bold";
	src: url("../fonts/Open_Sans/static/OpenSans-Bold.ttf") format("truetype");
}

:root {
	
	--thm-white: #FFFFFF;	/*rgb(255, 255, 255)*/
	--thm-silver: #C0C0C0;	/*rgb(192, 192, 192)*/
	--thm-grey: #808080;	/*rgb(128, 128, 128)*/
	--thm-black: #000000;	/*rgb(0, 0, 0)*/
	--thm-red: #FF0000;	/*rgb(255, 0, 0)*/
	--thm-maroon:	#800000;	/*rgb(128, 0, 0)*/
	--thm-yellow: #FFFF00; 	/*rgb(255, 255, 0)*/
	--thm-orange: #FFA500; /*rgb(255, 165, 0)*/
	--thm-olive: #808000;	/*rgb(128, 128, 0)*/
	--thm-lime: #00FF00; /*rgb(0, 255, 0)*/
	--thm-green: #008000; /*rgb(0, 128, 0)*/
	--thm-aqua: #00FFFF;	/*rgb(0, 255, 255)*/
	--thm-teal: #008080; 	/*rgb(0, 128, 128)*/
	--thm-blue: #0000FF; 	/*rgb(0, 0, 255)*/
	--thm-navy: #000080; 	/*rgb(0, 0, 128)*/
	--thm-fuchsia: #FF00FF;	/*rgb(255, 0, 255)*/
	--thm-purple: #800080;	/*rgb(128, 0, 128)*/


  --thm-white-rgb: 255, 255, 255;
  --thm-silver-rgb: 192, 192, 192;
  --thm-grey-rgb: 128, 128, 128;
	--thm-black-rgb: 0,0,0;
	--thm-red-rgb: 255, 0, 0;
	--thm-maroon-rgb: 128, 0, 0;
  --thm-yellow-rgb: 255, 255, 0;
	--thm-orange-rgb: 255, 165, 0;
	--thm-olive-rgb: 128, 128, 0;
	--thm-lime-rgb: 0, 255, 0;
  --thm-green-rgb: 0, 128, 0;
	--thm-aqua-rgb: 0, 255, 255;
	--thm-teal-rgb: 0, 128, 128;
	--thm-blue-rgb: 0, 0, 255;
	--thm-navy-rgb: 0, 0, 128;
	--thm-fuchsia-rgb: 255, 0, 255;
	--thm-purple-rgb: 128, 0, 128;

	
	/* See custom.css if you want to change following */
	
	--thm-color: #333333;	/*rgb(51, 51, 51)*/
  --thm-color-rgb: 51, 51, 51;
	--thm-font-color: #333333; /*rgb(51, 51, 51)*/
	--thm-font-color-rgb: 51, 51, 51;
	--thm-link: #0034FF;	/*rgb(0, 52, 255)*/
	--thm-link-rgb: 0, 52, 255;
	--thm-border: #E8E8E8; /*rgb(232, 232, 232)*/
	--thm-border-rgb: 232, 232, 232;

  --thm-font-1: "OpenSans Regular", sans-serif, Arial;
  --thm-font-2: "OpenSans Medium", sans-serif, Arial;
  --thm-font-3: "OpenSans SemiBold", sans-serif, Arial;
  --thm-font-4: "OpenSans Bold", sans-serif, Arial;
}

/*------- HTML, Body Section ---------*/
html, body {
	font-family: var(--thm-font-1);
  font-size: 16px;
  line-height: 1.6em;
  color: var(--thm-font-color);
	/*
	background-image:url("../images/bg/bg-03.png");
	background-color:#b5adaa;
	background-size:contain;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position:50% 100px;
	*/
}

/*------- General Settings ---------*/
a {text-decoration: none;color: var(--thm-link);}
a.disabled {
	color: rgba(var(--thm-grey-rgb), .5);
	background-color: rgba(var(--thm-grey-rgb), .1);
  border-color: rgba(var(--thm-grey-rgb), .15);
	pointer-events: none;
}

img{display: block;}
strong{font-family: var(--thm-font-3)}

h1 {font-size: 42px;}
h2 {font-size: 36px;}
h3 {font-size: 26px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--thm-font-4);
	line-height: 1.6em;
	letter-spacing: 1px;
}

input, button, select, textarea, a {outline: none;margin: 0;}

input[type="date"],
input[type="datetime-local"],
input[type="time"]{
	-webkit-appearance: none;
  -moz-appearance: none;
	min-height: 1.2em;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"],
input[type="search"],
input[type="text"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="url"], select, textarea {
	padding: 9px;
	min-width: 0;
	font-family: var(--thm-font-1);
	font-size: 14px;
	color: var(--thm-font-color);
  border: 1px solid var(--thm-color);
  border-radius: 1px;
	box-sizing: border-box;
  background-color:transparent;
	outline-width:  1px;
	outline-offset: -4px;
	transition: all 0.3s ease-in-out;
}

input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="email"]:disabled,
input[type="month"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled,
input[type="time"]:disabled,
input[type="url"]:disabled,
input[type="week"], select:disabled, textarea:disabled {
  background-color: rgba(var(--thm-grey-rgb), .1);
  border-color: rgba(var(--thm-grey-rgb), .15);
  cursor: not-allowed;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus, select:focus, textarea:focus {
   box-shadow: inset 0 0 0 1px var(--thm-green); border-color: rgba(var(--thm-green-rgb),.8);outline-style:dashed;
}

button,input[type="reset"],input[type="submit"],input[type="button"] {
	padding: 9px 12px;
	font-family: var(--thm-font-2);
	font-size: 16px;
	line-height: 1.2em;
	color: var(--thm-white);
	letter-spacing: 1px;
	background-color: var(--thm-color);
  border: 1px solid var(--thm-color);
	border-radius: 1px;
  outline-width:  1px;
	outline-offset: -4px;
  transition: 0.3s ease-in-out;
}

button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	color:var(--thm-color);
  background-color:  transparent;
	border-color: var(--thm-color);
  cursor: pointer;
}

button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
	outline-style:dashed;
}

button:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
	color:rgba(var(--thm-color-rgb),.3);
	background-color: rgba(var(--thm-grey-rgb), .1);
  border-color: rgba(var(--thm-grey-rgb), .15);
  cursor: not-allowed;
}

button:disabled:hover,
input[type="reset"]:disabled:hover,
input[type="submit"]:disabled:hover,
input[type="button"]:disabled:hover {border-color: rgba(var(--thm-grey-rgb), .15);}

input.error:invalid, select.error:invalid:focus, textarea.error:invalid {	
	border-color: var(--thm-red);
	box-shadow: inset 0 0 0 1px var(--thm-red);
}
input:invalid:focus, select:invalid:focus, textarea:invalid:focus {	
	border-color: var(--thm-red);
	box-shadow: inset 0 0 0 1px var(--thm-red);
}

input.small{width: 78px}
input.medium{width: 140px}
input.mlarge{width: 240px;}
input.large{width: 280px;}
input.xlarge{width: 380px;}

input.fill{width: auto}
select.fill{width: auto}


/*------- Containers ---------*/
#root {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto
}

.foil {
  /*border: 1px solid red;*/
	position: relative;
	max-width: 1240px;
	margin-left: auto;
  margin-right: auto
}

.page-header {font-size: 14px;}
.page-content {flex: 1 1 auto;}
.page-footer{}

/*------- Flex Containers ---------*/
.grid{display:grid;}

.row {display: flex;}
.row.fdrr {flex-direction: row-reverse}

.row.cg-5 {column-gap: 5px}
.row.cg-10 {column-gap: 10px}
.row.cg-20 {column-gap: 20px}
.row.cg-30 {column-gap: 30px}
.row.cg-40 {column-gap: 40px}
.row.cg-50 {column-gap: 50px}
.row.cg-60 {column-gap: 60px}
.row.cg-80 {column-gap: 80px}
.row.cg-100 {column-gap: 100px}

.col {display:flex; flex-direction: column}
.col.fdcr {flex-direction: column-reverse}

.col.rg-5 {row-gap: 5px}
.col.rg-10 {row-gap: 10px}
.col.rg-15 {row-gap: 15px}
.col.rg-20 {row-gap: 20px}
.col.rg-30 {row-gap: 30px}
.col.rg-40 {row-gap: 40px}
.col.rg-50 {row-gap: 50px}
.col.rg-60 {row-gap: 60px}
.col.rg-80 {row-gap: 80px}

.row.gg-5, .col.gg-5{gap:5px; grid-gap: 5px;}
.row.gg-10, .col.gg-10{gap:10px; grid-gap: 10px;}
.row.gg-20, .col.gg-20{gap:20px; grid-gap: 20px;}
.row.gg-15, .col.gg-15{gap:15px; grid-gap: 15px;}
.row.gg-30, .col.gg-40{gap:30px; grid-gap: 30px;}
.row.gg-40, .col.gg-40{gap:40px; grid-gap: 40px;}

.row.wrap, .col.wrap{flex-wrap: wrap}

.row.aifs, .col.aifs {align-items: flex-start}
.row.aife, .col.aife {align-items: flex-end}
.row.aic, .col.aic {align-items: center}
.row.aib, .col.aib {align-items:baseline}

.row.asc, .col.asc, .asc{align-self: center}
.row.asfs, .col.asfs, .asfs{align-self: flex-start}
.row.asfe, .col.asfe, .asfe{align-self: flex-end}
.row.ass, .col.ass, .ass{align-self:stretch}

.row.acfs, .col.acfs{align-content:flex-start}

.row.jcsb, .col.jcsb {justify-content: space-between}
.row.jcfs, .col.jcfs {justify-content:flex-start}
.row.jcfe, .col.jcfe {justify-content:flex-end}
.row.jcc, .col.jcc {justify-content: center}

.row.acc, .col.acc {align-content: center}
.row.acfe, .col.acfe {align-content:flex-end}

.row.ofa, .col.ofa {overflow: auto}
.row.ws-nowrap, .col.ws-nowrap {white-space: nowrap;}

.fd-280{flex:0 1 280px;}
.fd-300{flex:0 1 300px;}
.fd-320{flex:0 1 320px;}
.fd-360{flex:0 1 360px;}
.fd-400{flex:0 1 400px;}
.fd-500{flex:0 1 400px;}
 
.fw-80{flex:0 0 80px;}
.fw-120{flex:0 0 120px;}
.fw-160{flex:0 0 160px;}
.fw-200{flex:0 0 200px;}
.fw-240{flex:0 0 240px;}
.fw-300{flex:0 0 300px;}
.fw-340{flex:0 0 340px;}
.fw-360{flex:0 0 360px;}
.fw-400{flex:0 0 400px;}
.fw-440{flex:0 0 440px;}
.fw-500{flex:0 0 500px;}
.fw-540{flex:0 0 540px;}
.fw-700{flex:0 0 700px;}

.ff-100{flex:1 0 100px}
.ff-200{flex:1 0 200px}
.ff-300{flex:1 0 300px}
.ff-400{flex:1 0 400px}

.fp-50{flex:0 1 50%;}

.fill{flex:1 1 auto;}

/* --------------- Tab Navigation -----------*/
.tabNav{
	display:flex;
	/*border:1px solid rgba(var(--thm-grey-rgb),.1);*/
	column-gap: 10px;
	flex-wrap: wrap;
}

.tabNav a{
	color:var(--thm-font-color);
	background-color:var(--thm-white);
	padding: 6px 16px;
	border-top:3px solid rgba(var(--thm-grey-rgb),.2);
	border-left:1px solid rgba(var(--thm-grey-rgb),.2);
	border-right:1px solid rgba(var(--thm-grey-rgb),.2);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	transition:all .3s ease-in-out;
}
.tabNav a:hover{color:var(--thm-color);}
.tabNav a.active{
	color:var(--thm-color);
	border-top-color:var(--thm-color);
	z-index: 10;/*!important always set the container z-index less than this */
}

.tabNav-content__foil{
	position: relative; 
	top:-1px; 
	z-index: 9;
	border:1px solid rgba(var(--thm-grey-rgb),.2); 
}
/*------- Input foil ---------*/
.input__foil .label{
	display:flex;
	flex-direction: column-reverse;
	row-gap:5px;
	grid-row-gap:5px;
}

.input__foil .label.gender{grid-row-gap:0;row-gap:0}
.input__foil .label.required span::after,
.input__foil .required::after,
.input__foil input:required + span::after,
.input__foil select:required + span::after,
.input__foil textarea:required + span::after{
	content:'*';
	color:var(--thm-red);
	margin-left: 5px;
}

/*------- Modal ---------*/
.modal-backdrop{
	background-color: rgba(var(--thm-black-rgb),.5);
	position: fixed;
	left: 0;
	width: 100vw;
	height: 100vh;
	bottom: 0;
	visibility: hidden;
	opacity: 0;
	transition: all .25s ease-in-out;
}

.spiner__foil{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	color:var(--thm-color);
	visibility: hidden;
	opacity: 0;
	transition: all .25s ease-in-out;
}

.spiner__foil .spiner{
	position: relative; 
	top: 40%;
	display: flex;
	column-gap: 10px;
	align-items: center;
	padding: 8px 10px;
	background-color: rgba(var(--thm-white-rgb),.9);
	border: 1px solid rgba(var(--thm-color-rgb),.5);
	border-radius: 4px;
	transition: all .25s ease-in-out;
}

.modal__foil.show .modal-backdrop,
.modal__foil.show .spiner__foil{
	visibility: visible;
	opacity: 1
}

/* --------------- Male/Female Option -----------*/
.gender input{opacity:0; width:0; height:0; padding:0; margin:0; outline:none;}
.gender label span{
	padding:6px 20px; 
	background-color: rgba(var(--thm-black-rgb),.08);
	color:var(--thm-grey);
	text-align: center; 
	border-radius:6px;
	cursor: pointer;
	transition: .3s ease-in-out;
}
.gender input[value="male"]:checked + span {
	background-color:rgba(var(--thm-blue-rgb),.1);
	color:var(--thm-blue);
}

.gender input[value="female"]:checked + span {
	background-color:rgba(var(--thm-red-rgb),.1);
	color:var(--thm-red);
}

/* --------------- Toggle Slider -----------*/
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	border:1px solid var(--thm-color);
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch .slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 1px;
  background-color: var(--thm-white);
  -webkit-transition: 0.4s;
	outline-width: 1px;
	outline-offset: -3px;
}

.switch input:checked + .slider {background-color: var(--thm-color);}
.switch input:focus + .slider {box-shadow: none;}

.switch input:focus + .slider::before {
	outline-style: dashed;
	outline-width: 1px;
	outline-offset: -3px;
}

.switch input:checked + .slider::before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}

/* Rounded sliders */
.switch .slider.round {border-radius: 34px;}
.switch .slider.round:before {border-radius: 50%;}

/*------- Switch Colors ---------*/
.switch.purple input:checked + .slider {background-color: var(--thm-purple);}
.switch.purple .slider {border-color: var(--thm-purple);}

.switch.fuchsia input:checked + .slider {background-color: var(--thm-fuchsia);}
.switch.fuchsia .slider {border-color: var(--thm-fuchsia);}

.switch.navy input:checked + .slider {background-color: var(--thm-navy);}
.switch.navy .slider {border-color: var(--thm-navy);}

.switch.blue input:checked + .slider {background-color: var(--thm-blue);}
.switch.blue .slider {border-color: var(--thm-blue);}

.switch.teal input:checked + .slider {background-color: var(--thm-teal);}
.switch.teal .slider {border-color: var(--thm-teal);}

.switch.aqua input:checked + .slider {background-color: var(--thm-aqua);}
.switch.aqua .slider {border-color: var(--thm-aqua);}

.switch.green input:checked + .slider {background-color: var(--thm-green);}
.switch.green .slider {border-color: var(--thm-green);}

.switch.lime input:checked + .slider {background-color: var(--thm-lime);}
.switch.lime .slider {border-color: var(--thm-lime);}

.switch.olive input:checked + .slider {background-color: var(--thm-olive);}
.switch.olive .slider {border-color: var(--thm-olive);}

.switch.orange input:checked + .slider {background-color: var(--thm-orange);}
.switch.orange .slider {border-color: var(--thm-orange);}

.switch.yellow .slider::before {background-color: rgba(var(--thm-black-rgb),.8)}
.switch.yellow input:checked + .slider {background-color: var(--thm-yellow);}
.switch.yellow .slider {border-color: var(--thm-yellow);}

.switch.maroon input:checked + .slider {background-color: var(--thm-maroon);}
.switch.maroon .slider {border-color: var(--thm-maroon);}

.switch.red input:checked + .slider {background-color: var(--thm-red);}
.switch.red .slider {border-color: var(--thm-red);}

.switch.black input:checked + .slider {background-color: var(--thm-black);}
.switch.black .slider {border-color: var(--thm-black);}

.switch.grey input:checked + .slider {background-color: var(--thm-grey);}
.switch.grey .slider {border-color: var(--thm-grey);}

.switch.silver input:checked + .slider {background-color: var(--thm-silver);}
.switch.silver .slider::before {background-color: rgba(var(--thm-black-rgb),.8)}
.switch.silver .slider{border-color: var(--thm-silver)}

.switch.white input:checked + .slider {background-color: var(--thm-white);}
.switch.white .slider::before {background-color: rgba(var(--thm-black-rgb),.8)}
.switch.white .slider{border-color: var(--thm-white)}

/*------- Input Colors ---------*/
input.purple, select.purple, textarea.purple{border: 1px solid var(--thm-purple);}
input.fuchsia, select.fuchsia, textarea.fuchsia{border: 1px solid var(--thm-fuchsia);}
input.navy, select.navy, textarea.navy{border: 1px solid var(--thm-navy);}
input.blue, select.blue, textarea.blue{border: 1px solid var(--thm-blue);}
input.teal, select.teal, textarea.teal{border: 1px solid var(--thm-teal);}
input.aqua, select.aqua, textarea.aqua{border: 1px solid var(--thm-aqua);}
input.green, select.green, textarea.green{border: 1px solid var(--thm-green);}
input.lime, select.lime, textarea.lime{border: 1px solid var(--thm-lime);}
input.olive, select.olive, textarea.olive{border: 1px solid var(--thm-olive);}

input.orange, select.orange, textarea.orange{border: 1px solid var(--thm-orange);}
select.orange{color:var(--thm-font-color);}
select.orange:invalid:focus{border-color: var(--thm-red);}
select.orange:focus{border-color: rgba(var(--thm-green-rgb),.8);}

input.yellow, select.yellow, textarea.yellow{border: 1px solid var(--thm-yellow);color:var(--thm-white);}
input.maroon, select.maroon, textarea.maroon{border: 1px solid var(--thm-maroon);}
input.red, select.red, textarea.red{border: 1px solid var(--thm-red);}
input.black, select.black, textarea.black{border: 1px solid var(--thm-black);}
input.grey, select.grey, textarea.grey{border: 1px solid var(--thm-grey);}
input.silver, select.silver, textarea.silver{border: 1px solid var(--thm-silver);}
input.white, select.white, textarea.white{border: 1px solid var(--thm-white);color:var(--thm-white);}

/*------- Button & Links ---------*/
.btn,
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn
{
	padding: 9px 12px;
	font-family: var(--thm-font-2);
	font-size: 16px;
	line-height: 1.2em;
	color: var(--thm-color);
	letter-spacing: 1px;
	background-color: transparent;
  border: 1px solid var(--thm-color);
	border-radius: 1px;
	transition: 0.3s ease;
}

.btn:hover,
input[type="submit"].btn:hover,
input[type="button"].btn:hover,
input[type="reset"].btn:hover{
	color: var(--thm-white);
	background-color: var(--thm-color);
	border-color: var(--thm-color);
}

.btn.disabled {
	color: rgba(var(--thm-grey-rgb), .5);
	background-color: rgba(var(--thm-grey-rgb), .1);
  border-color: rgba(var(--thm-grey-rgb), .15);
	pointer-events: none;
	text-shadow: none;
}

/*---------- Theme --------*/
a.btn.theme
{
	color: var(--thm-white);
	background-color: var(--thm-color);
	border: 1px solid var(--thm-color);
}

a.btn.theme:hover{
	color: var(--thm-color);
	background-color: transparent;
	border-color:var(--thm-color);	
}

/*---------- Purple --------*/
a.btn.purple,
button.purple,
input[type="reset"].purple,
input[type="submit"].purple,
input[type="button"].purple
{
	color: var(--thm-white);
	background-color: var(--thm-purple);
	border: 1px solid var(--thm-purple);
}

a.btn.purple:hover,
button.purple:hover,
input[type="reset"].purple:hover,
input[type="submit"].purple:hover,
input[type="button"].purple:hover

{
	color: var(--thm-purple);
	background-color: transparent;
	border-color:var(--thm-purple);
}

a.btn-alt.purple,
button.btn.purple,
input[type="reset"].btn.purple,
input[type="submit"].btn.purple,
input[type="button"].btn.purple
{
	color: var(--thm-purple);
	background-color: transparent;
	border: 1px solid var(--thm-purple);
}

a.btn-alt.purple:hover,
button.btn.purple:hover,
input[type="reset"].btn.purple:hover,
input[type="submit"].btn.purple:hover,
input[type="button"].btn.purple:hover
{
	color: var(--thm-white);
	background-color: var(--thm-purple);
	border: 1px solid var(--thm-purple);
}

/*---------- Fuschsia (Pink) --------*/
a.btn.fuchsia,
button.fuchsia,
input[type="reset"].fuchsia,
input[type="submit"].fuchsia,
input[type="button"].fuchsia
{
	color: var(--thm-white);
	background-color: var(--thm-fuchsia);
	border: 1px solid var(--thm-fuchsia);
}

a.btn.fuchsia:hover,
button.fuchsia:hover,
input[type="reset"].fuchsia:hover,
input[type="submit"].fuchsia:hover,
input[type="button"].fuchsia:hover

{
	color: var(--thm-fuchsia);
	background-color: transparent;
	border-color:var(--thm-fuchsia);
}

a.btn-alt.fuchsia,
button.btn.fuchsia,
input[type="reset"].btn.fuchsia,
input[type="submit"].btn.fuchsia,
input[type="button"].btn.fuchsia
{
	color: var(--thm-fuchsia);
	background-color: transparent;
	border: 1px solid var(--thm-fuchsia);
}

a.btn-alt.fuchsia:hover,
button.btn.fuchsia:hover,
input[type="reset"].btn.fuchsia:hover,
input[type="submit"].btn.fuchsia:hover,
input[type="button"].btn.fuchsia:hover
{
	color: var(--thm-white);
	background-color: var(--thm-fuchsia);
	border: 1px solid var(--thm-fuchsia);
}

/*---------- Navy --------*/
a.btn.navy,
button.navy,
input[type="reset"].navy,
input[type="submit"].navy,
input[type="button"].navy
{
	color: var(--thm-white);
	background-color: var(--thm-navy);
	border: 1px solid var(--thm-navy);
}

a.btn.navy:hover,
button.navy:hover,
input[type="reset"].navy:hover,
input[type="submit"].navy:hover,
input[type="button"].navy:hover

{
	color: var(--thm-navy);
	background-color: transparent;
	border-color:var(--thm-navy);
}

a.btn-alt.navy,
button.btn.navy,
input[type="reset"].btn.navy,
input[type="submit"].btn.navy,
input[type="button"].btn.navy
{
	color: var(--thm-navy);
	background-color: transparent;
	border: 1px solid var(--thm-navy);
}

a.btn-alt.navy:hover,
button.btn.navy:hover,
input[type="reset"].btn.navy:hover,
input[type="submit"].btn.navy:hover,
input[type="button"].btn.navy:hover
{
	color: var(--thm-white);
	background-color: var(--thm-navy);
	border: 1px solid var(--thm-navy);
}

/*---------- Blue --------*/
a.btn.blue,
button.blue,
input[type="reset"].blue,
input[type="submit"].blue,
input[type="button"].blue
{
	color: var(--thm-white);
	background-color: var(--thm-blue);
	border: 1px solid var(--thm-blue);
}

a.btn.blue:hover,
button.blue:hover,
input[type="reset"].blue:hover,
input[type="submit"].blue:hover,
input[type="button"].blue:hover

{
	color: var(--thm-blue);
	background-color: transparent;
	border-color:var(--thm-blue);
}

a.btn-alt.blue,
button.btn.blue,
input[type="reset"].btn.blue,
input[type="submit"].btn.blue,
input[type="button"].btn.blue
{
	color: var(--thm-blue);
	background-color: transparent;
	border: 1px solid var(--thm-blue);
}

a.btn-alt.blue:hover,
button.btn.blue:hover,
input[type="reset"].btn.blue:hover,
input[type="submit"].btn.blue:hover,
input[type="button"].btn.blue:hover
{
	color: var(--thm-white);
	background-color: var(--thm-blue);
	border: 1px solid var(--thm-blue);
}

/*---------- Teal --------*/
a.btn.teal,
button.teal,
input[type="reset"].teal,
input[type="submit"].teal,
input[type="button"].teal
{
	color: var(--thm-white);
	background-color: var(--thm-teal);
	border: 1px solid var(--thm-teal);
}

a.btn.teal:hover,
button.teal:hover,
input[type="reset"].teal:hover,
input[type="submit"].teal:hover,
input[type="button"].teal:hover

{
	color: var(--thm-teal);
	background-color: transparent;
	border-color:var(--thm-teal);
}

a.btn-alt.teal,
button.btn.teal,
input[type="reset"].btn.teal,
input[type="submit"].btn.teal,
input[type="button"].btn.teal
{
	color: var(--thm-teal);
	background-color: transparent;
	border: 1px solid var(--thm-teal);
}

a.btn-alt.teal:hover,
button.btn.teal:hover,
input[type="reset"].btn.teal:hover,
input[type="submit"].btn.teal:hover,
input[type="button"].btn.teal:hover
{
	color: var(--thm-white);
	background-color: var(--thm-teal);
	border: 1px solid var(--thm-teal);
}

/*---------- Aqua --------*/
a.btn.aqua,
button.aqua,
input[type="reset"].aqua,
input[type="submit"].aqua,
input[type="button"].aqua
{
	color: var(--thm-white);
	background-color: var(--thm-aqua);
	border: 1px solid var(--thm-aqua);
}

a.btn.aqua:hover,
button.aqua:hover,
input[type="reset"].aqua:hover,
input[type="submit"].aqua:hover,
input[type="button"].aqua:hover

{
	color: var(--thm-aqua);
	background-color: transparent;
	border-color:var(--thm-aqua);
}

a.btn-alt.aqua,
button.btn.aqua,
input[type="reset"].btn.aqua,
input[type="submit"].btn.aqua,
input[type="button"].btn.aqua
{
	color: var(--thm-aqua);
	background-color: transparent;
	border: 1px solid var(--thm-aqua);
}

a.btn-alt.aqua:hover,
button.btn.aqua:hover,
input[type="reset"].btn.aqua:hover,
input[type="submit"].btn.aqua:hover,
input[type="button"].btn.aqua:hover
{
	color: var(--thm-white);
	background-color: var(--thm-aqua);
	border: 1px solid var(--thm-aqua);
}

/*---------- Green --------*/
a.btn.green,
button.green,
input[type="reset"].green,
input[type="submit"].green,
input[type="button"].green
{
	color: var(--thm-white);
	background-color: var(--thm-green);
	border: 1px solid var(--thm-green);
}

a.btn.green:hover,
button.green:hover,
input[type="reset"].green:hover,
input[type="submit"].green:hover,
input[type="button"].green:hover

{
	color: var(--thm-green);
	background-color: transparent;
	border-color:var(--thm-green);
}

a.btn-alt.green,
button.btn.green,
input[type="reset"].btn.green,
input[type="submit"].btn.green,
input[type="button"].btn.green
{
	color: var(--thm-green);
	background-color: transparent;
	border: 1px solid var(--thm-green);
}

a.btn-alt.green:hover,
button.btn.green:hover,
input[type="reset"].btn.green:hover,
input[type="submit"].btn.green:hover,
input[type="button"].btn.green:hover
{
	color: var(--thm-white);
	background-color: var(--thm-green);
	border: 1px solid var(--thm-green);
}

/*---------- Lime --------*/
a.btn.lime,
button.lime,
input[type="reset"].lime,
input[type="submit"].lime,
input[type="button"].lime
{
	color: var(--thm-white);
	background-color: var(--thm-lime);
	border: 1px solid var(--thm-lime);
}

a.btn.lime:hover,
button.lime:hover,
input[type="reset"].lime:hover,
input[type="submit"].lime:hover,
input[type="button"].lime:hover

{
	color: var(--thm-lime);
	background-color: transparent;
	border-color:var(--thm-lime);
}

a.btn-alt.lime,
button.btn.lime,
input[type="reset"].btn.lime,
input[type="submit"].btn.lime,
input[type="button"].btn.lime
{
	color: var(--thm-lime);
	background-color: transparent;
	border: 1px solid var(--thm-lime);
}

a.btn-alt.lime:hover,
button.btn.lime:hover,
input[type="reset"].btn.lime:hover,
input[type="submit"].btn.lime:hover,
input[type="button"].btn.lime:hover
{
	color: var(--thm-white);
	background-color: var(--thm-lime);
	border: 1px solid var(--thm-lime);
}

/*---------- Olive --------*/
a.btn.olive,
button.olive,
input[type="reset"].olive,
input[type="submit"].olive,
input[type="button"].olive
{
	color: var(--thm-white);
	background-color: var(--thm-olive);
	border: 1px solid var(--thm-olive);
}

a.btn.olive:hover,
button.olive:hover,
input[type="reset"].olive:hover,
input[type="submit"].olive:hover,
input[type="button"].olive:hover

{
	color: var(--thm-olive);
	background-color: transparent;
	border-color:var(--thm-olive);
}

a.btn-alt.olive,
button.btn.olive,
input[type="reset"].btn.olive,
input[type="submit"].btn.olive,
input[type="button"].btn.olive
{
	color: var(--thm-olive);
	background-color: transparent;
	border: 1px solid var(--thm-olive);
}

a.btn-alt.olive:hover,
button.btn.olive:hover,
input[type="reset"].btn.olive:hover,
input[type="submit"].btn.olive:hover,
input[type="button"].btn.olive:hover
{
	color: var(--thm-white);
	background-color: var(--thm-olive);
	border: 1px solid var(--thm-olive);
}

/*---------- Orange --------*/
a.btn.orange,
button.orange,
input[type="reset"].orange,
input[type="submit"].orange,
input[type="button"].orange
{
	color: var(--thm-white);
	background-color: var(--thm-orange);
	border: 1px solid var(--thm-orange);
}

a.btn.orange:hover,
button.orange:hover,
input[type="reset"].orange:hover,
input[type="submit"].orange:hover,
input[type="button"].orange:hover

{
	color: var(--thm-orange);
	background-color: transparent;
	border-color:var(--thm-orange);
}

a.btn-alt.orange,
button.btn.orange,
input[type="reset"].btn.orange,
input[type="submit"].btn.orange,
input[type="button"].btn.orange
{
	color: var(--thm-orange);
	background-color: transparent;
	border: 1px solid var(--thm-orange);
}

a.btn-alt.orange:hover,
button.btn.orange:hover,
input[type="reset"].btn.orange:hover,
input[type="submit"].btn.orange:hover,
input[type="button"].btn.orange:hover
{
	color: var(--thm-white);
	background-color: var(--thm-orange);
	border: 1px solid var(--thm-orange);
}

/*---------- Yellow --------*/
a.btn.yellow,
button.yellow,
input[type="reset"].yellow,
input[type="submit"].yellow,
input[type="button"].yellow
{
	color: var(--thm-black);
	background-color: var(--thm-yellow);
	border: 1px solid var(--thm-yellow);
}

a.btn.yellow:hover,
button.yellow:hover,
input[type="reset"].yellow:hover,
input[type="submit"].yellow:hover,
input[type="button"].yellow:hover

{
	color: var(--thm-yellow);
	background-color: transparent;
	border-color:var(--thm-yellow);
}

a.btn-alt.yellow,
button.btn.yellow,
input[type="reset"].btn.yellow,
input[type="submit"].btn.yellow,
input[type="button"].btn.yellow
{
	color: var(--thm-yellow);
	background-color: transparent;
	border: 1px solid var(--thm-yellow);
}

a.btn-alt.yellow:hover,
button.btn.yellow:hover,
input[type="reset"].btn.yellow:hover,
input[type="submit"].btn.yellow:hover,
input[type="button"].btn.yellow:hover
{
	color: var(--thm-black);
	background-color: var(--thm-yellow);
	border: 1px solid var(--thm-yellow);
}

/*---------- Maroon --------*/
a.btn.maroon,
button.maroon,
input[type="reset"].maroon,
input[type="submit"].maroon,
input[type="button"].maroon
{
	color: var(--thm-white);
	background-color: var(--thm-maroon);
	border: 1px solid var(--thm-maroon);
}

a.btn.maroon:hover,
button.maroon:hover,
input[type="reset"].maroon:hover,
input[type="submit"].maroon:hover,
input[type="button"].maroon:hover

{
	color: var(--thm-maroon);
	background-color: transparent;
	border-color:var(--thm-maroon);
}

a.btn-alt.maroon,
button.btn.maroon,
input[type="reset"].btn.maroon,
input[type="submit"].btn.maroon,
input[type="button"].btn.maroon
{
	color: var(--thm-maroon);
	background-color: transparent;
	border: 1px solid var(--thm-maroon);
}

a.btn-alt.maroon:hover,
button.btn.maroon:hover,
input[type="reset"].btn.maroon:hover,
input[type="submit"].btn.maroon:hover,
input[type="button"].btn.maroon:hover
{
	color: var(--thm-white);
	background-color: var(--thm-maroon);
	border: 1px solid var(--thm-maroon);
}

/*---------- Red --------*/
a.btn.red,
button.red,
input[type="reset"].red,
input[type="submit"].red,
input[type="button"].red
{
	color: var(--thm-white);
	background-color: var(--thm-red);
	border: 1px solid var(--thm-red);
}

a.btn.red:hover,
button.red:hover,
input[type="reset"].red:hover,
input[type="submit"].red:hover,
input[type="button"].red:hover

{
	color: var(--thm-red);
	background-color: transparent;
	border-color:var(--thm-red);
}

a.btn-alt.red,
button.btn.red,
input[type="reset"].btn.red,
input[type="submit"].btn.red,
input[type="button"].btn.red
{
	color: var(--thm-red);
	background-color: transparent;
	border: 1px solid var(--thm-red);
}

a.btn-alt.red:hover,
button.btn.red:hover,
input[type="reset"].btn.red:hover,
input[type="submit"].btn.red:hover,
input[type="button"].btn.red:hover
{
	color: var(--thm-white);
	background-color: var(--thm-red);
	border: 1px solid var(--thm-red);
}

/*---------- Black --------*/
a.btn.black,
button.black,
input[type="reset"].black,
input[type="submit"].black,
input[type="button"].black
{
	color: var(--thm-white);
	background-color: var(--thm-black);
	border: 1px solid var(--thm-black);
}

a.btn.black:hover,
button.black:hover,
input[type="reset"].black:hover,
input[type="submit"].black:hover,
input[type="button"].black:hover

{
	color: var(--thm-black);
	background-color: transparent;
	border-color:var(--thm-black);
}

a.btn-alt.black,
button.btn.black,
input[type="reset"].btn.black,
input[type="submit"].btn.black,
input[type="button"].btn.black
{
	color: var(--thm-black);
	background-color: transparent;
	border: 1px solid var(--thm-black);
}

a.btn-alt.black:hover,
button.btn.black:hover,
input[type="reset"].btn.black:hover,
input[type="submit"].btn.black:hover,
input[type="button"].btn.black:hover
{
	color: var(--thm-white);
	background-color: var(--thm-black);
	border: 1px solid var(--thm-black);
}

/*---------- Grey --------*/
a.btn.grey,
button.grey,
input[type="reset"].grey,
input[type="submit"].grey,
input[type="button"].grey
{
	color: var(--thm-white);
	background-color: var(--thm-grey);
	border: 1px solid var(--thm-grey);
}

a.btn.grey:hover,
button.grey:hover,
input[type="reset"].grey:hover,
input[type="submit"].grey:hover,
input[type="button"].grey:hover

{
	color: var(--thm-grey);
	background-color: transparent;
	border-color:var(--thm-grey);
}

a.btn-alt.grey,
button.btn.grey,
input[type="reset"].btn.grey,
input[type="submit"].btn.grey,
input[type="button"].btn.grey
{
	color: var(--thm-grey);
	background-color: transparent;
	border: 1px solid var(--thm-grey);
}

a.btn-alt.grey:hover,
button.btn.grey:hover,
input[type="reset"].btn.grey:hover,
input[type="submit"].btn.grey:hover,
input[type="button"].btn.grey:hover
{
	color: var(--thm-white);
	background-color: var(--thm-grey);
	border: 1px solid var(--thm-grey);
}

/*---------- Silver --------*/
a.btn.silver,
button.silver,
input[type="reset"].silver,
input[type="submit"].silver,
input[type="button"].silver
{
	color: var(--thm-black);
	background-color: var(--thm-silver);
	border: 1px solid var(--thm-silver);
}

a.btn.silver:hover,
button.silver:hover,
input[type="reset"].silver:hover,
input[type="submit"].silver:hover,
input[type="button"].silver:hover

{
	color: var(--thm-silver);
	background-color: transparent;
	border-color:var(--thm-silver);
}

a.btn-alt.silver,
button.btn.silver,
input[type="reset"].btn.silver,
input[type="submit"].btn.silver,
input[type="button"].btn.silver
{
	color: var(--thm-silver);
	background-color: transparent;
	border: 1px solid var(--thm-silver);
}

a.btn-alt.silver:hover,
button.btn.silver:hover,
input[type="reset"].btn.silver:hover,
input[type="submit"].btn.silver:hover,
input[type="button"].btn.silver:hover
{
	color: var(--thm-black);
	background-color: var(--thm-silver);
	border: 1px solid var(--thm-silver);
}

/*---------- White --------*/
a.btn.white,
button.white,
input[type="reset"].white,
input[type="submit"].white,
input[type="button"].white
{
	color: var(--thm-black);
	background-color: var(--thm-white);
	border: 1px solid var(--thm-white);
}

a.btn.white:hover,
button.white:hover,
input[type="reset"].white:hover,
input[type="submit"].white:hover,
input[type="button"].white:hover

{
	color: var(--thm-white);
	background-color: transparent;
	border-color:var(--thm-white);
}

a.btn-alt.white,
button.btn.white,
input[type="reset"].btn.white,
input[type="submit"].btn.white,
input[type="button"].btn.white
{
	color: var(--thm-white);
	background-color: transparent;
	border: 1px solid var(--thm-white);
}

a.btn-alt.white:hover,
button.btn.white:hover,
input[type="reset"].btn.white:hover,
input[type="submit"].btn.white:hover,
input[type="button"].btn.white:hover
{
	color: var(--thm-black);
	background-color: var(--thm-white);
	border: 1px solid var(--thm-white);
}


/* --------------- Tags -----------*/
.tags {display: flex; align-items: center; column-gap: 20px; flex-wrap: wrap;font-size: 14px;line-height: 1.4em}
.tags span{color:var(--thm-color)}
.tags span:before{
	content: '\f0da';
	font: var(--fa-font-solid);
	font-size: 12px;
	margin-right: 5px;
}

/*------- Common Classes ---------*/
.center {text-align: center;}
.right {text-align: right;}
.strike{text-decoration: line-through solid;}

.theme{color:var(--thm-color);}
.purple{color:var(--thm-purple);}
.fuchsia{color:var(--thm-fuchsia);}
.navy{color:var(--thm-navy);}
.blue{color:var(--thm-blue);}
.teal{color:var(--thm-teal);}
.aqua{color:var(--thm-aqua);}
.green{color:var(--thm-green);}
.lime{color:var(--thm-lime);}
.olive{color:var(--thm-olive);}
.orange{color:var(--thm-orange);}
.yellow{color:var(--thm-yellow);}
.maroon{color:var(--thm-maroon);}
.red{color:var(--thm-red);}
.black{color:var(--thm-black);}
.grey{color:var(--thm-grey);}
.silver{color:var(--thm-silver);}
.white{color:var(--thm-white);}

/*------- Ellipsis ---------*/
.ellipsis-1{
	display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ellipsis-2{
	display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ellipsis-3{
	display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ellipsis-4{
	display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ellipsis-5{
	display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.box-shadow-1{box-shadow: 0 0  18px 4px rgba(var(--thm-grey-rgb),.1)}

.border{border:1px solid var(--thm-border);}

.m-10 {margin: 10px}
.m-20 {margin: 20px}
.m-30 {margin: 30px;}
.m-40 {margin: 40px}
.m-80 {margin: 80px}

.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-60{margin-top:60px;}
.mt-80{margin-top:80px;}

.mb-8 {margin-bottom: 8px}
.mb-10 {margin-bottom: 10px}
.mb-20 {margin-bottom: 20px}
.mb-30 {margin-bottom: 30px}
.mb-40 {margin-bottom: 40px}
.mb-60 {margin-bottom: 60px}
.mb-80 {margin-bottom: 80px}

.mtb-10 {margin-top: 10px;margin-bottom: 10px;}
.mtb-20 {margin-top: 20px;margin-bottom: 20px;}
.mtb-30 {margin-top: 30px;margin-bottom: 30px;}
.mtb-40 {margin-top: 40px;margin-bottom: 40px;}
.mtb-60 {margin-top: 60px;margin-bottom: 60px;}
.mtb-80 {margin-top: 80px;margin-bottom: 80px;}

.ml-5 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-20 {margin-left: 20px;}
.ml-30 {margin-left: 30px}
.ml-40 {margin-left: 40px}

.mr-5 {margin-right: 5px}
.mr-10 {margin-right: 10px}
.mr-20 {margin-right: 20px}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}

.mlr-10 {margin-left: 10px;margin-right: 10px;}
.mlr-20 {margin-left: 20px;margin-right: 20px;}
.mlr-30 {margin-left: 30px;margin-right: 30px}

.p-5 {padding: 5px}
.p-10 {padding: 10px}
.p-15 {padding: 15px}
.p-20 {padding: 20px}
.p-30{padding:30px}
.p-40{padding:40px}
.p-60{padding:60px}
.p-80{padding:80px}

.pt-5 {padding-top: 5px}
.pt-15 {padding-top: 15px}
.pt-10 {padding-top: 10px}
.pt-20 {padding-top: 20px}
.pt-30 {padding-top: 30px}
.pt-40 {padding-top: 40px}
.pt-60 {padding-top: 60px}
.pt-65 {padding-top: 65px}
.pt-80 {padding-top: 80px}
.pt-100 {padding-top: 100px}
.pt-120 {padding-top: 120px}
.pt-140 {padding-top: 140px}
.pt-160 {padding-top: 160px}
.pt-180 {padding-top: 180px}
.pt-200 {padding-top: 200px}
.pt-300 {padding-top: 300px}

.pb-10 {padding-bottom: 10px}
.pb-15 {padding-bottom: 15px}
.pb-20 {padding-bottom: 20px}
.pb-30 {padding-bottom: 30px}
.pb-40 {padding-bottom: 40px}
.pb-60 {padding-bottom: 60px}
.pb-80 {padding-bottom: 80px}
.pb-100 {padding-bottom: 100px}
.pb-120 {padding-bottom: 120px}
.pb-140 {padding-bottom: 140px}
.pb-160 {padding-bottom: 160px}
.pb-180 {padding-bottom: 180px}
.pb-200 {padding-bottom: 200px}
.pb-220 {padding-bottom: 220px}
.pb-300 {padding-bottom: 300px}

.ptb-5 {padding-top: 5px;padding-bottom: 5px}
.ptb-10 {padding-top: 10px;padding-bottom: 10px}
.ptb-15 {padding-top: 15px;padding-bottom: 15px}
.ptb-20 {padding-top: 20px; padding-bottom: 20px}
.ptb-30 {padding-top: 30px; padding-bottom: 30px}
.ptb-40 {padding-top: 40px; padding-bottom: 40px}
.ptb-60 {padding-top: 60px; padding-bottom: 60px}
.ptb-80 {padding-top: 80px; padding-bottom: 80px}
.ptb-100 {padding-top: 100px; padding-bottom: 100px}
.ptb-160 {padding-top: 160px; padding-bottom: 160px}

.pl-10 {padding-left: 10px;}
.pl-20 {padding-left: 20px;}

.plr-5 {padding-left: 5px;padding-right: 5px}
.plr-10 {padding-left: 10px;padding-right: 10px}
.plr-20 {padding-left: 20px;padding-right: 20px}
.plr-30 {padding-left: 30px;padding-right: 30px}
.plr-40 {padding-left: 40px; padding-right: 40px}
.plr-60 {padding-left: 60px; padding-right: 60px}