.foto{
position: relative;
}

.foto a{
z-index: 10;
}

.flags{width: 100%;height: 100%;float: left;margin: 0;padding: 5px;overflow: visible;position: absolute;top: 0;left: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.flag-top-center,
.flag-bottom-center{
height: auto;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-align-items: center;
-webkit-align-items: center;
align-items: center;
-ms-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}

.flag-center-left,
.flag-center-center,
.flag-center-right{
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-align-items: center;
-webkit-align-items: center;
align-items: center;
-ms-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}

.flag-bottom-left,
.flag-bottom-center,
.flag-bottom-right{
top: inherit;
bottom: 0;
height: auto;
}

.flag-bottom-center{
width: 100%;
}

.container-flags{
width: 60%;
height: auto;
float: left;
margin: 0;
padding: 0;
overflow: visible;
display: grid;
grid-gap: 3px;
grid-template-columns: 1fr;
}

.flag-top-right .container-flags,
.flag-bottom-right .container-flags{
float: right;
}

.flag-center-center .container-flags,
.flag-center-right .container-flags,
.flag-center-left .container-flags{
width: 100%;
}

.container-flags div{
width: 100%;
height: auto;
float: left;
margin: 0;
padding: 0;
margin-bottom: 10px;	
overflow: visible;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.container-flags div p{
width: auto;
height: auto;
float: left;
margin: 0;
padding: 5px;
overflow: visible;
font-size: 12px;
line-height: 12px;
color: #FFF;
background: #000;
text-align: left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
z-index: 20;
}

.container-flags div figure{
width: auto;
height: auto;
float: left;
margin: 0;
padding: 0;
overflow: visible;
position: relative;
z-index: 20;	
}

.container-flags div img{
width: auto;
height: auto;
float: left;
margin: 0;
padding: 0;
overflow: visible;
max-width: 100%;
}

.flag-top-right .container-flags div p,
.flag-center-right .container-flags div p,
.flag-bottom-right .container-flags div p{
float: right;
text-align: right;
}

.flag-top-right .container-flags div figure,
.flag-center-right .container-flags div figure,
.flag-bottom-right .container-flags div figure{
float: right;
}

.flag-top-center .container-flags div,
.flag-center-center .container-flags div,
.flag-bottom-center .container-flags div{
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-align-items: center;
-webkit-align-items: center;
align-items: center;
-ms-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}

.flag-top-center .container-flags div p,
.flag-center-center .container-flags div p,
.flag-bottom-center .container-flags div p{
max-width: 100%;
text-align: center;
}

.flag-top-center .container-flags div figure,
.flag-center-center .container-flags div figure,
.flag-bottom-center .container-flags div figure{
width: 100%;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-align-items: center;
-webkit-align-items: center;
align-items: center;
-ms-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}


@media (max-width: 768px){

.flags{
padding: 8px;
}

.container-flags div p{
font-size: 12px;
line-height: 12px;
}

}

.container-flags div {
    width: 100%;
    height: auto;
    float: left;
    margin: 0;
        margin-bottom: 0px;
    padding: 0;
    margin-bottom: 0;
    overflow: visible;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}