:root {
    --txt-color1: #BD8928;
    --txt-color2: #DFDFDF;
    --txt-color-transparent: #000000ba;
 }


 @font-face {
    font-family: 'proxima-nova-thin';
    src: url('../fonts/proxima-nova-thin.otf');
 }

 @font-face {
    font-family: 'proxima-nova-light';
    src: url('../fonts/proxima-nova-light.otf');
 }

 @font-face {
    font-family: 'proxima-nova-regular';
    src: url('../fonts/proxima-nova-regular.otf');
 }

 @font-face {
    font-family: 'proxima-nova-semibold';
    src: url('../fonts/proxima-nova-semibold.otf');
 }

 @font-face {
    font-family: 'proxima-nova-bold';
    src: url('../fonts/proxima-nova-bold.otf');
 }

 @font-face {
    font-family: 'opensans-regular';
    src: url('../fonts/OpenSans-Regular.ttf');
 }

 @font-face {
    font-family: 'opensans-bold';
    src: url('../fonts/OpenSans-Bold.ttf');
 }

 [data-font='proxima-thin'] {
    font-family: 'proxima-nova-thin';
 }

 [data-font='proxima-light'] {
    font-family: 'proxima-nova-light';
 }

 [data-font='proxima-regular'] {
    font-family: 'proxima-nova-regular';
 }

 [data-font='proxima-semibold'] {
    font-family: 'proxima-nova-semibold';
 }

 [data-font='proxima-bold'] {
    font-family: 'proxima-nova-bold';
 }

 [data-font='opensans-regular'] {
    font-family: 'opensans-regular';
 }

 [data-font='opensans-bold'] {
    font-family: 'opensans-bold';
 }

 [data-txt-color='green'] {
    color: var(--txt-color1);
 }

 [data-txt-color='light'] {
    color: var(--txt-color2);
 }
 [data-txt-color='dark'] {
   color: #545454;
}

 [data-txt-color="pink"] {
    color: #C7656E;
 }

 [data-txt-color="gray"] {
    color: #ADADAD;
 }

[data-txt-color="white"] {
    color: #ffffff;
 }

 [data-bg-color='black-opacity'] {
     
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: saturate(180%) blur(2px);
 }
 [data-bg-color='black'] {
   background-color: #000000;
}

[data-bg-color='gray-light'] {
   background-color: #F0F0F0;
}
[data-txt-border="border-light"]{
   border:2px solid #fff;
}
[data-txt-border="border-dark"]{
   border:2px solid #545454;
}

 [data-font-size="18"] {
    font-size: 18px;
 }

 [data-max-width="61px"] {
  max-width:61px;
}



 .fs-7 {
    font-size: 1.13em;
 }
 .fs-8{
   font-size: 1em;
}

 .display-7 {
    font-size: calc(1.2rem + 2vw);
 }

 .display-8 {
    font-size: calc(1.2rem + 2vw);
 }

 @media (min-width: 1200px) {
    .display-7 {
       font-size: 2.2em;
    }

    .display-8 {
       font-size: 2em;
    }
 }

 .b-before-after {
    position: relative;
    width: 100%;
    max-width: 540px;
 }

 .b-before-after::after {
    content: " ";
    position: absolute;
    width: 20%;
    height: 1px;
    top: 50%;
    right: 3%;
    background: #BD8928;
    padding-right: 10px;
 }

 .b-before-after::before {
    content: " ";
    position: absolute;
    width: 20%;
    height: 1px;
    top: 50%;
    left: 3%;
    background: #BD8928;
 }

 .b-before-after-dark {
    position: relative;
    width: 100%;
    max-width: 540px;
 }

 .b-before-after-dark::after {
   content: " ";
    position: absolute;
    width: 20%;
    height: 1px;
    top: 50%;
    right: 3%;
    background: #BD8928;
    padding-right: 10px;
 }

 .b-before-after-dark::before {
   content: " ";
   position: absolute;
   width: 20%;
   height: 1px;
   top: 50%;
   left: 3%;
   background: #BD8928;
 }

 @media(max-width:590px) {
    .b-before-after {
       max-width: 380px;
    }
 }

 @media(max-width:425px) {
    .b-before-after {
       max-width: 320px;
    }
 }