:root{
--default_font_size: 1rem;
--font-Roboto: "Roboto", sans-serif;
--animation-timing: 500ms ease-in-out;
--hamburger-gap: calc(var(--default_font_size) * 0.25);
--padding_1: calc(var(--hamburger-gap) * 1);
--padding_2: calc(var(--hamburger-gap) * 2);
--padding_3: calc(var(--hamburger-gap) * 3);
--padding_4: calc(var(--hamburger-gap) * 4);
--padding_5: calc(var(--hamburger-gap) * 5);
--padding_10: calc(var(--hamburger-gap) * 10);
--color_Black: #333333;
--color_LightGray: #E7E7E7;
--color_DarkGray: #555;
--coloe_White: #FFF;
--color_Green: #09e46e;
--color_LightGreen: #effae6;
--color_Orange: #FFA500;
--color_Pink: #e4097f;
}

.loading{}
.error{}

.SS_LOTOS{
    background-color: var(--color_LightGreen);
    width: 100vw;
    height: 100vh;
}
.SS_LOTOS main{
    width: 100%;
    height: 100%;
}

.SS_LOTOS section{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.SS_LOTOS .SS_LOTOS__lotos{
    height: 46%;
    width: 100%;
    padding: 0.5rem;
}

.SS_LOTOS .SS_LOTOS__lotos > div {
    position: relative;
    height: 100%;
}

.SS_LOTOS .SS_LOTOS__lotos > div > .SS_LOTOS__lotos___image {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 65%;
    transform: translate(-50%, -50%);
}

.SS_LOTOS__lotos___image img{
    height: 50%;
}

.SS_LOTOS .SS_LOTOS__lotos div div img{
    height: 100%;
    object-fit: contain;
}

.SS_LOTOS .SS_LOTOS__lotos div span {
    position: absolute;
    z-index: 10;
    display: flex;
}

.SS_LOTOS__lotos___NameSLO{
    top: 0rem;
    left: 2rem;
    font-size: 2rem;
    font-weight: 700;
}

.SS_LOTOS__lotos___Price{
    top: -1rem;
    right: 2rem;
    justify-content: right;
    font-size: 4rem;
    font-weight: 700;
    color: var(--color_Pink);
    
}

.SS_LOTOS__lotos___Price____Black {
    position: relative;
    display: inline-block;
    color: var(--color_Black);
    z-index: 15;
}

.SS_LOTOS__lotos___Price____Black::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 40px; /* Thickness of the line */
    background-color: black; /* Color of the diagonal line */
    transform: rotate(25deg); /* Rotate the line */
    transform-origin: left top;
}

.SS_LOTOS__lotos___Status{
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    justify-content: right;
    font-size: 2rem;
    padding: 0 1rem 0.5rem 1rem ;
    background-color: var(--color_Green);
}

.SS_LOTOS__lotos___Status.SS_LOTOS__lotos___Status____Hidden{
    display: none !important;
}

.SS_LOTOS__lotos___PriceSale{
    justify-content: right;
    bottom: 1rem;
    right: 2rem;
    font-size: 7rem;
    font-weight: 700;
    padding: 0.5rem;
    color: var(--color_Pink);
}

.SS_LOTOS__lotos___PriceSale.SS_LOTOS__lotos___PriceSale____Hidden{
    display: none !important;
}

.SS_LOTOS__lotos___Description{
    bottom: 1rem;
    left: 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

/* Logo  */

.SS_LOTOS section .SS_LOTOS__Logo{
    position: relative;
    height: 8%;
    width: 100%;
    background-color: var(--color_Black);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.SS_LOTOS section .SS_LOTOS__Logo div:first-of-type{
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: var(--color_LightGreen);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}

.SS_LOTOS section .SS_LOTOS__Logo svg:first-of-type{
    position: absolute;
    top: 25%;
    left: 30%;  
    transform: translateX(-50%);
    fill: #80cb4d;
    z-index: 10;
    height: 50%;
}

.SS_LOTOS section .SS_LOTOS__Logo svg:last-of-type{
    position: absolute;
    display: flex;
    align-items: center;
    align-content: center;
    top: 0;
    left: 50%;  
    transform: translateX(-50%);
    z-index: 10;
    height: 100%;
}

.SVG_hide .svg_94_And_1{fill: var(--color_Black);}
.SVG_hide .svg_94_And_2{fill: var(--color_LightGreen);}
.SVG_hide .svg_94_And_3{fill: var(--coloe_White);}

.SS_LOTOS section .SS_LOTOS__Logo img{
    position: absolute;
    right: 18%;
    height: 50%;
    z-index: 10;
    
}

.SS_LOTOS section .SS_LOTOS__Logo div:last-of-type{
    width: 50%;
    height: 100%;
    background-color: var(--color_Black);
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 5;
}

/* Ideas */

.SS_LOTOS .SS_LOTOS__ideas{
    position: relative;
    height: 47%;
    width: 100%;
    background-color: var(--color_Black);
}
.SS_LOTOS .SS_LOTOS__ideas .SS_LOTOS__ideas___Image {
    position: relative;
    height: 100%;
    width: 100%;
}

.SS_LOTOS .SS_LOTOS__ideas .SS_LOTOS__ideas___Image div{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}

.SS_LOTOS .SS_LOTOS__ideas .SS_LOTOS__ideas___Image img{
    height: 100%;
}

.SS_LOTOS .SS_LOTOS__ideas div div:last-of-type{
    display: flex;
    justify-content: center;
}

.SS_LOTOS .SS_LOTOS__ideas div div img{
    height: 100%;
    object-fit: contain;
}

.SS_LOTOS .SS_LOTOS__ideas div div span{
    position: absolute;
    font-size: 2rem;
    bottom: 0.5rem;
    font-weight: bold;
    background: url('https://t4.ftcdn.net/jpg/09/66/28/47/360_F_966284770_8zEGCk7rbqk4tWrE7QcDt2QBdnn23c4u.jpg');
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}