Outlook mobile does not pick up correct styling - html

Question

Iam tying to create an newsletter, but in outlook mobile it does not pick up the correct styling. The styling which is not picked up is as follow: bold text, color of text and uppercase
Here a link to the output
The titles like Folio .... needs to be blue and bold.
thereby the text in buttons needs to be white and bold.
And the text in de full width button has to be uppercased and white
here is the html of an element with the image left text right:
<!-- // Begin Module: [Dark] Image left text right \\ -->
<table class="responsive-table" width="650" bgcolor="#d1d6e1" border="0" cellpadding="0" cellspacing="0" align="top" mc:repeatable="trading" mc:variant="[Dark] Image left text right">
<tbody>
<tr>
<td width="5%"></td>
<td width="90%" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr><td width="650" height="30"></td></tr>
<tr>
<td width="35%" align="center" valign="top" class="mobile-width-100" mc:label="image" mc:edit="iltrdimage">
<a href="#" target="_blank">
<img src="http://placehold.it/800x538" width="230" style="text-decoration: none;">
</a>
</td>
<td width="5%" class="mobile-height-30"></td>
<td width="60%" align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom: 5px;" mc:label="body title" md:hideable="" mc:edit="iltrdbodytitle">
<a href="#" class="block-title" style="font-family: 'OpenSans', Arial; font-size: 16px !important;line-height: 18px;color: #224691; text-decoration: none; font-weight: 700;" mc:label="heading">
<font color="#224691">Title</font>
</a>
</td>
</tr>
<tr>
<td style="padding-bottom: 10px;" mc:label="body text" mc:edit="iltrdbodytext">
<span style="font-family: 'OpenSans', Arial; color: #323232;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra hendrerit felis, eget auctor ex tincidunt eget. Vestibulum consequat quam nibh.
</span></td>
</tr>
</table>
<table bgcolor="#2f57ad" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" class="btn">
<table cellpadding="0" cellspacing="0">
<tr>
<td mc:label="button" mc:edit="iltrdbutton">
<font color="#ffffff">Read more</font>
</td>
<td style="padding-left: 10px; padding-top: 1px;"><span style="font-size: 13px; color: #fff;">▸</span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="650" height="30"></td></tr>
</tbody>
</table>
</td>
<td width="5%"></td>
</tr>
</tbody>
</table>
<!-- // End Module: [Dark] Image left text right \\ -->

Answer 1

outlook does not support all css please go have a look at https://www.campaignmonitor.com/css/
outlook versions just as ie have different css to consider so you would need something like this to cater for all the options
<!--[if gte mso 9]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->