.main.view_landing_page_accordion #document_title { display: block; } .landing_page_accordion section { overflow: hidden; } .landing_page_accordion section > div { float: left; width: 20%; } .landing_page_accordion section > div > div { box-sizing: content-box; width: calc(100% - 1.5em); height: 12.5em; padding: 0.5em 0.75em; text-align: left; border: none; border-radius: 0.75em; background: none; background-color: #fcfbfa; transition: all 0.4s; overflow: hidden; cursor: pointer; outline: none; } .landing_page_accordion section > div > div:active { outline: none; } .landing_page_accordion section > div > div:hover { background-color: #eee; } .landing_page_accordion section > div > div.active { background-color: #fd6; border-radius: 1.25em; } .landing_page_accordion section > div > div > div { float: right; width: 7em; height: 2em; margin-bottom: 0.5em; color: #fff; background-size: 7em 2em; overflow: hidden; } .landing_page_accordion section.orange > div > div > div { background-image: url('/data/70f56b64-f627-4df5-9b70-7fb0bc9fcf39'); } .landing_page_accordion section.green > div > div > div { background-image: url('/data/1c2b8eae-c6ff-4f08-bada-2eb1f94dc658'); } .landing_page_accordion section.purple > div > div > div { background-image: url('/data/1fc1e86d-7a2f-4355-964f-03e93bf9b69f'); } .landing_page_accordion section > div > div > div > div { float: left; display: block; width: 4.75em; height: 2em; line-height: 1.75em; text-align: center; } .landing_page_accordion section > div > div > div > div > span { font-size: 0.75em; } .landing_page_accordion section > div > div > div > span { float: right; display: block; width: 2.25em; height: 2em; line-height: 2em; text-align: center; } .landing_page_accordion section > div > div > figure { clear: right; width: 100%; height: 7em; padding: 0; margin: 0; border-top-left-radius: 2em; border-bottom-right-radius: 2em; /*background-image: url('/data/6b4b1b45-366c-4ece-9601-b22d38f046ae');*/ background-size: cover; background-position: center center; } .landing_page_accordion section.columns_3 > div > div > figure.chapter_1 { background-image: url('/data/8ca59798-88f4-42f0-884c-61f22c013aae'); } .landing_page_accordion section.columns_3 > div > div > figure.chapter_2 { background-image: url('/data/616981c0-a999-407f-b530-c38c5c7e369a'); } .landing_page_accordion section.columns_3 > div > div > figure.chapter_3 { background-image: url('/data/ebcafc6d-eba3-4a7b-9e00-d7f423250f1a'); } /* chapter images */ .landing_page_accordion section.orange > div > div > figure.chapter_1 { background-image: url('/data/f7fb003b-8788-45f7-a40f-9684653f0b6f'); } .landing_page_accordion section.orange > div > div > figure.chapter_2 { background-image: url('/data/28106200-7b42-4506-a6ac-3ab51567abe8'); } .landing_page_accordion section.orange > div > div > figure.chapter_3 { background-image: url('/data/f32f6509-d60d-4100-92ea-267a5657d430'); } .landing_page_accordion section.orange > div > div > figure.chapter_4 { background-image: url('/data/5dd8923f-e3d2-4c22-b52a-698971039660'); } .landing_page_accordion section.green > div > div > figure.chapter_1 { background-image: url('/data/a063343a-4e74-47aa-9ad1-70a0543e2da4'); } .landing_page_accordion section.green > div > div > figure.chapter_2 { background-image: url('/data/ffa05e3d-2d34-4d4f-afdf-7045572c333d'); } .landing_page_accordion section.green > div > div > figure.chapter_3 { background-image: url('/data/bf5ab7d0-7976-4781-8f72-358bf0daa9ff'); } .landing_page_accordion section.green > div > div > figure.chapter_4 { background-image: url('/data/7a24baa1-4bc9-4f22-8174-50b58d3184f0'); } .landing_page_accordion section.green > div > div > figure.chapter_5 { background-image: url('/data/7c619326-3400-4961-b00e-49672bd190eb'); } .landing_page_accordion section.green > div > div > figure.chapter_6 { background-image: url('/data/3e9ba7b1-428b-414a-a776-f3974c0357f0'); } .landing_page_accordion section.green > div > div > figure.chapter_7 { background-image: url('/data/5a2fc06e-9052-419f-aea3-83e3aeb86c48'); } .landing_page_accordion section.green > div > div > figure.chapter_8 { background-image: url('/data/482340d9-7b3d-471b-9db2-948ee99653af'); } .landing_page_accordion section.green > div > div > figure.chapter_9 { background-image: url('/data/b9ea4849-74fe-46aa-86ab-ed590423c194'); } .landing_page_accordion section.purple > div > div > figure.chapter_1 { background-image: url('/data/fc0fbcbe-3a38-4130-89eb-5b9fbd3a4146'); } .landing_page_accordion section.purple > div > div > figure.chapter_2 { background-image: url('/data/27d5b2f2-0766-4b73-a26d-e2c59da438a4'); } .landing_page_accordion section.purple > div > div > figure.chapter_3 { background-image: url('/data/093794a6-6b51-4786-9b22-8647603160cf'); } .landing_page_accordion section.purple > div > div > figure.chapter_4 { background-image: url('/data/d48b0409-1f83-4104-8681-1c211b560f07'); } .landing_page_accordion section.purple > div > div > figure.chapter_5 { background-image: url('/data/263e9590-0a66-4700-bb93-a465dddd99e1'); } .landing_page_accordion section.purple > div > div > figure.chapter_6 { background-image: url('/data/30dee7e5-3599-4901-970b-9e1e10c2f4ed'); } .landing_page_accordion section.purple > div > div > figure.chapter_7 { background-image: url('/data/04b6cbac-ca07-46db-8eb1-119fe8180010'); } .landing_page_accordion section.purple > div > div > figure.chapter_8 { background-image: url('/data/041e486e-e724-42d9-9eeb-a83925885e56'); } .landing_page_accordion section.purple > div > div > figure.chapter_9 { background-image: url('/data/c4996c27-a783-477f-98e2-5f29e39b18cd'); } .landing_page_accordion section.purple > div > div > figure.chapter_10 { background-image: url('/data/9dbc64c0-6009-4efe-8482-d3dff8018e63'); } .landing_page_accordion section > div > div > span { display: block; padding-top: 0.5em; height: 2.5em; line-height: 1.25em; } /* submenus */ .landing_page_accordion section > aside { display: none; float: left; width: 100%; } .landing_page_accordion section > aside.active { display: block; } .landing_page_accordion section > aside > ul { width: 60%; list-style-type: none; padding: 0; margin: 0; } .landing_page_accordion section > aside ul ul { display: none; margin: 0; border-radius: 0; } .landing_page_accordion section > aside ul > li { padding: 0; margin: 0; } .landing_page_accordion section > aside ul > li > button { display: block; box-sizing: content-box; color: #fff; padding: 0.25em 0.75em; width: calc(100% - 1.5em); height: 2em; font-size: 1em; line-height: 2em; text-align: left; border: none; background: #555; outline: none; cursor: pointer; transition: background-color 0.2s; } .landing_page_accordion section > aside ul > li > button > span { float: left; display: block; margin-right: 0.5em; width: 2em; height: 2em; background: url('/data/71028e12-8635-48d7-862c-f5e9384493ef') no-repeat; background-size: 2em 4em; background-position: 0 0; } .landing_page_accordion section > aside ul > li > button.active { background: #000; } .landing_page_accordion section > aside ul > li > button.active > span { background-position: 0 -2em; } .landing_page_accordion section > aside.item-1 > ul, .landing_page_accordion section > aside.item-6 > ul, .landing_page_accordion section > aside.item-11 > ul { margin-left: 20%; } .landing_page_accordion section > aside.item-2 > ul, .landing_page_accordion section > aside.item-3 > ul, .landing_page_accordion section > aside.item-4 > ul, .landing_page_accordion section > aside.item-7 > ul, .landing_page_accordion section > aside.item-8 > ul, .landing_page_accordion section > aside.item-4 > ul, .landing_page_accordion section > aside.item-12 > ul, .landing_page_accordion section > aside.item-13 > ul, .landing_page_accordion section > aside.item-14 > ul { margin-left: 40%; } .landing_page_accordion section > aside ul { margin-top: 0.25em; margin-bottom: 1.25em; border-radius: 0.75em; overflow: hidden; } .landing_page_accordion section > aside ul > li { padding: 0; margin: 0; } .landing_page_accordion section > aside ul > li > a { display: block; padding: 0.25em 0.75em; color: #000; text-decoration: none; background-color: #eee; transition: background-color 0.2s; } .landing_page_accordion section > aside ul > li > a:hover { background-color: #fd6; } .landing_page_accordion section > aside ul > li.active > a { background-color: #fd6; } @media screen and (max-width: 799px) { .landing_page_accordion section > div { width: 33%; } .landing_page_accordion section > aside > ul { width: 100%; margin-left: 0 !important; } } @media screen and (min-width: 800px) /*and (max-width: 1023px)*/ { .landing_page_accordion section > div { width: 25%; } .landing_page_accordion section > aside > ul { width: 75%; } .landing_page_accordion section > aside.item-0 > ul, .landing_page_accordion section > aside.item-4 > ul, .landing_page_accordion section > aside.item-8 > ul { margin-left: 0; } .landing_page_accordion section > aside.item-1 > ul, .landing_page_accordion section > aside.item-5 > ul, .landing_page_accordion section > aside.item-9 > ul, .landing_page_accordion section > aside.item-13 > ul { margin-left: 25%; } .landing_page_accordion section > aside.item-2 > ul, .landing_page_accordion section > aside.item-3 > ul, .landing_page_accordion section > aside.item-6 > ul, .landing_page_accordion section > aside.item-7 > ul, .landing_page_accordion section > aside.item-10 > ul, .landing_page_accordion section > aside.item-11 > ul { margin-left: 30%; } } .landing_page_accordion ul#submenus { display: none; } /** * grammar section - columns */ .landing_page_accordion section.columns > div > div { padding-top: 0.75em; height: 10.5em; } .landing_page_accordion section.columns.columns_3 > div { width: 33%; } @media screen and (max-width: 800px) { .landing_page_accordion section.columns > div { width: 100% !important; } .landing_page_accordion section.columns aside ul { width: 100%; margin-left: 0; } }