@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

@font-face {
    font-family: "CenturyGothic";
    src: url("/style/Specific/fonts/Century-Gothic.otf");
    font-weight: normal;
}

@font-face {
    font-family: "CenturyGothic";
    src: url("/style/Specific/fonts/Century-Gothic-Italic.otf");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "CenturyGothic";
    src: url("/style/Specific/fonts/Century-Gothic-Bold.otf");
    font-weight: bold;
}

@font-face {
    font-family: "CenturyGothic";
    src: url("/style/Specific/fonts/Century-Gothic-Bold-Italic.otf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "SabonLT";
    src: url("/style/Specific/fonts/SabonLTPro-Roman.ttf");
}

:root {
    --color-grey: #767676;
    --color-light-grey: #f5f5f3;

    --border-color: #f0f0f0;
    --border-grey-color: #c6c6c6;
    --border-light-color: #f4f4f4;

    --light-slider-main-height: 500px;
    --light-slider-ratio: 0.66;
}

body {
    font-family: 'CenturyGothic', 'Lato', sans-serif;
}
.font-sabon {
    font-family: 'SabonLT';
}

.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus {
    box-shadow: none;
    border-color: inherit;
}

a,
a:hover,
.btn.btn-link {
    color: #000;
    text-decoration: none;
}

b a {
    font-weight: bold;
}


.text-grey {
    color: var(--color-grey) !important;
}

.bg-light-grey {
    background-color: var(--color-light-grey);
}

.border-bottom {
    border-color: var(--border-light-color) !important;
}

.bg-light-grey .border-bottom {
    border-color: var(--border-grey-color) !important;
}

/*** HEADER ***/
header .brand h1,
header .brand:hover h1 {
    --font-size: .7rem;
    color: var(--color-grey);
    font-size: var(--font-size);
}
header .brand img {
    --size: 40px;
    height: var(--size);
}

header .nav a.nav-link {
    color: var(--color-grey);
}
header .nav a.nav-link:hover {
    color: #000;
}
header .nav a.nav-link.active {
    color: #000;
    font-weight: bold;
}

header a.dropdown-toggle,
header a.dropdown-toggle:hover {
    color: #000;
}
header a.dropdown-toggle i {
    font-size: 1.25rem;
}
header a.dropdown-toggle::after {
    vertical-align: .355rem;
}

header .input-group button:focus {
    border-color: transparent;
}
header .input-group input,
header .input-group button {
    border-bottom: 1px solid #c6c6c6 !important;
}

/*** END HEADER ***/

/*** BREADCRUMB ***/
ol.breadcrumb {
    font-weight: 300;
    font-size: .875rem;
}
ol.breadcrumb li.breadcrumb-item a,
ol.breadcrumb li.breadcrumb-item a:hover {
    color: var(--color-grey);
    text-decoration: underline;
}
/*** END BREADCRUMB ***/

/*** BUTTON ***/
.btn.btn-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
}
.btn.btn-link:focus {
    border-color: transparent;
}
.btn.btn-link i {
    font-size: 1.2rem;
    margin-top: .15rem;
    margin-right: .25rem;
}

.btn.btn-outline-dark {
    padding: .75rem 1rem;
    border-radius: calc(2.25rem / 2);
    font-size: .75rem;
    line-height: .75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.btn.btn-outline-dark.btn-lg {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    line-height: 1rem;
    border-radius: 1.75rem;
}
.btn.btn-outline-dark.btn-sm {
    padding: .5rem .75rem;
    font-size: .8rem;
    line-height: .8rem;
    border-radius: 1rem;
}
.btn.btn-outline-dark:hover {
    color: inherit;
    border-color: var(--color-light-grey);
    background-color: var(--color-light-grey);
}
/*** END BUTTON ***/

/*** ACCORDION ***/
.accordion-button,
.accordion-body {
    padding: .75rem 1.25rem;
}
.accordion-button:not(.collapsed) {
    color: inherit;
    background-color: inherit;
    box-shadow: none;
}
.accordion-button:not(.collapsed)::after,
.accordion-button::after {
    background-image: none;
    font-family: 'boxicons';
    content: "\ea29";
    transform: none;
}
.accordion-button:not(.collapsed)::after {
    content: "\ea32";
}
/*** END ACCORDION ***/

/*** TABLE ***/
table.table.border {
    border-color: var(--border-color) !important;
}
table.table .table-light {
    --bs-table-bg: var(--color-light-grey);
    border-color: var(--border-color);
}
table.table > :not(:first-child) {
    border-top: 1px solid var(--border-color);
}
table.table tr > *{
    --padding-vertical: 1rem;
    --padding-horizontal: 1rem;
    padding-top: var(--padding-vertical);
    padding-bottom: var(--padding-vertical);
    padding-right: var(--padding-horizontal);
    padding-left: var(--padding-horizontal);
}

table.table tr td img {
    --size: 60px;
    height: var(--size);
    width: var(--size);
    object-fit: cover;
}
/*** END TABLE ***/

/*** FORM ***/
.form-control,
.form-select {
    background-color: transparent;
    border-radius: 0;
    border-color: var(--border-light-color) !important;
    font-weight: 300;
    color: var(--color-grey);
}
input:focus {
    background-color: transparent !important;
}

input::placeholder {
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}
input::-ms-input-placeholder { /* Microsoft Edge */
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}

.form-check {
    padding-left: 0;
}
.form-check .form-check-input {
    display: none;
}
.form-check .form-check-input + .form-check-label {
    position: relative;
    cursor: pointer;
    padding-left: 2rem;
}
.form-check:not(.no-input) .form-check-input + .form-check-label:before {
    content: "\ea5c";
    font-size: 1.2rem;
    font-family: 'boxicons';
    position: absolute;
    left: 0;
}
.form-check:not(.no-input) .form-check-input:checked + .form-check-label:before {
    content: "\ea46";
}

.form-check.no-input .form-check-input + .form-check-label:before {
    content: "\ed47";
    font-size: .6rem;
    font-family: 'boxicons';
    position: absolute;
    left: 0;
    top: .4rem;
}
.form-check.no-input .form-check-input:checked + .form-check-label {
    font-weight: bold !important;
}
/*** END FORM ***/

/*** CARDS RAWMATERIAL ***/
.card img.card-img-top {
    height: 330px;
    object-fit: cover;
}
.card img.card-img-top.card-img-big {
    height: auto;
    max-height: 450px;
}
.card .card-body > p {
    color: var(--color-grey);
    font-size: .8rem;
}
.card i.bxs-heart {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.2rem;
}
.card i.bx-show {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 1.2rem;
}
/*** END CARDS RAWMATERIAL ***/

/*** CAROUSEL ***/
.carousel-caption {
    top: 2rem;
}

.carousel .carousel-item img {
    max-height: 450px;
    object-fit: cover;
}

.carousel .carousel-control-next-icon,
.carousel .carousel-control-prev-icon {
    --size: 2rem;
    width: var(--size);
    height: var(--size);
    border-radius: calc(var(--size) / 2);
    background-color: rgba(0,0,0, 0.33);
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel .carousel-control-prev-icon:before,
.carousel .carousel-control-next-icon:before {
    content: "\eb33";
    font-size: 1.4rem;
    font-family: 'boxicons';
}
.carousel .carousel-control-next-icon:before {
    content: "\ebe6";
}
.carousel-indicators [data-bs-target] {
    --size: .5rem;
    width: var(--size);
    height: var(--size);
    border-radius: calc(var(--size) / 2);
    border-top: inherit;
    border-bottom: inherit;
}
/*** END CAROUSEL ***/

/*** LIGHTSLIDER ***/
.lSSlideOuter.vertical {
    --height: calc(var(--light-slider-main-height) / 3);
    --width: calc(var(--height) * var(--light-slider-ratio));
    padding-right: calc(var(--width) + 16px) !important;
}
.lSSlideOuter.vertical .lSGallery {
    --height: calc(var(--light-slider-main-height) / 3);
    --width: calc(var(--height) * var(--light-slider-ratio));
    width: var(--width) !important;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-radius: 0;
}
.lSSlideOuter .lSPager.lSGallery li {
    --height: calc(var(--light-slider-main-height) / 3);
    --width: calc(var(--height) * var(--light-slider-ratio));
    height: var(--height) !important;
    width: var(--width) !important;
}
.lightSlider > li {
    background-color: #fff;
}
.lightSlider > li img {
    width: 100%;
    height: auto;
}
/*** END LIGHTSLIDER ***/

/*** RATING WIDGET ***/
.rating-widget i {
    font-size: 1.5rem;
    color: goldenrod;
}
.rating-widget:not([disabled]) i {
    cursor: pointer;
}
.rating-widget i.hover::before,
.rating-widget i.selected::before {
    content: "\eeb8";
}
/*** END RATING WIDGET ***/

/*** FOOTER ***/
footer {
    font-size: .875rem;
    color: var(--color-grey);
    background-color: var(--color-light-grey);
}
footer dd a {
    color: var(--color-grey);
}
footer dd a:hover {
    color: var(--color-grey);
    text-decoration: underline;
}
/*** END FOOTER ***/


/*** RESPONSIVE MD+ ***/
@media (min-width: 768px) {
    :root {
        --light-slider-ratio: 1.75;
    }
    header .brand h1,
    header .brand:hover h1 {
        --font-size: 1.2rem;
    }
    header .brand img {
        --size: 90px;
    }

    table.table tr > * {
        --padding-horizontal: 2rem;
    }
    table.table tr td img {
        --size: 90px;
    }

    .carousel .carousel-control-next-icon,
    .carousel .carousel-control-prev-icon {
        --size: 3rem
    }
    .carousel .carousel-control-prev-icon:before,
    .carousel .carousel-control-next-icon:before {
        font-size: 1.75rem;
    }

    .collapse.dont-collapse-sm {
        display: block;
    }
}