html,body { flex-wrap: wrap; padding-top: 100px; padding-bottom: 50px; }
.text { position: absolute; top: 6px; text-align: center; font-family: Josefin Sans; background-color: #fff;
  color: #111; padding-left: 2em; padding-right: 2em; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  padding-bottom: 10px; transition: 0.3s; }
h1 { font-size:20px; text-transform: uppercase; }
.text p {   margin: 5px; } 
.text h1 {   margin: 15px; }
.card { width:300px; height:150px; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 2px; transition: 0.3s; text-align: center; padding-top: 10px; box-sizing: border-box; font-family: Josefin Sans; display: inline-block;   margin:25px auto; }
.card:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
.card .flag { width: 55%; height: 90px; display: block; margin: auto; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: 0.3s; }
.card .flag:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }

.card .flag.hecahdo   { background-color: #000; }
.card .flag.autolento { background-color: #fff; }

.card .flag.pys               { background-color: #000; }
.card .flag.pys .second-color { width: 50px; height: 50px; background-color: #f00; border-radius: 50%; left: 55px; top: 20px; position: relative; }

.card .flag.precacucion {   background-color: #ff0;}
.card .flag.habilitada {  background-color: #008000;}
.card .flag.suspendida {   background-color: #f00; }

.card .flag.sucia               { background-color: #FF0;}
.card .flag.sucia .second-color { width: 20%;  height: 100%;  background-color: #F00}
.card .flag.sucia .third-color  { width: 20%;  height: 100%;  background-color: #f00;  position: relative; left: 40%; top: -90px; }
.card .flag.sucia .four-color   { width: 20%; height: 100%; background-color: #f00; position: relative; left: 80%; top: -180px; }

.card .flag.llegada               { background-color: #FFF; }
.card .flag.llegada .second-color {  width: 34%;  background-color: #000; position: relative; left:0%; top:0%; height:33%; }
.card .flag.llegada .third-color  {  width: 34%;  background-color: #000; position: relative; left:34%; top:0%; height:34%; }
.card .flag.llegada .four-color   {  width: 34%;  background-color: #000; position: relative; left:0%; top:0%; height:33%; }
.card .flag.llegada .fifth-color  {   width: 34%;  background-color: #000; position: relative; left:67%; top:-100%; height:33%; }
.card .flag.llegada .sixth-color  {   width: 34%;  background-color: #000; position: relative; left:67%; top:-66%; height:33%;}

.card .flag.aper               {  background-color: #000;}
.card .flag.aper .second-color { border-bottom: 90px solid #FFF;  border-left: 165px solid transparent; }

.card .flag.dpasar { background-color:#00F; }


.card .flag.actc               { background-color: #00F;}
.card .flag.actc .second-color { width: 100%; height: 33px; background-color: #FFF; position: relative; top: 30px;}
.card .flag.actc .third-color  { width: 100%; height: 33px; background-color: #F00; position: relative; top: 30px;}