@import "fonts.css";

/* .......................................................................................... */
/* VUE
/* .......................................................................................... */
/* NOTE: used in product img selection*/
/*
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to / {
    opacity: 0;
}
*/

/* NOTE: used header menu*/
/*
.slide-fade-enter-active {
    transition: all .5s ease;
}
.slide-fade-leave-active {
    transition: all .6s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(15px);
    opacity: 0;
}
*/
/* .......................................................................................... */
/* common */
/* .......................................................................................... */
body{
    padding: 0;
    margin: 0;
    background-color: #fff;
}

/* backgrounds */
/*
.bg-default{
    background-color: #FFFEE6;
}
.bg-dark-beige{
    background-color: #FAF6CC;
}
.bg-green{
    background: #848e7b;
}

.bg-black{
    background: #0b1000;
}
*/


/* borders */
.bottom-border{
    border-bottom: 1px solid #0b1000;
}
.top-border{
    border-top: 1px solid #0b1000;
}
.left-border{
    border-left: 1px solid #0b1000;
}
.right-border{ /* NOTE: used one in buy/first*/
    border-right: 1px solid #0b1000;
}
.full-border{
    border: 1px solid #0b1000 !important;
}

/* paddings */
.padding-top-96px{
    padding-top: min(5vw, 96px);
}
.padding-bottom-99px{
    padding-bottom: min(5vw, 99px);
}



/* section conainer*/
.s-container{
    max-width: 1920px;
    margin: 0 auto;
    clear: both; /* important */
}

a:hover{
    color: #000;
    /*border-bottom: 1px solid #0b1000 !important;*/
}

/* text */
/*
.s-h1{
    color: #0b1000;
    text-transform: uppercase;

    font-family: 'Circe-Light', sans-serif;
    font-size: min(62px,calc(3.25vw));
    font-weight: 500;
    line-height: 100%;
    font-style: normal;
}

.s-h2 {
    color: #0b1000;
    text-transform: uppercase;

    font-family: 'Circe-Light', sans-serif;
    font-size: min(48px,calc(2.52vw));
    font-weight: 500;
    line-height: 100%;
    font-style: normal;
}

.s-text24{
    color: #0b1000;
    font-family: 'Circe', sans-serif;
    font-size: min(24px, calc(1.275vw));
    font-weight: 400;
    font-style: normal;
}

.s-text24-bold{
    color: #0b1000;
    font-family: 'Circe', sans-serif;
    font-size: min(24px, calc(1.275vw));
    font-weight: 700;
    font-style: normal;
}

.s-text16{
    color: #0b1000;
    font-family: 'Circe', sans-serif;
    font-size: min(16px, calc(0.85vw));
    font-weight: 400;
    font-style: normal;
}

.s-text16b{
    color: #0b1000;
    font-family: 'Circe', sans-serif;
    font-size: min(16px, calc(0.85vw));
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
}

.s-text16-bold {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(16px, calc(0.85vw));
    font-weight: 700;
    font-style: normal;
}

.s-text14 {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(14px, calc(0.85vw));
    font-weight: 700;
    font-style: normal;
}
.s-text14-a {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(14px, calc(0.85vw));
    font-weight: 400;
    font-style: normal;
}
.s-text14-bold {
    color: #0b1000;

    font-family: 'Circe-Bold', sans-serif;
    font-size: min(14px, calc(0.85vw));
    font-weight: 700;
    font-style: normal;
}

.s-text12-bold{
    color: #0b1000;
    font-family: 'Circe', sans-serif;
    font-size: min(12px, calc(0.85vw));
    font-weight: 700;
    font-style: normal;
}

.s-text18{
    color: #0b1000;
    font-family: 'Circe', sans-serif;
    font-size: min(18px, calc(1.5vw));
    font-weight: 400;
    font-style: normal;
    line-height: 150%;

}

*/

/***********************************************************/
/* mobile */
/***********************************************************/
/*
.m-s-container{
    max-width: 1920px;
    margin: 0 auto;
    clear: both;

    overflow-x: hidden;
    width:100%;

}

.m-s-h1{
    color: #0b1000;
    text-transform: uppercase;

    font-family: 'Circe-Light', sans-serif;
    font-size: min(32px, 11vw);
    font-weight: 500;
    line-height: 100%;
    font-style: normal;
}


.m-s-text24{
    color: #0b1000;
    font-family: 'Circe-Light', sans-serif;
    font-size: min(24px, 9vw);
    font-weight: 500;
    font-style: normal;

    line-height: 136%;
}

.m-padding-x-20px{
    padding-right: 20px;
    padding-left: 20px;
}

.m-black-button{
    position: relative;
    height: 64px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    background: #0b1000;
    color: white;
}
.m-black-button:hover {
    background: #E11F1A;
}
.m-s-text16f-bold {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(16px, 6vw);
    font-weight: 500;
    font-style: normal;
}

.m-s-text24-bold {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(24px, 6vw);
    font-weight: 600;
    font-style: normal;
}

.m-banner-img{
    height: min(300px, 75vw);
    object-fit: cover;
}

.m-s-text20-bold {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(20px, 4vw);
    font-weight: 600;
    font-style: normal;
}
.m-s-text16-bold {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(16px, 3.3vw);
    font-weight: 500;
    font-style: normal;
}

.m-s-text16-6 {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(16px, 6vw);
    font-weight: 400;
    font-style: normal;
}

.m-s-text15 {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(15px, 8vw);
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
}

.m-s-h2{
    color: #0b1000;
    text-transform: uppercase;

    font-family: 'Circe-Light', sans-serif;
    font-size: min(21px, 8vw);
    font-weight: 500;
    line-height: 100%;
    font-style: normal;
}


.m-s-text16-6-bold {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(16px, 6vw);
    font-weight: 700;
    font-style: normal;
}

.m-s-text16-6-bold-500 {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(16px, 6vw);
    font-weight: 500;
    font-style: normal;
}


*/


/***********************************************************/
/* scrollbar */
/***********************************************************/

:root {
    --code-bg-color: #aaaaaa;
    --code-font-size: 14px;
    --code-line-height: 1.4;
    --scroll-bar-color: #999;
    --scroll-bar-bg-color: #000;
}
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-track {
    background: var(--scroll-bar-bg-color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-color);
    border-radius: 0;
}

/***********************************************************/
/* yandex maps */
/***********************************************************/
.ymap-container {
    height: 100%;
}





/***********************************************************/
/* yandex maps */
/***********************************************************/
/*
.s-h3 {
    color: #0b1000;

    font-family: 'Circe-Light', sans-serif;
    font-size: min(30px,calc( 2.1vw));
    font-weight: 500;
    line-height: 100%;
    font-style: normal;
}
.m-s-h3{
    color: #0b1000;

    font-family: 'Circe-Light', sans-serif;
    font-size: min(24px, 7vw);
    font-weight: 500;
    line-height: 100%;
    font-style: normal;
}

.m-s-text20 {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(20px, 4vw);
    font-weight: 500;
    font-style: normal;
}

.text-justify{
    text-align: justify;
}

.s-text16-lf-bold {
    color: #0b1000;

    font-family: 'Circe', sans-serif;
    font-size: min(16px, 1.25vw);
    font-weight: 700;
    font-style: normal;
}
*/

/****************************************/
/* Hide the browser's default checkbox */
.cui {
    display: block;
    position: relative;
    padding-left: 3vw;
    /*margin-bottom: 12px;*/
    cursor: pointer;
    /*font-size: 20px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cui input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;

    min-width: 25px;
    min-height: 25px;
    max-width: 25px;
    max-height: 25px;

    background-color: transparent;

    border: 2px solid #0b1000;
}

/* On mouse-over, add a grey background color */
.cui:hover input ~ .checkmark {
    background-color: #FAF6CC;
}

/* When the checkbox is checked, add a blue background */
.cui input:checked ~ .checkmark {
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.cui input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.cui .checkmark:after {
    left: 7px;
    top: 4px;
    width: 8px;
    height: 11px;

    border: solid #0b1000;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media screen and (max-width: 1920px) {
}
@media screen and (max-width: 1199px) {
    .checkmark {
        min-width: 20px;
        min-height: 20px;
        max-width: 20px;
        max-height: 20px;
    }
    .cui .checkmark:after {
        left: 5px;
        top: 3px;
        width: 6px;
        height: 9px;
    }
}
@media screen and (max-width: 991px) {
    .checkmark {
        min-width: 17px;
        min-height: 17px;
        max-width: 17px;
        max-height: 17px;
    }
    .cui .checkmark:after {
        left: 5px;
        top: 2px;
        width: 5px;
        height: 8px;
    }
}
@media screen and (max-width: 767px) {
    .checkmark {
        min-width: 13px;
        min-height: 13px;
        max-width: 13px;
        max-height: 13px;
    }
    .cui .checkmark:after {
        left: 4px;
        top: 1px;
        width: 3px;
        height: 6px;
        border-width: 0 2px 2px 0;
    }
}
/*
@media screen and (max-width: 575px) {

    .checkmark {
        min-width: 13px;
        min-height: 13px;
        max-width: 13px;
        max-height: 13px;
    }


}
@media screen and (max-width: 240px) {
    .checkmark {
        min-width: 17px;
        min-height: 17px;
        max-width: 17px;
        max-height: 17px;
    }
}
*/