Андрей

Однако копирование стилей из данного файла не помогает решить проблему.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="780px" height="1080px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 13559 18770"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:url(#id0)}
   ]]>
  </style>
  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="29585.7" y1="0" x2="29585.7" y2="81913">
   <stop offset="0" style="stop-color:#D8E9F4"/>
   <stop offset="1" style="stop-color:#BDD6E7"/>
  </linearGradient>
 </defs>
 <g id="Layer_x0020_1">
  <path class="fil0" d="M0 81913c18825,0 40349,-1237 59171,-2245l-537 -694c-479,-732 -907,-1932 -1129,-2782 -706,-2696 -1099,-6426 -1085,-9199 2,-508 -71,-723 -76,-1155l3 -65838 -56347 0 0 81913z"/>
 </g>
</svg>

$( ".logistics" ).click(function() {
  if ( $( "#box" ).is( ":hidden" ) ) {
    $( "#box" ).fadeIn(1000);
  
  }
});

$( "#box" ).click(function() {
    $( "#box" ).fadeOut(1000);
});

flex-flow: row wrap;
justify-content: space-around;

<div class="wrapper">
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: table;
  height: 100%;
}
.content {
  display: table-row;
  height: 100%;
}