@font-face {
  font-family: 'Gagalin';
  src: url('/font/Gagalin-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('/font/Raleway-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Raleway-bold';
  src: url('/font/Raleway-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
    --col1: #c49538;
    --col2: #a3a3a3;
    --col3: #f5d189;

    --col-bg: #f2f2f2;
    --col-txt: #0b0b0b;

    --text-font: 'Raleway';
    --h-font: 'Gagalin';
}
body,html{
    margin: 0px;
    background-color: var(--col-bg);
}
a{
    text-decoration: none;
}

h1{
    font-size:  5.062rem;
}
h2{
    font-size: 3.375rem;
}
h3{
    font-size: 2.25rem;
}
p,label,input,span,a,textarea,li{
    font-size: 1rem;
    font-family: var(--text-font);
}
h1,h2,h3,h4{
    font-family: var(--h-font);
}
h1,h2,h3,h4,p,label,input,span,a{
    color: var(--col-txt);
    margin: 0;
}








.display-none{
    display: none!important;
}

.cta{
    padding: 12px;
    background-color: var(--col1);
    color: var(--col-txt) ;
    font-family: "Raleway-bold";
    border-radius: 6px;
    transition:all 0.2s ease-in-out;
    box-sizing: content-box;
    display: inline-block;
    border: 0;
}
.cta:hover{
    transform:translateY( 2px)
}
.secondary-cta{
    background-color: var(--col3)!important;
}

.three-rows{
    display: flex;
    flex-direction: column;
    padding: 72px 5% 24px 5%;
    align-items: center;
    justify-content: center;
}
.three-rows>h2{
    text-align: center;
    margin-bottom: 48px;
    display: block;
}
.three-rows h3{
    margin-bottom: 6px;
    text-align: center;
}
.three-rows>div{
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    align-items:stretch;
}
.three-rows>div>div{
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 12px;
    border-radius: 12px;
}
@media (min-width:800px) {
    .three-rows>div{
        flex-direction: row;
    }
    .three-rows{
        padding: 72px 10% 24px 10%
    }
}
@media (min-width:1000px) {
    .three-rows>div{
        gap: 7vw
    }
}

.flex-section-5050{
    display: flex;
    flex-direction: column;
    padding: 72px 5% 24px 5%;
    align-items: center;
    justify-content: center;
}
.flex-section-5050>h2{
    text-align: center;
    margin-bottom: 48px;
    display: block;
}
.flex-section-5050>div{
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    align-items:stretch;
    flex: 1;
}
.iframe.flex-section-5050>div>iframe{
    height: 30vh;
}
.flex-section-5050>div>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.reverse>div{
    flex-direction: column-reverse;
}
@media (min-width:800px) {
    .flex-section-5050{
        padding: 72px 10% 24px 10%
    }
    .flex-section-5050>div{
        flex-direction: row;
    }
        .flex-section-5050>div>*{
        flex: 1;
    }
    .iframe.flex-section-5050>div>iframe{
        height: 40vh;
    }
}
@media (min-width:1000px) {
    .flex-section-5050>div{
        gap: 10vw;
    }
}
@media (min-width:700px) {
    .iframe.flex-section-5050>div>iframe{
        height: 35vh;
    }
}


.contact h3{
    text-align: center;
    margin-bottom: 12PX;
}
.contact form,.contact>div>div{
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    align-items:stretch;
}
.contact input.form-txt,.contact textarea{
    background-color: #00000000;
    border: 0;
    border-bottom:solid 1px var(--col-txt);
    width:90vw
}
.contact input:focus,.contact textarea:focus{
    outline: 0;
}
input.submit{
    align-self: center;
}
@media (min-width:800px) {
    .contact input.form-txt,.contact textarea{
    width:calc(40vw - 12px)
    }
}
@media (min-width:1000px) {
    .contact input.form-txt,.contact textarea{
    width:35vw
    }
}

.top{
    background-image: url('/img/bg-main.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10vh 0 48px 0;
}
.top>h1{
    margin: 48px 0px;
    text-align: center;
    color: var(--col-bg);
}

.borderred{
    border: solid 3px var(--col-txt) ;
    border-radius: 16px;
    padding: 24px;
}
.center{
    text-align: center;
}

.column{
    display: flex;
    flex-direction: column;
    padding:48px 5%;
    align-items: center;
    justify-content: space-around;
    gap: 24px;
}
.column>*{
    text-align: center;
}
@media (min-width:800px) {
    .column{
        padding: 96px 10%
    }
}