/** ----------  WIDGETS  ---------- **/

/*----------------------------------------------------------------------
NUMBERS BOX
------------------------------------------------------------------------*/

.numberbox {
box-sizing: border-box;
background-color: #E3E4E2;
margin-bottom: 30px;
padding: 20px 20px;
min-height: 100px;
}

.numberbox .content {
margin-left: 80px;
}

.numberbox .content h1,.numberbox .content h2,.numberbox .content h3,.numberbox .content h4,.numberbox .content h5,.numberbox .content p {
text-align: left;
}

.numberbox .content > :first-child {
margin-top: 0;
}

.numberbox .number {
box-sizing: border-box;
width: 60px; height: 60px;
border-radius: 50%;
background-color: #000000;
color: #ffffff ;
float: left;


font-family: 'robotobold', sans;
font-style: normal;
font-weight: normal;
/*<parseFonts>*/  font-size: 40px; /*</parseFonts>*/
line-height: 1.4;
letter-spacing: normal;
/*padding-left: 20px;*/
text-align:center;
}

/* ---------------------------------------------------- */
/* smallnumbers NUMBER BOX */

.smallnumbers .numberbox {
margin-bottom: 20px;
padding: 15px 15px;
min-height: 50px;
}

.smallnumbers .numberbox .content {
margin-left: 53px;
}

.smallnumbers .numberbox .number {
width: 40px; height: 40px;
/*<parseFonts>*/  font-size: 24px; /*</parseFonts>*/
line-height: 1.6;

float: left;
}

/* ---------------------------------------------------- */
/* RESPONSIVE */

@media screen and (max-width: 500px) {
.numberbox {
padding-bottom: 20px;
}

.numberbox .number {
float: none;
margin: 0 auto;
margin-bottom: 10px;
}
.numberbox .content {
margin-left: 0px;
}

}

@media screen and (max-width: 400px) {

.smallnumbers .numberbox {
padding-bottom: 20px;
}

.smallnumbers .numberbox .number {
float: none;
margin: 0 auto;
margin-bottom: 10px;
}
.smallnumbers .numberbox .content {
margin-left: 0px;
}

.smallnumbers .numberbox .content h1, .smallnumbers .numberbox .content h2, .smallnumbers .numberbox .content h3, .smallnumbers .numberbox .content h4, .smallnumbers .numberbox .content h5, .smallnumbers .numberbox .content p {
text-align: center;
}

}


/*</mobile>*/

/*<mobile-only>*/
.numberbox .number {
padding-top: 4px;
}
/*</mobile-only>*/