<!-- <!DOCTYPE html> -->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Artichoke animation</title>
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container" >
<section class="panel fillViewport " id="firstload" >
<!-- partial:index.partial.html -->
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1498.11 409" style="enable-background:new 0 0 1498.11 409;" xml:space="preserve">
<g id="icon">
<path class="icon-stroke plugin-stroke" d="M447.62,449.17h55v250h-55Z" transform="translate(-147.62 -433.46)"/>
<path class="icon-stroke plugin-stroke" d="M550.1,604.5v-.72c0-54.63,41.77-99.62,100.33-99.62,36.07,0,58.56,12.14,76.42,32.14L693.64,572c-12.14-12.85-24.28-21.06-43.56-21.06-27.14,0-46.42,23.92-46.42,52.13v.71c0,29.28,18.92,52.85,48.56,52.85,18.21,0,30.71-7.86,43.92-20.35l31.78,32.13c-18.57,20.36-40,35-78.2,35C592.23,703.41,550.1,659.13,550.1,604.5Z" transform="translate(-147.62 -433.46)"/>
<path class="icon-stroke plugin-stroke" path d="M748.62,604.5v-.72c0-55,44.28-99.62,103.91-99.62,59.28,0,103.2,43.92,103.2,98.91v.71c0,55-44.28,99.63-103.91,99.63C792.54,703.41,748.62,659.49,748.62,604.5Zm153.55,0v-.72c0-28.21-20.36-52.84-50.35-52.84-31.07,0-49.63,23.92-49.63,52.13v.71c0,28.21,20.35,52.85,50.34,52.85C883.6,656.63,902.17,632.71,902.17,604.5Z" transform="translate(-147.62 -433.46)"/>
<path class="icon-stroke plugin-stroke" d="M995,507.73h54.27v27.14c12.5-16.07,28.57-30.71,56.06-30.71,41.06,0,65,27.14,65,71.06v123.9H1116V592.36c0-25.71-12.14-38.92-32.85-38.92s-33.92,13.21-33.92,38.92V699.12H995Z" transform="translate(-147.62 -433.46)"/>
<path class="icon-stroke plugin-stroke" d="M1218.51,438.46h57.13v48.2h-57.13Zm1.43,69.27h54.28V699.12h-54.28Z" transform="translate(-147.62 -433.46)"/>
<path class="icon-stroke plugin-stroke" d="M1316,604.5v-.72c0-54.63,41.77-99.62,100.33-99.62,36.07,0,58.56,12.14,76.42,32.14L1459.53,572c-12.14-12.85-24.28-21.06-43.56-21.06-27.14,0-46.42,23.92-46.42,52.13v.71c0,29.28,18.92,52.85,48.56,52.85,18.21,0,30.71-7.86,43.92-20.35l31.78,32.13c-18.57,20.36-40,35-78.2,35C1358.12,703.41,1316,659.13,1316,604.5Z" transform="translate(-147.62 -433.46)"/>
</g>
<g id="icon_black">
<g>
<path class="black-fill" d="M447.62,449.17h55v250h-55Z" transform="translate(-147.62 -433.46)"/>
<path class="black-fill" d="M550.1,604.5v-.72c0-54.63,41.77-99.62,100.33-99.62,36.07,0,58.56,12.14,76.42,32.14L693.64,572c-12.14-12.85-24.28-21.06-43.56-21.06-27.14,0-46.42,23.92-46.42,52.13v.71c0,29.28,18.92,52.85,48.56,52.85,18.21,0,30.71-7.86,43.92-20.35l31.78,32.13c-18.57,20.36-40,35-78.2,35C592.23,703.41,550.1,659.13,550.1,604.5Z" transform="translate(-147.62 -433.46)"/>
<path class="black-fill" path d="M748.62,604.5v-.72c0-55,44.28-99.62,103.91-99.62,59.28,0,103.2,43.92,103.2,98.91v.71c0,55-44.28,99.63-103.91,99.63C792.54,703.41,748.62,659.49,748.62,604.5Zm153.55,0v-.72c0-28.21-20.36-52.84-50.35-52.84-31.07,0-49.63,23.92-49.63,52.13v.71c0,28.21,20.35,52.85,50.34,52.85C883.6,656.63,902.17,632.71,902.17,604.5Z" transform="translate(-147.62 -433.46)"/>
<path class="black-fill" d="M995,507.73h54.27v27.14c12.5-16.07,28.57-30.71,56.06-30.71,41.06,0,65,27.14,65,71.06v123.9H1116V592.36c0-25.71-12.14-38.92-32.85-38.92s-33.92,13.21-33.92,38.92V699.12H995Z" transform="translate(-147.62 -433.46)"/>
<path class="black-fill" d="M1218.51,438.46h57.13v48.2h-57.13Zm1.43,69.27h54.28V699.12h-54.28Z" transform="translate(-147.62 -433.46)"/>
<path class="black-fill" d="M1316,604.5v-.72c0-54.63,41.77-99.62,100.33-99.62,36.07,0,58.56,12.14,76.42,32.14L1459.53,572c-12.14-12.85-24.28-21.06-43.56-21.06-27.14,0-46.42,23.92-46.42,52.13v.71c0,29.28,18.92,52.85,48.56,52.85,18.21,0,30.71-7.86,43.92-20.35l31.78,32.13c-18.57,20.36-40,35-78.2,35C1358.12,703.41,1316,659.13,1316,604.5Z" transform="translate(-147.62 -433.46)"/>
</g>
</g>
</svg>
<div class="scroll-down">Scroll down<div class="arrow"></div>
</section>
<!-- IDEALISTIC ///////////////////////////////////////////////////////////////-->
<section class="panel fillViewport " >
<!-- partial:index.partial.html -->
<svg version="1.1" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 997.7 248.77" style="enable-background:new 0 0 997.7 248.77;" xml:space="preserve">
<g id="idealistic">
<path class="idealistic_stroke plugin-stroke" d="M480.89,211.25h33.4V363.07h-33.4Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M543.57,305.17v-.44c0-38.82,25.38-60.08,52.92-60.08,17.57,0,28.41,8,36.22,17.35V204.75h33V363.07h-33v-16.7c-8,10.85-19.08,18.87-36.22,18.87C569.38,365.24,543.57,344,543.57,305.17Zm89.58,0v-.44c0-19.3-12.8-32.1-28.2-32.1s-28.41,12.58-28.41,32.1v.44c0,19.3,13,32.09,28.41,32.09S633.15,324.47,633.15,305.17Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" path d="M689.54,305.6v-.43c0-33.19,23.64-60.52,57.47-60.52,38.83,0,56.61,30.15,56.61,63.12,0,2.6-.22,5.64-.43,8.67h-80.9c3.25,15,13.66,22.78,28.41,22.78,11.06,0,19.09-3.47,28.2-11.93L797.76,344c-10.84,13.45-26.46,21.69-47.49,21.69C715.35,365.68,689.54,341.17,689.54,305.6Zm82-9.76c-1.95-14.75-10.63-24.73-24.51-24.73-13.66,0-22.55,9.76-25.16,24.73Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M821.19,329.67v-.43c0-25.38,19.3-37.09,46.85-37.09a82.59,82.59,0,0,1,28.41,4.77V295c0-13.66-8.46-21.25-24.94-21.25-12.58,0-21.47,2.38-32.1,6.29l-8.24-25.16c12.79-5.64,25.37-9.33,45.11-9.33,18,0,31,4.77,39.26,13,8.67,8.68,12.58,21.48,12.58,37.09v67.45H896.23V350.49c-8,8.9-19.08,14.75-35.13,14.75C839.19,365.24,821.19,352.66,821.19,329.67Zm75.69-7.59v-5.85a50.94,50.94,0,0,0-21-4.34c-14.1,0-22.78,5.64-22.78,16.05v.43c0,8.89,7.38,14.1,18,14.1C886.47,342.47,896.88,334,896.88,322.08Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M958.05,204.75h33V363.07h-33Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M1022.68,204.75h34.7V234h-34.7Zm.87,42.07h33V363.07h-33Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M1078.42,347.68l14.1-21.69c12.58,9.11,25.81,13.88,36.65,13.88,9.54,0,13.88-3.47,13.88-8.68v-.43c0-7.16-11.28-9.55-24.07-13.45-16.27-4.77-34.7-12.36-34.7-34.92V282c0-23.64,19.08-36.87,42.51-36.87a80.52,80.52,0,0,1,43.37,13.44l-12.58,22.78c-11.49-6.73-23-10.85-31.45-10.85-8,0-12.14,3.47-12.14,8v.43c0,6.51,11.06,9.54,23.64,13.88,16.27,5.42,35.14,13.23,35.14,34.49v.43c0,25.81-19.31,37.52-44.47,37.52A81.46,81.46,0,0,1,1078.42,347.68Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M1199.66,330.11V275h-13.88v-28.2h13.88V217.11h33v29.71H1260V275h-27.33v49.67c0,7.59,3.25,11.27,10.63,11.27a33.54,33.54,0,0,0,16.26-4.12V358.3c-6.94,4.12-15,6.73-26,6.73C1213.33,365,1199.66,357,1199.66,330.11Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M1284.9,204.75h34.7V234h-34.7Zm.87,42.07h33V363.07h-33Z" transform="translate(-461.15 -181.01)"/>
<path class="idealistic_stroke plugin-stroke" d="M1344.11,305.6v-.43c0-33.19,25.38-60.52,61-60.52,21.9,0,35.57,7.38,46.41,19.52l-20.17,21.69c-7.37-7.81-14.75-12.79-26.46-12.79-16.48,0-28.2,14.53-28.2,31.66v.44c0,17.78,11.5,32.09,29.5,32.09,11.06,0,18.65-4.77,26.68-12.36l19.3,19.52c-11.28,12.36-24.29,21.26-47.5,21.26C1369.7,365.68,1344.11,338.78,1344.11,305.6Z" transform="translate(-461.15 -181.01)"/>
</g>
<g id="idealistic_black">
<g>
<path class="black-fill" d="M480.89,211.25h33.4V363.07h-33.4Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M543.57,305.17v-.44c0-38.82,25.38-60.08,52.92-60.08,17.57,0,28.41,8,36.22,17.35V204.75h33V363.07h-33v-16.7c-8,10.85-19.08,18.87-36.22,18.87C569.38,365.24,543.57,344,543.57,305.17Zm89.58,0v-.44c0-19.3-12.8-32.1-28.2-32.1s-28.41,12.58-28.41,32.1v.44c0,19.3,13,32.09,28.41,32.09S633.15,324.47,633.15,305.17Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" path d="M689.54,305.6v-.43c0-33.19,23.64-60.52,57.47-60.52,38.83,0,56.61,30.15,56.61,63.12,0,2.6-.22,5.64-.43,8.67h-80.9c3.25,15,13.66,22.78,28.41,22.78,11.06,0,19.09-3.47,28.2-11.93L797.76,344c-10.84,13.45-26.46,21.69-47.49,21.69C715.35,365.68,689.54,341.17,689.54,305.6Zm82-9.76c-1.95-14.75-10.63-24.73-24.51-24.73-13.66,0-22.55,9.76-25.16,24.73Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M821.19,329.67v-.43c0-25.38,19.3-37.09,46.85-37.09a82.59,82.59,0,0,1,28.41,4.77V295c0-13.66-8.46-21.25-24.94-21.25-12.58,0-21.47,2.38-32.1,6.29l-8.24-25.16c12.79-5.64,25.37-9.33,45.11-9.33,18,0,31,4.77,39.26,13,8.67,8.68,12.58,21.48,12.58,37.09v67.45H896.23V350.49c-8,8.9-19.08,14.75-35.13,14.75C839.19,365.24,821.19,352.66,821.19,329.67Zm75.69-7.59v-5.85a50.94,50.94,0,0,0-21-4.34c-14.1,0-22.78,5.64-22.78,16.05v.43c0,8.89,7.38,14.1,18,14.1C886.47,342.47,896.88,334,896.88,322.08Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M958.05,204.75h33V363.07h-33Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M1022.68,204.75h34.7V234h-34.7Zm.87,42.07h33V363.07h-33Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M1078.42,347.68l14.1-21.69c12.58,9.11,25.81,13.88,36.65,13.88,9.54,0,13.88-3.47,13.88-8.68v-.43c0-7.16-11.28-9.55-24.07-13.45-16.27-4.77-34.7-12.36-34.7-34.92V282c0-23.64,19.08-36.87,42.51-36.87a80.52,80.52,0,0,1,43.37,13.44l-12.58,22.78c-11.49-6.73-23-10.85-31.45-10.85-8,0-12.14,3.47-12.14,8v.43c0,6.51,11.06,9.54,23.64,13.88,16.27,5.42,35.14,13.23,35.14,34.49v.43c0,25.81-19.31,37.52-44.47,37.52A81.46,81.46,0,0,1,1078.42,347.68Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M1199.66,330.11V275h-13.88v-28.2h13.88V217.11h33v29.71H1260V275h-27.33v49.67c0,7.59,3.25,11.27,10.63,11.27a33.54,33.54,0,0,0,16.26-4.12V358.3c-6.94,4.12-15,6.73-26,6.73C1213.33,365,1199.66,357,1199.66,330.11Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M1284.9,204.75h34.7V234h-34.7Zm.87,42.07h33V363.07h-33Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M1344.11,305.6v-.43c0-33.19,25.38-60.52,61-60.52,21.9,0,35.57,7.38,46.41,19.52l-20.17,21.69c-7.37-7.81-14.75-12.79-26.46-12.79-16.48,0-28.2,14.53-28.2,31.66v.44c0,17.78,11.5,32.09,29.5,32.09,11.06,0,18.65-4.77,26.68-12.36l19.3,19.52c-11.28,12.36-24.29,21.26-47.5,21.26C1369.7,365.68,1344.11,338.78,1344.11,305.6Z" transform="translate(-461.15 -181.01)"/>
</g>
</g>
</svg>
</section>
<!-- INSPIRING ///////////////////////////////////////////////////////////////-->
<section class="panel fillViewport " >
<!-- partial:index.partial.html -->
<svg version="1.1" id="svg3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 997.7 248.77" style="enable-background:new 0 0 997.7 248.77;" xml:space="preserve">
<g id="inspiring">
<path class="inspiring_stroke plugin-stroke" d="M480.89,211.25h33.4V363.07h-33.4Z" transform="translate(-461.15 -181.01)"/>
<path class="inspiring_stroke plugin-stroke" d="M564.39,248.33h33v16.48c7.59-9.76,17.35-18.65,34-18.65,24.94,0,39.48,16.49,39.48,43.16v75.26h-33V299.73c0-15.61-7.38-23.64-19.95-23.64s-20.61,8-20.61,23.64v64.85h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="inspiring_stroke plugin-stroke" path d="M690.41,349.18,704.5,327.5c12.58,9.1,25.81,13.88,36.66,13.88,9.54,0,13.88-3.47,13.88-8.68v-.43c0-7.16-11.28-9.55-24.08-13.45-16.26-4.77-34.7-12.36-34.7-34.92v-.43c0-23.64,19.09-36.87,42.51-36.87A80.44,80.44,0,0,1,782.15,260l-12.58,22.78c-11.49-6.73-23-10.85-31.45-10.85-8,0-12.14,3.47-12.14,8v.43c0,6.51,11.06,9.54,23.64,13.88,16.26,5.42,35.13,13.23,35.13,34.49v.43c0,25.81-19.3,37.52-44.46,37.52A81.39,81.39,0,0,1,690.41,349.18Z" transform="translate(-476.77 -178.72)"/>
<path class="inspiring_stroke plugin-stroke" d="M808.4,248.33h33V265c8-10.84,19.09-18.87,36.22-18.87,27.11,0,52.92,21.26,52.92,60.08v.43c0,38.83-25.37,60.08-52.92,60.08-17.56,0-28.41-8-36.22-17.35v49.89h-33Zm89.14,58.34v-.43c0-19.3-13-32.1-28.42-32.1s-28.19,12.8-28.19,32.1v.43c0,19.31,12.8,32.1,28.19,32.1S897.54,326.19,897.54,306.67Z" transform="translate(-476.77 -178.72)"/>
<path class="inspiring_stroke plugin-stroke" d="M955.45,206.25h34.7v29.28h-34.7Zm.87,42.08h33V364.58h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="inspiring_stroke plugin-stroke" d="M1020.3,248.33h33v23.42c6.73-16,17.57-26.46,37.09-25.59v34.49h-1.73c-21.91,0-35.36,13.23-35.36,41v42.94h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="inspiring_stroke plugin-stroke" d="M1111.61,206.25h34.7v29.28h-34.7Zm.87,42.08h33V364.58h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="inspiring_stroke plugin-stroke" d="M1176.46,248.33h33v16.48c7.6-9.76,17.36-18.65,34.06-18.65,24.94,0,39.47,16.49,39.47,43.16v75.26h-33V299.73c0-15.61-7.37-23.64-20-23.64s-20.61,8-20.61,23.64v64.85h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="inspiring_stroke plugin-stroke" d="M1312.23,387.57l11.28-24.72c11.93,6.72,23.86,10.63,39.25,10.63,22.56,0,33.19-10.85,33.19-31.67v-5.64c-9.76,11.71-20.39,18.87-38,18.87-27.11,0-51.62-19.74-51.62-54.22v-.44c0-34.7,25-54.22,51.62-54.22,18,0,28.63,7.59,37.52,17.35V248.33h33v90c0,20.82-5,36-14.75,45.76-10.84,10.85-27.54,15.62-50.1,15.62C1344.76,399.72,1327,395.38,1312.23,387.57ZM1396,300.82v-.44c0-15.83-12.37-26.89-28.41-26.89s-28.2,11.06-28.2,26.89v.44c0,16.05,12.15,26.89,28.2,26.89S1396,316.65,1396,300.82Z" transform="translate(-476.77 -178.72)"/>
</g>
<g id="inspiring_black">
<g>
<path class="black-fill" d="M480.89,211.25h33.4V363.07h-33.4Z" transform="translate(-461.15 -181.01)"/>
<path class="black-fill" d="M564.39,248.33h33v16.48c7.59-9.76,17.35-18.65,34-18.65,24.94,0,39.48,16.49,39.48,43.16v75.26h-33V299.73c0-15.61-7.38-23.64-19.95-23.64s-20.61,8-20.61,23.64v64.85h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="black-fill" path d="M690.41,349.18,704.5,327.5c12.58,9.1,25.81,13.88,36.66,13.88,9.54,0,13.88-3.47,13.88-8.68v-.43c0-7.16-11.28-9.55-24.08-13.45-16.26-4.77-34.7-12.36-34.7-34.92v-.43c0-23.64,19.09-36.87,42.51-36.87A80.44,80.44,0,0,1,782.15,260l-12.58,22.78c-11.49-6.73-23-10.85-31.45-10.85-8,0-12.14,3.47-12.14,8v.43c0,6.51,11.06,9.54,23.64,13.88,16.26,5.42,35.13,13.23,35.13,34.49v.43c0,25.81-19.3,37.52-44.46,37.52A81.39,81.39,0,0,1,690.41,349.18Z" transform="translate(-476.77 -178.72)"/>
<path class="black-fill" d="M808.4,248.33h33V265c8-10.84,19.09-18.87,36.22-18.87,27.11,0,52.92,21.26,52.92,60.08v.43c0,38.83-25.37,60.08-52.92,60.08-17.56,0-28.41-8-36.22-17.35v49.89h-33Zm89.14,58.34v-.43c0-19.3-13-32.1-28.42-32.1s-28.19,12.8-28.19,32.1v.43c0,19.31,12.8,32.1,28.19,32.1S897.54,326.19,897.54,306.67Z" transform="translate(-476.77 -178.72)"/>
<path class="black-fill" d="M955.45,206.25h34.7v29.28h-34.7Zm.87,42.08h33V364.58h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="black-fill" d="M1020.3,248.33h33v23.42c6.73-16,17.57-26.46,37.09-25.59v34.49h-1.73c-21.91,0-35.36,13.23-35.36,41v42.94h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="black-fill" d="M1111.61,206.25h34.7v29.28h-34.7Zm.87,42.08h33V364.58h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="black-fill" d="M1176.46,248.33h33v16.48c7.6-9.76,17.36-18.65,34.06-18.65,24.94,0,39.47,16.49,39.47,43.16v75.26h-33V299.73c0-15.61-7.37-23.64-20-23.64s-20.61,8-20.61,23.64v64.85h-33Z" transform="translate(-476.77 -178.72)"/>
<path class="black-fill" d="M1312.23,387.57l11.28-24.72c11.93,6.72,23.86,10.63,39.25,10.63,22.56,0,33.19-10.85,33.19-31.67v-5.64c-9.76,11.71-20.39,18.87-38,18.87-27.11,0-51.62-19.74-51.62-54.22v-.44c0-34.7,25-54.22,51.62-54.22,18,0,28.63,7.59,37.52,17.35V248.33h33v90c0,20.82-5,36-14.75,45.76-10.84,10.85-27.54,15.62-50.1,15.62C1344.76,399.72,1327,395.38,1312.23,387.57ZM1396,300.82v-.44c0-15.83-12.37-26.89-28.41-26.89s-28.2,11.06-28.2,26.89v.44c0,16.05,12.15,26.89,28.2,26.89S1396,316.65,1396,300.82Z" transform="translate(-476.77 -178.72)"/>
</g>
</g>
</svg>
</section>
<!-- INCLUSIVE ///////////////////////////////////////////////////////////////-->
<section class="panel fillViewport " >
<!-- partial:index.partial.html -->
<svg version="1.1" id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 963.43 248.77" style="enable-background:new 0 0 963.43 248.77;" xml:space="preserve">
<g id="inclusive">
<path class="inclusive_stroke plugin-stroke" d="M498,211.25h33.4V363.07H498Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" d="M565.91,246.82h33v16.49c7.59-9.76,17.35-18.66,34-18.66,24.94,0,39.47,16.49,39.47,43.16v75.26h-33V298.22c0-15.61-7.38-23.64-20-23.64s-20.6,8-20.6,23.64v64.85h-33Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" path d="M695.39,305.6v-.43c0-33.19,25.38-60.52,61-60.52,21.91,0,35.57,7.38,46.41,19.52l-20.17,21.69c-7.37-7.81-14.75-12.79-26.46-12.79-16.48,0-28.19,14.53-28.19,31.66v.44c0,17.78,11.49,32.09,29.49,32.09,11.07,0,18.66-4.77,26.68-12.36l19.3,19.52c-11.27,12.36-24.29,21.26-47.49,21.26C721,365.68,695.39,338.78,695.39,305.6Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" d="M826.4,204.75h33V363.07h-33Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" d="M889.51,322.08V246.82h33v64.85c0,15.62,7.37,23.64,19.95,23.64s20.61-8,20.61-23.64V246.82h33V363.07H963V346.59c-7.6,9.76-17.35,18.65-34.06,18.65C904,365.24,889.51,348.76,889.51,322.08Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" d="M1016.39,347.68l14.1-21.69c12.58,9.11,25.81,13.88,36.65,13.88,9.55,0,13.88-3.47,13.88-8.68v-.43c0-7.16-11.27-9.55-24.07-13.45-16.27-4.77-34.7-12.36-34.7-34.92V282c0-23.64,19.08-36.87,42.51-36.87a80.52,80.52,0,0,1,43.37,13.44l-12.58,22.78c-11.49-6.73-23-10.85-31.44-10.85-8,0-12.15,3.47-12.15,8v.43c0,6.51,11.06,9.54,23.64,13.88,16.27,5.42,35.14,13.23,35.14,34.49v.43c0,25.81-19.31,37.52-44.46,37.52A81.47,81.47,0,0,1,1016.39,347.68Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" d="M1135,204.75h34.7V234H1135Zm.87,42.07h33V363.07h-33Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" d="M1189.47,246.82h34.92l26,77.87,26.24-77.87h34.27l-45.77,117.12h-29.93Z" transform="translate(-478.29 -178.72)"/>
<path class="inclusive_stroke plugin-stroke" d="M1317.87,305.6v-.43c0-33.19,23.64-60.52,57.47-60.52,38.83,0,56.61,30.15,56.61,63.12,0,2.6-.21,5.64-.43,8.67h-80.9c3.25,15,13.66,22.78,28.41,22.78,11.06,0,19.09-3.47,28.2-11.93L1426.1,344c-10.85,13.45-26.46,21.69-47.5,21.69C1343.68,365.68,1317.87,341.17,1317.87,305.6Zm82-9.76c-1.95-14.75-10.62-24.73-24.51-24.73-13.66,0-22.55,9.76-25.15,24.73Z" transform="translate(-478.29 -178.72)"/>
</g>
<g id="inclusive_black">
<g>
<path class="black-fill" d="M498,211.25h33.4V363.07H498Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" d="M565.91,246.82h33v16.49c7.59-9.76,17.35-18.66,34-18.66,24.94,0,39.47,16.49,39.47,43.16v75.26h-33V298.22c0-15.61-7.38-23.64-20-23.64s-20.6,8-20.6,23.64v64.85h-33Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" path d="M695.39,305.6v-.43c0-33.19,25.38-60.52,61-60.52,21.91,0,35.57,7.38,46.41,19.52l-20.17,21.69c-7.37-7.81-14.75-12.79-26.46-12.79-16.48,0-28.19,14.53-28.19,31.66v.44c0,17.78,11.49,32.09,29.49,32.09,11.07,0,18.66-4.77,26.68-12.36l19.3,19.52c-11.27,12.36-24.29,21.26-47.49,21.26C721,365.68,695.39,338.78,695.39,305.6Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" d="M826.4,204.75h33V363.07h-33Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" d="M889.51,322.08V246.82h33v64.85c0,15.62,7.37,23.64,19.95,23.64s20.61-8,20.61-23.64V246.82h33V363.07H963V346.59c-7.6,9.76-17.35,18.65-34.06,18.65C904,365.24,889.51,348.76,889.51,322.08Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" d="M1016.39,347.68l14.1-21.69c12.58,9.11,25.81,13.88,36.65,13.88,9.55,0,13.88-3.47,13.88-8.68v-.43c0-7.16-11.27-9.55-24.07-13.45-16.27-4.77-34.7-12.36-34.7-34.92V282c0-23.64,19.08-36.87,42.51-36.87a80.52,80.52,0,0,1,43.37,13.44l-12.58,22.78c-11.49-6.73-23-10.85-31.44-10.85-8,0-12.15,3.47-12.15,8v.43c0,6.51,11.06,9.54,23.64,13.88,16.27,5.42,35.14,13.23,35.14,34.49v.43c0,25.81-19.31,37.52-44.46,37.52A81.47,81.47,0,0,1,1016.39,347.68Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" d="M1135,204.75h34.7V234H1135Zm.87,42.07h33V363.07h-33Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" d="M1189.47,246.82h34.92l26,77.87,26.24-77.87h34.27l-45.77,117.12h-29.93Z" transform="translate(-478.29 -178.72)"/>
<path class="black-fill" d="M1317.87,305.6v-.43c0-33.19,23.64-60.52,57.47-60.52,38.83,0,56.61,30.15,56.61,63.12,0,2.6-.21,5.64-.43,8.67h-80.9c3.25,15,13.66,22.78,28.41,22.78,11.06,0,19.09-3.47,28.2-11.93L1426.1,344c-10.85,13.45-26.46,21.69-47.5,21.69C1343.68,365.68,1317.87,341.17,1317.87,305.6Zm82-9.76c-1.95-14.75-10.62-24.73-24.51-24.73-13.66,0-22.55,9.76-25.15,24.73Z" transform="translate(-478.29 -178.72)"/>
</g>
</g>
</svg>
</section>
<!-- IMAGINATIVE ///////////////////////////////////////////////////////////////-->
<section class="panel fillViewport " >
<!-- partial:index.partial.html -->
<svg version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1293.75 248.77" style="enable-background:new 0 0 1293.75 248.77;" xml:space="preserve">
<g id="imaginative">
<path class="imaginative_stroke plugin-stroke" d="M332.86,211.25h33.4V363.07h-33.4Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M400.75,246.82h33v16.49c7.6-9.76,17.57-18.66,34.27-18.66,15.18,0,26.68,6.73,32.75,18.44,10.2-11.93,22.34-18.44,38.17-18.44,24.51,0,39.26,14.75,39.26,42.73v75.69h-33V298.22c0-15.61-6.94-23.64-19.3-23.64s-19.95,8-19.95,23.64v64.85H473V298.22c0-15.61-6.94-23.64-19.3-23.64s-20,8-20,23.64v64.85h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M599.86,329.67v-.43c0-25.38,19.3-37.09,46.84-37.09a82.65,82.65,0,0,1,28.42,4.77V295c0-13.66-8.46-21.25-25-21.25-12.58,0-21.47,2.38-32.1,6.29l-8.24-25.16c12.8-5.64,25.38-9.33,45.11-9.33,18,0,31,4.77,39.26,13,8.68,8.68,12.58,21.48,12.58,37.09v67.45H674.9V350.49c-8,8.9-19.09,14.75-35.14,14.75C617.86,365.24,599.86,352.66,599.86,329.67Zm75.69-7.59v-5.85a51,51,0,0,0-21-4.34c-14.1,0-22.77,5.64-22.77,16.05v.43c0,8.89,7.37,14.1,18,14.1C665.14,342.47,675.55,334,675.55,322.08Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M735.85,386.06l11.27-24.72C759.05,368.06,771,372,786.38,372c22.56,0,33.19-10.85,33.19-31.67v-5.64c-9.76,11.71-20.39,18.87-38,18.87-27.11,0-51.62-19.74-51.62-54.22v-.43c0-34.71,24.94-54.23,51.62-54.23,18,0,28.63,7.59,37.52,17.35V246.82h33v90c0,20.82-5,36-14.75,45.76-10.84,10.85-27.54,15.62-50.1,15.62C768.38,398.21,750.59,393.87,735.85,386.06Zm83.72-86.75v-.43c0-15.84-12.37-26.9-28.42-26.9S763,283,763,298.88v.43c0,16.05,12.14,26.89,28.19,26.89S819.57,315.14,819.57,299.31Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M882.25,204.75H917V234h-34.7Zm.86,42.07h33V363.07h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M947.1,246.82h33v16.49c7.59-9.76,17.35-18.66,34.05-18.66,24.95,0,39.48,16.49,39.48,43.16v75.26h-33V298.22c0-15.61-7.37-23.64-20-23.64s-20.61,8-20.61,23.64v64.85h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M1075.28,329.67v-.43c0-25.38,19.3-37.09,46.84-37.09a82.65,82.65,0,0,1,28.42,4.77V295c0-13.66-8.46-21.25-24.94-21.25-12.58,0-21.48,2.38-32.1,6.29l-8.25-25.16c12.8-5.64,25.38-9.33,45.12-9.33,18,0,31,4.77,39.25,13,8.68,8.68,12.58,21.48,12.58,37.09v67.45h-31.88V350.49c-8,8.9-19.09,14.75-35.14,14.75C1093.28,365.24,1075.28,352.66,1075.28,329.67Zm75.69-7.59v-5.85a51,51,0,0,0-21-4.34c-14.09,0-22.77,5.64-22.77,16.05v.43c0,8.89,7.37,14.1,18,14.1C1140.56,342.47,1151,334,1151,322.08Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M1215,330.11V275h-13.88v-28.2H1215V217.11h33v29.71h27.33V275h-27.33v49.67c0,7.59,3.26,11.27,10.63,11.27a33.57,33.57,0,0,0,16.27-4.12V358.3c-6.94,4.12-15,6.73-26,6.73C1228.62,365,1215,357,1215,330.11Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M1300.2,204.75h34.7V234h-34.7Zm.86,42.07h33V363.07h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M1354.63,246.82h34.92l26,77.87,26.24-77.87h34.27l-45.76,117.12H1400.4Z" transform="translate(-313.12 -178.72)"/>
<path class="imaginative_stroke plugin-stroke" d="M1483,305.6v-.43c0-33.19,23.64-60.52,57.48-60.52,38.82,0,56.61,30.15,56.61,63.12,0,2.6-.22,5.64-.44,8.67h-80.9c3.26,15,13.67,22.78,28.42,22.78,11.06,0,19.08-3.47,28.19-11.93l18.87,16.7c-10.84,13.45-26.46,21.69-47.5,21.69C1508.84,365.68,1483,341.17,1483,305.6Zm82-9.76c-2-14.75-10.63-24.73-24.51-24.73-13.67,0-22.56,9.76-25.16,24.73Z" transform="translate(-313.12 -178.72)"/>
</g>
<g id="imaginative_black">
<g>
<path class="black-fill" d="M332.86,211.25h33.4V363.07h-33.4Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M400.75,246.82h33v16.49c7.6-9.76,17.57-18.66,34.27-18.66,15.18,0,26.68,6.73,32.75,18.44,10.2-11.93,22.34-18.44,38.17-18.44,24.51,0,39.26,14.75,39.26,42.73v75.69h-33V298.22c0-15.61-6.94-23.64-19.3-23.64s-19.95,8-19.95,23.64v64.85H473V298.22c0-15.61-6.94-23.64-19.3-23.64s-20,8-20,23.64v64.85h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M599.86,329.67v-.43c0-25.38,19.3-37.09,46.84-37.09a82.65,82.65,0,0,1,28.42,4.77V295c0-13.66-8.46-21.25-25-21.25-12.58,0-21.47,2.38-32.1,6.29l-8.24-25.16c12.8-5.64,25.38-9.33,45.11-9.33,18,0,31,4.77,39.26,13,8.68,8.68,12.58,21.48,12.58,37.09v67.45H674.9V350.49c-8,8.9-19.09,14.75-35.14,14.75C617.86,365.24,599.86,352.66,599.86,329.67Zm75.69-7.59v-5.85a51,51,0,0,0-21-4.34c-14.1,0-22.77,5.64-22.77,16.05v.43c0,8.89,7.37,14.1,18,14.1C665.14,342.47,675.55,334,675.55,322.08Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M735.85,386.06l11.27-24.72C759.05,368.06,771,372,786.38,372c22.56,0,33.19-10.85,33.19-31.67v-5.64c-9.76,11.71-20.39,18.87-38,18.87-27.11,0-51.62-19.74-51.62-54.22v-.43c0-34.71,24.94-54.23,51.62-54.23,18,0,28.63,7.59,37.52,17.35V246.82h33v90c0,20.82-5,36-14.75,45.76-10.84,10.85-27.54,15.62-50.1,15.62C768.38,398.21,750.59,393.87,735.85,386.06Zm83.72-86.75v-.43c0-15.84-12.37-26.9-28.42-26.9S763,283,763,298.88v.43c0,16.05,12.14,26.89,28.19,26.89S819.57,315.14,819.57,299.31Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M882.25,204.75H917V234h-34.7Zm.86,42.07h33V363.07h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M947.1,246.82h33v16.49c7.59-9.76,17.35-18.66,34.05-18.66,24.95,0,39.48,16.49,39.48,43.16v75.26h-33V298.22c0-15.61-7.37-23.64-20-23.64s-20.61,8-20.61,23.64v64.85h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M1075.28,329.67v-.43c0-25.38,19.3-37.09,46.84-37.09a82.65,82.65,0,0,1,28.42,4.77V295c0-13.66-8.46-21.25-24.94-21.25-12.58,0-21.48,2.38-32.1,6.29l-8.25-25.16c12.8-5.64,25.38-9.33,45.12-9.33,18,0,31,4.77,39.25,13,8.68,8.68,12.58,21.48,12.58,37.09v67.45h-31.88V350.49c-8,8.9-19.09,14.75-35.14,14.75C1093.28,365.24,1075.28,352.66,1075.28,329.67Zm75.69-7.59v-5.85a51,51,0,0,0-21-4.34c-14.09,0-22.77,5.64-22.77,16.05v.43c0,8.89,7.37,14.1,18,14.1C1140.56,342.47,1151,334,1151,322.08Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M1215,330.11V275h-13.88v-28.2H1215V217.11h33v29.71h27.33V275h-27.33v49.67c0,7.59,3.26,11.27,10.63,11.27a33.57,33.57,0,0,0,16.27-4.12V358.3c-6.94,4.12-15,6.73-26,6.73C1228.62,365,1215,357,1215,330.11Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M1300.2,204.75h34.7V234h-34.7Zm.86,42.07h33V363.07h-33Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M1354.63,246.82h34.92l26,77.87,26.24-77.87h34.27l-45.76,117.12H1400.4Z" transform="translate(-313.12 -178.72)"/>
<path class="black-fill" d="M1483,305.6v-.43c0-33.19,23.64-60.52,57.48-60.52,38.82,0,56.61,30.15,56.61,63.12,0,2.6-.22,5.64-.44,8.67h-80.9c3.26,15,13.67,22.78,28.42,22.78,11.06,0,19.08-3.47,28.19-11.93l18.87,16.7c-10.84,13.45-26.46,21.69-47.5,21.69C1508.84,365.68,1483,341.17,1483,305.6Zm82-9.76c-2-14.75-10.63-24.73-24.51-24.73-13.67,0-22.56,9.76-25.16,24.73Z" transform="translate(-313.12 -178.72)"/>
</g>
</g>
</svg>
</section>
<!-- IMPORTANT ///////////////////////////////////////////////////////////////-->
<section class="panel fillViewport " >
<!-- partial:index.partial.html -->
<svg version="1.1" id="svg6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1103.54 248.77" style="enable-background:new 0 0 1103.54 248.77;" xml:space="preserve">
<g id="important">
<path class="important_stroke plugin-stroke" d="M428,210.31h33.4V362.13H428Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M495.85,245.88h33v16.48c7.59-9.76,17.57-18.65,34.27-18.65,15.18,0,26.68,6.72,32.75,18.44C606,250.22,618.18,243.71,634,243.71c24.51,0,39.26,14.75,39.26,42.73v75.69h-33V297.28c0-15.61-6.94-23.64-19.3-23.64s-20,8-20,23.64v64.85h-33V297.28c0-15.61-6.94-23.64-19.31-23.64s-19.95,8-19.95,23.64v64.85h-33Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M701.9,245.88h33v16.7c8-10.85,19.09-18.87,36.22-18.87C798.2,243.71,824,265,824,303.79v.43c0,38.82-25.38,60.08-52.92,60.08-17.57,0-28.41-8-36.22-17.35v49.88h-33ZM791,304.22v-.43c0-19.31-13-32.1-28.41-32.1s-28.19,12.79-28.19,32.1v.43c0,19.3,12.79,32.1,28.19,32.1S791,323.74,791,304.22Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M842.66,304.66v-.44c0-33.4,26.9-60.51,63.12-60.51,36,0,62.68,26.68,62.68,60.08v.43c0,33.4-26.9,60.51-63.12,60.51C869.34,364.73,842.66,338.06,842.66,304.66Zm93.27,0v-.44c0-17.13-12.37-32.1-30.59-32.1-18.86,0-30.14,14.53-30.14,31.67v.43c0,17.14,12.36,32.1,30.58,32.1C924.65,336.32,935.93,321.79,935.93,304.66Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M992.32,245.88h33V269.3c6.73-16.05,17.57-26.46,37.09-25.59v34.48h-1.73c-21.91,0-35.36,13.23-35.36,41v42.94h-33Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M1088.4,329.16V274.07h-13.88V245.88h13.88V216.17h33v29.71h27.33v28.19h-27.33v49.67c0,7.59,3.25,11.28,10.63,11.28a33.54,33.54,0,0,0,16.26-4.12v26.46c-6.94,4.12-15,6.72-26,6.72C1102.07,364.08,1088.4,356.06,1088.4,329.16Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M1166.05,328.73v-.43c0-25.38,19.3-37.09,46.85-37.09a82.59,82.59,0,0,1,28.41,4.77v-2c0-13.67-8.46-21.26-24.94-21.26-12.58,0-21.48,2.39-32.1,6.29L1176,253.9c12.8-5.64,25.38-9.32,45.12-9.32,18,0,31,4.77,39.25,13,8.68,8.68,12.58,21.47,12.58,37.09v67.45h-31.88V349.55c-8,8.89-19.09,14.75-35.13,14.75C1184.05,364.3,1166.05,351.72,1166.05,328.73Zm75.69-7.59v-5.86a51.16,51.16,0,0,0-21-4.33c-14.09,0-22.77,5.63-22.77,16.05v.43c0,8.89,7.37,14.1,18,14.1C1231.33,341.53,1241.74,333.07,1241.74,321.14Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M1301.39,245.88h33v16.48c7.59-9.76,17.35-18.65,34.05-18.65,24.94,0,39.47,16.48,39.47,43.16v75.26h-33V297.28c0-15.61-7.37-23.64-20-23.64s-20.6,8-20.6,23.64v64.85h-33Z" transform="translate(-408.23 -177.77)"/>
<path class="important_stroke plugin-stroke" d="M1441.93,329.16V274.07h-13.88V245.88h13.88V216.17h33v29.71h27.33v28.19H1474.9v49.67c0,7.59,3.25,11.28,10.63,11.28a33.54,33.54,0,0,0,16.26-4.12v26.46c-6.94,4.12-15,6.72-26,6.72C1455.6,364.08,1441.93,356.06,1441.93,329.16Z" transform="translate(-408.23 -177.77)"/>
</g>
<g id="important_black">
<g>
<path class="black-fill" d="M428,210.31h33.4V362.13H428Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M495.85,245.88h33v16.48c7.59-9.76,17.57-18.65,34.27-18.65,15.18,0,26.68,6.72,32.75,18.44C606,250.22,618.18,243.71,634,243.71c24.51,0,39.26,14.75,39.26,42.73v75.69h-33V297.28c0-15.61-6.94-23.64-19.3-23.64s-20,8-20,23.64v64.85h-33V297.28c0-15.61-6.94-23.64-19.31-23.64s-19.95,8-19.95,23.64v64.85h-33Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M701.9,245.88h33v16.7c8-10.85,19.09-18.87,36.22-18.87C798.2,243.71,824,265,824,303.79v.43c0,38.82-25.38,60.08-52.92,60.08-17.57,0-28.41-8-36.22-17.35v49.88h-33ZM791,304.22v-.43c0-19.31-13-32.1-28.41-32.1s-28.19,12.79-28.19,32.1v.43c0,19.3,12.79,32.1,28.19,32.1S791,323.74,791,304.22Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M842.66,304.66v-.44c0-33.4,26.9-60.51,63.12-60.51,36,0,62.68,26.68,62.68,60.08v.43c0,33.4-26.9,60.51-63.12,60.51C869.34,364.73,842.66,338.06,842.66,304.66Zm93.27,0v-.44c0-17.13-12.37-32.1-30.59-32.1-18.86,0-30.14,14.53-30.14,31.67v.43c0,17.14,12.36,32.1,30.58,32.1C924.65,336.32,935.93,321.79,935.93,304.66Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M992.32,245.88h33V269.3c6.73-16.05,17.57-26.46,37.09-25.59v34.48h-1.73c-21.91,0-35.36,13.23-35.36,41v42.94h-33Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M1088.4,329.16V274.07h-13.88V245.88h13.88V216.17h33v29.71h27.33v28.19h-27.33v49.67c0,7.59,3.25,11.28,10.63,11.28a33.54,33.54,0,0,0,16.26-4.12v26.46c-6.94,4.12-15,6.72-26,6.72C1102.07,364.08,1088.4,356.06,1088.4,329.16Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M1166.05,328.73v-.43c0-25.38,19.3-37.09,46.85-37.09a82.59,82.59,0,0,1,28.41,4.77v-2c0-13.67-8.46-21.26-24.94-21.26-12.58,0-21.48,2.39-32.1,6.29L1176,253.9c12.8-5.64,25.38-9.32,45.12-9.32,18,0,31,4.77,39.25,13,8.68,8.68,12.58,21.47,12.58,37.09v67.45h-31.88V349.55c-8,8.89-19.09,14.75-35.13,14.75C1184.05,364.3,1166.05,351.72,1166.05,328.73Zm75.69-7.59v-5.86a51.16,51.16,0,0,0-21-4.33c-14.09,0-22.77,5.63-22.77,16.05v.43c0,8.89,7.37,14.1,18,14.1C1231.33,341.53,1241.74,333.07,1241.74,321.14Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M1301.39,245.88h33v16.48c7.59-9.76,17.35-18.65,34.05-18.65,24.94,0,39.47,16.48,39.47,43.16v75.26h-33V297.28c0-15.61-7.37-23.64-20-23.64s-20.6,8-20.6,23.64v64.85h-33Z" transform="translate(-408.23 -177.77)"/>
<path class="black-fill" d="M1441.93,329.16V274.07h-13.88V245.88h13.88V216.17h33v29.71h27.33v28.19H1474.9v49.67c0,7.59,3.25,11.28,10.63,11.28a33.54,33.54,0,0,0,16.26-4.12v26.46c-6.94,4.12-15,6.72-26,6.72C1455.6,364.08,1441.93,356.06,1441.93,329.16Z" transform="translate(-408.23 -177.77)"/>
</g>
</g>
</svg>
</section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/jquery.ui.touch-punch.js'></script><script src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/ScrollTrigger.min.js'></script><script src="./script.js"></script>
</body>
</html>
body {
background-color: white;
text-align: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.panel{
height: 400px;
width: 100%;
background-color: #ffffff;
}
.panel svg {
height: 100%;
}
#firstload{
z-index: -1;
}
#icon, #icon_black,
#iconic, #iconic_black,
#idealistic, #idealistic_black,
#inspiring, #inspiring_black,
#inclusive, #inclusive_black,
#imaginative, #imaginative_black,
#important, #important_black {
visibility: hidden;
text-align: center;
}
.black-fill{
fill:#000000;
}
.plugin-stroke {
fill:none;
stroke:#000000;
stroke-width:4;
stroke-linecap:square;
stroke-linejoin:round;
}
.fillViewport {
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */
text-align: center;
width: 80%;
height: 100vh; /* if you don't want it to take up the full screen, reduce this number */
overflow: hidden;
}
/* SCROLL DOWN */
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
color: black;
font-weight: 400;
text-transform: uppercase;
font-size: 16px;
overflow: visible;
}
.scroll-down .arrow {
position: relative;
top: -4px;
margin: 0 auto;
width: 20px;
height: 20px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);
background-size: contain;
}//we set visibility:hidden in the CSS to avoid an initial flash - make them visible now, but the from() tweens are going to essentially hide them anyway because their stroke position/length will be 0.
gsap.set(".plugin-stroke", {visibility:"visible"});
gsap.registerPlugin(ScrollTrigger);
//SCROLL DOWN ANIMATION
//==============================================================
gsap.to(".arrow", {y: 12, ease: "power1.inOut", repeat: -1, yoyo: true});
//SNAP PER WINDOW
//==============================================================
gsap.utils.toArray(".panel").forEach((panel, i) => {
ScrollTrigger.create({
trigger: panel,
start: "top top",
end: "+=10px",
pin: true,
// pinSpacing: false
});
});
ScrollTrigger.create({
snap: 1 / 7 // snap whole page to the closest section!
});
//Iconic Animation
//=========================================================================================
// var t1 = gsap.timeline();
var t1 = gsap.timeline({
scrollTrigger: {
trigger:".icon-stroke",
markers: false ,
// start:"20px 10%",
// end:"bottom 80%",
toggleActions:"restart complete restart reset"
}}
);
t1.from(".icon-stroke", { duration: 2, drawSVG:0, ease:"power1.inOut"})
.to("#icon_black", 1, {autoAlpha:1, ease:"none" })
//IDEALISTIC ANIMATION
//==========================================================================================
var t2 = gsap.timeline({
scrollTrigger: {
trigger:".idealistic_stroke",
// markers: true,
// start:"top top",
// end:"bottom 80%",
toggleActions:"restart complete reverse reset"
}}
);
t2.from(".idealistic_stroke", { duration: 2, drawSVG:0, ease:"power1.inOut"})
.to("#idealistic_black", 1, {autoAlpha:1, ease:"none"})
//INSPIRING ANIMATION
//=========================================================================================
var t3 = gsap.timeline(
{scrollTrigger:{
trigger:".inspiring_stroke",
// markers: false,
toggleActions:"restart complete reverse reset"
}}
);
t3.from(".inspiring_stroke", { duration: 2, drawSVG:0, ease:"power1.inOut"})
.to("#inspiring_black", 1, {autoAlpha:1, ease:"none"})
//INCLUSIVE ANIMATION
//=========================================================================================
var t4 = gsap.timeline(
{scrollTrigger:{
trigger:".inclusive_stroke",
// markers: false,
toggleActions:"restart complete reverse reset"
}}
);
t4.from(".inclusive_stroke", { duration: 2, drawSVG:0, ease:"power1.inOut"})
.to("#inclusive_black", 1, {autoAlpha:1, ease:"none"})
//IMAGINATIVE ANIMATION
//=========================================================================================
var t5 = gsap.timeline(
{scrollTrigger:{
trigger:".imaginative_stroke",
// markers: false,
toggleActions:"restart complete reverse reset"
}}
);
t5.from(".imaginative_stroke", { duration: 2, drawSVG:0, ease:"power1.inOut"})
.to("#imaginative_black", 1, {autoAlpha:1, ease:"none"})
//IMPORTANT ANIMATION
//=========================================================================================
var t5 = gsap.timeline(
{scrollTrigger:{
trigger:".important_stroke",
// markers: false,
toggleActions:"restart complete reverse reset"
}}
);
t5.from(".important_stroke", { duration: 2, drawSVG:0, ease:"power1.inOut"})
.to("#important_black", 1, {autoAlpha:1, ease:"none"})
// gsap.render(); //lazy rendering (a performance optimization) can cause the initial render to be delayed by 1 tick, causing the logo to be visible for a brief moment, so we force a render here immediately. Another option would be to set lazy:false on the tween(s), but this is easier/faster.
External CSS
This Pen doesn't use any external CSS resources.