Strange CSS Class Name, someone explain to me what is going on? - html

Question

i'm trying to make a bit of a copy of this website but i'm having issues with the gallery part, my images simply won't behave the same as the website im attempt to copy. Obviously change around once complete.
Here is a JSFiddle of my code if that helps.
Here is my CSS for the section:
/* Gallery Start */
.box.style2 header {
display:inline-block;
background:#FFF;
padding:2em 3em;
margin:0px;
}
.box.style2 .inner {
position:relative;
padding:40px 0 0px 0;
}
.box.style2 {
text-align:center;
}
.box.style2 .inner:after {
content: '';
display:block;
position:absolute;
top:0;
left:50%;
height:100%;
border-left:solid 1px #FFF;
}
.box.style2 .inner .row {
position:relative;
}
.row {
border-bottom:solid 1px transparent;
box-sizing:border-box;
}
.row:after, .row:before {
content: '';
display:block;
clear:both;
height:0;
}
.row > * {
float:left;
}
.box.style2 .inner .image {
position:relative;
z-index:1;
padding:20px;
}
.image.fit {
display:block;
width:100%;
}
.gallery-image {
width:25%;
margin-left:0px;
}
/* Gallery END */
And here is my HTML:
<!-- Start of gallery -->
<article class="container box style2">
<header>
<h2>Recent Work</h2>
<p>Below are images of our recent completed work</p>
</header>
<div class="inner gallery">
<!-- Gallery Images -->
<div class="row">
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
</div>
</div>
<!-- Gallery Images END -->
</article>
<!-- End of gallery -->
Here is a screenshot of what my images look like, as you can see, they are not behaving at all.
I think this is because I don't have these styles, but I can't for the life of me figure out what they mean, all that I can understand from Google is that they are classes made from numbers:
.row.\30 \25 > * {
padding: 0px 0 0 0px;
}
/* Inherited from: #media screen and (max-width: 1680px}*/
.row > * {
padding: 40px 0 0 40px;
}
.\33 u, .\33 u\24 {
width: 25%;
clear: none;
margin-left: 0;
}
edit: so after readying wero's answer, am I understanding this properly?
.row.\30 \25 > * would basically target a class with the name 0 within the row class, and then the element within 30 with class 25 and then style the next element within that?

Answer 1

The \nn<space> syntax is a character escape sequence for the Unicode character U+00nn.
This article describes the topic very nicely.
Using the escape sequences they build valid CSS class identifiers.
Why do they do this? Can only speculate: For brevity, to generate unique names?
EDIT to answer the extended question:
.row.\30 \25 > * is a selector for all elements (*) whose parent element (>) has the CSS class row and the CSS class consisting of the two characters U+0030 and U+0025.