Able Lending

The design team at Able Lending needed an email template that their marketing team could use in a campaign very quickly. We worked based on their Sketch design to produce this awesome responsive email template code they could use in their campaign in no time.

Take a look the code

Able Lending

HTML Email Marketing Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Able</title>
</head>

<body>
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#00abd7" style="margin:0;padding:0;border-collapse:collapse!important;width:100%!important;font-family: Arial, Helvetica,sans-serif;font-size:14px;color:#4a4a4a !important;" id="backgroundTable">
        <tbody>
            <tr>
                <td valign="top">
                    <table align="center" width="800" border="0" cellpadding="0" cellspacing="0" class="emailWrapper" bgcolor="#ffffff" style="width:800px;min-width:800px;margin: 0 auto;">
                        <tbody>
                            <!-- Top logo -->
                            <tr>
                                <td align="center" valign="top" bgcolor="#00abd7" style="padding:34px 0;">
                                    <a href="http://pixel2html.com/" target="_blank" style="display: inline-block;"><img src="images/logo.png" alt="" width="156" style="display: block;outline:none;border:0;"></a>
                                </td>
                            </tr>
                            <!-- Body Content -->
                            <tr>
                                <td valign="top">
                                    <table style="border-collapse:collapse;" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center" width="100%;">
                                        <tbody>
                                            <!-- Top Title -->
                                            <tr>
                                                <td align="center" valign="top" style="padding: 43px 20px;color:#4a4a4a;font-size:32px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.23;" class="break">Refer your clients to a lender
                                                    <br> who can fund more deals</td>
                                            </tr>
                                            <!-- Banner -->
                                            <tr>
                                                <td valign="top"><img src="images/banner.jpg" width="800" style="display: block;max-width: 100%;" alt=""></td>
                                            </tr>
                                            <!-- Services section -->
                                            <tr>
                                                <td valign="top" style="padding:30px 0 0 0;">
                                                    <table align="center" border="0" cellpadding="0" width="100%" style="border-collapse: collapse;">
                                                        <tbody>
                                                            <!-- Caption -->
                                                            <tr>
                                                                <td align="center" valign="top" style="color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.85;padding: 20px 110px 26px 110px" class="caption">Able offers you the ability to sell meaningful capital at a sustainable cost for your clients. This helps you attract more qualified candidates, maximize your revenues from services, and provide a best-in-class customer experience.</td>
                                                            </tr>
                                                            <!-- Separator starts -->
                                                            <tr>
                                                                <td align="center" valign="top" style="padding-top:0px;padding-bottom:0px">
                                                                    <table border="0" cellpadding="0" cellspacing="0" width="202" style="margin:0 auto;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td align="center" valign="top" style="border-top:2px solid #fbb864;"></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <!-- Separator ends -->
                                                            <!-- Services List -->
                                                            <tr>
                                                                <td valign="top" style="padding:10px 20px 30px 20px;" class="mobile-spacing">
                                                                    <table align="center" border="0" cellpadding="0" width="100%" style="border-collapse: collapse;">
                                                                        <tbody>
                                                                            <!-- First row -->
                                                                            <tr>
                                                                                <td valign="top" style="padding: 20px 0;" class="row">
                                                                                    <table align="left" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-money.png" alt="" width="124" style="display: block;outline:none;border:0;"></td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">Lowest Apr Online</td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Our model allows us to offer
                                                                                                    <br> the lowest non-bank rates.</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                    <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                                                    <table align="right" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-spaceship.png" alt="" width="124" style="display: block;outline:none;border:0;"></td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">Funding up to $1mm</td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Move upmarket and fund larger
                                                                                                    <br> deals. Our avg. is $180k.</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                            <!-- Second row -->
                                                                            <tr>
                                                                                <td valign="top" style="padding: 20px 0;" class="row">
                                                                                    <table align="left" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-gears.png" alt="" width="124" style="display: block;outline:none;border:0;"></td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">Broker Portal</td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Keep track of your deal flow
                                                                                                    <br> with a custom dashboard.</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                    <!--[if gte mso 9]></td><td valign="top"><![endif]-->
                                                                                    <table align="right" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-partnership.png" alt="" width="124" style="display: block;outline:none;border:0;"></td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">True partbership</td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Marketing assets and sales
                                                                                                    <br> resources to help you close.</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                            <!-- Become a partner section -->
                                            <tr>
                                                <td valign="top" style="background-color:#f6f7f8;padding: 26px 0 17px 0;">
                                                    <table align="center" border="0" cellpadding="0" width="100%" style="border-collapse: collapse;">
                                                        <tbody>
                                                            <tr>
                                                                <td align="center" valign="top" style="color:#4a4a4a;font-size:18px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;padding:6px 0;">Become an Able Partner today!</td>
                                                            </tr>
                                                            <tr>
                                                                <td align="center" valign="top" style="padding:10px 0;"><img src="images/avatar.png" alt="" width="99" style="display: block;outline:none;border:0;"></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="center" valign="top" style="color:#464646;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;padding:3px 0 18px 0;">Matt Irving • Partner Lead</td>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top" style="padding:6px 0;">
                                                                    <table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" align="center">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td align="center" style="-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;" bgcolor="#00abd7"><a href="http://pixel2html.com/" target="_blank" style="font-size: 13px;font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 10px 40px; border: 1px solid #00abd7;text-transform: uppercase;font-weight: 400; display: inline-block;line-height: 1.2;">Email Me</a></td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td align="center" valign="top" style="padding:10px 0;"><img src="images/or.jpg" alt="" width="159" style="display: block;outline:none;border:0;"></td>
                                                            </tr>
                                                            <tr>
                                                                <td align="center" valign="top" style="color:#00abd7;font-size: 13px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;text-transform:uppercase;padding:10px 0;"><a href="http://pixel2html.com/" target="_blank" style="color:#00abd7;font-family: 'Montserrat', Arial, Helvetica, sans-serif;text-transform:uppercase;text-decoration:none;line-height: 1.2;">Book a call</a></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <!-- Footer -->
                            <tr>
                                <td align="center" valign="top" bgcolor="#00abd7" style="color:#fff;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;padding: 46px 0;"><span class="appleLink">800 West Cesar Chavez Street B101, Austin TX 78701</span></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

      
*, h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; }
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea { border: 1px solid #909396; background: rgba(0,0,0,0); box-shadow: none; -webkit-box-shadow: none; color: #fff; height: 45px; }
textarea { height: 100px; }
[type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus, textarea:focus { border-color: #fff; background: rgba(0,0,0,0); box-shadow: none; -webkit-box-shadow: none; }
hr { border-color: #dddddd; margin: 35px 0; }

select { box-shadow: none !important; -webkit-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; -webkit-appearance: none; -moz-appearance: none; }
select:focus { outline: none; box-shadow: none; -webkit-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; }

label { padding-bottom: 14px; display: block; color: #fff; font-size: 14px; line-height: 20px; font-family: 'Roboto', sans-serif; letter-spacing: -0.01em; }
label i { display: inline-block; padding-right: 7px; }
.tabs-content { border: none; overflow: hidden; background: none; }
.tabs-panel { padding: 0; }

ul { margin: 0; padding: 10px 40px; list-style: none; }
li { padding: 8px 0; font-size: 15px; line-height: 20px; }
li a { color: #585858; }
li a i.fa-angle-right { color: #00a5ec; margin-right: 5px; }
li a:hover, li.selected a { color: #00a5ec; }

h2 { font-size: 30px; line-height: 40px; font-weight: 400; }
h3 { font-size: 24px; line-height: 30px; font-weight: 400; }

p { color: #585858; font-size: 15px; line-height: 25px; }

a { color: #00a5ec; }

.pagination { padding: 0; margin: 70px 0 25px; margin-left: -5px; }
.pagination .pagination-previous { padding-right: 5px; }
.pagination .pagination-next { padding-left: 5px; }

.pagination li, .pagination .current { text-transform: uppercase; padding: 0; margin: 0 3px; font-weight: 500; font-size: 14px; min-width: 30px; line-height: 30px; text-align: center; }
.pagination .current { background: #00aeef; text-decoration: underline; }
.pagination a, .pagination button { padding: 0 6px; min-width: 30px; line-height: 30px; }

.pagination-previous a::before, .pagination-previous.disabled::before { display: none; }
.pagination-next a::after, .pagination-next.disabled::after { display: none; }

select { padding: 10px 60px 10px 15px; color: #6d6d6f; font-size: 14px; font-style: italic; font-weight: 500; background:#f3f3f3 url(../img/select.png) right center no-repeat; box-shadow: none; height: 50px; border: 1px solid #e8e8e8; }

.button { text-transform: uppercase; padding: 18px 34px; letter-spacing: 0.07em; font-size: 13px; font-weight: 700; background: #31aeef; }
.button.medium { padding: 22px 28px; }

/* header */
.header { z-index:999; height: 121px; width: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; background: rgba(15,22,28,0.5); }
.header .logo { float:left; margin: 20px 15px 0 0 ; }
.header p { padding: 44px 0 0 0; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #aaaaaa; font-size: 18px; line-height: 24px; float: right; }
.header p cite { font-size: 18px; font-style: normal; padding: 0 8px; display: inline-block; color: #303030; }
.header p cite:before { display: none; }
.header span.color { color: #00a5ec; }
.header.inner { position: relative; background: #0f1215; }

/* banner */
.banner { position: relative; padding: 157px 0 0; width: 100%; min-height: 980px; background: url(../img/banner_img.jpg) center top no-repeat; background-size: cover; }
.banner h2 { font-family: 'Cinzel', serif; padding-bottom: 54px; color: #fff; font-size: 60px; line-height: 72px; }
.banner h2 small { font-family: 'Cinzel', serif; display: block; color: #8a8a8a; font-size: 20px; line-height: 24px; padding: 30px 0 0; }
.banner .button { margin-top: 5px; }
.banner.inner-banner1 { padding-top: 110px; margin-top: -40px; min-height: 460px; background-image: url(../img/banner_img2.jpg); }
.banner h3 { font-family: 'Cinzel', serif; padding-bottom: 35px; color: #fff; font-size: 48px; line-height: 54px; margin: 0; }
.banner h3 small { font-family: 'Cinzel', serif; display: block; color: #8a8a8a; font-size: 20px; line-height: 22px; padding: 0; }
.banner .address-block ul { list-style: none; overflow: hidden; margin: 0; padding: 0; }
.banner .address-block li { padding: 10px 5px 8px 50px; margin-bottom: 8px; position: relative; width: 100%; font-size: 17px; line-height: 25px; float: left; color: #fff; }
.banner .address-block li a { color: #fff; }
.banner .address-block li i { position: absolute; font-size: 15px; text-align: center; left: 0px; top: 5px; width: 35px; height: 35px; border: 1px solid #e8e8e8; line-height: 33px; display: block; }
.banner .right_block { float: right; width: 51.2%; }
.banner .nav-bar li a { height: 80px; line-height: 80px; font-size: 14px; }
.banner-row { width: 100%; height: 309px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center top; }
.mobile_banner { display: none; }

/* nav-bar */
.nav-bar { width: 100%; z-index: 99; position: absolute; left: 0px; bottom: 0px; background: rgba(240,240,240,0.9); }
.nav-bar ul { list-style: none; text-align: center; overflow: hidden; padding: 0; margin: 0; }
.nav-bar li { display: inline-block; padding: 0; }
.nav-bar li:first-child { border: none; }
.nav-bar li a { text-transform: uppercase; display: block; border-left: 1px solid #595959; border-right: 1px solid #595959; margin-left: -1px; position: relative; z-index: 9; font-weight: 700; letter-spacing: 0.07em; padding: 0 40px; height: 40px; line-height: 40px; color: #000; font-size: 13px; }
.nav-bar li a:hover, .nav-bar li.active a { background: #00a5ec; color: #fff; position: relative; z-index: 99; border-color: #bbbbbb; }
.nav-bar li a i { position: absolute; left: 0px; top: 15px; display: none; width: 100%; text-align: center; }
.nav-bar li a:hover i, .nav-bar li.active a i { display: block; }
.nav-bar.inner { position: relative; left: auto; bottom: auto; }

/* video-bar */
.video-bar { padding: 95px 0; }
.video-bar h2 { color: #000; font-size: 30px; line-height: 40px; margin:0; padding: 0 0 25px; }
.video-bar .text span { color: #3d3d3d; font-size: 15px; line-height: 24px; display: block; font-family: 'Cinzel', serif; padding-bottom: 25px; }
.video-bar .text p { padding: 0 0 42px; color: #585858; font-size: 15px; line-height: 25px; letter-spacing: 0.01em; }
.video-bar .video { margin: 5px 0 0; }
.video-bar .video p { color: #3d3d3d; font-size: 15px; line-height: 25px; font-style: italic; letter-spacing: -0.01em; padding: 0 0 10px; }
.video-bar .video img { width: 100%; margin-bottom: 22px; }
.video-bar .video p span { display: block; text-align: right; float: right; }
.video-bar.spacer p { margin: 0; padding: 0 0 25px; }
.video-bar.spacer { padding: 40px 0 60px; }
.video-bar.gap_none { padding: 30px 0; }

.side-block { margin-top: 38px; padding-bottom: 25px; background: #f9f9f9; }
.side-block h3 { padding: 20px 40px; border-bottom: 2px solid #e8e8e8; font-size: 24px; line-height: 30px; font-weight: 400; }

.rss_btn { padding: 10px 25px; letter-spacing: 0.04em; font-weight: 500; font-size: 14px; color: #fff !important; line-height: 20px; text-transform: uppercase; margin: 55px 0; display: block; background: #000; }
.rss_btn:hover { background: #1583cc; }
.rss_btn i { padding-right: 5px; }

/* item-bar */
.item-bar { width: 100%; overflow:hidden; }
.item-bar ul { list-style: none; margin: 0; padding: 0; width: 100%; overflow:hidden; }
.item-bar li { padding: 0; float:left; width: 25%; position: relative; background: #000; }
.item-bar span.title-text { position: absolute; font-weight: 700; right: 20px; bottom: 20px; color: #fff; font-size: 15px; line-height: 24px; }
.item-bar li a { display: block; position: relative; }
.item-bar li a img { opacity: 0.5; width: 100%; }
.item-bar .bottom-block { overflow:hidden; padding:125px 0; min-height: 440px; background: #0e171f; }
.item-bar h3 { color: #fff; font-size: 30px; line-height: 46px; letter-spacing: 0.01em; }
.item-bar h3 span { color: #fff; font-size: 15px; line-height: 24px; display: block; letter-spacing: 0; font-family: 'Cinzel', serif; padding-top: 20px; }
.item-bar .button { margin: 38px 0 0 95px; }
.item-bar .overlay { opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,165,236,0.8); text-align: center; }
.item-bar .overlay .text { padding: 15px; overflow: auto; position: absolute; left: 0px; width: 100%; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.item-bar .overlay h4 { color: #fff; padding: 0 0 20px; margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.item-bar .overlay p { color: #fff; padding: 0 0 30px 0; margin: 0; font-size: 15px; line-height: 25px; }
.item-bar .overlay .button { padding:0; width: 128px; display: inline-block; height: 40px; line-height: 40px; margin: 0; background: #0e0e0e; font-weight: 700; }
.item-bar .overlay .button:hover { background: #1583cc; }
.item-bar li img { width: 100%; opacity: 0.5; transition: all 0.3s; -webkit-transition: all 0.3s; }
.item-bar li:hover .overlay { opacity: 1; }
.item-bar li:hover .overlay { opacity: 1; }
.item-bar li:hover span.title-text { opacity: 0; }
.item-bar.attorneys li:hover span.title-text { opacity: 1 }
.item-bar.attorneys li:hover img { opacity: 0.8; }
.item-bar.attorneys span cite { color: #fff; font-size: 14px; line-height: 18px; font-weight: 400; }
.item-bar.attorneys a { text-decoration: none; color:#fff; }
.item-bar.attorneys span cite::before { display: none; }
.item-bar.attorneys span.title-text { text-align: right; font-weight: 700; }

/* logo-bar */
.logo-bar { overflow: hidden; width: 100%; }
.logo-bar ul { margin:0 0 -1px; padding:0; list-style: none; overflow: hidden; }
.logo-bar li { padding: 65px 10px; border-bottom: 1px solid #e4e4e4; border-left: 1px solid #e4e4e4; float:left; width: 25%; }
.logo-bar li img { margin: auto; display: block; opacity: 0.7; }
.logo-bar li:first-child { border-left-color: #fff; }
.logo-bar li:nth-child(5n) { border-left-color: #fff; }
.logo-bar.inner ul { border-top: 1px solid #e4e4e4; }

/* practice-bar */
.practice-bar { text-align: center; padding: 70px 0 65px; }
.practice-bar h2 { color: #000000; font-size: 30px; line-height: 40px; font-weight: 700; padding: 0 0 25px; margin: 0; }
.practice-bar p { color: #585858; font-size: 15px; line-height: 25px; margin: 0; padding-bottom: 45px; }
.practice-bar .col { text-align: center; vertical-align: top; max-width: 824px; margin: auto; }
.practice-bar .mid { padding-right: 14px; display: inline-block; width: 50%; vertical-align: top; }
.practice-bar .mid.right { padding: 0 0 0 14px; vertical-align: top; }
.practice-bar input[type="text"] { padding: 10px 60px 10px 15px; color: #6d6d6f; font-size: 14px; font-style: italic; font-weight: 500; background:#f3f3f3 url(../img/search_bg.jpg) right center no-repeat; box-shadow: none; height: 50px; border: 1px solid #e8e8e8; }
.practice-bar *::-webkit-input-placeholder{opacity:1; color: #6d6d6f }
.practice-bar *::-moz-placeholder{opacity:1; color: #6d6d6f }
.practice-bar *:-ms-input-placeholder{opacity:1; color: #6d6d6f }

/* tab-bar */
.tab-bar { padding: 0; overflow: hidden; background: #dadada; }
.tab-bar ul { list-style: none; padding: 0px; margin: 0; overflow: hidden; border-right: 1px solid #fff; }
.tab-bar li { width: 25%; float:left; padding: 0; margin: 0; border-left: 1px solid #fff; }
.tab-bar li a { padding: 0 20px 0 25px; display: block; text-transform: uppercase; letter-spacing: 0.04em; color: #0f1215; font-size: 14px; height: 40px; line-height: 40px; }
.tab-bar li a i { float: right; display: block; line-height: 40px; }
.tab-bar li a:hover, .tab-bar li.is-active a { background: #fff; }

.about-bar { padding: 40px 0; }
.about-bar small { color: #3d3d3d; font-size: 15px; line-height: 24px; display: block; font-family: 'Cinzel', serif; padding-bottom: 25px; }
.about-bar h2 { padding-bottom: 20px; }
.about-bar p { padding-bottom: 13px; }
.about-bar h3 { padding-bottom: 17px; }
.about-bar ul { padding: 0px 30px 20px; }
.about-bar li a { font-style: italic; }
.about-bar .button { padding-left: 22px; padding-right: 22px; }

.blog-bar { padding: 40px 0; }
.blog-bar h2 { padding-bottom: 5px; }
.blog-post { border: 1px solid #ebebeb; margin-top: 29px; padding: 35px 40px 63px; position: relative; }
.blog-post h3 { margin-bottom: 0px; }
.blog-post span { font-size: 14px; color: #585858; padding-bottom: 25px; display: block; line-height: 25px; }
.blog-post .button { position: absolute; right: 0px; bottom: 0px; margin: 0; padding: 18px 24px; }

.search-box input[type="text"] { padding: 10px 70px 10px 20px; margin: 0; color: #6d6d6f; font-size: 14px; font-style: italic; font-weight: 500; background:#f9f9f9; box-shadow: none; height: 50px; border: 1px solid #e8e8e8; }
.search-box *::-webkit-input-placeholder{opacity:1; color: #6d6d6f }
.search-box *::-moz-placeholder{opacity:1; color: #6d6d6f }
.search-box *:-ms-input-placeholder{opacity:1; color: #6d6d6f }
.search-box { margin: 10px 0 0; padding-bottom: 10px; position: relative; width: 100%; }
.search-box input[type="submit"] { position: absolute; right: 0px; margin: 0; top: 0px; border: none; cursor: pointer; width: 50px; height: 50px; background: url(../img/submit.png) no-repeat #31aeef ; }
.search-box input[type="submit"]:hover { background-color: #1583cc; }

/* contact_form-bar */
.contact_form-bar { padding: 95px 0; overflow: hidden; background: url(../img/form_bg.jpg) center top no-repeat; background-size: cover; }
.contact_form-bar form { max-width: 930px; margin: auto; }
.contact_form-bar h3 { padding-bottom: 60px; color: #fff; font-size: 30px; line-height: 34px; font-weight: 400; text-align: center; text-transform: uppercase; }
.contact_form-bar h3 span { color: #fff; font-size: 18px; line-height: 26px; font-weight: 400; display: block; letter-spacing: 0; font-family: 'Cinzel', serif; padding-top: 30px; }
.contact_form-bar input[type="text"] { height: 50px; }
.contact_form-bar textarea { height: 150px; }
.contact_form-bar .button { margin-top: 15px; }
.contact_form-bar.side_inner { padding:35px 30px; margin-top: 60px; }
.contact_form-bar.side_inner .button { width: 100%; padding-left: 10px; padding-right: 10px; margin: 0; }
.contact_form-bar.side_inner h3 { font-size: 18px; line-height: 20px; font-weight: 700; padding-bottom: 18px; }
.contact_form-bar.side_inner h3 span { font-size: 14px; line-height: 20px; font-weight: 400; padding-top: 20px; }
.contact_form-bar.side_inner textarea { height: 100px; margin-bottom: 20px; }
.contact_form-bar.spacer { margin-top: -60px; }

/* footer-bar */
.footer-bar { padding: 95px 0 30px; text-align: center; color: #fff; background: #0e171f; }
.footer-bar .fa-location-arrow { display: inline-block; margin-bottom: 95px; font-size: 42px; width: 103px; height: 103px; line-height: 100px; text-align: center; border: 2px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; }
.footer-bar address { padding: 0 0 77px; color: #fff; font-size: 30px; line-height: 40px; font-style: normal; }
.footer-bar address a { color: #fff; }
.footer-bar address a:hover { color: #64717b; }
.footer-bar ul { list-style: none; padding: 0; margin: 0; }
.footer-bar li { padding: 0 20px; display: inline-block; }
.footer-bar li a { color: #fff; font-size: 26px; transition: all 0.3s; -webkit-transition: all 0.3s; line-height: 48px; width: 51px; height: 51px; border: 2px solid #fff; display: block; }
.footer-bar li a:hover { box-shadow: inset 0 -50px #fff; color: #000; }
.footer-bar p { padding: 73px 0 0; color: #64717b; font-size: 10px; line-height: 20px; text-transform: uppercase; letter-spacing: 0.09em; word-spacing: 2px; }
.footer-bar p a { color: #64717b; }
.footer-bar p a:hover { color: #fff; }

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

  .nav-bar  li a { padding: 0 30px; }

}

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

  .nav-bar li a { padding: 0 24px; }

  .item-bar .button { margin-left: 0px; }

}

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

  .nav-bar li a { padding: 0 17px; }

  .footer-bar address { font-size: 26px; }
  .banner h2 { font-size: 45px; line-height: 50px; }

  .item-bar .overlay p { padding-bottom: 15px; line-height: 18px; }
  .item-bar .overlay h4 { padding-bottom: 5px; }
  .item-bar .overlay { overflow: auto; }
}
@media screen and (max-width: 1023px) {

  .nav-bar li a { padding: 0 17px; }

  .footer-bar address { font-size: 20px; line-height: 28px; padding-bottom: 50px; }
  .footer-bar .fa-location-arrow { margin-bottom: 50px; }
  .footer-bar { padding-top: 55px; }
  .footer-bar p { padding-top: 50px; }
  .item-bar li { width: 50% }
  .item-bar .bottom-block { padding: 70px 0; min-height: inherit; }
  .item-bar h3 { font-size: 24px; line-height: 36px; letter-spacing: 0px; }
  .item-bar h3 span { padding-top: 10px; }
  .logo-bar li { padding: 20px 10px; }
  .logo-bar li img { width: 150px; }
  .contact_form-bar, .video-bar { padding: 50px 0; }

  .about-bar p { padding-bottom: 10px; margin: 0; }
  hr { margin: 25px 0; }
  .about-bar h3 { padding-bottom: 15px; margin: 0; }

  .video-bar .text p { padding-bottom: 20px; }
  .video-bar .text span, .about-bar small { font-size: 14px; padding-bottom: 15px; line-height: 18px; }
  .video-bar h2 { font-size: 26px; line-height: 34px; }
  .video-bar .video p { font-size: 14px; line-height: 20px; }
  .about-bar ul { padding: 0 0 5px; }
  .about-bar .button { margin-top: 20px; }
  .contact_form-bar h3 span { padding-top: 15px; }
  .contact_form-bar h3 { padding-bottom: 40px; }
  .banner h2 { font-size: 34px; line-height: 40px; padding-bottom: 20px; }
  .about-bar h2 { margin:0; padding-bottom: 15px; }
  .banner h2 small { padding-top: 10px; font-size: 16px; }

  .nav-bar li a { padding: 0 14px; }

  .practice-bar p br { display: none; }

}

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

  .nav-bar li a { padding: 0 9px; font-size: 11px; }
  .banner .nav-bar li a { height: 60px; line-height: 60px; font-size: 11px; }
  .nav-bar li a i { top: 7px; }
  .header .logo { width: 300px; }
  .header { height: 104px; }
  .header p { font-size: 14px; }
  .banner { min-height: 800px; }
  .logo-bar li img { width: 130px; }
  .item-bar h3 { font-size: 22px; line-height: 28px; }
  .video-bar .text p, .about-bar p { font-size: 14px; line-height: 22px; }
  .video-bar h2 { font-size: 24px; line-height: 30px; padding-bottom: 20px; }
  .banner h2 { font-size: 28px; line-height: 36px; }

  .banner .right_block { padding-right: 15px; width: 60%; }
  .contact_form-bar.side_inner { padding: 25px 20px; }

}

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

  .nav-bar li a { font-size: 9px; padding: 0 9px; }
  .nav-bar li a i { top: 2px; }

  .banner { min-height: 640px; }
  .banner h2 small { font-size: 14px; line-height: 18px; }
  .banner .nav-bar li a { height: 44px; line-height: 44px; }

  .header .logo { width: 180px; margin-top: 15px; }
  .header { height: 68px; }
  .header p { font-size: 12px; padding-top: 27px; }

  .item-bar h3 span { font-size: 14px; line-height: 20px; }
  .footer-bar address { font-size: 17px; line-height: 22px; padding-bottom: 30px; }
  .footer-bar li { padding: 0 10px; }
  .footer-bar .fa-location-arrow { font-size: 30px; line-height: 66px; height: 70px; width: 70px; margin-bottom: 30px; }
  .footer-bar { padding-top: 40px; padding-bottom: 20px; }
  .footer-bar p { padding: 30px 0 0; margin-bottom: 0px; font-size: 10px; }

  .mm-opened a.close { display: block; }

  .mobilemenu span { width: 30px; border-radius: 5px; transition: all 0.3s; -webkit-transition: all 0.3s; -webkit-border-radius: 5px; -webkit-transition: -webkit-transform .3s;transition:transform .3s; background: #fff; display: block; height: 4px; left: 0; position: absolute; right: 0; top: 15px; }
  .mobilemenu span:before{ top: -7px; transition-property:top,transform; }
  .mobilemenu span:after,.mobilemenu span:before { border-radius: 5px; -webkit-border-radius: 5px; background-color: #fff; content: ""; display: block; height: 4px; left: 0; position: absolute; width: 100%; transition-duration:.3s,.3s; }
  .mobilemenu span:after{ bottom: -7px; transition-property:bottom,transform; }
  .mm-opened .mobilemenu span { background:0 0; transition: all 0.3s; -webkit-transition: all 0.3s; }
  .mm-opened .mobilemenu span:before { top:0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)}
  .mm-opened .mobilemenu span:after { bottom:0; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg)}
  .mobilemenu { display: block; float: left; font-size: 17px; color: #fff; height: 30px; margin-top: 2px; line-height: 30px; font-family: 'titilliumsemibold_upright'; text-transform: uppercase; overflow: hidden; padding: 0; position: relative; width: 35px;transition: all 0.3s; -webkit-transition: all 0.3s; }
  .mm-opened .mobilemenu { text-indent: -9999px; }
  .nav-bar { display: none; }
  .mobilemenu { float: right; margin-top: 18px; }
  .header p { position: absolute; right: 0px; top: 0px; display: none; }
  .header p span.none { display: none; }

  .contact_form-bar, .video-bar { padding: 30px 0; }
  .footer-bar p { padding-left: 10px; padding-right: 10px; }
  .button.medium { padding: 15px 20px; }
  .button { font-size: 12px; }

  .practice-bar p { padding-bottom: 25px; }
  .practice-bar h2 { font-size: 26px; padding-bottom: 10px; }
  .practice-bar { padding: 30px 0; }

  .banner .right_block { padding-right: 15px; width: 100%; }

  .banner h3 { font-size: 34px; line-height: 40px; }
  .banner .address-block li { font-size: 15px; }

  .tab-bar li a { padding: 0 15px; font-size: 13px; }

  .side-block h3 { padding: 15px 20px; font-size: 22px; }
  .side-block { padding-bottom: 20px; }
  li { font-size: 14px; }
  ul { padding: 10px 20px; }

  .mobile_banner { display: block; }

  .contact_form-bar.side_inner { padding: 20px 15px; margin-top: 30px; }
  .contact_form-bar.side_inner h3 { font-size: 17px; }
  .blog-post { padding: 25px 20px 63px; margin-top: 20px; }
  .side-block { margin-top: 20px; }
  .rss_btn { margin: 30px 0; }
  h2 { font-size: 26px; line-height: 30px; }
  .blog-bar h2 { padding-bottom: 0; }
  .blog-bar { padding: 30px 0; }
  .blog-post span { line-height: 18px; padding: 5px 0 20px; }
  h3 { font-size: 20px; line-height: 24px; }
  .pagination li, .pagination .current { margin: 0; }
  .pagination .pagination-previous { padding-right: 1px; }
  .pagination .pagination-next { padding-left: 1px; }
  .pagination { margin: 40px 0 20px; }

  .about-bar { padding: 30px 0; }
  .tab-bar .column { padding: 0; }
  .tab-bar li { width: 100%; border: none !important; border-bottom: 1px solid #fff !important; }

  .banner .right_block { padding: 10px 0px !important; }
  .banner.inner-banner1 { background: #000; padding: 0; }
  .banner.inner-banner1::before { display: none; }

}

@media screen and (max-width: 639px) {
  .item-bar .bottom-block .text-right { text-align: center; }
  .item-bar .bottom-block { padding: 30px 0; }

  .item-bar .button { margin-top: 10px; }

  .banner:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
  .banner .row { position: relative; z-index: 1; }
  .banner { padding-top: 90px; background-position: 40% top; }

  .item-bar li { width: 100%; }

  .footer-bar li a { width: 40px; height: 40px; font-size: 18px; line-height: 36px; }
  .footer-bar li { padding: 0 5px; }

  .video-bar h2 { font-size: 22px; line-height: 24px; padding-bottom: 10px; }
  .video-bar .text p { margin: 0; }
  .practice-bar .mid { padding-right: 5px }
  .practice-bar .mid.right { padding-left: 5px; }

  .footer-bar address { font-size: 14px; padding-bottom: 20px; }
  .footer-bar p { padding-top: 20px; line-height: 16px; }
  .footer-bar { padding-top: 30px; }
  .footer-bar .fa-location-arrow {    font-size: 24px;    height: 50px;    line-height: 46px;    margin-bottom: 20px;    width: 50px;}

  .banner .right_block { width: 100%; padding: 0 15px 20px; }
  .banner.inner-banner1 { padding-top: 30px; margin-top: -10px; min-height: 100px; }
  .banner h3 { padding-bottom: 15px; font-size: 32px; }

  .tab-bar li:nth-child(1) { border-bottom: 1px solid #fff; }
  .tab-bar li:nth-child(2) { border-bottom: 1px solid #fff; }
  .video-bar.spacer { padding: 30px 0 40px; }

  .search-box { margin-top: 30px; }

  .pagination { margin: 20px 0 0px; }
  .pagination .pagination-next { float: right; }

  .banner-row { height: 250px; }

  .about-bar { padding-bottom: 0;}
  .about-bar .button { margin-bottom: 0px; }
  .video-bar.gap_none { padding-top: 20px; }
  .video-bar.gap_none .video { margin-top: 0px; }

  .banner-row { height: 140px; }
}

@media screen and (max-width: 479px) {
  .logo-bar li { width: 50%; }

  .logo-bar li:nth-child(3){  border-left-color: #fff;}
  .logo-bar li:nth-child(7){  border-left-color: #fff;}

  .practice-bar .mid { padding-right: 0; width: 100%; }
  .practice-bar { padding-bottom: 15px; }
  .practice-bar .mid.right { padding-left: 0; }
  .banner .address-block li { line-height: 22px; font-size: 13px; }
}

@media only screen and (min-width: 768px) {
  .mm-menu.mm-current { display: none !important; }
  html.mm-opening .mm-slideout { transform: translate(0px, 0px) !important; -webkit-transform: translate(0px, 0px) !important; }
  html.mm-opened { overflow: visible !important; }
  html.mm-opened body { overflow: visible !important; }
  #mm-blocker { display: none !important; }
  .mobilemenu { display: none; }
}
      
1k

Clients trusted us with their web projects.

Like our work? Let’s build something together!

Get a quote!