<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.