@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

:root {
    /* COLOURS */
    --primary-color: #ae9b5b;
    --text-error: #f00000;
    --orange-color: #ffb200;
    --purple-color: #840265;
    --border-color: #e2e2e2;
    --confirmation-color: #f39d20;
    /* ========================================= */
    --radius: 8px;
    /* ========================================= */
    /* BUTTONS */
    --button-height: 40px;
    --button-font-size: 14px;
    --button-text-color: var(--primary-color);
    --button-hover-text-color: var(--primary-color);
    --button-background-color: unset;
    --button-hover-background-color: unset;
    --button-border-color: var(--button-background-color);
    --button-hover-border-color: var(--button-border-color);
    --button-border-radius: 0px;
    --button-hover-border-radius: 0px;
    --button-border-width: 1px;
    --button-hover-border-width: 1px;
    /* primary Button */
    --primary-button-text-color: #ffffff;
    --primary-button-hover-text-color: var(--primary-color);
    --primary-button-background-color: var(--primary-color);
    --primary-button-hover-background-color: #ffffff;
    --primary-button-border-color: var(--primary-button-background-color);
    --primary-button-hover-border-color: var(--primary-button-border-color);
    --primary-button-border-width: var(--button-border-width);
    --primary-button-hover-border-width: var(--button-hover-border-width);
    /* secondary */
    --secondary-button-text-color: var(--button-text-color);
    --secondary-button-hover-text-color: var(--secondary-button-text-color);
    --secondary-button-background-color: #ffffff;
    --secondary-button-hover-background-color: var(--secondary-button-background-color);
    --secondary-button-border-color: var(--primary-color);
    --secondary-button-hover-border-color: var(--secondary-button-border-color);
    --secondary-button-border-width: var(--button-border-width);
    --secondary-button-hover-border-width: var(--secondary-button-border-width);
    /* tertiary */
    --tertiary-button-text-color: var(--button-text-color);
    --tertiary-button-hover-text-color: var(--tertiary-button-text-color);
    --tertiary-button-background-color: var(--button-background-color);
    --tertiary-button-hover-background-color: var(--tertiary-button-background-color);
    --tertiary-button-border-color: transparent;
    --tertiary-button-hover-border-color: var(--tertiary-button-border-color);
    --tertiary-button-border-width: var(--button-border-width);
    --tertiary-button-hover-border-width: var(--tertiary-button-border-width);
    /* Back Button */
    --back-button-font-size: 14px;
    --back-arrow-size: 11px;
    --back-button-text-color: var(--primary-color);
    --back-button-hover-text-color: var(--primary-color);
    --back-button-border-color: transparent;
    --back-button-hover-border-color: transparent;
    --back-button-background-color: transparent;
    --back-button-hover-background-color: transparent;
    --back-button-border-radius: 5px;
    --back-button-hover-border-radius: 5px;
    --back-button-border-width: 0px;
    --back-button-hover-border-width: 0px;
    /* ========================================= */
    /* WARNING */
    --warning-color: #f39d20;
    --warning-background-color: #ffe8b2;
    --danger-color: #f06e9c;
    --danger-background-color: #fad2e0;
    --success-color: #59ce78;
    --success-background-color: #bafbcb;
    /* ========================================= */
    /* BACKGROUNDS */
    --primary-background-color: #fbfbfb;
    --secondary-background-color: #ffffff;
    /* ========================================= */
    /* TEXT */
    --primary-text-color: #444444;
    --secondary-text-color: #606060;
    --label-text-color: #7a7a7a;
    --light-text-color: #b3b3b3;
    --primary-text-color-hover: rgba(0, 0, 0, 0.5);
    --secondary-text-color-hover: #ffffff;
    /* ========================================= */
    /* PROMOTION */
    --promotion-info-bg-color: #c9f1fd;
    --promotion-info-border-color: #00a4d3;
    --promotion-header-color: #e5007d;
    /* ========================================= */
    /* DISABLED */
    --disabled-text-color: #e3e3e3;
    --disabled-border-color: #bbbbbb;
    --disabled-background-color: #bbbbbb;
    /* ========================================= */
    /* Shadows */
    --light-box-shadow: 0px 0px 15px 0px #eaeaea;
    --dark-box-shadow: 0px 0px 5px 4px #b3b3b3;
    --dark-text-shadow: 0px -1px 1px #b3b3b3;
    /* ========================================= */
    /* Others */
    --basket-color: var(--orange-color);
    --basket-items-count-color: var(--primary-button-text-color);
    --basket-items-count-bgcolor: var(--primary-button-background-color);
    --modal-background: #ffffff;
    --modal-text-color: #444444;
    --hr-background-color: #eee;
    --place-holder-color: #c0c0c0;
    --thumbnails-title-color: var(--primary-color);
    --performance-subtitle-color: #010219;
    --inputs-background-color: #f7f6f6;
    --footerend-background-color: #000;
    --font-family: "ITCStoneInformalCom-Med", Arial, Verdana, Helvetica, sans-serif;
    --table-striped-background-color: rgba(0, 0, 0, 0.081);
}

@font-face {
  font-family: ITCStoneInformalCom-Med;
  src: url(/upload/file/config/320484_4_0.eot);
  src: url(/upload/file/config/320484_4_0.eot?#iefix) format('embedded-opentype'),
       url(/upload/file/config/320484_4_0.woff2) format('woff2'),
       url(/upload/file/config/320484_4_0.woff) format('woff'),
       url(/upload/file/config/320484_4_0.ttf) format('truetype'),
       url(/upload/file/config/320484_4_0.svg#sanuk-lightregular) format('svg');
  font-weight: 400;
  font-style: normal;
}

* {
    font-family: var(--font-family);
}

#page-container .main-container {
    min-height: calc(100vh - 182px);
}

.btn, button {
    transition: all .3s;
}

header,
footer {
    margin: auto;
    max-width: 1264px;
}

header {
    padding: 15px 0;
}

footer {
    padding-bottom: 50px;
}
footer a {
    color: var(--primary-color);
}
/* Staring Styling the thumbnail */
.top-events h1 {
    font-weight: 300;
    font-size: 24px;
    text-transform: uppercase;
}
.row.top-events {
    display: flex;
}
.row.top-events > div{
    display: flex;
}

.thumbnail .caption-event-info {
    height: calc(100% - 100px);
}
.thumbnail .caption-event-info .caption-bottom {
    max-height: 100px;
}

/* Ending Styling the thumbnail */

@media screen and (min-width: 1265px) {
    header > .row > div {
        padding: 0;
    }
    .thumbnail {
        width: 100%;
    }
    footer .col-sm-4 {
        padding: 0;
    }
    footer .footer-content {
        text-align: right;
    }
}

@media screen and (max-width: 1294px) {
    .row.top-events {
        flex-direction: column;
    }
    .row.top-events > div {
        min-width: 100%;
    }
    .row.top-events > div > .thumbnail {
        width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .row.top-events .caption.caption-bottom hr {
        margin: 15px 0px 10px 0;
    }
    .row.top-events > div > .thumbnail p {
        margin: 0;
    }
}

#basket-details #cart-button .basket-item-count {
    font-family: Arial, sans-serif;
}