@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,100;0,200;0,300;0,400;0,600;0,900;1,400;1,600;1,900&family=Playfair+Display+SC:ital,wght@0,100;0,200;0,300;0,400;0,600;0,900;1,400;1,600;1,900&display=swap');
:root{
--fr-color-site : 6 39 58;
--fr-color-site-dark : 5 28 41;
--fr-color-site-acc : 176 146 94;
--fr-color-site-acc-dark : 106 88 57;
--fr-color-font : 102 102 102;

    --fr-font1 : Ubuntu;
    --fr-font2 : Playfair Display SC;
}
body{
    font-family:var(--fr-font1), sas-serif;
    color:rgb(var(--fr-color-font));
}
.font1{
font-family:var(--fr-font1), sans-serif;
}
.font2{
font-family:var(--fr-font2), sans-serif;
}
.opacity-5{
--fr-opacity: 5% !important;
}
.opacity-10{
    --fr-opacity: 10% !important;
}
.opacity-20{
    --fr-opacity: 20% !important;
}
.opacity-30{
    --fr-opacity: 30% !important;
}
.opacity-40{
    --fr-opacity: 40% !important;
}
.opacity-50{
    --fr-opacity: 50% !important;
}
.opacity-60{
    --fr-opacity: 60% !important;
}
.opacity-70{
    --fr-opacity: 70% !important;
}
.opacity-80{
    --fr-opacity: 80% !important;
}
.opacity-90{
    --fr-opacity: 90% !important;
}
.opacity-100{
    --fr-opacity: 100% !important;
}
.bg-site{
--fr-opacity:100%;
background-color:rgb(var(--fr-color-site) / var(--fr-opacity)) !important;
}
.bg-site-dark{
background-color:rgb(var(--fr-color-site-dark)) !important;
}

.bg-site-5{
background-color:rgb(var(--fr-color-site) /5%) !important;
}
.bg-site-10{
background-color:rgb(var(--fr-color-site) /10%) !important;
}
.bg-site-20{
background-color:rgb(var(--fr-color-site) /20%) !important;
}
.bg-site-30{
background-color:rgb(var(--fr-color-site) /30%) !important;
}
.bg-site-40{
background-color:rgb(var(--fr-color-site) /40%) !important;
}
.bg-site-50{
background-color:rgb(var(--fr-color-site) /50%) !important;
}
.bg-site-60{
background-color:rgb(var(--fr-color-site) /60%) !important;
}
.bg-site-70{
background-color:rgb(var(--fr-color-site) /70%) !important;
}
.bg-site-80{
background-color:rgb(var(--fr-color-site) /80%) !important;
}
.bg-site-90{
background-color:rgb(var(--fr-color-site) /90%) !important;
}
.bg-site-dark-10{
background-color:rgb(var(--fr-color-site-dark) /10%) !important;
}
.bg-site-dark-20{
background-color:rgb(var(--fr-color-site-dark) /20%) !important;
}
.bg-site-dark-30{
background-color:rgb(var(--fr-color-site-dark) /30%) !important;
}
.bg-site-dark-40{
background-color:rgb(var(--fr-color-site-dark) /40%) !important;
}
.bg-site-dark-50{
background-color:rgb(var(--fr-color-site-dark) /50%) !important;
}
.bg-site-dark-60{
background-color:rgb(var(--fr-color-site-dark) /60%) !important;
}
.bg-site-dark-80{
background-color:rgb(var(--fr-color-site-dark) /80%) !important;
}
.bg-site-acc {
background-color: rgb(var(--fr-color-site-acc)) !important;
}
.bg-site-acc-10{
background-color: rgb(var(--fr-color-site-acc) /10%) !important;
}
.bg-site-acc-20{
background-color: rgb(var(--fr-color-site-acc) /20%) !important;
}
.bg-site-acc-30{
background-color: rgb(var(--fr-color-site-acc) /30%) !important;
}
.bg-site-acc-40{
background-color: rgb(var(--fr-color-site-acc) /40%) !important;
}
.bg-site-acc-50{
background-color: rgb(var(--fr-color-site-acc) /50%) !important;
}
.bg-site-acc-60{
background-color: rgb(var(--fr-color-site-acc) /60%) !important;
}
.bg-site-acc-70{
background-color: rgb(var(--fr-color-site-acc) /70%) !important;
}
.bg-site-acc-80{
background-color: rgb(var(--fr-color-site-acc) /80%) !important;
}
.bg-site-acc-90{
background-color: rgb(var(--fr-color-site-acc) /90%) !important;
}
.bg-site-acc-light {
background-color: rgb(var(--fr-color-site-acc-light));
}
.bg-site-light {
background-color: rgb(var(--fr-color-site-light));
}
.border-site {
border-color: rgb(var(--fr-color-site)) !important;
}
.border-acc{
border-color: rgb(var(--fr-color-site-acc)) !important;
}
.text-site{
color: rgb(var(--fr-color-site));
}
.text-site-light{
color: rgb(var(--fr-color-site) /50%);
}
.text-site-75{
color: rgb(var(--fr-color-site) /75%);
}
.text-site-dark{
color: rgb(var(--fr-color-site-dark));
}
.text-site-dark-50{
color: rgb(var(--fr-color-site-dark) /50%);
}
.text-site-acc {
color: rgb(var(--fr-color-site-acc));
}
.text-site-acc-light {
color: rgb(var(--fr-color-site-acc-light));
}
.bg-gradient-dark{
background-image:linear-gradient(180deg, rgb(var(--fr-color-site-dark)/100%), rgb(var(--fr-color-site-dark)/0%))
}
.bg-gradient-white{
background-image:linear-gradient(180deg, rgb(255 255 255 /40%),  rgb(255 255 255/0%))
}
.bg-gradient-white-120{
background-image:linear-gradient(120deg, rgb(255 255 255 /40%),  rgb(255 255 255/0%))
}
.btn-site-acc {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site-acc));
--bs-btn-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-acc-dark));
}
.btn-site {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site));
--bs-btn-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-dark));
}
.btn-site-light {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site-light));
--bs-btn-border-color: rgb(var(--fr-color-site));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-dark));
}
.lh-normal{
line-height:normal !important;
}
.vertical-center {
min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-)       */

display: flex;
align-items: center;
}
.spooler{
display:none;
}
.preview{
display:none;
z-index:10000 !important;
}
.ft-12 {
font-size: 12px;
}
.ft-14 {
font-size: 14px;
}
.ft-16 {
font-size: 16px;
}
.ft-18 {
font-size: 18px;
}
.ft-19 {
font-size: 19px;
}
.ft-24 {
font-size: 24px;
}
.ft-28 {
font-size: 28px;
}
.ft-32 {
font-size: 32px;
}
.ft-36 {
font-size: 36px;
}
.ft-40 {
font-size: 40px;
}
.ft-48 {
font-size: 48px;
}
.ft-52 {
font-size: 52px;
}

.ft-72 {
font-size: 72px;
}
@media (max-width: 768px){
.ft-sm-12{
font-size: 12px !important;
}
.ft-sm-14{
font-size: 14px !important;
}
.ft-sm-16{
font-size: 16px !important;
}
.ft-sm-18{
font-size: 18px !important;
}
.ft-sm-20{
font-size: 20px !important;
}
.ft-sm-24{
font-size: 24px !important;
}
.ft-sm-28{
font-size: 28px !important;
}
.ft-sm-32{
font-size: 32px !important;
}
.ft-sm-36{
font-size: 36px !important;
}
.ft-sm-48{
font-size: 48px !important;
}
.ft-sm-52{
font-size: 52px !important;
}
.ft-sm-58{
font-size: 58px !important;
}
}
h1{
    text-shadow: 0 2px 0 black;
}
h2 {
    text-shadow: 0 1px 0 black;
}
h1, h2, h3{
    font-family: var(--fr-font2), sans-serif;
    line-height:100% !important;
    position:relative;
    border-bottom: solid 1px #fff;
}
h1:after, h2:after, h3:after{
    content: '';
    position: absolute;
    left: 50%;
    transform:translatex(calc(-50% - 7px));
    bottom: -7.5px;
    width: 15px;
    height: 15px;
    background-color: rgb(var(--fr-color-site));
    border: solid 1px rgb(255 255 255 / 100%);
}
h1:before,h2:before,h3:before{
    content: '';
    position: absolute;
    left: 50%;
    transform:translatex(calc(-50% + 7px));
    bottom: -7.5px;
    width: 15px;
    height: 15px;
    background-color: rgb(var(--fr-color-site-acc));
    border: solid 1px rgb(255 255 255 / 100%);
}
h3:after{
transform:translatex(calc(-50% - 4.5px));
bottom: -5px;
width: 10px;
height: 10px;
}
h3:before{
transform:translatex(calc(-50% + 4.5px));
bottom: -5px;
width: 10px;
height: 10px;
}
.photo{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:.30;
    animation-duration: 3s;
    animation-name: slide-in;
}
.logo {
    max-width:340px;
}
#menus .card-body{
    transition:all 0.5s;
    background-color: rgb(var(--fr-color-site-dark) /60%);
    opacity:1;
}
#menus .card-body:hover{
    opacity:0;
}
.avatar{
    width:200px;
}
.gallery {
    column-count: 7;
    --webkit-column-count: 7;
    --moz-column-count: 7;
    gap: 1rem;
}
.image img {
    height: auto;
    width: 100%;
}
.image a {
    opacity: 1;
}
.image a:hover {
    opacity: 1;
    transition:all .5s;
}
/* Responsive-ness for different screen-sizes */
@media screen and (max-width: 810px) {
    .gallery {
        column-count: 3;
        --webkit-column-count: 3;
        --moz-column-count: 3;
    }
}
.text-shadow {
    text-shadow: 1px 0 6px rgb(0 0 0 / 45%);
}
@media screen and (max-width: 500px) {
    .gallery {
        column-count: 2;
        --webkit-column-count: 2;
        --moz-column-count: 2;
    }
}
.hero {
    height:auto;
}
header ul {
--icon-space: 0em;
list-style: none;
padding: 0;
text-align:left;
}

header li {
position: relative;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
padding: 3px 28px 3px 38px;
border-radius: .25rem;
background-image: linear-gradient(90deg, rgb(var(--fr-color-site-acc) / 80%), transparent 75%);
}
header li:before {
content: "\f00c";
font-family: "Font Awesome 5 Free" !important;
display: inline-block;
width: 20px;
color: #8BC34A;
z-index: 1;
position: absolute;
font-size: 28px;
top: -3px;
left: 8px;
text-shadow: 0px 2px rgb(0 0 0 / 66%);
}
header li:after {
content: "";
top: 10px;
left: 10px;
position: absolute;
width: 16px;
height: 16px;
background-color: rgb(255 255 255);
border-radius: .15rem;
box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}
.callbutton {
    position: fixed;
    right: 2rem;
    bottom: 18%;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 50rem;
    background-color: rgb(var(--fr-color-site-acc));
}

@media screen and (max-width: 400px) {
    .gallery {
        column-count: 1;
        --webkit-column-count: 1;
        --moz-column-count: 1;
    }
}
@media (max-width: 1024px) {
.callbutton{
display:none !important;
}
}

@keyframes slide-in {
    from {
        scale: 200% 200%;
        rotate : 10deg;
    }
    to {
        scale: 100% 100%;
        rotate : 0deg;
    }
}