@charset "utf-8";
/* CSS Document */
/* Notes
  # Always set image display:block to avoid extra space in container below image
*/

:root {
  --thm-color: #212529;
  --thm-red: #E00300;
  --thm-blue: #0079EF;
  --thm-green: #109F00;
  --thm-light-green: #92d7ab;
	--thm-yellow: #FCAC00;
  --thm-grey: #757575;
	--thm-golden:#bf9456;
	--thm-white:#fff;
	--thm-black:#000;

	
  --thm-color-rgb: 33,37,41;
  --thm-red-rgb: 224,3,0;
  --thm-blue-rgb: 0,121,239;
  --thm-green-rgb: 16,159,0;
  --thm-light-green-rgb: 146,215,171;
  --thm-yellow-rgb: 252,172,0;
  --thm-grey-rgb: 117, 117, 117;
  --thm-golden-rgb: 191,148,86;
  --thm-white-rgb: 255,255,255;
  --thm-black-rgb: 0,0,0;

  --thm-font-1: "Open Sans Regular", "sans-serif";
  --thm-font-2: "Open Sans Medium", "sans-serif";
  --thm-font-3: "Open Sans Bold", "sans-serif";
}

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

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

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

/*------- HTML, Body Section ---------*/
html, body {
	font-family: var(--thm-font-1);
  font-size: 16px;
  line-height: 1.6em;
  color: var(--thm-color);
	background-image:url("../images/bg/bg-06.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-blue);}
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-3);
	line-height: 1.3em;
	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 {
	color: var(--thm-color);
	font-size: 14px;
	padding: 10px;
  border: 1px solid rgba(var(--thm-golden-rgb),.8);
  border-radius: 1px;
  background-color:transparent;
	min-width: 0;
	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),.7);
}

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

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

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, textarea.error:invalid {	
	border-color: rgba(var(--thm-red-rgb),.5);
	box-shadow: inset 0 0 0 1px rgba(var(--thm-red-rgb),.5);
}
input:invalid:focus, select:invalid:focus, textarea:invalid:focus {	
	border-color: rgba(var(--thm-red-rgb),.5);
	box-shadow: inset 0 0 0 1px rgba(var(--thm-red-rgb),.5);
}

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

input.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;
	background-color: rgba(var(--thm-black-rgb),.8);/*#FFFDED;*/
}

.page-content {
  /*border: 1px solid blue;*/
  flex: 1 1 auto;
}

.page-footer{
	background: linear-gradient(to right, rgba(var(--thm-black-rgb),.95) 50%, rgba(var(--thm-black-rgb),.95) 50%), url("../images/bg/bg-04.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
	color: #b3b5b9;
	border-top:2px solid var(--thm-light-green);
}

/*------- 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.gg-60-20, .col.gg-60-20{gap:60px 2px; grid-gap: 60px 20px;}

.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{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.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;}

.fd-p50{flex:0 1 50%;}
 
.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-200{flex:1 1 200px}

.fill{flex:1 1 auto;}

/*------- Input foil ---------*/
.input__foil .label{
	display:flex;
	flex-direction: column-reverse;
	row-gap:5px;
	grid-row-gap:5px;
}

.input__foil.inline .label{display:flex;flex-direction: row-reverse;align-items: center}
.input__foil.inline .label span{flex:0 0 120px}
.input__foil.inline.fw-140 .label span{flex:0 0 140px}
.input__foil.inline.fw-160 .label span{flex:0 0 160px}
.input__foil.inline.fw-180 .label span{flex:0 0 180px}

.input__foil.inline .footer span {flex: 0 0 120px}
.input__foil.inline.fw-140 .footer span {flex: 0 0 140px}
.input__foil.inline.fw-160 .footer span {flex: 0 0 160px}
.input__foil.inline.fw-180 .footer span {flex: 0 0 180px}

/*.input-foil.inline .grid{flex:1 0 auto;}
.input-foil.inline .grid > span{flex:0 0 120px}
.input-foil.inline.fw-140 .grid > span{flex:0 0 140px}
.input-foil.inline.fw-160 .grid > span{flex:0 0 160px}*/

.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;
}

/* --------------- 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);
}

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

/* --------------- Toggle Slider -----------*/
.toggle-card {
  display: inline;
  vertical-align: middle;
}

.switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 17px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #a5a5a5;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #00972d;
}

input:focus + .slider {
  box-shadow: 0 0 1px #00972d;
}

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

/* Rounded sliders */
.slider.round {
  border-radius: 14px;
}

.slider.round:before {
  border-radius: 50%;
}

/*------- Modal ---------*/
.modal-backdrop{
	background-color: rgba(var(--thm-black-rgb),.6);
	position: fixed;
	left: 0;
	right:0;
	top: 0;
	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-white);
	visibility: hidden;
	opacity: 0;
	transition: all .25s ease-in-out;
}

.spiner{
	position: relative;
	top:45%;
}

.modal__foil.show .modal-backdrop,
.modal__foil.show .spiner__foil{
	visibility: visible;
	opacity: 1
}
/*------- Button & Links ---------*/
.btn{
	padding:9px 12px;
	line-height: 1.2em;
	color: var(--thm-white);
	background-color: rgba(var(--thm-blue-rgb),.8);
	letter-spacing: 1px;
  transition: 0.3s ease;
  border:1px solid transparent;
	border-radius: 1px;
}
.btn:hover{
	color: var(--thm-blue);
	background-color: transparent;
	border-color:rgba(var(--thm-blue-rgb),.8);
}

.btn.yellow{
	color: var(--thm-white);
	background-color: rgba(var(--thm-yellow-rgb),.8);
	text-shadow: 1px 1px 1px rgba(var(--thm-color-rgb),.4);
}

.btn.yellow:hover{
	color: var(--thm-yellow);
	background-color: transparent;
	border-color:rgba(var(--thm-yellow-rgb),.8);
	text-shadow: 1px 1px 1px rgba(var(--thm-color-rgb),.8);
}
.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;
}

.btn-alt{
	line-height: 1.2em;
	padding:9px 12px;	
  background-color: transparent;
  border: 1px solid var(--thm-blue);
  color: var(--thm-blue);
	text-align: center;
}
.btn-alt:hover{
	color: var(--thm-blue);
	border: 1px solid var(--thm-blue);
	box-shadow: inset 0 0 0 1px rgba(var(--thm-blue-rgb),.8);
}

.btn-alt.red{
	border: 1px solid rgba(var(--thm-red-rgb),.8);
  color: rgba(var(--thm-red-rgb),.8);
}
.btn-alt.red:hover{box-shadow: inset 0 0 0 1px rgba(var(--thm-red-rgb),.8);}

.btn-alt.yellow{
	color:var(--thm-yellow);
	border: 1px solid rgba(var(--thm-yellow-rgb),.8);
}
.btn-alt.yellow:hover{box-shadow: inset 0 0 0 1px rgba(var(--thm-yellow-rgb),.8);}

.link{
	padding: 0;
	color: var(--thm-blue);
	border:none;
  background-color: transparent; /* rgb(0, 171, 250);*/
	font-size: 16px;
	font-weight: normal;
}

.link.green{color:var(--thm-green)}
.link.red{color:var(--thm-red)}
.link.yellow{color:var(--thm-yellow)}

.link:hover{background-color: transparent;border-color:transparent;}

.link-alt{
	color:var(--thm-color);
	font-family: var(--thm-font-2);
	background-color:var(--thm-light-green);
	padding: 8px 16px;
	border:2px solid transparent;
	border-radius:24px;
	transition: .25s ease-in-out;
}
.link-alt:hover{
	background-color:transparent;
	border-color:var(--thm-light-green);
	color:rgba(var(--thm-black-rgb),.8);
}

.link-alt.bg{
	color:var(--thm-color);
	background-color: transparent;
	border:2px solid rgba(var(--thm-light-green-rgb),.8);
}
.link-alt.bg:hover{background-color:rgba(var(--thm-light-green-rgb),.3)}

.link-search{}

/*------- Common Classes ---------*/
.center {text-align: center;}
.right {text-align: right;}

.red{color:var(--thm-red);}
.green{color:var(--thm-green);}
.blue{color:var(--thm-blue);}
.yellow{color:var(--thm-yellow);}
.grey{color:var(--thm-grey);}
.white{color:var(--thm-white);}
.theme{color:var(--thm-color);}

.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;
}

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

.border{border:1px solid var(--thm-border);}
.border-top{border-top:1px solid var(--thm-border);}
.border-btm{border-bottom: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;}

.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: 30px}
.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-10 {padding-top: 10px;padding-bottom: 10px}
.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}