.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
	justify-content: space-between;

}
ul.flex,ol.flex{list-style: none;}
ul.flex li,
ol.flex li{position: relative; line-height: 1.8; padding-top: 40px;}
ul.flex li::before{
	position: absolute;
	top:0;
	padding: 5px 0 0;
	left: -1.2em;
	font-weight: bold;
}

ul.flex li::before{
	content: '\f0da';
    font-family:"Font Awesome 5 Free";

	-webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
	font-size: 0.9em;
}


.flex.flx2 > *,
.flex.flx3 > *{
  min-width: 8%;
	margin-bottom:10px;
}



	.flex.flx2 > *{ flex-basis: 49%;}
	.flex.flx2::before{  content:"";  display: block;  width:49%;  order:1;}
	.flex.flx2::after{  content:"";  display: block;  width:49%;}

  .flex.flx2.pdlg > *{ flex-basis: 46%;}
	.flex.flx2.pdlg::before{  content:"";  display: block;  width:46%;  order:1;}
	.flex.flx2.pdlg::after{  content:"";  display: block;  width:46%;}

	.flex.flx3 > *{ flex-basis: 32%;}
	.flex.flx3::before{  content:"";  display: block;  width:32%;  order:1;}
	.flex.flx3::after{  content:"";  display: block;  width:32%;}

  .flex.flx3.pdlg > *{ flex-basis: 30%;}
	.flex.flx3.pdlg::before{  content:"";  display: block;  width:30%;  order:1;}
	.flex.flx3.pdlg::after{  content:"";  display: block;  width:30%;}

	.flex.ctr::before,
	.flex.ctr::after{display: none;}


@media all and (max-width: 768px) {
	.flex.flx2:not(.keep) > *{ flex-basis: 100%;}
	.flex.flx2:not(.keep)::before{ display: none;}
	.flex.flx2:not(.keep)::after{  display: none;}
	.flex.flx3:not(.keep) > *{ flex-basis: 100%;}
	.flex.flx3:not(.keep)::before{ display: none;}
	.flex.flx3:not(.keep)::after{ display: none;}
  .flex.flx2.pdlg:not(.keep) > *{ flex-basis: 100%;}
	.flex.flx2.pdlg:not(.keep)::before{ display: none;}
	.flex.flx2.pdlg:not(.keep)::after{  display: none;}
	.flex.flx3.pdlg:not(.keep) > *{ flex-basis: 100%;}
	.flex.flx3.pdlg:not(.keep)::before{ display: none;}
	.flex.flx3.pdlg:not(.keep)::after{ display: none;}
}



.coronabox{
	background-color: #cf0000;
	/* border-radius: 20px; */
	padding:10px 0 0;
	max-width: 800px;
	margin: 0 auto;
}
.coronabox .innerbox{
	background-color: #fff;
	padding: 2%;
	margin: 0;
	/* border-radius: 10px; */
	color: #333;
}
.coronabox h3{
	margin: 0 0 0.5em !important;
	color: #FFF;
	font-size: 20px !important;
}
.coronabox h4{
	color: #cf0000;
	font-weight: bold;
	border-bottom:2px solid #AAA;
	padding-bottom: 0.2em;
	margin: 0 auto 15px;
	max-width: 400px;
	font-size: 18px   !important;
}
.coronabox ul{
	margin-bottom:0 !important;
}
.coronabox .leftbox .box {
	border: 1px solid #AAA;
	border-radius: 6px;
}
.coronabox .leftbox p{
	font-size: 0.9em;
	line-height: 1.3em;
	margin: 0 auto 10px;
	max-width: 400px;
}
.coronabox .leftbox ul li{
	list-style: none;
	position: relative;
	font-size: 1em;
	line-height: 1.3;
	margin: 3% 0;
	padding: 5px 0;
}
.coronabox .leftbox ul li:before{
	position: absolute;
	top:0.6em;
	left: -1.3em;
	line-height: 1;
	color: #cf0000;
	font-weight: bold;
	content: '\f00c';
    font-family:"Font Awesome 5 Free";

	-webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
	font-size: 0.9em;
}
.coronabox .rightbox ul li:before{
	display: none !important;
}
.coronabox .rightbox ul{
	margin: 0 auto;
	padding: 0;
	max-width: 400px;
}
.coronabox .rightbox ul li{
	text-align: center;
	padding: 2% 0.3em;
	background-color: #f6f6f6;
	border-radius: 6px;
	font-size: 14px;
}
.coronabox .rightbox ul li img{
	margin: 0 auto;
	width: 60%;
	mix-blend-mode: multiply;
}
.coronabox .rightbox ul li span{
	display: block;
	margin-bottom: 0.3em;
}

.coronabox h4,
.coronabox .leftbox p,
.coronabox .rightbox ul,
.coronabox .leftbox .box{
	max-width: 400px;
	width: 90%;
}


@media all and (min-width: 1000px) {
	.coronabox{
		padding:15px 0 0;
	}
	/* .coronabox h3{
		font-size: 20px   !important;
	} */
}
@media all and (min-width: 769px) {
	.coronabox{
	/* width: 750px; */
	}
}
@media all and (max-width: 768px) {
	.coronabox{
		max-width: 450px;
	}
	.coronabox .innerbox{
		padding: 15px;
	}
	.coronabox .leftbox{
		margin-bottom: 35px;
	}
	.coronabox h3{
		font-size: 14px   !important;
	}
	.coronabox h4{
		margin-top: 0.8em;
		font-size: 16px   !important;
	}
	.coronabox h4,
	.coronabox .leftbox p,
	.coronabox .rightbox ul,
	.coronabox .leftbox .box{
		max-width: 100%;
	}
	.coronabox .leftbox ul li{
		font-size: 1em;
		margin: 0;
	}
}
@media all and (max-width: 600px) {
	.coronabox h3{
		font-size: 12px   !important;
	}
}
@media all and (max-width: 480px) {
  .coronabox{
    font-size: 0.6em;
    max-width: 300px;
  }
  .coronabox .innerbox {
    padding: 8px;
}
  .coronabox h3{
		font-size: 10px   !important;
    text-align: left;
    padding-left: 0.8em;
	}
	.coronabox h4{
		font-size: 11px   !important;
    margin-bottom: 0.8em !important;
	}
  .coronabox .leftbox{
    margin-bottom: 10px;
  }
  .coronabox .leftbox .box{
    padding: 1em;
  }
  .coronabox .leftbox ul{
    margin: 0 0 .8em .8em;
  }
	.coronabox .leftbox ul li{
		font-size: 1em;
    padding: 0.2em 0 0.3em 0.6em;
	}
	.coronabox .rightbox ul li{
		font-size: 0.9em;
    margin-top: 0 !important;
    margin-bottom: 0.8em !important;
	}

}