/*************************** GLOBAL *********************************************************/
 
:root { 
	--box-shadow: 1px 8px 8px rgba(0, 0, 0, 0.3);
	--border-radius: 10px;

	--header-height: 60px; 

	--body-side-bar-width: 18%;

	--font-size-title: 1.5rem;
	--font-size-big: 1rem;
	--font-size: 0.8rem;
	--font-size-sub: 0.75rem;

	--background-color-card: rgb(255, 255, 255); 
	--margin-card: 1rem;
	--width-card: 9rem;
	--width-card-extended: 20rem;
}

.hidden-desktop {
	display: inherit !important;
}
.hidden-mobile {
	display: none !important;
}
.full-width-mobile {
	width: 100% !important;
}


/*************************** HEADER *********************************************************/

.header_container{
	justify-content: center;
    align-items: center;
}

.header_container_logo{
	width: 10rem;
}

/*************************** BODY *********************************************************/

.body_container{
}
 
.body_left{
	display:none;
} 

.body_center{
	width: -webkit-fill-available;
	width: -moz-fill-available;
}

.body_right{
	display:none;
}  

.body-header { 
}

.body-section { 
}

.body-section-block { 
	flex-wrap: wrap;
}

.body-section-text {
	margin: 1rem;
	font-size: var(--font-size-big);
}


/*************************** FOOTER *********************************************************/

.footer-container{
	flex-direction: column;
}


/*************************** SCORE *********************************************************/
.box-score { 
	border-radius: calc(var(--border-radius) / 2); 
}

.box-score-small {  
	border-radius: calc(var(--border-radius) / 4); 
}



/*************************** CATEGORY PREVIEW *********************************************************/
.list-card-data { 
	font-size: var(--font-size);
    height: calc( var(--width-card) * 0.3);
}
  

/*************************** CATEGORY PREVIEW - EXTENDED *********************************************************/
.list-extended-card-anim{
	width: var(--width-card-extended);
	height: var(--width-card-extended);
} 
.list-extended-card-img{
	width: var(--width-card-extended);
	height: calc(var(--width-card-extended) * 3 / 4);
} 

.list-extended-card-list-container{ 
	width: var(--width-card-extended);  
}

.list-extended-card-data{ 
	height: calc( var(--width-card-extended) - calc( var(--width-card-extended) * 3 / 4));
	font-size: calc(var(--font-size-big) * 1.3);
}
  

/*************************** PRODUCT CARD *********************************************************/

.product-card{  
}

.product-card-anim
{  
	height: 8rem;   
}

.product-card-best-key { 
    position: absolute;
    top: -1.0rem;
    left: 2rem;
}
.product-card-best-key img{
	width: 6rem; 
}
.product-card-best-key div{
	width: 6rem; 
	top: 0.5rem; 
}
 

.product-card-img {  
	height: 8rem;
	width: 5rem;  
	object-fit: cover;
	object-position: 50% 75%;
} 

.product-card-index {  
	width: 2rem;
	height: 2rem; 
 
	line-height: 2rem; 
	font-size: var(--font-size-title);
}

.product-card-container {
	position: absolute;
	padding: 0.5rem;
	height: 7rem;
	left: 5rem;;

	justify-content: space-around;
    align-items: start;
}

.product-card-container div.box-score{
	font-size: var(--font-size-big);
	margin: 0;
	margin-right: 0.5rem;
	height: 2rem;
	width: 2rem;
	line-height: 2rem; 
}

.product-card-title{    
	font-size: var(--font-size); 
	justify-content: start;
} 


.product-card-desc{
	margin-top: .2rem; 
}


.product-card-direct
{ 
	bottom: 0.5rem;
	right: 0.5rem; 

	width: fit-content;
	height: fit-content; 
}


/*************************** COMPARATIVE 5 TABLE *********************************************************/

.list-table-info-img {
	width: 4rem;
	height: 3rem;
	margin: 0.2rem; 
}

.list-table-info-container td { 

	min-height: 2rem;
}



/*************************** SUBSCRIBE *********************************************************/


.subscribe-parent {  
	width: -webkit-fill-available;
	width: -moz-fill-available; 
}   
.subscribe-email {    
	width: -webkit-fill-available;
	width: -moz-fill-available;
}
.subscribe-send {    
	margin: 0.5rem 0;
} 

.subscribe-loading { 
    margin: 20px 30px; 
}