body {

}

.header {
    margin: 10px 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.headerSearch, .headerSearchButton {
    display: inline-block;
}

.headerSearchButton {
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background-color: #ED3F1C;
    transform: translate(0px, -15px);
    cursor: pointer;
    border-radius: 5px;
}

.headerSearchButton img {
    width: 20px;
    transform: translate(15px, 15px);
}

.headerSearch {
    width: calc(80% - 400px);
    margin-left: 40px;
}

.headerSearchInput {
    width: 100%;
    min-height: 40px;
    padding: 5px 0px 5px 45px;
    font-size: 24px;
    background: #f1f1f1;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    background:  #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 15px center;
}

.headerSetDescription {
    color: #5D5E64; 
    font-size: 24px;
    text-decoration: none;
}

.headerSetDescription:hover {
    color: #ED3F1C;
}

.headerDescriptionBorderBottom {
    position: absolute;
    width: calc(100% - 40px);
    height: 2px;
    margin-right: 20px;
    background: rgb(237,63,28);
    background: linear-gradient(90deg, rgba(237,63,28,1) 0%, rgba(237,128,8,1) 100%);
}

.headerShoppingCartIcon, .headerProfileIcon, .headerSearchIcon {
    position: fixed;
    top: 25px;
    right: 40px;
    font-size: 28px !important;
    color: #ED3F1C;
}

.headerProfileIcon {
    right: 120px;
    cursor: pointer;
}

.headerSearchIcon {
    right: 280px;
    transform: translate(0px, 3px);
    cursor: pointer;
}

.headerLanguage {
    position: fixed;
    top: 25px;
    right: 200px;
    font-size: 28px;
    text-decoration: none;
    color: #ED3F1C;
}

.headerShoppingCartIcon:hover, .headerProfileIcon:hover, .headerLanguage:hover, .headerSearchIcon:hover {
    color:#736B1E;
}

.headerShoppingCartItemCount {
    position: fixed;
    top: 40px;
    right: 80px;
    font-size: 36px !important;
    color: #ED3F1C;
}

.login {
    position: fixed;
    top: 80px;
    right: 40px;
    height: 350px;
    padding: 50px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 5px 5px #212121;
    border: 1px solid #f1f1f1;
    z-index: 99;
}

.login input {
    max-width: 187px;
}

.submitButton {
    max-width: 200px;
}

.loginText {
    color: #035fa0;
    cursor: pointer;
}

.socialLogin {
    width: 200px;
}

.socialImage {
    width: 100%;
}

.profileItem {
    margin-bottom: 20px !important;
}

.profileItem:hover {
    color: #736B1E;
}

.pankasStoreTitle {
    margin-left: 10px;
    font-size: 48px;
}

.mainContent {
    flex: 5;
    margin: 50px 20px 0 200px;
    padding-bottom: 50px;
}

.mainContentDetails {
    flex: 5;
    margin: 0 250px 20px 250px;
}

.input {
    margin-top: 5px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #5D5E64;
    border-radius: 5px;
}

.input:focus, .headerSearchInput:focus {
    outline: none;
    border: 1px solid #736B1E;
  }

.buttonTextWrapHeader {
    display: flex;
}

.buttonTextWrapHeaderRight {
    float: right;
}

.buttonTextHeader {
    flex: 2;
    height: 80px;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 60px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #5D5E64;
    margin-left: 20px;
    cursor: pointer;
}

.buyButton, .quantityButton, .iconButton, .buyButtonPainting {
    display: block;
    max-width: 80px;
    margin-top: 20px;
    padding: 10px;
    height: 80px;
    color:#ED3F1C;
    font-size: 14px;
    font-weight: 700;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #5D5E64;
    border-radius: 10px;
    box-shadow: 7px 7px 17px #f7f7f7, -7px -7px 17px #ffffff;
    cursor: pointer;
}

.buyButton:hover, .quantityButton:hover, .iconButton:hover, .buyButtonPainting:hover {
    color:#736B1E;
    scale: 1.02;
}

.buyButton {
    margin-left: 20px;
    min-width: 80px;
}

.buyButtonPainting {
    margin: 40px 20px;
    min-width: 80px;
}

.buyPainting {
    flex: 1;
    margin-top: 20px;
    min-width: 100px;
}

.billingAddressButton {
    min-width: 262px;
    min-height: 330px;
    margin: 0 50px 20px 0;
    color:#ED3F1C;
    text-align: center;
    line-height: 50px;
    padding: 10px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
}

.shippingSubmitButton {
    display: block;
}

.hideBillingAddress {
    color:#ED3F1C;
    cursor: pointer;
}

.inputGroupLabel {
    margin: 20px 0;
}

.logo {
    max-width: 36px;
}

.iconButton {
    line-height: 20px;
}

.searchBlock {
    position: fixed;
    top: 100px;
    left: 50px;
    padding: 20px;
    width: 80%;
    background-color: #ffffff;
    border: 1px solid #5D5E64;
    border-radius: 10px;
    z-index: 99;
}

.closeSearchButton {
    float: right;
    min-width: 35px;
    min-height: 35px;
    font-weight: 700;
    border: 1px solid #5D5E64;
    border-radius: 25px;
    cursor: poiner;
}

.closeSearchButton:hover {
    color: #ED3F1C;
    border: 1px solid #ED3F1C;
}

.closeSearchIcon {
    transform: translate(6px, 6px);
    cursor: pointer;
}

.quantityButton {
    width: 50px;
    height: 50px;
    margin: 20px;
    font-size: 24px;
    line-height: 50px;
}

.quantityText {
    font-size: 24px;
    font-weight: 700;
}

.itemArtist {
  display: inline-block;
  margin: 20px;
  padding: 10px;
  width: 200px;
  height: 200px;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  color: #5D5E64;
  border-radius: 10px;
  border: 1px solid #5D5E64;
  box-shadow: 5px 5px 24px #f7f7f7, -5px -5px 24px #ffffff;
}

.itemArtist:hover {
    border: 1px solid #736B1E;
    scale: 1.02;
}

.artistsProfilePicture {
    display: flex;
    align-items: center;
    width: 82px;
    margin: 20px auto 20px auto;
}

.artistsProfilePicture img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border:
    1px solid #f1f1f1;
}

.itemContainer {
    display: flex;
    max-width: 20%;
    flex-wrap: wrap;
    gap: 20px;
}

.itemImageAndInfo { 
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 25%;
    min-width: 100px;
    max-width: 250px;
    margin: 25px;
    color: #5D5E64;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    border-radius: 25px;
}

.item:hover {
    color: #ED3F1C;
    scale: 1.02;
}

.itemImage {
    border-radius: 10px;
}

.itemImage img, .paintingImage img {
    width: 100%;
    border-radius: 10px;
}

.itemDescription {
    flex: 1;
    min-height: 100px;
    padding: 10px 20px 20px 20px;
}

.shoppingCartItem {
    display: flex;
}

.shoppingCartItemTitle {
    padding: 5px 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    padding-left: 20px;
    max-width: 200px;
}

.itemDescriptionTitle, .paintingDescriptionTitle {
    margin-bottom: 5px;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 700
}

.paintingDescriptionTitle {
    margin-top: 10px;
}

.itemDescriptionArtist, .paintingDescriptionArtist {
    margin-top: 20px;
    margin-bottom: 5px;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 24px;
}

.paintingDescriptionArtist {
    font-size: 14px;
}

.itemDescritionContent {
    padding-left: 5px;
}

.paintingWrapper {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.painting {
    min-width: 200px;
    max-width: 200px;
    margin-bottom: 20px;
    color: #5D5E64;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
}

.painting:hover {
    border: 1px solid #736B1E;
}

.paintingImage {
    margin: 5px;
    border-radius: 10px;
}

.paintingDescription, .paintingDescriptionDetails {
    flex: 1;
    position: relative;
    min-height: 100px;
    min-width: 200px;
    max-width: 500px;
    padding: 0 20px 10px 20px;
    border-radius: 10px;
}

.itemDescritionPrice {
    position: absolute;
    bottom: 20px;
    right: 25px;
    font-size: 14px;
}

.showMoreText {
    width: 460px;
    font-size: 24px;
    padding: 20px;
    text-align: center;
    color:#ED3F1C;
    border: 1px solid #f8f4f1;
    border-radius: 10px;
    cursor: pointer;
}

.showMoreText:hover {
    color:#736B1E;
    border: 1px solid #736B1E;
}

.showMoreAllShowing {
    width: 660px;
    font-size: 24px;
    padding: 20px;
    text-align: center;
    color:#ED3F1C;
    border: 2px solid #f8f4f1;
    border-radius: 10px;
    cursor: default;
}

.shoppingCartRemoveItem {
    margin-left: 10px;
    cursor: pointer;
}

.shoppingCartLoginText {
    color:#5D5E64;
    text-decoration: none;
}

.shoppingCartLoginText:hover {
    color:#736B1E;
}

.shoppingCartRemoveItem:hover {
    color: #BF1B1B;
}

.itemLike {
    margin: 40px;
    width: 20px;
    font-size: 24px;
    color: #736B1E;
    cursor: pointer;
}

.itemDetailsContainer, .setDetailsContainer, .shoppingCartItemsContainer {
    padding-bottom: 20px;
    color: #5D5E64;
}

.itemDetailsContainer, .shoppingCartItemsContainer {
    border-bottom: 1px solid #5D5E64;
}

.itemDetailsImages {
    margin: 20px 0 0 20px;
}

.shoppingCartTotalText, .shoppingCartTotalSum, .shoppingCartTotalCurrency {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 700;
}

.shoppingCartTotalText {
    color:#ED3F1C;
}

.itemTitle, .itemSetsTitle {
    margin-bottom: 20px;
    color: #5D5E64;
    font-size: 24px;
    font-weight: 700;
    font-family: sans-serif;
}

.itemSetsTitle {
    font-size: 18px;
    margin: 10px 0;
}

.itemMainImage {
    max-width: 350px;
}

.itemDetailsSetItemImage, .shoppingCartImage {
    max-width: 200px;
}

.itemDetailsSetItemText {
    max-width: 200px;
    text-decoration: none;
    color: #5D5E64;
}

.itemMainImage img, .itemDetailsSetItemImage img, .shoppingCartImage img {
    width: 100%;
    border-radius: 5px;
}

.itemDetailsSetItems {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.itemDetailsSet {
    margin-bottom: 20px;
    font-size: 14px;
    color: #5D5E64;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

.itemDetailSetName {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700;
}

.itemDetailSetStory {
    margin-bottom: 10px;
}

.itemInfo {
    margin-left: 40px;
    max-width: 400px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

.itemDetailsSecondaryImage {
    color: #5D5E64;
    cursor: pointer;
}

.itemDetailsSecondaryImages {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    border-top: 1px solid #ED8008;
}

.itemDetailsSecondaryImage img {
    min-width: 100px;
}

.itemDetailsSecondaryImageBullet, .itemDetailsSecondaryImageBulletSelected {
    text-align: center;
    font-size: 36px;
}

.itemDetailsSecondaryImageBulletSelected {
    color: #ED3F1C;
} 

.itemDetailsSecondaryImageBullet {
    color: #f1f1f1;
}

.itemDetailsPrice, .itemDetailsDimensions {
    margin: 10px;
}

.shoppingCartItemDetails {
    margin: 20px;
}

.shoppingCartDetails {
    min-width: 200px;
}

.itemDetailsShoppingCartModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow:  7px 7px 17px #f7f7f7, -7px -7px 17px #ffffff;
}

.itemDetailsModalText {
    margin: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.setDetailsItem {
    margin: 20px 20px 0 0;
    font-size: 18px;
    text-decoration: none;
}

.setInfo {
    margin-bottom: 20px;
    padding-bottom: 20px; 
    width: calc(100% - 20px);
    font-size: 18px;
}

.itemMainImageSelected {
    display: block;
}

.itemMainImageHidden {
    display: none;
}

.continueBrowsingLink {
    color:#ED3F1C;
    text-decoration: none;
}

.sideMenuButtons {
    position: fixed;
    margin: 50px 20px 20px 20px;
    padding: 10px;
    min-width: 150px;
    height: 500px;
    border-radius: 10px;
}

.userProfileButton {
    float:right;
    margin-top: 10px;
    width: 50px;
    min-height: 50px;
    border-radius: 25px;
    cursor: pointer;
}

.userProfileMenu {
    position: absolute;
    display: none;
    top: 80px;
    right: 25px;
    width: 200px;
    z-index: 1;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow:  7px 7px 17px #f7f7f7, -7px -7px 17px #ffffff;
}

.userProfileMenuItem, .userProfileMenuItemTop, .userProfileMenuItemBottom {
    display: block;
    padding: 10px;
    color: #5D5E64;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border-top: 2px solid #5D5E64;
    border-left: 2px solid #5D5E64;
    border-right: 2px solid #5D5E64;
}

.userProfileMenuItemTop {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.userProfileMenuItemBottom {
    border-bottom: 2px solid #5D5E64;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.userProfileMenuItem:hover {
    color: #ffffff;
    background-color: #736B1E;
}

.userProfileMenuItem a, .termsAndConditionsLink {
    color: #5D5E64;
    text-decoration: none;
}

.textLink {
    color: #5D5E64;
    text-decoration: none;
}

.textLink:hover {
    color:#736B1E;
}

.privacyPolicy, .termsOfService {
    width: 80%;
    margin: auto;
}

.menuButton {
    display: none;
    position: fixed;
    bottom: 25px;
    left: 25px;
}

.menuIcon {
    color: #ED3F1C;
    font-size: 24;
}

.mobileMenu {
    position: fixed;
    bottom: 50px;
    left: 20px;
    width: 100%;
}

.mobileMenuButtons {
    padding: 50px 0;
    background-color: rgba(255, 255, 255, 0.8);
}

.mobileMenuItem {
    display: block;
    margin: 10px 0;
    color: #ED3F1C;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
}



.footerItem, .footerItemBottom {
    display: block;
    color: #5D5E64;
    text-decoration: none;
    font-size: 14px;
}

.footerItem:hover {
    color:#736B1E;
}

.spinner {
    width: 48px;
    margin-left: 350px;
}

.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
  }
.loader::after,
.loader::before {
    content: '';  
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border: 2px solid #f8f4f1;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
    animation: scaleOut 2s ease-in-out infinite;
}
.loader::after {
    border-color: #FF3D00;
    animation-delay: 1s;
}
  
@keyframes scaleOut {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@media only screen and (max-width: 1200px) {
    .item {
        margin: 50px 100px;
    }
}

@media only screen and (max-width: 1200px) {
    .buyButtonPainting {
       position: relative;
    }
}

@media only screen and (max-width: 800px) {
    .itemContainer {
        margin: 20px 5%;
        max-width: 100%;
        margin: auto;
    }
    .sideMenu {
        display: none;
    }
    .item {
        margin: 50px;
    }
    .mainContent {
        margin: 0;
        margin-top: 50px;
    }
    .mainContentDetails {
        margin: 20px;
    }
    .headerShoppingCartItemCount {
        top: 10px;
        right: 25px;
    }
    .shoppingCartItem {
        margin: 20px;
        flex-direction: column;
    }
    .itemEditContainer {
        width: 284px;
        margin: 20px auto;
    }
    .shippingSubmitButton {
        width: 156px;
        margin: auto;
    }
    .paySubmitButton {
        margin: 30px;
    }
    .itemInfo {
        margin-left: 0;
    }
    .itemDetailsShoppingCartModal {
        max-width: 140px;
    }
    .menuButton {
        display: block;
    }
    .paintingWrapper {
        display: block;
        min-width: auto;
    }
    .painting {
        width: 80%;
        margin: auto;
    }
    .showMoreText, .showMoreAllShowing {
        width: 70%;
        margin: auto;
    }
    .paintingDescription {
        min-width: auto;
    }
    .itemDescritionPrice {
        position: relative;
        margin: 20px 0 0 5px;
        bottom: 0;
        left: 0;
    }
    .spinner {
        margin: auto;
    }
    .buyButton, .buyButtonPainting {
        margin-left: 0;
    }
    .paintingDescription {
        padding-left: 10px;
    }
    .paintingDescriptionDetails {
        padding-top: 0;
        padding-left: 0;
    }
}