body {background:black;background-image:url('background2.webp');background-repeat:repeat;
	margin:0;padding:0;width:100%;font-size:100%;}
	
h1, h2, h3, h4, h5, h6 {margin:0.3em 0;text-align:center;color:white;font-style:italic;}
h1 {font-size:2.8em;}
h2 {font-size:2.5em;}
h3 {font-size:1.8em;}
h3 img{vertical-align: middle;display:inline-block;}
h4 {font-size:1.5em;}

p {margin:1em 0.5em;font-size:1em;}

a:link, a:visited{font-weight:bold;color:white;}
a:hover, a:active{font-weight:bold;color:yellow;}

.bb_shadow{text-shadow:-1px -1px 4px black,1px -1px 4px black,-1px 1px 4px black,1px 1px 4px black;}

#wrapper {margin:0 auto;padding:0;line-height:1.5;font-size:1em;font-family:trebuchet,verdana,Helvetica,sans-serif;color:white;text-align:justify;}
#header {margin:0 auto -8px auto;text-align:center;color:white;}
#logo_header {width:303px;height:160px;margin:0 auto;background-repeat:no-repeat;background-position:top center;background-image:url('../images/logo_transparent(HW).png');}
#hojaeco {position:absolute;top:75px;left:55px;width:100px;height:67px;background-repeat:no-repeat;background-position:bottom left;background-image:url('../images/hoja_eco.png');background-size:contain;}
#kashrut {position:absolute;top:57px;left:160px;width:100px;height:100px;background-repeat:no-repeat;background-position:bottom left;background-image:url('../images/kashrut.png');background-size:contain;}
#social_box {position:absolute;top:20px;left:40px;}

#navigation {font-weight:bold;font-size:1.4em;text-align:center;position:relative;text-transform:uppercase;}
nav ul {margin:0;padding:0px;margin-bottom:4px;list-style:none;position:relative;display:inline-table;}
nav ul li {float:left;display:list-item;list-style:none}
nav ul li a {display:block;padding:8px 18px;color:#FFF;text-decoration:none;}

.language_dropdown {position:absolute;top:20px;right:40px;display:inline-block;font-size:1em;}
.language_dropdown_button {background-color:black;color:white;padding:5px 16px;font-size:1.5em;font-weight:bold;cursor:pointer;border-width:5px;border-style:solid;border-color:#dfdf3c;}
.language_dropdown_content {display:none;position:absolute;background-color:black;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;}
.language_dropdown_content a {border-bottom:4px solid #dfdf3c;width:100%;padding-bottom:3px;color:white;text-decoration:none;font-weight:bold;font-size: 1.2em;}
.language_dropdown_content a:hover {background-color:white;color:black;}
.language_dropdown:hover .language_dropdown_content {display:block;}
.language_dropdown:hover .language_dropdown_button {background-color:#3e8e41;}

.flagES, .flagCA, .flagEN, .flagFR, .flagDE, .flagGL, .flagEU {background:url("../images/ui/flags2.webp") no-repeat;display:inline-block;}
.flagES::before, .flagCA::before, .flagEN::before, .flagFR::before, .flagDE::before, .flagGL::before, .flagEU::before {content:"";width:40px;height:27px;padding-left:43px;}
.flagES {background-position:0 0;}
.flagCA {background-position:0 -31px;}	
.flagEN {background-position:0 -62px;}	
.flagFR {background-position:0 -93px;}
.flagDE {background-position:0 -124px;}
.flagGL {background-position:0 -155px;}
.flagEU {background-position:0 -186px;}

#content {color:white;background:#000000df;border-width:5px 0px;border-style:solid;border-color:#dfdf3c;
	margin:0 auto;padding:0;width:100%;float:none;font-size:1.8em;
	display:flex;flex-flow:column wrap;}

#footer{margin:7px auto 6px;line-height:1.4;text-align:center;font-size:1.2em;color:white;}
#footer_bottom{width:100%;line-height:1.1;text-align:center;font-size:0.55em;}

.icon, .social_icon {object-fit:contain;vertical-align:middle;}
.icon:hover, .social_icon:hover {filter: sepia(1);}
.icon {width:30px;}
.social_icon {width:40px;}

.flex_row, .flex_col{display:flex;width:100%;justify-content:space-evenly;}
.flex_col{flex-flow:column wrap;}
.flex_row{flex-flow:row wrap;}
.column_33, .column_40, .column_50, .column_60, .flex_row, .flex_col{text-align:center;align-self:center;}
.column_33{width:33%;}
.column_40{width:40%;}
.column_50{width:50%;}
.column_60{width:60%;}
.align_top{align-self:flex-start;}

.border{border-width:5px 0px;border-style:solid;border-color:#dfdf3c;line-height:0;}
.img_100p{width:100%;height:auto;}
.max_h100p{max-height:100%;object-fit:contain;}
.max_h300{max-height:300px;object-fit:contain;}
.max_h500{max-height:500px;object-fit:contain;}

.producto{list-style:none;list-style-position:inside;padding-inline-start:0;}
.video_link:hover{filter: saturate(2);}

input,textarea {box-sizing:border-box;resize:vertical;width:100%;margin:0;padding:2px;
	font-size:100%;color:black;background:white;border:1px solid #ccc;margin:5px 0;}   
input:focus,textarea:focus,select:focus {border:1px solid #999;background-color:#FFFFFF;}
#form_box{text-align:left;width:50%;margin:5px auto;padding:4px;border:3px solid #dfdf3c;border-radius:5px;color:black;background:#ffffffcf;}

#success_box,#warning_box,#error_box{width:50%;border-radius:5px;margin:5px auto;padding:4px;background-repeat:no-repeat;background-position:95% 5%;
	list-style-position:inside;padding-inline-start:0;}
#success_box h2,#success_box h4{color:white;}
#warning_box h2,#warning_box h4{color:#9F6000;}
#error_box h2,#error_box h4{color: white;}
#success_box {border:1px solid green;color:white;background-color:#69bc53;background-image:url('../images/ui/Dialog-accept.svg');}
#warning_box {border:1px solid yellow;color:#9f6000;background-color:#feefB3;background-image:url('../images/ui/Dialog-warning.svg');}
#error_box {border:1px solid red;color: white; background-color:#c36664;background-image:url('../images/ui/Dialog-error-round.svg');}
#error_box a:link,#error_box a:visited {font-weight:bold;color:white;text-decoration:underline;}
#error_box a:hover,#error_box a:active {font-weight:bold;color:orange;text-decoration:underline;}

figure{position:relative;margin:0;height:fit-content;}
figure.left_float{margin:0 6px 0 6px;}
figure.right_float{margin:0 6px 0 6px;}
figcaption{color:#ffdd00;font-size:0.90em;font-style:italic;line-height:1em;
	text-shadow:-1px -1px 0 #5f290e,1px -1px 0 #5f290e,-1px 1px 0 #5f290e,1px 1px 0 #5f290e;
	position:absolute;bottom:1.5em;left:0;right:0;margin:0;padding:0;text-align:center;}

@media screen and (max-width: 900px) {
	#content {font-size:1.7em;}

	.column_33{width:50%;}
	.column_40{width:50%;}
	.column_50{width:50%;}
	.column_60{width:50%;}
	#success_box,#warning_box,#error_box,#form_box{width:65%;}
}
@media screen and (max-width: 800px) {
	#social_box{left:25px;}
	
	#hojaeco {top:78px;left:6px;height:60px;}
	#kashrut {top:70px;left:100px;height:80px;}	
}
@media screen and (max-width: 650px) {
	#content {font-size:1.4em;word-wrap:break-word;}
	
	#logo_header {height:136px;background-size:contain;}
	#hojaeco {top:47px;left:25px;height:55px;}
	#kashrut {top:110px;left:25px;height:80px;}
	#social_box {top:5px;left:15px;}
	.language_dropdown {top:5px;right:5px;}
	.language_dropdown_button {padding:2px;border-width:2px;}
	
	#navigation {font-weight:bold;font-size:1.2em;}
	nav ul li {float:none;}
	nav ul li a {padding:4px 0px;}
		
	.column_33{width:100%;}
	.column_40{width:100%;}
	.column_50{width:100%;}
	.column_60{width:100%;}
	
	.icon {width:20px;}
	.social_icon {width:35px;}
	
	#success_box,#warning_box,#error_box,#form_box{width:80%;}
}
@media screen and (max-width: 430px) {
	#hojaeco {top:56px;left:4px;height:45px;}
	#kashrut {top:110px;left:4px;height:70px;}
	#social_box {left:5px;}
	.language_dropdown {top:2px;right:2px;}
	.language_dropdown_button {padding:1px;border-width:2px;}
	.social_icon {width:30px;}
	#success_box,#warning_box,#error_box,#form_box{width:95%;}
}