body, html {
  height: 100%;
  margin: 0;
}
.bdy-ht {
  /*min-height:600px;*/
  /*height: 100vh;*/
}
.f1 {
/*font-family: 'Belleza Bold', 'Belleza Regular', 'Belleza', sans-serif;*/
font-family: sans-serif;
font-weight: 700;
font-style: normal;
font-size: 18px;
letter-spacing: 1px;
}
.f2 {
/*font-family: 'Fira Sans Extra Condensed', 'Fira Sans', sans-serif;*/
font-family: 'Jost', 'Fira Sans', sans-serif;
/*font-family: sans-serif;*/
font-weight: 400;
/*font-weight:bold;*/
font-style: normal;
font-size: 24px;
line-height: 32px;
font-kerning: normal;
}
.f3 {
/*font-family: 'Fira Sans Extra Condensed Light', 'Fira Sans Extra Condensed', 'Fira Sans', sans-serif;*/
font-family: 'Jost', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
color: rgba(51, 51, 51, 0.8);
}
.f4 {
    /*font-family: 'Fira Sans Extra Condensed Light', 'Fira Sans Extra Condensed', 'Fira Sans', sans-serif;*/
    font-family:  'Jost', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    color: rgba(51, 51, 51, 0.8);
}
.f5 {
    /*font-family: 'Fira Sans Extra Condensed Light', 'Fira Sans Extra Condensed', 'Fira Sans', sans-serif;*/
    font-family:  'Jost', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: rgba(51, 51, 51, 0.8);
}
.f6 {
/*font-family: 'Fira Sans Extra Condensed', 'Fira Sans', sans-serif;*/
font-family: 'Jost', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: rgba(51, 51, 51, 0.8);
}
.btn-c1 {
  /*background-color:rgba(54, 161, 223, 1);*/
  background-color:#36A1DF;
  border-radius:0px;
  color:white;
}
.btn-c2 {
  background-color:rgba(234, 241, 251, 0.988235294117647);
  /*background-color:#36A1DF;*/
  border-radius:0px;
  color:white;
}
.bg-1 {
    background-color: rgba(54, 161, 223, 0.0941176470588235);
}
.bg-2 {
    background-color: rgba(255, 255, 255, 0.5);
}
.bg-3 {
    background-color: rgba(0, 0, 0, 0.5);
}
.bg-4 {
    background-color:rgba(234, 241, 251, 0.988235294117647);
}
table {
    background-color: rgba(255, 255, 255, 0.5);
}
a {
  /*color: rgba(54, 161, 223, 1);*/
  color: #36A1DF;
  text-decoration:none;
}
a:hover {
  color: rgba(54, 161, 223, 50);
  text-decoration:underline;
}
.fc1 {
  border-radius:0px !important;
  color:black;
}
.fc2 {
  border-radius:0px !important;
  color:black;
  width: 50px !important;
}
.cam {
    width:100%;
    height:100%;
    margin:auto;
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
}
.preview {
    width:100%;
    height:100%;
    margin:auto;
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
body {
    color:white;
    width: 100%;
    height: 80vh;
    background: url("https://lightbe.org/assets/img/hero-bg.jpg") center center;
    background-size: cover;
    background-repeat: no-repeat;
}