.playlist__item__outer { position: relative; padding: 16px 16px !important; } .playlist__item__outer.deselected { display: none; } .playlist__item__inner { position: relative; display: block; width: 100%; border: 0px solid #ec1c99; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; } .playlist__item__image { position: relative; display: inline-block; width: 50%; padding-bottom: 50%; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #e6e7e8; background-size: cover; background-position: 50% center; background-repeat: no-repeat; border-radius: 10px 0px 0px 10px; } .playlist__item__image a { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } .playlist__item__outer.cols_2 .playlist__item__image { width: calc(100% / 2); padding-bottom: calc(100% / 2); } .playlist__item__image:hover { filter: brightness(70%); } .playlist_item_spacer { position: relative; display: block; width: 100%; flex-grow: 1; } .playlist__item__text { position: relative; display: inline-block; width: calc(100% / 1.5); border: 0px solid red; padding: 24px 24px; font-family: 'VAGRoundedNext-Light'; font-size: 18px; line-height: 30px; display: flex; flex-direction: column; flex-wrap: nowrap; border-radius: 0px 10px 10px 0px; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #e6e7e8; } .playlist__item__outer.cols_2 .playlist__item__text { width: calc(100% / 2); } .playlist_section_each_outer--even .playlist__item__text { background-color: #fcfcf9; } .playlist__item__text__upper { position: relative; display: block; } .playlist_item_page_link { display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; font-size: 24px; line-height: 30px; padding-bottom: 8px; color: #ec1c99; } .playlist_item_page_link:hover { color: #ec652c; } .playlist_item_title { display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; font-size: 24px; line-height: 30px; padding-bottom: 8px; } .playlist__item__text ul { margin-left: 0px; } .playlist__item__button__outer { position: relative; display: block; text-align: left; margin-top: 24px; } .playlist__remove__button { display: none; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 18px; line-height: 18px; padding: 6px 50px; border-radius: 16px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec1c99; cursor: pointer; width: 220px; text-align: center; } .playlist__favourite__button { display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 18px; line-height: 18px; padding: 6px 16px; border-radius: 16px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec1c99; cursor: pointer; width: 220px; text-align: center; } .playlist__complete__button { display: none; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 18px; line-height: 18px; padding: 6px 16px; border-radius: 16px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec1c99; cursor: pointer; width: 220px; text-align: center; } .playlist__remove__button:hover, .playlist__favourite__button:hover, .playlist__complete__button:hover, .playlist__favourite__completed:hover, .playlist__review__button:hover { color: #ec652c; border: 1px solid #ec652c; } .playlist__favourite__text { display: none; font-family: 'VAGRoundedNext-SemiBold'; color: #ec652c; font-size: 21px; line-height: 18px; padding: 10px 50px; border-radius: 20px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec652c; width: 220px; text-align: center; } .playlist__favourite__completed { display: none; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 18px; line-height: 18px; padding: 6px 32px; border-radius: 16px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec1c99; width: 180px; text-align: center; cursor: pointer; } .playlist__review__button { display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 18px; line-height: 18px; padding: 6px 16px; border-radius: 16px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec1c99; cursor: pointer; width: 220px; text-align: center; margin: 4px 0px 0px; } .playlist__impact__button { display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 18px; line-height: 18px; padding: 6px 16px; border-radius: 16px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec1c99; cursor: pointer; width: 220px; text-align: center; margin: 4px 0px 0px; } /* .playlist__item__button__outer--favourite .playlist__favourite__button { display: none; } .playlist__item__button__outer--favourite .playlist__favourite__text { display: inline-block; } */ .playlist__item__button__outer--completed .playlist__favourite__button { display: none; } .playlist__item__button__outer--completed .playlist__favourite__completed { display: inline-block; vertical-align: top; } .playlist__item__button__outer--on-favs .playlist__favourite__button { display: none; } .playlist__item__button__outer--on-favs .playlist__complete__button { position: relative; display: inline-block; } .playlist__delete { position: absolute; top: 8px; right: 8px; width: 20px; cursor: pointer; padding: 2px; border: 2px solid #ec1c99; border-radius: 4px; } .playlist__delete:hover { border: 2px solid #ec652c; } .playlist__delete svg { display: block; width: 100%; } .playlist__delete:hover svg path { fill: #ec652c !important; } .playlist__uncomplete { position: relative; display: inline-block; vertical-align: bottom; margin-left: 2px; width: 20px; cursor: pointer; padding: 2px; border: 1px solid #ec652c; border-radius: 4px; display: none; } .playlist__uncomplete:hover { border: 1px solid #ec1c99; } .playlist__uncomplete svg { display: block; width: 100%; fill: #ec652c; } .playlist__uncomplete:hover svg path { fill: #ec1c99 !important; } .playlist__item__button__outer--completed .playlist__uncomplete { display: inline-block; } .hidden_empty_favourites { position: relative; display: none; width: 100%; } .playlist__item__button__outer--inpage { padding: 0px 16px; } /* NEW PLAYLISTS */ .playlist_section_each_outer { position: relative; border: 0px solid red; padding: 36px 0px 36px; } .playlist_section_each_outer--fav_nav { padding: 16px 0px 16px; } .playlist_section_each_outer--tools_nav { padding: 16px 0px 16px; background-color: #282828; } .playlist_section_each_outer--even { background-color: #e6e7e8; } .playlist_title_outer { position: relative; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; text-align: center; color: #282828; font-size: 24px; line-height: 30px; } .playlist_subtitle { font-size: 14px; line-height: 24px; text-transform: uppercase; } .modal__outer--add-to-fav .modal__bg { background-color: transparent; } .modal__outer--add-to-fav .modal__content__outer { background-color: rgba(41,41,41,0.95); border: 2px solid #ec1c99; } .modal__outer--add-to-fav .modal__content { padding: 56px 24px; } .modal__outer--add-to-fav .modal__close { display: none; } .modal__outer--add-to-fav .modal_window_inner_close { display: block; position: absolute; margin-top: -3px; opacity: 0; transition: all 0.5s; visibility: hidden; top: 20px; right: 24px; z-index: 200; } .modal__outer--add-to-fav .modal_window_inner_close.open { display: block; visibility: visible; opacity: 1; transition: all 0.5s; } .modal_window_inner_close .c-hamburger--htx span { background: none !important; } .modal_window_inner_close .c-hamburger--htx span::before { height: 8px; top: 0px; transform: rotate(45deg); box-shadow: 0px 0px 0px rgba(11,24,49,1); width: 48px; } .modal_window_inner_close .c-hamburger--htx span::after { height: 8px; bottom: 0px; transform: rotate(-45deg); box-shadow: 0px 0px 0px rgba(11,24,49,1); width: 48px; } .modal_window_inner_close .c-hamburger span { display: block; position: absolute; top: 20px; left: 0px; right: 0px; height: 8px; background-color: #FFFFFF; border-radius: 2px; } .modal_window_inner_close .c-hamburger span::before { background-color: #FFFFFF; border-radius: 3px; } .modal_window_inner_close .c-hamburger span::after { background-color: #FFFFFF; border-radius: 3px; } .modal__form--atf { max-width: 700px; margin: 0 auto !important; } .modal__form--atf .modal__input { vertical-align: top; } .modal__form--atf .form__field__title { min-height: 0px; } .modal__form--atf .modal__input input { display: inline-block; color: #282828; background-color: #f8f7f0; line-height: 24px; } .modal__form--atf ::placeholder { color: #282828; } ::-webkit-input-placeholder { line-height: 24px; } /* .modal__form--atf input:placeholder-shown { color: #282828; line-height: 24px; } */ .form__field__dropdown__arrow { display: inline-block; position: absolute; right: 16px; top: 24px; width: 16px; height: 11px; cursor: pointer; background-size: 16px; background-repeat: no-repeat; background-image: url(../img/down_arrow.svg); background-position: 50% 50%; } .modal__button--atf { margin-top: 36px; } .modal__button--atf--disabled { color: #939393; border-color: #939393; } .form__field__dropdown__outer { position: relative; display: inline-block; vertical-align: top; border: 0px solid #F8F7F1; width: 100%; margin: 0px 2px; background-color: #f8f7f0; z-index: 710; transition: all 1s; } .form__field__dropdown__default { position: relative; display: block; width: 100%; cursor: pointer; color: #282828; font-family: 'VAGRoundedNext-Light'; font-size: 24px; line-height: 34px; padding: 12px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .form__field__dropdown__options { position: absolute; width: 100%; display: block; top: 100%; left: 0px; height: 0px; background-color: #f8f7f0; overflow: hidden; transition: all 0s; padding-bottom: 0px; opacity: 0; } .form__field__dropdown__outer--open .form__field__dropdown__options { display: block; height: auto; max-height: 150px; transition: opacity 0.5s; padding-bottom: 8px; opacity: 1; } .form__field__dropdown__option { position: relative; display: block; width: 100%; cursor: pointer; color: #282828; font-family: 'VAGRoundedNext-Light'; font-size: 18px; line-height: 30px; padding: 0px 24px 0px 16px; margin-top: 4px; text-align: left; } .form__field__dropdown__option:hover { color: #ec1c99; } .form__field__dropdown__option.selected { background-color: #fde8f4; } .playlist_item_playlist_list { position: relative; display: none; } .playlist_item_playlist_list a { color: #ec1c99; } .playlist_item_playlist_list a:hover { color: #ec652c; } .playlist__item__button__outer--favourite .playlist_item_playlist_list { display: block; } .playlist_item_playlist_list_intro { position: relative; display: block; font-family: 'VAGRoundedNext-Light'; font-style: italic; font-size: 14px; line-height: 18px; color: #282828; margin-top: 8px; } .playlist_item_playlist_list_completed_note { position: relative; display: block; font-family: 'VAGRoundedNext-Light'; font-style: italic; font-size: 14px; line-height: 18px; color: #282828; } .playlist_favourite_link { position: relative; display: inline; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 18px; } .playlist_divider { position: relative; display: inline; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 18px; padding: 0px 4px; } .playlist_item_list { position: relative; display: block; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 18px; } .content__inner--playlist_item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .content__inner--playlist_item .playlist__item__outer { align-self: stretch; } .content__inner--playlist { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .content__inner--playlist .playlist__item__outer { align-self: stretch; } .playlist__item__inner { height: 100%; } .playlist_anchor { position: absolute; top: -160px; } .fav_nav_outer { padding-bottom: 16px; padding-top: 0px; } .fav_nav_title { position: relative; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; text-align: center; color: #282828; font-size: 14px; line-height: 24px; text-transform: uppercase; } .fav_nav_item { position: relative; display: inline; font-family: 'VAGRoundedNext-SemiBold'; font-size: 24px; line-height: 36px; color: #ec1c99; vertical-align: top;} .fav_nav_item:hover { color: #ec652c; } .fav_nav_list { position: relative; width: 100%; display: block; padding: 0px 16px; } .fav_nav_list .playlist_divider { font-family: 'VAGRoundedNext-Light'; font-size: 20px; line-height: 32px; color: #282828; padding: 0px 10px; vertical-align: top; } .tools_nav_outer { border-bottom: 0px solid #e6e7e8; padding-bottom: 24px; padding-top: 12px; } .tools_nav_title { position: relative; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; text-align: center; color: #f8f7f0; font-size: 14px; line-height: 24px; text-transform: uppercase; } .tools_nav_item { position: relative; display: inline; font-family: 'VAGRoundedNext-SemiBold'; font-size: 24px; line-height: 36px; color: #ec1c99; vertical-align: top;} .tools_nav_item:hover { color: #ec652c; } .tools_nav_list { position: relative; width: 100%; display: block; padding: 0px 16px; } .tools_nav_list .playlist_divider { font-family: 'VAGRoundedNext-Light'; font-size: 20px; line-height: 32px; color: #282828; padding: 0px 10px; vertical-align: top; } .playlist_complete_tick { position: absolute; right: 2px; top: 2px; height: 26px; width: 26px; } .playlist_complete_tick svg { position: relative; display: block; width: 100%; height: 100%; } .fav_check_circle { fill: #dcddde; } .playlist__complete__button:hover .fav_check_circle { fill: #ec652c; } .playlist__complete__button--complete .fav_check_circle { fill: #ec1c99; } .playlist__complete__button--complete:hover { border: 1px solid #ec1c99; color: #ec1c99; } .playlist__complete__button--complete:hover .fav_check_circle { fill: #ec1c99; } .playlist__favourite__completed_circle { position: relative; display: none; width: 32px; height: 32px; border: 1px solid #ec1c99; border-radius: 16px; padding: 3px; } .playlist__item__button__outer--completed .playlist__favourite__completed_circle { display: inline-block; vertical-align: top; margin-right: 8px; } .playlist__favourite__completed_circle svg { position: relative; display: block; width: 100%; height: 100%; } .playlist__favourite__completed_circle .fav_check_circle { fill: #ec1c99; } .fav_completed_count { position: relative; display: block; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 18px; color: #282828; font-style: italic; margin-top: 8px; } .playlist_section_delete { position: relative; display: inline-block; width: 14px; margin-left: 8px; cursor: pointer; vertical-align: top; top: 8px; } .playlist_section_delete svg { position: relative; display: block; width: 14px; height: 16px; } .playlist_section_delete svg path { fill: #ec1c99; } .playlist_section_delete:hover svg path { fill: #ec652c } .playlist_section_save { position: relative; display: inline-block; width: 14px; margin-left: 8px; cursor: pointer; vertical-align: top; top: 9px; display: none; } .playlist_section_save svg { position: relative; display: block; width: 14px; height: 16px; } .playlist_section_save svg path { fill: #ec1c99; } .playlist_section_save:hover svg path { fill: #ec652c } .playlist_section_edit { position: relative; display: inline-block; width: 18px; margin-left: 8px; cursor: pointer; vertical-align: top; top: 8px; } .playlist_section_edit svg { position: relative; display: block; width: 18px; height: 16px; } .playlist_section_edit svg path { fill: #ec1c99; } .playlist_section_edit:hover svg path { fill: #ec652c; } .playlist_section_delete_confirm_outer { display: inline-block; display: none; position: relative; font-size: 14px; line-height: 30px; margin-left: 16px; font-family: 'VAGRoundedNext-Light'; } .playlist_section_delete_confirm_outer a { color: #ec1c99; } .playlist_section_delete_confirm_outer a:hover { color: #ec652c; } .playlist_title_text { position: relative; display: inline-block; padding: 0px 8px; } .playlist_title_text--editable { text-decoration: underline; color: #ec1c99; outline: 0; } /* SUBJECTS */ .resource_subject_aspects_outer { position: relative; display: block; width: 100%; } .resource_subjects_outer { position: relative; display: block; width: 100%; border: 0px solid red; padding: 16px 0px; } .resource_subjects_title { display: block; width: 100%; text-align: left; font-family: 'VAGRoundedNext-SemiBold'; text-transform: uppercase; font-size: 16px; line-height: 21px; color: #414042; letter-spacing: 2px; padding-bottom: 4px; } .resource_subjects { position: relative; display: block; width: 100%; border: 0px solid red; font-size: 0px; line-height: 0px; } .resource_subjects_major, .resource_subjects_minor { position: relative; display: inline-block; border: 0px solid blue; vertical-align: top; } .resource_subjects_minor { margin: 0px 16px; } .resource_subjects_subtitle { display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; text-transform: uppercase; font-size: 12px; line-height: 14px; color: #414042; letter-spacing: 2px; padding-bottom: 2px; border-bottom: 1px solid #414042; } .resource_subject_hidden_outer { position: relative; display: block; } .resource_subjects_inner { position: relative; display: inline-block; text-align: center; padding-top: 8px; } .resource_subjects_inner_inner { position: relative; display: block; text-align: center; padding-top: 8px; } .resource_subject { position: relative; display: inline-block; vertical-align: top; margin-right: 10px; border: 0px solid red; } .resource_subject_icon svg { display: block; height: 36px; fill: #282828; margin: 0px auto !important; } .resource_subject_label { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 16px; text-align: center; padding-top: 6px; } .resource_subject_type { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 16px; text-align: center; padding-top: 6px; } .resource_rating_outer { position: relative; display: block; width: 100%; text-align: center; padding: 6px 0px 0px; } .resource_star { display: inline-block; width: 20px; } .playlist__item__outer .resource_subjects_outer { padding: 0px 0px; display: inline-block; width: auto; font-size: 0px; line-height: 0px; vertical-align: top; } .playlist__item__outer .resource_subjects_title { display: none; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; text-transform: uppercase; font-size: 12px; line-height: 14px; color: #414042; letter-spacing: 2px; padding-bottom: 2px; border-bottom: 1px solid #414042; } .playlist__item__outer .resource_subjects_subtitle { display: none; } .playlist__item__outer .resource_subjects_inner { padding-top: 0px; } .playlist__item__outer .resource_subject_label { display: none; } .playlist__item__outer .resource_subject_type { display: none; } .playlist__item__outer .resource_rating_outer { display: block; height: 0px; visibility: hidden; width: 0px; } .playlist__item__outer .resource_subjects_minor { margin: 0px 8px; } .playlist__item__outer .resource_subjects_minor .resource_subject_icon { margin-top:12px; } .playlist__item__outer .resource_subjects_major .resource_subject_icon svg { height: 30px; } .playlist__item__outer .resource_subjects_minor .resource_subject_icon svg { height: 18px; } .playlist__item__outer .resource_subject { margin-right: 5px; } .playlist__item__outer .resource_subjects_major { padding-top: 0px; } .playlist__item__outer .resource_subjects_minor { padding-top: 0px; } /* ASPECTS */ .resource_aspects_outer { position: relative; display: block; width: 100%; border: 0px solid red; padding: 16px 0px; text-align: left; } .resource_aspects_inner { position: relative; display: inline-block; width: auto; vertical-align: top; border: 0px solid red; } .resource_aspects_subtitle { display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; text-transform: uppercase; font-size: 12px; line-height: 14px; color: #414042; letter-spacing: 2px; padding-bottom: 2px; border-bottom: 1px solid #414042; } .resource_aspect_rating_outer { position: relative; display: inline-block; border: 0px solid blue; vertical-align: top; padding-top: 8px; } .resource_aspect { position: relative; display: inline-block; vertical-align: top; margin-right: 10px; border: 0px solid red; } .resource_aspect_icon svg { display: block; height: 36px; fill: #50B6E8; margin: 0px auto !important; } .resource_aspect_label { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 16px; text-align: center; padding-top: 6px; } .playlist__item__outer .resource_aspects_outer { padding: 0px 0px; display: inline-block; width: auto; font-size: 0px; line-height: 0px; vertical-align: top; } .playlist__item__outer .resource_aspects_inner { padding-top: 0px; } .playlist__item__outer .resource_aspects_subtitle { display: none; } .playlist__item__outer .resource_aspect_label { display: none; } .playlist__item__outer .resource_aspect { display: none; margin-right: 5px; } .playlist__item__outer .resource_aspect--three_or_more { display: inline-block; } .playlist__item__outer .resource_aspect_icon svg { height: 30px; } /* SDGS */ .resource_sdgs_outer { position: relative; display: block; width: 100%; border: 0px solid red; padding: 16px 0px; text-align: left; } .resource_sdgs_inner { position: relative; display: inline-block; width: auto; vertical-align: top; border: 0px solid red; } .resource_sdgs { position: relative; display: block; width: 100%; border: 0px solid red; font-size: 0px; line-height: 0px; } .resource_sdgs_subtitle { display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; text-transform: uppercase; font-size: 12px; line-height: 14px; color: #414042; letter-spacing: 2px; padding-bottom: 2px; border-bottom: 1px solid #414042; } .resource_sdg { position: relative; display: inline-block; vertical-align: top; margin: 10px 10px; border: 0px solid red; } .resource_sdg--all_sdgs { width: 100%; max-width: 200px; } .resource_sdg--all_sdgs svg { width: 100%; height: auto; } .resource_sdg_icon svg { display: block; height: 60px; margin: 0px auto !important; } .resource_sdg_label { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 16px; text-align: center; padding-top: 6px; } .playlist__item__outer .resource_sdgs_subtitle { display: none; } .playlist__item__outer .resource_sdg { margin: 2px 2px; } .playlist__item__outer .resource_sdg_icon svg { height: 30px; } /* OVERALL RATING */ .resource_rating_age_outer { position: relative; display: block; width: 100%; text-align: left; } .resource_overall_outer { position: relative; display: inline-block; border: 0px solid red; padding: 16px 8px 16px 0px; text-align: left; vertical-align: top; } .resource_overall_inner { position: relative; display: inline-block; width: auto; vertical-align: top; border: 0px solid red; } .resource_overall_subtitle { display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; text-transform: uppercase; font-size: 12px; line-height: 14px; color: #414042; letter-spacing: 2px; padding-bottom: 2px; border-bottom: 1px solid #414042; } .resource_overall_rating_outer { position: relative; display: block; width: 100%; text-align: center; padding: 6px 0px 0px; } .resource_overall_rating_outer .resource_star { width: 36px; } .playlist__item__outer .resource_overall_outer { padding: 0px 8px 0px 0px; } .playlist__item__outer .resource_overall_subtitle { display: none; } .playlist__item__outer .resource_overall_rating_outer { padding-top: 0px; } .playlist__item__outer .resource_overall_rating_outer .resource_star { width: 24px; } /* AGE RANGE */ .playlist__item__age_range__outer { position: relative; display: inline-block; border: 0px solid red; padding: 0px 0px; text-align: left; vertical-align: top; } .playlist__item__age_range__icons { position: relative; display: inline-block; width: auto; vertical-align: top; border: 0px solid red; font-size: 0px; line-height: 0px; display: none; } .playlist__item__age_range__icons svg { display: inline-block; height: 30px; margin: 0px auto !important; vertical-align: baseline; fill: #50B6E8; } .playlist__item__age_range__icons svg.fa-baby { height: 24px; } .age_range_divider { display: inline-block; position: relative; font-family: 'VAGRoundedNext-Heavy'; color: #50B6E8; font-size: 21px; line-height: 30px; border: 0px solid red; padding: 0px 0px 0px 3px; vertical-align: top; } .playlist__item__age_range__text { position: relative; display: inline-block; width: auto; vertical-align: top; border: 0px solid red; color: #282828; font-family: 'VAGRoundedNext-SemiBold'; font-size: 14px; line-height: 30px; padding: 0px 0px; } .resource_teacher_rating_outer .playlist__item__age_range__outer { text-align: center; } .playlist__item__hidden_age_ranges { display: none; } /* TOOL TIP */ #powerTip { width: 200px; white-space: normal; word-wrap: break-word; font-family: 'VAGRoundedNext-Light', sans-serif; font-size: 14px; line-height: 26px; color: #292929; background-color :#FFFFFF; box-shadow: none; padding: 8px; border: 1px solid #e6e7e8; border-radius: 6px; } .tooltip_content .resource_subject_label { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-SemiBold', sans-serif; font-size: 18px; line-height: 20px; } .tooltip_content .resource_subject_type { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Regular', sans-serif; font-size: 16px; line-height: 18px; } .tooltip_content .resource_rating_outer { display: block; } .tooltip_content .resource_aspect_label { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-SemiBold', sans-serif; font-size: 18px; line-height: 20px; } .tooltip_content .resource_aspect_label br { display: none; } .tooltip_content .resource_rating_outer { display: block; } /* TAGS */ .playlist__item__tags__outer { position: relative; display: block; width: 100%; border: 0px solid red; padding: 0px 0px; text-align: left; font-size: 0px; line-height: 0px; } .playlist__item__tags__title { position: relative; display: inline-block; font-size: 14px; line-height: 18px; font-family: 'VAGRoundedNext-Regular'; text-transform: uppercase; vertical-align: top; padding-right: 4px; } .playlist__item__tag { position: relative; display: inline-block; font-size: 14px; line-height: 18px; font-family: 'VAGRoundedNext-Light'; text-transform: uppercase; vertical-align: top; color: #50B6E8; } .tag_divider { position: relative; display: inline-block; font-size: 14px; line-height: 18px; font-family: 'VAGRoundedNext-Light'; text-transform: uppercase; vertical-align: top; color: #292929; padding: 0px 2px; } @media only screen and (max-width: 500px) { .playlist__item__outer { padding: 8px 16px !important; } .playlist__item__image { width: 35%; padding-bottom: 35%; } .playlist__item__text { width: 65%; padding: 16px 16px; font-size: 14px; line-height: 21px; } .playlist_item_title { font-size: 18px; line-height: 24px; } .playlist__favourite__button { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 142px; } .playlist__complete__button { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 142px; } .playlist__favourite__text { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 142px; } .playlist__favourite__completed { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 116px; } .playlist__item__button__outer { margin-top: 8px; } .playlist__delete { position: absolute; top: 4px; right: 4px; width: 16px; cursor: pointer; padding: 2px; border: 1px solid #ec1c99; border-radius: 2px; } .playlist__delete:hover { border: 1px solid #ec652c; } .playlist__uncomplete { width: 16px; border-radius: 2px; } .playlist_item_playlist_list_intro { font-size: 12px; line-height: 16px; } .playlist_item_list { font-size: 12px; line-height: 16px; } .playlist_favourite_link { font-size: 12px; line-height: 16px; } .playlist_divider { font-size: 12px; line-height: 16px; padding: 0px 3px; } .playlist_item_playlist_list_completed_note { font-size: 10px; line-height: 13px; } .fav_nav_item { font-size: 16px; line-height: 24px; } .fav_nav_list .playlist_divider { font-size: 13px; line-height: 22px; padding: 0px 5px; } .playlist_complete_tick { right: 2px; top: 2px; height: 16px; width: 16px; } .playlist__favourite__completed_circle { height: 22px; width: 22px; padding: 1px; } .playlist__item__button__outer--completed .playlist__favourite__completed_circle { margin-right: 4px; } .fav_completed_count { font-size: 12px; line-height: 16px; } .modal__outer--add-to-fav { padding-left: 16px; padding-right: 16px; } .modal__outer--add-to-fav .modal__content { padding: 24px 24px; } .modal__form--atf .modal__input { width: 100%; } .form__field__dropdown__outer { margin: 0px 0px; } .form__field__dropdown__default { font-size: 14px; line-height: 24px; padding: 8px 24px 8px 8px; } .form__field__dropdown__arrow { top: 14px; right: 10px; } .form__field__dropdown__option { font-size: 14px; line-height: 18px; padding: 0px 24px 0px 8px; } .modal__form--atf .form__field__title { font-size: 18px; line-height: 24px; text-align: center; padding-bottom: 4px; } .modal__button--atf { padding: 6px 16px; } } @media only screen and (min-width: 501px) and (max-width: 580px) { /* BLUE */ .playlist__item__outer { padding: 8px 16px !important; } .playlist__item__image { width: 35%; padding-bottom: 35%; } .playlist__item__text { width: 65%; padding: 16px 16px; font-size: 14px; line-height: 21px; } .playlist_item_title { font-size: 18px; line-height: 24px; } .playlist__favourite__button { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 142px; } .playlist__complete__button { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 142px; } .playlist__favourite__text { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 142px; } .playlist__favourite__completed { font-size: 14px; line-height: 14px; padding: 3px 8px; border-radius: 11px; width: 116px; } .playlist__item__button__outer { margin-top: 8px; } .playlist__delete { position: absolute; top: 4px; right: 4px; width: 16px; cursor: pointer; padding: 2px; border: 1px solid #ec1c99; border-radius: 2px; } .playlist__delete:hover { border: 1px solid #ec652c; } .playlist__uncomplete { width: 16px; border-radius: 2px; } .playlist_item_playlist_list_intro { font-size: 12px; line-height: 16px; } .playlist_item_list { font-size: 12px; line-height: 16px; } .playlist_favourite_link { font-size: 12px; line-height: 16px; } .playlist_divider { font-size: 12px; line-height: 16px; padding: 0px 3px; } .playlist_item_playlist_list_completed_note { font-size: 10px; line-height: 13px; } .fav_nav_item { font-size: 16px; line-height: 24px; } .fav_nav_list .playlist_divider { font-size: 13px; line-height: 22px; padding: 0px 5px; } .playlist_complete_tick { right: 2px; top: 2px; height: 16px; width: 16px; } .playlist__favourite__completed_circle { height: 22px; width: 22px; padding: 1px; } .playlist__item__button__outer--completed .playlist__favourite__completed_circle { margin-right: 4px; } .fav_completed_count { font-size: 12px; line-height: 16px; } .modal__outer--add-to-fav { padding-left: 16px; padding-right: 16px; } .modal__outer--add-to-fav .modal__content { padding: 24px 24px; } .modal__form--atf .modal__input { width: 100%; } .form__field__dropdown__outer { margin: 0px 0px; } .form__field__dropdown__default { font-size: 14px; line-height: 24px; padding: 8px 24px 8px 8px; } .form__field__dropdown__arrow { top: 14px; right: 10px; } .form__field__dropdown__option { font-size: 14px; line-height: 18px; padding: 0px 24px 0px 8px; } .modal__form--atf .form__field__title {font-size: 18px; line-height: 24px; text-align: center; padding-bottom: 4px; } .modal__button--atf { padding: 6px 16px; } } @media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */ .playlist__item__outer { padding: 8px 16px !important; } .playlist__item__image { width: 35%; padding-bottom: 35%; } .playlist__item__text { width: 65%; padding: 16px 16px; font-size: 16px; line-height: 24px; } .playlist_item_title { font-size: 21px; line-height: 26px; } .playlist__favourite__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__complete__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__text { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__completed { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 149px; } .playlist__item__button__outer { margin-top: 8px; } .playlist__delete { position: absolute; top: 4px; right: 4px; width: 16px; cursor: pointer; padding: 2px; border: 1px solid #ec1c99; border-radius: 2px; } .playlist__delete:hover { border: 1px solid #ec652c; } .playlist__uncomplete { width: 16px; border-radius: 2px; } .playlist_item_playlist_list_intro { font-size: 12px; line-height: 16px; } .playlist_item_list { font-size: 12px; line-height: 16px; } .playlist_favourite_link { font-size: 12px; line-height: 16px; } .playlist_divider { font-size: 12px; line-height: 16px; padding: 0px 3px; } .playlist_item_playlist_list_completed_note { font-size: 10px; line-height: 13px; } .fav_nav_item { font-size: 20px; line-height: 28px; } .fav_nav_list .playlist_divider { font-size: 17px; line-height: 26px; padding: 0px 5px; } .playlist_complete_tick { right: 2px; top: 2px; height: 22px; width: 22px; } .playlist__favourite__completed_circle { height: 28px; width: 28px; padding: 2px; } .playlist__item__button__outer--completed .playlist__favourite__completed_circle { margin-right: 8px; } .fav_completed_count { font-size: 12px; line-height: 16px; } .modal__outer--add-to-fav { padding-left: 16px; padding-right: 16px; } .modal__outer--add-to-fav .modal__content { padding: 24px 24px; } .modal__form--atf .modal__input { width: 100%; } .form__field__dropdown__outer { margin: 0px 0px; } .form__field__dropdown__default { font-size: 16px; line-height: 24px; padding: 8px 24px 8px 8px; } .form__field__dropdown__arrow { top: 14px; right: 10px; } .form__field__dropdown__option { font-size: 14px; line-height: 18px; padding: 0px 24px 0px 8px; } .modal__form--atf .form__field__title {font-size: 18px; line-height: 24px; text-align: center; padding-bottom: 4px; } .modal__button--atf { padding: 6px 16px; } } @media only screen and (max-width: 767px) and (orientation: landscape) { } @media only screen and (min-width: 768px) and (max-width: 840px) { /* PINK */ .section__outer--4_column .cols_2.playlist__item__outer { width: 75%; } .playlist__item__image { width: 35%; padding-bottom: 35%; } .playlist__item__text { width: 65%; padding: 16px 16px; font-size: 16px; line-height: 24px; } .playlist_item_title { font-size: 21px; line-height: 26px; } .playlist__favourite__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__complete__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__text { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__completed { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 149px; } .playlist__item__button__outer { margin-top: 8px; } .playlist__delete { position: absolute; top: 4px; right: 4px; width: 16px; cursor: pointer; padding: 2px; border: 1px solid #ec1c99; border-radius: 2px; } .playlist__delete:hover { border: 1px solid #ec652c; } .playlist__uncomplete { width: 16px; border-radius: 2px; margin-left: -24px; margin-bottom: 6px; } .playlist_item_playlist_list_intro { font-size: 12px; line-height: 16px; } .playlist_item_list { font-size: 12px; line-height: 16px; } .playlist_favourite_link { font-size: 12px; line-height: 16px; } .playlist_divider { font-size: 12px; line-height: 16px; padding: 0px 3px; } .playlist_item_playlist_list_completed_note { font-size: 10px; line-height: 13px; } .fav_nav_item { font-size: 20px; line-height: 28px; } .fav_nav_list .playlist_divider { font-size: 17px; line-height: 26px; padding: 0px 5px; } .playlist_complete_tick { right: 2px; top: 2px; height: 22px; width: 22px; } .playlist__favourite__completed_circle { height: 28px; width: 28px; padding: 2px; } .playlist__item__button__outer--completed .playlist__favourite__completed_circle { margin-right: 8px; } .fav_completed_count { font-size: 12px; line-height: 16px; } .modal__outer--add-to-fav { padding-left: 16px; padding-right: 16px; } .modal__outer--add-to-fav .modal__content { padding: 24px 24px; } .modal__form--atf .modal__input { width: 100%; } .form__field__dropdown__outer { margin: 0px 0px; } .form__field__dropdown__default { font-size: 21px; line-height: 24px; padding: 12px 16px; } .form__field__dropdown__arrow { top: 18px; right: 10px; } .form__field__dropdown__option { font-size: 14px; line-height: 18px; } .modal__form--atf .form__field__title {font-size: 18px; line-height: 24px; text-align: center; padding-bottom: 4px; } } @media only screen and (min-width: 841px) and (max-width: 1000px) { /* YELLOW */ .section__outer--4_column .cols_2.playlist__item__outer { width: 75%; } .playlist__item__image { width: 35%; padding-bottom: 35%; } .playlist__item__text { width: 65%; padding: 16px 16px; font-size: 16px; line-height: 24px; } .playlist_item_title { font-size: 21px; line-height: 26px; } .playlist__favourite__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__complete__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__text { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__completed { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 149px; } .playlist__item__button__outer { margin-top: 8px; } .playlist__delete { position: absolute; top: 4px; right: 4px; width: 16px; cursor: pointer; padding: 2px; border: 1px solid #ec1c99; border-radius: 2px; } .playlist__delete:hover { border: 1px solid #ec652c; } .playlist__uncomplete { width: 16px; border-radius: 2px; } .playlist_item_playlist_list_intro { font-size: 12px; line-height: 16px; } .playlist_item_list { font-size: 12px; line-height: 16px; } .playlist_favourite_link { font-size: 12px; line-height: 16px; } .playlist_divider { font-size: 12px; line-height: 16px; padding: 0px 3px; } .playlist_item_playlist_list_completed_note { font-size: 10px; line-height: 13px; } .fav_nav_item { font-size: 20px; line-height: 28px; } .fav_nav_list .playlist_divider { font-size: 17px; line-height: 26px; padding: 0px 5px; } .playlist_complete_tick { right: 2px; top: 2px; height: 22px; width: 22px; } .playlist__favourite__completed_circle { height: 28px; width: 28px; padding: 2px; } .playlist__item__button__outer--completed .playlist__favourite__completed_circle { margin-right: 8px; } .fav_completed_count { font-size: 12px; line-height: 16px; } .modal__outer--add-to-fav { padding-left: 16px; padding-right: 16px; } .modal__outer--add-to-fav .modal__content { padding: 36px 24px; } .form__field__dropdown__outer { margin: 0px 0px; } .form__field__dropdown__default { font-size: 21px; line-height: 24px; padding: 12px 16px; } .form__field__dropdown__arrow { top: 18px; right: 10px; } .form__field__dropdown__option { font-size: 14px; line-height: 18px; } } @media only screen and (min-width: 1001px) and (max-width: 1264px) { /* BLACK */ .playlist__item__image { width: 35%; padding-bottom: 35%; } .playlist__item__text { width: 65%; padding: 16px 16px; font-size: 16px; line-height: 24px; } .playlist_item_title { font-size: 21px; line-height: 26px; } .playlist__favourite__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__complete__button { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__text { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 185px; } .playlist__favourite__completed { font-size: 18px; line-height: 18px; padding: 4px 12px; border-radius: 14px; width: 149px; } .playlist__item__button__outer { margin-top: 8px; } .playlist__uncomplete { width: 16px; border-radius: 2px; } .fav_nav_item { font-size: 20px; line-height: 28px; } .fav_nav_list .playlist_divider { font-size: 17px; line-height: 26px; padding: 0px 5px; } .playlist_complete_tick { right: 2px; top: 2px; height: 22px; width: 22px; } .playlist__favourite__completed_circle { height: 28px; width: 28px; padding: 2px; } .playlist__item__button__outer--completed .playlist__favourite__completed_circle { margin-right: 8px; } .fav_completed_count { font-size: 12px; line-height: 16px; } .modal__outer--add-to-fav .modal__content { padding: 36px 24px; } .form__field__dropdown__outer { margin: 0px 0px; } .form__field__dropdown__default { font-size: 21px; line-height: 24px; padding: 12px 16px; } .form__field__dropdown__arrow { top: 18px; right: 10px; } .form__field__dropdown__option { font-size: 14px; line-height: 18px; } } /* RESOURCE PAGE */ .resource_sdg_title_logo { position: relative; display: inline-block; width: 50%; padding-bottom: 24px; } .section__outer--resource_sdgs a { color: #ec1c99; } .section__outer--resource_sdgs a:hover { color: #ec652c; } .section__outer--resource_sdgs .resource_sdgs_inner { padding: 0px 0px; display: block; width: 100%; text-align: center; } .section__outer--resource_sdgs .resource_sdg { width: calc((100% / 6) - 32px); border: 0px solid red; margin: 0px 0px; margin: 16px; perspective: 1000px; text-align: left; } .section__outer--resource_sdgs .resource_sdg_inner { position: relative; display: block; width: 100%; padding-bottom: 100%; transition: transform 0.4s; transform-style: preserve-3d; border: 0px solid red; } .section__outer--resource_sdgs .resource_sdg:hover .resource_sdg_inner { transform: rotateY(180deg); transition: transform 0.8s; } .resource_image_rating_outer { position: relative; width: 100%; display: block; text-align: left; padding: 0px 0px; font-size: 0px; line-height: 0px; } .resource_image_outer { position: relative; display: inline-block; width: calc((100% / 2) - 32px); margin: 0px 16px; vertical-align: top; padding: 16px; background-color: #FFFFFF; text-align: center; border: 1px solid #e6e7e8; border-radius: 10px; } .resource_image_outer img { position: relative; display: inline-block; width: 100%; margin: 0px auto !important; } /* .resource_image_outer::before { content: ""; position: relative; display: block; float: left; padding-bottom: 100%; width: 0px; } */ .resource_teacher_rating_outer { position: relative; display: inline-block; width: calc((100% / 2) - 32px); margin: 0px 16px; vertical-align: top; padding: 16px; text-align: center; } .teacher_rating_title { font-family: 'VAGRoundedNext-SemiBold'; font-size: 24px; line-height: 24px; text-transform: uppercase; letter-spacing: 2px; } .resource__download__button__outer { position: relative; width: 100%; display: block; text-align: center; padding: 48px 16px 16px; } .resource_teacher_rating_outer .resource_overall_outer { text-align: center; } .resource_teacher_rating_outer .resource_subjects_title { text-align: center; } .resource_teacher_rating_outer .resource_aspects_outer { text-align: center; } .resource_teacher_rating_outer .resource_aspect { margin-right: 0px; padding: 0px 16px; } /* Style the back side */ .resource_sdg_back-face { position: absolute; display: flex; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; color: white; transform: rotateY(180deg); font-size: 17px; line-height: 22px; padding: 16px; flex-direction: column; justify-content: center; } .section__outer--resource_sdgs .resource_sdg_inner svg { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ALSO LIKED */ .section__outer--resource_also_liked { text-align: center; background-color: #e6e7e8; } .resource_teacher_rating_outer .playlist__item__tags__outer { text-align: center; padding: 16px; } /* QUOTES */ .resource_quotes_outer { position: relative; display: block; width: 100%; border: 0px solid red; text-align: center; padding: 32px 0px; } .resource_quotes_upper_text { position: relative; display: block; width: 100%; border: 0px solid red; text-align: center; padding: 0px 16px 16px; } .resource_quotes_upper_text_title { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Regular'; font-size: 30px; line-height: 48px; } .resource_quotes_upper_text_inner { position: relative; display: block; width: 70%; margin: 0 auto; font-family: 'VAGRoundedNext-Light'; font-size: 18px; line-height: 30px; } .resource_quotes_each { display: inline-block; width: calc(50% - 32px); margin: 16px; vertical-align: top; background-color: #FFFFFF; border-radius: 8px; padding: 48px; border: 1px solid #e6e7e8; } .resource_quotes_each_text { position: relative; display: block; width: 100%; font-size: 24px; line-height: 30px; } .resource_quotes_each_by { position: relative; display: block; width: 100%; font-size: 18px; line-height: 24px; font-style: italic; padding: 8px 16px; } .content__inner--resource .playlist__item__button__outer { text-align: center; } .content__inner--resource .playlist__review__button { margin-top: 8px; } .content__inner--resource .playlist__impact__button { margin-top: 32px; } @media only screen and (max-width: 500px) { .resource_sdg_title_logo { width: 80%; } .section__outer--resource_sdgs .resource_sdg { width: calc(50% - 16px); margin: 8px; } .resource_image_rating_outer { text-align: center; } .resource_image_outer { width: 100%; margin: 0px 0px; } .resource_teacher_rating_outer { width: 100%; margin: 0px 0px; padding-top: 32px; } .resource_quotes_upper_text_inner { width: 100%; } .resource_quotes_each { width: calc(100% - 32px); padding: 24px; } .resource_quotes_each_text { font-size: 20px; line-height: 24px; } .resource_quotes_each_by { font-size: 14px; line-height: 20px; } } @media only screen and (min-width: 501px) and (max-width: 580px) { .resource_sdg_title_logo { width: 80%; } .section__outer--resource_sdgs .resource_sdg { width: calc(50% - 16px); margin: 8px; max-width: 260px; } .resource_image_rating_outer { text-align: center; } .resource_image_outer { width: 100%; margin: 0px 0px; } .resource_teacher_rating_outer { width: 100%; margin: 0px 0px; padding-top: 32px; } .resource_quotes_upper_text_inner { width: 100%; } .resource_quotes_each { width: calc(100% - 32px); padding: 24px; } .resource_quotes_each_text { font-size: 20px; line-height: 24px; } .resource_quotes_each_by { font-size: 14px; line-height: 20px; } } @media only screen and (min-width: 581px) and (max-width: 767px) { .resource_sdg_title_logo { width: 60%; max-width: 400px; } .section__outer--resource_sdgs .resource_sdg { width: calc((100% / 3) - 16px); max-width: 260px; margin: 8px; } .resource_sdg_back-face { font-size: 14px; line-height: 18px; } .resource_image_rating_outer { text-align: center; } .resource_image_outer { width: 100%; margin: 0px auto !important; max-width: 500px; } .resource_teacher_rating_outer { width: 100%; margin: 0px 0px; padding-top: 32px; } .resource_quotes_upper_text_inner { width: 100%; } .resource_quotes_each { width: calc(100% - 32px); padding: 24px; } .resource_quotes_each_text { font-size: 20px; line-height: 24px; } .resource_quotes_each_by { font-size: 14px; line-height: 20px; } } @media only screen and (min-width: 768px) and (max-width: 840px) { .resource_sdg_title_logo { width: 60%; max-width: 400px; } .section__outer--resource_sdgs .resource_sdg { width: calc((100% / 4) - 16px); max-width: 260px; margin: 8px; } .resource_sdg_back-face { font-size: 14px; line-height: 18px; } .resource_image_rating_outer { text-align: center; } .resource_image_outer { width: 100%; margin: 0px auto; max-width: 500px; } .resource_teacher_rating_outer { width: 100%; margin: 0px 0px; padding-top: 32px; } .resource_quotes_upper_text_inner { width: 100%; } .resource_quotes_each_text { font-size: 20px; line-height: 24px; } .resource_quotes_each_by { font-size: 14px; line-height: 20px; } } @media only screen and (min-width: 841px) and (max-width: 1000px) { .resource_sdg_title_logo { width: 60%; max-width: 400px; } .section__outer--resource_sdgs .resource_sdg { width: calc((100% / 4) - 16px); max-width: 260px; margin: 8px;} .resource_quotes_upper_text_inner { width: 100%; } .resource_quotes_each_text { font-size: 20px; line-height: 24px; } .resource_quotes_each_by { font-size: 14px; line-height: 20px; } } @media only screen and (min-width: 1001px) and (max-width: 1264px) { .section__outer--resource_sdgs .resource_sdg { width: calc((100% / 4) - 24px); max-width: 260px; margin: 12px; } } /* RESOURCE FILTERS */ .resource_filters_outer { position: relative; display: block; width: 100%; border: 0px solid red; background-color: #FFFFFF; } .resource_filters_inner { position: relative; display: block; width: 100%; padding: 8px 16px; max-width: 1400px; margin: 0px auto !important; } .resource_filters_title { position: relative; display: block; font-size: 18px; line-height: 30px; color: #ec1c99; font-family: 'VAGRoundedNext-Regular'; cursor: pointer; } .resource_filters_title_caret { position: relative; display: inline-block; height: 20px; width: 18px; fill: #ec1c99; vertical-align: top; border: 0px solid red; margin-left: 6px; } .resource_filters_notice { position: relative; display: block; font-size: 14px; line-height: 18px; color: #292929; font-family: 'VAGRoundedNext-Regular'; } .resource_filters_lower_outer { position: relative; display: none; width: 100%; border: 0px solid blue; font-size: 18px; line-height: 30px; padding-bottom: 16px; } .resource_filters_lower_group { position: relative; display: inline-block; vertical-align: top; width: calc(100% / 4); } .resource_filters_by { position: relative; display: inline-block; vertical-align: top; width: calc(100% / 4); border: 0px solid red; text-align: left; padding: 20px 16px 32px; font-size: 16px; line-height: 21px; font-family: 'VAGRoundedNext-Light'; } .resource_filters_lower_group .resource_filters_by { position: relative; display: block; width: 100%; } .resource_filters_by_title { position: relative; display: block; font-size: 16px; line-height: 21px; font-family: 'VAGRoundedNext-SemiBold'; } .resource_filter { position: relative; display: inline-block; cursor: pointer; } .resource_filter.selected { font-family: 'VAGRoundedNext-Light'; color: #ec1c99; } .resource_filter.selected:after { content: " \2713"; } .resource_filter.deselected { font-family: 'VAGRoundedNext-Light'; color: #A8A8A8; } .resource_filter.deselected:after { content: " \2718"; } .resource_filter.hover { color: #ec652c; } .resource_filter_all_switches { position: relative; display: block; } .resource_filter_deselect { position: relative; display: inline-block; color: #50B6E8; vertical-align: top; cursor: pointer; } .resource_filter_select { position: relative; display: inline-block; color: #50B6E8; vertical-align: top; margin-left: 8px; cursor: pointer; } .resource_filter_divider { position: relative; display: inline-block; color: #282828; font-size: 12px; line-height: 18px; vertical-align: top; margin-left: 8px; } .resource_filter_deselect:hover { color: #ec652c; } .resource_filter_select:hover { color: #ec652c; } .apply_filters_button { display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 18px; line-height: 18px; padding: 6px 16px; border-radius: 16px; background-color: #FFFFFF; text-transform: uppercase; border: 1px solid #ec1c99; cursor: pointer; width: 220px; text-align: center; margin: 4px 0px; } .apply_filters_button:hover { color: #ec652c; border: 1px solid #ec652c; } .video_title { font-family: 'VAGRoundedNext-SemiBold'; font-weight: normal; font-size: 18px; line-height: 24px; padding-bottom: 4px; } .resource_marker { position: absolute; display: block; bottom: 0px; right: 0px; background-color: #50B6E8; padding: 3px; z-index: 1; font-weight: bold; } @media only screen and (max-width: 500px) { .resource_filters_by { width: 100%; } .resource_filters_lower_group { width: 100%; } } @media only screen and (min-width: 501px) and (max-width: 580px) { .resource_filters_by { width: 100%; } .resource_filters_lower_group { width: 100%; } } @media only screen and (min-width: 581px) and (max-width: 767px) { .resource_filters_by { width: 50%; } .resource_filters_lower_group { width: 50%; } .resource_filters_lower_group .resource_filters_by { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 840px) { .resource_filters_by { width: calc(100% / 3); } .resource_filters_lower_group { width: calc(100% / 3); } .resource_filters_lower_group .resource_filters_by { width: 100%; } } @media only screen and (min-width: 841px) and (max-width: 1000px) { .resource_filters_by { width: calc(100% / 3); } .resource_filters_lower_group { width: calc(100% / 3); } .resource_filters_lower_group .resource_filters_by { width: 100%; } }