<section class="container">
<section id="page-editor-and-content-entry">
<figure class="page-editor-animation">
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGNUY1RjUiIGQ9Ik03NjUuMjIyLDBIMzQuNzkxQzE1LjU3NywwLDAsMTUuNTc3LDAsMzQuNzkxdjQ5OC41NDZjMCwxOS4yMjcsMTUuNTc3LDM0Ljc5MSwzNC43OTEsMzQuNzkxaDczMC40MzINCgkJYzE5LjIxMywwLDM0Ljc3Ny0xNS41NjQsMzQuNzc3LTM0Ljc5MVYzNC43OTFDODAwLDE1LjU3Nyw3ODQuNDM1LDAsNzY1LjIyMiwweiBNNzU5LjIyNSw0ODMuODY3SDM3Ljc0NlYzNy42aDcyMS40NzlWNDgzLjg2N3oiLz4NCgk8cGF0aCBmaWxsPSIjRjVGNUY1IiBkPSJNNTE5LjU2OCw2NDkuNjE3aC0yMy40MjVsLTMwLjItNjAuOTI2SDMzMi42MTdsLTI4Ljc4NCw2MC45MjZoLTIzLjQwMWMtNC43NzMsMC04LjY5MSwzLjkwNi04LjY5MSw4LjY5MQ0KCQljMCw0Ljc5NywzLjkxOCw4LjcwMyw4LjY5MSw4LjcwM2gyMzkuMTM2YzQuNzg1LDAsOC42OTEtMy45MDYsOC42OTEtOC43MDNDNTI4LjI1OSw2NTMuNTIzLDUyNC4zNTMsNjQ5LjYxNyw1MTkuNTY4LDY0OS42MTd6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==" class="page-editor__mac"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0iI0ZGOTU5MiIgY3g9Ijk4LjM3MiIgY3k9Ijk5LjgyOSIgcj0iMjcuNjU2Ii8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjExMi4wMzksOTYuMDIgMTAyLjE4MSw5Ni4wMiAxMDIuMTgxLDg2LjE2MiA5NC41NjMsODYuMTYyIDk0LjU2Myw5Ni4wMiA4NC43MDYsOTYuMDIgDQoJODQuNzA2LDEwMy42MzggOTQuNTYzLDEwMy42MzggOTQuNTYzLDExMy40OTUgMTAyLjE4MSwxMTMuNDk1IDEwMi4xODEsMTAzLjYzOCAxMTIuMDM5LDEwMy42MzggIi8+DQo8L3N2Zz4NCg==" class="page-editor__add page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiM5MzJCMUMiIHBvaW50cz0iNTU2LjU0NiwyODkuNjA5IDUwNS44MDksMjgxLjA2MiA1MzYuMzkzLDMyMi40MzcgNTQ0LjE4MiwzMDkuNzQ5IDU2NS4yMzUsMzIyLjY3MyA1NjkuODA5LDMxNS4yMjIgDQoJNTQ4Ljc1NywzMDIuMjk3ICIvPg0KPC9zdmc+DQo=" class="page-editor__cursor page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjEwMC4xMjIiIHk9Ijk5LjgyOSIgZmlsbD0iI0ZGOTU5MiIgd2lkdGg9IjU5OS43NTUiIGhlaWdodD0iMzIxLjcxOSIvPg0KPC9zdmc+DQo=" class="page-editor__panel page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjE0MC4yNjQiIHk9IjE1Ni42MTEiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSI5NC4zMTkiIGhlaWdodD0iMTEzLjAwOSIvPg0KPC9zdmc+DQo=" class="page-editor__content--1 page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjI3Ni43NDEiIHk9IjE1Ni42MTEiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSIxMTMuMzg3IiBoZWlnaHQ9IjE1Ny4wOTUiLz4NCjwvc3ZnPg0K" class="page-editor__content--2 page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjQzMC44NjIiIHk9IjE1NS45MTQiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSIxMTYuNTMiIGhlaWdodD0iNzQuMDI3Ii8+DQo8L3N2Zz4NCg==" class="page-editor__content--3 page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjU4NS44MTQiIHk9IjE1Ni42MTEiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSI2Ny4zMTMiIGhlaWdodD0iMTEiLz4NCjxyZWN0IHg9IjU4NS44MTQiIHk9IjE3Ny4yNzUiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSI2Ny4zMTMiIGhlaWdodD0iMTEiLz4NCjxyZWN0IHg9IjU4NS44MTQiIHk9IjE5Ny45MzkiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSI1OC4zMTMiIGhlaWdodD0iMTEiLz4NCjxyZWN0IHg9IjU4NS44MTQiIHk9IjIxOC42MDMiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSI0OC4zMTMiIGhlaWdodD0iMTEiLz4NCjxyZWN0IHg9IjU4NS44MTQiIHk9IjIzOS4yNjciIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSI2Ny4zMTMiIGhlaWdodD0iMTEiLz4NCjwvc3ZnPg0K" class="page-editor__content--4 page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjE0MC4yNjQiIHk9IjM0Ni4yNTkiIGZpbGw9IiNFNTQxMjgiIHdpZHRoPSI1MTIuODY0IiBoZWlnaHQ9IjM4LjAzMyIvPg0KPC9zdmc+DQo=" class="page-editor__content--5 page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjcxQTBGIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI2MTQuMjM2LDIzOS45NzYgNjE0LjIzNiwyNDMuOTc2IA0KCQkJNjEwLjIzNiwyNDMuOTc2IAkJIi8+DQoJCQ0KCQkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjcxQTBGIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0iOC4xMDY3LDguMTA2NyIgeDE9IjYwMi4xMjkiIHkxPSIyNDMuOTc2IiB4Mj0iNTA4LjkwMyIgeTI9IjI0My45NzYiLz4NCgkJPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNTA0Ljg0OSwyNDMuOTc2IDUwMC44NDksMjQzLjk3NiANCgkJCTUwMC44NDksMjM5Ljk3NiAJCSIvPg0KCQkNCgkJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjcuODQ3MSw3Ljg0NzEiIHgxPSI1MDAuODQ5IiB5MT0iMjMyLjEyOCIgeDI9IjUwMC44NDkiIHkyPSI5NC44MDMiLz4NCgkJPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNTAwLjg0OSw5MC44OCA1MDAuODQ5LDg2Ljg4IA0KCQkJNTA0Ljg0OSw4Ni44OCAJCSIvPg0KCQkNCgkJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjguMTA2Nyw4LjEwNjciIHgxPSI1MTIuOTU2IiB5MT0iODYuODgiIHgyPSI2MDYuMTgyIiB5Mj0iODYuODgiLz4NCgkJPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNjEwLjIzNiw4Ni44OCA2MTQuMjM2LDg2Ljg4IA0KCQkJNjE0LjIzNiw5MC44OCAJCSIvPg0KCQkNCgkJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjcuODQ3MSw3Ljg0NzEiIHgxPSI2MTQuMjM2IiB5MT0iOTguNzI3IiB4Mj0iNjE0LjIzNiIgeTI9IjIzNi4wNTIiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==" class="page-editor__placeholder--1 page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjcxQTBGIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSI2MTQuMjM2LDQzMC40NjYgNjE0LjIzNiw0MzQuNDY2IA0KCQkJNjEwLjIzNiw0MzQuNDY2IAkJIi8+DQoJCQ0KCQkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjcxQTBGIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0iOC4xMDY3LDguMTA2NyIgeDE9IjYwMi4xMjkiIHkxPSI0MzQuNDY2IiB4Mj0iNTA4LjkwMyIgeTI9IjQzNC40NjYiLz4NCgkJPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNTA0Ljg0OSw0MzQuNDY2IDUwMC44NDksNDM0LjQ2NiANCgkJCTUwMC44NDksNDMwLjQ2NiAJCSIvPg0KCQkNCgkJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjcuODQ3MSw3Ljg0NzEiIHgxPSI1MDAuODQ5IiB5MT0iNDIyLjYxOSIgeDI9IjUwMC44NDkiIHkyPSIyODUuMjkzIi8+DQoJCTxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiM2NzFBMEYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjUwMC44NDksMjgxLjM3IDUwMC44NDksMjc3LjM3IA0KCQkJNTA0Ljg0OSwyNzcuMzcgCQkiLz4NCgkJDQoJCQk8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiM2NzFBMEYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSI4LjEwNjcsOC4xMDY3IiB4MT0iNTEyLjk1NiIgeTE9IjI3Ny4zNyIgeDI9IjYwNi4xODIiIHkyPSIyNzcuMzciLz4NCgkJPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNjEwLjIzNiwyNzcuMzcgNjE0LjIzNiwyNzcuMzcgDQoJCQk2MTQuMjM2LDI4MS4zNyAJCSIvPg0KCQkNCgkJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3MUEwRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjcuODQ3MSw3Ljg0NzEiIHgxPSI2MTQuMjM2IiB5MT0iMjg5LjIxNyIgeDI9IjYxNC4yMzYiIHkyPSI0MjYuNTQyIi8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=" class="page-editor__placeholder--2 page-editor__element"/>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjY3LjAxMnB4IiB2aWV3Qm94PSIwIDAgODAwIDY2Ny4wMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA2NjcuMDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjI3Ni43NDEiIHk9IjE1Ni42MTEiIGZpbGw9IiNGRjk1OTIiIHdpZHRoPSIxMTMuMzg3IiBoZWlnaHQ9IjE1Ny4wOTUiLz4NCjwvc3ZnPg0K" class="page-editor__content--2--active page-editor__element"/>
</figure>
</section>
</section>@import "compass/css3";
$sitecore-red: #e54028;
$sidebar-bg: #932b1c;
$white: #fff;
@mixin prefix($name, $arguments...) {
-webkit-#{$name}: $arguments;
-ms-#{$name}: $arguments;
-moz-#{$name}: $arguments;
-o-#{$name}: $arguments;
#{$name}: $arguments;
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin step-animation($classname, $duration: .5s, $easing: cubic-bezier(.3,1.26,.75,1.16), $delay-increment: .1, $iterations: 3, $optional-selector: '', $initial-delay: 0) {
@for $i from 1 through $iterations {
& #{$classname}:nth-child(#{$i}) #{$optional-selector} {
@include prefix(transition-delay, #{($i - 1)*$delay-increment + $initial-delay}s);
}
}
}
@mixin step-keyframe-animation($classname, $duration: .5s, $easing: cubic-bezier(.3,1.26,.75,1.16), $delay-increment: .1, $iterations: 3, $optional-selector: '', $initial-delay: 0) {
@for $i from 1 through $iterations {
& #{$classname}:nth-child(#{$i}) #{$optional-selector} {
@include prefix(animation-delay, #{($i - 1)*$delay-increment + $initial-delay}s);
}
}
}
body {
background: $sitecore-red;
color: $white;
font-family: Helvetica, Arial, sans-serif;
font-weight: lighter;
line-height: 140%;
}
h1,
h2,
h3,
h4,
h5 {
font-family: "Museo Sans";
font-weight: 300;
}
h2 {
font-size: 2em;
}
.container {
margin: 0 auto;
max-width: 720px;
width: 90%;
}
.container > section {
margin: 6em 0;
}
figure {
margin: 0;
}
/*--------------------------------------------------------------------
Page Editor
---------------------------------------------------------------------*/
.page-editor-animation {
position: relative;
margin: 3em auto;
width: 450px;
img {
max-width: 100%;
}
}
.page-editor__element {
position: absolute;
top: 0;
z-index: 1;
}
.page-editor__add {
@include prefix(animation, page-editor__add 10s infinite both);
z-index: 99;
left: 0;
top: 0;
}
.page-editor__cursor {
@include prefix(animation, page-editor__cursor 10s infinite both);
z-index: 100;
}
.page-editor__panel {
@include prefix(animation, page-editor__panel 10s infinite both);
@include prefix(transform-origin, 15% 15%);
}
.page-editor__content--1 {
@include prefix(animation, page-editor__content--1 10s infinite both);
}
.page-editor__content--2 {
@include prefix(animation, page-editor__content--2 10s infinite both);
}
.page-editor__content--3 {
@include prefix(animation, page-editor__content--3 10s infinite both);
}
.page-editor__content--4 {
@include prefix(animation, page-editor__content--4 10s infinite both);
}
.page-editor__content--5 {
@include prefix(animation, page-editor__content--5 10s infinite both);
}
.page-editor__content--2--active {
@include prefix(animation, page-editor__content--2--active 10s infinite both);
}
.page-editor__placeholder--1 {
@include prefix(animation, page-editor__placeholder--1 10s infinite both);
@include prefix(transform-origin, 70% 25%);
z-index: 98;
}
.page-editor__placeholder--2 {
@include prefix(animation, page-editor__placeholder--2 10s infinite both);
z-index: 98;
}
/* Animations */
@include keyframes(page-editor__add) {
}
@include keyframes(page-editor__cursor) {
0% {
left: 20px;
}
/* Move to add new item button */
10% {
left: -230px;
top: -100px;
}
20% {
left: -230px;
top: -100px;
}
/* Move to second content item */
28%, 33% {
left: -110px;
top: -20px;
}
/* Move to third content item */
40%, 47% {
left: -20px;
top: -60px;
}
/* Move back to second content item */
52%, 60% {
left: -110px;
top: -40px;
}
/* Move active item to placeholder */
70%, 85% {
top: -75px;
left: 20px;
}
/* Move back to start */
90%, 100% {
left: 20px;
top: 0;
}
}
@include keyframes(page-editor__panel) {
0%, 10% {
opacity: 0;
}
11% {
opacity: 1;
@include prefix(transform, scale(0))
}
/* Show the content panel */
15%, 58% {
@include prefix(transform, scale(1))
}
/* Hide the content panel after a content block has been picked */
61%, 100% {
@include prefix(transform, scale(0))
}
}
@include keyframes(page-editor__content--1) {
0%, 16% {
opacity: 0;
margin-left: -10px;
}
19%, 54% {
opacity: 1;
margin-left: 0;
}
56%, 100% {
opacity: 0;
}
}
@include keyframes(page-editor__content--2) {
0%, 17% {
opacity: 0;
margin-left: -10px;
}
20%, 24% {
opacity: 1;
margin-left: 0;
@include prefix(transform, scale(1));
}
30%, 33% {
opacity: .5;
}
37%, 49% {
opacity: 1;
}
52%, 54% {
opacity: .5;
}
56%, 100% {
opacity: 0;
}
}
@include keyframes(page-editor__content--3) {
0%, 18% {
opacity: 0;
margin-left: -10px;
}
21%, 36% {
opacity: 1;
margin-left: 0;
}
39%, 48% {
opacity: .5;
}
54% {
opacity: 1;
}
56%, 100% {
opacity: 0;
}
}
@include keyframes(page-editor__content--4) {
0%, 19% {
opacity: 0;
margin-left: -10px;
}
22%, 54% {
opacity: 1;
margin-left: 0;
}
56%, 100% {
opacity: 0;
}
}
@include keyframes(page-editor__content--5) {
0%, 20% {
opacity: 0;
margin-left: -10px;
}
23%, 54% {
opacity: 1;
margin-left: 0;
}
56%, 100% {
opacity: 0;
}
}
@include keyframes(page-editor__content--2--active) {
0%, 56% {
opacity: 0;
}
60% {
opacity: 1;
top: 0;
left: 0;
}
70%, 93% {
top: -39px;
left: 125px;
opacity: 1;
}
95%, 100% {
opacity: 0;
top: -39px;
left: 125px;
}
}
@include keyframes(page-editor__placeholder--1) {
0%, 58% {
opacity: 0;
}
62%, 69% {
opacity: 1;
@include prefix(transform, scale(1));
}
71%, 75% {
opacity: 1;
@include prefix(transform, scale(1.2));
}
78%, 100% {
opacity: 0;
}
}
@include keyframes(page-editor__placeholder--2) {
0%, 58% {
opacity: 0;
}
62%, 75% {
opacity: 1;
}
78%, 100% {
opacity: 0;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.