@font-face {
     font-family: 'Avenir Next';
     font-weight: 100;
     src: url('./fonts/AvenirNext-UltraLight.woff') format('woff');
 }

 @font-face {
     font-family: 'Avenir Next';
     font-weight: 200;
     src: url('./fonts/AvenirNext-Thin.woff') format('woff');
 }

 @font-face {
     font-family: 'Avenir Next';
     font-weight: 300;
     src: url('./fonts/AvenirNext-Light.woff') format('woff');
 }

 @font-face {
     font-family: 'Avenir Next';
     font-weight: 400;
     src: url('./fonts/AvenirNext-Regular.woff') format('woff');
 }

 @font-face {
     font-family: 'Avenir Next';
     font-weight: 500;
     src: url('./fonts/AvenirNext-Medium.woff') format('woff');
 }

 @font-face {
     font-family: 'Avenir Next';
     font-weight: 600;
     src: url('./fonts/AvenirNext-Demi.woff') format('woff');
 }

 @font-face {
     font-family: 'Avenir Next';
     font-weight: 700;
     src: url('./fonts/AvenirNext-Bold.woff') format('woff');
 }

 @font-face {
     font-family: 'Avenir Next';
     font-weight: 800;
     src: url('./fonts/AvenirNext-Heavy.woff') format('woff');
 }


 html {
     line-height: 1.15;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
 }

 body {
     margin: 0;
 }

 article,
 aside,
 footer,
 header,
 nav,
 section {
     display: block;
 }

 h1 {
     font-size: 2em;
     margin: 0.67em 0;
 }

 figcaption,
 figure,
 main {
     display: block;
 }

 figure {
     margin: 1em 40px;
 }

 hr {
     box-sizing: content-box;
     height: 0;
     overflow: visible;
 }

 pre {
     font-family: monospace, monospace;
     font-size: 1em;
 }

 a {
     background-color: transparent;
     -webkit-text-decoration-skip: objects;
 }


 body,
 html {
     margin: 0;
     font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     -webkit-font-smoothing: antialiased;
 }

 * {
     box-sizing: border-box;
 }

 html,
 body,
 div,
 span,
 applet,
 object,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     vertical-align: baseline;
 }

 body:after {
     content: '';
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     visibility: hidden;
     opacity: 0;
     background-color: rgba(0, 0, 0, 0.16);
     z-index: 9998;
     pointer-events: none;
     transition: all 200ms ease;
     -webkit-backdrop-filter: grayscale(0)
 }

 .footer img,
 .navbar-left img {
     width: 130px;
 }

 /*footer start*/
 .footer .business-box {
     background-color: rgb(35, 49, 67);
     border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 }

 .footer .business-box .business {
     -moz-box-pack: center;
     justify-content: center;
     margin: 35px 0px;
 }

 .footer .business-box .business-flex {
     display: flex;
     align-items: center;
     -moz-box-align: center;
     flex-direction: column;
 }

 .footer .get-started {
     margin-top: 0;
 }

 .footer .business-box .business-title {
     font-size: 26px;
     font-weight: 500;
     color: white;
     text-align: center;
 }

 .footer .f-inner {
     background: rgb(35, 49, 67) none repeat scroll 0% 0%;
     color: rgba(255, 255, 255, 0.5);
 }

 .footer .f-inner-flex {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
 }

 .footer .f-inner-mp {
     width: 100%;
     margin: 0px auto;
     padding: 20px;
     padding-top: 20px;
     padding-bottom: 20px;
     max-width: 1180px;
     margin-top: 30px;
 }

 .footer .f-inner-flex2 {
     display: flex;
 }

 .footer .margin30 {
     margin-bottom: 30px;
 }

 .footer .f-inner-flex3 {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
 }

 .footer .marginb14 {
     margin-bottom: 14px;
 }

 .footer .tel {
     margin-bottom: 10px;
     font-size: 20px;
     color: rgba(255, 255, 255);
     margin-top: 20px;
 }

 .footer .link {
     margin-bottom: 10px;
     font-size: 15px;
     color: rgba(255, 255, 255, 0.5);
     text-decoration: none;
 }

 .footer .copyright {
     margin-top: 28px;
     font-size: 12px;
     color: rgba(255, 255, 255, 0.5);
 }

 .footer .f-title {
     margin-bottom: 20px;
     margin-top: 5px;
     font-size: 15px;
     font-weight: 500;
     color: rgb(255, 255, 255);
 }

 /*footer end*/


 .off-canvas-wrapper.open {
     margin-left: 0;
 }

 .off-canvas-wrapper {
     position: fixed;
     width: 100%;
     height: 100%;
     background-color: #1360AD;
     z-index: 2000;
     color: #fcfcfc;
     -webkit-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
     overflow-y: scroll;
     margin-left: -100%;
 }

 .ghost-image {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     opacity: .06;
     /*background-image: url(/static/media/background-image-01.c410ba50.jpg);*/
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 50%;
 }

 .off-canvas-wrapper.open .inn {
     display: -ms-flexbox;
     display: flex;
 }

 .off-canvas-wrapper .inn {
     position: relative;
     height: 100%;
     display: none;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

 .off-canvas-wrapper .inn .menu {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-flex-align: center;
     align-items: center;
     margin-right: 0;
 }

 .off-canvas-wrapper .inn .menu li {
     display: block;
     margin-right: 0;
     font-size: 24px;
     padding: 10px 0;
     text-align: center;
 }

 .off-canvas-wrapper .inn .menu li a {
     text-decoration: none;
     color: inherit;
 }

 .off-canvas-wrapper .inn .menu .download-all-btn {
     margin: 35px 0;
 }

 .download-all-btn {
     display: inline-block;
     position: relative;
     margin: 10px 0 10px 15px;
     z-index: 300;
 }

 .off-canvas-wrapper .inn .menu .download-all-btn:before {
     left: -24px;
     font-size: 54px;
     top: -21px;
 }

 .download-all-btn:before {
     content: "\E8FE";
     font-family: sketchize;
     position: absolute;
     left: -26px;
     font-size: 50px;
     top: -20px;
     z-index: 0;
 }

 .off-canvas-wrapper .inn .menu .download-all-btn a {
     font-size: 18px;
 }

 .download-all-btn a {
     position: relative;
     font-family: Fredoka One, sans-serif;
     color: #fff;
     z-index: 10;
 }

 .off-canvas-wrapper .inn .motto {
     position: absolute;
     bottom: 30px;
     text-align: center;
     font-size: 12px;
 }

 .off-canvas-wrapper .inn .motto p {
     margin-bottom: 0;
 }

 .off-canvas-wrapper .close {
     position: absolute;
     top: 28px;
     right: 20px;
 }

 .off-canvas-wrapper .close img {
     width: 22px;
 }

 .navbar-right img {
     width: 22px;
 }