<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" onsubmit="event.preventDefault();">
<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="submit">
</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>$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);
}
}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.