/* user defined colors */
:root {
    --white: #fff;
    --dark: #333;
    --orange-base: #d46f1c;
    --blue-base: #0f2c58;

    --orange-color: #d46f1c;
    --orange-color2: #e57f2d;
    --orange-color3: #f68f3e;

    --blue: #0f2c58;
    --blue2: #0e1b47;
    --blue3: #0f3d69;

    --red: #ff0000;
    --red2: #cc0000;

    --green: #00aa00;
    --green2: #008800;

    --graylink: #333;
    --graylink2: #0056b3;

    --light-blue: #b1daff;
    --link-color: #222;
    --header-link-color: #fff;
    --header-link-color2: #666;
    --header-link-color-hover: #222;
    --header-link-color-active: #222;
    --footer-bg: #0f2c58;
    --bs-primary-rgb: #0f3d69;
    --success: #198754;
}

.bg-white { background: var(--white); }
.bg-orange { background: var(--orange-color); }
.bg-blue { background: var(--blue); }
.bg-lightblue { background: var(--light-blue); }

.white { color: var(--white); }
.dark { color: var(--dark); }
.orange { color: var(--orange-color); }
.orange2 { color: var(--orange-color2); }
.orange3 { color: var(--orange-color3); }
.blue { color: var(--blue); }
.lightblue { color: var(--light-blue); }

.w-1em { width: 1em !important; }
.w-2em { width: 2em !important; }
.w-3em { width: 3em !important; }
.w-4em { width: 4em !important; }
.w-5em { width: 5em !important; }
.w-6em { width: 6em !important; }
.w-7em { width: 7em !important; }
.w-8em { width: 8em !important; }
.w-9em { width: 9em !important; }
.w-10em { width: 10em !important; }

.w-10per { width:10% !important; }
.w-20per { width:20% !important; }
.w-25per { width:25% !important; }
.w-30per { width:30% !important; }
.w-40per { width:40% !important; }
.w-50per { width:50% !important; }
.w-60per { width:60% !important; }
.w-70per { width:70% !important; }
.w-75per { width:75% !important; }
.w-80per { width:80% !important; }
.w-90per { width:90% !important; }
.w-100per { width:100% !important; }

.margin-bottom-1m { margin-bottom: 1em !important; }
.margin-bottom-2m { margin-bottom: 2em !important; }
.margin-bottom-3m { margin-bottom: 3em !important; }
.margin-bottom-4m { margin-bottom: 4em !important; }
.margin-bottom-5m { margin-bottom: 5em !important; }

/* override some BS classes */
.card {
    border-width: 1px !important;
    border-radius: .5em !important;
}
.border-primary {
    border-color: var(--blue) !important;
}
.border-warning {
    border-color: var(--orange-color2) !important;
}



.oswald {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
}
.source-sans {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
}
.font-xlight {
    font-weight: 200;
}
.font-light {
    font-weight: 300;
}
.font-regular {
    font-weight: 400;
}
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}
i, em {
    font-style: italic;
}
.font-spc-1 { letter-spacing: 0.1em; }
.font-spc-2 { letter-spacing: 0.2em; }
.font-spc-3 { letter-spacing: 0.3em; }

.size50 { font-size: 50% !important; }
.size60 { font-size: 60% !important; }
.size70 { font-size: 70% !important; }
.size80 { font-size: 80% !important; }
.size90 { font-size: 90% !important; }


.btn-outline-orange {
    background: var(--white);
    border:1px solid var(--orange-color2);
    color: var(--dark);
}
.btn-outline-orange:hover {
    background: var(--orange-color3);
    border:1px solid var(--orange-color2);
    color: var(--white);
}
.btn-blue {
    background: var(--blue);
    border:1px solid var(--blue2);
    color: var(--white);
}
.btn-blue:hover {
    background: var(--blue3);
    border:1px solid var(--blue3);
    color: var(--dark);
}
.btn-orange {
    background: var(--orange-color);
    border:1px solid var(--orange-color2);
    color: var(--white);
}
.btn-orange:hover {
    background: var(--orange-color3);
    border:1px solid var(--orange-color3);
    color: var(--dark);
}
.btn-outline-blue {
    background: var(--white);
    border:1px solid var(--blue);
    color: var(--blue);
}
.btn-outline-blue:hover,
.btn-outline-blue.active {
    background: var(--blue);
    border:1px solid var(--blue2);
    color: var(--white);
}


.medium { font-weight: 500; }
.bold { font-weight: 600; }
.fullwidth { width:100% !important; }
.nopad { padding:0 !important; }
.nomargin { margin:0 !important; }
.left { float:left !important; }
.right { float:right !important; }
.relative { position:relative; margin:0 auto; }

.pad5 { padding: 5px; }
.pad10 { padding: 10px; }
.pad15 { padding: 15px; }
.pad20 { padding: 20px; }
.pad30 { padding: 30px; }
.pad40 { padding: 40px; }
.pad50 { padding: 50px; }

.bottom-05em { margin-bottom:0.5em !important; }
.bottom-075em { margin-bottom:0.75em !important; }
.bottom-1em { margin-bottom:1em !important; }
.bottom-2em { margin-bottom:2em !important; }

.clear,
.clearbox {
    display:block !important;
    clear:both !important;
    width:100% !important;
}
.dontshow { display:none; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.first_upper::first-letter { text-transform: uppercase; }
.pointer { cursor:pointer; }
.top5 { margin-top:5px; }
.top10 { margin-top:10px; }
.top20 { margin-top:20px; }

.h-05em { height: 0.5em; }
.h-075em { height: 0.75em; }
.h-1em { height: 1em; }
.h-2em { height: 2em; }
.h-3em { height: 3em; }
.h-4em { height: 4em; }
.h-5em { height: 5em; }
.h-6em { height: 6em; }
.h-7em { height: 7em; }


.linkred {
    color:var(--red);
    cursor:pointer;
}
.linkred:hover {
    color:var(--red2);
}

.linkgreen {
    color:var(--green);
    cursor:pointer;
}
.linkgreen:hover {
    color:var(--green2);
}

.linkgray {
    color:var(--graylink);
    cursor:pointer;
}
.linkgray:hover {
    color:var(--graylink2);
}






body {
    background-color:var(--white);
}

#navbar_main {
    background-color: var(--white);
    font-size:130%;
    letter-spacing: -0.25px;
    min-height:66px !important;
}
#navbar_main a {
    text-decoration: none;
    padding-left: 0;
    padding-right: 1em;
    color: var(--orange-color);
}
#navbar_main a:hover {
    color: var(--header-link-color-hover);
}
#navbar_main a.active {
    color: var(--header-link-color-active);
}


.flag {
    height:25px;
    width:2em;
    float:left;
    display:block;
    background-position: 7px bottom;
    margin-top:0.2em;
}
.dropdown-menu {
    z-index:999;
    padding: 0.5em 0.25em !important;
}
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: -0.7em;
    margin-top: .125rem;
}
#navbar_main .dropdown-menu .dropdown-item  {
    width:100%;
    height:40px;
    line-height:40px;
    float:left;
    clear:both;
    margin: 0.1em 0 !important;
    padding:0.2em 0 0 0 !important;
}
#navbar_main .dropdown-item a {
    width:100%;
    float:left;
    clear:both;
    padding:0;
    margin:0;
}
#navbar_main .dropdown-item a .flag {
    width:100%;
    height:25px;
    line-height:1.25em;
    float:left;
    clear:both;
    background-position: 7px bottom;
    padding:0 0 0.5em 40px;
    vertical-align: top;
    font-size:120%;
    margin: 0.25em 0;
}
#navbar_main .dropdown-item a {
    color: var(--header-link-color2);
}
#navbar_main .dropdown-item a:hover {
    color: var(--header-link-color-hover);
}

.flag_cs,
.flag_cs_off:hover
{
    background: url('../img/cs.svg') no-repeat;
}
.flag_en,
.flag_en_off:hover
{
    background: url('../img/en.svg') no-repeat;
}
.flag_cs_off {
    background: url('../img/cs_off.svg') no-repeat;
}
.flag_en_off {
    background: url('../img/en_off.svg') no-repeat;
}

.langswitch {
    border:1px solid #666;
}

.query {
    margin-left:.75em;
    font-size:100%;
    line-height: 1.1em;
    align:center;
    vertical-align: center;
}


.left1m {
    margin-left:1em;
}
.left2m {
    margin-left:2em;
}
.left5m {
    margin-left:5em;
}
.right1m {
    margin-right:1em;
}
.right2m {
    margin-right:2em;
}
.right5m {
    margin-right:5em;
}


input.error,
textarea.error,
.form-control.error {
    border-color:#dd0000;
    background:#dd9999;
}

h1, h2, h3, h4, h5 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: var(--blue);
}
h1 { margin-top: 1em; }
h2 { margin-top: 1.5em; }
h3 { margin-top: 1.5em; }
h4 { margin-top: 1.5em; }
body h1:first-child {
    color: var(--orange-color);
    margin-top: 0em !important;
}

#content {
    width:100%;
    min-height:100%;
    padding-top:6rem;
}
#content_hp {
    width:100%;
    min-height:900px;
    padding-top:6rem;
}
#content_body {
    clear:both;
    padding:2em 0 4em 0;
}

#footer {
    background: var(--footer-bg);
    color:#fff;
    padding:0;
    margin:0;
    overflow:hidden;
    min-height:400px !important;
}
#footer2 {
    float:left;
    display:block;
    width:100%;
    height:auto;
    border-top:1px solid #000;
    background: var(--footer-bg);
    color:#fff;
    padding:1.5em 0 !important;
    margin:0;
    font-size:90%;
}
#footer2 a.footer-link {
    padding:0 0.5rem 0 0;
    color:var(--orange-color);
}
#footer2 a.footer-link:hover {
    transition: color 0.5s ease;
    color:var(--white);
}


#modal-cookies {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    left:0;
    top:0;
    background: url("../img/transparent_black40.png");
    text-align: center;
    z-index: 10201;
}
#modal-cookies-body {
    position:relative;
    margin: 10% auto;
    width:30%;
    max-width:800px;
    background: #fff;
    border:1px solid #888;
    border-radius: 6px;
    padding:2em;
    text-align: left;
}
#modal-cookie-closer {
    background: #1e81b0;
    border:1px solid #0d70a0;
    color:#fff;
    padding:0.5em;
    cursor:pointer;
    border-radius: 6px;
}
#modal-cookie-closer:hover {
    background: #2f92c1;
    cursor: pointer;
    color:#fff;
}
#modal-cookies-body p {
    display:block;
    float:left;
    text-align: left;
    clear:both;
}



.modal_div_wrapper {
    display:none;
    position:absolute;
    left:-30%;
    top:0;
    width:160%;
    height:100%;
    text-align:center;
    background:url('../img/transparent_black60.png');
    z-index: 99999;
    overflow:hidden;
}
.modal_div {
    display:block;
    position:relative;
    margin-top:5%;
    margin-left:30%;
    width:40%;
    min-width:20%;
    height:auto;
    background:#fff;
    border-radius: 5px;
    overflow:scroll;
}
.modal_div_closer {
    position:absolute;
    top:0.25em;
    right:0.25em;
    z-index:10000;
}




#logo {
    display:block;
    position:fixed;
    left:1.5em;
    top:1em;
    z-index: 9999;
    width:120px;
    height:107px;
    background:url('../img/logo.svg') no-repeat;
    background-size: cover;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out ;
    -ms-transition: all 500ms ease-in-out ;
    -o-transition: all 500ms ease-in-out ;
    transition: all 500ms ease-in-out ;
}
#logo.small {
    top:0.5em;
    width:60px !important;
    height:53px !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

div.div-contact {
    width:45%;
    clear:none;
    float:left;
}
div.div-contact:last-child {
    float:right;
}


.container{
    position: relative;
}

.modal.fade,
.nodal.show {
    z-index: 10000000 !important;
}
.modal-dialog {
    max-width: 900px !important;
}

#homepage_auctions .card-body {
    padding-bottom: .25em !important;
}


#sidebar-social {
    position: fixed;
    z-index: 10101;
    left:-2.6em;
    bottom:20%;
    display:block;
    width:3em;
    font-size:200%;
    background: var(--orange-color);
    border:2px solid var(--orange-color3);
    border-radius: 6px;
    overflow:hidden;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px;
    transition: 1.5s ease-in-out;
}
#sidebar-social:hover {
    left:-0.1em;
    transition: 0.75s ease-in-out;
}
#sidebar-social-body {
    display:block;
    float:right;
    width:100%;
    padding:0.5em 0.5em 0.5em 1em;
}
#sidebar-social-body a {
    color:#fff;
    display:block;
    clear:both;
    padding:0.25em 0.1em 0.25em 0em;
    cursor:pointer;
    text-decoration: none !important;
}
#sidebar-social-body a:hover {
    color:#000;
}
#sidebar-social-body a span {
    display:none;
}



.auction-thumb {
    display:block;
    width:100%;
    /*height:100%;*/
}
.auction-thumb .card-img-top {
    width:100%;
    height:50%;
    overflow:hidden;
}
.auction-thumb .card-img-top img {
    width:100%;
}
.auction-thumb.ended img.card-img-top img  {
    filter: grayscale(0.50);
}
.auction-timer {
    position: absolute;
    z-index: 999;
    display: inline-block;
    width: 50%;
    height: 30px;
    line-height:30px;
    color: var(--white);
    border-radius: 5px;
    font-size: 85%;
    left: 25%;
    top: -15px;
    text-align: center;
}
.auction-timer.winned {
    background-color: var(--success);
}
.auction-timer.ended {
    background-color: var(--bs-secondary);
}
@keyframes blinking-bg {
    0% {
        background-color: var(--blue);
        transition: all 500ms ease-in-out ;
    }
    100% {
        background-color: var(--orange-color);
    }
}
.auction-timer.lasthour {
    color: #000;
    animation: blinking-bg 2s infinite;
}


.auction_detail_image {
    display:block;
    float:left;
    width:90%;
    height:auto;
    margin:5%;
}
.auction_detail_image a {
    height:auto;
}
.auction_detail_image a img {
    height:auto;
}
.auction_detail_thumb {
    display:block;
    float:left;
    width:220px;
    height:220px;
    overflow:hidden;
    margin:0px 20px 20px 0;
    border:1px solid #666;
    border-radius: 5px;
    text-align:center;
}
.auction_detail_thumb a {
    min-width:100%;
    min-height:100%;
    overflow:hidden;
}
.auction_detail_thumb a img {
    min-height:220px !important;
    transition: all .5s ease;
}
.auction_detail_thumb a img:hover {
    transform: scale(1.20);
}
.auction-detail-number {
    display:block;
    font-size:150%;
}
.auction-detail-number-s,
.auction-detail-date {
    display:block;
    font-size:130%;
}
.auction-detail-timer {
    display:block;
    font-size:150%;
    background: var(--bs-secondary);
    border-radius: 3px;
    color: var(--white);
    padding: 0.25em 0;
}
.auction-detail-bid-ro {
    display:block;
    font-size:150%;
    background: var(--bs-secondary);
    border-radius: 3px;
    color: var(--white);
    padding: 0.25em 0;
}
.auction-detail-bid-rw {
    display:block;
    font-size:150%;
    padding: 0.25em 0;
}
.detail-btn-bid {
    display:block;
    width:100%;
    font-size:150% !important;
    padding: 0.25em 0;
}





/* my own custom lightbox for HP work samples */
#lightbox {
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width:100%;
    height:100%;
    display:none;
    background: url('../img/transparent_black40.png') repeat;
    text-align: center;
    padding-top:3em;
    transition: all ease;
}
#lightbox i {
    position:absolute;
    font-size:200%;
    color: var(--white);
    cursor: pointer;
    text-shadow: 0 0 1rem rgba(0, 47, 57, 0.75);
}
#lightbox i:hover {
    color: var(--orange-color);
}
#lightbox i.close {
    top: 2em;
    right:2em;
}
#lightbox i.prev {
    top: 40%;
    left:2em;
}
#lightbox i.next {
    top: 40%;
    right:2em;
}
#lightbox img {
    position: relative;
    margin: 0 auto;
    width: auto;
    height:auto;
    max-height:90% !important;
    box-shadow: 0 0 2rem rgba(0, 47, 57, 0.75);
}

ul.favorite-cats,
ul.favorite-cats li {
    width:100%;
    font-size:110%;
    list-style: none;
    lihe-height:1.75em;
    padding-left:0em;
    margin:0;
}
ul.favorite-cats li {
    width:100%;
    padding:0.25em;
}
ul.favorite-cats li:hover {
    background: var(--light-blue);
}
ul.favorite-cats li .favoritecat-remover {
    font-size:140%;
    float:right;
    color: gray;
    padding:0.1em;
}
ul.favorite-cats li .favoritecat-remover:hover {
    cursor:pointer;
    color: #dd0000;
}
ul.tree-main-categories,
ul.tree-sub-categories {
    width:100%;
    font-size:120%;
    list-style: none;
    lihe-height:1.75em;
    padding:0;
    margin:0;
    font-weight:bold;
}
ul.tree-sub-categories {
    font-size:100%;
    font-weight:normal;
}
ul.tree-main-categories li {
    width:100%;
    padding: 0.25em 0.5em 0.25em 0.5em;
}
ul.tree-sub-categories li {
    width:100%;
    padding: 0.25em 1em 0.25em 2em;
}
ul.tree-main-categories li:hover,
ul.tree-sub-categories li:hover {
    background: var(--light-blue);
}
li .favoritecat-adder {
    font-size:140%;
    float:right;
    color: gray;
    padding:0.1em;
}
li .favoritecat-adder:hover {
    cursor:pointer;
    color: var(--bs-success);
}































@media only screen and (max-width: 1600px) {
    .navbar-nav.left {
        padding-left:0.5em;
    }
    #logo {
        top:0.5em;
        width:60px !important;
        height:53px !important;
    }
}

@media only screen and (max-width: 1500px) {
    .navbar-nav.left {
        padding-left:40px;
    }
}

@media only screen and (max-width: 1440px) {
    .navbar-nav.left {
        padding-left:55px;
    }
}
@media only screen and (max-width: 1400px) {
    .navbar-nav.left {
        padding-left:70px;
    }
}
@media only screen and (max-width: 1350px) {

}

@media only screen and (max-width: 1250px) {
    .navbar-nav.left {
        padding-left:80px;
    }
}

@media only screen and (max-width: 1024px) {
    ul#hp_links {
        margin:0;
        padding:0;
        padding-bottom:3em !important;
    }
    ul#hp_links li {
        width:100%;
        height:auto;
        min-height: unset;
        clear:both;
        margin:0 0 0.5em 0;
    }
    span.hp_button {
        display:inline-block;
        width:100%;
        height:auto;
        min-height: unset;
        line-height:unset;
        margin:0;
    }

    #modal-cookies-body {
        position: relative;
        margin: 1% auto;
        width: auto;
        max-width: 98%;
        font-size:80%;
    }
    #footer_links { float:left; width:auto !important; }
    #footer_copy { float:right !important; width:auto !important; }
    #sidebar-social {
        clear:both;
        width:100%;
        position: static;
        display: block;
        width:100%;
        margin-top:2em;
        background: var(--footer-bg);
        border-radius:0;
        border:none;
        border-top: 1px solid #404040;
        box-shadow: none;
        margin:1em 0 0 0;
        padding:0 !important;
    }
    #sidebar-social-body {
        width:100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        column-gap: 1em;
    }
    #sidebar-social-body a {
        clear: none !important;
    }
    #sidebar-social-body a:hover {
        color:var(--orange-color3);
    }
}

@media only screen and (max-width: 768px) {
    .flag,.flag:hover {
        margin:0.5em 0;
    }
    #logo {
        right:1em;
        left:auto !important;
    }
    .sidebar {
        display:none;
    }
    .navbar-nav.left {
        padding-left:0;
    }
    #navbar_main a {
        padding-left:0;
    }
    .query {
        margin-left:0;
    }
    ul.navbar-nav.right {
        float:left !important;
        with:100%;
        clear:both;
    }
    .dropdown-menu {
        border:none;
        padding:0 !important;
    }
    #navbar_main .dropdown-menu .dropdown-item {
        margin-left:-0.5em !important;
    }
}
@media only screen and (max-width: 684px) {
    #logo {
        left:82%;
    }
}
@media only screen and (max-width: 600px) {
    #logo {
        left:80%;
    }
}


.img-thumbnail {
    width:230px !important;
    height:180px !important;
    overflow:hidden;
    margin: 0.5em;
    text-align: center;
}
.img-thumbnail a {
    display:block;
    float:left;
    width:210px;
    height:160px;
    overflow:hidden;
    padding:0;
    margin:5px;
    text-align: center;
}
.img-thumbnail img {
    transition: transform .5s ease;
}
.img-thumbnail:hover img {
    transform: scale(1.25);
}


.color-header {
    color: var(--white);
}
.color-header2 {
    color: var(--white);
}



/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue2);
    --_m:
            conic-gradient(#0000 10%,#000),
            linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}



.comm_wrapper {}
.comm_header {
    border-top:1px solid silver;
    padding:0.5em 0.25em 1em 0em;
}
.post_topic {
    margin-bottom:1.5em;
}
.comm_post {
    border-radius: 0.5em;
    padding:0.5em 1em;
}
.comm_post.type_0 {
    background-color: #fff;
}
.comm_post.type_1 {
    background-color: #f0f0f0;
}
.post_date {
    display:block;
    float:right;
    font-size: 80%;
}
.post_content {
    font-size:90%;
}


/* QR code styles */
div.qrcode-wrapper {
    border: 1px solid #000;
    margin:0px;
    padding:0px;
    background: #fff;
    text-align:center;
}
img.qrcode {
    width:200px;
    height:200px;
}
span.qrcode-legend {
    color: #333;
    font-size: 120%;
}