Hero Subscribe
Find your audience, engage your customers, and build your brand with Front's subscribe forms.
Hero subscribe #1
Say Hello to all businesses
Achieve virtually any look and layout from within the one template. Covert more visitors, and win more business with Front template.
HTML:
<div class="bg-primary position-relative overflow-hidden">
<div class="container position-relative u-space-4 z-index-2">
<div class="text-center mb-7">
<div class="w-lg-80 mx-auto">
<h1 class="text-white display-4 font-size-48--md-down mb-3">Say <span class="font-weight-bold">Hello</span> to all businesses</h1>
</div>
<div class="w-md-80 w-lg-60 mx-auto">
<p class="lead u-text-light">Achieve virtually any look and layout from within the one template. Covert more visitors, and win more business with Front template.</p>
</div>
</div>
<div class="w-md-50 w-lg-40 mx-auto">
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--pill u-form--no-brd u-form--no-addon-brd">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append u-form__append">
<button type="submit" class="btn text-primary u-btn-white">
<span class="fas fa-paper-plane"></span>
</button>
</span>
</div>
</form>
</div>
</div>
<figure class="position-absolute-top-left-0 w-60">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1246 1078" style="enable-background:new 0 0 1246 1078;" xml:space="preserve">
<g>
<linearGradient id="heroV2ColorTopLeft1" gradientUnits="userSpaceOnUse" x1="2073.5078" y1="1.7251" x2="2273.4375" y2="1135.5818" gradientTransform="matrix(-1 0 0 1 2600 0)">
<stop class="u-stop-color-primary-lighter" offset="0.4976"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<polygon fill="url(#heroV2ColorTopLeft1)" points="519.8,0.6 0,0.6 0,1078 863.4,1078"/>
<linearGradient id="heroV2ColorTopLeft2" gradientUnits="userSpaceOnUse" x1="1717.1648" y1="3.779560e-05" x2="1717.1648" y2="644.0417" gradientTransform="matrix(-1 0 0 1 2600 0)">
<stop class="u-stop-color-primary-lighter" offset="1.577052e-06"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<polygon fill="url(#heroV2ColorTopLeft2)" points="519.7,0 1039.4,0.6 1246,639.1 725.2,644"/>
</g>
<g>
<linearGradient id="heroV2ColorTopLeft3" gradientUnits="userSpaceOnUse" x1="126.0495" y1="-9.3783" x2="149.8194" y2="181.4576">
<stop class="u-stop-color-primary-lighter" offset="1.181626e-06"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorTopLeft3)" d="M50.8,0L30.1,57.4c0,0-30.7,76.1,44.1,118.2c0,0,57.4,30.1,107.5-18c0,0,6.7-6.7,12-15.4c5.3-8.7,4.7-8,8-15.4
s36.7-106.2,36.7-106.2s2.7-6.7,4.7-20.7H50.8z"/>
<linearGradient id="heroV2ColorTopLeft4" gradientUnits="userSpaceOnUse" x1="190.821" y1="18.3911" x2="-28.7839" y2="145.18">
<stop class="u-stop-color-primary-lighter" offset="1.953869e-07"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorTopLeft4)" d="M0,0c0,0,0,194.9,0,195c0,0.8,4.6,3.2,5.2,3.6c4.7,2.9,9.7,5.4,14.9,7.4c16.6,6.4,34.8,7.9,52.1,4
c15.6-3.5,30.6-10.6,42.9-20.8c13.1-10.9,20.8-25.4,26.7-41.1c7-18.5,13.6-37.1,19.9-55.8c5.9-17.3,12.5-34.5,17.1-52.3
c1.6-6.5,2.9-13.1,3.3-19.8c0.1-1.9,0.5-20.2-2.4-20.2C179.7,0,0,0,0,0z"/>
</g>
</svg>
</figure>
<figure class="position-absolute-bottom-right-0 w-15">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 298.3" style="enable-background:new 0 0 268.1 298.3;" xml:space="preserve">
<linearGradient id="heroV2ColorBottomRight1" gradientUnits="userSpaceOnUse" x1="20.7708" y1="63.0138" x2="294.8091" y2="261.3844">
<stop class="u-stop-color-primary-darker" offset="1.953869e-07"/>
<stop class="u-stop-color-primary-lighter" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorBottomRight1)" d="M268.1,82.4l-41.5-45.3c0,0-90.6-87.6-190.6,6.5c0,0-65.6,64.9-19.8,154.5c0,0,11.8,22.2,38.8,48.9l47.7,51.4
h165.3V82.4z"/>
<linearGradient id="heroV2ColorBottomRight2" gradientUnits="userSpaceOnUse" x1="7.729" y1="250.3761" x2="268.9255" y2="155.3083">
<stop class="u-stop-color-primary-lighter" offset="0"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorBottomRight2)" d="M268.1,153.1l-41.8-45.6c0,0-81.5-78.2-176.9-6.5c0,0-40,28.4-47.7,83.1S16.9,277.6,37,297.6h231.1V153.1z"/>
</svg>
</figure>
<figure class="position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 140" style="margin-bottom: -9px; enable-background:new 0 0 1920 140;" xml:space="preserve">
<path class="u-fill-white" d="M960,92.9C811.4,93.3,662.8,89.4,515.3,79c-138.6-9.8-277.1-26.2-409-53.3C97.8,24,0,6.5,0,0c0,0,0,140,0,140
l960-1.2l960,1.2c0,0,0-140,0-140c0,2.7-42.1,11.3-45.8,12.2c-45.1,11-91.5,20.1-138.4,28.1c-176.2,30.1-359.9,43.8-542.9,48.9
C1115.4,91.4,1037.7,92.7,960,92.9z"/>
</svg>
</figure>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hero subscribe #2
Stay in the know
Get special offers on the latest developments from Front.
HTML:
<div class="position-relative">
<div class="u-space-2-bottom">
<div class="container u-space-3-top">
<div class="text-center w-md-60 mx-auto mb-7">
<h2 class="text-primary"><span class="font-weight-bold">Stay</span> in the know</h2>
<p>Get special offers on the latest developments from Front.</p>
</div>
<div class="w-md-50 w-lg-40 mx-auto">
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--pill u-form--no-brd u-form--no-addon-brd">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append u-form__append">
<button type="submit" class="btn text-primary u-btn-white">
<span class="fas fa-paper-plane"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
<figure class="w-100 position-absolute-bottom-0 z-index-minus-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 323" enable-background="new 0 0 1920 323" xml:space="preserve">
<polygon class="u-fill-primary" opacity=".125" points="0,323 1920,323 1920,0 "/>
<polygon class="u-fill-primary" opacity=".085" points="-0.5,322.5 -0.5,131.5 658.3,212.3 "/>
</svg>
</figure>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hero subscribe #3
Stay in the know
Subscribe now and get special offers along with newsworthy updates on the latest developments from Front.
HTML:
<div class="u-gradient-half-primary-v1">
<div class="container u-space-2">
<div class="row justify-content-lg-end align-items-lg-center">
<div class="col-lg-7 mb-7 mb-lg-0">
<img src="../assets/svg/flat-icons/subscribe-flat-concept-illustration.svg" alt="SVG Illustration">
</div>
<div class="col-lg-5">
<div class="pl-lg-4">
<div class="mb-5">
<h2 class="text-white">
<strong class="font-weight-bold">Stay</strong> in the know
</h2>
<p class="u-text-light">Subscribe now and get special offers along with newsworthy updates on the latest developments from Front.</p>
</div>
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--pill u-form--no-brd u-form--no-addon-brd">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append u-form__append">
<button type="submit" class="btn text-primary u-btn-white">
<span class="fas fa-paper-plane"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hero subscribe #4
Subscribe
Stay in the know
Get special offers on the latest developments from Front.
Be the lucky user to earn $1000 bonus now!
Be the lucky user to earn $1000 bonus now!
HTML:
<div class="position-relative overflow-hidden">
<div class="position-relative u-gradient-half-primary-v1 u-space-3-top u-space-4-bottom">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-9 col-lg-7 col-xl-6 offset-xl-2">
<div class="text-center mb-4">
<span class="u-label u-label--sm u-label--white mb-2">Subscribe</span>
<h2 class="h1 text-white"><span class="font-weight-bold">Stay</span> in the know</h2>
<p class="lead u-text-light">Get special offers on the latest developments from Front.</p>
</div>
<form class="js-validate js-form-message mb-2">
<div class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--white-brd">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
<div class="input-group-append u-form__append">
<button type="submit" class="btn btn-warning u-btn-wide">Join Front</button>
</div>
</div>
</form>
<div class="d-block d-xl-none">
<p class="small u-text-light mb-0">Be the lucky user to earn <span class="text-white font-weight-bold">$1000</span> bonus now!</p>
</div>
</div>
<div class="col-xl-2 d-none d-xl-inline-block mt-auto mb-7">
<div class="position-relative p-3">
<p class="small u-text-light mb-0">Be the lucky user to earn <span class="text-white font-weight-bold">$1000</span> bonus now!</p>
<figure class="position-absolute-top-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 254 204.2" style="enable-background:new 0 0 254 204.2;" xml:space="preserve">
<path class="u-fill-none u-stroke-white" opacity=".5" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10" d="M0.5,171V6.5c0-3.3,3.3-6,7.3-6h238.6c3.9,0,7.1,2.6,7.1,5.8v164c0,3.6-3.5,6.5-7.9,6.5H61.4
c-3,0-5.6,1.4-6.8,3.7l-22,22.6l-0.2-22.4c-1.1-2.3-3.8-3.9-6.8-3.9H7.6C3.7,176.8,0.5,174.2,0.5,171z"/>
</svg>
</figure>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block u-devices-v2__phone u-devices-v2__phone--left-position">
<figure class="w-75 u-devices-v2__phone-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 317.5 665" style="enable-background:new 0 0 317.5 665;" xml:space="preserve">
<path class="u-fill-white" d="M263,666H54c-29.7,0-54-24.3-54-54V55C0,25.3,24.3,1,54,1h209c29.7,0,54,24.3,54,54v557
C317,641.7,292.7,666,263,666z"/>
<circle class="u-fill-gray-75" cx="159.5" cy="619.5" r="25.5"/>
<path class="u-fill-gray-75" fill-rule="evenodd" clip-rule="evenodd" d="M180,52h-42c-2.2,0-4-1.8-4-4v0c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4v0C184,50.2,182.2,52,180,52z"/>
<g>
<defs>
<rect id="phoneFrameExampleID1_1" x="19.4" y="81.3" width="280" height="500"/>
</defs>
<clipPath id="phoneFrameExampleID1_2">
<use xlink:href="#phoneFrameExampleID1_1" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#phoneFrameExampleID1_2);">
<!-- Apply your (282px width to 500px height) image here -->
<image style="overflow:visible;" width="282" height="500" xlink:href="../assets/img/282x500/img4.jpg" transform="matrix(1 0 0 1 18 81)"></image>
</g>
<use class="u-fill-none u-stroke-light-blue-125" xlink:href="#phoneFrameExampleID1_1" stroke-miterlimit="10" style="overflow: visible;"/>
</g>
</svg>
</figure>
</div>
</div>
<figure class="position-absolute-bottom-0 z-index-2">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
<path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
<path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
<path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
H42.401L43.415,98.342z" />
<path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
</svg>
</figure>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hero subscribe #5
Stay in the know
Get special offers on the latest developments from Front.
Be the lucky user to earn $1000 bonus now!
Be the lucky user to earn $1000 bonus now!
HTML:
<div class="position-relative bg-warning u-space-3 overflow-hidden">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-9 col-lg-7 col-xl-6 offset-xl-2">
<div class="text-center mb-4">
<h2 class="h1 text-white"><span class="font-weight-bold">Stay</span> in the know</h2>
<p class="lead u-text-light">Get special offers on the latest developments from Front.</p>
</div>
<form class="js-validate js-form-message mb-2">
<div class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--white-brd">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
<div class="input-group-append u-form__append">
<button type="submit" class="btn btn-primary u-btn-wide">Join Front</button>
</div>
</div>
</form>
<div class="d-block d-xl-none">
<p class="small u-text-light mb-0">Be the lucky user to earn <span class="text-white font-weight-bold">$1000</span> bonus now!</p>
</div>
</div>
<div class="col-xl-2 d-none d-xl-inline-block mt-auto mb-7">
<div class="position-relative p-3">
<p class="small u-text-light mb-0">Be the lucky user to earn <span class="text-white font-weight-bold">$1000</span> bonus now!</p>
<figure class="position-absolute-top-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 254 204.2" style="enable-background:new 0 0 254 204.2;" xml:space="preserve">
<path class="u-fill-none u-stroke-white" opacity=".5" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10" d="M0.5,171V6.5c0-3.3,3.3-6,7.3-6h238.6c3.9,0,7.1,2.6,7.1,5.8v164c0,3.6-3.5,6.5-7.9,6.5H61.4
c-3,0-5.6,1.4-6.8,3.7l-22,22.6l-0.2-22.4c-1.1-2.3-3.8-3.9-6.8-3.9H7.6C3.7,176.8,0.5,174.2,0.5,171z"/>
</svg>
</figure>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block u-devices-v2__phone u-devices-v2__phone--left-position">
<figure class="w-75 u-devices-v2__phone-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 317.5 665" style="enable-background:new 0 0 317.5 665;" xml:space="preserve">
<path class="u-fill-white" d="M263,666H54c-29.7,0-54-24.3-54-54V55C0,25.3,24.3,1,54,1h209c29.7,0,54,24.3,54,54v557
C317,641.7,292.7,666,263,666z"/>
<circle class="u-fill-gray-75" cx="159.5" cy="619.5" r="25.5"/>
<path class="u-fill-gray-75" fill-rule="evenodd" clip-rule="evenodd" d="M180,52h-42c-2.2,0-4-1.8-4-4v0c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4v0C184,50.2,182.2,52,180,52z"/>
<g>
<defs>
<rect id="phoneFrameID1" x="19.4" y="81.3" width="280" height="500"/>
</defs>
<clipPath id="phoneFrameID2">
<use xlink:href="#phoneFrameID1" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#phoneFrameID2);">
<!-- Apply your (282px width to 500px height) image here -->
<image style="overflow:visible;" width="282" height="500" xlink:href="../assets/img/282x500/img3.jpg" transform="matrix(1 0 0 1 18 81)"></image>
</g>
<use class="u-fill-none u-stroke-light-blue-125" xlink:href="#phoneFrameID1" stroke-miterlimit="10" style="overflow: visible;"/>
</g>
</svg>
</figure>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hero subscribe #6
Subscribe
Stay in the know
Subscribe now and get special offers on the latest developments from Front.
HTML:
<div class="container u-space-3">
<div class="w-md-80 w-lg-50 text-center mx-auto">
<div class="mb-9">
<span class="u-label u-label--sm u-label--primary mb-2">Subscribe</span>
<h2 class="font-weight-normal">Stay in the know</h2>
<p class="mb-0">Subscribe now and get special offers on the latest developments from Front.</p>
</div>
<form class="js-validate js-form-message">
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append u-form__append">
<button type="submit" class="btn btn-primary u-btn-primary">Subscribe</button>
</span>
</div>
</form>
</div>
</div>
<div class="container">
<figure class="w-lg-80 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800.4 242.2" style="enable-background:new 0 0 800.4 242.2;" xml:space="preserve">
<g>
<g id="XMLID_409_5">
<g id="XMLID_427_5">
<path id="XMLID_430_5" class="u-fill-white" d="M108.3,214.5l-33.7-10.6c-0.6-0.2-0.9-0.8-0.7-1.3l10.6-33.7c0.2-0.6,0.8-0.9,1.3-0.7
l33.7,10.6c0.6,0.2,0.9,0.8,0.7,1.3l-10.6,33.7C109.5,214.4,108.9,214.7,108.3,214.5z"/>
<rect id="XMLID_429_5" x="83.1" y="176.9" transform="matrix(0.9537 0.3006 -0.3006 0.9537 61.6395 -20.3945)" class="u-fill-primary-lighter" width="28" height="26.4"/>
<path id="XMLID_428_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M81,180l3.2-10c0.4-1.2,1.7-1.9,2.9-1.5l31.4,9.9c1.2,0.4,1.9,1.7,1.5,2.9l-6.7,21.3"/>
</g>
<g id="XMLID_420_5">
<path id="XMLID_426_5" class="u-fill-white" d="M71.5,197.8L35.1,206c-0.8,0.2-1.7-0.3-1.9-1.2l-5.6-24.7c-0.2-0.8,0.3-1.7,1.2-1.9
l36.5-8.2c0.8-0.2,1.7,0.3,1.9,1.2l5.6,24.7C72.9,196.7,72.4,197.6,71.5,197.8z"/>
<path id="XMLID_425_5" class="u-fill-primary-lighter" d="M66.8,169.6l-15.9,17.6c-0.4,0.5-1.1,0.6-1.6,0.4l-21.9-9.1L66.8,169.6z"/>
<path id="XMLID_424_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M27.7,178.7l21.5,8.9c0.6,0.2,1.2,0.1,1.6-0.4l15.4-17"/>
<path id="XMLID_423_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M32.8,202.9l-5.1-22.6c-0.2-0.9,0.4-1.9,1.3-2.1l3.7-0.8"/>
<path id="XMLID_422_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M42.4,175.1l22.7-5.1c0.9-0.2,1.9,0.4,2.1,1.3l1.9,8.6"/>
<line id="XMLID_421_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="35.8" y1="176.6" x2="40.1" y2="175.7"/>
</g>
<path id="XMLID_419_5" class="u-fill-white" d="M110.5,206.6h-0.4c-1.6-5.5-6.6-9.4-12.6-9.4c-2.6,0-5,0.8-7.1,2.1
c-1.3-8.6-8.7-15.2-17.7-15.2c-8,0-14.9,5.3-17.1,12.6c-1-0.3-2.1-0.4-3.2-0.4c-6.1,0-11.2,4.5-12.1,10.4h-2
c-5.1,0-9.2,4.1-9.2,9.2v0.7c0,5.1,4.1,9.2,9.2,9.2h72.1c5.1,0,9.2-4.1,9.2-9.2v-0.7C119.7,210.8,115.5,206.6,110.5,206.6z"/>
<path id="XMLID_418_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M119.7,216.5v-0.7c0-5.1-4.1-9.2-9.2-9.2h-0.4c-1.6-5.5-6.6-9.4-12.6-9.4
c-2.6,0-5,0.8-7.1,2.1c-1.3-8.6-8.7-15.2-17.7-15.2c-8,0-14.9,5.3-17.1,12.6c-1-0.3-2.1-0.4-3.2-0.4c-6.1,0-11.2,4.5-12.1,10.4h-2
c-5.1,0-9.2,4.1-9.2,9.2v0.7"/>
<path id="XMLID_417_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M84.5,197.8c-2.7-4.1-7.3-6.8-12.5-6.8c-2.8,0-5.4,0.8-7.6,2.1"/>
<path id="XMLID_416_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M52.7,196.2c3.5,0,6.4,2.9,6.4,6.4"/>
<g id="XMLID_410_5">
<path id="XMLID_415_5" class="u-fill-white" d="M73.1,161.4c0.2,1.4-1.2,2.7-3.1,3.1c-2,0.3-3.7-0.5-4-1.8c-0.2-1.4,1.2-2.7,3.1-3.1
C71.1,159.2,72.9,160,73.1,161.4z"/>
<path id="XMLID_414_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M73.1,161.4c0.2,1.4-1.2,2.7-3.1,3.1c-2,0.3-3.7-0.5-4-1.8c-0.2-1.4,1.2-2.7,3.1-3.1
C71.1,159.2,72.9,160,73.1,161.4z"/>
<path id="XMLID_413_5" class="u-fill-white" d="M83.2,161.4c0.2,1.4-1.2,2.7-3.1,3.1c-2,0.3-3.7-0.5-4-1.8c-0.2-1.4,1.2-2.7,3.1-3.1
C81.2,159.2,83,160,83.2,161.4z"/>
<path id="XMLID_412_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M83.2,161.4c0.2,1.4-1.2,2.7-3.1,3.1c-2,0.3-3.7-0.5-4-1.8c-0.2-1.4,1.2-2.7,3.1-3.1
C81.2,159.2,83,160,83.2,161.4z"/>
<polyline id="XMLID_411_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" points="73.2,161.7 73.2,149 83.2,149 83.2,161.7 "/>
</g>
</g>
<g id="XMLID_236_5">
<path id="XMLID_252_5" class="u-fill-white" d="M256.1,241.4l-0.2-44c0-3.3-3-6-6.8-6h-63l0.2,50.1L256.1,241.4z"/>
<path id="XMLID_251_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M199,191.4h50c3.7,0,6.8,3,6.8,6.8l0.2,41.2"/>
<path id="XMLID_249_5" class="u-fill-primary-lighter" d="M249,241.4h7v-51.9c0-2.7-2.4-4.9-5.4-4.9H249V241.4z"/>
<path id="XMLID_248_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M256.1,241.4V190c0-3-2.4-5.4-5.4-5.4H249v56.8"/>
<path id="XMLID_240_5" class="u-fill-primary-lighter" opacity=".3" d="M231.7,205.5c4.9,4.9,4.9,12.8,0,17.6c-4.9,4.9-12.8,4.9-17.6,0c-4.9-4.9-4.9-12.8,0-17.6
C218.9,200.6,226.8,200.6,231.7,205.5z"/>
<g id="XMLID_237_5">
<g id="XMLID_265_5">
<circle id="XMLID_266_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="1.9827,1.9827" cx="216.9" cy="220.3" r="12.5"/>
</g>
</g>
</g>
<g id="XMLID_200_5">
<path id="XMLID_535_5" class="u-fill-primary-lighter" opacity=".3" d="M244.6,117.5h-0.4c-1.9-6.4-7.8-11.1-14.8-11.1c-3.1,0-5.9,0.9-8.3,2.5
c-1.6-10.1-10.3-17.9-20.9-17.9c-9.5,0-17.5,6.3-20.2,14.9c-1.2-0.3-2.5-0.5-3.8-0.5c-7.2,0-13.2,5.3-14.3,12.2h-2.4
c-6,0-10.8,4.9-10.8,10.8v0.8c0,6,4.9,10.8,10.8,10.8h85.1c6,0,10.8-4.9,10.8-10.8v-0.8C255.5,122.4,250.6,117.5,244.6,117.5z"/>
<path id="XMLID_534_5" class="u-fill-white" d="M234.7,120.2h-0.4c-1.6-5.7-6.9-9.8-13.1-9.8c-2.7,0-5.2,0.8-7.3,2.2
c-1.4-8.9-9.1-15.8-18.4-15.8c-8.4,0-15.5,5.5-17.8,13.1c-1.1-0.3-2.2-0.5-3.3-0.5c-6.4,0-11.7,4.7-12.6,10.8h-2.1
c-5.3,0-9.6,4.3-9.6,9.6v0.7c0,5.3,4.3,9.6,9.6,9.6h75.1c5.3,0,9.6-4.3,9.6-9.6v-0.7C244.2,124.5,239.9,120.2,234.7,120.2z"/>
<path id="XMLID_533_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M213.9,107.1c-3.1-4.8-8.6-8-14.8-8c-3.3,0-6.3,0.9-9,2.5"/>
<path id="XMLID_218_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M159.5,117.5c-6,0-10.8,4.9-10.8,10.8v0.8c0,6,4.9,10.8,10.8,10.8h39.2"/>
<path id="XMLID_216_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M231.7,140h13c6,0,10.8-4.9,10.8-10.8v-0.8c0-6-4.9-10.8-10.8-10.8h-0.4
c-1.9-6.4-7.8-11.1-14.8-11.1c-3.1,0-5.9,0.9-8.3,2.5c-1.6-10.1-10.3-17.9-20.9-17.9c-6.5,0-12.3,2.9-16.2,7.5
c-0.9,1-1.6,2.1-2.3,3.3c-0.7,1.3-1.3,2.6-1.7,4c-1.2-0.3-2.5-0.5-3.8-0.5c-3.9,0-7.4,1.5-10,4"/>
<path id="XMLID_531_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M176.5,105.2c4.2,0,7.5,3.4,7.5,7.5"/>
</g>
<g id="XMLID_184_5">
<line id="XMLID_186_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="268.3" y1="132" x2="274.8" y2="132"/>
<line id="XMLID_185_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="271.6" y1="135.2" x2="271.6" y2="128.7"/>
</g>
<g id="XMLID_179_5">
<line id="XMLID_183_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="52.5" y1="125" x2="59" y2="125"/>
<line id="XMLID_180_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="55.7" y1="128.3" x2="55.7" y2="121.8"/>
</g>
<g id="XMLID_174_5">
<line id="XMLID_176_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="208.2" y1="82.6" x2="212.8" y2="78"/>
<line id="XMLID_175_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="212.8" y1="82.6" x2="208.2" y2="78"/>
</g>
<g id="XMLID_220_5">
<line id="XMLID_222_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="25.5" y1="161.8" x2="30.1" y2="157.2"/>
<line id="XMLID_221_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="30.1" y1="161.8" x2="25.5" y2="157.2"/>
</g>
<line id="XMLID_169_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="99.3" y1="88.6" x2="147.9" y2="88.6"/>
<line id="XMLID_201_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="125.8" y1="80.3" x2="202.9" y2="80.3"/>
<line id="XMLID_41_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="160.1" y1="88.6" x2="151.7" y2="88.6"/>
<line id="XMLID_162_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="240.2" y1="156.6" x2="266.6" y2="156.6"/>
<line id="XMLID_161_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="274.3" y1="156.6" x2="268.9" y2="156.6"/>
<line id="XMLID_204_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="12.1" y1="125" x2="38.5" y2="125"/>
<line id="XMLID_202_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="46.2" y1="125" x2="40.8" y2="125"/>
<path id="XMLID_160_5" class="u-fill-primary" d="M58.2,90.9c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.6,1.6-1.6
C57.4,89.3,58.2,90,58.2,90.9z"/>
<path id="XMLID_211_5" class="u-fill-primary" d="M99.1,139.8c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2
C98.2,137.8,99.1,138.7,99.1,139.8z"/>
<path id="XMLID_212_5" class="u-fill-primary" d="M259.3,95.1c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2s0.9-2,2-2C258.4,93.1,259.3,94,259.3,95.1z"/>
<path id="XMLID_226_5" class="u-fill-primary" opacity=".3" d="M118.7,177.3l-17-5.4v53.7h8.7c5.1,0,9.2-4.1,9.2-9.2h1.1v-0.7c0-5.1-3.7-9.3-8.6-10.2l1-3.1
l1.1,0.3l6.7-21.3C121.6,179.8,120.5,177.9,118.7,177.3z"/>
<g id="XMLID_156_5">
<path id="XMLID_250_5" class="u-fill-primary-lighter" d="M170.1,241.4h-59.3c-2.7,0-4.9-2.2-4.9-4.9V118.4c0-2.7,2.2-4.9,4.9-4.9h59.3
c2.7,0,4.9,2.2,4.9,4.9v118.1C175.1,239.2,172.9,241.4,170.1,241.4z"/>
<line id="XMLID_158_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="116.3" y1="113.5" x2="120.7" y2="113.5"/>
<path id="XMLID_199_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M175.1,180.4v55.1c0,3.2-2.6,5.9-5.9,5.9h-57.4c-3.2,0-5.9-2.6-5.9-5.9V119.4
c0-3.2,2.6-5.9,5.9-5.9h1.7"/>
<path id="XMLID_193_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M122.8,113.5h46.4c3.2,0,5.9,2.6,5.9,5.9v4.1"/>
<line id="XMLID_247_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="130.3" y1="122" x2="150.7" y2="122"/>
<path id="XMLID_246_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M144.9,233.4c0,2.5-2,4.4-4.4,4.4c-2.5,0-4.4-2-4.4-4.4c0-2.5,2-4.4,4.4-4.4
C143,229,144.9,231,144.9,233.4z"/>
<rect id="XMLID_245_5" x="109.6" y="126.1" class="u-fill-white" width="60.9" height="100.3"/>
<path id="XMLID_244_5" class="u-fill-primary-lighter" d="M127.1,219.9h-10.9c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C127.5,219.7,127.3,219.9,127.1,219.9z"/>
<path id="XMLID_242_5" class="u-fill-primary-lighter" opacity=".3" d="M162.5,219.9h-10.9c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C162.9,219.7,162.7,219.9,162.5,219.9z"/>
<path id="XMLID_215_5" class="u-fill-primary" d="M127.5,202.8h-10.9c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C127.9,202.6,127.7,202.8,127.5,202.8z"/>
<path id="XMLID_214_5" class="u-fill-primary-lighter" d="M145.2,202.8h-10.9c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C145.6,202.6,145.4,202.8,145.2,202.8z"/>
<path id="XMLID_203_5" class="u-fill-primary" d="M162.9,202.8H152c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C163.2,202.6,163.1,202.8,162.9,202.8z"/>
<path id="XMLID_217_5" class="u-fill-primary-lighter" d="M145.5,185.6h-10.9c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C145.9,185.5,145.7,185.6,145.5,185.6z"/>
<path id="XMLID_233_5" class="u-fill-primary" d="M127.5,168.6h-10.9c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C127.9,168.4,127.7,168.6,127.5,168.6z"/>
<path id="XMLID_235_5" class="u-fill-primary-lighter" d="M144.8,151.5H134c-0.2,0-0.4-0.2-0.4-0.4v-10.9c0-0.2,0.2-0.4,0.4-0.4h10.9
c0.2,0,0.4,0.2,0.4,0.4v10.9C145.2,151.3,145,151.5,144.8,151.5z"/>
</g>
<path id="XMLID_227_5" class="u-fill-primary" opacity=".3" d="M164.5,134.3c-8.9,8.9-10.6,23-4.1,33.8l-7.3,15c-0.3,0.6-0.2,1.4,0.3,1.8
c0.3,0.3,0.7,0.5,1.1,0.5c0.2,0,0.5-0.1,0.7-0.2l14.9-7.5c1.6,0.9,3.2,1.6,4.9,2.2v-52.3C171.1,129,167.5,131.2,164.5,134.3z"/>
<g id="XMLID_157_5">
<path id="XMLID_219_5" class="u-fill-white" d="M203.5,170.3c10.3-10.3,10.3-27.1,0-37.5c-10.3-10.3-27.1-10.3-37.5,0
c-8.9,8.9-10.1,22.7-3.7,32.9l-7.5,15.6c-0.2,0.4,0.2,0.8,0.6,0.6l15.5-7.8C181.2,180.4,194.7,179.1,203.5,170.3z"/>
<path id="XMLID_192_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M206.3,136.1c-0.8-1.2-1.8-2.3-2.8-3.3c-10.3-10.3-27.1-10.3-37.5,0
c-8.9,8.9-10.1,22.7-3.7,32.9l-7.5,15.6c-0.2,0.4,0.2,0.8,0.6,0.6l15.5-7.8c10.2,6.2,23.7,5,32.5-3.9c1.2-1.2,2.3-2.5,3.2-3.9"/>
<line id="XMLID_163_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="166.2" y1="140" x2="174" y2="140"/>
<line id="XMLID_159_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="215.3" y1="140" x2="175.9" y2="140"/>
<line id="XMLID_166_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="184.8" y1="145.4" x2="170.9" y2="145.4"/>
<line id="XMLID_170_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="177.8" y1="150.8" x2="167.8" y2="150.8"/>
<line id="XMLID_171_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="180.7" y1="150.8" x2="217.6" y2="150.8"/>
<line id="XMLID_172_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="169.1" y1="156.6" x2="189.2" y2="156.6"/>
<line id="XMLID_190_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="169.1" y1="162.7" x2="177.8" y2="162.7"/>
<line id="XMLID_191_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="226.7" y1="162.7" x2="180.7" y2="162.7"/>
<line id="XMLID_173_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="202.5" y1="156.6" x2="191.5" y2="156.6"/>
<line id="XMLID_167_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="194.1" y1="145.4" x2="187.1" y2="145.4"/>
<line id="XMLID_164_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="217.6" y1="140" x2="226.7" y2="140"/>
</g>
<g id="XMLID_231_5">
<path id="XMLID_259_5" class="u-fill-light-blue-100" d="M112.6,239.5v-17.6c0-0.8-0.6-1.4-1.4-1.4h-90c-0.8,0-1.4,0.6-1.4,1.4v17.6
c0,0.8,0.6,1.4,1.4,1.4h90C112,240.9,112.6,240.2,112.6,239.5z"/>
<path id="XMLID_258_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M112.6,239.5v-17.6c0-0.8-0.6-1.4-1.4-1.4h-90c-0.8,0-1.4,0.6-1.4,1.4v17.6
c0,0.8,0.6,1.4,1.4,1.4h90C112,240.9,112.6,240.2,112.6,239.5z"/>
<line id="XMLID_257_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="30.2" y1="220.5" x2="30.2" y2="232.9"/>
<line id="XMLID_256_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="39" y1="220.5" x2="39" y2="226.7"/>
<line id="XMLID_255_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="47.8" y1="220.5" x2="47.8" y2="226.7"/>
<line id="XMLID_254_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="56.5" y1="220.5" x2="56.5" y2="226.7"/>
<line id="XMLID_241_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="65.3" y1="220.5" x2="65.3" y2="232.9"/>
<line id="XMLID_239_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="74.1" y1="220.5" x2="74.1" y2="226.7"/>
<line id="XMLID_238_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="82.9" y1="220.5" x2="82.9" y2="226.7"/>
<line id="XMLID_234_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="91.6" y1="220.5" x2="91.6" y2="226.7"/>
<line id="XMLID_232_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="100.4" y1="220.5" x2="100.4" y2="232.9"/>
</g>
<g id="XMLID_243_5">
<path id="XMLID_274_5" class="u-fill-primary-lighter" d="M263.5,164.9c0,0,6.7,6.4,6.7,12.1c0,5.6-6.7,12.1-6.7,12.1s-6.7-6.4-6.7-12.1
C256.7,171.4,263.5,164.9,263.5,164.9z"/>
<path id="XMLID_273_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M263.5,164.9c0,0,6.7,6.4,6.7,12.1c0,5.6-6.7,12.1-6.7,12.1s-6.7-6.4-6.7-12.1
C256.7,171.4,263.5,164.9,263.5,164.9z"/>
<line id="XMLID_272_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="263.5" y1="240.9" x2="263.5" y2="164.9"/>
<line id="XMLID_269_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="263.5" y1="176.1" x2="258.3" y2="170.7"/>
<line id="XMLID_268_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="263.3" y1="183.4" x2="256.7" y2="176.1"/>
<line id="XMLID_260_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="263.3" y1="176.1" x2="268.4" y2="170.7"/>
<line id="XMLID_253_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="263.4" y1="183.4" x2="270" y2="176.1"/>
</g>
</g>
<g>
<g id="XMLID_382_5">
<path id="XMLID_432_5" class="u-fill-primary-lighter" d="M556.6,187.6h-68.5c-0.8,0-1.4,0.6-1.4,1.4v52.1h68.5c1.6,0,2.9-1.3,2.9-2.9v-49.2
C558.1,188.3,557.5,187.6,556.6,187.6z"/>
<path id="XMLID_431_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M531.6,187.6h-42.1c-1.5,0-2.8,1.2-2.8,2.8v50.8h65.8c3.1,0,5.6-2.5,5.6-5.6v-45.1
c0-1.6-1.3-2.9-2.9-2.9h-4.4"/>
<g id="XMLID_48_5">
<path id="XMLID_52_5" class="u-fill-white" d="M532.6,167.6l14.2,14.2v49.7c0,2.2-1.8,4.1-4.1,4.1h-42.5c-2.2,0-4.1-1.8-4.1-4.1v-59.8
c0-2.2,1.8-4.1,4.1-4.1H532.6z"/>
<polygon id="XMLID_51_5" class="u-fill-primary-lighter" points="532.6,181.8 532.6,167.6 546.8,181.8 "/>
<path id="XMLID_50_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M546.8,181.8H534c-0.8,0-1.4-0.6-1.4-1.4v-12.8"/>
<path id="XMLID_49_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M496.2,190.8v-19.2c0-2.2,1.8-4.1,4.1-4.1h32.3l14.2,14.2v49.7c0,2.2-1.8,4.1-4.1,4.1h-42.5"
/>
</g>
<g id="XMLID_405_5">
<path id="XMLID_47_5" class="u-fill-primary-lighter" opacity=".3" d="M540.8,163.4l14.2,14.2v49.7c0,2.2-1.8,4.1-4.1,4.1h-42.5c-2.2,0-4.1-1.8-4.1-4.1v-59.8
c0-2.2,1.8-4.1,4.1-4.1H540.8z"/>
<polygon id="XMLID_46_5" class="u-fill-primary-lighter" points="540.8,177.6 540.8,163.4 555.1,177.6 "/>
<path id="XMLID_45_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M555.1,177.6h-12.8c-0.8,0-1.4-0.6-1.4-1.4v-12.8"/>
<line id="XMLID_44_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="548.2" y1="184.6" x2="512" y2="184.6"/>
<line id="XMLID_43_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="548.2" y1="192.7" x2="512" y2="192.7"/>
<line id="XMLID_40_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="548.2" y1="200.7" x2="512" y2="200.7"/>
<line id="XMLID_39_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="548.2" y1="208.8" x2="512" y2="208.8"/>
<path id="XMLID_407_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M504.5,196.2v-28.7c0-2.2,1.8-4.1,4.1-4.1h32.3l14.2,14.2v49.7c0,2.2-1.8,4.1-4.1,4.1h-1.9"
/>
</g>
<g id="XMLID_386_5">
<path id="XMLID_401_5" class="u-fill-white" d="M549.1,169.6l14.2,14.2v49.6c0,2.2-1.8,4.1-4.1,4.1h-42.5c-2.2,0-4.1-1.8-4.1-4.1v-59.8
c0-2.2,1.8-4.1,4.1-4.1H549.1z"/>
<polygon id="XMLID_400_5" class="u-fill-primary-lighter" points="549.1,183.9 549.1,169.6 563.3,183.9 "/>
<path id="XMLID_393_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M563.3,183.9h-12.8c-0.8,0-1.4-0.6-1.4-1.4v-12.8"/>
<line id="XMLID_37_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="556.5" y1="190.8" x2="520.3" y2="190.8"/>
<line id="XMLID_390_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="556.5" y1="198.9" x2="520.3" y2="198.9"/>
<line id="XMLID_389_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="556.5" y1="206.9" x2="520.3" y2="206.9"/>
<line id="XMLID_388_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="556.5" y1="215" x2="520.3" y2="215"/>
<path id="XMLID_387_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M512.7,196.2v-22.5c0-2.2,1.8-4.1,4.1-4.1h32.3l14.2,14.2v49.6c0,2.2-1.8,4.1-4.1,4.1H552"
/>
</g>
<path id="XMLID_385_5" class="u-fill-white" d="M552.4,241.2h-68.1c-1.6,0-3-1.3-3-3v-42.3c0-1.4,1.1-2.5,2.5-2.5h11.6
c0.8,0,1.6,0.4,2.1,1.2l3,4.8h43.3c1.6,0,2.8,1.3,2.8,2.8v33.2C546.7,238.1,548.6,241.2,552.4,241.2z"/>
<path id="XMLID_36_5" class="u-fill-primary-lighter" d="M546.7,235.5v-4.8h-65.4v7.6c0,1.6,1.3,3,3,3h68.1C548.6,241.2,546.7,238.1,546.7,235.5z"/>
<path id="XMLID_433_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M481.3,240.9v-45c0-1.4,1.1-2.5,2.5-2.5h11.6c0.8,0,1.6,0.4,2.1,1.2l3,4.8h43.3
c1.6,0,2.8,1.3,2.8,2.8v33.2c0,2.7,1.9,5.7,5.7,5.7"/>
</g>
<line id="XMLID_72_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="228.3" y1="109" x2="270.1" y2="109"/>
<line id="XMLID_398_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="368.4" y1="7.6" x2="321.2" y2="7.6"/>
<line id="XMLID_437_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="550.9" y1="89.9" x2="641.7" y2="89.9"/>
<line id="XMLID_71_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="282.2" y1="109" x2="273.7" y2="109"/>
<line id="XMLID_436_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="429.7" y1="22.2" x2="471.5" y2="22.2"/>
<line id="XMLID_70_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="483.6" y1="22.2" x2="475.1" y2="22.2"/>
<path id="XMLID_442_5" class="u-fill-primary" d="M557.6,43.1c0,1-0.8,1.8-1.8,1.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8
C556.7,41.3,557.6,42.1,557.6,43.1z"/>
<g id="XMLID_53_5">
<path id="XMLID_68_5" class="u-fill-white" d="M504,241.2H303.5c-4.2,0-7.5-3.4-7.5-7.5v-21.8c0-4.2,3.4-7.5,7.5-7.5H504
c4.2,0,7.5,3.4,7.5,7.5v21.8C511.5,237.8,508.2,241.2,504,241.2z"/>
<ellipse id="XMLID_299_5" transform="matrix(0.7341 -0.6791 0.6791 0.7341 -28.8892 278.2329)" class="u-fill-white" cx="340.8" cy="176" rx="28.2" ry="28.2"/>
<path id="XMLID_298_5" class="u-fill-white" d="M321.2,180.3c0,6.2-5,11.2-11.2,11.2c-6.2,0-11.2-5-11.2-11.2c0-6.2,5-11.2,11.2-11.2
C316.2,169.1,321.2,174.1,321.2,180.3z"/>
<path id="XMLID_67_5" class="u-fill-white" d="M315.8,193c0,9.1-7.4,16.4-16.4,16.4c-9.1,0-16.4-7.4-16.4-16.4c0-9.1,7.4-16.4,16.4-16.4
C308.4,176.5,315.8,183.9,315.8,193z"/>
<path id="XMLID_66_5" class="u-fill-white" d="M318.2,218.9c0,12.3-10,22.2-22.2,22.2c-12.3,0-22.2-10-22.2-22.2c0-12.3,10-22.2,22.2-22.2
C308.2,196.7,318.2,206.6,318.2,218.9z"/>
<path id="XMLID_278_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M295.9,241.2c-12.3,0-22.2-10-22.2-22.2c0-7.5,3.7-14.2,9.5-18.2"/>
<path id="XMLID_65_5" class="u-fill-white" d="M375.3,198.5c0,5.2-4.2,9.3-9.3,9.3c-5.2,0-9.3-4.2-9.3-9.3c0-5.2,4.2-9.3,9.3-9.3
C371.1,189.2,375.3,193.3,375.3,198.5z"/>
<ellipse id="XMLID_64_5" transform="matrix(0.1597 -0.9872 0.9872 0.1597 216.8453 604.3791)" class="u-fill-white" cx="463.4" cy="174.8" rx="25.7" ry="25.7"/>
<path id="XMLID_435_5" class="u-fill-white" d="M493.6,189.2c-0.8,9.1-7.4,16.4-16.4,16.4c-9.1,0-16.4-7.4-16.4-16.4s7.4-16.4,16.4-16.4
C486.2,172.7,494.4,180.1,493.6,189.2z"/>
<path id="XMLID_284_5" class="u-fill-white" d="M477.1,200.5c-0.8,9.1-7.4,16.4-16.4,16.4s-16.4-7.4-16.4-16.4c0-9.1,7.4-16.4,16.4-16.4
S477.9,191.5,477.1,200.5z"/>
<path id="XMLID_285_5" class="u-fill-white" d="M364.1,200.7c-1.6,9.1-14,16.4-31.3,16.4c-17.3,0-31.3-7.4-31.3-16.4
c0-9.1,14-16.4,31.3-16.4C350.1,184.3,365.7,191.7,364.1,200.7z"/>
<path id="XMLID_63_5" class="u-fill-white" d="M526.3,193.1c-1.2,13.3-10.8,24-24,24s-24-10.8-24-24s10.8-24,24-24S527.5,179.9,526.3,193.1z
"/>
<path id="XMLID_62_5" class="u-fill-white" d="M519.8,218c-1.2,12.8-10.4,23.2-23.2,23.2c-12.8,0-23.2-10.4-23.2-23.2
c0-12.8,10.4-23.2,23.2-23.2C509.4,194.8,520.9,205.2,519.8,218z"/>
<path id="XMLID_292_5" class="u-fill-white" d="M456.7,191.8c0,8.3-6.8,15.1-15.1,15.1c-8.3,0-15.1-6.8-15.1-15.1c0-8.3,6.8-15.1,15.1-15.1
C449.9,176.8,456.7,183.5,456.7,191.8z"/>
<path id="XMLID_290_5" class="u-fill-white" d="M437.2,205.1c0,4.9-3.9,8.8-8.8,8.8c-4.9,0-8.8-3.9-8.8-8.8c0-4.9,3.9-8.8,8.8-8.8
C433.3,196.3,437.2,200.2,437.2,205.1z"/>
<path id="XMLID_289_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M418.9,205.9c0-4.9,3.9-8.8,8.8-8.8"/>
<path id="XMLID_288_5" class="u-fill-white" d="M401.1,210.7c0,5.6-7.9,10.2-17.5,10.2c-9.7,0-17.5-4.6-17.5-10.2c0-5.6,7.9-10.2,17.5-10.2
C393.2,200.5,401.1,205.1,401.1,210.7z"/>
<path id="XMLID_434_5" class="u-fill-white" d="M502.8,169.9c0,6.5-11.1,23.9-11.1,15.9c0-6.5-11.8-5.3-11.8-11.8c0-6.5,5.3-11.8,11.8-11.8
C498.3,162.2,502.8,163.3,502.8,169.9z"/>
<path id="XMLID_61_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M487,163.1c1.4-0.6,3-1,4.7-1c4.8,0,8.9,2.9,10.8,6.9"/>
<path id="XMLID_282_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M445.3,193c-4.6-4.6-7.5-11.1-7.5-18.2c0-7.1,2.9-13.5,7.5-18.2c4.6-4.6,11.1-7.5,18.2-7.5
c7.1,0,13.5,2.9,18.2,7.5c4.6,4.6,7.5,11.1,7.5,18.2"/>
<g id="XMLID_281_5">
<rect id="XMLID_449_5" x="385.3" y="103.2" class="u-fill-white" width="29.9" height="12.6"/>
<rect id="XMLID_710_5" x="385.3" y="103.2" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" width="29.9" height="12.6"/>
<path id="XMLID_516_5" class="u-fill-primary-lighter" d="M354.3,103.4h28.3V41.8l-10.4,14.1c-3,4.1-6.5,7.7-10.2,11.2c-4.9,4.7-7.7,11.2-7.7,18.2
V103.4z"/>
<polygon id="XMLID_714_5" class="u-fill-primary" opacity=".3" points="373.5,54 373.5,103.4 382.6,103.4 382.6,41.8 "/>
<path id="XMLID_513_5" class="u-fill-primary-lighter" d="M444.8,104.6h-28.3V43l10.4,14.1c3,4.1,6.5,7.7,10.2,11.2c4.9,4.7,7.7,11.2,7.7,18.2V104.6z
"/>
<polygon id="XMLID_712_5" class="u-fill-primary" opacity=".3" points="426.4,53.1 426.4,102.4 417.4,102.4 417.4,40.8 "/>
<path id="XMLID_549_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M354.3,103.4h28.3V41.8l-10.4,14.1c-3,4.1-6.5,7.7-10.2,11.2c-4.9,4.7-7.7,11.2-7.7,18.2
V103.4z"/>
<path id="XMLID_548_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M444.8,103.4h-28.3V41.8l10.4,14.1c3,4.1,6.5,7.7,10.2,11.2c4.9,4.7,7.7,11.2,7.7,18.2
V103.4z"/>
<path id="XMLID_511_5" class="u-fill-white" d="M419.3,109.5h-38.9V28.9c0-9.4,4.4-18.3,11.8-24l3.5-2.7c2.5-1.9,5.9-1.9,8.4,0l3.8,2.9
c7.2,5.6,11.5,14.2,11.5,23.4V109.5z"/>
<path id="XMLID_509_5" class="u-fill-primary" d="M389.9,7.3l4.6-3.6c3.3-2.5,7.9-2.5,11.1,0l5.1,3.9L389.9,7.3z"/>
<path id="XMLID_715_5" class="u-fill-primary" opacity=".25" d="M400.7,4.9l3.4-2.6L404,2.2c-2.5-1.9-5.9-1.9-8.4,0l-3.5,2.7c-7.4,5.8-11.8,14.6-11.8,24
v80.6h8.6V28.9C388.9,19.5,393.3,10.6,400.7,4.9z"/>
<path id="XMLID_465_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M389.9,45.6c0-5.5,4.4-9.9,9.9-9.9c5.5,0,9.9,4.4,9.9,9.9"/>
<path id="XMLID_517_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M419.3,109.5h-38.9V28.9c0-9.4,4.4-18.3,11.8-24l3.5-2.7c2.5-1.9,5.9-1.9,8.4,0l3.8,2.9
c7.2,5.6,11.5,14.2,11.5,23.4V109.5z"/>
</g>
<path id="XMLID_440_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M441.6,206.9c-8.3,0-15.1-6.8-15.1-15.1c0-7,4.8-12.9,11.2-14.6"/>
<path id="XMLID_279_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M312.6,176c0-15.6,12.6-28.2,28.2-28.2S369,160.4,369,176c0,10.5-5.7,19.6-14.2,24.5"/>
<path id="XMLID_60_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M304.8,170.4c1.6-0.8,3.4-1.3,5.3-1.3c1.1,0,2.3,0.2,3.3,0.5"/>
<path id="XMLID_277_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M366,189.2c5.2,0,9.3,4.2,9.3,9.3c0,5.2-4.2,9.3-9.3,9.3"/>
<path id="XMLID_276_5" class="u-fill-white" d="M437.1,220.1h-66.5l19.2-21.7v-80.1h20.6l-0.9,73.1c-0.1,4.4,1.9,8.6,5.4,11.3L437.1,220.1z"
/>
<path id="XMLID_514_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M410.1,118.4v76.2c0,4.4,3.6,8,8,8h2.1"/>
<path id="XMLID_512_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M375.3,200.7h7.3c4,0,7.3-3.3,7.3-7.3v-75"/>
<path id="XMLID_275_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M380.8,235.4c0-1.6,0.3-3.1,0.8-4.5c0.6-1.4,1.4-2.7,2.5-3.9c1.1-1.1,2.4-2.1,3.9-2.7
c1.5-0.7,3.1-1,4.7-1c1.6,0,3.1,0.3,4.5,0.8c1.4,0.6,2.7,1.4,3.9,2.5"/>
<path id="XMLID_59_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M321.2,206.6c0-1.6,0.3-3.1,0.8-4.5c0.6-1.4,1.4-2.7,2.5-3.9c1.1-1.1,2.4-2.1,3.9-2.7
c1.5-0.7,3.1-1,4.7-1c1.6,0,3.1,0.3,4.5,0.8c1.4,0.6,2.7,1.4,3.9,2.5"/>
<path id="XMLID_58_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M456.7,184.4c1.4-0.6,2.9-1,4.5-1s3.1,0.2,4.5,0.7c1.5,0.5,2.8,1.4,4,2.5
c1.2,1.1,2.1,2.5,2.7,3.9c0.6,1.4,1,2.9,1,4.5c0,1.5-0.2,3.1-0.7,4.5"/>
<path id="XMLID_57_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M394.3,223.7c0.2-1.5,0.7-3.1,1.6-4.5c0.8-1.4,1.9-2.6,3.2-3.5c1.3-0.9,2.7-1.6,4.1-2
c1.5-0.4,3-0.5,4.6-0.3"/>
<path id="XMLID_286_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M473.5,226.1c0.2-1.5,0.7-3.1,1.6-4.5c0.8-1.4,1.9-2.6,3.2-3.5c1.3-0.9,2.7-1.6,4.1-2
c1.5-0.4,3-0.5,4.6-0.3"/>
<path id="XMLID_271_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M434.7,239.5c-1.5-0.5-2.9-1.3-4.1-2.4c-1.2-1.1-2.2-2.4-2.9-3.8s-1.1-2.9-1.2-4.4
c-0.1-1.5,0.1-3.1,0.6-4.6"/>
<path id="XMLID_56_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M287.7,204.6c-3-3-4.8-7.1-4.8-11.6c0-9.1,7.4-16.4,16.4-16.4c4,0,7.6,1.4,10.4,3.7"/>
<path id="XMLID_55_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M496.7,169.8c1.8-0.4,3.7-0.7,5.7-0.7c13.3,0,25.2,10.8,24,24c-0.9,9.6-6.1,17.9-13.9,21.7"/>
<path id="XMLID_54_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M519,210.5c0.7,2.3,1,4.9,0.8,7.5c-1.2,12.8-10.4,23.2-23.2,23.2"/>
</g>
</g>
<g id="XMLID_42_5">
<g id="XMLID_392_5">
<line id="XMLID_397_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="792.3" y1="133.5" x2="799.7" y2="133.5"/>
<line id="XMLID_396_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="796" y1="137.2" x2="796" y2="129.8"/>
</g>
<g id="XMLID_360_5">
<line id="XMLID_365_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="721" y1="90.1" x2="726.2" y2="84.9"/>
<line id="XMLID_364_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="726.2" y1="90.1" x2="721" y2="84.9"/>
</g>
<line id="XMLID_322_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="740.2" y1="133.5" x2="770.1" y2="133.5"/>
<line id="XMLID_321_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="544.4" y1="81.3" x2="490.9" y2="81.3"/>
<line id="XMLID_320_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="652.7" y1="87.5" x2="717.7" y2="87.5"/>
<line id="XMLID_318_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="778.8" y1="133.5" x2="772.7" y2="133.5"/>
<line id="XMLID_297_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="608.1" y1="75.5" x2="638" y2="75.5"/>
<line id="XMLID_296_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="646.7" y1="75.5" x2="640.6" y2="75.5"/>
<path id="XMLID_287_5" class="u-fill-primary" d="M747.7,166.6c0,1.3-1,2.3-2.3,2.3c-1.3,0-2.3-1-2.3-2.3s1-2.3,2.3-2.3
C746.6,164.2,747.7,165.3,747.7,166.6z"/>
<g id="XMLID_25_5">
<rect id="XMLID_267_5" x="603.8" y="100.4" class="u-fill-white" width="111.2" height="140.3"/>
<rect id="XMLID_263_5" x="603.8" y="100.4" class="u-fill-primary-lighter" width="111.2" height="22.9"/>
<rect id="XMLID_262_5" x="603.8" y="126.9" class="u-fill-primary-lighter" width="111.2" height="3.9"/>
<polyline id="XMLID_261_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" points="603.8,176.1 603.8,100.4 715.1,100.4 715.1,196.7 "/>
<path id="XMLID_31_5" class="u-fill-white" d="M619.8,112.7c0,1.8-1.4,3.2-3.2,3.2c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2
C618.4,109.6,619.8,111,619.8,112.7z"/>
<line id="XMLID_30_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="649.8" y1="112.7" x2="696.1" y2="112.7"/>
<line id="XMLID_29_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="618.8" y1="139.2" x2="699.5" y2="139.2"/>
<line id="XMLID_28_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="618.8" y1="146.4" x2="699.5" y2="146.4"/>
<line id="XMLID_27_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="618.8" y1="153.7" x2="699.5" y2="153.7"/>
<line id="XMLID_26_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="618.8" y1="160.9" x2="663.5" y2="160.9"/>
</g>
<path id="XMLID_230_5" class="u-fill-primary" opacity=".3" d="M743.5,198.1h-63.7c-2.2,0-4,1.8-4,4V238c0,2.2,1.8,4,4,4h63.7c2.2,0,4-1.8,4-4V202
C747.4,199.8,745.7,198.1,743.5,198.1z"/>
<g id="XMLID_20_5">
<path id="XMLID_229_5" class="u-fill-white" d="M748,240.6h-65.9c-0.9,0-1.6-0.7-1.6-1.6v-38.2c0-0.9,0.7-1.6,1.6-1.6H748
c0.9,0,1.6,0.7,1.6,1.6v38.2C749.6,239.9,748.9,240.6,748,240.6z"/>
<path id="XMLID_24_5" class="u-fill-white" d="M749.6,199.3l-33.3,19.8c-0.7,0.5-1.7,0.5-2.4,0l-33.3-19.8H749.6z"/>
<polygon id="XMLID_23_5" class="u-fill-primary-lighter" points="749.6,199.3 680.5,199.3 692.8,206.6 737.4,206.6 "/>
<polygon id="XMLID_22_5" class="u-fill-primary-lighter" points="729.2,211.5 733.7,208.8 696.5,208.8 701,211.5 "/>
<path id="XMLID_223_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M681.1,199.7l32.8,19.4c0.7,0.5,1.7,0.5,2.4,0l32.4-19.2"/>
<path id="XMLID_21_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M680.5,229.4V202c0-1.5,1.2-2.7,2.7-2.7h63.7c1.5,0,2.7,1.2,2.7,2.7v10.1"/>
</g>
<g id="XMLID_15_5">
<path id="XMLID_19_5" class="u-fill-white" d="M775.1,216.4v23.1c0,0.6-0.5,1.1-1.1,1.1h-44.2c-0.6,0-1.1-0.5-1.1-1.1v-23.1
c0-0.6,0.5-1.1,1.1-1.1H774C774.6,215.3,775.1,215.8,775.1,216.4z"/>
<rect id="XMLID_18_5" x="728.7" y="215.2" class="u-fill-primary-lighter" width="46.4" height="9"/>
<rect id="XMLID_17_5" x="728.7" y="225.9" class="u-fill-primary-lighter" width="46.4" height="2"/>
<path id="XMLID_16_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M775.1,216.4v23.1c0,0.6-0.5,1.1-1.1,1.1h-44.2c-0.6,0-1.1-0.5-1.1-1.1v-23.1
c0-0.6,0.5-1.1,1.1-1.1H774C774.6,215.3,775.1,215.8,775.1,216.4z"/>
</g>
<path id="XMLID_14_5" class="u-fill-primary" opacity=".3" d="M622.7,177.8h-15.8v1.3h-3.8v-1.3h-5.4v1.3h-3.2v-1.3h-3.3c-2.6,0-4.7,2.1-4.7,4.7v54
c0,2.6,2.1,4.7,4.7,4.7h31.4c2.6,0,4.7-2.1,4.7-4.7v-54C627.4,179.9,625.3,177.8,622.7,177.8z"/>
<g id="XMLID_7_5">
<g id="XMLID_8_5">
<path id="XMLID_13_5" class="u-fill-white" d="M621.5,240h-34.3c-1.1,0-2-0.9-2-2v-56.9c0-1.1,0.9-2,2-2h34.3c1.1,0,2,0.9,2,2V238
C623.5,239.1,622.6,240,621.5,240z"/>
<path id="XMLID_12_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M585.3,239.1v-56.6c0-1.9,1.5-3.4,3.4-3.4h3.3"/>
<path id="XMLID_209_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M604.3,179.1h15.8c1.9,0,3.4,1.5,3.4,3.4v47.1"/>
<line id="XMLID_208_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="595.1" y1="179.1" x2="600.5" y2="179.1"/>
<line id="XMLID_207_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="598.7" y1="183.7" x2="610.1" y2="183.7"/>
<path id="XMLID_206_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M606.2,235c0,1-0.8,1.8-1.8,1.8s-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8S606.2,234,606.2,235z
"/>
<rect id="XMLID_11_5" x="589.1" y="187.9" class="u-fill-primary-lighter" opacity=".3" width="30.6" height="43.1"/>
<rect id="XMLID_10_5" x="589.1" y="187.9" class="u-fill-primary-lighter" width="30.6" height="13.6"/>
<rect id="XMLID_9_5" x="589.1" y="204.1" class="u-fill-primary-lighter" width="30.6" height="3"/>
</g>
</g>
<g id="XMLID_1_5">
<path id="XMLID_6_5" class="u-fill-primary-lighter" opacity=".3" d="M706.3,239.8v-6c0-0.5-0.4-0.8-0.8-0.8h-87.1c-0.1,0-0.2,0-0.3,0.1l-6.5,3
c-0.6,0.3-0.6,1.2,0,1.5l6.5,3c0.1,0.1,0.2,0.1,0.3,0.1h87.1C705.9,240.6,706.3,240.3,706.3,239.8z"/>
<rect id="XMLID_5_5" x="621.2" y="232.9" class="u-fill-white" width="76.8" height="7.7"/>
<rect id="XMLID_4_5" x="621.2" y="233" class="u-fill-primary-lighter" width="76.8" height="3.6"/>
<path id="XMLID_3_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M706.3,240.6v-7.7h-88.1l-7.4,3.4c-0.4,0.2-0.4,0.7,0,0.9l7.4,3.4H706.3z"/>
<line id="XMLID_2_5" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="621.2" y1="232.7" x2="621.2" y2="240.6"/>
</g>
</g>
</svg>
</figure>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hero subscribe #7
HTML:
<div class="row">
<div class="col-lg-5 d-flex align-items-end u-bg-img-hero u-gradient-overlay-half-primary-v1 min-height-550 rounded-top-pseudo" data-bg-img-src="../assets/img/615x750/img4.jpg">
<div class="position-relative w-100 text-center p-5 pb-9">
<div class="mb-5">
<h2 class="text-white font-weight-bold mb-0">London, <span class="text-warning">UK</span></h2>
<p class="u-text-light">153 Williamson Plaza, Maggieberg, MT 09514</p>
</div>
<div class="mb-5">
<h3 class="h6 text-white">Phone number</h3>
<span class="d-block h5 text-warning">+1 (062) 109-9222</span>
</div>
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--pill u-form--no-brd u-form--no-addon-brd">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append u-form__append">
<button type="submit" class="btn text-primary u-btn-white">
<span class="fas fa-paper-plane"></span>
</button>
</span>
</div>
</form>
</div>
<figure class="position-absolute-bottom-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 347.1" style="margin-bottom: -9px; enable-background:new 0 0 1920 347.1;" xml:space="preserve">
<linearGradient id="hireUsBottomShape" gradientUnits="userSpaceOnUse" x1="960" y1="347.082" x2="960" y2="50.6077">
<stop class="u-stop-color-primary" offset="1.500162e-07" stop-opacity="0.3"/>
<stop class="u-stop-color-white" offset="1" stop-opacity="0.3"/>
</linearGradient>
<path fill="url(#hireUsBottomShape)" d="M0,233c0,0,311.2-97,706.6-35.5c152.8,23.8,304.3,73.9,459.2,81.8c69.2,3.5,138.2-4.1,205.7-19.6
c43.2-9.9,85.8-22.8,127.7-37.3c74.1-25.6,144.2-61.1,210-103.5c62.4-40.2,134.7-74.7,210.9-67.3c0,0,0,295.5,0,295.5H0.5L0,233z"/>
<path class="u-fill-white" d="M0,326.1c0,0,321-226.7,960.5-76.4S1920,0,1920,0v347H0L0,326.1z"/>
</svg>
</figure>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Hero subscribe #8
Subscribe
Get the latest updates from Front.
HTML:
<div class="position-relative w-md-75 mx-auto">
<div class="bg-primary text-center rounded p-7">
<div class="mb-4">
<h3 class="h1 text-white mb-1"><strong>Subscribe</strong></h3>
<p class="u-text-light mb-0">Get the latest updates from Front.</p>
</div>
<figure class="w-80 mx-auto mb-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 217 108.3" style="enable-background:new 0 0 217 108.3;" xml:space="preserve">
<path class="u-fill-white" opacity=".15" d="M214.7,108c1.2,0,2.3-1,2.2-2.3C215.5,47.1,167.5,0,108.5,0S1.5,47.1,0,105.7c0,1.2,1,2.3,2.2,2.3H214.7z"/>
<g id="XMLID_301_">
<g id="XMLID_122_">
<g id="XMLID_168_">
<path id="XMLID_300_" class="u-fill-white" d="M69.6,101l-18.2-5.7c-0.6-0.2-0.9-0.8-0.7-1.3l5.7-18.2c0.2-0.6,0.8-0.9,1.3-0.7l18.2,5.7
c0.6,0.2,0.9,0.8,0.7,1.3l-5.7,18.2C70.7,100.9,70.1,101.2,69.6,101z"/>
<rect id="XMLID_195_" x="55.8" y="79.9" transform="matrix(0.9537 0.3006 -0.3006 0.9537 29.2174 -15.1019)" class="u-fill-primary-lighter" width="15.8" height="14.9"/>
<path id="XMLID_59_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M54.6,81.7l1.8-5.7c0.2-0.7,0.9-1.1,1.6-0.8l3.4,1.2"/>
</g>
<g id="XMLID_132_">
<path id="XMLID_165_" class="u-fill-white" d="M48.6,91.9l-19.3,4.3c-0.8,0.2-1.7-0.3-1.9-1.2l-2.8-12.7c-0.2-0.8,0.3-1.7,1.2-1.9L45,76.2
c0.8-0.2,1.7,0.3,1.9,1.2L49.8,90C49.9,90.9,49.4,91.7,48.6,91.9z"/>
<path id="XMLID_160_" class="u-fill-primary-lighter" opacity=".5" d="M46.6,75.8l-9,9.9c-0.2,0.3-0.6,0.3-0.9,0.2l-12.4-5.1L46.6,75.8z"/>
<path id="XMLID_153_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M24.5,80.9l12.2,5c0.3,0.1,0.7,0,0.9-0.2l8.7-9.6"/>
<path id="XMLID_379_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M27.3,94.6l-2.9-12.8c-0.1-0.5,0.2-1.1,0.8-1.2l2.1-0.5"/>
<path id="XMLID_152_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M32.7,78.9L45.6,76c0.5-0.1,1.1,0.2,1.2,0.8l1.1,4.9"/>
<line id="XMLID_286_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="29.1" y1="79.8" x2="31.5" y2="79.2"/>
</g>
<path id="XMLID_482_" class="u-fill-white" d="M71.2,96.7H71c-0.9-3.1-3.7-5.3-7.1-5.3c-1.5,0-2.8,0.4-4,1.2c-0.7-4.9-4.9-8.6-10-8.6
c-4.5,0-8.4,3-9.7,7.1c-0.6-0.2-1.2-0.2-1.8-0.2c-3.5,0-6.3,2.5-6.9,5.9h-1.1c-2.9,0-5.2,2.3-5.2,5.2v0.4c0,2.9,2.3,5.2,5.2,5.2
h40.8c2.9,0,5.2-2.3,5.2-5.2v-0.4C76.4,99.1,74.1,96.7,71.2,96.7z"/>
<path id="XMLID_60_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M59.9,92.6c-0.7-4.9-4.9-8.6-10-8.6c-4.5,0-8.4,3-9.7,7.1c-0.6-0.2-1.2-0.2-1.8-0.2
c-3.5,0-6.3,2.5-6.9,5.9h-1.1c-2.9,0-5.2,2.3-5.2,5.2v0.4c0,2.9,2.3,5.2,5.2,5.2h7.3h25.6h7.9"/>
<path id="XMLID_480_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M56.5,91.7c-1.5-2.3-4.1-3.8-7.1-3.8c-1.6,0-3,0.4-4.3,1.2"/>
<path id="XMLID_479_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M38.6,90.8c2,0,3.6,1.6,3.6,3.6"/>
<g id="XMLID_125_">
<path id="XMLID_130_" class="u-fill-white" d="M50.1,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C49,69.9,50,70.4,50.1,71.2z"/>
<path id="XMLID_129_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M50.1,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C49,69.9,50,70.4,50.1,71.2z"/>
<path id="XMLID_128_" class="u-fill-white" d="M55.8,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C54.7,69.9,55.7,70.4,55.8,71.2z"/>
<path id="XMLID_127_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M55.8,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C54.7,69.9,55.7,70.4,55.8,71.2z"/>
<polyline id="XMLID_126_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" points="50.2,71.3 50.2,64.1 55.9,64.1 55.9,71.3 "/>
</g>
</g>
<g id="XMLID_29_">
<line id="XMLID_31_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="94.8" y1="16" x2="99.1" y2="16"/>
<line id="XMLID_30_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="97" y1="18.1" x2="97" y2="13.8"/>
</g>
<g id="XMLID_274_">
<line id="XMLID_289_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="32.1" y1="27.3" x2="36.4" y2="27.3"/>
<line id="XMLID_280_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="34.2" y1="29.4" x2="34.2" y2="25.1"/>
</g>
<g id="XMLID_225_">
<line id="XMLID_273_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="195" y1="72.2" x2="199.3" y2="72.2"/>
<line id="XMLID_228_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="197.1" y1="74.3" x2="197.1" y2="70"/>
</g>
<g id="XMLID_21_">
<line id="XMLID_23_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="179.3" y1="44" x2="182.3" y2="41"/>
<line id="XMLID_22_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="182.3" y1="44" x2="179.3" y2="41"/>
</g>
<g id="XMLID_124_">
<line id="XMLID_194_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="31.2" y1="68.2" x2="34.2" y2="65.2"/>
<line id="XMLID_131_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="34.2" y1="68.2" x2="31.2" y2="65.2"/>
</g>
<line id="XMLID_35_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="86.8" y1="7.2" x2="133" y2="7.2"/>
<line id="XMLID_26_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="69.4" y1="16.1" x2="86.8" y2="16.1"/>
<line id="XMLID_123_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="158.8" y1="42.5" x2="176.2" y2="42.5"/>
<line id="XMLID_36_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="91.9" y1="16.1" x2="88.3" y2="16.1"/>
<path id="XMLID_118_" class="u-fill-primary" d="M184.3,80.9c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C183.8,79.7,184.3,80.2,184.3,80.9z"/>
<path id="XMLID_295_" class="u-fill-primary" d="M140,16c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C139.5,14.7,140,15.3,140,16z"/>
<path id="XMLID_205_" class="u-fill-primary" d="M19.4,53.3c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C18.9,52,19.4,52.6,19.4,53.3z"/>
<path id="XMLID_197_" class="u-fill-primary" d="M157.7,33.1c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8c0-0.4,0.4-0.8,0.8-0.8
C157.4,32.3,157.7,32.7,157.7,33.1z"/>
<path id="XMLID_198_" class="u-fill-primary" d="M56.7,12.9c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8c0-0.4,0.4-0.8,0.8-0.8
C56.3,12.1,56.7,12.5,56.7,12.9z"/>
<g id="XMLID_11_">
<path id="XMLID_7_" class="u-fill-primary-lighter" opacity=".2" d="M144.2,107.5V30.7c0-2-1.6-3.7-3.7-3.7H86.3c-2,0-3.7,1.7-3.7,3.7v76.8L144.2,107.5z"/>
<path id="XMLID_5_" class="u-fill-primary-lighter" opacity=".2" d="M82.7,39.2v-9.1c0-1.7,1.4-3.1,3.1-3.1h55.4c1.7,0,3.1,1.4,3.1,3.1v9.1H82.7z"/>
<path id="XMLID_276_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M82.7,63.5V30.1c0-1.7,1.4-3.1,3.1-3.1h6.5h1.7"/>
<path id="XMLID_277_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M104.6,27h36.5c1.7,0,3.1,1.4,3.1,3.1V44"/>
<line id="XMLID_4_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="96.9" y1="27" x2="101.1" y2="27"/>
<line id="XMLID_284_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="82.7" y1="39.4" x2="144.2" y2="39.4"/>
<line id="XMLID_283_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="87" y1="31.4" x2="88.6" y2="31.4"/>
<line id="XMLID_8_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="90.9" y1="31.4" x2="92.5" y2="31.4"/>
<line id="XMLID_281_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="94.8" y1="31.4" x2="96.4" y2="31.4"/>
<rect id="XMLID_275_" x="84.5" y="43.8" class="u-fill-white" width="57.7" height="63.7"/>
<rect id="XMLID_20_" x="102.2" y="33.8" class="u-fill-white" width="32.7" height="2.2"/>
<rect id="XMLID_19_" x="93" y="33.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 193.4763 69.7701)" class="u-fill-white" width="7.4" height="2.2"/>
<rect id="XMLID_18_" x="87" y="33.8" class="u-fill-white" width="4.7" height="2.2"/>
<rect id="XMLID_17_" x="88.3" y="47.4" class="u-fill-primary-lighter" opacity=".5" width="17.4" height="23.4"/>
<rect id="XMLID_16_" x="109.9" y="47.4" class="u-fill-primary-lighter" opacity=".2" width="28.9" height="34.6"/>
<rect id="XMLID_14_" x="109.9" y="87.7" class="u-fill-primary-lighter" opacity=".5" width="28.9" height="5.7"/>
<path id="XMLID_13_" class="u-fill-primary-lighter" opacity=".5" d="M95.5,77.9h-6.1c-0.5,0-0.9-0.4-0.9-0.9l0,0c0-0.5,0.4-0.9,0.9-0.9h6.1c0.5,0,0.9,0.4,0.9,0.9
l0,0C96.4,77.5,96,77.9,95.5,77.9z"/>
<path id="XMLID_12_" class="u-fill-primary-lighter" d="M104.2,77.9h-6.1c-0.5,0-0.9-0.4-0.9-0.9l0,0c0-0.5,0.4-0.9,0.9-0.9h6.1
c0.5,0,0.9,0.4,0.9,0.9l0,0C105,77.5,104.6,77.9,104.2,77.9z"/>
</g>
<path id="XMLID_304_" class="u-fill-primary" opacity=".3" d="M142.2,107.5L142.2,107.5l2,0V45.4h-11.4c-2.2,0-4.1,1.6-4.4,3.8c-2.6,0.3-4.6,2.6-4.6,5.3
v7.3c0,0.8,0.3,1.6,0.7,2.2c-0.4,0.4-0.7,1-0.7,1.7v1.6c0,1.3,1.1,2.4,2.4,2.4c0.2,0,0.5,0,0.7-0.1c0.6,5.2,4.2,9.5,9,11.1v0.2
c-2,0.5-4,1.2-5.8,2.3l0.4,0.7c-1,0.6-1.8,1.2-2.6,1.9l-0.5-0.6c-1.4,1.2-2.6,2.7-3.5,4.2l0.7,0.4c-0.5,1-1,2-1.3,3l-0.7-0.2
c-0.4,1.3-0.5,2.5-0.5,3.8v11H142.2z"/>
<g id="XMLID_476_">
<path id="XMLID_56_" class="u-fill-white" d="M158.3,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_54_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M158.3,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_517_" class="u-fill-white" d="M129.9,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_516_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M129.9,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_53_" class="u-fill-primary-lighter" d="M160.5,107.5v-11c0-8.4-8-15.3-17.9-15.3l0,0c-9.8,0-17.9,6.9-17.9,15.3v11H160.5z"/>
<path id="XMLID_513_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M125.3,92.8c-0.3,1.2-0.5,2.4-0.5,3.6v11"/>
<path id="XMLID_511_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M129.9,85.8c-1.3,1.2-2.5,2.5-3.3,4"/>
<path id="XMLID_51_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M154.2,84.8c-3.1-2.3-7.2-3.7-11.6-3.7l0,0c-3.8,0-7.2,1-10.1,2.7"/>
<line id="XMLID_50_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="134.9" y1="95.4" x2="134.9" y2="107.5"/>
<line id="XMLID_49_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="150.5" y1="95.4" x2="150.5" y2="107.5"/>
<path id="XMLID_48_" class="u-fill-white" d="M142,87.3L142,87.3c-1.8,0-3.3-1.5-3.3-3.3v-7.5c0-1.6,1.3-2.9,2.9-2.9h0.9
c1.6,0,2.9,1.3,2.9,2.9V84C145.3,85.8,143.8,87.3,142,87.3z"/>
<path id="XMLID_45_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M142,87.3L142,87.3c-1.8,0-3.3-1.5-3.3-3.3v-7.5c0-1.6,1.3-2.9,2.9-2.9h0.9
c1.6,0,2.9,1.3,2.9,2.9V84C145.3,85.8,143.8,87.3,142,87.3z"/>
<path id="XMLID_485_" class="u-fill-white" d="M142.3,80.7L142.3,80.7c-7,0-12.7-5.7-12.7-12.7v-8.6c0-7,5.7-6.8,12.7-6.8l0,0
c7,0,12.7-0.2,12.7,6.8V68C155,75,149.3,80.7,142.3,80.7z"/>
<path id="XMLID_484_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M142.3,80.7L142.3,80.7c-7,0-12.7-5.7-12.7-12.7v-8.6c0-7,5.7-6.8,12.7-6.8l0,0
c7,0,12.7-0.2,12.7,6.8V68C155,75,149.3,80.7,142.3,80.7z"/>
<path id="XMLID_483_" class="u-fill-white" d="M129.6,64.8L129.6,64.8c-1.7,0-3-1.4-3-3v-7.3c0-2.5,2-4.6,4.6-4.6l0,0l0,0
c0-2.1,1.7-3.7,3.7-3.7h18.5c2.5,0,4.5,2,4.5,4.5v11c0,1.6-1.4,2.9-3,2.8l0,0v-7.3c0,0-2.1,3.4-8.7,3.4c-7.9,0-13.1-3.9-13.1-3.9
s-0.5,1.1-1.6,2c-1,0.9-2,0.6-2,0.6V64.8z"/>
<path id="XMLID_44_" class="u-fill-primary-lighter" opacity=".15" d="M129.6,64.8v-5.5c0,0,1,0.3,2-0.6c1.1-0.9,1.6-2,1.6-2s10.4,5.5,16.7,3.5
c-6.8-2.9-15.5-4.7-17-13.4c-1,0.7-1.7,1.8-1.7,3.1c-2.5,0-4.6,2-4.6,4.6v7.3C126.6,63.4,127.9,64.8,129.6,64.8z"/>
<path id="XMLID_478_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M154.9,57.2v7.3l0,0c1.6,0.1,3-1.2,3-2.8v-11c0-2.5-2-4.5-4.5-4.5h-18.5
c-2.1,0-3.7,1.7-3.7,3.7l0,0l0,0c-2.5,0-4.6,2-4.6,4.6v7.3c0,1.7,1.4,3,3,3h0v-5.5c0,0,1,0.3,2-0.6c1.1-0.9,1.6-2,1.6-2"/>
<path id="XMLID_477_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M131.4,55.5c0,0,6.9,5.1,14.9,5.1c6.6,0,9.6-4.5,9.6-4.5"/>
</g>
<path id="XMLID_303_" class="u-fill-primary" opacity=".3" d="M92.2,105.2V68.3c0-1.7-1.4-3.1-3.1-3.1h-6.4v42.3h8.4C91.8,106.9,92.2,106.1,92.2,105.2z"/>
<g id="XMLID_77_">
<g id="XMLID_83_">
<path id="XMLID_121_" class="u-fill-white" d="M87.4,107.5H65.3c-1.1,0-2-0.9-2-2V67.9c0-1.1,0.9-2,2-2h22.2c1.1,0,2,0.9,2,2v37.6
C89.4,106.6,88.5,107.5,87.4,107.5z"/>
<path id="XMLID_120_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M72.3,65.9h14.8c1.3,0,2.3,1,2.3,2.3v36.9c0,1.3-1,2.3-2.3,2.3H65.6c-1.3,0-2.3-1-2.3-2.3
V68.3c0-1.3,1-2.3,2.3-2.3h1.4"/>
<line id="XMLID_119_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="68.4" y1="65.9" x2="71.3" y2="65.9"/>
<line id="XMLID_117_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="72.5" y1="69.1" x2="80.2" y2="69.1"/>
<path id="XMLID_110_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M77.6,104.1c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C77.1,102.8,77.6,103.4,77.6,104.1z"/>
<rect id="XMLID_108_" x="65.9" y="71.9" class="u-fill-primary-lighter" width="20.9" height="29.5"/>
</g>
</g>
<g id="XMLID_39_">
<path id="XMLID_40_" class="u-fill-primary-lighter" opacity=".5" d="M77.4,58.3l-1.5-8.1c0.9-1.9,1.3-4,1.3-6.3c0-8.5-6.9-15.4-15.4-15.4
c-8.5,0-15.4,6.9-15.4,15.4c0,8.5,6.9,15.4,15.4,15.4c3,0,5.8-0.9,8.2-2.4L77.4,58.3z"/>
<path id="XMLID_33_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M47.9,50.4c2.5,5.2,7.8,8.8,13.9,8.8c3,0,5.8-0.9,8.2-2.4l7.4,1.4l-1.5-8.1
c0.9-1.9,1.3-4,1.3-6.3c0-3.7-1.3-7.1-3.4-9.7"/>
<path id="XMLID_32_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M68,29.7c-1.9-0.8-4-1.3-6.2-1.3c-6.4,0-11.9,3.9-14.2,9.4"/>
<path id="XMLID_37_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M72.8,33c-1-1-2.1-1.8-3.3-2.5"/>
<ellipse id="XMLID_34_" class="u-fill-white" cx="61.9" cy="43.9" rx="11.9" ry="11.6"/>
<g id="XMLID_57_">
<path id="XMLID_62_" class="u-fill-gray-75" d="M63.6,39.8h0.3c0.3-0.8,0.6-1.8,0.6-2.5c0-0.3,0-0.8,0-1.2c0,0.1,0,0.2,0,0.3
C64.5,37.6,63.6,39.8,63.6,39.8z"/>
<path id="XMLID_747_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M68.9,45.1h1.9c0.6,0,1.1-0.5,1.1-1.1l0,0c0-0.6-0.5-1.1-1.1-1.1h-1.9"/>
<path id="XMLID_746_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M66.9,47.3h2.6c0.6,0,1.1-0.5,1.1-1.1l0,0c0-0.6-0.5-1.1-1.1-1.1h-2.6"/>
<path id="XMLID_745_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M67.4,47.3h1c0.6,0,1.1,0.5,1.1,1.1l0,0c0,0.6-0.5,1.1-1.1,1.1h-6.2c-0.3,0-0.6-0.1-0.8-0.3
l-1.1-1.1c-0.2-0.2-0.4-0.3-0.6-0.3h-0.3"/>
<path id="XMLID_61_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M66.9,42.9h3.4c0.6,0,1.1-0.5,1.1-1.1l0,0c0-0.6-0.5-1.1-1.1-1.1h-4.2h-2.7
c0,0,0.9-2.3,0.9-3.4c0-0.5,0.1-1.5-0.2-2c-0.1-0.2-1-0.2-1.1,0c0,0-0.8,2.6-1.4,3.3c-0.3,0.4-1.5,2-1.5,2H59"/>
<path id="XMLID_113_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M57,39.6h1.3c0.5,0,0.9,0.4,0.9,0.9V48c0,0.5-0.4,0.9-0.9,0.9h-5.2"/>
</g>
<line id="XMLID_24_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="52.1" y1="48.9" x2="32.1" y2="48.9"/>
<line id="XMLID_9_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="54.7" y1="45.8" x2="42.9" y2="45.8"/>
<line id="XMLID_25_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="39.1" y1="45.8" x2="41.9" y2="45.8"/>
<line id="XMLID_27_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="55" y1="42.7" x2="29" y2="42.7"/>
<line id="XMLID_28_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="56.5" y1="39.6" x2="29.1" y2="39.6"/>
</g>
<g id="XMLID_417_">
<path id="XMLID_814_" class="u-fill-white" d="M182.4,107.5H153c-0.4,0-0.7-0.3-0.7-0.7V87.4c0-0.4,0.3-0.7,0.7-0.7h29.4
c0.4,0,0.7,0.3,0.7,0.7v19.4C183.1,107.2,182.8,107.5,182.4,107.5z"/>
<path id="XMLID_196_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M182.4,107.5H153c-0.4,0-0.7-0.3-0.7-0.7V87.4c0-0.4,0.3-0.7,0.7-0.7h29.4
c0.4,0,0.7,0.3,0.7,0.7v19.4C183.1,107.2,182.8,107.5,182.4,107.5z"/>
<path id="XMLID_812_" class="u-fill-primary" d="M170.4,95.3l-4.9,2.8c-0.3,0.2-0.7,0-0.7-0.4v-5.7c0-0.4,0.4-0.6,0.7-0.4l4.9,2.8
C170.7,94.7,170.7,95.2,170.4,95.3z"/>
<line id="XMLID_810_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="155.7" y1="103.7" x2="179.3" y2="103.7"/>
<line id="XMLID_809_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="161" y1="105.6" x2="161" y2="101.8"/>
</g>
<g id="XMLID_481_">
<line id="XMLID_15_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="16.8" y1="107.5" x2="19.5" y2="107.5"/>
<line id="XMLID_38_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="186.7" y1="107.5" x2="192.8" y2="107.5"/>
<line id="XMLID_41_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="21.4" y1="107.5" x2="185.2" y2="107.5"/>
</g>
</g>
</svg>
</figure>
<figure class="w-100 u-content-centered z-index-minus-1s">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 466 326.9" style="enable-background:new 0 0 466 326.9;" xml:space="preserve">
<path class="u-fill-success" d="M53,42c3.3,0,6,2.7,6,6s-2.7,6-6,6s-6-2.7-6-6S49.7,42,53,42 M53,37c-6.1,0-11,4.9-11,11s4.9,11,11,11
s11-4.9,11-11S59.1,37,53,37L53,37z"/>
<line class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="50.4" y1="281" x2="55.6" y2="275.9"/>
<line class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="55.6" y1="281" x2="50.4" y2="275.9"/>
<circle class="u-fill-warning" cx="430" cy="135" r="5"/>
</svg>
</figure>
<div class="w-80 mx-auto">
<form class="js-validate js-form-message">
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<div class="input-group-append u-form__append">
<button type="submit" class="btn btn-success u-btn-success">Subscribe</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.validation.js"></script>
<script src="../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>