/* ————————————-

GLOBAL
A very basic CSS reset

————————————- */

}

img {

max-width: 100%;

}

body {

-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
line-height: 1.6;

}

/* Let's make sure all tables have defaults */ table td {

vertical-align: top;

}

/* ————————————-

BODY & CONTAINER

————————————- */ body {

background-color: #f6f6f6;

}

.body-wrap {

background-color: #f6f6f6;
width: 100%;

}

.container {

display: block !important;
max-width: 600px !important;
margin: 0 auto !important;
/* makes it centered */
clear: both !important;

}

.content {

max-width: 600px;
margin: 0 auto;
display: block;
padding: 20px;

}

/* ————————————-

HEADER, FOOTER, MAIN

————————————- */ .main {

background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 3px;

}

.content-wrap {

padding: 20px;

}

.content-block {

padding: 0 0 20px;

}

.header {

width: 100%;
margin-bottom: 20px;

}

.footer {

width: 100%;
clear: both;
color: #999;
padding: 20px;

} .footer a {

color: #999;

} .footer p, .footer a, .footer unsubscribe, .footer td {

font-size: 12px;

}

/* ————————————-

TYPOGRAPHY

————————————- */ h1, h2, h3 {

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;
margin: 40px 0 0;
line-height: 1.2;
font-weight: 400;

}

h1 {

font-size: 32px;
font-weight: 500;

}

h2 {

font-size: 24px;

}

h3 {

font-size: 18px;

}

h4 {

font-size: 14px;
font-weight: 600;

}

p, ul, ol {

margin-bottom: 10px;
font-weight: normal;

} p li, ul li, ol li {

margin-left: 5px;
list-style-position: inside;

}

/* ————————————-

LINKS & BUTTONS

————————————- */ a {

color: #348eda;
text-decoration: underline;

}

.btn-primary {

text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 5px;
text-transform: capitalize;

}

/* ————————————-

OTHER STYLES THAT MIGHT BE USEFUL

————————————- */ .last {

margin-bottom: 0;

}

.first {

margin-top: 0;

}

.aligncenter {

text-align: center;

}

.alignright {

text-align: right;

}

.alignleft {

text-align: left;

}

.clear {

clear: both;

}

/* ————————————-

ALERTS
Change the class depending on warning email, good email or bad email

————————————- */ .alert {

font-size: 16px;
color: #fff;
font-weight: 500;
padding: 20px;
text-align: center;
border-radius: 3px 3px 0 0;

} .alert a {

color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 16px;

} .alert.alert-warning {

background-color: #FF9F00;

} .alert.alert-bad {

background-color: #D0021B;

} .alert.alert-good {

background-color: #68B90F;

}

/* ————————————-

INVOICE
Styles for the billing table

————————————- */ .invoice {

margin: 40px auto;
text-align: left;
width: 80%;

} .invoice td {

padding: 5px 0;

} .invoice .invoice-items {

width: 100%;

} .invoice .invoice-items td {

border-top: #eee 1px solid;

} .invoice .invoice-items .total td {

border-top: 2px solid #333;
border-bottom: 2px solid #333;
font-weight: 700;

}

/* ————————————-

RESPONSIVE AND MOBILE FRIENDLY STYLES

————————————- */ @media only screen and (max-width: 640px) {

h1, h2, h3, h4 {
  font-weight: 600 !important;
  margin: 20px 0 5px !important;
}

h1 {
  font-size: 22px !important;
}

h2 {
  font-size: 18px !important;
}

h3 {
  font-size: 16px !important;
}

.container {
  width: 100% !important;
}

.content, .content-wrap {
  padding: 10px !important;
}

.invoice {
  width: 100% !important;
}

}