<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="animate.css">
  <script src="script.js" defer></script>
  <title>Landing Css Animation</title>
</head>
<body>
  <header class="container container--header">
    <nav class="nav">
      <a class="nav__logo" href="#!" data-animation="kf-fade-in">
        <img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJM%0D%0ASUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3Mv%0D%0AU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMb2dvIiB4bWxu%0D%0Acz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3Lncz%0D%0ALm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjQ1cHgiIGhlaWdodD0i%0D%0AMTEwcHgiIHZpZXdCb3g9IjAuNzUgLTAuMjUgMjQ1IDExMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5l%0D%0AdyAwLjc1IC0wLjI1IDI0NSAxMTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxw%0D%0AYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNDAuODM4LDU1LjQwNmMtMC4wNzksMC40NDEtMC4xOTIs%0D%0AMC44OC0wLjIzMiwxLjMyNWMtMC40NSw1LjA2OC0yLjI4Niw5LjQ5OS02LjAyMywxMy4wNDEKCQkJ%0D%0AYy0yLjU4NCwyLjQ0OC01LjY4NSwzLjk1MS05LjExNyw0Ljc2MmMtNC4yNDUsMS4wMDItOC40OTks%0D%0AMC45ODctMTIuNjktMC4yNjljLTYuMjM3LTEuODY5LTEwLjU5Ni01Ljg1Ni0xMi44ODctMTEuOTYx%0D%0ACgkJCWMtMi4wMDItNS4zNDEtMi4wMzUtMTAuNzk0LTAuMjg3LTE2LjJjMS44NS01LjcyLDUuNjY2%0D%0ALTkuNjksMTEuMjQyLTExLjkzOGM0LjE0NS0xLjY3LDguNDQ5LTEuOTU0LDEyLjgzOS0xLjM2OAoJ%0D%0ACQljMy42NzIsMC40ODksNi45OSwxLjgxNCw5Ljg1Myw0LjE5NWMyLjA3NywxLjcyNywzLjYwNywz%0D%0ALjg4NSw0Ljg1OSw2LjI1OGMwLjIzNiwwLjQ0Ny0wLjA0OSwwLjU2NC0wLjM2LDAuNjkzCgkJCWMt%0D%0AMS43NCwwLjcyMS0zLjQ4MSwxLjQ0MS01LjIyNCwyLjE2Yy0xLjE0OSwwLjQ3NS0yLjMwMSwwLjk0%0D%0AMy0zLjQ0OCwxLjQyMmMtMC43MDEsMC4yOTMtMC42OTcsMC4yOTYtMS4wNDUtMC40MgoJCQljLTAu%0D%0AODg4LTEuODM3LTIuMDctMy40MTUtMy45MDktNC40MDljLTMuOTM5LTIuMTI5LTEwLjQzMi0xLjQz%0D%0ANS0xMy4zODcsNC4yNDJjLTEuNDA0LDIuNjk2LTEuNzg3LDUuNTctMS41ODQsOC41NTkKCQkJYzAu%0D%0AMTU2LDIuMzE0LDAuNzE3LDQuNTA2LDIuMDM3LDYuNDQzYzEuOTU3LDIuODY4LDQuNzgyLDQuMTA1%0D%0ALDguMTY0LDQuMTg0YzIuMTIsMC4wNDksNC4xNzUtMC4yNTMsNi4wMDEtMS40NjYKCQkJYzEuNjQ2%0D%0ALTEuMDkyLDIuNDc2LTIuNjk0LDIuODg2LTQuNTU5YzAuMTEtMC41LTAuMjU2LTAuNDk3LTAuNTkz%0D%0ALTAuNDk3Yy0yLjM3NiwwLTQuNzUyLDAtNy4xMjksMAoJCQljLTAuODUzLDAtMC44NTQsMC4wMDEt%0D%0AMC44NTQtMC44MjVjLTAuMDAxLTIuMTg3LTAuMDAxLTQuMzc1LDAtNi41NjNjMC0wLjc1OCwwLjAw%0D%0ANS0wLjc2MSwwLjc1LTAuNzYxCgkJCWM2LjcxMy0wLjAwMiwxMy40MjYtMC4wMDQsMjAuMTM5LTAu%0D%0AMDA2QzI0MC44MzgsNTIuNzY2LDI0MC44MzgsNTQuMDg2LDI0MC44MzgsNTUuNDA2eiIvPgoJCTxw%0D%0AYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNi45MzgsNS4zODNjMC4wNzcsMC4yMzgsMC4yMTcsMC40%0D%0ANzYsMC4yMTksMC43MTRjMC4wMTYsMi4xNDksMC4wMjIsNC4zLTAuMDAxLDYuNDUKCQkJYy0wLjAw%0D%0ANiwwLjUzMiwwLjE1MywwLjczNSwwLjcwNSwwLjcyOGMyLjA5My0wLjAyMyw0LjE4OC0wLjAyMSw2%0D%0ALjI4LDBjMC41MjcsMC4wMDYsMC42ODctMC4xOTMsMC42ODMtMC42OTkKCQkJYy0wLjAyLTIuMTY5%0D%0ALDAtNC4zMzgtMC4wMjEtNi41MDdjLTAuMDA1LTAuNDY0LDAuMTI5LTAuNjM5LDAuNjA0LTAuNjMx%0D%0AYzEuMzM5LDAuMDIyLDIuNjc5LDAuMDI1LDQuMDE3LDAKCQkJYzAuNTAzLTAuMDEsMC42MzksMC4x%0D%0ANzcsMC42MzgsMC42NjNjLTAuMDEzLDYuMjYxLTAuMDA4LDEyLjUyMy0wLjAxLDE4Ljc4NWMwLDAu%0D%0ANzI4LTAuMDM5LDAuNzY1LTAuNzY5LDAuNzY2CgkJCWMtMS4yNjQsMC4wMDEtMi41MjgtMC4wMTgt%0D%0AMy43OTEsMC4wMDljLTAuNTI2LDAuMDEyLTAuNjg5LTAuMTg5LTAuNjg1LTAuNjk2YzAuMDE4LTIu%0D%0AMjYzLDAuMDA5LTQuNTI2LDAuMDA4LTYuNzg5CgkJCWMwLTAuODQ3LTAuMDI1LTAuODczLTAuODQ0%0D%0ALTAuODczYy0yLTAuMDAxLTMuOTk5LTAuMDAyLTUuOTk4LDBjLTAuNzYyLDAtMC44MDksMC4wNDct%0D%0AMC44MDksMC43OTVjMCwyLjI2MywwLjAwMSw0LjUyNiwwLDYuNzkKCQkJYzAsMC43MzEtMC4wMzgs%0D%0AMC43NjUtMC43NjksMC43NjVjLTEuMjY0LDAtMi41MjctMC4wMTMtMy43OTEsMC4wMDdjLTAuNDY5%0D%0ALDAuMDA4LTAuNjgyLTAuMTI3LTAuNjgxLTAuNjM4CgkJCWMwLjAxMS02LjMzNywwLjAxMS0xMi42%0D%0ANzQtMC4wMDEtMTkuMDExYzAtMC40NjgsMC4xOTEtMC41NzcsMC42MDgtMC41N2MxLjEzMSwwLjAx%0D%0ANiwyLjI2MywwLjAwOCwzLjM5NSwwLjAwMgoJCQljMC4yMjQtMC4wMDEsMC40NDgtMC4wMzgsMC42%0D%0ANzItMC4wNThDMjYuNzEyLDUuMzgzLDI2LjgyNiw1LjM4MywyNi45MzgsNS4zODN6Ii8+CgkJPHBh%0D%0AdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTU1LjY4NSw1LjM4M2MwLjA0MiwwLjI5MywwLjExNSwwLjU4%0D%0ANiwwLjEyLDAuODgxYzAuMDE0LDAuOTk5LTAuMDA5LDEuOTk5LDAuMDEyLDIuOTk4CgkJCWMwLjAx%0D%0ALDAuNDQ0LTAuMTYxLDAuNTkyLTAuNTk4LDAuNTg3QzUzLjU2LDkuODMxLDUxLjksOS44NTYsNTAu%0D%0AMjQyLDkuODMzYy0wLjUxMi0wLjAwNy0wLjcxOSwwLjE1Ni0wLjY5NywwLjY4MQoJCQljMC4wMyww%0D%0ALjcxNSwwLjAyOSwxLjQzNC0wLjAwMSwyLjE0OWMtMC4wMjEsMC40NzgsMC4xNjgsMC42MjYsMC42%0D%0AMjcsMC42MjFjMS41NDUtMC4wMTgsMy4wOTIsMC4wMDYsNC42MzctMC4wMTYKCQkJYzAuNTAyLTAu%0D%0AMDA3LDAuNzEsMC4xMzMsMC42OSwwLjY3MmMtMC4wMzgsMS4wMzYtMC4wMzMsMi4wNzQtMC4wMDEs%0D%0AMy4xMWMwLjAxNSwwLjUwNi0wLjE3OCwwLjY1MS0wLjY2MSwwLjY0NAoJCQljLTEuNDg5LTAuMDIy%0D%0ALTIuOTc4LTAuMDEtNC40NjgtMC4wMDhjLTAuNzkxLDAtMC44MTMsMC4wMjUtMC44MTUsMC44NGMt%0D%0AMC4wMDEsMC42NzgsMC4wMiwxLjM1OC0wLjAwOCwyLjAzNgoJCQljLTAuMDIyLDAuNTIxLDAuMTk0%0D%0ALDAuNjkzLDAuNzAxLDAuNjg3YzEuNjQtMC4wMjEsMy4yODEsMC4wMDgsNC45Mi0wLjAxOGMwLjUt%0D%0AMC4wMDgsMC42NjMsMC4xNjksMC42NTEsMC42NTYKCQkJYy0wLjAyNSwxLjAzNy0wLjAyMiwyLjA3%0D%0ANC0wLjAwMSwzLjExYzAuMDEsMC40NzEtMC4xMjcsMC42NjktMC42NDEsMC42NjZjLTMuMzk0LTAu%0D%0AMDE5LTYuNzg3LTAuMDE4LTEwLjE4LDAKCQkJYy0wLjQ5NSwwLjAwMi0wLjY1OC0wLjE2Mi0wLjY1%0D%0ANy0wLjY1MWMwLjAxMS02LjMxNSwwLjAxMi0xMi42MzEtMC4wMDItMTguOTQ2Yy0wLjAwMS0wLjUx%0D%0ANiwwLjE5NC0wLjYyNywwLjY2OC0wLjYyNQoJCQljMy4yOCwwLjAxNyw2LjU2MSwwLjAxMSw5Ljg0%0D%0AMSwwLjAwN2MwLjI0MiwwLDAuNDg0LTAuMDQsMC43MjctMC4wNjJDNTUuNjEsNS4zODMsNTUuNjQ3%0D%0ALDUuMzgzLDU1LjY4NSw1LjM4M3oiLz4KCQk8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTkuMzU2%0D%0ALDUuMzgzYzAuMDY4LDAuMTg3LDAuMTkyLDAuMzcxLDAuMTk1LDAuNTU5YzAuMDE4LDEuMTEyLTAu%0D%0AMDAyLDIuMjI0LDAuMDEzLDMuMzM0CgkJCWMwLjAwNSwwLjQxNC0wLjE1NSwwLjU3NS0wLjU2Nyww%0D%0ALjU2OWMtMS4wMTctMC4wMTQtMi4wMzUsMC4wMTktMy4wNTEtMC4wMTRjLTAuNTQ2LTAuMDE3LTAu%0D%0ANzE3LDAuMTgtMC43MTYsMC43MjEKCQkJYzAuMDE3LDQuNzQ4LDAuMDEsOS40OTYsMC4wMSwxNC4y%0D%0ANDVjMCwwLjg1MiwwLDAuODUyLTAuODQzLDAuODUyYy0xLjE4NywwLTIuMzc0LDAtMy41NjIsMGMt%0D%0AMC44MTMsMC0wLjgzNi0wLjAxOC0wLjgzNi0wLjgxMgoJCQljMC00LjcxMSwwLTkuNDIyLDAtMTQu%0D%0AMTMyYzAtMC44NjQsMC4wMDMtMC44NTktMC44OTMtMC44NjZDNy45NTgsOS44MzEsNi44MTEsOS44%0D%0AMTIsNS42NjIsOS43OThjMC0xLjQ3MSwwLTIuOTQzLDAtNC40MTQKCQkJYzAuMTg4LDAsMC4zNzcs%0D%0AMCwwLjU2NiwwYzAuMTY3LDAuMDIxLDAuMzM0LDAuMDU4LDAuNSwwLjA1OGMzLjg5MiwwLjAwMyw3%0D%0ALjc4NCwwLjAwMywxMS42NzUsMGMwLjE2NywwLDAuMzM0LTAuMDM3LDAuNS0wLjA1OAoJCQlDMTku%0D%0AMDU0LDUuMzgzLDE5LjIwNiw1LjM4MywxOS4zNTYsNS4zODN6Ii8+CgkJPHBhdGggZmlsbD0iI2Zm%0D%0AZmZmZiIgZD0iTTY0LjIwNSw3NS4zMDdjLTUuNjkyLTAuMTA2LTEwLjg0Ny0xLjY3MS0xNS4xOTgt%0D%0ANS40MjdjLTMuNjM0LTMuMTM4LTUuOTU2LTcuMS02Ljc4OC0xMS44MzQKCQkJYy0xLjM1My03Ljcw%0D%0AMywwLjY2Ny0xNC4zOSw2LjM3Ny0xOS44MjVjMi41NjItMi40MzgsNS42NS0zLjk5NSw5LjA2Ni00%0D%0ALjg4NmM0LjExLTEuMDczLDguMjcxLTEuMTY2LDEyLjM3OC0wLjE2MQoJCQljNy41MDIsMS44MzQs%0D%0AMTIuODczLDYuMjc4LDE1LjQzNywxMy42NWMyLjk4MSw4LjU3NSwwLjQwOSwxOC4zMTctNy4yMjgs%0D%0AMjMuOTkxYy0yLjg5NSwyLjE1MS02LjE1MywzLjQ5Ny05LjcyMSw0LjAzNAoJCQlDNjcuMDk3LDc1%0D%0ALjA2NCw2NS42NDcsNzUuMTU3LDY0LjIwNSw3NS4zMDd6Ii8+CgkJPHBhdGggZmlsbD0iI2ZmZmZm%0D%0AZiIgZD0iTTE4MC40NDcsNTguMDc1YzAuMDE2LTAuMjEzLDAuMDQ3LTAuNDI2LDAuMDQ3LTAuNjM5%0D%0AYzAuMDAyLTcuNjU3LDAuMDAyLTE1LjMxMywwLjAwMi0yMi45NwoJCQljMC0wLjgzMywwLjAwMS0w%0D%0ALjgzMywwLjg0Ny0wLjgzM2MyLjk3OSwwLDUuOTU4LDAuMDEsOC45MzktMC4wMTNjMC40OTktMC4w%0D%0AMDMsMC42NDksMC4xNSwwLjY0OSwwLjY0NQoJCQljLTAuMDExLDEzLjA1LTAuMDExLDI2LjEwMSww%0D%0ALjAwMSwzOS4xNTFjMC4wMDEsMC41My0wLjE3NSwwLjY3Ny0wLjY4NSwwLjY3NGMtMy4wMzYtMC4w%0D%0AMTktNi4wNzQtMC4wMTktOS4xMDksMAoJCQljLTAuNDg2LDAuMDAzLTAuODAyLTAuMTYtMS4wOTct%0D%0AMC41MzZjLTUuMTA1LTYuNTE1LTEwLjIyMS0xMy4wMjEtMTUuMzMzLTE5LjUzYy0xLjAzNy0xLjMx%0D%0AOS0yLjA3NS0yLjYzNy0zLjEwMS0zLjk2NQoJCQljLTAuMTI1LTAuMTYxLTAuMTc0LTAuMzc5LTAu%0D%0AMjU4LTAuNTcyYy0wLjEwMSwwLjA3LTAuMiwwLjE0LTAuMywwLjIxYy0wLjAxOSwwLjE3My0wLjA1%0D%0AMywwLjM0NS0wLjA1MywwLjUxOAoJCQljLTAuMDAxLDcuNjk0LDAuMDAxLDE1LjM4OSwwLjAwMiwy%0D%0AMy4wODNjMCwwLjc2MS0wLjAxNSwwLjc4MS0wLjc0MywwLjc4MWMtMy4wMTgsMC4wMDItNi4wMzQt%0D%0AMC4wMDgtOS4wNTIsMC4wMQoJCQljLTAuNTI5LDAuMDAzLTAuNzIxLTAuMTQ1LTAuNzIxLTAuNzAz%0D%0AYzAuMDE1LTEzLjAxMiwwLjAxMS0yNi4wMjUsMC4wMTMtMzkuMDM4YzAtMC43LDAuMDE3LTAuNzE2%0D%0ALDAuNzQxLTAuNzE2CgkJCWMzLjA1NSwwLDYuMTA5LDAuMDA3LDkuMTY0LTAuMDA5YzAuNDQzLTAu%0D%0AMDAyLDAuNzIxLDAuMTUyLDAuOTk1LDAuNDk5YzYuMTc1LDcuODc5LDEyLjM2MiwxNS43NDksMTgu%0D%0ANTQyLDIzLjYyNQoJCQljMC4xMTQsMC4xNDUsMC4xNTQsMC4zNDgsMC4yMjksMC41MjNDMTgwLjI1%0D%0AOSw1OC4yMDcsMTgwLjM1NCw1OC4xNDEsMTgwLjQ0Nyw1OC4wNzV6Ii8+CgkJPHBhdGggZmlsbD0i%0D%0AI2ZmZmZmZiIgZD0iTTI5LjUyNCw1Mi40OThjMC45NTIsMC4zMTIsMS43ODcsMC41MzYsMi41ODMs%0D%0AMC44NTVjMy4wNjEsMS4yMjcsNC44NDksMy41LDUuMzMxLDYuNzUxCgkJCWMwLjM2NywyLjQ4LDAu%0D%0AMjQ2LDQuOTM3LTAuODAxLDcuMjY1Yy0xLjM2MiwzLjAyOS0zLjc0MSw0Ljg5MS02Ljg2Myw1Ljg3%0D%0AOWMtMi4wMTksMC42NC00LjA5NCwwLjgzMi02LjE5NiwwLjgzMgoJCQljLTUuMzc0LDAtMTAuNzQ5%0D%0ALTAuMDA1LTE2LjEyMywwLjAxMWMtMC41MywwLjAwMS0wLjcxOC0wLjE0Mi0wLjcxNy0wLjdDNi43%0D%0ANTEsNjAuMzYsNi43NSw0Ny4zMyw2Ljc0MSwzNC4yOTkKCQkJYzAtMC40NjcsMC4xMDItMC42NzYs%0D%0AMC42MjItMC42NzVjNS4zMTgsMC4wMjIsMTAuNjM2LTAuMDA3LDE1Ljk1MywwLjA0OGMyLjA4OCww%0D%0ALjAyMiw0LjEyMiwwLjQzMSw1Ljk3OCwxLjQ3OQoJCQljMi4yOTYsMS4yOTYsMy42NDIsMy4yODcs%0D%0ANC4xOSw1LjgyNWMwLjQ1MiwyLjA5LDAuNDYxLDQuMTg5LTAuMDY1LDYuMjc5Yy0wLjUwNiwyLjAx%0D%0ANC0xLjY5NCwzLjU0NS0zLjMzNCw0Ljc2MwoJCQlDMjkuOTE0LDUyLjE0NSwyOS43NTgsNTIuMjk1%0D%0ALDI5LjUyNCw1Mi40OTh6IE0xNy4yMzEsNjEuNjQyYzAsMS4yNDQsMC4wMDMsMi40ODctMC4wMDEs%0D%0AMy43MzEKCQkJYy0wLjAwMSwwLjMzOCwwLjA2LDAuNjE4LDAuNDgxLDAuNTk3YzEuODIyLTAuMDks%0D%0AMy42NTMtMC4xMSw1LjQ2My0wLjMxMmMwLjc5Mi0wLjA4OSwxLjYxMi0wLjQ0MiwyLjI5Ny0wLjg3%0D%0AMgoJCQljMS4zNzMtMC44NTcsMS42ODItMi4yNDgsMS41MDItMy43NjJjLTAuMjAyLTEuNzAyLTEu%0D%0AMjU5LTIuNjc2LTIuODM3LTMuMTUxYy0yLjA5My0wLjYzLTQuMjQ4LTAuNTQxLTYuMzk1LTAuNTM2%0D%0ACgkJCWMtMC4zOTIsMC0wLjUxOCwwLjIwNi0wLjUxNSwwLjU3M0MxNy4yMzgsNTkuMTU0LDE3LjIz%0D%0AMiw2MC4zOTcsMTcuMjMxLDYxLjY0MnogTTE3LjIzMSw0NS41ODljMCwxLjEzMSwwLjAwNywyLjI2%0D%0AMy0wLjAwMywzLjM5NQoJCQljLTAuMDAzLDAuMzcyLDAuMTM2LDAuNTksMC41MjEsMC41NjVjMS4x%0D%0AODItMC4wNzUsMi4zODItMC4wNTksMy41NC0wLjI3MWMxLjU5OS0wLjI5MywyLjU3MS0xLjMwNiwy%0D%0ALjg0Mi0yLjk2MwoJCQljMC4zMTgtMS45NDctMC41MTktMy41NzUtMi4yNzEtNC4yNTJjLTEuMzc2%0D%0ALTAuNTMzLTIuODIyLTAuNDE1LTQuMjUxLTAuMzY5Yy0wLjEzMSwwLjAwNC0wLjM1NCwwLjM2LTAu%0D%0AMzYxLDAuNTU4CgkJCUMxNy4yMTMsNDMuMzYzLDE3LjIzMSw0NC40NzYsMTcuMjMxLDQ1LjU4OXoi%0D%0ALz4KCQk8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTI2LjksNzQuMDNjLTAuMzA4LDAuMDI0LTAu%0D%0ANDg3LDAuMDQ5LTAuNjY2LDAuMDQ5Yy0zLjg4NiwwLjAwMi03Ljc3Mi0wLjAwNS0xMS42NTcsMC4w%0D%0AMTEKCQkJYy0wLjQ2OSwwLjAwMS0wLjc1Ni0wLjE0OS0xLjAxMS0wLjU0N2MtMy4wMjQtNC43MTMt%0D%0ANi4wNjQtOS40MTYtOS4xMDItMTQuMTE5Yy0wLjExNy0wLjE4MS0wLjI2LTAuMzQ2LTAuNTM0LTAu%0D%0ANDg4CgkJCWMtMC4wMjQsMC4yMjUtMC4wNzEsMC40NS0wLjA3MSwwLjY3NGMtMC4wMDMsNC41ODMt%0D%0AMC4wMDIsOS4xNjctMC4wMDIsMTMuNzVjMCwwLjcxNy0wLjAwMywwLjcyMS0wLjcyOCwwLjcyMgoJ%0D%0ACQljLTIuOTk5LDAtNS45OTgsMC04Ljk5NywwYy0wLjc0NiwwLTAuNzctMC4wMjQtMC43Ny0wLjc1%0D%0ANmMwLTEyLjk3NiwwLjAwMS0yNS45NTItMC4wMDYtMzguOTI4YzAtMC40OCwwLjA1Mi0wLjc3NSww%0D%0ALjY1Ni0wLjc3MwoJCQljNS40NywwLjAyMSwxMC45NC0wLjAxNiwxNi40MDksMC4wMzhjMi45NDUs%0D%0AMC4wMjksNS43MTksMC43NTksOC4xMTEsMi41NzFjMi42MjcsMS45OSw0LjAwNSw0LjcxOSw0LjQy%0D%0ANCw3LjkzCgkJCWMwLjI5NSwyLjI2NCwwLjE2Niw0LjUyMi0wLjYwOCw2LjcwMWMtMS4xMjUsMy4x%0D%0ANjctMy40MSw1LjEyLTYuNTI3LDYuMTg4Yy0wLjI4NSwwLjA5OC0wLjU3MywwLjE4OS0wLjg2NCww%0D%0ALjI2NwoJCQljLTAuNTgzLDAuMTU2LTAuNjMyLDAuMjc3LTAuMjcxLDAuNzQ2YzEuMjc2LDEuNjU5%0D%0ALDIuNTUzLDMuMzE3LDMuODI3LDQuOTc4YzIuNjg4LDMuNSw1LjM3NCw2Ljk5OSw4LjA2LDEwLjUK%0D%0ACQkJQzEyNi42NjMsNzMuNjU3LDEyNi43MzcsNzMuNzg0LDEyNi45LDc0LjAzeiBNMTAzLjg1Nyw0%0D%0ANi43MDZjMCwxLjQ2OSwwLjAwNSwyLjkzOC0wLjAwMyw0LjQwNwoJCQljLTAuMDAxLDAuMzYzLDAu%0D%0AMDUzLDAuNjYsMC41MDcsMC42MjRjMS40NTgtMC4xMTUsMi45MzktMC4xMTgsNC4zNjktMC4zOWMy%0D%0ALjExMi0wLjQsMy41MjMtMi4xNzgsMy41ODctNC4yMjgKCQkJYzAuMDc5LTIuNTQ1LTEuMDQxLTQu%0D%0AMjI3LTMuMjU4LTQuOTVjLTEuNDk3LTAuNDg4LTMuMDM3LTAuNDgzLTQuNTgyLTAuNDk1Yy0wLjQ2%0D%0ANS0wLjAwMy0wLjYzMiwwLjE1OS0wLjYyNiwwLjYyNQoJCQlDMTAzLjg3MSw0My43NjksMTAzLjg1%0D%0AOCw0NS4yMzcsMTAzLjg1Nyw0Ni43MDZ6Ii8+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE0%0D%0AMS45NzksNTMuODc5YzAsNi41MjUtMC4wMDMsMTMuMDQ5LDAuMDA4LDE5LjU3NGMwLjAwMSwwLjQ2%0D%0AMi0wLjEzOSwwLjYzNy0wLjYxMSwwLjYzNAoJCQljLTMuMDkzLTAuMDEzLTYuMTg0LTAuMDE2LTku%0D%0AMjc3LDAuMDAyYy0wLjU0NCwwLjAwMy0wLjY1Ny0wLjIyMi0wLjY1NS0wLjcxM2MwLjAxMy01LjU0%0D%0ANCwwLjAwOS0xMS4wODgsMC4wMDktMTYuNjMzCgkJCWMwLTcuNDQ4LDAtMTQuODk3LDAtMjIuMzQ2%0D%0AYzAtMC43NTIsMC4wMS0wLjc2MywwLjc1Mi0wLjc2NGMzLjAxOC0wLjAwMSw2LjAzNC0wLjAwMSw5%0D%0ALjA1MSwwYzAuNzIxLDAuMDAxLDAuNzIsMC4wMDUsMC43MiwwLjcyOAoJCQljLTAuMDAxLDYuNTA2%0D%0ALTAuMDAxLDEzLjAxMi0wLjAwMSwxOS41MThDMTQxLjk3NSw1My44NzksMTQxLjk3OCw1My44Nzks%0D%0AMTQxLjk3OSw1My44Nzl6Ii8+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE0OC4yMzgsOTIu%0D%0AMjk1Yy0wLjA4MiwwLjE1My0wLjE3OCwwLjMtMC4yNDMsMC40NThjLTEuMzgzLDMuMzYyLTIuNzY5%0D%0ALDYuNzI0LTQuMTM0LDEwLjA5NAoJCQljLTAuMTg5LDAuNDYyLTAuNDI5LDAuNjc4LTAuOTU4LDAu%0D%0ANjY0Yy0xLjY4My0wLjA0Ni0xLjI5NywwLjE3My0xLjg3LTEuMjgyYy0xLjI0OS0zLjE3My0yLjQ3%0D%0ANS02LjM1NC0zLjcxNS05LjUyOQoJCQljLTAuMDYzLTAuMTYzLTAuMTc4LTAuMzA1LTAuMjY4LTAu%0D%0ANDU3Yy0wLjA1MiwwLjAwNi0wLjEwNSwwLjAxMi0wLjE1NywwLjAxOWMtMC4xMDQsMC42MTctMC4y%0D%0AMTcsMS4yMzMtMC4zMTIsMS44NTIKCQkJYy0wLjQ0NiwyLjk2NC0wLjg5MSw1LjkyOS0xLjMyMiw4%0D%0ALjg5NWMtMC4wNSwwLjM0Ny0wLjE5LDAuNDk1LTAuNTQyLDAuNDkzYy0xLjM5Ni0wLjAwOS0yLjc5%0D%0AMi0wLjAxMS00LjE4OCwwLjAwMQoJCQljLTAuNDgzLDAuMDA0LTAuNTExLTAuMjY0LTAuNDQ2LTAu%0D%0ANjI4YzAuMjE5LTEuMjQ0LDAuNDQtMi40ODgsMC42NTEtMy43MzJjMC40NzgtMi44MDYsMC45NTIt%0D%0ANS42MTMsMS40MjctOC40MTkKCQkJYzAuMzg2LTIuMjY3LDAuNzc2LTQuNTM0LDEuMTUtNi44MDJj%0D%0AMC4wNzctMC40NjcsMC4yNjMtMC42NzIsMC43NzktMC42NTdjMS4yODEsMC4wMzksMi41NjYsMC4w%0D%0AMzksMy44NDYsMC4wMDEKCQkJYzAuNTA2LTAuMDE1LDAuNzQ4LDAuMTczLDAuOTE1LDAuNjI1YzEu%0D%0AMDYsMi44NjIsMi4xMzQsNS43MTgsMy4yMDcsOC41NzVjMC4xNjYsMC40NDMsMC4zNTIsMC44Nzgs%0D%0AMC41MywxLjMxNwoJCQljMC4wNjUtMC4wMDcsMC4xMzEtMC4wMTMsMC4xOTctMC4wMmMwLjE3NS0w%0D%0ALjQ0NCwwLjM1OS0wLjg4NSwwLjUyNi0xLjMzM2MxLjA3MS0yLjg1OCwyLjE0Ny01LjcxNCwzLjE5%0D%0ANy04LjU4CgkJCWMwLjE1NS0wLjQyNiwwLjM3NC0wLjU5LDAuODI0LTAuNTgzYzEuMzM4LDAuMDIz%0D%0ALDIuNjc4LDAuMDIsNC4wMTcsMC4wMDFjMC40MjItMC4wMDYsMC41ODIsMC4xNDQsMC42NTQsMC41%0D%0ANjgKCQkJYzAuNzUsNC40NjEsMS41MjYsOC45MTksMi4yODksMTMuMzc4YzAuMzI1LDEuODk1LDAu%0D%0ANjIzLDMuNzkzLDAuOTYxLDUuNjg2YzAuMDg0LDAuNDc1LTAuMDcyLDAuNjA2LTAuNTE3LDAuNjAy%0D%0ACgkJCWMtMS4zMi0wLjAxNC0yLjY0Mi0wLjAyMi0zLjk2MSwwLjAwNGMtMC40ODcsMC4wMTEtMC42%0D%0ANjUtMC4xOTQtMC43MjktMC42NDNjLTAuMjkyLTIuMDM0LTAuNjA0LTQuMDY1LTAuOTA1LTYuMDk3%0D%0ACgkJCWMtMC4xOTgtMS4zMjQtMC4zODktMi42NDktMC41OTEtMy45NzJjLTAuMDI3LTAuMTY5LTAu%0D%0AMTA4LTAuMzI5LTAuMTY1LTAuNDkzQzE0OC4zMzcsOTIuMzAxLDE0OC4yODgsOTIuMjk4LDE0OC4y%0D%0AMzgsOTIuMjk1eiIvPgoJCTxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yMDIuNjkyLDkxLjI4MWMt%0D%0AMC4wNDIsMC40MDMtMC4wODYsMC42My0wLjA4NiwwLjg1OGMtMC4wMDYsMy41MjYtMC4wMDMsNy4w%0D%0ANTEtMC4wMDMsMTAuNTc4CgkJCWMwLDAuNzY2LTAuMDE4LDAuNzgzLTAuNzk5LDAuNzg0Yy0xLjI2%0D%0AMywwLjAwMi0yLjUyNy0wLjAxMi0zLjc4OSwwLjAwN2MtMC40NTcsMC4wMDctMC42MzgtMC4xNDct%0D%0AMC42MzgtMC42MgoJCQljMC4wMTEtNi4zMzUsMC4wMDktMTIuNjcsMC4wMDItMTkuMDA2YzAtMC40%0D%0AMjEsMC4xMjktMC42MTcsMC41ODUtMC42MTFjMS4zOTUsMC4wMTksMi43OTItMC4wMTUsNC4xODYs%0D%0AMC4wMjcKCQkJYzAuMjY5LDAuMDA4LDAuNjEyLDAuMjAyLDAuNzg0LDAuNDE4YzIuOTUsMy43MjIs%0D%0ANS44NzksNy40NjEsOC44MTUsMTEuMTk1YzAuMTMsMC4xNjQsMC4yODksMC4zMDUsMC41NTUsMC41%0D%0AODYKCQkJYzAuMDI4LTAuMzk0LDAuMDU4LTAuNjA3LDAuMDU4LTAuODJjMC4wMDQtMy41NDUsMC4w%0D%0AMDEtNy4wOSwwLjAwMy0xMC42MzRjMC0wLjc2MiwwLjAwMi0wLjc2MiwwLjc0NC0wLjc2MwoJCQlj%0D%0AMS4yNjMsMCwyLjUyNywwLjAxOCwzLjc4OS0wLjAxYzAuNDc5LTAuMDEsMC42NywwLjExNywwLjY3%0D%0ALDAuNjI5Yy0wLjAxMyw2LjMzNS0wLjAxMiwxMi42NywwLDE5LjAwNQoJCQljMC4wMDIsMC40ODUt%0D%0AMC4xODcsMC42MTItMC42MzcsMC42MDVjLTEuMzE4LTAuMDIxLTIuNjM5LTAuMDIyLTMuOTU4LDBj%0D%0ALTAuNDQzLDAuMDA4LTAuNzM1LTAuMTU2LTEuMDAzLTAuNDk4CgkJCWMtMi45MjYtMy43NDItNS44%0D%0ANjMtNy40NzUtOC43OTktMTEuMjA5QzIwMy4wNjMsOTEuNjY0LDIwMi45MzUsOTEuNTQyLDIwMi42%0D%0AOTIsOTEuMjgxeiIvPgoJCTxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMTYuNTA4LDEwNC4xMTdj%0D%0ALTQuNDU0LTAuMTg4LTcuOTI5LTEuNzQ1LTEwLjA2LTUuNTczYy0zLjE0Ni01LjY1LTAuNjMzLTEz%0D%0ALjQ5Myw2LjUyNy0xNS4zNzgKCQkJYzMuNjg3LTAuOTcxLDcuMjA4LTAuNTI5LDEwLjMzNywxLjc1%0D%0AOWMyLjg5OSwyLjEyMSw0LjI2NCw1LjA4LDQuMTk1LDguNjQ3Yy0wLjEsNS4yNC0zLjY1LDkuMzM4%0D%0ALTguODA4LDEwLjI1NwoJCQlDMTE3LjkwOCwxMDMuOTcxLDExNy4xMDQsMTA0LjA0LDExNi41MDgs%0D%0AMTA0LjExN3ogTTExMC42MDYsOTMuMzU4Yy0wLjAxLDMuMTUzLDIuNDg4LDUuNjEzLDUuNzA3LDUu%0D%0ANjE5CgkJCWMzLjE4NSwwLjAwNSw1LjcxMy0yLjQzOCw1LjczMi01LjU0MWMwLjAyLTMuMTctMi40%0D%0AOTgtNS42NDYtNS43NC01LjY0NkMxMTMuMTIyLDg3Ljc5MSwxMTAuNjE3LDkwLjIzOCwxMTAuNjA2%0D%0ALDkzLjM1OHoiLz4KCQk8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTkyLjExNCwxMDMuNWMtMC42%0D%0ANiwwLTEuMzI0LTAuMDM4LTEuOTgsMC4wMTJjLTAuNTM5LDAuMDQyLTAuNzgyLTAuMTg1LTAuOTMx%0D%0ALTAuNjY4CgkJCWMtMC4yNDUtMC43OTEtMC41NTUtMS41NjMtMC43OTgtMi4zNTRjLTAuMTItMC4z%0D%0AOTItMC4zMjgtMC41NDItMC43MzItMC41NDFjLTIuMTQ5LDAuMDExLTQuMywwLjAxLTYuNDUtMC4w%0D%0AMDEKCQkJYy0wLjQwOS0wLjAwMi0wLjYxOSwwLjE4My0wLjc0MSwwLjU1MmMtMC4yNzUsMC44NDEt%0D%0AMC41NzQsMS42NzUtMC44NDcsMi41MThjLTAuMTA4LDAuMzM0LTAuMzAzLDAuNDg5LTAuNjYyLDAu%0D%0ANDg3CgkJCWMtMS41MDgtMC4wMDgtMy4wMTctMC4wMDctNC41MjUsMGMtMC40MjksMC4wMDItMC41%0D%0AMTktMC4xNDYtMC4zNjItMC41NTZjMi40MTUtNi4zMTYsNC44MjItMTIuNjM1LDcuMjE4LTE4Ljk1%0D%0AOAoJCQljMC4xODktMC41MDEsMC40MjUtMC43NDcsMS4wMTctMC43MjhjMS40NjksMC4wNDgsMi45%0D%0ANDEsMC4wMjUsNC40MTMsMC4wMDhjMC40MjEtMC4wMDUsMC42MzUsMC4xNDksMC43ODgsMC41NTIK%0D%0ACQkJYzIuMTM3LDUuNjM2LDQuMjkyLDExLjI2NCw2LjQ0MiwxNi44OTVjMC4yNzYsMC43MjEsMC41%0D%0ANDYsMS40NDUsMC44MzIsMi4xNjNjMC4xNywwLjQyOCwwLjA4MywwLjYzNi0wLjQxOCwwLjYyNAoJ%0D%0ACQlDMTkzLjYyMywxMDMuNDg2LDE5Mi44NjgsMTAzLjUsMTkyLjExNCwxMDMuNXogTTE4NC41MjIs%0D%0AODkuNDI3Yy0wLjE4NiwwLjI4My0wLjMwNCwwLjQwMy0wLjM1NCwwLjU0NgoJCQljLTAuNjM5LDEu%0D%0AODA4LTEuMjU4LDMuNjIxLTEuOTA3LDUuNDI1Yy0wLjE2MSwwLjQ0OS0wLjA3MywwLjYyMiwwLjQx%0D%0ANywwLjYxNmMxLjE4Ni0wLjAxNSwyLjM3MS0wLjAxNCwzLjU1Ni0wLjAwMQoJCQljMC41MDUsMC4w%0D%0AMDYsMC41NjktMC4xODMsMC4zOTktMC42MjVjLTAuMzM2LTAuODc3LTAuNjItMS43NzQtMC45MzIt%0D%0AMi42NkMxODUuMzMzLDkxLjY4OCwxODQuOTU4LDkwLjY0OSwxODQuNTIyLDg5LjQyN3oiLz4KCQk8%0D%0AcGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTU4LjcyOCw5My4zNzNjMC0zLjEyOSwwLTYuMjU3LDAu%0D%0AMDAxLTkuMzg2YzAtMC43MDcsMC4wMjEtMC43MjYsMC43MzItMC43MjVjMi42NzcsMC4wMDYsNS4z%0D%0ANTUtMC4wNDksOC4wMjgsMC4wNTIKCQkJYzEuMDY4LDAuMDQsMi4xNzIsMC4yOTcsMy4xNzMsMC42%0D%0AODJjMS44NzQsMC43MjIsMi44NjcsMi4yNDgsMy4yNTgsNC4xNzZjMC4zNCwxLjY4LDAuMjg4LDMu%0D%0AMzUyLTAuMzc0LDQuOTQ1CgkJCWMtMS4wMTYsMi40NTEtMy4wNDksMy40MjctNS41NDcsMy42MDNj%0D%0ALTEuMTI1LDAuMDc5LTIuMjYxLDAuMDQzLTMuMzkyLDAuMDI1Yy0wLjQ4My0wLjAwNy0wLjY2Nyww%0D%0ALjE1Mi0wLjY2MSwwLjY1MgoJCQljMC4wMjIsMS44MjgtMC4wMDMsMy42NTcsMC4wMTgsNS40ODVj%0D%0AMC4wMDYsMC40NjctMC4xNDgsMC42MzMtMC42MTUsMC42MjZjLTEuMzE5LTAuMDItMi42MzgtMC4w%0D%0AMjQtMy45NTcsMC4wMDEKCQkJYy0wLjUyMSwwLjAxLTAuNjc5LTAuMTc5LTAuNjc3LTAuNjkzQzE1%0D%0AOC43MzcsOTkuNjY4LDE1OC43MjgsOTYuNTIxLDE1OC43MjgsOTMuMzczeiBNMTYzLjk1OSw5MC4w%0D%0ANTgKCQkJYzAsMC42NzksMC4wMDQsMS4zNTYtMC4wMDIsMi4wMzVjLTAuMDAyLDAuMzI2LDAuMTMy%0D%0ALDAuNDkxLDAuNDcyLDAuNDgzYzAuNTg0LTAuMDEzLDEuMTcxLDAuMDIsMS43NTEtMC4wMjUKCQkJ%0D%0AYzEuODQ5LTAuMTQ3LDIuNzQ1LTEuMzYsMi4zODctMy4xOTFjLTAuMTgzLTAuOTMxLTAuODI2LTEu%0D%0ANjItMS43NjUtMS43NDRjLTAuNzgxLTAuMTA0LTEuNTc2LTAuMDk2LTIuMzY1LTAuMTMyCgkJCWMt%0D%0AMC4zNzctMC4wMTktMC40ODMsMC4yMDgtMC40OCwwLjU0MUMxNjMuOTYxLDg4LjcwMSwxNjMuOTU4%0D%0ALDg5LjM3OSwxNjMuOTU5LDkwLjA1OHoiLz4KCQk8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTAy%0D%0ALjM1Miw5Ny4xNmMwLDAuMzMzLDAsMC42NjYsMCwwLjk5OWMwLDEuNDE1LTAuMDE4LDIuODI5LDAu%0D%0AMDEsNC4yNDNjMC4wMSwwLjUwOS0wLjE4OSwwLjcyMi0wLjY2MywwLjg3MwoJCQljLTEuNTE2LDAu%0D%0ANDc5LTMuMDMxLDAuOTEyLTQuNjQ2LDAuNzg1Yy00LjEzNS0wLjMyNy03LjIyMS0yLjMwNC05LjA0%0D%0AOS02LjAyYy0yLjg2Ni01LjgzLTAuMDg0LTEyLjU0Niw2LjA0Ni0xNC43MzQKCQkJYzIuNjM1LTAu%0D%0AOTQsNS4yNjktMC43MzgsNy44NDcsMC4yNzdjMC4xOTUsMC4wNzcsMC40MywwLjM2NiwwLjQzNCww%0D%0ALjU2YzAuMDMyLDEuNzkxLDAuMDE3LDMuNTgyLDAuMDEzLDUuMzczCgkJCWMwLDAuMDUxLTAuMDM4%0D%0ALDAuMTAzLTAuMDY5LDAuMThjLTMuMDczLTIuNTI2LTYuMTQxLTIuOTE3LTguODQ5LDAuMzg4Yy0x%0D%0ALjY2MywyLjAyOS0xLjM3Miw1LjE2NSwwLjMzLDcuMDYyCgkJCWMxLjEyMiwxLjI1MSwyLjUzMywx%0D%0ALjg1MSw0LjIxNSwxLjgzMWMxLjY3Ny0wLjAyLDMuMDIxLTAuNzksNC4yMjItMS45MDFDMTAyLjI0%0D%0ANiw5Ny4xMDMsMTAyLjI5OCw5Ny4xMzIsMTAyLjM1Miw5Ny4xNnoiLz4KCQk8cGF0aCBmaWxsPSIj%0D%0AZmZmZmZmIiBkPSJNMjE5LjQ4MSw4My4zMWMwLjI5My0wLjAyMSwwLjQ3Mi0wLjA0NiwwLjY1LTAu%0D%0AMDQ2YzEuNjQxLTAuMDAzLDMuMjgxLDAuMDEsNC45Mi0wLjAxMQoJCQljMC40MTMtMC4wMDYsMC42%0D%0ANjEsMC4xNTEsMC44NzksMC40NzljMS4wMDksMS41MDMsMi4wMzIsMi45OTUsMy4wNTMsNC40ODhj%0D%0AMC4zNjcsMC41MzksMC40NDksMC41MzcsMC44MTktMC4wMDkKCQkJYzAuOTkzLTEuNDY3LDEuOTk0%0D%0ALTIuOTI4LDIuOTY4LTQuNDA5YzAuMjU1LTAuMzg4LDAuNTM0LTAuNTU5LDEuMDExLTAuNTUxYzEu%0D%0ANjIsMC4wMjYsMy4yNDIsMC4wMDksNC44NjMsMC4wMTMKCQkJYzAuMTc5LDAsMC4zNTcsMC4wMjYs%0D%0AMC42NDEsMC4wNWMtMC4xMywwLjIyOS0wLjE5NywwLjM3NC0wLjI4OCwwLjUwMmMtMi4yMzMsMy4x%0D%0ANzUtNC40NzcsNi4zNDMtNi42OTUsOS41MwoJCQljLTAuMTk4LDAuMjg2LTAuMzI1LDAuNjg2LTAu%0D%0AMzI5LDEuMDM1Yy0wLjAyNiwyLjgwOC0wLjAyNyw1LjYxNy0wLjAwNCw4LjQyNmMwLjAwNSwwLjU1%0D%0ALTAuMTczLDAuNzE4LTAuNzEzLDAuNzA1CgkJCWMtMS4zMDEtMC4wMzItMi42MDItMC4wMjUtMy45%0D%0AMDItMC4wMDJjLTAuNDcxLDAuMDA4LTAuNjIxLTAuMTYyLTAuNjE5LTAuNjI2YzAuMDE3LTIuODA4%0D%0ALDAuMDIyLTUuNjE3LTAuMDA4LTguNDI2CgkJCWMtMC4wMDUtMC40MDItMC4xMzgtMC44NjMtMC4z%0D%0ANjMtMS4xOWMtMi4xNTQtMy4xMTctNC4zNDItNi4yMS02LjUxNS05LjMxMkMyMTkuNzI3LDgzLjc3%0D%0AOSwyMTkuNjM3LDgzLjU4NCwyMTkuNDgxLDgzLjMxeiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=" alt="">
      </a>
      <ul class="nav__menu">
        <li data-animation="kf-left-to-right" style="--kf-delay: 150"><a href="#!">Works</a></li>
        <li data-animation="kf-left-to-right" style="--kf-delay: 300"><a href="#!">Features</a></li>
        <li data-animation="kf-left-to-right" style="--kf-delay: 450"><a href="#!">Security</a></li>
        <li data-animation="kf-left-to-right" style="--kf-delay: 600"><a href="#!">Contact</a></li> 
      </ul>
    </nav>
    <section class="banner">
      <div class="banner__txt">
        <h1 class="banner-title" data-animation="kf-words" data-split-word>Espacio para título del Banner</h1>
        <h2 class="banner-subtitle" data-animation="scale-out-center" style="--kf-delay: 2000">Subtítulo del Banner, con Heading H2, que contiene una breve descripción sobre que lo que se pretenda publicitar</h2>
      </div>
      <div class="banner__form" data-animation="kf-circle" style="--kf-delay: 3000">
        <form class="form">
          <details id="js-select-level" class="select_container">
            <summary>--</summary>
            <fieldset class="select">
              <label class="select__option">
                <input checked type="radio" name="level" value="slower">Slower
              </label>
              <label class="select__option">
                <input type="radio" name="level" value="slow">Slow
              </label>
              <label class="select__option">
                <input type="radio" name="level" value="medium">Medium
              </label>
              <label class="select__option">
                <input type="radio" name="level" value="fast">Fast
              </label>
              <label class="select__option">
                <input type="radio" name="level" value="faster">Faster
              </label>
            </fieldset>
          </details>
          <details id="js-select-city" class="select_container">
            <summary>--</summary>
            <div class="select">
              <label class="select__option">
                <input checked type="radio" name="city" value="sevilla">Sevilla
              </label>
              <label class="select__option">
                <input type="radio" name="city" value="madrid">Madrid
              </label>
              <label class="select__option">
                <input type="radio" name="city" value="granada">Granada
              </label>
              <label class="select__option">
                <input type="radio" name="city" value="ourense">Ourense
              </label>
            </div>
          </details>
          <input class="btn" value="Enviar" type="button">
        </form>
      </div>
    </section>
  </header>
  
  <main class="container container--content">
    <section class="section">
      <article class="section__left">
        <ul class="list">
          <li class="list__item list__item--aviso" data-animation="kf-translate-y" style="--kf-delay: 100">
            <h3 class="list-title">Avisos</h3>
            <p class="list-subtitle">Recibe avisos al instante</p>
          </li>
          <li class="list__item list__item--notificacion" data-animation="kf-translate-y" style="--kf-delay: 200">
            <h3 class="list-title">Notificaciones</h3>
            <p class="list-subtitle">Recibe avisos al instante</p>
          </li>
          <li class="list__item list__item--calendario" data-animation="kf-translate-y" style="--kf-delay: 300">
            <h3 class="list-title">Calendario</h3>
            <p class="list-subtitle">Recibe avisos al instante</p>
          </li>
        </ul>
      </article>
      <article class="section__right">
        <img src="https://raw.githubusercontent.com/ivanalbizu/animacion-landing-con-intersercion-observer/master/img/model.jpg" data-animation="kf-fade-in" alt="">
      </article>
    </section>
    <section class="section">
      <article class="section__full">
        <img src="https://raw.githubusercontent.com/ivanalbizu/animacion-landing-con-intersercion-observer/master/img/woman.jpg" alt="">
        <div class="bottom-right" data-animation="kf-circle">
          <h3>Titulo para texto sobre imagen</h3>
          <p>Subtítulo para la sección ubicada sobre la imagen</p>
        </div>
      </article>
    </section>
  </main>

  <footer class="container container--footer">
    <ul class="footer-menu">
      <li class="footer-menu__group" data-animation="kf-left-to-right" style="--kf-delay: 100">
        <h3 class="footer-title">Bloque 1</h3>
        <ul>
          <li><a class="footer-link" href="#!">Item 1</a></li>
          <li><a class="footer-link" href="#!">Item 2</a></li>
          <li><a class="footer-link" href="#!">Item 3</a></li>
          <li><a class="footer-link" href="#!">Item 4</a></li>
        </ul>
      </li>
      <li class="footer-menu__group" data-animation="kf-left-to-right" style="--kf-delay: 200">
        <h3 class="footer-title">Bloque 2</h3>
        <ul>
          <li><a class="footer-link" href="#!">Item 1</a></li>
          <li><a class="footer-link" href="#!">Item 2</a></li>
          <li><a class="footer-link" href="#!">Item 3</a></li>
          <li><a class="footer-link" href="#!">Item 4</a></li>
        </ul>
      </li>
      <li class="footer-menu__group" data-animation="kf-left-to-right" style="--kf-delay: 300">
        <h3 class="footer-title">Bloque 3</h3>
        <ul>
          <li><a class="footer-link" href="#!">Item 1</a></li>
          <li><a class="footer-link" href="#!">Item 2</a></li>
          <li><a class="footer-link" href="#!">Item 3</a></li>
          <li><a class="footer-link" href="#!">Item 4</a></li>
        </ul>
      </li>
      <li class="footer-menu__group" data-animation="kf-left-to-right" style="--kf-delay: 400">
        <h3 class="footer-title">Bloque 4</h3>
        <ul>
          <li><a class="footer-link" href="#!">Item 1</a></li>
          <li><a class="footer-link" href="#!">Item 2</a></li>
          <li><a class="footer-link" href="#!">Item 3</a></li>
          <li><a class="footer-link" href="#!">Item 4</a></li>
        </ul>
      </li>
    </ul>
  </footer>
</body>
</html>
$blue: #0a526e;
* {
  padding: 0;
  margin: 0;
  &, &::after, *::before {
    box-sizing: border-box;
  }
}
html, body {
  height: 100%;
  overflow-x: hidden;
}
html {
  font-family: 'Merriweather', serif;
  font-weight: 300;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
fieldset,
legend {
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  padding-block-end: 0;
  border-width: 0;
}

ul {list-style: none;}
a {
  text-decoration: none;
  color: #fff;
}
img {
  max-width: 100%;
  display: block;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

.container {
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 0 15px;
  &--header{
    background-color: $blue;
    flex-direction: column;
    margin-bottom: 60px;
  }
  &--content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin-bottom: 60px;
  }
  &--footer {
    background-color: $blue;
    padding-top: 60px;
  }
}
.nav,
.banner {
  width: 100%;
  max-width: 1420px;
  margin: auto;
  flex-wrap: wrap;
}

.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 8px 0;
  &__logo {
    .logo {
      max-width: 100px;
    }
  }
  &__menu {
    display: flex;
    justify-content: space-around;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin: 20px 0;
    border: 1px solid #fff;
    border-width: 1px 0
  }
  a {
    display: inline-block;
    padding: 5px 0;
  }
}

.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  &__txt {
    width: 100%;
    margin-bottom: 40px;
  }
  &__form {
    width: 100%;
    background-color: #fff;
    padding: 24px 20px;
    border-bottom: 8px solid cadetblue;
  }
}

.section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  &:not(:last-of-type) {
    margin-bottom: 90px;
  }
  
  &__left {
    width: 100%;
  }
  &__right {
    width: 100%;
  }
  
  &__full {
    position: relative;
    .bottom-right {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(255,255,255,.8);
      padding: 15px;
    }
  }
}

.footer-menu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1420px;
  &__group {
    width: 50%;
    margin-bottom: 2.5em;
  }
}
.banner-title,
.banner-subtitle,
.footer-title {
  color: #fff;
}
.banner-title {
  font-size: 2em;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1px;
  margin-bottom: .7em;
}
.list-title {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .5px;
  margin-bottom: .2em;
  color: $blue;
}
.list-subtitle {
  font-size: .9em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .5px;
  margin-bottom: 0;
  color: $blue;
}
.banner-subtitle {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .5px;
  margin-bottom: 0;
}
.footer-title {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .5px;
  margin-bottom: 1em;
  text-transform: uppercase;
}
.footer-link {
  font-size: .9em;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .5px;
  margin-bottom: 1.5em;
}

.list {
  display: flex;
  flex-wrap: wrap;
  &__item {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    width: 100%;
    margin-bottom: 1.4em;

    &::before {
      content: "";
      grid-row: 1/3;
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
    }
    
    &--aviso {
      &::before {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0%0D%0APSI0MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwYTUyNmUiIHN0%0D%0Acm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJv%0D%0AdW5kIj4KICA8cGF0aCBkPSJNMjIgMTdIMmEzIDMgMCAwIDAgMy0zVjlhNyA3IDAgMCAxIDE0IDB2%0D%0ANWEzIDMgMCAwIDAgMyAzem0tOC4yNyA0YTIgMiAwIDAgMS0zLjQ2IDAiPjwvcGF0aD4KPC9zdmc+);
      }
    }
    &--notificacion {
      &::before {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0%0D%0APSI0MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwYTUyNmUiIHN0%0D%0Acm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJv%0D%0AdW5kIj4KICA8cGF0aCBkPSJNNCA0aDE2YzEuMSAwIDIgLjkgMiAydjEyYzAgMS4xLS45IDItMiAy%0D%0ASDRjLTEuMSAwLTItLjktMi0yVjZjMC0xLjEuOS0yIDItMnoiPjwvcGF0aD4KICA8cG9seWxpbmUg%0D%0AcG9pbnRzPSIyMiw2IDEyLDEzIDIsNiI+PC9wb2x5bGluZT4KPC9zdmc+);
      }
    }
    &--calendario {
      &::before {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0%0D%0APSI0MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwYTUyNmUiIHN0%0D%0Acm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJv%0D%0AdW5kIj4KICA8cmVjdCB4PSIzIiB5PSI0IiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiBy%0D%0AeT0iMiI+PC9yZWN0PgogIDxsaW5lIHgxPSIxNiIgeTE9IjIiIHgyPSIxNiIgeTI9IjYiPjwvbGlu%0D%0AZT4KICA8bGluZSB4MT0iOCIgeTE9IjIiIHgyPSI4IiB5Mj0iNiI+PC9saW5lPgogIDxsaW5lIHgx%0D%0APSIzIiB5MT0iMTAiIHgyPSIyMSIgeTI9IjEwIj48L2xpbmU+Cjwvc3ZnPgo=);
      }
    }
  }
}

.form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.select_container {
  display: inline-block;
  width: 100%;
  position: relative;
  color: #242424;
  margin-bottom: 1.5em;
  
  summary::after {
    content: "\00203A";
    position: absolute;
    right: 12px;
    top: calc(50%);
    transform: translateY(-50%) rotate(90deg);
    pointer-events: none;
  }
  
  &[open] summary::after {
    content: "\002039";
  }
}

summary {
  cursor: pointer;
  padding: 6px 12px;
  background: #f6f6f6;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }
  
  &:hover {
    background: #ededed;
  }
}

.select {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  z-index: 1;

  &__option {
    cursor: pointer;
    padding: 6px 12px;
    input {
      display: none;
    }
  }
  &:hover .select__option.active {
    background: #fff;
    color: #454545;
  }
}

.select__option.active,
.select:hover .select__option.active:hover,
.select__option:hover {
  background: #007fff;
  color: #fff;
}
.btn {
  width: 100%;
  background-color: $blue;
  border: none;
  color: #fff;
  padding: 15px 20px;
  cursor: pointer;
  font-family: 'Merriweather', serif;
  font-size: .9em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (min-width: 576px) {
  .banner {
    &__form {
      padding: 5% 4%;
    }
  }
  .list {
    justify-content: space-between;
    text-align: center;
    &__item {
      grid-template-rows: 60px 1fr;
      grid-template-columns: auto;
      width: 30%;
      &::before {
        background-position: center;
        width: 100%;
      }
    }
  }
  .section {
    &__full {
      .bottom-right {
        left: initial;
        padding: 40px;
        text-align: right;
      }
    }
  }

  .select_container {
    width: 48%;
  }
}

@media (min-width: 768px) {
  .container {
    &--header{
      margin-bottom: 120px;
    }
    &--content {
      margin-bottom: 120px;
    }
    &--footer {
      padding-top: 40px;
    }
  }

  .nav {
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 90px;
    &__menu {
      justify-content: space-between;
      margin: 0 0 0 auto;
      width: auto;
      border: 0;
      li:not(:first-of-type) {
        margin-left: 45px;
      }
    }
  }
  
  .section {
    &__left {
      width: 35%;
    }
    &__right {
      width: 55%;
    }
    &__full {
      .bottom-right {
        padding: 60px;
      }
    }
  }

  .list {
    justify-content: flex-start;
    text-align: left;
    &__item {
      grid-template-rows: auto;
      grid-template-columns: 60px 1fr;
      width: 100%;
      &:not(:last-child) {
        margin-bottom: 3em;
      }
      &::before {
        background-position: left;
        width: auto;
      }
    }
  }

  .footer-menu {
    &__group {
      width: auto;
    }
  }


  .banner-title {
    font-size: 4em;
    line-height: 1.4;
    margin-bottom: .7em;
  }
  .banner-subtitle {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 0;
  }

  .list-title {
    font-size: 1.2em;
  }
  .list-subtitle {
    font-size: 1em;
  }
  .footer-title {
    font-size: 1.1em;
    line-height: 1.5;
    letter-spacing: .5px;
    margin-bottom: 1em;
  }
  .footer-link {
    font-size: .9em;
    line-height: 1.5;
    letter-spacing: .5px;
    margin-bottom: 1.5em;
  }
}

@media (min-width: 992px) {
  .container {
    &--header {
      height: 100vh;
      max-height: 800px;
    }
    &--footer {
      padding-top: 60px;
    }
  }
  .nav {
    margin-top: 25px;
  }
  .banner {
    &__txt {
      width: 50%;
      margin-bottom: 100px;
    }
    &__form {
      width: 40%;
      margin-bottom: 100px;
      padding: 6% 4%;
    }
  }
  .select_container {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .nav {
    margin-top: 10px;
  }
  .select_container {
    width: 48%;
  }
}



//Animations
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes leftToRight {
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes circle {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
  }
}
@keyframes words {
	0% {
    color: transparent;
	}
	100% {
    color: #fff;
	}
}
@keyframes translateY {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scale-out-center {
  0% {
    transform: scale(3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.enable-js {
  display: none;
  font-size: .8em;
  margin-bottom: .8em;
  text-align: center;
}
:root.no-js {
  .enable-js {
    display: block;
  }
}
[data-animation="kf-fade-in"] {
  opacity: 0;
  &.kf-fade-in {
    animation: fadeIn 1s ease 0s forwards;
  }
}
[data-animation="kf-left-to-right"] {
  opacity: 0;
  transform: translateX(-5px);
  &.kf-left-to-right {
    animation: leftToRight .6s ease-in-out 0s forwards;
  }
}
[data-animation="kf-circle"] {
  opacity: 0;
  &.kf-circle {
    animation: circle 2s ease-in-out 0s forwards;
  }
}
[data-animation="kf-words"] {
  span {
    color: transparent;
  }
  &.kf-words {
    span {
      animation: words 200ms ease calc(var(--char-index) * 50ms) forwards;
    }
  }
}
[data-animation="kf-translate-y"] {
  opacity: 0;
  &.kf-translate-y {
    animation: translateY 1s ease-in-out 0s forwards;
  }
}

[data-animation="scale-out-center"] {
  opacity: 0;
  &.scale-out-center {
    animation: scale-out-center 1s ease-in-out 0s forwards;
  }
}


@media (min-width: 576px) {
  [data-animation][style*="--kf-delay"] {
    animation-delay: calc(var(--kf-delay) * 1ms);
  }
}
View Compiled
class detailSelect {
  constructor(container) {
    this.container = document.querySelector(container);
    this.options = document.querySelectorAll(`${container} > .select > .select__option`);
    this.value = this.container.querySelector('summary').textContent;
    this.mouseDown = false;
    this._addEventListeners();
    this._setAria();
    this.updateValue();
  }

  // Private function to set event listeners
  _addEventListeners() {
    this.container.addEventListener('toggle', () => {
      if (this.container.open) return;
      this.updateValue();
    })

    this.container.addEventListener('focusout', e => {
      if (this.mouseDown) return;
      this.container.removeAttribute('open');
    })

    this.options.forEach(opt => {
      opt.addEventListener('mousedown', () => {
        this.mouseDown = true;
      })
      opt.addEventListener('mouseup', () => {
        this.mouseDown = false;
        this.container.removeAttribute('open');
      })
    })

    this.container.addEventListener('keyup', e => {
      const keycode = e.which;
      const current = [...this.options].indexOf(this.container.querySelector('.active'));
      switch (keycode) {
        case 27: // ESC
          this.container.removeAttribute('open');
          break;
        case 35: // END
          e.preventDefault();
          if (!this.container.open) this.container.setAttribute('open', '');
          this.setChecked(this.options[this.options.length - 1].querySelector('input'))
          break;
        case 36: // HOME
          e.preventDefault();
          if (!this.container.open) this.container.setAttribute('open', '');
          this.setChecked(this.options[0].querySelector('input'))
          break;
        case 38: // UP
          e.preventDefault();
          if (!this.container.open) this.container.setAttribute('open', '');
          this.setChecked(this.options[current > 0 ? current - 1 : 0].querySelector('input'));
          break;
        case 40: // DOWN
          e.preventDefault();
          if (!this.container.open) this.container.setAttribute('open', '');
          this.setChecked(this.options[current < this.options.length - 1 ? current + 1 : this.options.length - 1].querySelector('input'));
          break;
      }
    })
  }

  _setAria() {
    this.container.setAttribute('aria-haspopup', 'listbox');
    const selectBox = this.container.querySelector('.select');
    selectBox.setAttribute('role', 'listbox');
    selectBox.querySelector('[type=radio]').setAttribute('role', 'option')
  }

  updateValue(e) {
    const that = this.container.querySelector('input:checked');
    if (!that) return;
    this.setValue(that)
  }

  setChecked(that) {
    that.checked = true;
    this.setValue(that)
  }

  setValue(that) {
    if (this.value == that.value) return;

    this.container.querySelector('summary').textContent = that.parentNode.textContent;
    this.value = that.value;

    this.options.forEach(opt => {
      opt.classList.remove('active');
    })
    that.parentNode.classList.add('active');

    this.container.dispatchEvent(new Event('change'));
  }
}


const ioHandler = (entries, self) => {
  for (let entry of entries) {
    const target = entry.target;

    if (entry.intersectionRatio > 0.7) {
      target.classList.add(target.getAttribute("data-animation"))
      self.unobserve(target);
    }
  }
}

const ioConfig = {
  threshold: 0.7
};

const elFactory = (type, attributes, ...children) => {
  const el = document.createElement(type)

  for (key in attributes) {
    el.setAttribute(key, attributes[key])
  }

  children.forEach(child => {
    if (typeof child === 'string') el.appendChild(document.createTextNode(child))
    else el.appendChild(child)
  })

  return el
}

const createFrameSlides = chars => {
  const fragment = new DocumentFragment();
  chars = chars.split('');
  chars.forEach((char, index) => {
    const el = elFactory(
      'span',
      { 
        'data-char': `${char}`,
        class: `char`,
        style: `--char-index:${index}`
      },
      `${char}`
    )
    fragment.appendChild(el);
  })
  
  return fragment;
}


document.addEventListener('DOMContentLoaded', () => {
  
  let splits = document.querySelectorAll('[data-split-word]');

  splits.forEach(split => {
    let splitTextContent = split.textContent;
  
    split.innerHTML = '';
    split.appendChild(createFrameSlides(splitTextContent))
  })


  new detailSelect('#js-select-level');
  new detailSelect('#js-select-city');

  const blocks = document.querySelectorAll("[data-animation]");

  const io = new IntersectionObserver(ioHandler, ioConfig);

  [].forEach.call(blocks, block => io.observe(block));

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.